David Flatley > Actual RIA info > Adobe AIR > Some AirSpace Goodies
Some AirSpace Goodies
Now that I have a little more time once again to continue working on AirSpace I want to tighten up a few things with the app. Since this blog is pretty new and I did promise to write some useful tidbits, it probably wouldn’t hurt to reiterate exactly what AirSpace is. I had a few friends, family members and clients asking if I could help them style their MySpace profiles…{shudder}. No…please no!
Wasn’t exactly looking forward to that as I never really bothered with MySpace before, but when I had the idea to write an Adobe AIR application with Flex that’ll let them do the styling themselves I knew I was on to something. So far, there’s been heaps upon piles of suggestions to improve on AirSpace, many of which are current in the latest version 1.0.0.5. Some cool ideas were pre-made styles, which is going to take a while to create, but there’s a layout browser built into the app now. You can edit styles, save them to your machine and reopen them for a later date, swap them out on a whim and so on. Currently, there’s also a “practice template”. When you start up AirSpace, you’ll see a generic MySpace page to the right. You can check out your style edits as you go and apply them to your actual MySpace page when you’re ready. Here’s more info on my other blog.
For example, I think the Tables styles are still a bit buggy, this is probably due to overwritting some bit of CSS in the final output. Maybe I can jump back on that today. In the meantime, a few developers were asking for details on how I got certain things working so I figured I’d share a bit of code (useful once again).
The overall app has a HDivideBox with an Accordion on the left side that holds all the custom components (basically just forms with inputs and combo boxes), and an HTML control on the right side to show the practice page and later to get you logged into your MySpace account and apply your style edits.
Throughout the app, whenever you make changes to styles, you hit the save button in each view (child of the accordion) and AirSpace is just appending all the values of the input text fields and combo boxes into a big string that’ll output the CSS later. It doesn’t do anything with it just yet other than hold that formatted string, and at the same time it’s building an XML template which is the overall data store for the app. Those same values you entered are being plopped into this XML which becomes an XMLList and ultimately all the views and their children are bound to that same XMLList. That way, any updates to the template and the whole app’s aware of what’s going on instantly. I love Flex 🙂
So a few developer friends were asking how I’m handling updating the binding of data throughout the app. Here’s the basic set up. The Accordion doesn’t instantiate it’s children when the creationComplete fires, unless you change it’s creation policy to “all” like so.
Now the Accordion knows to instantiate all it’s children right away, that solved that problem. Now I know they’re all created regardless of whether the user clicked on each view or not.
Provided the user opens AirSpace and does nothing else with it besides hitting the Generate Code button, the app is going to call all those children and demand their two strings created from the components within them. It wants a string formatted for CSS, and it wants my internal use XML string to pass along to the XMLList that everything binds to.
Hitting the Generate Code button will do the following:
public function generateCode():void {
// clear old code and xml
myCode = "";
generatedCode.text = "";
myCodeXMLStr = "";
// myCodeXML gets written here:
myCode = "\n";
myCodeXMLStr = "\n";
myCodeXMLStr += "\n";
myCodeXMLStr += "\n";
if(backgroundFormComponent != null &&; backgroundFormComponent.backgroundCode != ""){
myCode += backgroundFormComponent.backgroundCode + "\n";
myCodeXMLStr += backgroundFormComponent.myCodeXMLStr + "\n";
}
if(contactTableFormComponent != null && contactTableFormComponent.contactTableCode != ""){
myCode += contactTableFormComponent.contactTableCode + "\n";
myCodeXMLStr += contactTableFormComponent.myCodeXMLStr + "\n";
}
// continues on
This is only part of the generateCode() function. It’s going to clear all the other vars with their strings, run through each child view in the Accordion (we know definitely is instantiated already) and ask for their formatted CSS string to add to myCode for the user’s final output, and their formatted XML string to add to myCodeXMLStr for later binding.
Once any changes have been made, the myCodeXMLStr, representing the internally used XML code, is updated, then cast as a bindable XMLList again and a new event is triggered. I extended flash.events.Event to let the rest of the app know it needs to update it’s views. I could have probably cut out the new event entirely and just had everything directly bind to the XMLList data, but it was the Thanksgiving and I only had so much time 😛 so I can always update it later, but for now it works great. Here’s the extended Event class that passes along the new XMLList to each view, and from that point, their components update to reflect the changes.
package events
{
import flash.events.Event;
public class LayoutEvent extends Event
{
public var myXMLInfo:XML;
public function LayoutEvent(type:String,myXMLInfo:XML){
super(type);
this.myXMLInfo = myXMLInfo;
}
public override function clone():Event{
return new LayoutEvent(type,myXMLInfo);
}
}
}
That’s basically how I’m keeping all the data and user edits bound and passing it along to the zillion form controls to accept and display changes to any other part of the app. More improvements to come in the future, but although I won’t post all the code, I figured this would be useful for the idea behind AirSpace, as people were asking for it.
