Harish Sivaramakrishnan » applications

Simple Flex4 color swatch using Spark List

Harish Sivaramakrishnan — Tue, 19 Jan 2010 16:09:36 +0000

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.

New Flex 4 Theme : Plastic – Built using Adobe Flash Catalyst Beta 2

Harish Sivaramakrishnan — Fri, 15 Jan 2010 18:08:24 +0000

I have been working to get a minimalist theme for one of the Flex 4 apps I am building. I did some minor tweaks to my actual theme and created “Plastic”. This theme is inspired by the regular plastic ware that you would see everyday. It is a sober, light theme with a dash of boldness added by the sunshine-orange roll over scheme. As of now, I only have spark component skins built into this. I will add the styling for the halo components in the next iteration.

I cooked up a sample application mock-up with Plastic theme applied. View the application Give this theme a spin – download the source files (Plastic.fxp), import into Flash Builder 4 and you are all set! Due to the limitations of the Beta 2, you cannot import this FXP into Flash Catalyst again. In case you want to dabble with the skins in Flash Catalyst itself, download the FXP for catalyst (This FXP will not have constraint based sizing)

Plastic can be applied to all the spark components that are available as wireframe components in Flash Catalyst. View Components Demo

Some of the components are likely to have sizing issues, if you find any – drop me an email or drop a comment in this post. Download FXP

BITS | 360 – Virtual Tour App built on Flash Platform

Harish Sivaramakrishnan — Tue, 15 Dec 2009 07:12:37 +0000

I stumbled upon this *amazing* Flash application while browsing through the website of my university (Birla Institute of Technology & Science or Simply, BITS). The BITS | 360 app allows the users to get a 360 degree panorama of various BITS campuses (Goa, Dubai, Pilani and Hyderabad). The application has an extremely clean and intuitive user experience (unlike some of those patchy, slow panorama apps that we see on the internet often!). The application brings in some amazing features like taking a snap shot of a particular section of the panorama, interactive overlays, Google map integration etc. to name a few. Check out the application here

The most impressive part of this app is that it is built by a student – Abhinav Asthana (Engineering student from BITS, Goa campus). It is incredible to see a work of such high quality come from a solo developer gig. It is great to see the expertise the student fraternity of India has on Adobe Flash Platform.

Flash ahead, guys!

New Flex 4 theme: OrangeCandy – built using Flash Catalyst Beta 2

Harish Sivaramakrishnan — Mon, 19 Oct 2009 12:06:41 +0000

I have been working on this theme for an app that I am building. Just thought I’d share it here. The theme was entirely drawn in Flash Catalyst using the drawing tools. This theme is inspired by Adobe Scope Skins & the kingnare theme with a dash of orange to it!

Known Issues:

TextInput accepts multiple lines
MouseWheel does not work for the list

Please note that this is work in progress. I will keep updating the FXP as I make more changes.

Meanwhile, You can download the FXP from here.

Download the FXPL from here

Simple GanttChart using AdvancedDataGrid of Flex 3.0 (Moxie)

vodka — Wed, 13 Jun 2007 12:29:15 +0000

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