A XML Editor which can help playing around with E4X and manipulate the XML. Which will be hosted as an online service here and will also be available as a Apollo application later.

Here is the alpha version of it. Sample XML displayed will give you a clue of what's coming next :)

Here is a Flex 2 application which helps to quickly refer to MXML tags and and its attributes.

http://opensource.adobe.com/wiki/display/flexsdk/Coding+Conventions

Looks like the document has been put up by adobe for Flex SDK contributors' reference. Nevertheless, it can be adopted by any Flash/Flex developer writing Actionscript code.

When using Flex you often need to transfer data to a backend server, and one option to do this is to use XML; this tutorial is going to explain the basics of sending XML data to PHP. I am going to show how to build XML data using Flex's built in classes and then we will send the data over to PHP to be handled however you would like. The code for this tutorial is arranged slightly different than earlier tutorial, all the ActionScript code is in separate files that are included into the mxml. This technique is very similar to one used for ASP.Net pages (basically a code behind) - and helps to separate the logic code from the display.

Well what's a tutorial without a working example, so below we have the example application for the day. A simple contact manager which allows you look at the details on each contact and add new contacts. The add contact button at the bottom will pop up a new window to fill out the contact information. Once filled and the "Add Contact" button has been pressed on the pop up, the client XML information is built and send off to PHP. The PHP doesn't do much in this example except parse the XML and build an object from the data. At that point you can do what ever you would like with the data.

Setting up the basic interface

We are going to start by building the interface for the our application. The main screen doesn't have anything particularly complex. We start with a simple panel and inside the panel we add a list for our contacts, several labels and textareas for the different pieces of information available about the contact, and a control bar for an "Add Contact" button. All these come together to create our simple example UI. All this is in the code below.






You might notice that I have included the view source link, which is using the nice view source code. This will allow you to look around at all the source and also the PHP code used in the example.

Creating main application ActionScript

Next we are going to start building the actionscript behind the main mxml file. The first thing we do is create a new actionscript file, mine is named "XMLAddressBookTutorialScript.as" because my main mxml file happens to be "XMLAddressBookTutorial.mxml". I follow the same pattern for all my files.

The first item to be added to the script file is a couple variables that we are going to use. The first is an XMLListCollection, which we use to hold all of our contacts and the second is a single XML item for the currently selected contact from our list. Another item we are going to build here is a initialization function for the application. This function sets a couple static parameters on the XML object (more on this in a second) - I also setup the initial names in the list here but that code is unimportant.


The two properties that I set on the XML class are above. The first, ignoreWhitespace, will ignore space characters at the beginning or end of any text nodes. The second is prettyPrinting which is much more important because it will make sure that when we use toXMLString() that the XML is simply printed without any added formatting (that would screw up parsing it in PHP). Now we need to add our script file to our mxml file and also hook up the initialization function.

We first add a tag to our application, directly under the opening application tag. Inside this tag we set a property named source equal to the path to our script file, which should be in the same directory. Also done at this time is the hooking into the creation complete event of the main application tag. Both snippets can be found below.


The new script tag.


With that done we can now start building new contacts. The next item of business is to hook up the Add Contact button at the bottom of our panel. This is done by simply adding a click event to the button. The function is then added to our script file. The following code is our new button.


Inside the actionscript file we add the addContact function which does a couple things. But before we get too far we add a new private variable named addContactPopUp. This variable will hold an AddContactForm, which we will get to building in just a moment. Back to the addContact function - inside this function we popup a new window and then center it. For more information about building and using pop ups check out our pop up menus tutorial. The new function which is added to our actionscript file follows:

Building the Add Contact pop up window

So now we are going to switch gears a little bit and build a quick pop up window. For the pop up I built a class that extended TitleWindow. The mxml file, "AddContactForm.mxml" for this window doesn't have a lot to it - just a couple labels and text inputs to enter the contact information. Again we have a control bar with a button for adding the contact.


A few items to note are the Event metatag which is added to the metadata. This defines a custom event for this class of type flash.events.Event, more on Event metatag can be found here. When the close button is pressed we remove the pop up using PopUpManager Also you can see we included an actionscript source file "AddContactFormScript.as" and finally we have a click event for our button.

We now create the actionscript file we have included into the mxml file. Inside this file is almost nothing; all we do is dispatch the custom event we created when the add contact button is clicked.

Producing the contact XML object

In our pop up window we throw an event when the user clicks the add contact button. Well, we are going to add an event listener for this custom event. We attach the event listener when we create the pop up, so in our main script file we are going to add the following to our addContact function.


Next we need to create the function that is defined in the addEventListener call. This function is going to do most of the heavy lifting for the application. So I will show it off real quick then go through the pieces.


The function is started by creating a new XML object for our new contact. We initialize the XML to be a simple XML structure of:


Once that is in place we can start adding attributes and child nodes using E4X XML processing standard, more info here. We first add two attributes to our XML root node using .@ syntax; this allows us to just use .@name to reference the "name" attribute. Then we can simply set the attributes to the value we want. There are also functions to handle setting attributes.

To add the address and notes we append a child node to the our new contact XML. We first do this by creating an XML object for the address and setting it equal to a simple xml structure holding the address in the text of a

node. This is then appended as a child to our new contact XML. The second method we use is much easier and take advantage of E4X processing; this time we can just use . (dot) syntax to access and set child nodes. That pretty much takes care of creating the XML.

Last we add it to our contact list and also remove the pop up window.

Displaying the XML data

We use the same E4X syntax to display the data by doing some nice data binding to our visual components and the list. The first item to bind is our contact list variable which we created earlier in the tutorial. We bind this to our list component's dataProvider property. Also we want to keep a current reference to the selected contact in the list which can be done by using a tag. The updated list and new tag are below.


The new tag.


To display the correct information in our list though we need use a label function, which is also added to our list component. This label function takes in the row data and returns the string to be displayed; in our case we are just going to return the value of the name attribute. This gives us our final list component and a new function to go in our main script file.


New function for the script file:


Now that we have a reference to the currently selected contact we can update the labels and textareas to bind their text to values in the current contact. In our panel we update the labels to reflect the data binding. The new items are below.

Sending XML data to PHP

The final thing we need to do in Flex is send our XML data to PHP to be handled. We are going to do this using a simple HTTPService which will send our XML data as a GET variable to a PHP script to parse and handle the data. We define the http service just under our script tag in the main mxml file like so:


Sending it is just as easy, we do this by simply adding a tiny bit of code to the end of our function to build the XML object. This code just creates a parameter object and sets the property contact equal to the return of our new contact object calling toXMLString. The following code is added to the end of the addContactToList function.

Parsing XML in PHP

Now that data has been sent to PHP we still need to parse it and then it can be handled. Below is the entirety of PHP file I used. You first will see a small class to hold details about a contact, and the rest is there to parse the XML data (we will go over this in just a second).


Well the first thing we do is create an XMLReader object (only available in php 5+). This is used to parse the xml easily. We also set a couple parse properties on the XMLReader object. These tell the XMLReader to ignore trying to validate the XML or apply a DTD to it.

We then loop through the XML document reading each node; while doing this we check to see if it is an opening node, and if it is one we then switch on the name (yes we don't need to do this in this particular case but I was making it more general). If the name is "contact" we know we have a new contact to add. We then build a new contact object by getting the attributes. Once the attributes are gotten we then read to get to the address text node (there might be a better way to do this depending on your situation) and the final notes text node. Once the contact information is added to the contact object we add it to an array of contacts.

Just to double check things I printed out the contents of my array, which would only have one contact for this application. I used FireBug - which I highly recommend - to make sure I get the correct response from PHP.

Wrapping up

That pretty much takes care of the basics of handling XML in Flex and sending it over to PHP to be handled. I am not including all the source in one big box because, well, there is a lot of it, but you can browse the source here. If you interested in some other PHP/Flex stuff we have several other tutorials and the Adobe Dev Center has some like this one. If I was unclear about anything let me know or if you just want to leave a comment go for it.

Considering that this website is based around creating easy to follow and useful tutorials, I decided to share the places I go for Flex tutorials and information. Now of course the number one place I would go to find Flex tutorials would be this site, but you already knew that.

My first list here is some of the great places I go to find Flex tutorials. If you can’t find a particular item at one of these sites it’s going to be hard to find it anywhere on the web. These are in no particular order but I was very picky on what I put in this category. I apologize in advance to anyone who feels I have missed a big site or blog.

Flex Examples

http://blog.flexexamples.com/

Peter deHaan currently works for Adobe on the Flex SDK QA team. He writes so many small tutorials that it’s hard to even keep up with this man on any level. I always go to this site if I am in need of a small specific item.

Dzone

http://www.dzone.com/links/index.html

Dzone is a great community based site for sharing developer links. The site is setup in a similar fashion as popular sites such as Digg or Reddit. The great thing is that this site has as many tutorials linked on it as anywhere else on the web.

Adobe Flex Developer Center and Cookbook

http://www.adobe.com/devnet/flex/

The Adobe Developer Center is great resource for complete tutorials and articles on how to get started with Flex or any of the other Adobe products. The other Adobe resource is the Cookbook which is built off of community code snippets that solve small programming tasks.

Doug McCune

http://dougmccune.com/blog/

Doug is a pretty big name in the Flex community (he gives presentations all over the country at Flex events), most of the items you are going to find on his site are examples of cool applications built using Flex. These examples usually include the source code. I would not strictly call them tutorials, but all the source and examples make it a great place to learn Flexing techniques.

Google

http://www.google.com

Sounds cliche but Google is the best single source for finding Flex tutorials and information. Simply search for anything your looking for (like “flex tutorials”), Google is also the best way find anything in the Flex documentation. Usually I will search for something like “flex 3 combobox” or similar.

The above list is strictly where I go to find and research Flex tutorials. I felt that it would really be a disservice to fail to mention some of the the other great Flex resources out there. The people and places below are some of the best Flex assets out on the web; be sure to take advantage of these.

Franto.com Flash Blog

http://www.franto.com/blog2/

This blog is written by Frantisek Kormanak (Franto) and has great deal of posts on how to program in Flex and in Flash. I would say that most of his posts are informational and include great examples.

Flex.org

http://flex.org/

Flex.org is the main community site for Flex developers, which includes a showcase and resources for everything from PHP to .Net.

Ryan Stewart

http://blog.digitalbackcountry.com/

Ryan Stewart is a Platform Evangelist for Adobe who is also a prolific blogger. He writes about anything involving RIAs and web technologies that catch his fancy. You can also check out his ZDNet blog here.

Alex Harui

http://blogs.adobe.com/aharui/

Alex writes short posts that are usually nice Flex examples solving common and uncommon problems people run across in Flex. He works with the Adobe Flex core team in San Francisco.

Eric Feminella

http://www.ericfeminella.com/blog/

This gentleman writes very interesting pieces on Flex, AS3, and programming architecture. He has given a lot of code to the community and is always trying to architect a new solutions for common issues.

There were also some close runner ups, most of the below people and sites post good information, but just may not post as often or sometimes they are off topic - not that off topic posts are bad.

• The Flex Show
• James Ward
• Mike Downey
• Ted Patrick
• Marco Casario
• TutsBuzz.com

All things considered I think I have put together a good set of resources for someone who is looking for a myriad of Flex information. If we have missed any site out there let us know in the comments, the more the merrier.

GigTide is an online resume builder that allows you to easily create professional looking resumes with little effort. The Flex interface is a series of forms that you fill out - you can enter in your objective, contact details, employment history, education, awards and more. You can also select a template that the system will use to merge your data with, creating a pretty nice looking web page, PDF and Word document that you can send out to people. The application includes built in spell checking in the Flex application, which is a nice feature. I don't know if they're using Grant Skinner's Spelling Plus library or something else.

GigTide also includes a simple dashboard, so you can see how many people are viewing your resume, and where they're coming from. Registering for GigTide allows you to save multiple copies of your resume, and add in cover letters as well. Registration and use of GigTide is free during their beta period (until January 1st, 2008). The website doesn't say how much GigTide will cost once the beta period is over.

Create text, grab BitmapData from it, loop though its pixels and represent them with DisplayObjects.

Again, the ‘trick’ is to check which pixels are transparent. An interesting quality of Anti-Aliased text is that the “rounded” or “Anti-Aliased” pixels are the color of the text, except with varying transparency, meaning the text looks good on any color background.

I took advantage of this by generating “thicker” rows in the Z plane for darker pixels… Hard to explain in words, but let’s allow the screenshots and the app speak for themselves.

Click here to fiddle with my toy…

click here, or right click app for source

Naturally, the number of Planes makes it more or less impossible to animate the camera with an EnterFrame or so… It’s still cool to see the camera move around using direction keys. Perhaps with Seb Lee-Delisle’s frame by frame movie generator thingy-ma-bob…

UPDATE: Apparently the .swf was missing… it’s there now. I realize many of you spent sleepless nights shredding your nails with ye sharp fangs. Crisis is now over.

This is actually the first experiment I wanted to do, but I got too excited about the anti-aliased one. Not much to talk about here, just runs through the pixels and represents them as Cube instances. This time I used Tweener for the possibility of “auto animating” Reminds me of that crappy windows 3d text screensaver, except, I don’t have shading… Hopefully I’ll build the courage to install great white soon… Maybe I could be like the cool kids and add fire to it too

There is some ‘flickering’ going on between the individual Cubes. If time permits, I’d like to optimize this to combine as many Cubes into “stretched” cubes as possible. I’ve got a bunch of ideas stemming from these two experiments, hopefully I’ll be blogging a plenty

Draft of the AS2 to AS3 converter. Try it here, download it here.

the actionscript parser portion of the class to get it beyond a simple list of regex calls and more towards a smart converter. New features include:

• Updates createTextField to new TextField() syntax. Sets x, y, width and height if they are not the default (0). Uses addChildAt unless getNextHighestDepth() is used for argument 2, in which case addChild is used. Parses the first parameter and uses it as the variable name unless it is not a simple string, in which case a temp name is used, and the original name is shown in a comment on top of the block. Pretty sweet.
• Updates getURL to new URLRequest syntax. Works as above.
• Updates var, function and class to public var, public function and public class to remove warnings as requested by my childhood hero Robert Penner. Parses the class to recognize block depth to not affect local vars and inline functions.
• Smarter class and package name recognition.
• Removes unnecessary imports in the same package as the current class.
• Should properly recognize various line endings (crossing fingers).

The zip now includes a command-line executable called convertas2as3 for those Windows users who don’t feel like installing PHP. The zip is pretty big because it includes the php libraries for Windows users. On other platforms you can run the command-line utility in src/convert.php by typing php convert.php at the command line.