I’ll put it in code what I mean:

<mx:Script> //this function triggers after the validations are completed private function onSubmit( p_evt : MouseEvent = null):void {  trace(firstName.errorString);  trace(lastName.errorString); }</mx:Script><mx:StringValidator minLength="2" required="true" property="text" trigger="{submitBtn}" triggerEvent="click" source="{firstName}" id="firstNameValidator" /><mx:StringValidator minLength="2" required="true" property="text" trigger="{submitBtn}" triggerEvent="click" source="{lastName}"/>

<mx:Form width="100%" height="100%" paddingLeft="5" paddingRight="5" id="form" defaultButton="{submitBtn}">

 <mx:FormItem label="First Name*">     <mx:TextInput width="115" editable="true" color="0x000000" id="firstName" styleName="formInput" /> </mx:FormItem>

 <mx:FormItem label="Last Name*">     <mx:TextInput width="115" color="0x000000" id="lastName" styleName="formInput"/> </mx:FormItem>

 <mx:FormItem label="Last Name*">  <mx:Button click="callLater(onSubmit);" buttonMode="true" id="submitBtn" /> </mx:FormItem></mx:Form>

Ideally, it can be like this:
ComboBox {
cornerRadius: 0;
fillAlphas: 1, 1, 1, 1;
fillColors: #ffffff, #ffffff, #ffffff, #eeeeee;
font-family: Avangmb;
font-size: 11;
dropdownStyleName: comboBoxDropdownStyles;
}

.comboBoxDropdownStyles {
fontFamily: AVGARDM;
fontWeight: normal;
}

Never try to override the updateDisplayList() of Application container.
When you override this method, the percentWidth/percentHeight properties doesn’t work properly. I was trying to use the graphics object for some background and this enforces the percentWidth/percentHeight not to work properly.

There are two case scenarios:
1) When you don’t call the super()

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight );
this.graphics.lineStyle(1, 0xE51745 );
this.graphics.beginFill(0×341264);
this.graphics.drawRect(0,0, 32, unscaledHeight);
this.graphics.endFill();

this.graphics.beginFill(0xE51745);
this.graphics.drawRect(32,0, unscaledWidth, unscaledHeight);
this.graphics.endFill();
}

In this instance, the graphics object doesn’t draw anything.

2) When super() is not called:
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{

this.graphics.lineStyle(1, 0xE51745 );
this.graphics.beginFill(0×341264);
this.graphics.drawRect(0,0, 32, unscaledHeight);
this.graphics.endFill();

this.graphics.beginFill(0xE51745);
this.graphics.drawRect(32,0, unscaledWidth, unscaledHeight);
this.graphics.endFill();
}

In this instance, the graphics object draws the background but the percentWidth/percentHeight fails, ofcourse, for apparent reasons.

1) CSS – All the paths to images/swf/external assets should be resolved to absolute. Relative paths are recognised by the asdoc/compc tools.
2) build.xml spaces – Sometimes the spaces in the file paths are not resolved; enclose them in quotes.
3) external-library-path – To give you understanding, whatever libraries referenced here are excluded from compiling into swf/asdoc/swc.
4) When creating a library SWC ensure to mention source-path argument, all the files you are referencing should be in the source path. Else the external assets are recognised by the compc.

1) Install ANT in your flex builder. If you are not sure how to install, follow this link. http://www.adobe.com/devnet/flex/articles/flex_ant_pt1.html

http://www.adobe.com/devnet/flex/articles/flex_ant_pt2.html I recommend you to go through both the parts of the tutorial as it contains valuable information as how to install ANT and get started.

2) If you are ready with ANT, you should be having two file in the root directory of your project.

a. build.xml

b. build.properties

My build.properties file typically looks like this:

# change this to your Flex SDK directory path

FLEX_HOME=C:/Program Files/Adobe/Flex Builder 3/sdks/3.3.0

# defines the Flex framework files location

FLEX_FRAMEWORK = ${FLEX_HOME}/frameworks/libs

# this points to your project’s src directory

# {$basedir} is a default variable that can be used in any Ant script

# and it points to the project’s root folder [ Flex_Ant_Tasks ] in this case

SRC_DIR =${basedir}/src

# points to the project’s libs directory

LIBS_DIR =${basedir}/libs

# this is the folder we want to publish the swf to

DEPLOY_DIR = ${basedir}/bin-release

#this property defines the doc directory, which will store your created ASDocs later in the article

DOC_DIR =${basedir}/asdocs

# defines the title for your ASDoc pages

DOC_TITLE =“Project Documentation”

# defines the footer for your ASDoc pages

DOC_FOOTER = “Copyright© 2009″

# points to your asdoc.exe for ASDoc creation later

asdoc.exe =${FLEX_HOME}/bin/asdoc.exe

Note this parameter in your build.properties file for storing your AS doc.:

#this property defines the doc directory, which will store your created ASDocs later in the article

DOC_DIR = ${basedir}/asdocs

3) Now in your build.xml , add this bit to ensure that you delete the existing directory and create a new directory for AS docs:

<target name=“Create AS Doc DIR”>

<delete dir=“${DOC_DIR}” />

<mkdir dir=“${DOC_DIR}” />

</target>

4) Here comes the main bit code for AS doc generation:

<target name=“Create AS Docs” depends=“Create AS Doc DIR”>

<exec executable=“${asdoc.exe}” failonerror=“false”>

<arg line=‘-source-path ${SRC_DIR}’ />

<arg line=‘-external-library-path ${LIBS_DIR}’ />

<arg line=‘-doc-classes MyFrameworkClasses’ />

<arg line=‘-warn-level-not-supported=false’/>

<arg line=‘-main-title ${DOC_TITLE}’ />

<arg line=‘-window-title ${DOC_TITLE}’ />

<arg line=‘-footer ${DOC_FOOTER}’ />

<arg line=‘-output ${DOC_DIR}’ />

<arg line=‘-strict=false’ />

</exec>

</target>

The <exec> sets the asdoc.exe file to run AS doc engine from the flex builder directory. This token should have been initialized in the build.properties file. Look into the build.properties file, if not it should be like this:

# points to your asdoc.exe for ASDoc creation later

asdoc.exe =${FLEX_HOME}/bin/asdoc.exe

<arg line=‘-source-path ${SRC_DIR}’ /> – Set the source-path with src directory of your project

<arg line=‘-external-library-path ${LIBS_DIR}’ /> – This is where you set all your external libraries, which are compiled into SWC. AS Docs are not generated for these libraries.

<arg line=‘-doc-classes MyProjectClasses’ /> -(There’s also an alternative command to achieve this.) This line implies which classes should you generate AS doc for. This is the trickier bit and this is how Adobe compiles the framework classes. MyProjectClasses.as file is a dummy class that stores the references for the classes you want to generate. It can be something like this:

/**

* It is a good practice to maintain this class at the root of src directory.

* MyProjectClasses.as

*

*/

package

{

/**

* @private

*/

internal class IBFrameworkClasses

{

import com.classA; classA;

import com.classB; classB;

import com.classC; classC;

import com.classD; classD;

}

}

Specify, all of your classes you want to document here. This seems to be frightening task, but I suggest this approach as it is a onetime task and really helps you maintain all your classes.

Ok, you are not comfortable!! Take this approach…

<arg line=’-doc-sources ${SRC_DIR}’ /> – This command is simple and straight forward, it documents all the classes in the src directory. I know that is what you want!!! In this approach, ensure that all the class libraries are supplies in SWC format, else you would run into creating documentation for all n number of classes.

Next few commands should be pretty straight forward, labelling the documentation and storing the AS docs in the DOC_DIR.

The scaleX and scaleY properites can take negative values as well…

//draw a box
var box:Sprite = new Sprite();
box.graphics.beginFill(0×000000);
box.graphics.drawRect(0,0,50,50);
box.graphics.endfil();

// reverses the box in the vertical direction
box.scaleY = -1;

// reverses the box in the horizontal direction
box.scaleX = -1;

In particular, Flex distinguishes between content children and
non-content (or “chrome”) children. Content children are the kind
that can be specified in MXML. If you put several controls
into a VBox, those are its content children. Non-content children
are the other ones that you get automatically, such as a
background/border, scrollbars, the titlebar of a Panel,
AccordionHeaders, etc.

Most application developers are uninterested in non-content children,
so Container overrides APIs such as numChildren and getChildAt()
to deal only with content children. For example, Container, keeps
its own _numChildren counter.

Container assumes that content children are contiguous, and that
non-content children come before or after the content children.
In order words, Container partitions DisplayObjectContainer’s
index range into three parts:

A B C D E F G H I
0 1 2 3 4 5 6 7 8 <- index for all children
0 1 2 3 <- index for content children

The content partition contains the content children D E F G.
The pre-content partition contains the non-content children
A B C that always stay before the content children.
The post-content partition contains the non-content children
H I that always stay after the content children.

Container maintains two state variables, _firstChildIndex
and _numChildren, which keep track of the partitioning.
In this example, _firstChildIndex would be 3 and _numChildren
would be 4.

1) If you have HBox of some width and wanted to align two controls at each end.

<mx:HBox width=”500″>
<mx:Button label=”Left Button”/>
<mx:Spacer width=”100%”/>
<mx:Button label=”Right Button”/>
</mx:HBox>

This will align the first button to the left and the second button to the right. There’s nothing special about the Spacer, it just extends the UIComponent. It’s just a coding trick.

2) If you have Canvas of width and height, how would you align a control to the bottom-right corner. Ofcourse, you can do so by setting the x and y values, which is not the best practice.
If the canvas width and height is dynamic, the x and y values could fail.

<mx:Canvas width=”500″ height=”800″>
<mx:Image source=”someImage.jpg” width=”100″ height=”100″ bottom=”10″ right=”10″/>
</mx:Canvas>

The Image is now set to the bottom-right corner with a padding of 10px on it’s sides.
That’s simple.. innne…