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:
-
<mx:Application
-
xmlns:mx="http://www.adobe.com/2006/mxml"
-
layout="absolute"
-
backgroundColor="#000000"
-
creationComplete="init()">
-
-
<mx:Script>
-
<![CDATA[
-
private function init():void {
-
browserManager = BrowserManager.getInstance();
-
browserManager.addEventListener(BrowserChangeEvent.URL_CHANGE, showURLDetails);
-
browserManager.init("", "Welcome!");
-
}
-
]]>
-
</mx:Script>
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:
-
<mx:Application
-
xmlns:mx="http://www.adobe.com/2006/mxml"
-
layout="absolute"
-
backgroundColor="#000000">
-
-
<mx:creationComplete>
-
<![CDATA[
-
browserManager = BrowserManager.getInstance();
-
browserManager.addEventListener(BrowserChangeEvent.URL_CHANGE, showURLDetails);
-
browserManager.init("", "Welcome!");
-
]]>
-
</mx:creationComplete>
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):
-
<mx:Button id="play" label="PLAY" click="mySoundChannel = mySound.play(); status.text = 'Playing';">
-
</mx:Button>
Well, the inline equivalent is:
-
<mx:Button id="play" label="PLAY">
-
<mx:click>
-
<![CDATA[
-
mySoundChannel = mySound.play();
-
status.text = 'Playing';
-
]]>
-
</mx:click>
-
</mx:Button>
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:
-
// example 1 - using an inline event handler
-
<mx:Button id="play" label="PLAY" click="callMyFunction()"></mx:Button>
-
-
// example 2 - using addEventListener like so:
-
<mx:creationComplete>
-
<![CDATA[
-
browserManager.addEventListener(BrowserChangeEvent.URL_CHANGE, showURLDetails);
-
]]>
-
</mx:creationComplete>
Here is an example of using a weak event listener:
-
// example 1 - using addEventListener and specifying the last parameter as true
-
<mx:creationComplete>
-
<![CDATA[
-
browserManager.addEventListener(BrowserChangeEvent.URL_CHANGE, showURLDetails, false, 0, true);
-
]]>
-
</mx:creationComplete>
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.
-
<?xml version="1.0" encoding="utf-8"?>
-
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
-
layout="absolute"
-
backgroundColor="#ffffff">
-
-
</mx:Application>
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.
