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 🙂 .

Advertisements

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 ]

Warn on flex application exit

If you have been developing web based applications which require login, I am pretty sure you would have come across this question – How do you safe-logout the user if the user just closes the window/tab when there is unsaved information on the user’s screen?

My current Flex project requires the user to login and logout. And most of the time, the users never use the logout button. They just close the browser and walk away! 😡 So, I needed a mechanism which will warn the user that there is unsaved information before closing the window. The way, I got this working was by using the FABridge.

In the application, I had an isAppDirty boolean.

public var isAppDirty:Boolean = false;

This variable is set to true whenever there is unsaved information in the application from any view. Now, add a few lines of javascript to your html wrapper. You can do this to the html file in the html-template folder.

————————————————————————————-

window.onbeforeunload = confirmExit;

function confirmExit(){
var flexApp = FABridge.flash.root();
var appDirty = flexApp.isAppDirty();

// note that the isAppDirty var is called like a function. This is done deliberately. Thats the way FABridge works 🙂

if(appDirty == true){
return “The configuration changes performed in this session have not been saved. If you wish to save the config, please click CANCEL.”;
}
}

————————————————————————————-

Do not forget to include the FABridge libraries in the html -<script language=”JavaScript” type=”text/javascript” src=”bridge/FABridge.js”></script. You can download the FABridge libraries from here.

And you are set to go 🙂 . Quiet simple, isn’t it?

Styling Alerts – CAlerts v1.0

We’ve been busy for the last couple of weeks. And some posts have been DRAFT for quiet some time. I guess its high time I completed those posts and getting back into active posting mode 😉 .

Back to Flex. This time we are looking at Alert Messages in Flex. While the flex alerts are nice looking, they are a bit too simple. So, I started looking at options for styling the alerts and found that it quiet easy to get a really sexy look and feel for the Alerts. Here goes,

Alert{
color : #0f3177;
title-style-name : “alertTitle”;
header-height:19;
border-thickness: 1;
drop-shadow-enabled: true;
drop-shadow-color :#d1ddf7;
background-color: #ffffff;
corner-radius :6;
border-style :solid;
header-colors : #90a4d1, #5970a0;
footer-colors : #9db6d9, #ffffff;
border-color : #5970a0;
}

.alertTitle{
font-family :Verdana;
font-size :10;
font-weight :bold;
text-align :left;
color :#ffffff;
}

The output of this would look like this –

Note: Thanks to Kumaran for churning up this sexy style 🙂 .

Now, that we have applied some nice looking styles to our alerts. Lets, look at what else we can do to Alerts 😉 .

Next, we needed a standard set of alerts that the team can use when they want a popup message anywhere in the application. So, I set about extending the Alert class to create alert.as. With alert class, the developer can popup different messages like this –

Information
alert.info('This is an info message');
//you can also pass a clickHandler here.

Confirmation
alert.confirmation('Are you sure you wish to delete all files?', clickHandler);

Error
alert.error('This is an error message');
//you can also pass a clickHandler here.

So, its as simple as that 🙂 . Check out the source for more details. I will post a demo of this soon.

[ Demo | Source ]

Passing unlimited arguments to a function

I recently stumbled across Flash Extensions which specializes in Flash Training & Solutions. There I found a few video tutorials and thats where this comes from 😉

Here’s how you can pass unlimited arguments to a function. 🙂 Flex Developers from the C++ and Java worlds might be familiar with this. Yet, this could be new stuff for some. The most common method used to pass multiple arguments to a function where the number of arguments are not predefined is to pass the arguments as a complex object like Array or something.


private function normalUsage(list:Array):void{
Alert.show(list.join(":"));
}

The other better way to handle this is something like this. Use “…args” in the function and then you can pass any number of arguments. –

private function dataToPop():void{
newUsage(1,2,3,5,6,7,8,9,10);
}


private function newUsage(...args):void{
Alert.show(args.join(":"));
}

Try it out. This could be useful at many places. 😉

FlexBox: A directory of Adobe Flex components

Mrinal Wadhwa has created a really nice application for cataloging flex components that float around. The way it has been categorized is really neat. Its a must see! I really liked the information summary he has included for each component. You get all information in one screen. Flex box goes into by de.licio.us immediatel 🙂 .

A couple of feedback pointers on the UI –

  • It would be nice to have Last Updated Date
  • It would be nice to have version history
  • And The FlexBox UI will look a lot sexier in a brighter color 😉

Just my two cents 🙂 .

[ Check out FlexBox here ]