Adobe Flex: Introduction to Flex 3 – Part 1

In this part, we will learn the following:

• Understanding Adobe Flex
• Adobe Flex product line
• Flex Architecture
• Flex resources

Understanding Adobe Flex

Adobe Flex is a RIA User Interface Framework that enables us to develop Rich Internet Application quickly, resulting in high productivity and customer satisfaction.

Adobe Flex is a highly productive, free open source framework which is used for building expressive web applications. Adobe Flex deploy consistently on:

• All major browser leveraging the Flash Player
• And on desktop with Adobe AIR

Where is Flex Used?

How Flex works?

The backbone of flex is ActionScript 3 and MXML (Macromedia XML). MXML again is set of ActionScript classes which comprises of some built-in UI components like Datagrid, Treegrid, Menubar, chart and so on.

MXML is used for creating the User Interface and ActionScript is used for event handling, data management etc.

Once the MXML and ActionScript is created and compiled, it gets converted into swf file and hence to view the Flex application we need flash player supported browsers.

Flex enables…

Flex Architecture

Lets look at high level of flex architecture

Flex Resources

Flex tutorials
http://www.tutorom.com/courses/460/Adobe-Flex-2-tutorials-Flex-2-programming-tutorials.htm

Documentations
http://flex.org/
http://www.adobe.com/support/documentation/en/flex/

Flex component explorer
http://examples.adobe.com/flex3/componentexplorer/explorer.html

Flex tutorial – Part 2 Topics

Flex Builder

• Understand the Flex builder and its workbenches
• Use Flex builder effectively for design, development and debugging
• Create a Flex Project
• Create, compile and run a Flex application

Go to part 2 of this tutorial

Rich Internet Applications (RIAs)

Rich Internet Application (RIA) – this is the buzz word we hear quite often these days. Rich Internet Application which was coined by macromedia in 2002, was not very common till few years back, but with Web 2.0 boom RIA got a solid place in the web world.

So what is RIA

Earlier web was known as a one way communication system, where company use to showcase their details to end users. With the web 2.0 emergence, things totally changed. Web 2.0 gave the world wide web altogether a different persona. Where web was known to be a one way communication system, web 2.0 made it two way communication, where user was the king. Users can comment, rate, network, tag and so on and so forth.

Along with these flexibilities web 2.0 brought lot of new tools and technologies and concepts like Ajax, Adobe AIR, Adobe Flex, SilverLight, Isomorphic SmartClient and so on. With all these concepts came a buzz of creating web applications with richness and that is where RIA comes into picture.

So what does ‘Rich’ means in Rich Internet Application?

Rich Internet Application are applications which combine the flexibility and responsiveness of a desktop application with broad reach of the web. RIA gives user the flexibility to use a web application with the features that of a desktop application.

What is the concept of ‘rich’ in Rich Internet Application ?

The concept of richness can divided into 2 parts

• Richness in User Interface
• Richness in Data model

Richness in User Interface

Rich Internet Application (RIA) offers a very rich set of user interface controls which can intelligently interact with data model. some of them are:

Drag and Drop control and Accordion control

Auto Complete control

Tree Grid control

Data Grid control and Data sorting control

Charting control

Calender control

Rich Text editor control
Inline editing control
Auto save control

Richness in Data model

Any website or application is incomplete without data, so having a rich data model to fetch or control these data is important. Richness in data model means

• Ability to send and receive data asynchronously
• Ability to obtain data from server without redrawing the entire page
• Efficiently utilizing network bandwidth transmitting only the portion of data that has been changed
• Support of sophisticated data models

Anatomy of RIA
Adobe in one of their presentation showcased RIA as follows

Benefit of Rich Internet Application
Rich Internet Application (RIA) brings in lot of benefits for the end users and well as developers and companies. Some of them are as follows:

For End Users

• Responsive and Interactive
• Real time communication
• Fast and easy to use
• Allow users to remotely monitor and manage data
• Allows quicker task completion
• Cross platform support

For Business

• Increased customer loyalty
• Increase in new customers
• Increased productivity
• longer site visits
• Reduced bandwidth and operational costs

For Developers

• Easy to learn
• Ease of development

RIA tools and technologies
The term Rich Internet Application(RIA) may be new, but the technologies which RIA uses is the combination of already existing technologies. Most commonly used RIA tools and technologies are:

RIA Technologies

• Ajax (Asynchronous JavaScript and XML)
• XML
• JavaScript Object Notation (JSON)
• Advanced JavaScript

UI Frameworks

• Adobe Flex
• Microsoft Silverlight
• Google Web toolkit (GWT)
• Isomorphic SmartClient
• Java server faces (JSF)

JavaScript Frameworks

• Yahoo UI (YUI)
• JQuery
• Prototype
• Scriptaculous
• Dojo Toolkit
• Mootools

My experience of launching the Web 2.0 Community in Mindtree

It was really a great experience to launch the Web 2.0 Community in Mindtree. It was indeed heartening to see a huge participation for the launch. Based on the previous experience of community launch, we expected close to 50 Minds for the launch and booked Kalpavriksha 1. But the participation was three times more than that, so we had to open Kalpavriksha 2 and 3 as well. The launch was really a stupendous success.

The idea of starting a community came to my mind after attending the Adobe RIA (Rich Internet Application) Architect Summit on April 3, 2008. This Summit was all about rich Internet application and user experience, and Adobe flex application. I was highly impressed by this summit and was wondering how we could benefit from this at MindTree, and how to keep ourselves in pace with the latest tools, technologies and concepts.

My initial idea was to start an RIA Community here, and with this idea I approached Sagar Paul (General Manager – IT Services). Sagar told me, “Yes, as long as you take the responsibility.” Sagar’s approval gave me positive energy to start this and I approached my Project Manager and supervisor, Rajesh Nataraj and Goudhaman Sundaram. Both of them were quite happy with this idea and guided me on how to go ahead with forming a community. Taking this further, I approached Shahnawaz Khan (PROGRAM DIRECTOR – KNOWLEDGE MANAGEMENT), who was very excited about this idea and suggested the name ‘Web 2.0 Community’, as he felt that ‘RIA’ would make it a little niche and limited to technologies, whereas Web 2.0 would be a broad term. He also added that he would be interested to be one of the Champs for this Community. This really boosted my morale, and from here the journey began.

Shahnawaz told me that we needed to come up with five or six Champs to start the community along with the community’s mission, vision, plans, etc. From the day I attended the summit, Ganesh Mohandas Nayak from my project team kept encouraging me, and I continually shared all my ideas with him.

Luckily, I had two Champs ready to contribute, but needed three more. I approached a few communities to know if someone was interested in joining me as Champs and volunteer for the Community. To my surprise, Rajesh Barde and Sridhar Ramakrishnan from my team agreed immediately. Anil M Kumar was also prompt in accepting my offer to become a Champ.

Each step I took was very exciting and made me more positive, thanks to the encouragement I got from everyone around me.

Ideas started flowing from all the champions to launch this community. Rajesh Barde came up with the wireframe of the Web 2.0 logo and significance of it, and Anil gave it the visual effect.

Significance of the logo

Digits 1 to 12 depict the clock, which in turn means ‘over a period of time’..

The numbers are in black, as the color stands for ‘fast’ and ‘permanent’.

The Web is woven across and spreads everywhere, from a small concept to a wider reach – thus making it a revolution.

The grey color of the web depicts that it has reached every nook and corner and it could spread further.

The magenta pointer depicts that the Web has moved from Web 1.0 to Web 2.0. It’s magenta to signify a new era that we have moved into, and we can experience a difference.

The word ‘Web’ in sea green color, and the word ‘Community’ in grey depict a revolution in its true sense, and is a mixture of People, Process and Technology.

‘2.0’ in magenta is of the same color as the pointer that shows us, as a community, that we are here to realize our vision: ‘Help the Organization in understanding and leveraging Web 2.0 for its Customers and internal needs’.

By now, our vision, logo, and plans were ready. Also, we got a green signal from Raj Dutta (VICE PRESIDENT – KNOWLEDGE MANAGEMENT) to start this community; KM created space in the Connected Minds page for it, and IS created the mail list.

The next step was whether to go for a ‘big bang launch’ or a ‘soft launch’. Finally we all agreed for the big launch. But whom should we invite? The person who immediately came to Shahnawaz’s mind was Balaji Krishnan (Vice President – IT Services), Head of Internet and Emerging Technologies Practice. It was a matter of pride for us that Balaji agreed to inaugurate this Community. We started the advertising camp, through banners and hoardings

We decided to start with a formal inauguration, followed by a session on ‘Web 2.0 – a prelude’ and a game on ‘harnessing collective intelligence’. For the launch, we also decided to come up with a unique idea of ‘virtual ribbon cutting’ in the form of rich media with sound. As we wanted to represent Web 2.0, the next generation Web, our presentation was also aligned to it, with a rich look and feel.

All the Champs worked hard to make the launch a grand success. Sridhar deserves a special mention; he worked even on weekends to prepare the rich ‘Web 2.0 – A prelude’ presentation. We were all set with posters and flyers.

Finally the Big Day arrived. I was a bit tensed as I had never spoken in front of even 50 people and this was my first experience to speak in front of such a huge crowd. It was 4 pm, Kalpavriksha 1 was already full and we all were in dilemma whether to open Kalpavriskha 2 or not. Shahnawaz was not very affirmative on the idea of opening it, but the crowd was getting larger and many people were standing, so finally we had to open it. As soon as we did that, the entire space got occupied, and then we had to open Kalpavriskha 3, too!

Balaji spoke a few words about the Web 2.0 revolution, and clicked the virtual ribbon’ and inaugurated the Community.

Next came my turn. For a second, I was scared to see such a huge crowd, but gathered all my courage to start the presentation. This was my first presentation in front of 150 people, and I really loved it. The presentation was all about introduction of Web 2.0 and the Web 2.0 Community.

As decided, we also had the game on ‘harnessing collective intelligence’. We filled a box full of chocolates and asked everyone to guess the correct number of chocolates. The idea was to get the average of the guesses, and the average would be close to the result

It was a great experience altogether. And I found the best example of ‘wisdom of crowd’ and ‘harnessing collective intelligence’ among the multi-talented Web 2.0 Champs themselves, who came up with many ideas that made this event a life-time memory for all of us.

Actions speak more than words, and the crowd who gathered for the launch speaks about the success of Web 2.0 community.