360|Flex Indianapolis

I'll be posting summaries of some of the sessions that I attended during the conference and what I thought were the high points of those sessions over the next week or two.

Flex 101: This was a very beneficial all-day training session showing how to get started using Flex. It started with Understanding Flex and Flex products, through events, event handling and custom events, and spent time demonstrating how to use AMF to retrieve data from a Java back end. Although I have been using Flex for a year or so, I learned it piecemeal, so it was great to see an organized presentation from A to Z, so to speak. Thanks to Matt Boles for organizing and presenting the session.

High Points:

• The Tour de Flex application presents all the Flex widgets in one place, including sample code and demos.


• Using Flex Builder: dragging a tab to the bottom or side of the main window will open up that code in a 2nd window, so that you can view 2 files at once.


• Event Handling - handle events as close to the source as possible. Where you have 2 sibling objects that need to communicate using custom events, handle the event at the closest common parent of the 2 objects.


• The reason to create custom events is to carry value objects - data - from one component to another.


• Pressing ctrl-space in Flex Builder will bring up code hints. This even works inside a data binding - type {} first, then go between the curly braces and hit ctrl-space or start typing.


• [Bindable] - sets up an event listener under the hood so that any changes to the variable flagged bindable cause all objects listening for changes to be updated.


• Using AMF will result in 10 to 100 times better performance over the web. Objects are retrieved as real objects and can be paired - an ActionScript object paired with a Java Class, e.g.


• Using the embed tag - only use it if it is a small image or icon. Large images or extensive use of the embed tag causes the .swf to bloat, which then means that the user must wait too long for the .swf to download


• When referring to objects in Flex Builder, it isn't necessary to type the namespace, as in <mx:...> or any other namespace. If they are imported into the file, just start typing the name of the object, like TextInput or KeyPanel. They show up in the code hinting. Saves typing!
.

• During code hinting, the class won't get imported automatically if you do any back-spacing or corrections to the object. If this happens, when you get to the end of the work, use ctrl-space - this will import the class automatically.

Flex TabNavigators

I'm creating a TabNavigator to contain the list of words for my new Jotto game. I'm creating the tabs on the fly and loading up the words from a dictionary of approximately 4000 five-letter words. My goal is to have 26 tabs, one for each letter of the alphabet, and then on each tab list all the words for that letter. This will allow the user to browse and choose a word for the computer to guess.

In theory this should be straight-forward, with the only hiccup being creating the TabNavigator dynamically using ActionScript 3 to avoid repetitive coding in Flex. But what I kept running into was that the single character letter on each tab was cut off, as in the following picture:



I tried several things that didn't work: sizing the Application, sizing the individual tabs, sizing the TabNavigator - none of these things worked. I finally found the trick, from the Flex 3 documentation on TabNavigators:

---

Sizing the children of a TabNavigator container

The default width and height of a TabNavigator container is the width and height of the first child. A TabNavigator container does not change size every time you change the active child.

You can use the following techniques to control the size of a TabNavigator container so that it displays all the components inside its children:

* Set explicit width and height properties for all children to the same fixed values.
* Set percentage-based width and height properties for all children to the same fixed values.
* Set explicit or percentage-based width and height properties for the TabNavigator container.

The method that you use is based on your application and the content of your TabNavigator container.

---

Applying the first bullet point solved my problem. The tabs now look like this:



The code that did the trick is:

for (var letter:int = 0; letter <26;letter++)
{
var box:VBox = new VBox();
tabNav.addChildAt(box, letter);
box.label = String.fromCharCode(letter+65);
box.width = 1248;
box.height=1000;

}

Security Sandbox Violations

I ran into a Security Sandbox Violation using a URLLoader today. The .SWF is on my development computer, and I was trying to access a text file on the same computer, in the same folder as the SWF.

The text file that I'm trying to load contains a list of 5-letter words that will be used in a game dictionary. After looking for information I found the following link:

Configure Your Flash Player


This link takes you to the actual Adobe Flash Player Settings Manager for your locally installed Flash player. I clicked on the 3rd tab for Global Security Settings, then Add Location, and finally "Browse For Folder".



Choosing the folder public\bin and adding it has solved the problem. My Flex app is now finding the dictionary file and allowing the SWF to access it.

Note: When I chose Browse for File and selected the SWF, I was able to get to the text file, but I got another sandbox violation when the SWF's HTML file tried to access it. Using Browse for Folder solved that problem as well.