Flex Tutorial

Best Video Tutorials for Learning Adobe Flex

Bryan — Fri, 11 Dec 2009 05:51:58 +0000

Many people have asked me this question – what is the best way to learn Adobe Flex in shortest time? Based on my own experience and feedback from my coworkers, the answer is: Watching Flex Video Tutorials.

Instead of spending a month on digesting a heavy Flex programming book with 500+ pages, you might get a better understanding through a good video course in a couple of hours.

Here are some places I highly recommend you to start with:

Adobe Developer Connection: Flex Video Training
The official Flex training video from Adobe. It contains 26 videos that cover important topics such as: Flex Basics, Component Development, Backend Integration, Visual Effect, and System Architecture. The best part is, Adobe puts those courses into 5 days learning schedule (2 hours per day). So you can quickly grab the essential Flex skills in a week.

Flex 4 Beta in a Week
Want to get ahead of the game? Then this is the one you really can not miss. Although Adobe has not released Flex 4 yet, it already provides this fantastic video training online. By downloading a Flash Builder and following all the exercises, you will soon become a Flex 4 expert in many people’s eyes.

Flex 4 SDK and Flash Builder 4 Beta Preview
This is a 1 hour 41 minutes video tutorial provided by the top online training company – lynda.com. In the course, the Adobe Certified Instructor David Gassner will give you a quick tour of Flash Builder 4 and how to use new Flex 4 features (e.g. Spark text control).

Flex 3 Beyond the Basics
This an intermediate level Flex video training also from lynda.com. You will get to know many advanced skills such as Cooperating Flash with Flex, Customizing Component Skins, Building Animations, and Using Flex in ASP.NET or PHP.

One thing I want to point out is: you do need to pay a fee ($25/Month) to watch those trainings from lynda.com. However, it provides you unlimited access to over 700 video courses such as Flash, Java, AJAX, Ruby on Rail… It is truly a great online training library for all programmers and designers.

==> Click here to find out more about Lynda.com

How to Choose the Best Adobe Flex Book for You?

Bryan — Mon, 10 Aug 2009 18:51:16 +0000

Do you struggle to find out which Adobe Flex book is best for you? You’re not alone. Considering there are so many books in the market, such as Flex Bible, Flex Cookbook, and Flex for Dummies, it is hard to make your mind. The bottom line is, you don’t want to buy a book only dusting on your bookcase later. So in this post, I like to share with you five ways to pick up a right Adobe Flex book.

1. What do You Want
Just like a good tool is to help you do a specific job, a good book is to help you resolve your problem. You want to get the comprehensive understanding of Adobe Flex? You want to know how to call Java programs in Flex? Or you want to find out the popular frameworks of Flex? Each book may focus on specific areas. So your first job is to know what you want. Then you try to match it by reading the table of contents of the book.

2. Publish Date
Due to the fast changes of computer technologies, most of programming books have a short life span. Generally speaking, any computer books older than two years are obsolete. Considering the writing process usually takes about six months, you’d better select a book published within a year. For example, it is now August 2009, the ideal Flex book should be published after August 2008.

3. Authors
This might be the most important factor. Since we are using the same Flex SDK from Adobe, why don’t you just stick to Adobe’s official documents? Why do you need an extra Flex book? Because you want to know the unique insight, experience, and tips from the experts in different areas. And you want to see how they use the Flex technology to resolve the real life problems. Therefore, who is the author and what kind of background he has are even more important than the topics. Moreover, I especially like the book written by a group of people. It is mainly because, first you get more in-depth knowledge from gurus specialized in various topics; second, you usually get better quality of contents through the team collaboration.

4. Customer Reviews
Amazon.com is the best place to find out the related information of a book before you buy it. Except for the publish date and authors, I would pay particular attention to customer reviews. Usually, the more reviews a book gets, the better it is. Because it indicates that more people are interested in this book and willing to spend time giving their feedback. Moreover, if you have any specific needs or questions, you might get some ideas how this book will help you by reading those reviews.

5. Add-on Resources and Support
A good Flex book might be your guide to a new world. You’ll not only learn from the book but also get more values from add-on resources and the support. For example, it often comes with a website for you to download sample codes, post your questions, and connect with the authors. Remember the computer technologies are constantly progressing. So you may want to catch up with the experts and get the latest update.

What is My Topic Pick for Adobe Flex Book?
If you just want to get one Best Flex Book, I would highly recommend Professional Adobe Flex 3.

Give you a comprehensive while in depth understanding of the complete Adobe Flex landscape including: What is Flex, Why Flex, Flex Development Ecosystem, Components Usage and Customization, Data Management, Visual Effect & Multimedia, Client Communication, Server Integration, Data Service, Flex Framework, Development Strategies, Testing and Debugging.
Published on June 2, 2009 (the newest Flex book you can get now) by Wrox (famous for its Programmer to Programmer philosophy).
Written by a group of Flex gurus speciaized in various fields. e.g. Joseph Balderson (Seniro Flex and Flash Platform Consultant), Peter Ent (Computer Scientist in Adobe LiveCycle team), Tom Sugden (Technical Architect for Adobe Professional Services), Andrew Trice (Principal Flex and AIR Architect), and David Hassoun (Founder of RealEyes Media).
Great additional resources and support on wrox.com including sample codes, online library, latest update, and interaction with community members.

My only complaint about this book is its weight. With 1,426 pages, it weighs about 2kg. So it would be a good exercise for your wrist. Nevertheless, this book gives you the best ROI on both your time and money. You can Get Professional Adobe Flex 3 here.

7 Difference Between RIA and Traditional Web Application

Bryan — Fri, 31 Jul 2009 15:20:01 +0000

Since coined by Macromedia in 2002, RIA (Rich Internet Application) has become one of the hottest terms online. However, what is RIA? Not all people have a clear answer. Many times, when someone says RIA, he actually means Flash, AJAX, or Web Video. A typical example is, some companies put “X years RIA experience” in their job requirements, while they actually want someone good at HTML.

So, what is RIA any way? It is a set of characteristics rather than a specific framework. To understand this, let’s look at 7 Difference Between RIA and Traditional Web Application:

1. Rich Assets

This is the fundamental difference. A traditional website is mainly made up of Text (plus a few pictures). No matter what kind of site it is (blog, forum, or e-commerce), No matter what technology it uses (Static HTML, Java, or .NET), it is Text-Based.

RIA has more assets to deal with, such as Audio, Graphic, Video, State, Transition, and Effect. It is Interaction-Based.

2. Rich Experience

The richness of RIA means rich user experience. It is kind of paradigm shift from what we can provide more to how we can help users get more.

Thanks to the rich assets and their interaction-based design model, a well-built RIA often creates a WOW Experience for its users.

3. Rich Functionality

Powered by the latest web technologies such as Adobe Flex/Flash, AJAX, or Microsoft SilverLight, A RIA can provide functions way beyond traditional web pages. Just look at PhotoShop Express or Google Docs, you will see they act more like a desktop application. This is unbelievable in the past.

4. Rich Client

A traditional web application often puts heavy workload on the server side. Regardless of its development platform (Java, .Net, or PHP), the server has to maintain the user session, process the request, and render the results. The client side is merely a browser to display the final page.

On the contrary, RIA leverages the growing power of client machine. It installs a runtime (such as browser plug-in) on the client side, and executes most of functions locally.

5. Rich Communication

The traditional way to operate a web application is like:

Click a button => Wait for the result page showing => Click another button

Whenever users ask for something, the browser has to send a HTTP request to the server, wait for the response back from the server, and refresh the page. This synchronous communication method inevitably creates negative impact on usability.

While RIA normally uses Asynchronous communication method. It allows the application to get the data from the server without the page reload. It makes the application faster and more user-friendly.

6. Poor Security

While we enjoy the richness of RIA, it brings more security concerns than a traditional web application. The main reason is RIA is running on the client side. It tends to have more security flaws. Fortunately, the major RIA framework, like Adobe Flex/Flash, has realized this issue for long time. It applies restricted security protocol and provides security patches as fast as possible.

7. Poor SEO

This is another big challenge faced by RIA. Today’s major search engines are still Text-Driven. They have difficulty to fully index the content inside compiled file, such as Adobe Flash File (.swf).

On the other hand, because RIA is running independently on its own browser plug-in, it is hard for the browse to capture the application state. For example, the URL keeps the same regardless of content changes. This causes problems with Bookmark, Page History, Back Button, and Search Engine Index.

Of course, the major RIA vendors are well aware of this challenge. For example, Adobe actively cooperates with Google and Yahoo to improve the search results. It also provides Deep Link capability to support URL based navigation in the browser.

In Conclusion

Like Web 2.0, RIA provides a new way to think, design, and build the next generation Internet application. Compared to a traditional web applicaiton, RIA is richer in terms of Assets, Experience, Functionality, Client, and Communication, while it faces some challenges in the areas of Security and Search Engine Optimization.

Flex 101 with Flash Builder 4

Bryan — Fri, 24 Jul 2009 22:30:39 +0000

Recently I came cross an excellent article, which gave a crash course in using Flash Builder 4 to develop Flex applications. With the permission of the original site (http://www.packtpub.com, author: Romin Irani), I post it on FlexTutorial.org. For the purpose of easy reading, I divided the original article into 4 parts. I hope this will provide first hand information to anyone interested in RIA (Rich Internet Application) development.

Flex 101 with Flash Builder 4 – Part 1

Flex 101 with Flash Builder 4 – Part 2

Flex 101 with Flash Builder 4 – Part 3

Flex 101 with Flash Builder 4 – Part 4

About the Author

Romin Irani is a software developer at heart, who has been developing software for 15 years and still wakes up every morning to learn something new in the changing world of software development. He has been a big fan of all things related to Flex, ever since he came across it 3 years back.

Flex 3 with Java

Develop rich internet applications quickly and easily using Adobe Flex 3, ActionScript 3.0 and integrate with a Java backend using BlazeDS 3.2

A step-by-step tutorial for developing web applications using Flex 3, ActionScript 3.0, BlazeDS 3.2, and Java
Build efficient and seamless data-rich interactive applications in Flex using a combination of MXML and ActionScript 3.0
Create custom UIs, Components, Events, and Item Renders to develop user friendly applications
Build an end-to-end Flex e-commerce application using all major features of Flex covered throughout the book

http://www.packtpub.com/flex-3-with-java/book

Flex 101 with Flash Builder 4 – Part 4

Bryan — Wed, 22 Jul 2009 12:36:40 +0000

Using Flash Builder Data Services

In this section, we will write the same application that we have written in part one. However this time we will not write the code ourselves instead we’ll let the Flash Builder generate the code for us. Flash Builder comes with powerful new features that ease integration with external services. It can auto generate client code that can invoke external services for us and bind the results to existing User Interface components.

Let us look at building the same application that we developed in the previous section via the new Data Services and Binding wizardry that Flash Builder provides.

Let us create a new Flex Project as shown below:

Name this Flex Project as YahooNewsWithDataServices as shown below. We will go with the default settings for the other fields. Click on Finish button.

You will get the standard boilerplate code that is produced for the main Application MXML file—YahooNewsWithDataServices.mxml. Switch to the Design View and the Properties tab as shown below. Modify the values for the Layout to spark.layouts.VerticalLayout and the Width and Height to 100%. This means that the main Application window will occupy the maximum area available on your screen and by choosing a Vertical Layout, all visual components dragged to the main Application Canvas will be arranged in a vertical fashion.

Stay in Design view. From the Components Tab shown below select Data Controls ? DataGrid

Drag it onto the canvas on the right side. It will appear as shown below:

Keep the DataGrid selected and go to the Properties Tab as shown below. Give it an ID value of dgYahooNews. Set its Width and Height to 100% so that it will occupy the entire parent container like the Application Window. Then click on the Configure Columns button.

Clicking on the Configure Columns button will bring up the current columns that are added by default. The screenshot is shown below. We do not need any of these columns at this point. So select each of the columns and click on the Delete button. Finally click on the OK button.

Save your work at this point through the Ctrl-S key combination.

At this point in time, we will simply create an Application screen with a datagrid on it. Now we need to connect it to the Yahoo News Service and bind the datagrid rows/columns to the data being returned from the Service. In the previous section, we had seen how to do this by writing code. In this case, we will let Flash Builder generate the connectivity code and also do the binding for us.

First step is to select the Connect to Data/Service option from the main menu as shown below:

This will bring up the wizard as shown in the following screenshot. Flash Builder allows us to connect to several types of backend systems. In our case, we wish to connect to the Yahoo Most Emailed News RSS Service that is available at: http://rss.news.yahoo.com/rss/mostemailed.

So we will choose the HTTP Service as shown below and click on the Next button.

The next step will be a configuration screen, where we will provide the following information:

Service Name: Give the Service a name that you like which u can refer to later. We name it YahooNewsService.
Operations: We give an operation name called getNews. The HTTP Method is GET and in the field for URL, you need to provide the RSS Feed URL http://rss.news.yahoo.com/rss/mostemailed

You can enter more than one operation name here. Alternately, if you were invoking a HTTP Service using the POST method, you could even specify the Parameters by adding parameters via the Add button.

Flex 3 with Java

Develop rich internet applications quickly and easily using Adobe Flex 3, ActionScript 3.0 and integrate with a Java backend using BlazeDS 3.2

A step-by-step tutorial for developing web applications using Flex 3, ActionScript 3.0, BlazeDS 3.2, and Java
Build efficient and seamless data-rich interactive applications in Flex using a combination of MXML and ActionScript 3.0
Create custom UIs, Components, Events, and Item Renders to develop user friendly applications
Build an end-to-end Flex e-commerce application using all major features of Flex covered throughout the book

http://www.packtpub.com/flex-3-with-java/book

Click on Finish. This will display a Message window as shown below which tells you that there is still some incomplete work or a few last steps remaining before you can complete the definition of the service and bind it to a UI Component (in our case it is the DataGrid). Click on OK to dismiss the message.

Once again, switch to Design view and click on the button for the Data Provider shown below. What we are going to do is associate/bind the result of the Service invocation to the Data Grid via the data provider.

This will bring up the Bind To Data window as show below. It should be clear to you by now that we can select the Service and the Operation whose result we wish to bind to our data grid. Flash Builder automatically shows us the Service Name and an Operation name. If there are more Services defined, it will allow to select the appropriate Service and its respective operations.

Note that it asks us to Configure Return Type as shown. This is because Flash Builder needs to understand the data that is going to be returned by the Service invocation and also to help it map the result data types to appropriate Action Script Data structures.

Click on the Configure Return Type button. This will bring up the Configure Operation Return Type window. Give a name for the Custom Data Type as we have given below and click on the Next button.

The next step is to specify the kind of data that will be returned. Flash Builder simplifies this by allowing us to give the complete URL so that it can invoke it and determine the structure that is returned. If you already have a sample response, you could even choose the third option. In our case, we will go with the second option of entering a complete URL as shown below. We also specify the RSS Feed url.

Click on the Next button. This will invoke the RSS Feed and retrieve the HTTP Response. Since the response returned is in XML, Flash Builder is able to generically map it to a tree-like structure as shown below. The structure is a typical RSS XML structure. The root node that is rss is shown in the Select Node and all its children nodes are shown in the grid below.

Since we are only interested in the RSS items and extracting out the title and category, we first navigate and choose the item field in the Select Node field. This will show all the children nodes for the item field as shown below:

Delete all the fields except for title and category. To delete a field, select it and click on the Delete button.

Click on the Finish button. This will bring up the original Bind To Data form. Click on the OK button.

We are all set now. Save your work and click on the Run button from the main toolbar. Flash Builder will launch the application. The Data Grid on creation will invoke the HTTP Service and the items will be retrieved. The title and category fields are shown for each news item as shown below:

Summary

This article provided an introduction to Flex 4 via its development environment Flash Builder. While the applications that we covered in the article are not too practical, it should give you a glimpse of the power of the Flex framework and its tools and loads of developer productivity that is one of its key strengths. Interested readers are encouraged to use this as a starting point in the world of developing Rich Internet Applications with Flex.

Flex 3 with Java

Develop rich internet applications quickly and easily using Adobe Flex 3, ActionScript 3.0 and integrate with a Java backend using BlazeDS 3.2

A step-by-step tutorial for developing web applications using Flex 3, ActionScript 3.0, BlazeDS 3.2, and Java
Build efficient and seamless data-rich interactive applications in Flex using a combination of MXML and ActionScript 3.0
Create custom UIs, Components, Events, and Item Renders to develop user friendly applications
Build an end-to-end Flex e-commerce application using all major features of Flex covered throughout the book

http://www.packtpub.com/flex-3-with-java/book

Flex 101 with Flash Builder 4 – Part 3

Bryan — Wed, 22 Jul 2009 12:31:48 +0000

Yahoo! News Application

Let us write another application, we will call it the Yahoo! News Application. This application shows a list of current news items from Yahoo that has been classified as “most emailed“.

Yahoo! provides this list in the form of a RSS feed. The RSS feed for the same is: http://rss.news.yahoo.com/rss/mostemailed.

Let us first look at the application when it is all ready so that we can understand what we are trying to build.

The snapshot is shown below:

The application is simple. It has a button called Fetch News, which when clicked will connect to the internet, access the RSS Feed and display the new items. It shows the news items by using a DataGrid component that can show rows of data, which can comprise several columns. In our case, each row is one news item and we are currently displaying only one column —title of the news item.

Let us build this application now. To start off, we will create another application which we shall call YahooNews. You do not need to create another project and can stay within the MyFirstFB4App project and create a new MXML application by going to the main menu and selecting File ? New ? MXML Application. This will bring up a dialog window as shown below. Give the Filename as YahooNews and select the Layout as spark.layouts.VerticalLayout (This will arrange all your components vertically at the main application canvas level).

Finally, click on the Finish button.

This will generate the same boilerplate code that we saw earlier. Go to the Design View and then from the Components tab, first drag and drop a Button from the Controls tree node. The properties of the button are shown below:

Create a click handler for the button as shown below:

Go back to the Design view and drop a DataGrid control from the Components tab as shown below. Note that the DataGrid component is present in the Data Controls tree node. The DataGrid component is like a table and visually it can display rows of data where each row can comprise one of more columns.

The Design view is shown below. By default the DataGrid shows 3 sample columns and we need to restrict that to just one column in which we wish to show the title. We wish to name the column header as “News Title”.

You can modify the DataGrid properties by selecting the DataGrid control and viewing the Properties Tab. First let us set the ID to dgNews.

Then set the width and height of this control to 100% respectively. This means that it will occupy the whole application screen even if you resize it.

You can view the current columns and modify (add/delete/edit) them by clicking on the Configure Columns button in the Properties Tab. That will bring up the current columns as you can see below:

We need only one column, so to delete Column 2 and Column 3, simply select the item and click on the Delete button. Additionally, select Column 1 and change the following two properties:

Bind to field: This is the attribute of the row object. For example we are going to assign a list of news items that is a collection of news items to the DataGrid. Each row is a news item object and each item object consists of several attributes like title, pubDate, category, and others as per the RSS definition. So in this case we are interested in only the title attribute or property.
Header Text: This is the text that is shown in the header column for the DataGrid. We will call it News Title.

Click on OK to commit the changes.

The final step will be for us to implement the code in our handler which we auto generated when the Fetch News button is clicked. Switch over the Source view to take a look at the current code generated for you.

Let us go through the code:

Take a look at the Fetch News button code shown below:
- Invoke the RSS Feed: http://rss.news.yahoo.com/rss/mostemailed.
- Retrieve the result and assign the RSS News Items to the DataGrid.

This code is straightforward and it means that when the button is clicked the method btnFetchYahooNews_clickHandler will be invoked.

Since we auto-generated the click handler, it currently looks like this:

We need to now implement the code to do the following:

To do that, we will need to use the HTTPService from the mx namespace in the Flex framework. The HTTPService is a non-visual component and hence it is defined under a tag as given below:

The tag is created under the main tag. We first have an id attribute that is a unique name for the service. Then the url attribute that points to the RSS Feed. We are using the GET method for the HTTP operation. Finally, two critical events are handled. One of them is the result event which is invoked when the HTTP Request has been successful and a response is returned. The other is a fault event which is invoked when the HTTP Request could not be completed and there was an error.

Let us look at the complete code now where we hook up invoking of the Fetch News button to the HTTP Service and then binding the result of the HTTP Response to the DataGrid.

Let us go through the key points:

The btnFetchYahooNews_clickHandler method is invoked when the Fetch News button is clicked. In this method, we send the HTTP Request by invoking the send() method on the HTTPService instance—YahooNewsService.
As mentioned the result event is fired when the HTTP Response is available. The HTTP response is available in the event parameter that is passed to the result handler. Since it is a standard RSS feed that is available, a collection of items is available under the event.result.rss.channel.item object.
This is then assigned to the Data Grid. To assign it to the DataGrid, we simply pass it to the dataProvider attribute of the grid. Since we have bound the column to only the title attribute, the DataGrid takes care of the column rendering for us.

To run the application, simply click on the Run icon in the main toolbar. A sample output is shown below:

Flex 3 with Java

Develop rich internet applications quickly and easily using Adobe Flex 3, ActionScript 3.0 and integrate with a Java backend using BlazeDS 3.2

A step-by-step tutorial for developing web applications using Flex 3, ActionScript 3.0, BlazeDS 3.2, and Java
Build efficient and seamless data-rich interactive applications in Flex using a combination of MXML and ActionScript 3.0
Create custom UIs, Components, Events, and Item Renders to develop user friendly applications
Build an end-to-end Flex e-commerce application using all major features of Flex covered throughout the book

http://www.packtpub.com/flex-3-with-java/book

Continue to Flex 101 with Flash Builder 4 – Part 4

Flex 101 with Flash Builder 4 – Part 2

Bryan — Wed, 22 Jul 2009 12:28:26 +0000

Hello World using Flash Builder 4

In this section, we will be developing a basic Hello World application. While the application does not do much, it will help you get comfortable with the Flash Builder IDE.

Launch the Flash Builder IDE. We will be creating a Flex Project. Flash Builder will help us create the Project that will contain all our files.

To create a new Flex Project, click on the File ? New ? Flex Project as shown below:

This will bring up a dialog in which you will need to specify more details about the Flex Project that you plan to develop. The dialog is shown below:

You will need to provide at least the following information:

Project Name: This is the name of your project. Enter a name that you want over here. In our case, we have named our project MyFirstFB4App.
Application Type: We can develop both a Web version and a desktop version of our application using Flash Builder. The web application will then run inside of a web browser and execute within the Flash Player plug-in. We will go with the Web option over here. The Desktop application runs inside the Adobe Integrated Runtime environment and can have more desktop like features. We will skip that option for now.
We will let the other options remain as is. We will use the Flex 4.0 SDK and currently we are not integrating with any Server side layer so we will leave that option as None/Other.

Click on Finish at this point to create your Flex Project. This will create a main application file called MyFirstFB4App.mxml as shown below.

We will come back to our coding a little later but first we must familiarize ourselves with the Flash Builder IDE.

Let us first look at the Package Explorer to understand the files that have been created for the Flex Project. The screenshot is shown below:

It consists of the main source file MyFirstFB4App.mxml. This is the main application file or in other words the bootstrap. All your source files (MXML and ActionScript code along with assets like images, and others should go under the src folder. They can optionally be placed in packages too.

The Flex 4.0 framework consists of several libraries that you compile your code against. You would end up using its framework code, components (visual and non-visual) and other classes. These classes are packaged in a library file with an extension .swc. A list of library files is shown above. You do not need to typically do anything with it.

Optionally, you can also use 3rd party components written by other companies and developers that are not part of the Flex framework. These libraries are packages as .SWC files too and they can be placed in the libs folder as shown in the previous screenshot.

The typical step is to write and compile your code—build your project. If your build is successful, the object code is generated in the bin-debug folder. When you deploy your application to a Web Server, you will need to pickup the contents from this folder. We will come to that a little later. The html-template folder contains some boiler-plate code that contains the container HTML into which your object code will be referenced. It is possible to customize this but for now, we will not discuss that.

Double-click MyFirstFB4App.mxml file. This is our main application file. The code listing is given below:

As discussed before, you will typically write one or more MXML files that will contain typically your visual components (although there can be non-visual components also). By visual components, we mean controls like button, combobox, list, tree, and others. It could also contain layout components and containers that help you layout your design as per the application screen design.

To view what components, you can place on the main application canvas, select the Design View as shown below:

Have a look at the lower half of the left pane. You will see the Components tab as shown below, which would address most needs of your Application Visual design.

Click on the Controls tree node as shown below. You will see several controls that you can use and from which, we will use the Button control for this application.

Simply select the Button control and drag it to the Design View Canvas as shown below:

This will drop an instance of the Button control on the Design View as shown below:

Select the Button to see its properties panel as shown below. Properties Panel is where you can set several attributes at design time for the control. In case the Properties panel is not visible, you can get to that by selecting Window ? Properties from the main menu.

In the Properties panel, we can change several key attributes. All controls can be uniquely identified and addressed in your code via the ID attribute. This is a unique name that you need to provide. Go ahead and give it some meaningful name. In our case, we name it btnSayHello.

Next we can change the label so that instead of Button, it can display a message for example, Say Hello. Finally we want to wire some code such that if the button is clicked, we can do some action like display a Message Box saying Hello World.

To do that, click the icon next to the On click edit field as shown below. It will provide you two options. Select the option for Generate Event Handler.

This will generate the code and switch to the Source view. The code is listed below for your reference.

There are few things to note here. As mentioned most of your application logic will be written in ActionScript and that is exactly what Flash Builder has generated for you. All such code is typically added inside a scripting block marked with the tag. You can place your ActionScript methods over here that can be used by the rest of the application.

When we clicked on Generate Event Handler, Flash Builder generated the Event Handler code. This code is in ActionScript and was appropriately placed inside the block for us.

If you look at the code, you can see that it has added a function that is invoked when the click event is fired on the button.

The method is btnSayHello_clickHandler and if you notice it has an empty method that is, no implementation.

Let us run the application now to see what it looks like. To run the application, click on the Run icon in the main toolbar of Flash Builder.

This will launch the web application as shown below. Clicking the Say Hello button will not do anything at this point since there is no code written inside the handler as we saw above.

To display the MessageBox, we add the code shown below (Only the Script section is shown below):

We use one of the classes (called Alert) from the Flex framework. Like any other language, we need to specify which package we are using the class from so that the compiler can understand it. The Alert class belongs to the mx.controls package and it has a static method called show() which takes a single parameter of type String. This String parameter is the message to be displayed and in our case it is “Hello World“.

To run this, click Ctrl-S to save your file or File ? Save from the main menu. And click on Run icon in the main toolbar. This will launch the application and on clicking the SayHello button, you will see the Hello World Alert window as shown below.

Flex 3 with Java

Develop rich internet applications quickly and easily using Adobe Flex 3, ActionScript 3.0 and integrate with a Java backend using BlazeDS 3.2

A step-by-step tutorial for developing web applications using Flex 3, ActionScript 3.0, BlazeDS 3.2, and Java
Build efficient and seamless data-rich interactive applications in Flex using a combination of MXML and ActionScript 3.0
Create custom UIs, Components, Events, and Item Renders to develop user friendly applications
Build an end-to-end Flex e-commerce application using all major features of Flex covered throughout the book

http://www.packtpub.com/flex-3-with-java/book

Continue to Flex 101 with Flash Builder 4 – Part 3

Flex 101 with Flash Builder 4 – Part 1

Bryan — Wed, 22 Jul 2009 12:26:14 +0000

The article is intended towards developers who have never used Flex before and would like to exercise a “Hello World” kind of tutorial. The article does not aim to cover Flex and FB4 in detail but rather focuses on the mechanics of FB4 and getting an application running with minimal effort.

For developers familiar with Flex and the predecessor to Flash Builder 4 (Flex Builder 2 or 3), it contains an introduction to FB4 and some differences in the way you go about building Flex Applications using FB4.

Even if you have not programmed before and are looking at understanding how to make a start in developing applications, this would serve as a good start.

The Flex Ecosystem

The Flex ecosystem is a set of libraries, tools, languages and a deployment runtime that provides an end-to-end framework for designing, developing and deploying RIAs. All these together are being branded as a part of the Flash platform.

In its latest release, Flex 4, special efforts have been put in to address the designer to developer workflow by letting graphic designers address layout, skinning, effects and general look and feel of your application and then the developers taking over to address the application logic, events, etc.

To understand this at a high level, take a look at the diagram shown below. This is a very simplified diagram and the intention is to project a 10,000 ft view of the development, compilation and execution process.

Let us understand the diagram now:

The developer will typically work in the Flash Builder Application. Flash Builder is the Integrated Development Environment (IDE) that provides an environment for coding, compiling, running / debugging your Flex based applications.
Your Flex Application will typically consist of MXML and ActionScript code. ActionScript is an ECMAScript compatible Object Oriented language, whereas MXML is an XML-based markup language.
Using MXML you can define/layout your visual components like buttons, combobox, data grids, and others. Your application logic will be typically coded inside ActionScript classes/methods.
While coding your Flex Application, you will make use of the Flex framework classes that provide most of the core functionality. Additional libraries like Flex Charting libraries and 3rd party components can be used in your application too.
Flash Builder compiles all of this into object byte code that can be executed inside the Flash Player. Flash Player is the runtime host that executes your application.

This is high level introduction to the ecosystem and as we work through the samples later on in the article, things will start falling into place.

Flash Builder 4

Flash Builder is the new name for the development IDE previously known as Flex Builder. The latest release is 4 and it is currently in public beta.

Flash Builder 4 is based on the Eclipse IDE, so if you are familiar with Eclipse based tools, you will be able to navigate your way quite easily. Flash Builder 4 like Flex Builder 3 previously is a commercial product and you need to purchase a development license. FB4 currently is in public beta and is available as a 30-day evaluation.

Through the rest of the article, we will make use of FB4 and will be focused completely on that to build and run the sample applications. Let us now take a look at setting up FB4.

Setting up your Development Environment

To setup Flash Builder 4, follows these steps:

The first step should be installing Flash Player 10 on your system. We will be developing with the Flex 4 SDK that comes along with Flash Builder 4 and it requires Flash Player 10. You can download the latest version of Flash Player from here: http://www.adobe.com/products/flashplayer/
Download Flash Builder 4 Public Beta from http://labs.adobe.com/technologies/flashbuilder4/. The page is shown below:

After you download, run the installer program and proceed with the rest of the installation.

Launch the Adobe Flash Builder Beta. It will prompt first with a message that it is a Trial version as shown below:

To continue in evaluation mode, select the option highlighted above and click Next. This will launch the Flash Builder IDE.

Let us start coding with Flash Builder 4 IDE. We will stick to tradition and write the “Hello World” application.

Flex 3 with Java

Develop rich internet applications quickly and easily using Adobe Flex 3, ActionScript 3.0 and integrate with a Java backend using BlazeDS 3.2

A step-by-step tutorial for developing web applications using Flex 3, ActionScript 3.0, BlazeDS 3.2, and Java
Build efficient and seamless data-rich interactive applications in Flex using a combination of MXML and ActionScript 3.0
Create custom UIs, Components, Events, and Item Renders to develop user friendly applications
Build an end-to-end Flex e-commerce application using all major features of Flex covered throughout the book

http://www.packtpub.com/flex-3-with-java/book

Continue to Flex 101 with Flash Builder 4 – Part 2

Why Flex? – My Top 5 Reasons to Choose Adobe Flex

Bryan — Mon, 20 Jul 2009 22:11:11 +0000

Are you still struggling to find out which RIA solution is best for you? With so many frameworks to choose – AJAX, Adobe Flash, Adobe Flex, Microsoft SilverLight, OpenLaszlo, Curl, JavaFX, do you feel lost somehow?

You have seen all kinds of comparisons or reviews online, such as:

AJAX vs. Flex vs. SilverLight

10 reasons to love AJAX (or Flex, or SilverLight, or …)

10 reasons to hate AJAX (or Flex, or SilverLight, or …)

At the end of the day, you may wonder: “Now What?”

The good news is, life can be much simpler! You are not here to select the best movie for OSCAR. Your job is to simply find the most suitable RIA framework for YOU!

As an example, I’d like to share with you why Flex is good for me. My top 5 reasons are:

1. Easy to Learn and Use

Before Flex, I was a Java developer. Before Java, I was a C++ and COBOL guy on IBM Mainframe. So I know exactly how painful it is to learn a new programming language. Just like switching from a manual transmission to an automatic one, it takes time for you to get used to that.

Surprisingly, the first time I saw Flex code, I thought it was Java. Considering the similar syntax, structure, and style, it is like the same coffee with different cream. With no time, I built my first fully functional application in Flex and Wow my colleagues.

Another beauty of Flex is its development tool – Flex Builder 3. It is built on the same platform – Eclipse as my J2EE IDE. So I don’t have to learn a new set of settings, shortcuts, or tricks. Plus Flex Builder 3 provides many useful features, such as design editor, build tools, integrated debugger. It makes your job so much easier! You can get your copy of Flex Builder 3 here.

2. Mature Language and Framework

Unlike JavaScript Based AJAX, Adobe Flex is built on a strongly typed Objected-Oriented programming language. I believe the Flex development team extends a lot of goodies from Java, making it suitable for developing enterprise level applications.

In addition,there are some mature frameworks to support Flex at the architecture level. Like Struts and Spring for Java, command-driven Cairngorm and event-driven Mate are two frameworks to implement the MVC (Model-View-Control) design pattern for Flex. And they both are open sourced projects.

3. Cross Browser Support

How many times do you have to deal with different browsers (IE 6, IE 7, Firefox, Google Chrome, Opera, Safari …) just to make you web pages look right? JavaScript error, PNG image missing, layout broken, you are adding all kinds of patches or hacks to put down the fire. As a result, your code is messy and hard to maintain, you are frustrated and exhausted, but the new problems keep popping up…

Now I have Adobe Flex. With its runtime (Flash Player) having 98% market penetration and working consistently across different browsers, I finally can focus on building a great RIA instead of worrying about its compatibility.

4. Fast Development and Easy Integration

Time is money! It is especially true on Internet. Why is .Net taking much share from Java? One reason is that it provides a lot of build-in modules to fasten the development process. Like .Net, Adobe Flex was born with many convenient components (such us DataGrid, ProgressBar, RichTextEditor, Slider, Accordion, Charts …) to help create a RIA faster and easier. I worked on a Flex project originally designed in Java. It was estimated as 6 months work, but finished within 4 months.

Moreover, Flex might be the best framework to easily integrate with different external systems. It provides components such as HTTPService, WebService, and RemoteObject, plus optional Data Service like LCDS or BlazeDS. In one of my Flex projects, I collected data from J2EE Server, SAP, and 2 other legacy systems to compose the final reports. Without Flex, my job would have been much more complicated.

5. Richest Visual Effect

Yes, RIA is supposed to be cool! The most amazing RIAs can maximize your sensation to nearly feel the target products, like BMW X5 or Sony HDTV. You know what? Most of those RIAs are done by Adobe Flash. Since Adobe Flex is built on top of Flash, it can access all of Flash’s rich libraries and assets. Not mention Adobe is working diligently to bind Flash and Flex seamlessly. Therefore, it is no doubt that Adobe Flex provides you everything you need to build a best-of-all RIA.

In Conclusion

RIA means not only giving a face-lift to your business but also providing a cutting edge over your competitors. When coming to the best RIA framework, different people might give you different options. But the most important is, you evaluate them based on your resources, systems, and requirements. As an example, I put my top 5 reasons to choose Adobe Flex:

1. Easy to Learn and Use

2. Mature Language and Framework

3. Cross Browser Support

4. Fast Development and Easy Integration

5. Richest Visual Effect

Now it is your turn.

Provide a Better Visual Feedback – Using Flex CursorManager

Bryan — Wed, 24 Jun 2009 18:59:07 +0000

Why do you need Flex CursorManager

Flex is all about User Experience. A Rich Internet Application (RIA) is not just attractive skins or fancy animations. It also means interacting with users and helping them use your application better.

One important part of User Experience is to provide a better visual feedback. For example, when someone types a model name and clicks Search button, it might take 2-3 seconds to get results from a web service. What would a user do during that time? He or she probably keeps clicking the Search button, or thinks your application is dead.

So how to let users know what is going on with your application? You need to give them some visual feedback: like show the busy cursor when waiting for the back end response, and then remove the busy cursor when the data is ready.

To control the cursor image in Flex, you need CursorManager.

How to use CursorManager

Here is how you typically use CursorManager in Flex:

- Display the default busy cursor
  CursorManager.setBusyCursor();

- Remove the busy cursor
  CursorManager.removeBusyCursor();

- Create a new Cursor from your own cursor class
  [Bindable]
  [Embed(source="assets/heart.gif")]
  private var HeartCursor:Class;
  var cursorID:int = CursorManager.setCursor(HeartCursor);

- Removes a cursor from the cursor list
  CursorManager.removeCursor(cursorID);

- Remove all cursors
  CursorManager.removeAllCursors();

Sample Code




    
      function showBusyCursor():void {
           CursorManager.setBusyCursor();
         }

         private function removeBusyCursor():void {
           CursorManager.removeBusyCursor();
         }            

         private function showHeartCursor():void {
           cursorId = CursorManager.setCursor(HeartCursor);
         }

         private function removeHeartCursor():void {
           CursorManager.removeCursor(cursorId);
         }
     ]]>

Conclusion

CursorManager offers a convienent way for you to control cursor display in Flex. By using it properly, you will provide a better visual feedback to users, thus enhance the user experience of your applicaton.