Flexedtoolkit Google project

WANTED: Developers who can contribute to this open source initiative πŸ™‚

I have created a google project to put in some of the stuff that we have been working on and releasing through this blog. Some of the stuff that you can already download from Flexedtoolkit are –

  1. Autorefresher
  2. Client Idle Timeout
  3. Custom Alerts
  4. Custom Grid

I am working on a small component – CForms. The idea is to have a generic UI rendering engine that will create forms from an XML file. This is particularly useful in serious business applications where you have a lot of user entry screens. So, if the developer needs to have a screen, they just include something like –

<widgets:CForm controlsFile=”controls.xml” id=”VLAN”/>

Everything else – Styles, layout, look and feel etc. will be handled by the CForm component as per instructions in the abc.xml… Getting a picture?

We initially did this as part of my project requirements at work. And it was a life-saver. Now, I would like to extend it beyond what it is today. I want to make it more generic and feature rich so that others can leverage on it.

The project homepage is http://code.google.com/p/flexedtoolkit. If you are interested in joining the project, do leave a comment. πŸ™‚ Really hope some of you folks would find time to work on this.

Advertisements

Visiting Bangalore

Readers: I will be in Bangalore till the 25th of this month. Would love to meet some of you folks… If you have time, do leave a comment and maybe we can catch up for tea or something….. πŸ™‚

Autorefresher Component

If you have been working on applications which serve highly dynamic data on the screen, you are most likely to have had to rely on the “polling” mechanism to get updated data from the back-end. We had similar requirement in our project and we created a tiny component using Flex’s Timer Class to fire a specific method at set frequencies.

And as usual, we didn’t to go around writing code all across the application to do this. The component we created can take in a function as an attribute. This function could be anything. It could be one that fires an SQL query and updates an ArrayCollection, or it could be one that sends out a Feed request or whatever! πŸ™‚ It’s pretty easy to use the AutoRefresher. All you have to do is add the AutoRefresher to your view –

<flexed:AutoRefresher id="exampleAutoRefresh" delay="5000" refreshFunction="FunctionToBeFiredPeriodically" />

The view then, refreshes every x milliseconds specified for delay. The default is 15000 milliseconds or 15 seconds. In the init method of your view, before starting the autorefresher, set the owner of the refresher to the parent like this-

exampleAutoRefresh.owner = this;
exampleAutoRefresh.start();

Setting the owner is to make sure that our refresher stops and starts based on the views visibility. In most cases, Polling mechanism ends up being really costly on the back-end. Especially if you are dealing with multi-tiered architecture and trying to talk to a web server, database server etc over the network. And its very much possible, that multiple views in your application might be required to autorefresh periodically. If you are polling in all the screens whether they are required or not, you are most likely to end up crashing the back-end infrastructure. In order to address this problem and minimize the load on the back-end, we built in a mechanism into the refresher by which it stops if the view is visible and starts automatically when the view is visible. This is why we are setting the owner in the init method. So, if you have autorefresher running on view A and B; and the user is viewing view B, then only view B is refreshing and when the user moves to view A; view B stops refreshing and view A starts.

Special thanks to Easwar for making this idea work! This component might come in handy for many πŸ™‚ . It sure saved a lot of effort for us πŸ˜‰ . Check it out.

Note: The demo is very basic. All it does is gets the time every 3 seconds and updates the label in the view.

[ Demo | Source | ASDocs ]

Flex Explorers

I have been collecting all the “flex explorers” from time to time as they are rolled out. The Flex explorers have been really really handy when it comes to checking for some stuff which you are not sure whether is possible. Without the style explorer, we would have been completely lost! From a styling perspective, the api documentation seems a little complex for a designer to get an idea of how go about styling a component on screen.

On many occasions when I have an idea, instead of reading through the api docs, I just checkout the explorers to see if it is possible in flex. As for stuff like effects, filters etc., I have found it impossible to figure it out from the api docs.

Over the past months, we have seen many explorers being released by adobe and other developers around the world. I have consolidated them under the FLEX EXPLORERS heading on the right side (below the Flex Components section). Check it out. If I have missed out anything, do drop a comment πŸ™‚ .

Silverlight, Sparkle and Flex

First it was Sparkle and now the new babe in the block is Sliverlight. A month ago, I saw a video covering the Sparkle developers showcasing some pretty cool stuff about Sparkle. Ok. So, I am not one of those bunch who hate anything that comes out of Microsoft because it comes out of Microsoft. The way I see it, this is how it all maps –

  • Sparkle (XAML) = Flex (MXML)
  • Flash Player = Silverlight

There seems to be some really uncanny similarities between XAML and MXML… (Of course they are both XML!). Check it out. The graphics that these bunch of Latin-Greek-Hieroglyphs churn up are pretty good.

<Canvas xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221; xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221; x:Name=”_119_red_scanlione_gloss” Width=”1056″ Height=”816″> <Canvas x:Name=”Layer_1″> <Rectangle x:Name=”Rectangle” Canvas.Left=”0″ Canvas.Top=”0″ Width=”1056″ Height=”816″ Stretch=”Fill” Fill=”#FFFF0000″/> <Path x:Name=”Path” Canvas.Left=”404.558″ Canvas.Top=”258.867″ Width=”258.844″ Height=”258.844″ Stretch=”Fill” Fill=”#FFFFFFFF” Data=”F1 M 411.029,258.867L 656.931,258.867C 660.505,258.867 663.402,261.764 663.402,265.338L 663.402,511.24C 663.402,514.814 660.505,517.711 656.931,517.711L 411.029,517.711C 407.455,517.711 404.558,514.814 404.558,511.24L 404.558,265.338C 404.558,261.764 407.455,258.867 411.029,258.867 Z “/> <Rectangle x:Name=”Rectangle_0″ Canvas.Left=”0″ Canvas.Top=”0″ Width=”1056″ Height=”816″ Stretch=”Fill”> <Rectangle.Fill>

I really don’t think Sparkle or Silverlight is a threat to Flex or Flash Player. But, I definitely think here begins a competition. With Apollo, Adobe definitely has a head start over any new web 2.0 stuff. Lets not forget that Flash Player is what? 10+ years older than anything that will be born 2 years from now πŸ˜€ . As they say, we ARE living in interesting times!!! Definitely, we are!

Honestly, I think everyone has to learn from Microsoft to create such lovely sexy logos! It doesn’t make any sense. But, then who cares? Its a damn Logo and it looks great! πŸ˜‰

Silverlight samples – Pretty Impressive! (You will need to install Silverlight for this)

  1. http://channel9.msdn.com/playground/wpfe/wpfepad/
  2. http://channel9.msdn.com/playground/wpfe/grandpiano/
  3. http://channel9.msdn.com/playground/wpfe/tiletext/

ANT task to generate ASDoc

I am sure most of you would have already seen this. I was googling around for some documentation on how to generate ASDocs. The command line arguements for asdoc.exe is pretty cryptic and its definitely not a tool for someone who is new to the whole thing. I guess I am not the only one on that boat either !!! πŸ˜‰ Then, I stumbled across some links for ANT scripts for ASDoc generation. The build.xml that I finally downloaded was from BitTubeBlog and it worked right out of the box! πŸ™‚

Just make a few configurations in the script for setting your source directory and you are good to go!

How to run ANT tasks in Eclipse?
Check out the document at Eclipse’s site for this or click here. here’s an excerpt from the eclipse help (Slightly modified!). For many, this should help getting started πŸ˜‰ .

To run an Ant buildfile in the Workbench:

  1. Copy the build.xml to the root or a folder in your project path.
  2. Set the appropriate folder name in the build.xml
  3. In one of the navigation views, select the XML file.
  4. From the file’s pop-up menu, select Run Ant…. The launch configuration dialog opens.
  5. Select one or more targets from the Targets tab. The order in which you select the items is the order in which they will run. The order is displayed in the Target execution order box at the bottom of the tab. You can change the order of the targets by clicking the Order… button.
  6. (Optional) Configure options on the other tabs. For example, on the Main tab, type any required arguments in the Arguments field.
  7. Click Run.

[ Download the ANT Task Script ]

Client/User Idle Timeout Component

I was looking around in the net for an effective client/user IDLE TIMEOUT mechanism. My requirement was very simple – The UI should time-out if the user is idle for more than 5 minutes. In geek terminology, IDLE translates to zero keystrokes and zero mouse movements.

After googling around and then spending some time at Flexcoders, I came across a link from the CFML site – an example for just what I wanted to do πŸ™‚ . So, we went and took that script and added a few bells and whistles to it before converting it into a re-usable component. And here’s what we have :-

The ClientIdleTimeOut component can be added to an application using-
<flexed:ClientIdleTimeOut id="TimerId" onTimeOut="FunctionPassedFromCaller" listenKeyStroke="true|false" listenMouseMove="true|false" timeOutInterval="1" confirmInterval="1" />
Now, when the application starts, the timer starts. If there is no user activity for the timeOutInterval specified, then a timeout warning pops up and stays up for confirmInterval time. Once the confirmInterval has been crossed, the application is timedout. At this point, three actions happen – 1. The application is disabled; 2. The FunctionPassedFromCaller set to the onTimeOut attribute is fired; 3. An event of type appTimedOut is dispatched. We can have a listener for this event and fire our actions at this point apart from the onTimeOut function.

So, thats what the ClientIdleTimeOut does πŸ™‚ . Check it out. Enjoy

PS: The Demo has an idle timeout for 3 mins. and a warning prompt of 2 mins. The ASDocs provided is more of an experiment πŸ˜‰ .

[ Demo | Source | ASDocs ]