components
Simple Flex4 color swatch using Spark List
Jan 19th
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.
Flash Builder 4 demo: Dashboard with Google App Engine – built in 10 mins
May 30th
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!
Source code for TaskScheduler chart in Flex
Jan 29th
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.
Simple GanttChart using AdvancedDataGrid of Flex 3.0 (Moxie)
Jun 13th
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!
FormattedStepper – NumericStepper with formatting support
Mar 14th
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)
Small textarea enhancement
Mar 13th
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 [:)]
