I created a simple app with Flex 4 as front end and Rails 2.3.5 as back end. Well these days I started refreshing my knowledge on Flex, so here is my attempt on showing a flex chart with some events associated with it in order to render dynamic data delivered by Rails. Well as for the Rails App i am not going to explain the code much deeper since it’s a simple scaffold.
[source language=”ruby”]
script/generate scaffold Report month:string profit:float expenses:float amount:float
[/source]
Before you read further, you can check demo of the app I developed at http://barchartapp.heroku.com/
Flex is used to build RIA applications with ease, Flex will give developer many options for implementing some of the cool things that a Flash designer do to improve UX, well with Flash builder the designing of the frontend with flex is much easier.
Anyway you can get the source code of this demo application here at http://github.com/spritle/barchart_app
The demo application will show you a bar chart of expenses for various months and when you click on any bar, you will be able to see more information about that object like amount, expense , profit and so on.
The sample xml data that the rails server will send to flex app is below
[source language=”html”]
–
–
[/source]
So the flex will read this data and display it as a column chart.
Simple click events in chart are handled and upon triggering that even we will change the states with transition effects, upon clicking on any particular column of the chart we will display the detailed view for a particular month with a small effect.
Well building this app is simple and for more understanding of this i suggest you to check some of the videos for flex tutorials given by Adobe. There are lots of concepts and examples are explained over there. that will be good start for beginners.
Please drop comments if you find something interesting at http://www.adobe.com/devnet/flex/videotraining/
The techniques covered in this sample app are listed below
The data from rails server to flex can be of xml, json or amf format, out of the three amf is the fastest for communication.
Flex has various techniques or methods for communicating with back end server, they are
- httpservice
- remoteobject
- webservice
For quick examples on how to use these kind of things or learning about chart applications or handling events or transitions Tour de Flex is a great application to check and play around with. You can install it as an Air application on your local machine or you can view the web version of it at http://www.adobe.com/devnet/flex/tourdeflex/web.
Conclusion : If you have any questions please comment below. The next blog for flex is coming soon.
