Flex Pasta

There is no compile or run time error, but executing the following code will not work.  I knew this going in but wanted to try it just to see what happened:

<mx:TabNavigator>
      <mx:Text text=”Tab 1“/>
 </mx:TabNavigator>  

The reason it doesn’t work is because a tab navigator requires its children to be of type container.   There is a simple fix, one that requires more work

<mx:TabNavigator>
<mx:Box label=”Tab 1“>
<mx:Text text=”Everything else“/>
</mx:Box>
</mx:TabNavigator>  

I don’t want to wrap a box around all ten of my tabs!  One solution is to do the following:

1. Create a new Actionscript class called BoxText.as which extends Box.
2. Make a bindable property text:String in the Box.
3. Add an event listener for FlexEvent.CREATION_COMPLETE.
4. When creation complete occurs, simply add the text to the box.

Here is the output for BoxText.as:

package
{
import mx.containers.Box;
import mx.controls.Text;
import mx.events.FlexEvent;

public class BoxText extends Box
{
public function BoxText()
{
super();
this.addEventListener(FlexEvent.CREATION_COMPLETE, creationComplete);
}

private function creationComplete(event:FlexEvent):void
{
_text.text = text;
this.addChild(_text);
}

[Bindable]
public var text:String;
public var _text:Text;

}
}

Now I just use my component in the TabNavigator. It saves time and clutter!

<mx:TabNavigator>
<local:BoxText label=”Booyah” text=”My Text to show in the Tab“/>
</mx:TabNavigator>

Adobe opened source the Flex SDK since the 3.x release. Not only does this gives Flex developers the ability to see the source code and understand how the SDK works, but it also allows the community to provide bug fixes and enhancements. Adobe has said publicly that they would like to create sub projects from the Flex SDK that the community can contribute. The open source of the Flex SDK gives the community the fire power to submit code bug fixes. Developers should try and fix bugs in the SDK when they come across them. The following tutorial shows how to set up a Flex Project and have it build against the Flex SDK source code. These steps will allow a developer to make changes to the Flex SDK and build the project to see the changes.

1. Download and install Tortoise SVN. Tortoise is an open source subversion client that is needed to download the Flex SDK from the adobe repository.
2. Right click on a folder and click Checkout from the context menu.
3. The Toroise SVN screen should appear. Enter the URL of the repository. At the time of this being published, the URL is http://opensource.adobe.com/svn/opensource/flex/sdk/trunk.
4. Once the download of the source has completed(it takes a while!), open Eclipse.
5. Import the framework project. File > Import.
6. Press Next. Find the root directory where trunk is checked out, and enter this plus development\eclipse in the Select root directory box. This will show all of the Flex SDK projects.
7. Leave all of the projects selected and click finish.
8. Setup a linked resource variable in eclipse called FLEX_SDK and which points to the root directory of the SDK. Window > Preferences > General > Workspace > Linked Resources.
9. Enter FLEX_SDK as the name and the location where the Flex SDK is checked out. Press OK and then close the preferences window.
10. Right now the focus will be on only building the framework project. Go ahead and close the other ones. Right click on them and select close project.
11. At this point there should be no errors or warnings in the problems window. A clean might be required. Select Window > Clean and select the framework project.
12. Create a blank Flex Project. File > New Project > New Flex Project
13. Enter a project name and press Finish.
14. Now the FlexSDKTest project is setup, however, it is running against the compiled and installed version of the Flex SDK. To be able to make changes to the SDK source, the FlexSDKTest project must use the framework library project as its parent. To do this, right click on the FlexSDKTest Project and select properties, then select Flex Build Path > Library path tab.
15. Select the Flex 3 library and remove it. Click Add Project and select the framework project from the list. 16. Press the Add SWC button. Find the playerglobal.swc for the version using. The path usually is ${FLEX_SDK}/frameworks/libs/player/9/playerglobal.swc.
17. Press the OK button to close the properties window. Everything is set up to run code directly against the framework source. Just to make sure, run a simple test. Add a button to the FlexSDKTest application.
18. Open Button.as in the framework project. In the set label function, add code to the label’s value that modifies it: value = ‘I can change the SDK source code! BOOYAH!!!!’;
19. Save the file and build the projects. Run the FlexSDKTest application. The button’s label should read “I can change the SDK source code! BOOYAH!!!!”.

That’s it!! It’s off to the races for submitting enhancements and bug fixes to the Flex SDK repository. The flex bug tracking database can be found at http://bugs.adobe.com/flex/

mx:DataGrid and mx:DataGridColumn can sometimes pack powerfully picky precision.  Anyone who has ever tried using the word wrap feature knows just the pain.  Take a look at the following code and resulting output.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical” creationComplete=”cc()”>

<mx:Script>

<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]public var arrayColl:ArrayCollection = new ArrayCollection();
private function cc():void
{
arrayColl.addItem([“Poem 1″, “Sally sells seashells by the seashore.  She sells seashells on the seashell shore.  The seashells she sells are seashore shells, Of that I’m sure. She hopes she will sell all her seashells soon. If neither he sells seashells Nor she sells seashells, Who shall sell seashells? Shall seashells be sold?”]);
arrayColl.addItem([“Poem 2″, “Shelly sells seashells by the seashore.  She sells seashells on the seashell shore.  The seashells she sells are seashore shells”]);
}
]]>

</mx:Script>
<mx:DataGrid dataProvider=”{arrayColl}” width=”500″ height=”200″ wordWrap=”true” fontFamily=”Verdana” fontSize=”12″/>

</mx:Application>

Despite specifying wordWrap=”true”, my text doesn’t wrap!  After searching through the mx:DataGrid and mx:DataGridColumn properties, I came across
variableRowHeight=true.  Within seconds, text was wrapping nicely.  How great would it be if this was mentioned in the wordWrap asdoc?  Here is the resulting output: