Adobe’s ‘Build an app in a week’ For India

Adobe is conducting 9 online seminars at times that are convenient for people in India.

  • June 7th : 16:30  – 17:30
    Erase the Designer to Developer gap: Adding interactions to your design with Serge Jespers
  • June 7th : 20:30  – 21:30
    Connecting your design to PHP services with Mihai Corlan
  • June 8th : 16:30  – 17:30
    Connecting a web application to a J2EE backend using Flash Builder 4 with Michael Chaize
  • June 8th : 20:30  – 21:30
    Working with Flash CS5 components in your Flash Builder 4 project with Mike Jones
  • June 9th : 16:30  – 17:30
    Going multi-user with P2P in Flash Player 10.1 with Tom Krcha
  • June 9th : 20:30  – 21:30
    Developing multi-user applications with LiveCycle services with Tom Krcha
  • June 10th : 16:30  – 17:30
    Bringing web Applications to the desktop with AIR 2.0  with Piotr Walczyscyn
  • Jun 10th : 20:30  – 21:30
    Code once and run on multiple mobile devices with Mark Doherty

Build an app in a week is intended to teach you about the Adobe® Flash® Platform, including Adobe® Flex®, Adobe® Flash® Builder™, Adobe® AIR®, Adobe® Flash® Player, and how it integrates with Adobe® Creative Suite® 5 technologies. This weeklong event features free, live webinars presented by Adobe technology experts. See live demos and have your questions answered by the experts during interactive Q&A sessions.

Who should attend?

  • Web designers
  • Web developers
  • Application developers
  • Rich Internet Application developers
  • Interactive design specialists

What you will learn
By attending this e-seminar series you will be able to create your own Rich Internet Application at the end of the week, using all the power of Flash Platform, in combination with the device and technology of your choice. 

What Do You Need to Participate?
Online live webinars are scheduled events simulcast over the web via Adobe Acrobat Connect Pro. You’ll need a computer with a browser, Adobe Flash player and Internet connection. Voice-Over IP will broadcast over your computer. Access details will be provided once you register.

You can find more detail on the registration site here: http://www.adobe.co.uk/appinaweek

Adobe Flex Intro PPT posted

A couple of weekends ago, I did a presentation for The Chennai Cold Fusion User Group (CCFUG Homepage). Am posting the ppt here. The presentation covered the basics – intro to RIAs, intro to Adobe Flex, a couple of examples and a little bit about Adobe AIR. Check it out… if you have nothing else to do 😉 … The audience were cold fusion developers who were new to Adobe Flex and Adoe AIR. I touched the basics and then walked them through some code examples of Flex and Air.

Check out some snaps from the event and check out this post by Akbar after the event. You may also want to check out the CCFUG homepage at http://www.cfugind.com.

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

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 ]

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?