[Component] Location WatchDog v1.0

It’s been a long time since I posted in my blog. The reason was that I wasn’t actually working actively on any Flex project in my previous job at Nokia. In my new role, I hope to get lots of chances to dabble with my favorite coding language πŸ˜‰ . Anyway, here I am with a new simple and silly component again πŸ™‚

I am calling it a Location WatchDog. What it does is pretty simple. It monitors a specific location (folder/directory) for any updates. If any new files are added to the folder, the WatchDog throws an event LocationEvent.FILES_ADDED. The event returns an array of new Files added to the location.

I am still working on it. Need to add some more stuff to it like capability to fire the LocationEvent.FILES_DELETED that returns the list of deleted files. The component allows you to also specify file extensions that you wish to monitor the location for. By default the component only detects normal files, while it also allows you to specify includeSystemFiles attribute as true to force the component to listen to even hidden and system files.

You can download the component in swc from here. The code of the component is checked in at the Google Code.

You can use this component in your code by calling the component in your mxml  – and then doing this in your actionscript-

private function initView():void{
snoopy.fileExtensions = <code>new Array("txt", "abc");</code>
<code>snoopy.locationPath = File.desktopDirectory.nativePath;
snoopy.addEventListener(LocationEvent.FILES_ADDED, getNewFiles);
snoopy.startPinging();
}

private function getNewFiles(event:LocationEvent):void{
var x:Object = event;
}

Nothing fancy. Just simple and plain. As long as it saves someone somewhere some coding time ;). Or is it already part of the framework? πŸ˜‰

(Download: SWC | Source)

ThunderBolt

Really interesting stuff… http://code.google.com/p/flash-thunderbolt/

ThunderBolt is a lightweight logger extension for ActionScript 2 and 3 applications using Firebug. For logging without Firebug, especially for AIR applications, check out the ThunderBolt AS3 Console.

For more information about ThunderBolt AS2 and ThunderBolt AS3 check out the Wiki.

The ThunderBolt project based on the Mozilla Public License 1.1..

CForm SWC

Lately I have been getting a lot of mails about using CForm. So, I kind of wrapped up the whole thing into a SWC and here it is. So all you need to do is download this and add this to the Lib of your project. For the source code, you can still check it out of SVN. But, to just use the CForm, you really do not need the source-code, you can just use this swc component. Click here to download the component.

[Component] CForm v1.0

CForm is all about creating data entry screens. This component allows developers to create standardized forms/CRUD screens in their applications. The CForm component is a Data Entry component that can be very useful if –

  1. you are building business applications with many data entry/view screens
  2. you are working with a lot of developers. each handling separate screens/modules
  3. you wish all your screens to have the standard look & feel across the application
  4. you wish to avoid different developers/designers designing their own UI/UX paradigms for their specific screens

Let me try to explain this in a very simplified manner. CForm reads XML file to create user entry forms. To implement CForm, the following steps are involved.

  • Developer creates XML file for each screen. The XML will contain the list of fields, controls to be used etc.
  • CForm is called in an MXML.
  • Now, the developer can use many of CForm’s exposed methods to access/manipulate data in the CForm.

The Demo walks you through a few use cases of how CForm can be used in real world. There are clear instructions on each example in the demo. For a detailed documentation on the XML part of this component, check out here and for the AS and MXML angle check out below. The source code will also be made available shortly in a 2 or 3 weeks. As of now, if you need the source code you will have to check it out from the SVN repository at http://flexedtoolkit.googlecode.com/. If you like this component and would be willing to extend a helping hand, send me a mail πŸ˜‰ .

If you have any questions/suggestions after viewing the demo, leave a comment on this page!!

**Update: Compiled SWC now available for download.

[ SWC | Demo | XML Documentation | Source of Example ]

Read more of this post

CustomGrid v1.2

I am releasing the v1.2 of CGrid. It’s been in drafts for a long while now.This time, a few more basic niceties have been added to the CGrid. πŸ™‚

  1. Export to Excel (Copy selected rows or entire grid to clipboard and paste in excel)
  2. User can select columns to view and width of the columns etc. This setting for each grid in the application is remembered across sessions.(For this to work properly, you will have to ensure that you always specify a distinct ID for for each grid in your application.) This feature is very useful, if you are fetching a lot of columns to display but are not sure whether all the users would be interested in all the columns. Now, the user can choose to see columns of his/her choice and that choice is remembered across sessions.
  3. Fixed the sorting logic in the column sort.
  4. The CGrid can now take in custom itemRenderer from the caller.

Check it out… πŸ™‚ For more details about what CGrid is all about, check out this post.

It’s been a long time since I updated the grid component. Hey, for that matter… It’s been a log while since I last posted here. πŸ™‚ Been quiet a bit busy lately. Anyway, am almost back. This month is also going to be a bit hectic. But, I hope to post regularly from September onwards.

Note: Thanks to all who downloaded CGrid v1.0 and used them in their projects. It really feels nice to see that the component has served some good purpose. The CGrid component is individually responsible for keeping my blog alive andΒ  bringing in readers even though I haven’t posted anything new for the last couple of months. So, this component is kind of the ‘old man’ of this blog. Anyway, Lemme thank all visitors for checking it out. Keep downloading. Keep leaving comments πŸ™‚ ….

[ Demo | Source | Sample Printout ]

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.

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 πŸ™‚ .

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 ]

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 ]