judah’s blog

How would you like to own your own Flex components store? You can and you don’t have to start from scratch. I have been offered a new opportunity (like you are being offered now) and would like to take it. The only caveat is I have to sell my business. So the Flex components store I currently run can be yours for a very reasonable price. Maintenance is low and you can work from anywhere. You can set your own hours and increase your revenue easily. It really is the perfect job. Please contact me at judah at drumbeatinsight com. BTW I will continue to run the store normally with new components, upgrades to existing components and support.

I've been working on a project recently and it came time to add deep linking. I looked into Adobe's Browser Manager class and found an amazing API for deep linking but I wanted it in MXML. So I added a few features and wrapped up the behavior so it only takes about one line of code to add deep linking to your app. Well, sortof. Anyway, here it is.

Advanced Example project
Basic Example project

Test deep linking with the test panel

At the minimum all you have to add is this:

The Link Manager automatically adds links in the browser as you move through the states in your application. It also "reads" the url when the page loads in the browser and automatically moves the application to that state.

Every time the state changes it updates and "writes" the project name and current state to the browser title and then writes the permanent link to the browser address bar.

All you need to do is to add the link manager to the application. You do not need to specify any parameters although additional options are available.

If you want to modify what is written to the browser address bar you can use the writeLinkFunction.

If you want to modify the application when you "read" the url in the address bar you can use the readLinkFunction and perform additional actions and/or redirect to a different state.

If the url contains incorrect data, ie if it points to a non existant state. You can use the stateNotFound property to send the user to a "state not found" state.

You can get the source by right clicking on the links. I've also uploaded it to an SVN repository, http://www.assembla.com/wiki/show/flexcapacitor getting the most recent version and contributors. Note: If you've read that page you'll know I have a couple of announcements coming up. BTW the license for the Link Manager is MIT (free for commercial use).

...that runs as a Flex Builder plugin.

Here's the story. I'm trying to write a Flex Builder Plug in and I've had no luck. The closest thing to any working tutorial I found is here. I have some great ideas I'd like to create. And although Eclipse has some great features it would be even better if I can create a plugin using Flex or AIR itself.

$100 for the following example plugin created in Flex or AIR
$50 for the following example plugin created as a standard eclipse plug in

The requirements are this:
Create a view that can be shown in Flex Builder that shows the name and type of the selected component in the design view and the mxml editor view and show all the properties that exist on that component. It must also listen and update as you select different items.

Use Case:
1. Developer starts Flex Builder.
2. The developer then opens the new View if it is not open by going to Window > Other Views > Flex > Property Inspector 2.
3. The developer then opens a Flex Project and selects a button in the design view.
4. When the developer selects the button the "Property Inspector 2" view shows the type of the component "mx:Button" and the properties that are applied to it (see image).
5. He then switches to the mxml editor and places his cursor inside a textinput mxml tag. The view is updated to reflect the textinput information. As he places his cursor inside different tags the Property Inspector 2 view is updated.

As a starting point check out the examples in the Help Documentation:
From the Help Menu Select Help Contents. Then expand the Adobe Flex Builder 3 Extensibility node and click Flex Builder 3 Extensibility API Reference.

If you are a Flex developer you need to know what this is. Knowing what validateNow() can mean the difference between making steady progress and being stuck in a rut scratching your head.

From the Flex Documentation:
validateNow validates and updates the properties and layout of the object and redraws it, if necessary. Processing properties that require substantial computation are normally not processed until the script finishes executing. For example setting the width property is delayed, because it may require recalculating the widths of the objects children or its parent. Delaying the processing prevents it from being repeated multiple times if the script sets the width property more than once. This method lets you manually override this behavior.

The key to this post:

There are times when you will ask Flex to do something and nothing will happen. You will set properties or get properties and it will appear nothing has changed. This is because Flex delays applying those changes until the next render frame. Since Flex runs on the Flash Player and the Flash Player has a specific method to process your application it devotes a slice of time for responding and processing your ActionScript code (actually compiled bytecode) and then another slice of time is used to render or draw and update the objects in the display to the screen. These time slices can stretch or shrink depending on different factors.

David Colleta explained it this way,
[There is a time between] ...when you set Application.disabled to false and when the Application’s commitProperties() is executed: the invalidateProperties() / commitProperties() cycle. As with many property setters in the Flex framework, calling the Application.enabled setter doesn’t actually disable the application immediately. Instead, a flag is set, invalidateProperties() is called, and then the next time into the scripting engine, commitProperties() is called by the framework. In the Application’s commitProperties() method, the flag is checked, and if appropriate, then the application is disabled.

The invalidateProperties()/commitProperties() cycle is a good thing: it ensures that all property changes to an object during a scripting engine call take place at the same time, and prevents lengthy or expensive operations from being toggled repeatedly during the call.

Since your component properties can change multiple times before the screen is updated Flex saves applying these changes until it's time to render the display. Not all changes or properties behave like this. Mainly it is the ones that cause a visual change.

Here is an example of a change not getting applied right away or in my case it was discarded when I reparented it:

In the above example you need to call validateNow on the parent of the component to apply the changes to the component rather than the component itself. That is because button1's position is bound to it's parent. Button1 is 25 pixels from the "top" of the container it is in.

I won't go into any more details on this but you can learn more about a components life cycle from the Effective UI's presentation found on AMP, http://www.onflex.org/ted/2008/08/360flex-15-sessions-posted.php. Sorry I do not have a link to the slides.

Additional examples of this phenomena are listed here, validateNow() on text fields and lists and datagrids.

Personally, I think this is a cryptic issue for new developers. I think that by default all changes should be applied instantly and/or you are provided an option to enable or disable this feature on the application and/or on a per instance basis. And I'm not sure I like coding to something that doesn't do what I tell it to right away. Having said that I realize that this design speeds up your app exponentially. Maybe in Flex Builder's warnings and hints it could say, "Hey dude, the changes you're applying on this line won't be applied until later. This property is delayed by design."

There are two new publications that emerged recently on the Flex and Flash frontiers.

Flash & Flex Magazine
Flash & Flex Magazine (creative name) or FFD for short covers both Flash and Flex topics (obviously).
I checked the first edition at the store tonight and it's great to see articles about Flex in a magazine in a bookstore. It was surreal. I think Flex has been somewhat of an underground technology passed around in a sort of grass roots effort. Seeing it in a public forum I realized it might grab more attention. Personally, I like the underground movement feel and the benefit of being one of the early adopters. Anyway, it has some impressive articles and the next issue has some great topics in it as well.

Please note, the website is not a reflection of the magazine. I'm not sure what happened there but you should check out the magazine.

Flex Authority
This is another strong publication focusing on Flex and AIR. I've met Jeffry Houser, the editor in chief, recently and he has a strong line up of articles and author's. I didn't get a chance to see if it was at the bookstore tonight but I have a copy of the latest issue, which is also a first edition. I recommend this be on your desk.

In general I'm excited for both. I don't know if Flex Authority will be placed alongside Flash and Flex Magazine in the bookstores but both magazines offer pdf subscriptions as well. One issue that I noticed was that Flex Authority has a smaller form factor. Maybe I'm not used to it yet but I think, if I had it my way, I would like it better full sized and right next to FFD in the bookstores. In the end it's the content that counts.

Disclaimer: I was not bribed in anyway to write this post (what's else do you need me to say?)

I want to share a couple of tips that I've learned in designing and developing Flex projects. The first few tips are meant to speed up compile and build time.

1. Use the Flex Builder 3 project structure. Convert FB2 projects to the FB3 folder structure
Why? When you compile in Flex Builder it copies all the files and folders in the source directory to the bin directories. This is an option that is enabled by default. The option is in the Project > Properties > Flex Compiler > "Copy all non-embedded files to the bin directory". You don't want to turn this off though if you have assets that you might need. Instead move the mxml application files to a directory such as "src" and then point to this directory in Project > Properties > Build Path > Main source Folder. This will save you countless amounts of compile time. You can do this manually as I mentioned or create a new Flex Builder 3 project then copy your application files to the new source "src" directory. Assets that are not part of the project can remain in the root directory (psd's pdfs, etc). Files that your project needs to reference can remain in the src directory or better yet put them in the html-template directory. For example, you can put your server side pages, php files, js files in the html-template directory and they will be copied out to the bin directory when you compile for you. This will keep your src directory clutter free.

2. Close all other Flex Projects
I have seen people with 8 to 12 Flex projects open at a time. These projects are all factored in when compiling. In addition the extra memory footprint they can have can take away from other tasks. Close unrelated projects and your build time will speed up.

?. Close all other Flex Projects and remove unused applications
A dark arts technique is to remove all the application files except your main application. Why would you have more than one? I typically have a few mxml application files in the same src directory for use as examples. In a recent project I had 3 mxml application files along with my main application file. Removing these can speed up build times because Flex will not validate them unless they are in the Applications list. Project > Properties > Flex Applications > Select and Remove.

?. Use the Flex 3 SDK instead of Flex SDK 2
You didnt here it from me.

3. Change the name of your main mxml application file to index.mxml
Depending on the project, after creating a new Flex project you may want to change the mxml application file to index.mxml. Doing this will cause an associated html file called index.html to be created on build. Why do this? When you put the file in an empty directory on the server it will automatically be shown to your visitor. For example, when a visitor visits your website and they don't specify a page the server looks for a file called "index.html". So if you uploaded an index.html file to the root directory of your server than requesting http://www.dude.com/ would cause the web server to send http://www.dude.com/index.html. And if you are testing and have multiple directories you can separate your builds like so without having to type in the file name each time:

http://www.dude.com/
http://www.dude.com/test1/
http://www.dude.com/test2/

would automatically point to these files if they existed:

http://www.dude.com/index.html
http://www.dude.com/test1/index.html
http://www.dude.com/test2/index.html

4. Do not use the root state as a base state
When you are using states do not use the base state. Skip it. Keep the base state blank. Use the second tier states as your design templates and your third as your actual visible states. Why? A few reasons,

- If you have more than one design or layout you wouldn't be able to easily change the design. You could create a new design state but you would then be removing all the design elements of the base state or layout and then adding the new design or layout on top of that. This is inefficient, time consuming and can be cpu intensive. But let's say you already did it this way, take a look at your code. It's a mess. It would be worse if you then tried to add transitions. Just don't do it.

- You may see the base state flash while the next state is being created. Let's say you do use the base state but later you decide you want to start out on another state besides the base state. Depending on how complex your start state is you may still see the base state temporarily while the start state is being "created". This may be a bug or may not but you should be aware of it.

- And yet another reason, if you want to fade to black or "blank" you can do this by fading to the base state and then on to the target state. If you have content on the base state this would be much more complicated.

5. Create your projects in a path that does not include spaces
By default, Flex Builder will create a workspace in a subdirectory of the My Documents folder (Windows XP: C:\Documents and Settings\\My Documents\Flex Builder 3). Normally this is good because you know where the files are and can easily add them to your backup plan (My Documents/[backup everything here]). But for development and the browser it is bad. When you try to test your application locally in the browser it will cause security sandbox errors. Some browsers won't even display your page (cough cough IE cough cough)! This can be a major hassle because everything will be working fine and then you download the latest update from another developer and everything bombs and you have no idea what happened. Instead place your project files (workspace) in something like "c:\projects\flex\" or "c:\projects\flex\MyFlexProject".

6. Do not use spaces in your file names
This can lead to the same problems listed above.

7. Where appropriate take advantage of inline scripting
If you have been coding in Flex for any amount of time you have seen this scenario:

In the example above you are calling the init function when the applications creationComplete event is dispatched. Using an inline code handler the exact equivalent of the above is this:

You've typed less. If you need any imports press control space after the Class and Flex will create the script block and import statements for you. It's quicker.

You have also seen this next type of scenario below, right? Tell me you have... dear GOD IN HEAVEN TELL ME YOU'VE SEEN THIS CODE!!!! ...eh hem, (composes self):

Well, the inline equivalent is:

What is the advantage of this?

- Less typing. Code completion writes the method signature for you
- Your code is wrapped in CDATA tags
- It is easier to read especially with multiple lines of code
- The code is localized. You can see exactly what happens when the click event dispatches. A lot of times I am hunting down an event listener.

BTW, you still have access to the event object.

What are the disadvantages of this?

- The same disadvantages as specifying an event handler inline such as weak listeners.

It's up to you to decide when to use this.

ASIDE - EVENT LISTENERS
BTW When should you use weak event listeners? It's easy to figure out. Ask yourself, "what is my memory usage requirements on this project? who is my target audience? cave men? mobile users? if so will this button, class, etc need to exist through the whole application session? will there be a point that it will never be used again?" If yes then you may want to create a weak event listeners. If not do not waste your time. When to worry about it really depends on the project. Just keep things in perspective. (btw please leave your comments)

Here is are examples of creating a strong reference through an event listener:

Here is an example of using a weak event listener:

8. Get rid of the nasty preloader background fill
Almost every Flex application I've seen has this default grayish background color. At first it was ok. There are a few apps that change this but even those still show the crappy grayish color during the loading process. To get rid of it add backgroundColor="#ffffff" on the application tag. This only works on the Application tag. Adding it to your style sheet doesn't work and using styleName="plain" also does not work.

Why or how does this save you time? You figure that one out.

Update: Ted Patrick posted a compiler string that will the same thing.
-default-background-color #FFFFFF
http://www.onflex.org/ted/2008/08/dear-google-finance.php

9. Use Control + O more
In fact get in the habit of using Control + O. This command brings up the quick outline view. This is the most hidden feature of the Flex editor but one of the most helpful. This lets you find and jump to variable declarations, method declarations and more. The only problem with this is that I don't use it enough. Honestly, it should be a button on the editor panel. I've made a quickstart guide for using this feature. Put the mouse cursor in the editor. Now press control + O.

10. When typing in the MXML editor do not type the "mx:" part
When you are typing in the MXML editor do not type the namespace unless you have a reason to. Typing "" in the code completion list.

11. Use this site or Action Script Errors Repository when you are stuck on an error
I update these sites often. They are updated regularly by people in the community with solutions and descriptions of typical and not so typical error messages. Though it is still in beta please contact me for an author account and you can go in and edit and add error notes and resources.

Don't be hatin yall. I'm down. I've invested a lot of time and resources in my life into the Flash Platform for various reasons. I see a huge amount of appreciation for Flash in the consumer field (people love youtube, hulu, flash image galleries, etc) but in the tech field I still read comments and get the feeling there is some bitterness. Some friends included.

Here is why I develop for the Flash platform:
* WYSIWYG - What you see is what you get. Where I lay things out on the stage are exactly where they show up in the browser.
* Cross browser support - I only have to write one flash project and it runs the same and looks the same in IE, Firefox, Safari, Opera, etc. When I do HTML, CSS and JavaScript I shudder trying to get a design and behavior to work right in all browsers and in all versions. In fact I refuse to ever take on any HTML projects. To be balanced there are people who have mastered this art but at what cost?
* Easy animation, filters and effects - It's easy to do animation, add special effects filters and effects.
* Flex Builder - There is an IDE called Flex Builder that makes development RAD (again). It is because of this software and the Flex SDK that I develop for the Flash player platform. In other fields outside of the Internet there are advanced RAD (Rapid Application Development) IDE's that allow you to build sites and applications in a fraction of the time. Up until now there have been little that let you focus on making a great application. You would typically spend 10% of your time on the design, actually the normal amount of time on a design and then 90% more time getting it to work in and for all the various browsers. The problem being compounded every time a new browser version is released. This is called "compatibility". Say it with me class. The Flex Builder IDE let's me focus on my project instead of on making it work. As a creative type originally (we all are just admit it) that's what I want.
* Icing on the Cake - These are the features that are icing on the cake, hd video (with support for mpeg4), audio (mp3), photoshop level graphic filters, vector graphic support, microphone streaming, webcam streaming, 3D (in version 10), place phone calls from your browser (see http://ribbit.com), AIR support that lets you take your web application / project to the desktop as a fully featured, first class citizen in a few minutes.

I like to be balanced in my assessment. I wouldn't develop for the Flash Platform if it wasn't for the quality of work in the Flex Builder IDE and the Flex SDK. Neither would millions of other developers.

But let's be honest. Think about it. Are you or were you bitter about it? Has this changed? I'll be honest, I didn't like Adobe Acrobat until version 8 I think? Whenever they changed the interface and made it load faster. Now I don't mind it. And for Flash, I will not make another "application" in the Flash IDE. I would use it only for animation and simple projects. Well, the new version of Flash (not out yet) is supposed to support inverse kinetics and 3D so we'll see...

So is it because Flash has been used for ad's? Is it because to create Flash content you need to purchase development software? Or because there has been no support for the back and forward buttons? Is it because the Linux version was always one version behind and had poor support?

Update! I hit a big issue this week. SEO or Search Engine Compatibility. The term SEO is used loosely to mean how friendly, accessible, compatible etc, is my site / data / application to the search engines which in turn results in how my site / application and site information / data is then found in those same search engines. Up to this point there have been a lot of valid SEO issues and hacks to work around these issues. Apparently, Google and Yahoo have both made changes to search inside of a swf and follow links. There is testing going on right now in the Flash / Flex community to see how well this works and if we have to follow a practice or if that matters.

I've been waiting for the new Flex 3 and Adobe AIR books for quite some time now. As I was browsing through my local Barnes and Noble I came across "Beginning Adobe AIR" by Rich Tretola. I checked the price and it cost more than the other books in the same category. I hesitated but then I thought about a conversation my previous boss and I had. The decision to buy books or software came down to a formula, "How much does it cost right now?" and "How much time will it save you?". If you can prove to your boss / manager that a resource will save you time which will save them money then they are much more likely to purchase it.

For example, using this formula you could say that this book will give you back a theoretical $550 in the short term with possibly more in the long term. This is in exchange of $44 in the immediate. Does that make sense? It makes more sense as a consultant who bids on a project for a set amount. So for example, you or your boss bids a project at $5000. If buying a $44 book will save you 20 hours of research and you work at a rate of $30/hr you have just prevented spending ~$600.

If you could accurately estimate how much time a resource will save you you can use this formula to see how much that translates monetarily:

Total Return on Your Initial Investment = (Hourly Rate * Hours Saved) - Book Price;
Total ROI = ($30 an hr * 20 hr) - $44;
Total ROI = $600 - 44;
Total ROI = $556;

You spent $44 and because of the information you received you were able to get the project done sooner which works out to a figure of $556.

For me, if it saves me 1 hour of time, it has paid for itself. In addition to time, i benefit from someone else's research and explanation of any issues I might encounter on my own. In a real world example, the book I purchased contained all the examples in an easy to find location. It saved me nearly 20 to 30 hours plus an unknown amount in the future.

The point of this post is to convey that even in a world with google, blogs, forums and online documentation having a good book with all the information in one place still has amazing potential and benefits.

Well, there is another point too. The second point is that if you need something at your job, software, books or any sort of resources, use the formula above to calculate the money it will save your company and then present that to your boss. When you show them the numbers you will be speaking their language.

Update: I don't know if this pattern is accurate. In my case it works but at any rate please post your comments.

I spent quite a lot of time on this today so I thought I'd post this for myself and others. I was pulling in an HTML page as XML and I wanted to get everything between a specific tag. With E4X this would be easy. But after numerous attempts with no results I ran the HTML through a validator in Dreamweaver and found out that it was "malformed" XML. So E4X was out of the question. Now I thought it would be easy to just use a RegExp pattern I found online but because of nested tags of the same name it was not able to handle this. I'm not an RegExp expert but I've been using them for as long as I can remember. So I finally found one online and in a program called RegExp Buddy. RegExp Buddy clearly showed me that the pattern wasn't finding a match because it was over multiple lines. After reading more about the dot metacharacter in RegExp buddy I came across this line, "The dot matches a single character, without caring what that character is. The only exception are newline characters. ". Now we are on to something. So I read further, "All regex flavors discussed here have an option to make the dot match all characters, including newlines. In all programming languages and regex libraries I know, activating single-line mode has no effect other than making the dot match newlines." Seemed simple enough. So once I enabled single-line mode the pattern found a match.

Here is the code I used to find the beginning and end of a specific tag. This is in ActionScript 3:

If there's another method please let me know.

A close friend of mine told me a few years ago to drop everything I was doing in Flash and switch to Flex. We talked about it for a few hours over the next couple of days. It took a few weeks of research and a lot of soul searching to risk dropping everything and get into Flex. It wasn't long before I came to the conclusion that this is where I wanted to be. It is now two years later. During that time I've surveyed the Flex landscape and I've come up with somethings I think you'll like.

This week only I'm having a special for a new software package I have creatively titled "A lot of Flex Stuff for an insane price". It contains well over $1200 worth of new Flex related components, classes and examples that I'm offering for $399 prerelease price. This includes the source code on these products. Why am I doing this? For the lulz. And for feedback and to get the word out there. Take a look at it and let me know. Flex Prerelease Sale .

PS If you figure out what the Data Component is then you will not wait on this offer.

Road Map for 2008

Q1
Release commercial versions of the beta components in the Flex Package
This pack includes the HTML Component with source code, Icon Component aka Status Indicator, Data Component, Date and Time Component, Countdown Component (people love these things), Label Component, Position Class (you know when you are trying to position something in the center of the screen or container or upper right hand corner of the screen or wherever, this helps you), Wordpress Header project for adding your own SWF to your Wordpress blog, CallLater class (when you want to call a function after a predetermined set of milliseconds), Contact Form project (a simple contact form for your website), etc. blah blah blah etc etc etc so on and so forth.

After Q1
More components - TBD, etc
Calligraphy CMS - A Flex based CMS to go along with the Data Component
Richer Text Editor for Flex - Think of the features you'd like, I'm pretty sure they are already planned...
Shopping Cart for Flex - Basic shopping cart class or component for use with PayPal.
AS3 Physics engine - Complex multipoint collision detection among other requested features in a physics engine...
Alarm Clock 2000 - A better Alarm Clock in my opinion
Time Tracker 2000 - Time Tracking Software
The Flex Foundation - A site that receives enough income from subscriptions to address the needs of the Flex community. This means that as income comes in then resources come out. These so called resources would be in the form of components, examples, live Flex help chat, moderated Flex forums, moderated Flex mailing lists (or help answering questions on FlexCoders), live chat and forum support on open source projects, patching and maintenance of open source projects, contributers to Flex documentation and more. Feedback and investors please contact me here at http://drumbeatinsight.com/contact.

I'd like to setup the Flex Foundation, physics engine and the Richer Text Editor so any investors will help speed up this project.