CUSTOM INTERFACE EXAMPLE

I'm going to take you through setting up and creating a simple Interface file that can be loaded directly into the XML editor.

Step 1. Set up the new Files

Inside of the interface folder ( source/interface/ ) create a new folder. Inside, create a new FLA file called newInterface.fla, a new Actionscript file called NewInterface.as, and an XML file called test.xml (the XML file can contain whatever XML data you want)




Open newInterface.fla and type NewInterface into the document class on the properties panel. This will associate NewInterface.as with this FLA file.

Next, select File > Publish settings and click on the Flash tab. From here, you will see ActionScript Version 3.0 and a button labeled "settings". Click on settings. Add the path to the "source" folder to the Classpath field. This way, we can locate and use the existing XMLEditor library instead of having to make copies of the folders.



 

Step 2. Start creating the interface

Now that we are ready to go, let's start by setting up our Actionscript file. Create the class and the constructor. Remember, all interfaces will build upon the XMLInterface class so we need to import the xmleditor package and extend the XMLInterface class.


package {
import com.michaelhejja.xmleditor.*;

public class NewInterface extends XMLInterface {

public function NewInterface(){
}

}
}

At this point, if we published the Flash file, we would see traced out "XML Interface : live mode", and then a runtime error. This is because the default setting is live mode. The file is looking to be passed XMLData from the main application, but it is not there. At this point, we are still testing, so we will add testing = true; to the constructor.


package {
import com.michaelhejja.xmleditor.*;

public class NewInterface extends XMLInterface {

public function NewInterface(){
testing = true;
}

}
}

If we publish again, we will now see that the message "XML Interface : testing mode" is being traced out, and there are no runtime errors.

Step 3. Receiving and displaying XML Data

Inside of newInterface.fla, draw a new input text field and give it an instance name of xml_txt. Set it to multiline, Arial font, and use device fonts.

In our Actionscript, we now need to create our init() function.
We are going to use override, so that init can fire at specific times based on the init() function inside of the XMLInterface class. In live mode (testing = false), init will fire as soon as XML Data is received from the main application. When testing = true init will fire after the test XML file has been loaded.


package {
import com.michaelhejja.xmleditor.*;
import flash.text.TextField;

public class NewInterface extends XMLInterface {

public function NewInterface(){
testing = true;
}

public override function init():void {
xml_txt.text = XMLData;
}

}
}

If you publish now, you will see the test XML data inside of the text field. You have already made a simple XML Editing interface! This example is just a simple text field, but you can technically represent and manipulate the data however you want.
Now we just need to save the data.

Step 4. Saving XML Data

Drag a Simple Button onto the stage and give it an instance name of saveButton.



In the actionscript file, import MouseEvents and add a CLICK event to the button that fires a function called saveData. In that function, we are simply going to update XMLData with the text that is in xml_txt, then we are calling the built in function saveXML();


package {
import com.michaelhejja.xmleditor.*;
import flash.events.MouseEvent;
import flash.text.TextField;

public class NewInterface extends XMLInterface {

public function NewInterface(){
testing = true;
}

public override function init():void {
xml_txt.text = XMLData;
saveButton.addEventListener(MouseEvent.CLICK, saveData);
}

private function saveData(e:MouseEvent):void {
XMLData = new XML(xml_txt.text);
saveXML();
}

}
}

If you publish the Flash file now, you will see that in testing mode, the current XML Data that would be saved is simply traced out. If we were in live mode, the data would be sent back to the main application to save the file.

Step 5. Using the new interface

All we need to do now is publsh the file in live mode and it will be ready for use! Comment out the line testing = true, then publish the file again. Next, go to your location of XML Editor in a browser and login as ADMIN. Right-click on the main menu and select "Upload new Interface." Select your newly created newInterface.swf. It will be uploaded into the editor and ready for use.

Right-click on any of the buttons and select "Choose Interface." From the list, select your new interface and click "Set Interface." The new interface will be loaded into the page you set it for and your settings will automatically be saved.


If you have created an awesome custom interface and want to share it with the world, or if you have a product for sale that you have made an editing interface for, send me an email and I will feature your custom interface on the product page of FlashDen, as well as on the homepage of www.flashxmleditor.com!