FreerPad

Flash Player: Text Around A Circle

2008-07-04T06:00:00.001-07:00

I received a rare and very welcome comment about my most recent postings about the new Flash Player 10 (FP10) and my 1st demo, FontWheels. In his comment, OLMSTJ, mentioned he was currently working on a project where he was placing text around a circle and therefore curious how I approached doing it in my demo.

Unlike my previous published code, for example my sort function for XML, this code is not at the point where it is generic. It was actually more generic when I first built it for Flash Player 9 (FP9) when I was rotating text first converted to bitmaps.

So I’m going to release the FP9 code, a single static function wrapped in a simple demo. The framework (oh, I hate that word) for the old and new functions are similar but there are differences in how I place each character. If at some point, I reduce the FP10 code to a similar scope, I’ll probably publish that code. The FP10 code has a lot more functionality due to the demo’s requirement to stuff an entire circle with different font fields and other minor details that wouldn’t be needed outside the demo.

I did stripped a little code from the FP9 function. It converted the complex Sprite to a single centered bitmap in a Sprite. Each text character is implemented with a Bitmap inside its own Sprite. Since I tend to make my pages very detailed, I like to strip away the complexity by converting content to a Bitmap whenever I can. After reviewing the code, due to writing this blog, I decided building the conversion to a centered Bitmap in a Sprite into this static function was not a good design.

Code Narrative

The function has 3 arguments: 1) the radius; 2) a TextField containing the desired text and the formatting information; and 3) a Boolean where true means to place the text centered on the top and false means to center on the bottom.

I use a TextField object to specify the input data. I wanted to be able vary the format of each character. Therefore I build the multi-formatted text outside of the function. However it turns out the results of doing this are varied. It is somewhat dependent of the actual font. For example changing the 1st character font size or setting it to bold sometimes does not look that great. Of course, it might not look that good when displayed in a straight line either. On the other hand changing the color works well (despite potential bad taste).

Don’t set the background color unless you are looking for some special effect. The underline I created in my link to this blog, in the picture to the right, was drawn by hand. This was a feature I tacked on at the end which contributes to the process not being as generic as I would like. In order to know where to begin and end the underline circle you need internal information that is known at the time it was drawn.

As I said providing the underlined circular text was a last minute requirement for the FP10 project. I needed a way to change the color when the mouse hovers over the link text. I chose to not convert the text and underline to bitmapData, but instead I left it as a complex sprite. I drill down to each TextField and change each of their colors. I also redraw the underline to change the color.

Now that I’m done, I’ve had a chance to 2nd guess the approach. My feelings at the moment would be to convert it to bitmapData and use its class functions to change the color. This, of course, conflicts with the ability to restore different colors on the each character when the mouse rolls off the link. A link shouldn’t be multi-colored but it just shows the complexity when you try to make one solution for all (like frameworks end up doing).

I hope this much detail in the design is useful to someone and doesn’t put everyone else to sleep.

The first thing I do is convert the input TextField to a bitmapData object. I will use this object to extract each character into a bitmap.

Next I compute how many degrees the text will consume. Using that number I figure where I need to start placing the text based on the fact that I want the text centered at the top or bottom.

Then, I loop through each character of the argument TextField. I ignore spaces. For each character, I create a Sprite and add a Bitmap containing that character to that Sprite. Now the code is different depending on whether you want characters at the top or bottom. Notice that the when the characters are at the top you are placing the bottom of the character around the circumference of the circle. Then look at the pictures above and notice my name at the bottom of the circle. Here, the top of the each character is drawn around circumference of the circle. It took a while to get my head straight on this concept.

Each character is then extracted into a new little bitmap. These bitmaps are each inserted into their own Sprite. I rotate each of these Sprites to the correct location. I compute this location by getting the location from the input argument TextField. Earlier I computed the number of degrees the whole field needs so that I could compute where to put the 1st character after centering. I took the easy way out and simply apply the same fractional character positioning of the flat text field and apply that to the total number of degrees the field consumes on the curve to find the rotation to apply to the sprite. I’m sure most of you have taken math more recently than the 60’s and would have done it a different way, but this way I only had to look up how to compute the circumference of a circle.

But first where do you put the Bitmap character in the Sprite. Imagine each Sprite to be like a spoke in a wheel with a character attached to the end and the other end at the center of the wheel. As I mentioned earlier it depends on whether you are drawing the text around the top or on the bottom. If on the top, the spoke connects to the bottom of the character and to the top of the character if the text goes on the bottom.

There is a short coming in using the spoke in a wheel to describe this. The hardest part of writing this code was placing the text on the bottom of the circle. I’m sure I won’t explain this properly but if you need to dive into the code maybe this will give you a head start. I kept trying to calculate the rotation of the Sprite’s when the text is on the bottom by computing the rotation at the bottom. But that is wrong.

Imagine the spoke for characters at the bottom to extend across the entire wheel instead of just to the center like the spokes for the top. They still rotate at the center of the wheel but you control them by moving it at the top which is at the opposite end of where the Bitmap character is. When you rotate the spoke at the top to the right the Bitmap at the bottom moves to the left.

Obviously, you can tell I’m not a mathematician by describing it that way. But that’s they way I figured it out.

That’s basically it. It isn’t a large function.

More on: Flash Player 10 Beta Development Without Installing Anything

2008-06-27T10:58:00.001-07:00

I have now built an HTML page containing my FontWheels Flash Player 10 Beta Demo which is only useful if you have installed Flash Player 10 beta.

However, to summarize my previous post, you may view Flash Player 10 Beta content without installing anything if you fear impacting your system with beta installables. This can be done by downloading the external Flash Player 10 beta: FlashPlayer.exe.

This is not an install executable. It is the stand-alone external player and requires no installation. To view content on the player, execute FlashPlayer.exe and enter the URL from the File/Open menu. The URL to my swf demo is:

http://www.elegantfloraldesigns.us/blogstuff/FontWheels/FontWheels.swf

Flash Player 10 Beta Development Without Installing Anything

2008-06-26T15:45:00.001-07:00

I wrote some ActionScript 3 code to try some of the new features in the Adobe Flash Player 10 beta and became so excited about it I can't put it down.

I have a demo, FontWheels, with some explanation below but first let me tell you how I build the swf.

I had some problems getting started and still haven't work out some basic things. Fortunately, by accident, I found a way to do beta develop without having to install anything on my Windows XP machine. At least to the best of my knowledge I didn't install anything and I can still use my Flex Builder 2 and Flash Debugger 9 with no conflicts.

I initially tried following the instructions from Adobe about installing Flash Player 10 and the SDK. I was able to get it installed and ran through their examples and tutorials just fine. However I wasn't able to get it to work with Flex Builder 2 and then I started having problems trying to resume developing for Flash Player 9 with the debugger.

I ended up removing everything (except the new SDK) and reinstalling Flex Builder 2 with the current debug player. I'm not trying to discourage anyone from doing this. I'm sure I goofed somewhere.

But I thought I'd give it one more shot and by accident came up with something acceptable and as I said nothing needs to be installed.

I ended up using the FlashDevelop version for FP10 from www.FlashDevelop.org. which for some reason is distributed as a compressed file with the rar extension. This gave me some problems coming up with something that worked with rar files instead of zip. However I eventually decompressed it. I created a shortcut on my desktop to the FlashDevelop.exe in the decompressed files and double clicked on the shortcut. Sure enough, FlashDevelop ran without any install.

However I still need Flash Player 10 but found out I could use the external Flash Player 10 beta instead of the versions for embedding into a browser. In the support page for FP10 at www.FlashDevelop.org there is a link to the standalone content debugger ("External player"):

http://opensource.adobe.com/svn/opensource/flex/sdk/trunk/in/player/10/win/

The external player requires no installation. (Note this is for Windows.)

Next in the FlashDevelop Project\Properties menu I had to change the Target to Flash Player 10 and Test Player to “Play in external player”.

Now I'm not sure how FlashDevelop knew where to find the standalone Flash Player and I'm not sure how it found the Flash Player 10 SDK. I was unable to follow their instructions to set up the SDK path but it ran anyway. I previously placed the SDK on my C: drive as C:\FLEX_SDK\ and edited C:\FLEX_SDK\frameworks\flex-config.xml according to the alternative directions from Adobe as follows:

...

<target-player>10.0.0</target-player>

...

<external-library-path>

<path-element>libs/player/{targetPlayerMajorVersion}/playerglobal.swc</path-element>

</external-library-path>

...

<library-path>

<path-element>libs</path-element>

<path-element>libs/player/{targetPlayerMajorVersion}</path-element>

<path-element>locale/{locale}</path-element>

</library-path>

FlashDevelop works quite well with the external player and handles the trace command just fine. I had been using FlashDevelop until FlexBuilder came along but it has changed a lot since then. It handles the new vector syntax of Flash 10. The behavior of the code completion is different from Flex Builder. I think Flex Builder is smoother but FlexDevelop tries to do more with code completion. It seems to fail to “code complete” more frequently than Flex Builder and I find it mildly annoying because I have to use the escape key to get out of the code completion mode much too often. In all fairness I haven't tried much customization to get rid of the annoyances and overall I like FlexDevelop. It has a bunch of useful feature many of which I haven't mastered. If I ever figure out how to make a living out of this I definitely plan on donating something for this product.

So here is my demo but you might have go through some hoops to see it. Since I am using the external Flash 10 Player I don't have a way of testing a SWF within a web page. So if you want to see my demo, download the External Play Player 10 from the link mentioned above. Then in the menu File open enter the following:

http://www.elegantfloraldesigns.us/blogstuff/FontWheels/FontWheels.swf

Of course, if you are able to view Flash 10 content from your browser, you should be able to view the swf file by entering the above URL. I’ve never seen it that way so I can only hope it runs.

FontWheels, the Flash 10 Beta Demo

I was working on an ActionScript 3 for Player 9 project where I wanted to display characters around a circle dynamically. I don’t like having to embed fonts so I thought I would see how bad it would be to first convert characters to a bitmap and then rotate them. The result was far from perfect but since the size of the characters were fairly small it didn’t look as bad as I expected. Certain letters, like “W” looked pretty bad but I decided I could live with it. Since I first heard about Flash Player 10 beta while I was working on rotating the fonts I used that code as the starting place for testing the new player.

Using the exact code, that is first converting to bitmaps and the rotating, there was amazing improvement. This wasn’t something I was anticipating. I hadn’t read anything about the new player improving the results of rotating a bitmap, but there is no doubt it is a lot better.

Well, that created a lot of interest on my part so I decided to try rotating a TextField instead of a bitmap but still not embedding a font. We let me tell you it looks a whole lot better than the bitmap.

Next I wondered what would it look like if I rotated the characters around the circle live. My initial app was to build a static medallion with characters around a curve but I couldn’t resist seeing them rotate on the screen. Then I wondered if I could do this will all of my device fonts. Yes. The player could handle displaying all of my approximately 110 device fonts on the screen rotating simultaneously. Later on after trying it on my granddaughter’s older computer I decide it would be best to limit the total number of fonts.

Then I wanted to play with the 3D capability. I discovered that rotating each letter on another axis and the rotating the font wheel on another axis I could get what appears to be a circular marquee.

So there it is. I hope you take the time to see it run. I’ve rush this post out because I’m anxious to get back and try some other new things. I hope I’m not leaving in too many misspellings and grammar errors but I’m in a hurry!

ActionScript 3, E4X Snippet

2007-07-24T05:53:00.000-07:00

I have been working on an E4X function to transform XML attributes into elements for displaying in a Tree. I have a working function, not exactly in the form I wanted, but I am lacking a good example of it to post this week. This is all tied into the work I have posted in the last few weeks about sorting XML for trees.

Code snippet

There was one little code snippet which was part of solving the problem I thought I would share with you now. Unlike my XML sort routines where I modify the source object, this routine creates a duplicate XML object but with elements instead of attributes.

The problem I had was coming up with code to copy the root element of the source code to a new XML object. It wasn't so straight forward with E4X. I think concise code could have been written to simply copy the object with the copy() function and the delete its children but I was concerned this could be inefficient especially if the object was large.

This is what I did:

 1 public static function transformXmlAttributeToElement
 2     ( avXmlIn               :XML,
 3       avAttributeName       :String,
 4       avArrayAttributeNames :Array )
 5     :XML
 6 {
 7     var lvXmlOut:XML = <{avXmlIn.name()}/>;
 8     for each( var lvXmlAttribute:XML
 9                in avXmlIn.attributes() )
10        lvXmlOut.@[lvXmlAttribute.name()] = lvXmlAttribute;
    ...

Line 7 creates a root element with the same name as the source. Lines 8 and 9 loop through all of the attributes in the source root element with line 10 creating a duplicate of each attribute in the destination element.

My generic functions can't use hard coded names, but most examples you find on the Internet use hard coded names. I thought maybe someone needing to do something similar could benefit from the example. I prefer to write more comprehensive posts than this but I'm just not ready this week.

Addendum

My post More Hierarchical Sorting E4X XML: for Flex Tree & Beyond was my 1st attempt to make use of publishing a Flex application along with the Publish Application Source feature of Flex Builder 2. Boy am I dumb. For some reason it got into my head that every time I recompile, the new source code would be regenerated. Not true. If you downloaded the source code before last Friday, you got old source code. I've fixed that.

I also fixed a state transition flicker problem that crept back into the example. There appears to be a little bit of art in handling flicker in state changes.

ActionScript 3, Undocumented Features?

2007-07-18T06:42:00.000-07:00

You have been entrusted to be in on some secret features of ActionScript 3. Only a handful of programmers around the world will see this information. This is mostly due to the fact you have been able to hack your way into one of the most obscure blogs on the planet!

Actually, I don't know if I am breaking new ground here but I haven't been able to find any mention of this feature. I really discovered it sometime ago while writing an earlier post but I didn't know the extent of the find.

And the find is fairly extensive but I've come up with only a few practical uses and one of those was already discussed in the mentioned post. I don't know how far back these features go. It may be they were around before ActionScript 2; before I ever used Flash. Maybe veteran Flash developers find it so ho-hum they forget to pass it on to newbies. I haven't tried this with AS2 because I don't want to fire up Flash again and have to re-learn anything. BE WARNED: Be careful how you use undocumented features. Also, "undocumented" means I haven't been able to find anything about them in the Adobe documentation.

Please let me know if you can find this someplace. Someone needs to write a book about how to best use and find available resources for Flash, Flex and ActionScript.

The Secret Features:

You can insert multiple comma separated expressions when the syntax calls for an expression between parentheses.

For example:

do
{
// do something
} while( a = b, a == 0 );

The while test will be performed on the rightmost expression, a == 0, but variable a will be set to the value of b prior to the test. You are not limited in the number of expressions but you are limited in the type of expression. For example, you cannot declare a variable with a var and you can't use an if statement. The expression must resolve to a value. The ? : expression can be used and you can call a function.

The do while statement, the while statement and the E4X filter predicate expression are the best candidates for this feature. However it can also be done in the return and switch statements although I can't see any value in using it. The return statement doesn't even require parentheses.

I was hoping to show a compelling example using do while or while but haven't been able to think of one. I made this discovery when I was creating a loop and using IViewCursor to iterate over an XMLListCollection. The where clause was getting too long to fit into a line and I wanted to break it up. So I thought, what the heck, why not try it.

You can also do something similar with the for statement:

for( I = 0, N = 2; N < 5,I < 3; I++, N++ ){}

I think I recall seeing examples of the for statement before, but I don't remember if it was for ActionScript.

I guess when the ActionScript parser encounters the open parenthesis it handles it as though it is a function call with arguments without paying too much attention to the context. It's okay, I won't tell Adobe if you won't.

More Hierarchical Sorting E4X XML: for Flex Tree & Beyond

2007-07-09T06:35:00.000-07:00

This is a continuation of my most recent posts. I've changed the Tree's dataProvider to an XMLListCollection object instead of an XML object as discussed in a recent post in this series.

My hierarchical sort function still works with an XML object so it may be used for other purposes besides a Flex Tree. The sort function is only dependent on the resources built in the Flash Player.

The earlier sort function had a limitation which required sorting an attribute that needed to be in all elements of the XML object. The new sort function no longer has that requirement. This opens the door for even more functionality.

The new function still only sorts on a single attribute but if you combine that with some old tech you can do quite a bit.

Do you know what this is? No, it's not a computer but it frequently worked as a stunt double for computers in 60's and 70's movies. It is a card sorter and I have used one many times.

I still vividly recall a conversation I was having with my programmer son a few years ago. We were driving up Highway 6 and it's one of those events in your life when you remember where you were. We were having a recurring argument about cutting 25 years from my resume. My son asked me what could you possibly use today that you learned in those days. I guess I remember this incident so well because it forced up the reality that so much of my professional self esteem is based on things nobody cares about today. It was a good question albeit a little cold.

Well here it is: I can use my experience of operating a card sorter today! And do you know how to sort on one, son? Of course you don't! A field in a card must be sorted one column at a time backwards. Multiple fields must be sorted in reverse order. For example if you wanted to sort by last name in columns 1 thru 10 and first name in columns 11 thru 20 you would sort on columns 20,19,18...3,2,1; one at a time.

And if you combine this old tech with my simple function you can sort multiple attribute fields each one independently of the others. That means you can sort some ascending, some descending, some dates, some numbers, etc. You can do it backwards (with one hand tied behind your back). Hah!

No, you don't have to sort a character at a time.

Here is the new ActionScript 3 E4X sort XML attributes function:

 1 public static function 

sortXmlAttribute
 2     ( avXml                :XML,
 3       avAttributeName      :String,
 4       avPutEmptiesAtBottom :Boolean,
 5       avArraySortArgument0 :* = 0,
 6       avArraySortArgument1 :* = 0 )
 7     :void
 8 {
 9     var lvChildrenCount:int
10         = avXml.children().length();
11     
12     if( lvChildrenCount == 0 )
13         return;
14 
15     if( lvChildrenCount > 1 )
16     {
17         var lvAttributeValue    :String;
18         var lvXml               :XML;
19 
20         var lvSortOptions:int
21             = avArraySortArgument0 is Function
22               ? avArraySortArgument1
23               : avArraySortArgument0;
24             
25         var lvSortCaseInsensitive:Boolean
26             = ( lvSortOptions & Array.CASEINSENSITIVE )
27               == Array.CASEINSENSITIVE;
28               
29         var lvArray:Array = new Array();
30         
31         for each( lvXml in avXml.children() )
32         {
33           lvAttributeValue
34               = lvXml.attribute( avAttributeName );
35 
36           if( lvSortCaseInsensitive )
37               lvAttributeValue
38                   = lvAttributeValue.toUpperCase();
39                 
40           if( lvArray.indexOf( lvAttributeValue ) == -1 )
41               lvArray.push( lvAttributeValue );
42                 
43         } // for each
44         
45         if( lvArray.length > 1 )
46         {
47             lvArray.sort
48             (
49                 avArraySortArgument0,
50                 avArraySortArgument1
51             );
52             
53             if( avPutEmptiesAtBottom )
54             {
55                 if( lvArray[0] == "" )
56                     lvArray.push( lvArray.shift() );
57             } // if
58             
59         } // if
60             
61         var lvXmlList:XMLList = new XMLList();
62         for each( lvAttributeValue in lvArray )
63         {
64             for each( lvXml in avXml.children() )
65             {
66               var lvXmlAttributeValue:String
67                    = lvXml.attribute
68         ( avAttributeName );
69                      
70               if( lvSortCaseInsensitive )
71                   lvXmlAttributeValue
72                     = lvXmlAttributeValue.toUpperCase();
73                 
74               if( lvXmlAttributeValue
75                   ==
76                   lvAttributeValue )
77                   lvXmlList += lvXml;
78                     
79             } // for each
80             
81         } // for each
82         
83         avXml.setChildren( lvXmlList );
84         
85     } // if             
86 
87     for each( var lvXmlChild:XML in avXml.children() )
88     {
89         sortXmlAttribute
90         (
91             lvXmlChild,
92             avAttributeName,
93             avPutEmptiesAtBottom,
94             avArraySortArgument0,
95             avArraySortArgument1
96         );
97     } // for each
98     
99 } // sortXmlAttribute

Function sortXmlAttribute Description

Arguments

#	Name	Type	Description
1	avXml	XML	Object to be sorted.
2	avAttributeName	String	Attribute Name to sort
3	avPutEmptiesAtBottom	Boolean	Where to put elements that have empty values for sorted attribute.
4	avArraySortArgument0	*	Array.sort() 1st argument
5	avArraySortArgument1	*	Array.sort() 2nd argument

There were two big changes from the earlier function. One, I have removed E4X filtering and used the more conventional E4X syntax. This really simplified the function. I'm not putting down the filtering feature, but in this instance I am better off without it.

The second was dealing with case insensitive sorts. The problem I had before was that I ended up separating strings that had different cases but were otherwise equal. This isn't a problem when you are doing a single sort, but when you stack sorts back to back the problem shows up.

I also added a feature that controls where you put the XML elements that do not have an attribute value. The need do this varies with the type of data you are looking at. It was actually easy to implement.

Lines 20 thru 27

This code determines if the sort is case insensitive.

Lines 29 thru 43

This section builds an array of unique attribute values. If the sort is case insensitive I convert all of the values to upper case.

Lines 47 thru 51

This sorts the array with the Array.sort() function. That's all I ever sort; just the unique attribute values. This is important. I don't sort the XML object (because I can't). I never upset the order of the children which may have been sorted on another field previously.

Lines 53 thru 57

This is where I move the XML elements that have empty attribute values if necessary. It just moves an empty string from the beginning of the array to the end.

Lines 61 thru 81

This is where the real meat of the function is. I want to build a new XMLList object that represents all of the XML children but in the new sorted order. I iterate through each of the sorted unique attribute values. Inside that iteration I iterate through all of the XML children. If the child has the current attribute value I append it to the end of the temporary XMLList I'm building. I have to allow for case insensitivity. It is important make sure that children with the same value stay in the same order. This actually means doing nothing and I do it well.

Line 83

I replace the children of the input XML object with the temporary XMLList I just built with the E4X setChildren function. It is really nice to have this very simple function.

Lines 87 thru 97

This makes the function recursive.

That is the function.

It is very straightforward. If all algorithms were like this, most everyone could be a programmer.

The Example

Previously, I have included the source code in the post but no compiled example. I know personally I prefer to just look at the code and if I'm interested I'll compile it myself. I've also kept the examples to one file. I started this post and the example in the same manner, but the example just kept getting bigger. It is still only one file, but in the future I will have to break it into more than one class. I've decided to provide a page with the source code. My intention is to do this in the future, but the page will probably contain more than one file. In addition I have a link to a page that contains the SWF file. I will also compile with the "Publish Source Code" option. This will give you the ability to view the source code from the SWF program. You'll also be able to download the program in a zip file along with the Flex 2 SDK.

The new example has a lot more goodies in it. There are 2 built-in examples but you can also paste in your own XML. So it actually can be used as an XML sort tool.

Next

I'm now starting to think about sorting element names and values.

Addendum

I came across someone wanting to sort XML via the E4X capabilities of JavaScript. I think my function will work. You might have to remove the static declaration. (I don't know.)

There are several functions in the example declared as static. This is my way of implying the function stands on its own and it may have other uses.

I wouldn't mind expanding to other platforms if for no other reason than to improve my visibility. (I probably only have a total of 30 lifetime hits.) Please point me in the right direction on how to set up a test environment of E4X JavaScript.

ActionScript 3 isNaN is BaD

2007-07-02T10:43:00.000-07:00

A primary rule of my programming style is to keep things positive whenever possible. For example it always clearer to test for things to be equal than to test for them to be not equal. So I'm not surprised there are many discussions about the ActionScript isNaN function on the Internet. NaN stands for "not a number". Its roots go deeper than ActionScript. It is self-evident why the term was coined and equally predictable to be a subject of confusion.

However, the function's negativity can only be charged with creating "bad vibes" in the misdeeds mentioned in this post. The following comes from the Adobe documentation:

The last two table rows in the documentation pass strings to the isNaN function. However, I get a fatal compile error when I try to do this. The same documentation clearly specifies the argument type is "Number". The editor's "Intellisense?" (I don't know what Adobe calls it) says the argument is a "Number".

But I can find plenty of examples on the Internet showing string arguments. I think some of these examples may be explained by the fact that they don't specify the type in the var declaration. When I do this, I get a compiler warning. I wouldn't post an example that produced a compiler warning, at least without pointing it out, but maybe I'm in the minority.

Other examples may be about earlier versions of ActionScript or maybe beta versions. It's sometimes hard sort these things out. I am using Flex Builder 2 and have also tried this with the Flex Builder 3 beta. I got around the warning message by using the asterisk as the variable type. I don't like using an asterisk as a workaround, but in this case I think that is how the argument is internally defined. This is because the function actually works when I pass a string to the function.

I really only wanted to write a function to determined if a string contained a valid number. The following example works. Notice the asterisk in the "for each" statement.

<?xml version="1.0" 

encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    creationComplete="onCreationComplete()"
    >
    <mx:TextArea
        id="Text1"
        height="400"
        />
    
    <mx:Script>
        <![CDATA[
        // -----------------------------------------
        // onCreationComplete
        // -----------------------------------------

        private function onCreationComplete
            ()
            :void
        {
            var lvString:String = "";
            
            for each( var lvValue:*
                  in ["5", "A", "-1", "-.7", "*" ] )
                lvString += lvValue
                          + ": NaN is "
                          + isNaN( lvValue ).toString()
                          + "\n";
            
            Text1.text += lvString;

        } // onCreationComplete
        ]]>
    </mx:Script>
    
</mx:Application>

Text1 contains the following when the example is run:

5: NaN is false
A: NaN is true
-1: NaN is false
-.7: NaN is false
*: NaN is true

This has been a minor distraction while developing an example program for a new post on my series of Sorting XML which I hope to have ready this week.

addendum AS3 E4X: Sorting Hierarchical XML Data for Tree Control

2007-06-25T06:59:00.000-07:00

I’ve taken some private and thankfully friendly flak about my preceding post on sorting data in an XML object for the purpose of providing data to a tree control. I'm told I should use the ItreeDataDescriptor interface to get into the real spirit of Flex.

I did a little homework and learned a few things that should have been part of the preceding post. At this point, I'm not going to create a class implementing ItreeDataDescriptor but I’ll keep an open mind on the subject. However I did have some misunderstandings about what I was doing. (I did mention on my first post, this blog would be a journal of my experiences and I’m new to Flex.)

When you set the Tree control’s dataProvider property to an XML object, it gets converted internally to an XMLListCollection which I have verified by running a trace.

The official Adobe documentation is wrong. It does say that 3 object types get converted to an XMLListCollection: a valid XML string, an XMLNode, and an XMLList. I suppose it is reasonable to assume if a valid XML string is converted along with an XMLList object, then an XML object would be also.

Okay, I didn't actually read the documentation on a Tree's dataProvider before writing my code. I assumed all dataProvider's would be the same. I'm not sure where my basic knowledge of dataProvider's came from but it was probably from Adobe's "Training from the Source". And anyway, the documentation is wrong.

The first thing I should have done, and I don't know why I don't do this all of the time, is look at the Flex source code. Sometimes it takes a while to weed through the code, but this time it took all of 30 seconds to verify: When you set a Tree's dataProvider to an XML object, it gets converted internally to an XMLListCollection object.

The embarrassing thing about my previous post is that I was contrasting how well I could get an XML object to work but blasting the XMLListCollection as a Tree’s dataProvider. My real problem was trying to sort descendents and I haven’t figured how to do that with XMLListCollection’s. I’m sticking with the XML sort and plan to expand upon it real soon.

ActionScript E4X: Example Sorting Hierarchical XML Data for Tree Control

2007-06-22T09:41:00.000-07:00

I’ve been able to find examples of how to sort XMLListCollection objects which are useful data providers for controls like the DataGrid. But I wanted to sort hierarchical data for a Tree control. XMLListCollection objects sort top level elements but apparently don’t sort children, grandchildren, etc. At least I couldn’t figure out how to do it.

I needed the tree sort for an AIR application. I built a sort function for XML objects and plugged an XML object into the Tree’s data provider. It works. I decided this function would be a good post by itself so I put together a Flex 2 example with only one mxml file which is provided at the bottom of the post.

Tree node labels are specified with the property “labelField” and normally you would want to sort on these labels.

Actually, you might want to first sort on the node type and then the labels, but I haven’t gotten far enough in my application to need that yet. I know I’ll need it in the future, so stay tuned.

I set the Tree’s “labelField” property to one of the attribute names of the elements in the XML object. The example uses the “name” attribute preceded by the “@” character which is the E4X designator for attributes.

<mx:Tree dataProvider="{mvXml}" labelField="@name"/>

The data provider variable “mvXml” is defined as:

var mvXml:XML =
    <Country name= "USA">
     <State name="Texas">
       <City name="Corpus Christi"/>
       <City name="austin"/>
       <City name="San Antonio"/>
     </State>
     <State name="Michigan">
       <City name="Ypsilanti"/>
       <City name="lansing"/>
       <City name="Ann Arbor"/>
       <City name="Kalamazoo"/>
       <City name="Allen Park"/>
     </State>
   </Country>

Now the fine print

It is not unusual to have alphanumeric, numeric, currency and date nodes in a single tree. Of course all of the tree node labels can be sorted as simple text, but if you have numbers in some of the labels then 10 would come before 2. It is important to understand we are actually sorting the Tree’s data provider, an XML object, instead of the Tree nodes directly. My function sorts on only one attribute and it must be in every element of the XML object.

Lower expectations and raise false hope
Still a lot of trees will look fine if the labels are all sorted the same way. Also, I put the labels in an Array object to sort and allow you to pass in Array sorting arguments. So you may do descending, numeric, case insensitive and custom sorts.

If you are really desperate to sort on multiple types of labels, you could write a custom sort that would analyze the field and determine if it were alphanumeric, numeric, currency or a date before sorting.

There is another way to handle unusual situations. You could add an XML attribute to be used for sorting and another attribute for the label. The sorting attribute would never be seen, but would be used by my sorting function. This way you can sort numbers as alphanumeric by right aligning them and dates by first converting them to numbers.

Or you could wait because I know I will have to deal with this soon.

The example...
I have buttons for 5 different test sorts for the tree and the button click events are as follows:

Button "Sort Ascending" Click Event:

sortXml( mvXml, "name" );
expandAllTreeNodes( Tree1 );

Button "Sort Case Insensitive" Click Event:

sortXml( mvXml, "name", Array.CASEINSENSITIVE );
expandAllTreeNodes( Tree1 );

Button "Sort Descending" Click Event:

sortXml( mvXml,
         "name",
         Array.CASEINSENSITIVE | Array.DESCENDING );
expandAllTreeNodes( Tree1 );

Button "Sort Reverse" Click Event:

sortXml( mvXml, "name", sortReverseText );
expandAllTreeNodes( Tree1 );

Button "Sort Reverse Descending" Click Event:

sortXml( mvXml, 
         "name",
         sortReverseText,
         Array.DESCENDING );
expandAllTreeNodes( Tree1 );

You can pass the Array sort options in the optional 3rd and 4th function arguments. The last 2 click events use the custom sort function, "sortReverseText", which can be seen in the complete listing at the bottom of the post.

Note that it is necessary to expand the trees after each sort. Of course, this only applies to the example. In a real application you would want to restore the expanded states to their original settings. This presents a whole different problem.

~~Bug~~ Feature

The "name" argument refers to the name of the attribute to be sorted in each element. This attribute must be in every element. Otherwise the element, and descendents, will be lost after a sort.

Actually this could be a feature. Our product not only sorts, it automatically permanently filters out elements that don't have the required attribute.

The XML Sort Function
Here is a breakdown of the sort function, "sortXml", which is a recursive static function.

 1 public static function sortXml
 2     ( avXml                :XML,
 3       avAttributeName      :String,
 4       avArraySortArgument0 :* = 0,
 5       avArraySortArgument1 :* = 0 )
 6     :void
 7 {
 8     var lvChildrenCount:int = avXml.children().length();
 9     
10     if( lvChildrenCount == 0 )
11         return;
12 
13     if( lvChildrenCount > 1 )
14     {
15         var lvAttributeValue:String;
16 
17         var lvArray:Array = new Array();
18         avXml.children().
19         (
20          lvAttributeValue = attribute( avAttributeName ),
21          lvArray.indexOf( lvAttributeValue ) == -1
22              ? lvArray.push( lvAttributeValue ) : null
23         );
24         
25         lvArray.sort
26         (
27             avArraySortArgument0,
28             avArraySortArgument1
29         );
30         
31         var lvXmlList:XMLList = new XMLList();
32         for each( lvAttributeValue in lvArray )
33         {
34             lvXmlList += avXml.children().
35             (
36                 attribute( avAttributeName )
37                 ==
38                 lvAttributeValue
39             );
40         } // for each
41         
42         avXml.setChildren( lvXmlList );
43         
44     } // if             
45 
46     for each( var lvXmlChild:XML in avXml.children() )
47     {
48         sortXml
49         (
50             lvXmlChild,
51             avAttributeName,
52             avArraySortArgument0,
53             avArraySortArgument1
54         );
55     } // for each
56     
57 } // sortXml

Lines 17 - 29
I know you won't believe me, but I did not think I would ever want to use the exact code I used in the last example of my preceding post. The purpose is to get all unique attribute values into an Array and sort them.

Lines 31 - 40
The purpose of the code is to build a new XMLList object to contain all of the child elements in the sorted order. This code loops through each of the unique attribute values in the sorted Array, but the lines 34 thru 39 are a little more complicated. These lines are one statement using E4X syntax. Lines 36 thru 38 act a filter. It returns all child elements where the attribute value is equal to the loop's current sorted attribute value. It can return more than one element in the case where more than one element has the same attribute value. The resulting XmlList variable, "lvXmlList", ends up containing the same child elements of the XML input argument "avXml".

Line 42
We are fortunate the XML class has the "setChildren" function. With this function, the code replaces the existing children with the same, but sorted, elements in the XMLList object.

Lines 46 - 55
This is just the standard recursive stuff that calls this same function on all of the child elements so that their children, and so on, are sorted. I tried to build an E4X statement to do the same thing. Maybe a fresher mind, mine or yours can come up the code.

Complete Source Code for Example:

TreeSortExample.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    creationComplete="onCreationComplete()"
    >
    <mx:VBox
        height="100%"
        width="100%"
        x="50"
        y="5"
        >
        <mx:Panel
            width="90%"
            height="50%"
            horizontalAlign="center"
            title="Jim Freer's E4X Sorting for Trees"
            >
            <mx:HBox
                height="100%"
                width="100%"
                >
                <mx:VBox>
                    <mx:Button
                        label="Sort Ascending"
                        width="200"
                        click="onClickButtonSortTree1Ascending()"
                        />
                    <mx:Button
                        label="Sort Case Insensitive"
                        width="200"
                        click="onClickButtonSortTree1CaseInsensitive()"
                        />
                    <mx:Button
                        label="Sort Descending"
                        width="200"
                        click="onClickButtonSortTree1Descending()"
                        />
                    <mx:Button
                        label="Sort Reverse"
                        width="200"
                        click="onClickButtonSortTree1Reverse()"
                        />
                    <mx:Button
                        label="Sort Reverse Descending"
                        width="200"
                        click="onClickButtonSortTree1ReverseDescending()"
                        />
                </mx:VBox>
                <mx:Tree
                    id="Tree1"
                    height="100%"
                    width="100%"
                    dataProvider="{mvXml}"
                    labelField="@name"
                    />
            </mx:HBox>
        </mx:Panel>
        <mx:Label
            text="*State capitals are in lowercase :) to demonstrate case insensitive sorting."
            />

    </mx:VBox>

    <mx:Script>
        <![CDATA[
        
        // ---------------------------------------------------------------------
        // Private Member Variables
        // ---------------------------------------------------------------------

        [Bindable]
        private var mvXml:XML =
            <Country name= "USA">
              <State name="Texas">
                <City name="Corpus Christi"/>
                <City name="austin"/>
                <City name="San Antonio"/>
              </State>
              <State name="Michigan">
                <City name="Ypsilanti"/>
                <City name="lansing"/>
                <City name="Ann Arbor"/>
                <City name="Kalamazoo"/>
                <City name="Allen Park"/>
              </State>
            </Country>;

        // ---------------------------------------------------------------------
        // expandAllTreeNodes
        // ---------------------------------------------------------------------
        
        private function expandAllTreeNodes
            ( avTree :Tree )
            :void
        {
            avTree.selectedIndex = 0;
            avTree.expandChildrenOf( avTree.selectedItem, true );
            
        } // expandAllTreeNodes     

        // ---------------------------------------------------------------------
        // onClickButtonSortTree1Ascending
        // ---------------------------------------------------------------------

        private function onClickButtonSortTree1Ascending
            ()
            :void
        {
            sortXml( mvXml, "name" );

            expandAllTreeNodes( Tree1 );
            
        } // onClickButtonSortTree1Ascending

        // ---------------------------------------------------------------------
        // onClickButtonSortTree1Descending
        // ---------------------------------------------------------------------
            
        private function onClickButtonSortTree1Descending
            ()
            :void
        {
            sortXml
                ( mvXml, "name", Array.CASEINSENSITIVE | Array.DESCENDING );

            expandAllTreeNodes( Tree1 );
            
        } // onClickButtonSortTree1Descending
        
        // ---------------------------------------------------------------------
        // onClickButtonSortTree1CaseInsensitive
        // ---------------------------------------------------------------------
        
        private function onClickButtonSortTree1CaseInsensitive
            ()
            :void
        {
            sortXml( mvXml, "name", Array.CASEINSENSITIVE );

            expandAllTreeNodes( Tree1 );
            
        } // onClickButtonSortTree1CaseInsensitive

        // ---------------------------------------------------------------------
        // onClickButtonSortTree1Reverse
        // ---------------------------------------------------------------------
            
        private function onClickButtonSortTree1Reverse
            ()
            :void
        {
            sortXml( mvXml, "name", sortReverseText );
            
            expandAllTreeNodes( Tree1 );
            
        } // onClickButtonSortTree1Reverse
        
        // ---------------------------------------------------------------------
        // onClickButtonSortTree1ReverseDescending
        // ---------------------------------------------------------------------
            
        private function onClickButtonSortTree1ReverseDescending
            ()
            :void
        {
            sortXml( mvXml, "name", sortReverseText, Array.DESCENDING );
            
            expandAllTreeNodes( Tree1 );
            
        } // onClickButtonSortTree1ReverseDescending
        
        // ---------------------------------------------------------------------
        // onCreationComplete
        // ---------------------------------------------------------------------

        private function onCreationComplete
            ()
            :void
        {
            expandAllTreeNodes( Tree1 );

        } // onCreationComplete
            
        // ---------------------------------------------------------------------
        // sortReverseText
        //
        // Reverses the strings before comparing.
        // For example, Kalamazoo is oozamalaK.
        // A lame example, but shows how to use a custom sort.
        // ---------------------------------------------------------------------

        private function sortReverseText
            ( avStringA :String,
              avStringB :String )
            :Number
        {
            var lvArray:Array;
            
            lvArray = avStringA.split( "" );
            lvArray = lvArray.reverse()
            var lvStringA:String = lvArray.join( "" );
            
            lvArray = avStringB.split( "" );
            lvArray = lvArray.reverse()
            var lvStringB:String = lvArray.join( "" );
            
            if( lvStringA > lvStringB )
            {
                return 1;
            } // if
            else if( lvStringA < lvStringB )
            {
                return -1;
            } // else if
            else
            {
                return 0;
            } // else
            
        } // sortReverseText

        // ---------------------------------------------------------------------
        // sortXml
        //
        // Warning: All elements in avXml must have an attribute with the name
        // in avAttributeName or the element will be deleted along with any
        // descendants.
        // ---------------------------------------------------------------------

        public static function sortXml
            ( avXml                :XML,
              avAttributeName      :String,
              avArraySortArgument0 :* = 0,
              avArraySortArgument1 :* = 0 )
            :void
        {
            var lvChildrenCount:int = avXml.children().length();
            
            if( lvChildrenCount == 0 )
                return;

            if( lvChildrenCount > 1 )
            {
                var lvAttributeValue:String;
    
                var lvArray:Array = new Array();
                avXml.children().
                (
                    lvAttributeValue = attribute( avAttributeName ),
                    lvArray.indexOf( lvAttributeValue ) == -1
                        ? lvArray.push( lvAttributeValue ) : null
                );
                
                lvArray.sort( avArraySortArgument0, avArraySortArgument1 )
                
                var lvXmlList:XMLList = new XMLList();
                for each( lvAttributeValue in lvArray )
                {
                    lvXmlList += avXml.children().
                    (
                        attribute( avAttributeName ) == lvAttributeValue
                    );
                } // for each
                
                avXml.setChildren( lvXmlList );
                
            } // if             

            for each( var lvXmlChild:XML in avXml.children() )
            {
                sortXml
                (
                    lvXmlChild,
                    avAttributeName,
                    avArraySortArgument0,
                    avArraySortArgument1
                );
            } // for each
            
        } // sortXml
        ]]>
    </mx:Script>
        
</mx:Application>

~~Shameful~~ Shameless Solicitation

One more thing, I am looking for work (this time for money). Any advice would be appreciated.

More, Getting XML Elements and Attributes VIA Variables with AS3 E4X

2007-06-12T07:11:00.000-07:00

I found some useful information pertaining to my preceding post at ZEUSLABS More XML filtering with E4X ActionScript 3. The blog, by Josh Tynjala, has several useful tips. His last example in that post is tackling the same problem with a few twists.

His example is certainly more in the spirit of E4X but I’m actually glad I built my solution anyway. Now I can compare the two approaches. I modified my code to use his technique as follows:

(2) XmlElementAndAttributeViaVariables.as

package
{
 import flash.utils.getDefinitionByName;
 import flash.utils.describeType;

 public class XmlElementAndAttributeViaVariables
 {
  // ---------------------------------------------------------------------
  // Constructors
  // ---------------------------------------------------------------------
  
  public function XmlElementAndAttributeViaVariables
   ( avDescribeTypeName :String = "flash.text::TextField" )
  {
   var lvXml:XML = getDescribeType( avDescribeTypeName );
   
   testAndTrace( lvXml, "accessor", "type" );
   testAndTrace( lvXml, "method", "returnType" );
   
   //trace( lvXml.toXMLString() );
   
  } // Constructor
  
  // ---------------------------------------------------------------------
  // addUniqueValue
  // ---------------------------------------------------------------------
  
  private function addUniqueValue
   ( avAttributeValue :String,
     avArray          :Array )
   :Array
  {
   if( avArray.indexOf( avAttributeValue ) == -1 )
    avArray.push( avAttributeValue );
    
   return avArray;
   
  } // addUniqueValue
  
  // ---------------------------------------------------------------------
  // getDescribeType
  // ---------------------------------------------------------------------
  
  private function getDescribeType
   ( avClassName :String )
   :XML
  {
   return describeType( getDefinitionByName( avClassName ) );
   
  } // getDescribeType
  
  // ---------------------------------------------------------------------
  // getUniqueElementAttributeOfAllDescendants
  //
  // Returns a sorted string array of unique attribute values found in the
  // input object specified in the argument avXml for the element type with
  // the name given in the arguemnt avElementName.
  // The name of the attribute is specified in the argument
  // avAttributeName.
  // The function will use all of the named elements including nested
  // elements.
  // ---------------------------------------------------------------------
  
  public function getUniqueElementAttributeOfAllDescendants
   ( avXml           :XML,
     avElementName   :String,
     avAttributeName :String )
   :Array
  {
   var lvArray:Array = new Array();
   avXml.descendants( avElementName ).
   (
    lvArray = addUniqueValue( attribute( avAttributeName ), lvArray )
   );
   
   lvArray.sort();
   
   return lvArray;
   
  } // getUniqueElementAttributeOfAllDescendants
  
  // ---------------------------------------------------------------------
  // testAndTrace
  // ---------------------------------------------------------------------
  
  private function testAndTrace
   ( avXml           :XML,
     avElementName   :String,
     avAttributeName :String )
   :void
  {
   trace
   (
    "Element: " + avElementName + " Attribute: " + avAttributeName
   ); // trace
   
   var lvArray:Array =
    getUniqueElementAttributeOfAllDescendants
    (
     avXml,
     avElementName,
     avAttributeName
    )

   for( var lvIndex:int = 0; lvIndex < lvArray.length; lvIndex++ )
    trace( lvIndex.toString() + " [" + lvArray[lvIndex] + "]" );
   
   trace( "\n" );
   
  } // testAndTrace
  
 } // class XmlElementAndAttributeViaVariables
 
} // package

The function, "getUniqueElementAttributeOfAllDescendants" was modified and I needed to add a new function, "addUniqueValue". At this point, I would probably stick with my original code. However, if I found out the approach shown in Josh’s example was faster I would jump ship.

One reason for sticking with mine is I like to make a line of code do only one thing. It is an old programming style theory of mine. I like to look at a line of code and grasp what it is doing without disassembling it. I’m planning to make a post on my other blog, An American Programmer in the future about this. I feel it’s worthy of a posting because I‘ve gone through a few battles over the years on this and I think I am losing the war. I’m afraid E4X is just another assault on my style. This is from my application from the listing above and is the essence of Josh’s example:

avXml.descendants( avElementName ).
(
    lvArray = addUniqueValue( attribute( avAttributeName ), lvArray )
);

The code, which is E4X syntax, is radically different from anything I’ve coded before and it kind of defies my programming style. I like to keep my code short enough to be printed without line wrapping, but these 4 lines are one statement (with an embedded statement ). I’ve broken the line with the dot dangling at then end. I don’t like doing that because it’s easy to overlook the dot. But that’s not my biggest concern. The 3rd line is just really weird. That statement is executed for every XML element derived from the first line. First of all, I don’t think the use of the symbols (a dot followed by a statement enclosed in parentheses) is very good symbolism. If the dot and parentheses were replaced with characters that better represented the true operation I might feel better about it.

The other reason why I like my original code is because I also have to add a function, “addUniqueValue” which is referenced in the 3rd line. In all fairness, these are example applications. In a real application breaking this into another function where things are more complex might not be an issue. But in the example, the function is two lines of code that have to be broken out because you are limited in what you can put in the statement. I’m not sure what the specifications say you can put in the statement because I have no ideal where this is documented. I tried various things to see if I could eliminate the function and do everything within the parentheses. It won’t, for example, allow an “if” statement. You can’t declare a variable with a “var”. I keep getting compile errors indicating that the statement must begin with an identifier.

Breaking News!

This is the problem I have with blogging. When I am in the middle of writing a post I discover new things that contradict what I’ve just written. This is a real problem because I don’t write that fast.

Anyway you can forget about what I just wrote about having to add a function. The discovery I’ve just made is that you are not limited to just one statement. You can add multiple statements by separating them with commas. (I swear I discovered this without any outside help.) Apparently you are still stuck with starting a statement with an identifier so you can’t do an “if” statement. But the “?:” statement begins with an identifier.

So the preceding example can be rewritten as follows:

var lvAttributeValue:String;
avXml.descendants( avElementName ).
(
    lvAttributeValue = attribute( avAttributeName ),
    lvArray.indexOf( lvAttributeValue ) == -1
        ? lvArray.push( lvAttributeValue ) : null
);

I still think my original solution is clearer and I think my last solution is the least clear. But E4X is probably going to be around for a while so I'm going to try to keep an open mind and explore how I can use it effectively.

This is the last version (at least in this post) of the entire class:

(3) XmlElementAndAttributeViaVariables.as

package
{
 import flash.utils.getDefinitionByName;
 import flash.utils.describeType;

 public class XmlElementAndAttributeViaVariables
 {
  // ---------------------------------------------------------------------
  // Constructors
  // ---------------------------------------------------------------------
  
  public function XmlElementAndAttributeViaVariables
   ( avDescribeTypeName :String = "flash.text::TextField" )
  {
   var lvXml:XML = getDescribeType( avDescribeTypeName );
   
   testAndTrace( lvXml, "accessor", "type" );
   testAndTrace( lvXml, "method", "returnType" );
   
   //trace( lvXml.toXMLString() );
   
  } // Constructor
  
  // ---------------------------------------------------------------------
  // getDescribeType
  // ---------------------------------------------------------------------
  
  private function getDescribeType
   ( avClassName :String )
   :XML
  {
   return describeType( getDefinitionByName( avClassName ) );
   
  } // getDescribeType
  
  // ---------------------------------------------------------------------
  // getUniqueElementAttributeOfAllDescendants
  //
  // Returns a sorted string array of unique attribute values found in the
  // input object specified in the argument avXml for the element type with
  // the name given in the arguemnt avElementName.
  // The name of the attribute is specified in the argument
  // avAttributeName.
  // The function will use all of the named elements including nested
  // elements.
  // ---------------------------------------------------------------------
  
  public function getUniqueElementAttributeOfAllDescendants
   ( avXml           :XML,
     avElementName   :String,
     avAttributeName :String )
   :Array
  {
   var lvArray:Array = new Array();
   var lvAttributeValue:String;
   avXml.descendants( avElementName ).
   (
    lvAttributeValue = attribute( avAttributeName ),
    lvArray.indexOf( lvAttributeValue ) == -1 ? lvArray.push( lvAttributeValue ) : null
   );
   
   lvArray.sort();
   
   return lvArray;
   
  } // getUniqueElementAttributeOfAllDescendants
  
  // ---------------------------------------------------------------------
  // testAndTrace
  // ---------------------------------------------------------------------
  
  private function testAndTrace
   ( avXml           :XML,
     avElementName   :String,
     avAttributeName :String )
   :void
  {
   trace
   (
    "Element: " + avElementName + " Attribute: " + avAttributeName
   ); // trace
   
   var lvArray:Array =
    getUniqueElementAttributeOfAllDescendants
    (
     avXml,
     avElementName,
     avAttributeName
    )

   for( var lvIndex:int = 0; lvIndex < lvArray.length; lvIndex++ )
    trace( lvIndex.toString() + " [" + lvArray[lvIndex] + "]" );
   
   trace( "\n" );
   
  } // testAndTrace
  
 } // class XmlElementAndAttributeViaVariables
 
} // package

Getting XML Elements and Attributes VIA Variables with AS3 E4X

2007-06-10T07:21:00.000-07:00

For some reason this ended up being a lot harder for me than it should have been. The code ended up being a little more traditional than you would think when using the exotic syntax of ActionScript’s E4X but it is still very concise.

I think part of my problem was that I was expecting to need the exotic part of the E4X syntax. E4X is very hard to describe. I know authors, with much better writing skills than mine, have tried but so far I haven’t seen a great explanation. Most everyone relies on showing examples which I end up copying and then trial and error editing to fit my needs.

Unfortunately, the following is typical of the examples:

var lvXmlList:XMLList = lvXml..accessor;

Variable lvXml’s class type is XML in this example. The code would return an XMLList object containing all of the <accessor/> elements including those nested inside of other elements. The nesting functionality comes from the powerful double dot operator. The example is neat, particularly when you are giving a one hour presentation on “What’s New in ActionScript 3”. It will “wow” the audience. However, over time you may find this type of coding to be too inflexible.

In my case, I want some code where “accessor” can be variable and at the same time I want to retrieve the value of an attribute of the elements which is also variable. In particular (for my example listing below) I want the same code to get elements <accessor/> or <method/> and their corresponding attributes “type” and “returnType” or any other element, attribute combination.

<accessor name=”x” type=”Number”/>
<method name=”border” returnType=”Boolean”/>

The key to doing this is to make use of two functions, “descendants(elementName)” and “attribute(attributeName)” of the class XML. Now the previous code:

var lvXmlList:XMLList = lvXml..accessor;

can be redone as:

var lvElementName:String = “accessor”;
var lvXmlList:XMLList = lvXml.descendants( lvElementName );

You can then loop through each of the “accessor” elements as follows:

var lvAttributeName:String = “type”;
for each( var lvXmlElement:XML in lvXmlList )
trace( lvXmlElement.attribute( lvAttributeName ) );

I have built an example class. The class's function, 'getUniqueElementAttributeOfAllDescendants()' shows how the two XML functions are used.

XmlElementAndAttributeViaVariables.as

package
{
 import flash.utils.getDefinitionByName;
 import flash.utils.describeType;

 public class XmlElementAndAttributeViaVariables
 {
  // ---------------------------------------------------------------------
  // Constructors
  // ---------------------------------------------------------------------
  
  public function XmlElementAndAttributeViaVariables
   ( avDescribeTypeName :String = "flash.text::TextField" )
  {
   var lvXml:XML = getDescribeType( avDescribeTypeName );
   
   testAndTrace( lvXml, "accessor", "type" );
   testAndTrace( lvXml, "method", "returnType" );
   
   //trace( lvXml.toXMLString() );
   
  } // Constructor
  
  // ---------------------------------------------------------------------
  // getDescribeType
  // ---------------------------------------------------------------------
  
  private function getDescribeType
   ( avClassName :String )
   :XML
  {
   return describeType( getDefinitionByName( avClassName ) );
   
  } // getDescribeType
  
  // ---------------------------------------------------------------------
  // getUniqueElementAttributeOfAllDescendants
  //
  // Returns a sorted string array of unique attribute values found in the
  // input object specified in the argument avXml for the element type with
  // the name given in the arguemnt avElementName.
  // The name of the attribute is specified in the argument
  // avAttributeName.
  // The function will use all of the named elements including nested
  // elements.
  // ---------------------------------------------------------------------
  
  public function getUniqueElementAttributeOfAllDescendants
   ( avXml           :XML,
     avElementName   :String,
     avAttributeName :String )
   :Array
  {
   var lvArray:Array = new Array();
   
   for each( var lvXmlAccessor:XML
              in avXml.descendants(avElementName) )
   {
    var lvString:String
     = lvXmlAccessor.attribute( avAttributeName );
    
    if( lvArray.indexOf( lvString ) == -1 )
     lvArray.push( lvString );
     
   } // for each
   
   lvArray.sort();
   
   return lvArray;
   
  } // getUniqueElementAttributeOfAllDescendants
  
  // ---------------------------------------------------------------------
  // testAndTrace
  // ---------------------------------------------------------------------
  
  private function testAndTrace
   ( avXml           :XML,
     avElementName   :String,
     avAttributeName :String )
   :void
  {
   trace
   (
    "Element: " + avElementName + " Attribute: " + avAttributeName
   ); // trace
   
   var lvArray:Array =
    getUniqueElementAttributeOfAllDescendants
    (
     avXml,
     avElementName,
     avAttributeName
    )

   for( var lvIndex:int = 0; lvIndex < lvArray.length; lvIndex++ )
    trace( lvIndex.toString() + " [" + lvArray[lvIndex] + "]" );
   
   trace( "\n" );
   
  } // testAndTrace
  
 } // class XmlElementAndAttributeViaVariables
 
} // package

The example class deals with the built-in reflection function “flash.utils.describeType”. This function returns an XML description of an ActionScript object. By default, I use the XML description of a TextField object as input, What I want are all of the different types returned by the TextField class’s properties (accessor) and functions (method). When the example class is instantiated in the debug mode the following trace output is generated:

Element: accessor Attribute: type
0 [*]
1 [Array]
2 [Boolean]
3 [Number]
4 [Object]
5 [String]
6 [flash.accessibility::AccessibilityImplementation]
7 [flash.accessibility::AccessibilityProperties]
8 [flash.display::DisplayObject]
9 [flash.display::DisplayObjectContainer]
10 [flash.display::LoaderInfo]
11 [flash.display::Stage]
12 [flash.geom::Rectangle]
13 [flash.geom::Transform]
14 [flash.text::StyleSheet]
15 [flash.text::TextFormat]
16 [flash.ui::ContextMenu]
17 [int]
18 [uint]

Element: method Attribute: returnType
0 [Array]
1 [Boolean]
2 [String]
3 [flash.display::DisplayObject]
4 [flash.geom::Point]
5 [flash.geom::Rectangle]
6 [flash.text::TextFormat]
7 [flash.text::TextLineMetrics]
8 [int]
9 [void]

I have edited the resulting XML that is returned when running

trace( describeType( getDefinitionByName( “flash.text::TextField” ) ) )

which is shown in the listing below.

I have reduced it down to elements and attributes pertaining to this post. I also reordered the elements. The nesting ability of the descendants function can be seen within the first four lines. The accessor “prototype” has a “type” attribute of “*” which is the only accessor with that type and is included in the trace list above (0 [*]). But the “prototype” accessor’s parent is <type/> whereas all other accessors are the child of <factory/>

describeType( getDefinitionByName( “flash.text::TextField” ) )

<type name="flash.text::TextField" base="Class" isDynamic="true" isFinal="true" isStatic="true">

  <accessor name="prototype"                     type="*"/>

  <factory type="flash.text::TextField">

    <accessor name="filters"                     type="Array"/>
    
    <accessor name="alwaysShowSelection"         type="Boolean"/>
    <accessor name="background"                  type="Boolean"/>
    <accessor name="border"                      type="Boolean"/>
    <accessor name="cacheAsBitmap"               type="Boolean"/>
    <accessor name="condenseWhite"               type="Boolean"/>
    <accessor name="displayAsPassword"           type="Boolean"/>
    <accessor name="doubleClickEnabled"          type="Boolean"/>
    <accessor name="embedFonts"                  type="Boolean"/>
    <accessor name="mouseEnabled"                type="Boolean"/>
    <accessor name="mouseWheelEnabled"           type="Boolean"/>
    <accessor name="multiline"                   type="Boolean"/>
    <accessor name="selectable"                  type="Boolean"/>
    <accessor name="useRichTextClipboard"        type="Boolean"/>
    <accessor name="tabEnabled"                  type="Boolean"/>
    <accessor name="visible"                     type="Boolean"/>
    <accessor name="wordWrap"                    type="Boolean"/>
    
    <accessor name="alpha"                       type="Number"/>
    <accessor name="height"                      type="Number"/>
    <accessor name="mouseX"                      type="Number"/>
    <accessor name="mouseY"                      type="Number"/>
    <accessor name="rotation"                    type="Number"/>
    <accessor name="scaleX"                      type="Number"/>
    <accessor name="scaleY"                      type="Number"/>
    <accessor name="sharpness"                   type="Number"/>
    <accessor name="textHeight"                  type="Number"/>
    <accessor name="textWidth"                   type="Number"/>
    <accessor name="thickness"                   type="Number"/>
    <accessor name="x"                           type="Number"/>
    <accessor name="y"                           type="Number"/>
    <accessor name="width"                       type="Number"/>

    <accessor name="antiAliasType"               type="String"/>
    <accessor name="autoSize"                    type="String"/>
    <accessor name="blendMode"                   type="String"/>
    <accessor name="gridFitType"                 type="String"/>
    <accessor name="htmlText"                    type="String"/>
    <accessor name="name"                        type="String"/>
    <accessor name="restrict"      type="String"/>
    <accessor name="selectedText"                type="String" />
    <accessor name="text"                        type="String"/>
    <accessor name="type"                        type="String"/>
    
    <accessor name="focusRect"                   type="Object"/>
    <accessor name="opaqueBackground"            type="Object"/>

    <accessor name="accessibilityImplementation" type="flash.accessibility::AccessibilityImplementation"/>
    
    <accessor name="accessibilityProperties"     type="flash.accessibility::AccessibilityProperties"/>
    
    <accessor name="mask"                        type="flash.display::DisplayObject"/>
    <accessor name="root"                        type="flash.display::DisplayObject"/>
    
    <accessor name="parent"                      type="flash.display::DisplayObjectContainer"/>
    
    <accessor name="loaderInfo"                  type="flash.display::LoaderInfo"/>
    
    <accessor name="stage"                       type="flash.display::Stage"/>

    <accessor name="scale9Grid"                  type="flash.geom::Rectangle"/>
    <accessor name="scrollRect"                  type="flash.geom::Rectangle"/>
    
    <accessor name="transform"                   type="flash.geom::Transform"/>
    
    <accessor name="styleSheet"                  type="flash.text::StyleSheet"/>
    
    <accessor name="defaultTextFormat"           type="flash.text::TextFormat"/>

    <accessor name="contextMenu"                 type="flash.ui::ContextMenu"/>
    
    <accessor name="bottomScrollV"               type="int"/>
    <accessor name="caretIndex"                  type="int"/>
    <accessor name="length"                      type="int"/>
    <accessor name="maxChars"                    type="int"/>
    <accessor name="maxScrollH"                  type="int"/>
    <accessor name="maxScrollV"                  type="int"/>
    <accessor name="numLines"                    type="int"/>
    <accessor name="scrollH"                     type="int"/>
    <accessor name="scrollV"                     type="int"/>
    <accessor name="selectionBeginIndex"         type="int"/>
    <accessor name="selectionEndIndex"           type="int"/>
    <accessor name="tabIndex"                    type="int"/>
    
    <accessor name="backgroundColor"             type="uint"/>
    <accessor name="borderColor"                 type="uint"/>
    <accessor name="textColor"                   type="uint"/>

    <method name="getTextRuns"                   returnType="Array"/>
    
    <method name="dispatchEvent"                 returnType="Boolean"/>
    <method name="hasEventListener"              returnType="Boolean"/>
    <method name="hitTestObject"                 returnType="Boolean"/>
    <method name="hitTestPoint"                  returnType="Boolean"/>
    <method name="willTrigger"                   returnType="Boolean"/>
    
    <method name="getLineText"                   returnType="String"/>
    <method name="getRawText"                    returnType="String"/>
    <method name="getXMLText"                    returnType="String"/>
    <method name="toString"                      returnType="String"/>

    <method name="getImageReference"             returnType="flash.display::DisplayObject"/>

    <method name="localToGlobal"                 returnType="flash.geom::Point"/>
    <method name="globalToLocal"                 returnType="flash.geom::Point"/>

    <method name="getBounds"                     returnType="flash.geom::Rectangle"/>
    <method name="getCharBoundaries"             returnType="flash.geom::Rectangle"/>
    <method name="getRect"                       returnType="flash.geom::Rectangle"/>

    <method name="getTextFormat"                 returnType="flash.text::TextFormat"/>

    <method name="getLineMetrics"                returnType="flash.text::TextLineMetrics"/>

    <method name="getCharIndexAtPoint"           returnType="int"/>
    <method name="getFirstCharInParagraph"       returnType="int"/>
    <method name="getLineIndexAtPoint"           returnType="int"/>
    <method name="getLineIndexOfChar"            returnType="int"/>
    <method name="getLineLength"                 returnType="int"/>
    <method name="getLineOffset"                 returnType="int"/>
    <method name="getParagraphLength"            returnType="int"/>
    
    <method name="addEventListener"              returnType="void"/>
    <method name="appendText"                    returnType="void"/>
    <method name="insertXMLText"                 returnType="void"/>
    <method name="removeEventListener"           returnType="void"/>
    <method name="replaceSelectedText"           returnType="void"/>
    <method name="replaceText"                   returnType="void"/>
    <method name="setSelection"                  returnType="void"/>
    <method name="setTextFormat"                 returnType="void"/>
    
  </factory>
</type>

After reading what I have just written, it seems too trivial to post. But I was unable to find an example on the internet on how to do this.

Migrating State Picker drop-down list to AS3

2007-05-18T14:42:00.000-07:00

I was hoping to be able to post regularly and at the same time have some meat in the content. An early goal was to narrate my experiences converting my 2 custom drop-down lists to ActionScript 3 (AS3). I knew it would be a challenge. To be perfectly honest, I almost gave up back when I was trying to build them with ActionScript 2 (AS2).

I built a State Picker and a Date Picker control with Flash MX2004 and later updated them with Flash 8. The controls are built from scratch using only TextFields and MovieClips. The State Picker is shown below and the AS2 Rich Internet Application (RIA) demo the controls were written for is linked below also. The Date Picker can be seen from the demo as well (click on “Shipping Info” in the RIA’s menu).

State Picker in RIA Demo in Shipping Info Form

My RIA Demo

I have played around with Flex 2’s MXML but up until a few days ago I really haven’t done anything serious with AS3. The bottom line is that it has taken me longer to figure out how to do this with AS3 and thus a larger gap in my posting than I had hoped. I was hoping to post the source code early in the narrative but I know now that this won’t happen. I do have a rough version running and I will try to post the .swf file shortly.

SWF Size: ActionScript 3 versus ActionScript

2007-05-02T12:23:00.001-07:00

I was concerned I wasn’t going to get compact SWF files from ActionScript 3 (AS3) like I was getting from ActionScript 2 (AS2). But after running some simple tests, I am now thinking AS3 will not be a problem.

Unfortunately, I’m still disappointed with the large SWF size from MXML projects. However, I still plan to use Flex 2 with MXML to develop my back-end tools to take advantage of its rapid development qualities. At the same time I will pick up some practical experience with MXML. Maybe after seeing MXML in action, I might become less resistant to using it in my Rich Internet Applications (RIA).

SWF files are compressed and this can cause confusion when it comes to analyzing and comparing size. For example, when I refactor my AS2 source code to be more efficient, I sometimes find it results in a larger size. Simply changing the order of things in your code can affect the size because of the compression. Fortunately, I found Flash 8 AS2 SWF files end up amazingly small regardless of my coding style.

My tests are crude and leave plenty of room for misinterpretation and argument. Nonetheless, I have concluded AS3 files grow incrementally at about the same pace even though they start out initially about 500 bytes larger.

I wrote test code in AS2 and AS3 to build 2 TextFields. I compared the resulting SWF file size by compiling 3 different versions of each. The first, everything was commented out. The second, 1 TestField was created. Finally the third, 2 TextFields were created.

AS2

var mvTextField1:TextField = createTextField
(
  "T1",
 getNextHighestDepth(),
 0,
 0,
 200,
 20
);
mvTextField1.text = "T1";

var mvTextField2:TextField = createTextField
(
  "T2",
 getNextHighestDepth(),
 0,
 20,
 200,
 20
);
mvTextField2.text = "T2";

AS3

package
{
 import flash.display.Sprite;
 import flash.text.*;

 public class ActionScriptSizeTest extends Sprite
 {
  public function ActionScriptSizeTest()
  {
   var lvTextField1:TextField = new TextField();
   lvTextField1.x = 0;
   lvTextField1.y = 0;
   lvTextField1.width = 200;
   lvTextField1.height = 20;
   lvTextField1.text = "T1"
   addChild( lvTextField1 );

   var lvTextField2:TextField = new TextField();
   lvTextField2.x = 0;
   lvTextField2.y = 20;
   lvTextField2.width = 200;
   lvTextField2.height = 20;
   lvTextField2.text = "T2"
   addChild( lvTextField2 );

  } // Constructor

 } // public class

} // package

**AS2 / AS3 SWF Size Comparison, bytes**
Test	AS2	AS3	Increase
No code	36	566	530
1 TextField	144	667	523
2 TextFields	172	694	522

The results actually show AS3 to be better incrementally than AS2 but the differences are too small to be significant. Remember, the compression confuses everything. I was worried that bringing in a TextField might require some extra library code. It turns out adding a TextField adds only a little more than 100 bytes for both ActionScripts.

The whole coding strategy changes when you migrate to ActionScript 3, so I can’t say if the equivalent program would be smaller or larger. I’m never going to write the same application again. At the very least I would write it with more features. So I’ll never know.

ActionScript 3 and Programming Style

2007-04-23T06:45:00.000-07:00

I’ve began commenting with dashes to separate functions in the 60’s. (See the ActionScript 3 code below.) Initially I used asterisks but they required 3 holes in a punch card whereas dashes required only 1. A card filled with 3 rows of holes would sometimes collapse in the reader. Style has beauty and function but it also has history and structural integrity.

Before starting this blog I picked up a new book, “clear blogging” by Bob Walsh published by Apress. I like it so far but I haven’t finished reading it. I felt I needed some hands on experience at the same time. However, I’m going to start exercising one of his points and that is to blog about topics I love. One topic I love is “programming style”.

This is the ActionScript 3 code I used to measure the SWF file size in my previous post:

EFD1.as

package
{
    import flash.display.Sprite;
    import display.Header;

    public class EFD1 extends Sprite
    {
    /*  --------------------------------------------------------------------
        Constructor
        -------------------------------------------------------------------- */
           
        public function EFD1
            ()
        {
            var lvHeader:Header = new Header
            (
                200,
                [0x8A39B9, 0x9D5BBF],
                "Shop by Category"
            );
            
            addChild( lvHeader );
            
        } // Constructor
        
    } // class EFD1
    
} // package

Header.as

package display
{
    import flash.display.*;
    import flash.text.TextField;
    import flash.geom.*

    public class Header extends Sprite
    {
    /*  --------------------------------------------------------------------
        Private Static Variables
        -------------------------------------------------------------------- */
        
        // Programmers looking at my code:
        // Please don't do what I've done here.  That is, don't declare these
        // as static variables.  I did this when I was testing how much memory
        // is used.  Although this technique works and is expedient, it will
        // end up biting you later on.
        private static var svCorner     :Number = 5;
        private static var svHeight     :Number = 18.0;
        private static var svIndent     :Number = 5;
        private static var svMargin     :Number = 2;
        private static var svTextColor  :uint = 0xFFFFFF;
    
    /*  --------------------------------------------------------------------
        Private Member Variables
        -------------------------------------------------------------------- */
        
        private var mvTextField :TextField;
        
    /*  --------------------------------------------------------------------
        Constructor
        -------------------------------------------------------------------- */
    
        public function Header
            ( avWidth  :Number,
              avColors :Array,
              avText   :String = "" )
        {
            super();            
            
            var lvWidth:Number = avWidth - svMargin - svMargin;

            //Add Gradient Header           
            var lvMatrix:Matrix = new Matrix();
            lvMatrix.createGradientBox( lvWidth, svHeight, Math.PI * .5, 0, 0);
            
            graphics.beginGradientFill
            (
                GradientType.LINEAR,
                avColors,
                [1, 1],
                [0x0, 0xFF],
                lvMatrix,
                SpreadMethod.PAD
            );  
            
            graphics.drawRoundRect( svMargin, svMargin, lvWidth, svHeight, svCorner );

            // Add TextField            
            mvTextField = new TextField();
            mvTextField.x = svMargin + svIndent;
            mvTextField.y = svMargin;
            mvTextField.width = lvWidth - svIndent - svIndent;
            mvTextField.height = svHeight;
            mvTextField.textColor = svTextColor;
            mvTextField.selectable = false;
            setText( avText );
            addChild( mvTextField );
            
        } // Constructor
        
    /*  --------------------------------------------------------------------
        setText
        -------------------------------------------------------------------- */
        
        public function setText
            ( avText :String )
            :void
        {
            mvTextField.text = avText;
            
        } // setText
    
    } // class Header
    
} // package display

Code produces EFD1.swf

Flex SWF files are big, but I like the productivity

2007-04-22T10:51:00.000-07:00

My RIA Demo

My first Rich Internet Application (RIA) was created with Flash MX2004. I then converted it to Flash 8.  Now I want to build new RIA’s, so I bought Flex Builder 2 which will hopefully help me be more productive.  I have been excited about the new way of doing things.  I think the biggest advantage will come from the addition of the Sprite object and other more focused visual objects instead of having to use heavy weighted MovieClip’s for everything.  Also, all of these visual objects, including the MovieClip, are now created and added to the Stage in a familiar object oriented manner.

One of the hardest things about using Flash to build RIA’s was learning how to take the animation out of the application.  It was hard to use the documentation and the help available from the internet because it was usually described in terms of frames.  Eventually, I was able to weed through it. I ended up using only 2 or 3 frames to get my application started and otherwise never used a timeline.  It looks like ActionScript 3 can be used like a traditional development language and I like that.

We are told Flex 2 applications will run faster due to improved player performance and that never hurts.  I really don’t have a problem with my first RIA running too slow after the initial startup and I must have hundreds of little MovieClips that need to be created.  I’m even happy with the startup speed but anything less than instantaneous startup could always use improvement.  I’m going to put more effort into the startup speed in my next application.  I’m thinking I can really make a lot of improvements here especially since I won’t have the overhead of MovieClips and will gain from the reported player improvements.

I got the impression from somewhere in the hype that the compiled code would be more compact but I’m skeptical.  My Flash 8 application is currently 68,089 bytes long.  I was always amazed at how small it was.  I started programming in the early days when program size dominated the architecture.  I am probably more attuned to size than most programmers because it is usually not an issue today.  Of course there is no doubt that the larger the file, the slower the download.  Also, the ISP allows a limited number of bytes per month before surcharges kick in.

I became disappointed immediately after installing Flex Builder 2.  I created an MXML project and compiled it with no code added.  The size of the SWF file was 125,617 bytes.  That was nearly twice as big as my working Flash 8 application.  Then I built an ActionScript 3 project with no extra code.  The file size was 568 bytes compared to 36 bytes for a Flash 8 file.

The difference between the empty ActionScript 3 and ActionScript 2 SWF files is not a great concern.  (That is, unless you need an SWF file that does nothing.)  I’m not even sure I would be totally unhappy if I could write the equivalent functionality into an MXML application and it took 68,000 additional bytes on top of the base 125,000 bytes.  The start up could actually be faster because of improved performance even though the download would be slower.

Unfortunately, it really does appear that the code grows quickly when using Flex Builder 2 to build either ActionScript 3 or MXML projects.  I wrote some ActionScript 3 code to create a Sprite with a rounded rectangular header with gradient fill and a TextField for a title.  The size of the SWF is 1179. That means it took 611 bytes for this function along with some test code.  Now the source code is relatively concise compared to doing this with Flash 8 and the source code is clean and clear which is wonderful.  I haven’t taken the time to build a Flash 8 file to do the same thing.  There is a fair amount of code to do just the drawing of a rounded rectangle in ActionScript 2.  But I don’t think it would take 611 bytes to do it.

I tried to duplicate a small part of my existing application with MXML and it grew to 283,867 (or 158,250 bytes more) and I admit I didn’t even figure how to do everything with the MXML.  Because of this, I’m not sure I’m going to commit to MXML at this point. This is disappointing for at least two reasons. First, I didn’t need to buy Flex Builder 2 to build pure ActionScript 3 applications.  Second, my hope of increasing productivity was due partly to being able to use the nice set of GUI controls Flex provides.

At this point, I have a gut feeling that the SWF files are going to be significantly bigger even if I don’t use MXML It may be that I’m not configuring the project correctly.  It may be that the end result is still better than before because of speed of execution will compensate for the slower download time.  I have seen enough to know that I will be able to develop projects faster and the resulting source code will be easier to maintain but I sure would like to hear some comment about the file sizes.

Getting Started with RIA

2007-04-20T14:17:00.000-07:00

This is my first attempt at blogging.  I’m finding the hardest part of getting started is choosing the focus of the blog.  I’ve decided initially it will be about Rich Internet Applications (RIA).  I don’t have any RIA’s up and running and have never even created a traditional website so I’m guessing the blog’s framework will be a journal.

I have been programming since 1966 but I really have done very little work recently due partly to health problems.  Actually I have kept active during the last two years; just haven’t made any money.  Now I’m trying to reboot my career.  I’ve changed directions umpteen times in the last 40 years and actually enjoy the transitions.  I love programming, but I have to admit in recent years I’ve had to take what I can get to survive rather than do what I want to do.  I’m hope developing RIA’s will be fun.  I have resisted doing web applications because I feel that the customer has to settle for the limitations of HTML and the browser.

Although I don’t have any RIA sites up and running I do have experience writing a Flash application that I’m going to use for discussion.  The application was written originally with Flash MX2004 and more recently updated to Flash 8.  My goal is to move to Flex or perhaps just Actionscript 3 and build something similar but maybe for a different type of business.  My son has suggested a web site for an auto dealer because of his recent experience buying a car.

The application I wrote was for my daughter-in-law’s hobby of doing custom floral arrangements.  She was often asked when promoting her hobby if she had a website.  Since my son was a developer of corporate web sites he started to build one for her, but they could never agree on how it should look.  Finally they found a template for a florist website that they both liked.  Since I wasn’t working he asked me to look at it.  He wanted me to change the text and set it up so that they could insert pictures of her arrangements in it.

Well, I looked at it and I just couldn’t believe you could make money selling something like that template.  For example, the template split parts of a picture into more than one table cell to make it line up.  The few pages they had didn’t match her needs and they were missing a lot what she did need.  But it did look pretty good.

I told them I would try using Flash which I had previously used to write some small educational applications.  It took a lot longer to write than I thought it would and I will discuss some of my experiences in the future.  But to make an already long story somewhat shorter, she really hasn’t pursued the hobby since and it has been sitting there waiting to put in a few unaddressed details.  The link to the applications is:

My RIA Demo

Keep in mind this is not a running business and the products are not real.  I will touch on the details of the application as I go along but I think the most interesting things about it are that it is all written from scratch graphically except for the Actionscript TextField object and it is less than 70k in size.  There is also very little demand on the server.