When developing RIAs it’s generally best practice to provide the user with feedback when data is loading. If you’re familiar with Flash MX Pro 2004 then you’ve most likely seen the ProgressBar component. I wanted to take a minute and demonstrate a simple example of using the ProgressBar component that ships with Flex. There are different flavors of the component and I’m going to discuss the simplest implementation.

The example below is considered a “determinate” ProgressBar. This means that we’re loading data or a file of a fixed size. We don’t always know the size of the request so we’ll address that later. This example demonstrates loading a 190kB jpg where the progress bar compares the number of getBytesLoaded() with the number of getBytesTotal() and displays the percentage loaded. The basic code to produce the example below looks like:

</p> <p>

Click the load button below to see it in action.

I recently finished an article for M2M Magazine discussing developing M2M applications for the Nokia 12. If you’re really bored please feel free to get it a read and let me know what you think. Also, if you’re interested in keeping up with M2M then I would recommend checking out MachineBlog.

http://www.m2mmag.com/print/article.asp?ARTICLE_ID=226

I posted last week about the forward/back browser buttons and how Flex has built-in support to handle them. I also mentioned that I would follow up with a quick fix for handling the browser refresh problem. The basic approach is to use a SharedObject (aka Flash Cookie) to store the currently selected tab and restore the last selected tab when the page is refreshed. You can see an example by clicking here. Be sure to click around and then refresh the page.

Whenever a tab is selected, the index of the selection is written to the SharedObject. The handleTabChange method is called and writes the selected index to the SharedObject. Whenever the page is refreshed the application checks for the existence of the index variable in the SharedObject and then sets the last viewed tab. The code looks like:

</p> <p> function restoreSelectedTab()<br /> {<br /> var so = SharedObject.getLocal(“cookie”);<br /> tabNavigator.selectedIndex = so.data.index;<br /> }</p> <p> function handleTabChange(event)<br /> {<br /> var so = SharedObject.getLocal(“cookie”);<br /> if(event.newValue > 0)<br /> so.data.index = event.newValue;<br /> so.flush();<br /> }</p> <p>

I’ll continue to extend this example in the coming weeks.

Many of us are aware of the inherent problem with Flash and browser navigation. The browser buttons are generally independent of the Flash movie and lead to all sorts of problems. For example, let’s say you have an app with several screens that is guiding the user through a checkout process. If at any point the user hits the refresh or back button, they are sent to the previous page or site they were viewing. This assumes no additional coding has taken place to accommodate this problem. A common argument from a development standpoint is “why should I have to write extra code to handle the browser controls?”.

I’d like to introduce you to the Flex TabNavigator component:

Don’t get too excited just yet, I’ll explain what I mean shortly. Let’s take a quick look at the code used to generate this layout:

</p> <p>

The reason I say not to get too excited just yet is because the TabNavigator example above is embedded in an HTML page. This won’t do anything for us unless we’re building a true RIA which generally consists of an all Flash interface. So if you click on this link you’ll launch the TabNavigator in a new window. The back/forward buttons should now sync with the tab clicks.

Also, notice how the layout doesn “intelligent” sizing when you resize the browser window. Instead of just scaling to fit the window, the Flex engine has intelligence where components can resize proportionately to create truly dynamic layouts. I’ll post a better example later. Also, the refresh button issue hasn’t been resolved but I’ll post a workaround for that as well.

Now that I have my non-commercial Flex license kickin’, I’m going to start providing some in depth information about Macromedia Flex. I plan on starting simple over the next few weeks and lead into some more complex RIA’s. I think it makes sence to demonstrate the flexibility of the Flex classes and components in standalone mode before throwing them together to build a robust RIA.

Let’s start with a simple Datagrid component and see how to populate it with a few users contained in an xml file. Here’s the output:

Now the truly amazing part is that I generated the above datagrid without ever opening the Flash IDE. Let’s take a quick look how. A file with a .mxml extension is compiled by Flex down to .swf bytecode. This is done when a request is made to the .mxml file. Another option is to compile the file from the command line which can be a tremendous help when implementing an automated build process (more on this in a future post).

So the .mxml file contains the following code:

</p> <p>

Notice that the “Model” or “data” for the datagrid is stored in the users.xml file which looks like:

</p> <p> Dennis Baldwin<br /> 214-555-1212<br /> db@site.com</p> <p> Steve Cohen<br /> 843-999-5533<br /> sc@site.com</p> <p> Curtis Chism<br /> 972-469-1128<br /> cc@site.com</p> <p> Chris Kleberg<br /> 310-912-3587<br /> ck@site.com</p> <p>

A binding is created telling the datagrid to map each user node to a row in the datagrid. Each childnode (name, phone, email) is then mapped to a column. This is a very basic example but goes to demonstrate how powerful this Flex presentation server really is.

If you have some experience with the Flash IDE then you’ll know that building the above example would take a bit more work. You’d have to drag the component to the stage, give it an instance name, load and parse XML, and set the dataprovider. I’m not complaining because this is the way I’ve always developed in Flash. But I’m also trying to be very open-minded in realizing the power of Flex and knowing this is an extremely powerful tool for building RIAs.