[DB75]

The Power of the ProgressBar

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:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"> <mx:Loader height="100" width="250" id="myLoader" autoLoad="false" contentPath="progress_image.gif" /> <mx:ProgressBar width="250" source="myLoader" /> <mx:Button label="load" click="myLoader.load();" /> </mx:Application>

Click the load button below to see it in action.

M2M Magazine Article: M2M Made Easy with the Nokia 12

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

Flex TabNavigator and Browser Refresh

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:

<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" initialize="restoreSelectedTab();"> <mx:Script> function restoreSelectedTab() { var so = SharedObject.getLocal("cookie"); tabNavigator.selectedIndex = so.data.index; } function handleTabChange(event) { var so = SharedObject.getLocal("cookie"); if(event.newValue > 0) so.data.index = event.newValue; so.flush(); } </mx:Script> <mx:Panel id="panel" title="M2M Portal" width="100%" height="100%"> <mx:TabNavigator id="tabNavigator" width="100%" height="100%" change="handleTabChange(event);"> <mx:Canvas id="Dashboard" label="Dashboard"> </mx:Canvas> <mx:Canvas id="Monitor" label="Monitor"> </mx:Canvas> <mx:Canvas id="Alarms" label="Alarms"> </mx:Canvas> <mx:Canvas id="Behaviors" label="Behaviors"> </mx:Canvas> <mx:Canvas id="Commands" label="Commands"> </mx:Canvas> <mx:Canvas id="Accounts" label="Accounts"> </mx:Canvas> <mx:Canvas id="Users" label="Users"> </mx:Canvas> <mx:Canvas id="Devices" label="Devices"> </mx:Canvas> <mx:Canvas id="Logs" label="Logs"> </mx:Canvas> <mx:Canvas id="Map" label="Map"> </mx:Canvas> <mx:Canvas id="QoS" label="QoS"> </mx:Canvas> </mx:TabNavigator> <mx:ControlBar width="100%"> </mx:ControlBar> </mx:Panel> </mx:Application>

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

Flex TabNavigator Component - Browser Back/Forward Problems Resolved

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:

<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"> <mx:Panel id="panel" title="M2M Portal" width="100%" height="100%"> <mx:TabNavigator id="temp" width="100%" height="100%"> <mx:Canvas id="Dashboard" label="Dashboard"> </mx:Canvas> <mx:Canvas id="Monitor" label="Monitor"> </mx:Canvas> <mx:Canvas id="Alarms" label="Alarms"> </mx:Canvas> <mx:Canvas id="Behaviors" label="Behaviors"> </mx:Canvas> <mx:Canvas id="Commands" label="Commands"> </mx:Canvas> <mx:Canvas id="Accounts" label="Accounts"> </mx:Canvas> <mx:Canvas id="Users" label="Users"> </mx:Canvas> <mx:Canvas id="Devices" label="Devices"> </mx:Canvas> <mx:Canvas id="Logs" label="Logs"> </mx:Canvas> <mx:Canvas id="Map" label="Map"> </mx:Canvas> <mx:Canvas id="QoS" label="QoS"> </mx:Canvas> </mx:TabNavigator> <mx:ControlBar width="100%"> </mx:ControlBar> </mx:Panel> </mx:Application>

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.

Macromedia Flex DataGrid Example

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:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"> <mx:Model id="userModel" source="users.xml"/> <mx:DataGrid height="100%" width="100%" dataProvider="{userModel.user}"/> </mx:Application>

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

<?xml version="1.0" encoding="utf-8"?> <users> <user> <name>Dennis Baldwin</name> <phone>214-555-1212</phone> <email>db@site.com</email> </user> <user> <name>Steve Cohen</name> <phone>843-999-5533</phone> <email>sc@site.com</email> </user> <user> <name>Curtis Chism</name> <phone>972-469-1128</phone> <email>cc@site.com</email> </user> <user> <name>Chris Kleberg</name> <phone>310-912-3587</phone> <email>ck@site.com</email> </user> </users>

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.

daylite v0.1 for Symbian Series 60 Devices

I recently finished a beta version of a product that I've been wanting to develop for a while. With the recent licensing of the Macromedia Flash player by Nokia, no longer will I have to worry about developing Symbian applications. Symbian is an extremely powerful OS for mobile devices, yet it's also very complex to write applications since it's C++ based. Now that the Flash player is currently available for Symbian Series 60 and UIQ devices (dubbed Flash Lite) I decided to code my app in Flash.

I've named the app daylite since my vision is for it provide users with all the information they need on a daily basis. Yes I realize this is a grand statement, but I had to start somewhere so I've begun with weather and am currently working on flight times based on flight number. You can check out some screens of the beta version (v0.1) by clicking here. There's still a ton of work to be done but I'm committed to constantly improving the app while the penetration of the Flash player makes it to more and more devices.

daylite currently runs on Symbian Series 60 devices such as the Nokia 6620. The 6620 is my target device. At the time of this blog post you have to purchase the Flash Lite player from Macromedia for $9.99. I don't know if Macromedia's long-term strategy is to charge for the player and I think it will ultimately come pre-installed on compatible Nokia devices. At any rate, $9.99 is a small price to pay for access to all the content that the Macromedia Exchange provides....most of it free! Below is a screen shot of the app in the Exchange. Please post comments below if you have any suggestions or bugs. Enjoy!

Macromedia Flex Mega Discount

Macromedia has been generous enough to donate a copy of Flex 1.5 to me for just the price of shipping. I contacted them about a non-commercial version of the product so that I could blog about it as well as write some tutorials. I've been using the developer version but am going to get the production version installed on the server so I can open it up to the community. The sticker price went from $12,000 down to $20 in a matter of seconds!

I've been pondering a revamp of www.devmx.com to focus solely on Flex and building a community around the product. I'm not sure I want to get into supporting a developer community again, but with the right people involved I might give it a go. Since we're talking about building true RIAs I think it would be a worthwhile venture. Needless to say, stay tuned for some killer apps in the coming weeks.

Shifting Focus to Macromedia Flex

Over the past several months I've been dabbling with Macromedia's Flex technology. We've come a long ways since the late 90's where Flash was being used mainly as an animation tool and there were only a handful of developers that used Flash to build dynamic applications. I don't want to get into detail about the history but it goes something like Flash/CF integration, Remoting, and now Flex.

There were obviously all sorts of technologies and hacks in between, but I'd like to take a minute to discuss Flex. First off, I'm completely blown away by it. One complaint that I constantly hear about the Flash IDE is that it's geared towards designers. That's how it started and over the years it became more of a developer's tool. If you open the IDE you'll easily get confused with facets of both worlds. There's the timeline and symbols for designers, while developers are more interested in the UI and Data components.

Now what if I said you could build Flash applications without ever opening the Flash IDE and use a tool such as Dreamweaver, where it's mainly code based. Flex gives us this capability with an IDE called Flex Builder. With an XML markup syntax know as .mxml, developers can now author XML files that get compiled down to Flash movies. The fact that I'm still calling them Flash movies means I still haven't abandonded the designer mindset!

With Flex Builder you can EASILY build rich internet applications with all sorts of crazy functionality. Just like Dreamweaver you have a code and WYSIWYG view. I won't go into details but I'm working on obtaining a non-commercial Flex license from Macromedia and will be posting all sorts of juicy goods here. I can't post any samples from the developer edition because they files expire after one day. I haven't been this excited about the web in a long time and I can guarantee we're going to see truly amazing applications in the coming months...all rendered as Flash output!

One last thing that I'd like to add is that there is tight integration for Flash developers writing components. You can write components based off of Macromedia's V2 component architecture that can be integrated directly with Flex. Then it's as simple as calling an XML tag to create an instance of your component. I will post more on Flex component development as well as showcase it's power in the coming weeks.

Macromedia Flex for Linux

I've been running Macromedia Flex on Windows for the past few months. Tonight I decided to take the plunge and install Flex on my Linux box. I allotted about 2-3 hours to get Flex running on Fedora Core 3.

I figured that there would be a few tweaks necessary to get Flex running. I was overcome with joy when my installation took less than five minutes. I downloaded Flex 1.5 from Macromedia and ran the installer:

./flex-1.5.bin

I was prompted with a few questions about installation directory and what type of server I wanted to run. Since this is a dev machine then I decided to run the integrated JRun server. After the installation was complete I simply cd'ed to the installation directory and started the server:

/installdir/jrun4/bin/jrun -start default

That's all there was to it and I was immediately able to hit the server and run the examples at:

http://localhost:8700/samples/

Now that I'm up and running I plan on posting a lot more information on Flex and its capabilities in the coming weeks. I have some Flash components that I'd like to integrate and I'll post those as well.