Creating Custom Components

There’s been a bit of traffic on the flashcoders mailing list today about how to create custom components extending the UIComponent class. Jesse Warden droppped a link to some really excellent step-by-step tutorials (click here for tutorials, click here for source files) which walk you through the entire process from start to finish. Not only are the tutorials excellent and walk you through some of the more common pitfalls of component development (I know I personally have less hair) , but you also get a taste of JesterXL’s lingo which adds a bit of flava to the learning process (my favorite from this session is how he emphasizes the second syllable in “init” which makes it sound as though you are in the middle of something rather than initializing something). Anyways, Jesse is an excellent resource for the community and deserves many kudos. Taken together with Chafic Kazoun’s excellent series of articles on Ultrashock the community now has a very detailed set of tools to assist the component development process. I know I speak for many others in saying thank you to Jesse and Chafic for the time and effort they put into these tutorials.

ComboBox Item Specific Icons

A friend of mine, and fellow flasher, from the Pacific Northwest IM’d me yesterday about creating a custom cell renderer for a ComboBox. What he wanted to do was deliver a custom icon for each item based on the SCORM objective results returned from the LMS. After thinking about his need for a couple of seconds I remembered a method of the List component which is probably not the most intuitively named–setPropertiesAt().

Now you might be asking yourself what this method has to do with a ComboBox and and custom icons? The answer of course, is that the ComboBox contains a List component which it uses for its drop-down menu. The “dropdown” property of the ComboBox provides a reference to this List which means that we can enjoy all of the fun properties and methods provided by the List without having to fool around with extending it.

This is where setPropertiesAt() arrives on the scene. The setPropertiesAt() method takes two arguments: 1) the index of the item whose properties you wish to set and 2) an object enumerating the “backgroundColor” and “icon” properties. This provides us with an easy way to drop an item specific icon or background color into a List cell, or a ComboBox dropdown cell for that matter, by simply providing the linkage ID of a MovieClip icon or hex number for the background color:

comboBox.dropdown.setPropertiesAt(0,
{backgroundColor:0xCCCCCC icon:"passedIcon"});

It also serves as a reminder of how important method names are to an API. The setPropertiesAt() method makes perfect sense after the context is set and understood, but is not very intuitive for someone searching for the means to set an icon or background color in a List cell.

Organizing Eclipse Projects With Working Sets

One of the more useful features of the Eclipse platform is the organizational capabilities it gives you. In particular, Working Sets allow you to group your projects together in logical categories or sets. What’s really nice is that a project can belong to more that one Working Set which allows you enormous flexibility in how you classify and work with projects. For example, I’ve broken my projects into Java and Flash sets and “work” and “experimental” sets as well as a catch all “all projects” set. One thing to keep in mind is that you can use Eclipse and its powerful organizational capibilities with projects which are not related to coding at all. As an example, I use Eclipse at the office to organize all RoboHelp Documentation Projects. I’ve included a Captivate movie which walks you through setting up a working set, or you can follow the steps below.

1. In the Package Explorer pane click the drop-down arrow menu and choose “Select Working Set” from the drop down menu.
2. Click the “New…” button from the Select Working Set Dialog window.
3. Choose the Working Set Type you wish to create and click Next.
4. Create a name for your Working Set in the provided input text field.
5. Select the projects you wish to add to your new Working Set by selecting the appropriate check boxes and click Finish.
6. Now select the Package Explorer’s drop-down arrow menu again and choose the “Show” menu item. Verify that the “Working Sets” sub-menu item is selected and not the “Projects” sub-menu.
7. Create as many Working Sets as you desire.
8. Go back to the Package Explorer’s drop-down menu arrow menu and choose the “Select Working Sets” menu item again.
9. Use the check boxes in the Select Working Sets dialog box to toggle on the Working Sets you wish to be viewable in the Package Explorer and click OK.
10. The selected Working Sets should now be visible in the Package Explorer.

ASDT Auto Generate Getters / Setters

I just installed the 7.1 release of the ASDT Editor plugin for Eclipse and noticed a feature which is either new, or that I was unaware of previously. You can now auto generate getters / setters for all private properties in the same manner that the Eclipse Java Editor allows you to. In order to take advantage of this feature the file’s editor must have focus, then simply click Ctrl+Shift+G to open the generate Getters / Setters dialog box (you can also go to the “Source” menu and select the “Generate Getters and Setters” menu item). The dialog box allows you to select which properties you would like to auto-generate code for and whether you want to generate both getters and setters or just one or the other. This is an absolutely killer feature which helps prevent silly typos and pushes back the inevitable carpal tunnel–awesome to see a new release from the ASDT dev team!

Event-Based LMS / Flash Communication

Those who work in the eLearning field, know that Flash SCO (Shareable Content Object) to LMS (Learning Management System) communication is an ugly mess. The SCORM RTE specification requires JavaScript as the communication bridge between a SCO and and the LMS. JavaScript is asynchronous in nature which means that any time you make a request for information from the LMS you must enter into some type of “loop” waiting for a response–typically this takes the form of an interval, or a frame based loop. In the past I’ve used setInterval to evaluate whether properties returned from the LMS have changed, but this always felt rather ugly to me so I decided to implement an event based system which uses Object.watch and EventDispatcher. Here’s what I came up with:

/*
* Removes watch from the scope defined by the 4th parameter, returns
* the value of the watched property and dispatches an event object
* with all the information from the watch
*
*/
public function returnProperty(p:String,ov:String,nv:String,s:Object){
s.unwatch(p);
dispatchEvent({type:"change", prop:p,value:nv,old:ov});
return nv;
}
}


The solution, as you can see, is simple, reusable, very clean and allows the use of the familiar event-listener model. You can download the source here.