Deja vu all over again

When I started this blog in 2007, I had been developing in a technology called Authorware that Adobe was in the process of killing off. So I decided to concentrate on teaching myself Flex, sharing what I was learning with others who were also making that transition.

I still work in Actionscript a lot, primarily in Flash, but unfortunately I've had to come to the decision that it's not the best use of my time to blog about some of the neat things I'm still doing.

It's not fair to say I'm learning JavaScript, since I've been doing JavaScript in some form for over ten years, but I am learning about the JavaScript ecosystem as I find it in 2014, particularly surrounding AngularJS. I'm shifting focus to once again ramp up in tools that are relevant instead of ones that are becoming less relevant. In the process, hopefully I can help others who are making a similar transition or just who want to learn about the parts of the process that I delve into. I like to think that I'm willing to write about things that others may not feel are glamorous enough to devote time to but that can be incredibly helpful if you're looking for just that information.

I have decided to keep the title of the blog the same. In part this is because I have some loyal readers who have been with me the whole way. In part this is because I think that the AngularJS world will realize in time that the particular experience that former Actionscript developers, especially Flex developers, bring to the table means that we're very well-suited to do things the "Angular way." I hope you enjoy the new direction.

ActionScript, E4X, and White Space

I've been reading XML into ActionScript 3 for many years, and I still haven't solved all the issues with it. Given that my searches for solutions to these issues turn up so little, I decided to share the solutions I have found, especially when it comes to white space.

I think at least part of the reason that these problems are so hard to solve is that the XML documentation for many of the properties and methods we need to use is frustratingly circular. So let me start by laying out what some of these do in practice.

ignoreWhiteSpace

I think ignoreWhiteSpace is the property we first try to use to correct some of the issues with E4X. This property will, in fact, fix issues that are caused by having "extra" children that you weren't expecting to be parsing when you use normal formatting, like new lines and tabs, in your XML. However, it then causes other white spaces that might have been pretty important to disappear.

An alternative to using ignoreWhiteSpace is to use xmlVar.elements() instead of xmlVar.children(). This works relatively well unless you need to access something that's not an element, like a comment, or you need to pass the XML to Adobe code (like new DataProvider()) that for some reason is not equipped to handle the vagaries of their own E4X implementation.

prettyPrinting

We're all familiar with the problem where the default XML parsing adds even more formatting than we included in the original XML file, so that

<root>
 <p>The quick brown fox jumped over the
 <b>lazy</b> dog.</p>
</root>

becomes

<root>
 <p>The quick brown fox jumped over the 
  <b>lazy</b> 
 dog.</p>
</root>

I'm sure there are some versions of Flash where setting prettyPrinting to false fixes this problem, but in the version of the Flash player we target, setting this property has no effect. The good news is that TextField, the Flash Label component, and the Flex MX Label component support the condenseWhite property, which gets rid of this issue for text you want to display. I guess if you're using a spark label, the skin will need to use something that supports condenseWhite if you need this.

Wrap in CDATA

One of the reasons XML parsing is so thorny is that we're using the XML to store external content, often HTML-formatted. CDATA does work to preserve HTML formatting, but it has its own issues. One issue is that there's no real documentation about how to get the text out of CDATA.

Funny story--I was once on a Flex project where it turned out I needed to wrap the entire XML package I was building in CDATA. Try though I might, I couldn't find anything that told me how to get at the "stuff" inside the CDATA. With deadline fast approaching, I "hacked" it by giving the text to a Spark label (which did know how to do this), then reading the text out again and casting it to XML.

Some months later, I ultimately discovered that String(myNode) will retrieve the contents of a node, whether its contents are wrapped in CDATA or not. Unless the contents are not wrapped in CDATA but contain HTML formatting anyway. This is something that is quite likely to happen on my team, as the people who produce the XML see no reason they shoulld start wrapping everything in CDATA just because we're using ActionScript 3 now.

In addition, even when things are wrapped in CDATA when they should be, you have to dump your text in one line into CDATA because it faithfully reproduces all those \n's and \t's, and you wind up with a bunch of junk nodes if you have to cast the contents back to XML. This results in XML that isn't readable, and readability is one reason to use XML in the first place.

hasComplexContent

So, if you're getting XML and you know that sometimes certain nodes will contain HTML and sometimes that HTML will be wrapped in CDATA and sometimes it won't, what do you do? One thing you can do is create a function that checks for hasComplexContent and calls toString() if it returns false and children().toXMLString() if it returns true.

This works well, but one issue with it is you have to have access to this function wherever you're parsing XML. And since you can't really extend the XML Class, due to its dependence on static methods and properties, that means you either need to use a static method yourself (not my favorite thing) or you need to violate DRY, unless your application lends itself to only parsing XML nodes in exactly one place.

normalize()

This is probably my favorite method, because it gets rid of all the weird child nodes that contain "\n\t\t". This means that I can now parse formatted XML and not have to allow for weird extra junk in there. More importantly, I can pass that XML to "dumber" code, such as the Flash DataProvider constructor, and it works. It also does not take out the spaces around inline HTML tags, so you can normalize() the XML to make for easy parsing that you should get from ignoreWhiteSpace (but don't, due to the removed spaces), then you can call String(myXMLNode) on the node whether it has complex content or not, and it will work in a TextField with condenseWhite set to true. FTW!

My favorite Flash Builder Code Templates

I hate typing the same code over and over, and DRY can only take you so far. I also hate making the same changes over and over. So I've "tweaked" some of the templates that came with Flash Builder and I've added many to automate the tasks I do frequently. I've made them available for download. You'll need to unzip the file and import the template file into your ActionScript code templates, or you can copy and paste any you find useful.

My version of the fori

I loop through lots of things other than Arrays, and when I do loop through Arrays, I don't like to read the length on every loop. So I've modified the fori template.

for (var ${index}:int = 0; ${index} < ${loopVar}; ${index}++) {
 ${line_selection}${cursor}
}

Looping through MovieClip/Sprite Children

A lot of times, I have a Class where I just know I'll have "some" instances of a specific type, but I don't want to dictate in advance how many that will be. So often I'll have code to find those children. I call this template "childLoop."

var loops:int = numChildren;

for (var i:int = 0; i < loops; i++) {
 var ${varName}:${search_type} = getChildAt(i) as ${search_type};
 if (${varName}) {
  ${cursor}
 }
}

Push into an Array/Vector

Often, inside a child loop, I'm inserting the children that match into a Vector. It's supposed to be faster to use the length property of an Array or Vector to add to it instead of using push(), so when I'm adding to the end of one of these, I use my "fastpush" template.

${arrayOrVector}[${arrayOrVector}.length] = ${newItem};

Sort the Vector

Often, the instances aren't added to the stage in the correct order to match each with the piece of data that goes with it, so I have various sorting functions on hand, such as "leftToRightSort" that can be applied as the sort function to the Vector.

protected function leftToRight(btnA:DisplayObject, btnB:DisplayObject):Number {
 return (btnA.x - btnB.x);
}

If setter value has changed

Flash Builder has a great feature to generate a getter/setter pair from a variable declaration. Even through I'm working in Flash, I often check the box that allows you to dispatch a custom binding event (which doesn't do much in Flash, unless you wire it up yourself). What I do get from that is auto-generated code that checks to see if the variable's value has changed before doing something, such as removing/adding event listeners. Sometimes I forget to check that box or I decide that I don't want the overhead of having the event dispatched and I think that deleting that extra code is more effort than what advantage I get out of using the check box. In those cases, I add essentially the same code with the "ifValueChanged" template.

if(${myVar} != value) {
 ${myVar} = value;
 ${cursor}
}

Do you have favorite code templates? Please share in the comments section.

RIAdventure Inspiration

So we're just back from the RIAdventure cruise/conference, and I have to say it was just what the doctor ordered for me. The speakers and attendees were all top notch, and I felt like a little sponge, soaking up ideas from them.

One set of ideas I'd just started reading about before going to the conference was blitting. In my roles as eLearning or Application developer, this wasn't something that I'd been exposed to much. And it seemed like a lot to get my head around until I saw Sam Rivello's Las Viditas presentation. He made this stuff look so easy, I thought maybe it wasn't so hard after all.

Couple that with the fact that I was inspired by Greg Burch's presentation to try an iPhone teaching app for children that needs to have performant animation (when the iPhone api is available), and suddenly this looked like something I needed to learn.

But since the main animation I was concerned with was rotating an object about a central point, the whole idea of repeatedly copying the pixels from different parts of an image seemed to be silly to me. So I came up with the idea of using a Flash Display object and rotating it once, programmatically, taking a snapshot at each rotation increment. Then each snapshot could be used in sequence.

Here's my first prototype of that concept:

Download the source code.

I'll probably write in detail about this code on InsideRIA in the near future, but the code is commented pretty thoroughly.

GroupingCollection example featuring GroupingFunction

Several months ago, I built a dashboard example for a client that featured a calendar with a month view like you'd see in a paper calendar on one side and a week view on the other side. I wound up writing some fairly complex classes to handle the different breakdowns in how the data displayed. I also wrote a custom renderer for the calendar page and a different one for the week view.

And then I had to do some work with the AdvancedDataGrid and fell in love with the way this component "thinks" about data, with its HierarchicalData, HierarchicalCollectionView, and GroupingCollection. And, of course, I adore its styleFunction, as you might have guessed from my earlier TileList_withStyle and DataGrid_withStyle classes.

A few weeks ago, someone posted an example that showed a way to use GroupingCollections with controls that were not AdvancedDataGrid or Tree components. Let me tell you, that got my little cogs twirling. If only (thought I) you could use a function to decide how the items in a GroupingCollection grouped. Then you could use it to group dates into years, months, weeks, whatever floated your boat. So I went digging into the docs, and found that the GroupingField actually does have such a property.

And so the GroupingFunction example was born. This example illustrates how you can create a single array of objects that contain the dates to use for a Calendar application, then group and filter the data in different ways by using that array as the source for multiple ArrayCollections and GroupingCollections. These allow you to display that data in several different ways without a lot of manual parsing.

It also illustrates the following concepts:

• Using a single itemRenderer with the TileList_withStyle component to present different appearances based on the styleFunction you use.


• Using a Repeater to populate an Accordion control based on a data source


• Using a single child component that gets reused between the children of
  the Accordion

I'd also like to point out that I'd have never been able to create this example if I weren't still looking for work. I'm sure you're probably loving being the recipient of all these free examples, but please return the favor by passing my name on to anyone you know who is hiring :-).



Updated October 21, 2008:

I changed the itemRenderer to show how you can set the blendMode on text to apply effects to it without embedding the font. I only set the blendMode on the lower label , so that the difference would be apparent.

Charting Example

A couple of weeks ago, I said I'd compile some thoughts about charting. Normally, this would mean that I'd talk about charts in a general way. I'm not much on posting code, mainly because I'm terrified that I'll post something that will lead someone who's even more newbie than I am down the wrong path. Instead, I prefer to talk about code in general terms, then let people go off and make whatever mistakes I've inspired them to while I keep a clean conscience.

But this week someone asked me to give an example of showing how to add an axis in ActionScript, so I thought I'd do that just this once because my husband just had shoulder surgery and goes to bed early these days. While I was at it, I threw in a little bit of this and that other stuff I'd learned while building charts.

I don't claim my approach is the only approach or the best approach to the problem. But here's an example of how to create a chart entirely in ActionScript. Right click to view source. If you pick up bad habits from it don't blame me!!!

Working with Dates in AS3

The Date examples that come with Flex (and, presumably, Flash) are all very well and good, but to me they don't seem to be very...practical. And it doesn't help that the documentation doesn't provide any clues about how to do simple things like, oh, figuring out how many days there are in a month. There's probably very good code for these things in opensource projects like the Flex scheduler, but I think you have to know where to dig.

So I played around with the Date object, and I discovered that you can use numbers outside the integers 1-31 in the date parameter (new Date(year, month, date)) and get some interesting results. Such as if you use 0, you get the last day of the previous month. As you might expect, negative numbers will go further back into the previous month. I suspect numbers higher than the last day of the month you're dealing with will continue into the next month, though I haven't tried it.

What I was trying to do was create an ArrayCollection that could be used as a dataprovider for a TileList and then that TileList could display a calendar page just like what you see when you look at the calendar on your wall...i.e. the first few days might be in the previous month and the last few days might be in the next month, because only February ever has a shot at fitting exactly in a grid that is seven days wide. I figured that I'd share my class, since I'm probably not the first or last person to ever want to do this. Note that it's not finished...you'll need to add the last few days when the end of the month doesn't fall on Saturday, but that's not rocket science.



package com.magnoliamultimedia.vo
{
import mx.collections.ArrayCollection;
public class DisplayMonth
{
private var _year:int;
private var _month:int;
private var _startIndex:int;
private var _dateColl:ArrayCollection;
public function DisplayMonth(monthNumber:int, yearNumber:int)
{
_month=monthNumber;
_year=yearNumber;
var tmpArray:Array=new Array();
var firstDay:Date=new Date(yearNumber, monthNumber);
var lastDay:Date=new Date(yearNumber, monthNumber +1, 0);
var lastDayNum:int = lastDay.date;
_startIndex = firstDay.day;
var tempDay:Date;
var i:int;
//fill blank days before beginning of month
for (i=0; i<_startindex; i++)
tempday = new Date(yearNumber, monthNumber);
tempday.date -= 6-i;
tmpArray.push(tempday);
}
//fill in the rest of the dates here...
}
}
}



Sorry about the crap formatting...I haven't figured out the spiffy scrolling thing some other bloggers manage.

Updated 5/28/10. I noticed that part of the code had been "eaten" by Blogger. I replaced the relevant code, but may not have put back everything that was once there. For a better example of how to do this, look at my GroupingCollection example.

Importing Packages in AS3

Even the most simple task seems to take me forever in Flex, since I have to troll through reams of documentation to make sure I understand the concepts involved. This morning I came across something in one of my references that went something like this:

"Because this class is in the same package as the other class you want to use, you don't need to add an import statement in order to use it."

I went through reams of documentation looking for something to verify this, but couldn't. Finally, someone on a Google Group I belong to posted this quote from Colin Moock's Essential Actionscript 3.0.

"Code in a given package can refer to the classes in that package by their unqualified names... To gain access to a class in another package, we use the import directive..."

So yes, it's true. You don't have to import classes in the same package as the one where you are working.

Modules for eLearning

I've written before about how difficult I've found it to figure out how to use Modules for eLearning style structures within Flex. It seems to me I may have hit upon an approach that works. The new documentation on Modules has an example that shows creating an Interface so that you have a known "contract" between the Module and the parent container. The example shows how to pass information into the Module, but didn't seem at all concerned about passing information back out. So I put my thinking cap on, and went to researching.

The first thing that seemed obvious to me was that you'd need to have some sort of event that would be propogated from the Module to tell the parent container that something had happened. So, I went and looked at the documentation about how to handle events. And I really, really tried to figure out a way to do it just with the implementation of the functions from the Interface. But functions in an Interface are kinda tricky. They're fairly plain Jane (in the Interface itself they're just stubs, with no implementation) and are really designed to be called from whatever is Interfacing with the Interfacee (as it were). I couldn't figure out a way to use them to push information out with them.

Instead, what I did was create a function that will return the name of the event that the Module expects to send out to the container. This allows the container to attach an event listener for that event without having to know up front what it will be called. So, for instance you could have an ElearningEvent.MENU_CLICK or an ElearningEvent.MC_SELECTION.

Where did the names for these events come from? Well, let me back up. I wrote a custom event class called ElearningEvent, specifically for handling events from my own eLearning Modules. I imported this class both into the Module file and into the Container file. It had public static constants in it that defined the ELearningEvent types. Ultimately, I plan to extend it so that more custom events can convey more information, such as whether a question was right or wrong (right now, it just publishes a value and ID).

So now that I've rambled all over the map, let me distill the process into a nutshell:

1. First, I wrote the Interface .as file (IELearning.as), which essentially said "these are the functions you can use to access me, and here are the arguments I expect and what I will return."
2. Next, I wrote the ELearningEvent class, which defined my custom event, including constants covering the event types included in it. I made it Inspectable so that Flex Builder would help with the typing.
3. I added the implements element to the Module to specify that it implemented IELearning. I added the implementation of the Interface functions, including the one that published the specific event for this Module (in this case, a MENU_CLICK). And I added logic to listen for a click on the menu and generate my ElearningEvent.
4. In the containing Application, I added logic similar to the logic in the Module docs to retrieve a reference to the Module child when it loaded. The difference is, I also asked for the name of the event that the Module child was planning to generate, and attached an event listener to the child.

The Module file was already inserted into the Application file, and I'd already worked out its base functionality before I started the process above.

I'm still not sure why an Interface is the suggested solution for this. I would think that maybe just writing an ordinary class, might be better, or even a fake abstract class.

AS3 Basics

I've been struggling a lot with the Flex documentation (can ya tell?), and a lot of it, I think, is because the people who write docs know the whole thing inside and out. So they don't realize that before they go off all half cocked telling you how to write the code in a package, they should probably take a moment or two to tell you where to put the package, what to call the package so it will work, and how you refer to it from within your code and MXML. That's just an example of my "issues" with the docs, but a very pertinent one.

I'd pretty much worked all those things out with a little creative "reading between the lines" and reading the same articles on the Developer's Center over and over. However, I finally stumbled across the free ActionScript 3 Cookbook Excerpts from O'Reilly, and let me tell you, it has really codified a lot of stuff I thought I'd figured out, as well as correcting some misconceptions as a result of the roundabout route I took to the figurin'. I have only read up to Chapter 2, which, incidentally, explains all that stuff about packaging. I think I'll be ordering this book tomorrow! Wonder if it comes in MS Reader format...?