Harish Sivaramakrishnan

I had written a small proof of concept of building a gantt (like) chart using Advanced DataGrid component that shipped with Flex 3. The blog post with the source code happens to be one of the most popular posts in my blog. Folks keep writing to me asking for more details on the component. I haven’t really been able to keep that project alive, purely for want of time as I got busy traveling. Just yesterday, I was doing some Flex 4 hacking for my talk at the upcoming Adobe Flash Platform Summit in Bangalore and thought if I could re-write this component in Flex 4. I spent about 6 hours writing this and I got my first version of the Flex 4 gantt chart working. Doing this in Flex 4 is insanely easy and the folks at Ilog have done a fabulous job re writing their gantt chart component in Flex 4. Click here or on the screen shot to see a small demo. Please note that the demo is view source enabled, you can download the source code as well [Just right click on the demo and view source] or, just click here to view source

This is just a prototype and doesn’t handle all the cases that a standard gantt chart should be handling. I would strongly recommend testing the code thoroughly before you start using it in production (if you are planning to, that is) I am unsure how much time I will be able to spend taking this project forward. I have opensourced this one under MPL, feel free to take the code and do more stuff as you guys deem appropriate. Please note that this is a resultant of a few hours of careless hacking , I am sure this has a lot of bugs too. I plan to set up a GitHub project for  the same, just thought I’d post it anyways.

I was just playing around with the Spark List component of Flex4 framework today. Wanted to build a simple swatch panel using the component. It was *much easier* than what I thought. With about 30 minutes of coding, I could get a basic, yet functional color swatch panel. Yes, doing this with the Spark List is insanely simple! Check out this simple demo

Select a color from the swatch panel to change the background color of the Application.

You can download the source code (as fxp) here (There isn’t a lot of code, and usual caveats apply as this is just 30 minutes of work and is vastly untested:) ) TODO’s include allowing customization of itemrenderer sizes and regular skinning capabilities of Spark controls. Will do those iteratively.

Yay! Adobe Flash Builder 4 & Adobe Flash Catalyst beta’s are out!  Adobe Flash Builder is the next generation of Adobe Flex Builder with a whole set of new features while Adobe Flash Catalyst (erstwhile known as Thermo) which is a interaction design tool (It can convert a photoshop or an illustrator file into a functional flex app Download & try out the beta bits at Adobe Labs.

I am specifically kicked about the new Data Centric Development features (DCD) of Flash builder. Simple drag & drop – wizard work flows now makes connecting to a back end simpler than anything you have done before using Flex.

I am sure all of us would have seen the flex dashboard application (in case you haven’t, see it here )

With the Adobe Flash Builder 4 beta, A dashboard application which connects to a Google App Engine back end with interactive drill down can be built in 10 minutes (yeah, 10 minutes. Actually lesser if I am not talking )

Now, the interesting part – I have  two part video which demonstrates the building of this app using Flash builder with a few drag and drops and minimal coding. The completed app just has 100 lines of code (including line breaks). now, isn’t that cool?

PART 1 / 2

You can access the services at the following URLs

• http://hsivaramakrishnan.appspot.com/dashboard?operation=showtotal
• http://hsivaramakrishnan.appspot.com/dashboard?operation=areawise

Check this space for more demoes and tutorials on the Flash Builder and Catalyst features. Flash Ahead!

Update: Do check out the Flex 4 prototype of of the gantt chart here.

Wish you all a very happy new year! I have been incredibly busy through the last few months working on the Adobe media player and I am quite excited about the upcoming launch. Keep watching Adobe labs website for more info on the same. In the meanwhile I got several comments, mails and even angry remarks for not posting the source code of the gantt chart / task scheduler chart that I had posted here a few months back. Thanks for the interest shown, guys! I deeply apologize for the delay in posting the same as the code was *not at all* ready for public display However, I am posting the code with sample usage in AS-IS form for you to try out. I am still working on this and will post the final version later once I have some more free time.

In the meanwhile, go ahead and use the code and let me know if it works / helped you.

Download Source

Update: Do check out the Flex 4 prototype of of the gantt chart here.

Flex 3.0 (Moxie) beta is out and I am sure most of you would have started playing around with the cool new features of Moxie. <mx:AdvancedDataGrid> is the new, improved DataGrid – a super cool component in moxie. Its a very exciting moment for me because I was part of the engineering team that designed and developed this control . I spent a few hours yesterday to see if I can use this control to write a simple Gantt chart, given the fact that the AdvancedDataGrid lets you have column spanned itemRenderers , groupedColumns and hierarchical display. I took a similar approach to what Doug had done in his example of a gantt chart.

This is what I got!!

This is a rough prototype that I wrote and I sure dint spend much time designing this application. I will try and get this one as a component when I have a little more of free time.

Things I loved about AdvancedDataGrid doing this small app

• AdvancedDataGrid Rocks!
• The new groupingCollection APIs make hierarchical display of data Child’s play
• The rendererProviders property and the column spanning lets you customize itemRenderers in a much advanced way than DataGrid
• <mx:AdvancedDataGridColumnGroup> lets you group the columns seamlessly!

The horizontal scrolling is a little slow, but we are sure working on it to get it a lot faster than what it is now! (hey, its just a beta!)

You can download the source code from here.[Adobe Share] If you cant figure out much from the data, its just a timeline of set of tasks and their respective percentages. Red shows delayed. Orange shows delayed start, green shows timely completion, grey - not yet started and blue – in progress.

The code that I have written requires many rounds of cleaning up before I can share it publicly :p (I will do that soon!). In the meanwhile, do check this space for a new series of tips & tricks and tutorials on working with the new AdvancedDataGrid.

All of ya keep flexing your “moxie” till then!

Saw a post on flexcoders yesterday regarding some one wanting formatter support on NumericStepper. Played around with NumericStepper code base for around an hour yesterday night and this is what I got – <FormattedStepper>, an extended control from <mx:NumericStepper> with a formatter property which can be set to NumberFormatter or CurrencyFormatter. The control can be used as a regular NumericStepper too. I have attached a sample application and full source code also. This is version 0.0.1, may have a lot of bugs, but for starters, it works!

Sample Usage:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:xm="com.*" backgroundGradientColors="[#000000, #000000]"> <mx:CurrencyFormatter id="formatter" currencySymbol="$" alignSymbol="left"/>
<xm:FormattedStepper id="fs" formatter="{formatter}" minimum="1000" maximum="2000" stepSize="2"/>
</mx:Application>

Sample Application | Download Source (zip)

I met Avinash, Kislay and Amrit from sungard last sunday at the flex users meet organized by Mrinal and Abdul. John Koch, the APAC develper relations manager of Adobe was the main guest. Raghu, I and Sameer joined in from the flex team. Amidst a conversation, Amrit pointed out that he couldnt drop a text into a specific charecter location while doing a drag drop to a text area from a list or a similar source. The dropped text gets appended to the beginning or the end of the text. Seemed to me that some simple tricks would solve this issue.

There is a UITextField instance inside the TextArea control which is protected, Hence I had to extend the TextArea control to actually prototype this capability. So, here is a hacky first draft of the drop-at-cursor-location capability into a TextArea. Currently doesnt work with htmlText, that will come soon though. Thanks Sameer for the drag and drop tips.

How does it work?

Simple! After subclassing TextArea, on mouseUp, call the getCharIndexAtPoint() method of UITextField to find out the charecter index at the cursor position. Now, appending a text at that position is very simple.

Sample Application | Dowload Source

ForthComing: Cursor locations to update on keyBoard navigation, HTMLText support [:)]