Flex 101 with Flash Builder 4: Part 2

Exclusive offer: get 50% off this eBook here
Flex 3 with Java

Flex 3 with Java — Save 50%

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

$23.99    $12.00
by Romin Irani | July 2009 | Java Open Source

Read Part One of Flex 101 with Flash Builder 4 here.

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:

Flex 101 with Flash Builder 4: Part 2

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

Flex 101 with Flash Builder 4: Part 2

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.

Flex 101 with Flash Builder 4: Part 2

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

Flex 101 with Flash Builder 4: Part 2

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

Flex 101 with Flash Builder 4: Part 2

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.

Flex 101 with Flash Builder 4: Part 2

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.

Flex 101 with Flash Builder 4: Part 2

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:

Flex 101 with Flash Builder 4: Part 2

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.

Flex 101 with Flash Builder 4: Part 2

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

  1. Service Name: Give the Service a name that you like which u can refer to later. We name it YahooNewsService.
  2. 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.

 

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.

Flex 101 with Flash Builder 4: Part 2

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.

Flex 101 with Flash Builder 4: Part 2

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.

Flex 101 with Flash Builder 4: Part 2

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.

Flex 101 with Flash Builder 4: Part 2

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.

Flex 101 with Flash Builder 4: Part 2

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.

Flex 101 with Flash Builder 4: Part 2

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:

Flex 101 with Flash Builder 4: Part 2

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.

Flex 101 with Flash Builder 4: Part 2

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:

r

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
Published: June 2009
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Romin Irani is a software developer at heart, living and working in Mumbai, India. He has been developing software for 15 years now and still wakes up every morning to learn something new in the ever 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.

He has a one-point agenda: Harness the power of software by learning, teaching and developing simple solutions. You can follow him on Twitter at http://www.twitter.com/iromin.

Books From Packt

Flash with Drupal
Flash with Drupal

Joomla! 1.5x Customization: Make Your Site Adapt to Your Needs
Joomla! 1.5x Customization: Make Your Site Adapt to Your Needs

Magento 1.3 Theme Design
Magento 1.3 Theme Design

Scratch 1.4: Beginner’s Guide
Scratch 1.4: Beginner’s Guide

WordPress MU 2.7: Beginner's Guide
WordPress MU 2.7: Beginner's Guide

LWUIT 1.1 for Java ME Developers
LWUIT 1.1 for Java ME Developers

Drupal 6 Content Administration
Drupal 6 Content Administration

Zend Framework 1.8 Web Application Development
Zend Framework 1.8 Web Application Development

Your rating: None Average: 5 (3 votes)

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
2
p
5
i
E
x
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software