Focus Flex App on start up

When a flex application loads it doesn't actually have focus until the user clicks on it.

So even though you can call setFocus() on a TextInput or Button and visually it appears that your control has focus (blue border), if you try to type you'll notice that nothing happens. This can be quite frustrating for a user.

One way to solve this is to edit the html file that loads your application (e.g. the index.template.html), and call the JavaScript focus() function on the flash element. I found this website explains it quite nicely:
http://www.appfoundation.com/blogs/giametta/2007/07/09/internet-explorer-setting-focus-on-flex-apps-flash-player/.

If for prefer to keep all your code in ActionScript you can accomplish the same thing by doing this:

 ExternalInterface.call("function() { var app = document.getElementById('"+id+"'); app.tabIndex = 0; app.focus(); }");

I usually put that line of code inside my applicationComplete event handler.

One other thing to note is that if you call setFocus on a component that isn't finished being initialized it won't always work. For best results call setFocus() in a creationComplete event handler.

I added the app.tabIndex = 0 after finding that the focus didn't work on Safari. This came from stackoverflow.

FXG Scale Grid

When working with FXG an important concept to understand is the Scale Grid. The scale grid determines how your FXG graphic scales. If your FXG element is used without an explicit width or height (e.g. <fxg:rounded_box/>) then the scale grid is not used. But if for example you define your FXG to have a width of 200 pixels and then in your MXML you use the FXG element and set its width to "100%" (e.g. <fxg:rounded_box width="100%"/>) or something other than 200 you'll see the graphic get scaled. The scale grid becomes important when you want to preserve aspect ratios (e.g. on rounded corners).

Here is the typical example used to illustrate the problem:

Here is the FXG source code (rounded_box_scale9.fxg) used to create this graphic. Notice the scaleGridLeft, scaleGridTop, scaleGridRight, and scaleGridBottom properties, these are what control the scaling.

<s:Graphic xmlns:s="http://ns.adobe.com/fxg/2008" version="2.0" 
	scaleGridTop="20" scaleGridLeft="20" scaleGridRight="130" scaleGridBottom="21">
	
	<s:Rect height="41" width="150" radiusX="20">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="#FFFFFF"/>
				<s:GradientEntry color="#C0C0C0"/>
				<s:GradientEntry color="#FFFFFF"/>
			</s:LinearGradient>
		</s:fill>
		<s:stroke>
			<s:SolidColorStroke color="#AAAAAA" weight="2"/>
		</s:stroke>
	</s:Rect>
	
</s:Graphic>

And here is the associated MXML (the rounded_box fxg doesn't have the scaleGrid properties):

<s:VGroup x="10" y="10" gap="10">
	<fxg:rounded_box/>
	<fxg:rounded_box width="100"/>
	<fxg:rounded_box width="200"/>
	<fxg:rounded_box_scale9 width="100"/>
	<fxg:rounded_box_scale9 width="200"/>
</s:VGroup>

I found this website quite useful in illustrating some of the scale grid limitations: http://www.adobe.com/devnet/flex/articles/mobile-skinning-part1.html.

And here is Adobe's page on FXG:
http://help.adobe.com/en_US/flex/using/WSda78ed3a750d6b8f26c150d412357de3591-8000.html.

But to summarize, here are the limitations I've found with scale grids:

• Scale grid values must be inside the boundaries of the graphic and must not overlap
  (that is, left boundary < scaleGridLeft < scaleGridRight < right boundary).
• Scale grids will not work if the graphic contains any Group elements.
• Scale grids will not work if elements have alpha applied. Instead, apply alpha to the stroke and fill elements.
• Scale grids will not work with filters (e.g. DropShadow, GlowFilter, etc). Instead add the filters inside the MXML.

I'm sure there are more restrictions, but these are what I've found so far.

Flex 4 Path Builder

April 2013 - added View Source to right click menu.

I got a little carried away making an application that lets you manipulate Flex Path objects. This application lets you easily design a path by double clicking to make each end point in your path. You can select each individual line, move, or curve segment and manipulate the end points () and the curve control points (). Click on the screenshot above to see it in action. I'm sure there will be bugs, so use at your own risk. There is no undo support either.

To use this tool, you can start by adding different kind of path segments - move, lines, and curves - by clicking on one of the 6 buttons along the top in the blue titlebar. This will cause the path segment to be appended to the currently displayed path. Each path segment also shows up in the list on the left side. Click on an individual path segment in this list to highlight it in the path. The red end points () are draggable - move them around to adjust the path. Note that the following path segment will be moved to start wherever the current path segment ends. You can also click and drag the circle control points () to adjust the quadratic and cubic Bezier Curves.
Alternatively you can use the new "Path Designer" option (which is explained in the top panel on the left side). The path designer lets you double click on the white graph area to create each segment of your path. Here are the instructions:

• To create a line: Double-click on the graph
• To create a straight line (horizontal, vertical, or at 45°): Shift + double-click on the graph
• To create a quadradic curve: Ctrl(⌘) + double-click on the graph (you can edit the control point later)
• To create a cubic bezier curve: Ctrl(⌘) + shift + double-click on the graph
• If you check the Use relative positions checkbox the path segments will use relative positions instead of absolute (lower case letters like "l", "m", "c", "q", etc)
• If you check the Snap To Grid checkbox, then the end points are all shifted to fit on a grid defined by the number of pixels you choose. This is a nice way to easily get nice round numbers like 20, 50, 100.

If you have an existing path you can paste the data string (e.g. "M 100 100 L 150 150 H 200") into the textbox at the top and click Update. This will render your path on the screen and allow you to manipulate it.

I've also added support for ActionScript GraphicsPath commands to be pasted in the same textbox in this format:
"1 2;10 10 20 20"
The first set of numbers before the semi-colon are the commands (defined by the constants in GraphicsPathCommand). The second set of numbers after the semi-colon are the coordinates of each path segment. In your program you can use a trace statements like this on your GraphicsPath object to output the correct format:

trace(path.commands.join(" ") + ";" + path.data.join(" "));

And finally, if you have a path created in ActionScript using a Graphics object or a GraphicsPath object like this:

var g:Graphics = uiComponent.graphics;
g.moveTo(10, 10);
g.lineTo(50, 10);
g.moveTo(50, 50);
g.lineTo(10, 50);

You can copy that code and paste it into the same textbox at the top. It will pick out the move, line, and quad curve commands. This will only work if you use all numbers in your code - no variables or constants.

The Translate X/Y option lets you move every single point on the screen by the given x and y offset values. This includes the control points. So think of it as shifting the entire path. Note that the points can't be moved into negative values (even though they are allowed), so unexpected things will happen if you try to do this.

On the right side of the app (not shown in the screenshot) there is an edit panel which lets you type in the exact numeric values that you want for each point in the selected path segment. This way you can easily tweak your path to look just right.

Below the Edit Panel is the Stroke & Fill Properties panel. This lets you define the path stroke and fill properties.

Below that is the MXML and FXG output windows which let you copy the MXML/FXG source code used to render the path, so you can paste it into your own application. If you are using FXG, then in Flash Builder choose "File > New > File". Then enter in the filename you want like "mypath.fxg". In the editor paste in the FXG, it has all the declaration xml that you should need.

Feedback welcome, have fun playing.

I haven't enabled view-source for this project yet, hopefully one day.

Can't type into Flex textbox on Mac Safari 5.1!

I recently ran into a problem on Mac Safari 5.1 where I couldn't type into any text boxes in my Flex App. Very frustrating! Anyway, I finally found a simple solution from the Adobe Forums.

First this problem only happens with the Debug Flash Player.

The fix is very simple - in Safari under the Develop menu (if you don't see the Develop menu it can be shown by going to Preferences > Advanced and checking the Show Develop menu in menu bar checkbox), change the User-Agent to Firefox or something other than the default. This will cause the page to reload, and should allow you to type again.

Bizarre.

Flash Builder 4.5 Mobile Application for Acer Iconia A500 Tablet

This blog post will discuss making a simple mobile application using Flash Builder 4.5. I will be targeting the Acer Iconia A500 Tablet because it is currently the only mobile device that I have access to, but it should be relevant to other mobile devices too. The Acer Iconia A500 Tablet runs on Google Android 3.0 (Honeycomb). For a full review of the tablet, read this article. It sells for around $450 for the 32GB version.

Step 1 - configure the tablet

On the tablet go to Settings - Applications - Development
Check the USB Debugging option. This allows Flash Builder to debug applications straight on to the tablet through USB. Next, connect the tablet to your computer using the USB cable provided.

Step2 - create a mobile project

Inside Flash Builder, create a new Flex Mobile Project.
Give it a name like TabletApp. Click Next.

Select the desired target platform(s). For the Acer Iconia and other Andoid tablets, check the Google Android checkbox. You can choose the mobile app template to use here as well.
Important: your mobile application might need to have access to the internet, the file system, the gps, etc. Under the Permissions tab, choose the Google Android platform, and check any of the permissions that your application needs.
For my sample application I chose the INTERNET, WRITE_EXTERNAL_STORAGE, and ACCESS_FINE_LOCATION (GPS) permissions.

Click next. Set up the build path if necessary, or leave it to the default values.

Once the project is created, Flash Builder will open the two main files - TabletApp.mxml (the main application file), and TabletAppHomeView.mxml (the default home view component). Add in some components to the home view like a button or a label.

Step 3 - Run the application on the tablet

Now, to test our your application on the Acer Iconia Tablet, make sure it is connected by USB, and that you followed the step above on the tablet to enable USB debugging.

Under the Run menu, choose Debug Configurations.... Add a new Mobile Application launch configuration. Choose your project and application, and the target platform (Google Android in this case).

Under where it says "Launch method", choose the On device radio button. If you have trouble connecting, then read the Device connection help page.

If all works as planned, you should see on the tablet the simple application that you created.

Step 3b - Run the application on the desktop

If you want to test out your application without running it on the tablet, you can run it on the desktop by choosing the other radio button option - On desktop. There is a list of pre-configured devices, but the Acer Iconia tablet isn't in the list. So click Configure... and then Add to add it to the list. Here are the specs:

I've put together a simple app that shows some of the properties available to mobile applications. Click the screenshot below to see the full size.

You can download the project file here. In Flash Builder choose "File - Import...", and then choose "Flash Builder - Flash Builder Project", and select the downloaded fxp file.