Monthly Archives: August 2007

Accessing values across components in Flex

I am working and see an email come in from flexcoders asking how you would access a variables value in one component from another. Easy enough. Well, that is what I thought. I came up with three different answers to this problem and I am convinced there are others. All good enough, but which is best to implement. I will let you decide. 

1. Put bindable public variables (properties) on your components and set the values in the parent.
2. Dispatch an event on one component and have the parent component set the other components property.
3. Create a singleton class that holds the values and bind the data to your components, so when there is a change, the values in the components will be set accordingly.

I like the third answer best, but is a bit overkill for the simple implementation that does not need to access the information more than once. The third has more scalability, but takes longer to code.

Demo Example
Source Code

Which would you use? I think it is based on your needs.

Flex ComboBox using XML

I needed a way to have a ComboBox be able to load values from an XML file.
Requirements: 

  • Needed to be able to load XML with a standard format “label” as the value you see and “data” as the value of the selection.
  • Needed a way to set the selected value, so the correct “label” shows as selected (borrowed).
  • Load the XML dynamically by setting the XML path during runtime.
  • XML list in the ComboBox may change without recompiling the application.

I extended the ComboBox in actionscript and added two new properties to be able to accomplish the requirements.
xmlFile=”xml/somefile.xml” sets the files path.
selectedValue=”somecode” sets the value of the data to be selected.

Country and State Demo using XMLComboBox
View Source

This example uses Country and State/Province. When you select “United States” as the country, the States xml will load. When you select “Canada” as the country, the Provinces xml will load. The selectedValue can be changed during runtime as in the example using the TextInput component and change event.

Seperate Module Projects in Flex Builder

I just finished splitting my modules from my main project to a separate project to be able to use the -load-externs and -link-report compiler arguments. The benefit is great when using the seperated project technique. Especially if you follow strict modular programming techniques that have encapsulation. It cut my modules down from 680k to 250k. I suspect my module will now load close to 3 times faster than before (2.72 to be exact). 

I read the following documentation to get the specifics on loading modules and setting up different strategies in my projects.
Here is the Adobe Blog Entry
Here is the Adobe PDF of the documentation.
Here are the Adobe examples from the documentation.

Creating AS3 code with Flex Builder compiler command

If you are like me, you have read a lot of information on Flex, and Flex Builder. When you create your projects, you use a lot of mxml. You should also be aware that every time you create a mxml file, it will be converted to an actionscript class.

So, where is the code for these classes? They are created somewhere you can’t see and are used to compile your swf files by the compiler. Wouldn’t it be great to be able to see this code, to see how the compiler creates a class or extends a class when you use it? Well, it is easy to do this with a compiler switch (-keep-generated-actionscript).

Just add the -keep-generated-actionscript switch to your compiler arguments by going to properties in your project. Click on “Flex Compiler”. Add the -keep-generated-actionscript argument to the compiler arguments input field. I was also able to use the abbreviated -keep argument to save typing. Apply the change and go build your project. A directory will show up at the root of your project called “generated” and you will be able to see the .as files created by the compiler.

Extending TextInput Revisited

In an Earlier Post, I extended the TextInput to capture the enter key.

After being set straight by Alex H. and Graham on flexcoders, I see it may have been overkill. Instead of extending the control to capture the enter key, all that was needed was to use enter="somefunction()".

private function handleMoveNext(event:Event):void
{
var fm:IFocusManager = event.target.focusManager;
var next:IFocusManagerComponent =
fm.getNextFocusManagerComponent();
fm.setFocus(next);
}
<mx:TextInput id="firstBox"
tabIndex="0"
enter="handleMoveNext(event)"/>
<mx:TextInput id="secondBox"
tabIndex="1"
enter="handleMoveNext(event)"/>

I think the example is still valid to show how you can extend the control to capture input into the TextInput, but my usage did not require any extending of the control.

See for yourself:

ExtendingControls Demo
Put focus in one of the boxes; Hit the enter key; You will see the focus change; Try not to use the mouse (hard for me at first).

Not Extended Demo
Put focus in one of the boxes; Hit the enter key.

ExtendingControls Source

You can also right click and View Source.

Flex Modules are your friend

Today, I started to doubt my use of Flex Modules in my application. After burning up some zeros and ones on google and getting nowhere, I finally found a link to an Adobe docs pdf that everyone should read when attempting to use Modules in their Flex Application.

Modules Documentation Update (January 16, 2007)

It also has a link to the examples used in the documentation. It cleared up some major questions I have been having lately. I may go read all the documentation from beginning to end.

Examples:
Module Examples

I plan to add this blog to my daily reading list also. The docs team gets ignored too often and they do such a great job.

Flex Doc Blog

Now go read!

Flex and Fluorine Custom Class VO’s and .NET

When working with Flex and Fluorine, it has become very tedious for me to create my custom class objects with many properties. I created a quick tool to take some of the burden of creating these objects on the Flex and .NET side.

Anyone who uses private, public properties in their Value Objects (VO) objects know it is a pain to type all those properties into a custom object. Afterward, go over to .NET and create them. About as tedious as watching paint dry in zero degree weather.

Try this tool out and let me know if it is helpful for you.

Class Generator

How to use:
1. Type the class name into the input box.
2. Add properties to the properties grid. Edit the values.
3. Add the Class to the class grid.
4. Repeat for next class.
5. Make sure to cache your classes to local disk using the Cache buttons at the top. Nothing is saved on a server, all data is stored local in SharedObjects.
6. You can make a class active by selecting it in the grid.
7. You can copy the code from the Text Area.
8. Click on the code you want to generate.

Simple, but I hope this is of use to somebody. It saves me at least 10 minutes per VO.

Let me know what you think. This was a quick and dirty throw together. If enough people think there is value I will consider improving. I am also not apposed to creating a ToDo/Wish list for the tool.

Enjoy,
Tony