The Wheel: Flash Builder

Cut down Flex in a Week

As before, watch the videos, indicated by the icon;
then do the exercises indicated by the icon.

You should do all of these before the timetabled workshop so that you can do the independent task at the end of this page during the workshop with the lecturer.

Understanding event-driven development

Implementing event handlers (14:12) Covers the following topics:
- Understanding events
- Implementing event handlers
- Creating ActionScript event handler functions
Handling a user event
Understanding the event object and bubbling (19:38) Covering:
- Understanding the event object
- Understanding event propogation (capturing, targeting and bubbling)
Using the event object
Adding event listeners with ActionScript (7:28)
Using the addEventListener() method

Retrieving remote data

Introducing ArrayCollection and other data types (9:29) Covers:
- Introducting the Object and Array classes
- Introducing the ArrayCollection class
- Populating an ArrayCollection instance with data
- Binding the ArrayCollection instance to a UI control
Verifying data retrieval with Debugger and Network Monitor (6:32)
Note that the section of the video about Network Monitor you won't be able to use since we don't have the Premium version that includes the Network Monitor.
Populating an ArrayCollection with retrieved data
Introducing RPC (7:24)
This short screencast will give you an overview of using RPC (Remote Procedure Calls) in Flash Builder. It outlines three methods: HTTPService, WebService and RemoteObject, though you won't need to use WebService. Watch this screencast before moving on to watch the HTTPService video.
Retrieving and handling data using:
HTTPService (10:41)
Watch the HTTPService screencast carefully, then do to the exercise below. The HTTPService retrieves untyped data.
This exercise will get you to retrieve data in the form of xml and use it to populate an an application. You'll also learn how to use the fault event to generate an Alert.
Populating an application with data using:
HTTPService

Creating a typed data model

Introducing the MVC pattern (10:44) Showing how to apply the pattern to a simple application.
Separating the model, view, and controller
Programming ActionScript classes (24:27) Covering topics:
- Writing a class definition in ActionScript
- Creating instances of an ActionScript class
- Creating class methods
Creating an ActionScript class and instances
Implementing a value object and a typed data model (10:52) Showing topics:
- Introducing value objects
- Creating a typed data model
Creating an ArrayCollection of value objects

Pulling it all together

The next two videos are mine and they demonstrate how to pull all the techniques learned so far together. Getting data as xml from your service classes and then showing that data in a UI in Flash Builder.

Implementing a PHP Service Class (21:23) This video screencast of mine explains how to implement a set of service classes making use of other classes you've already written. By the way if, after having started the video, you move your mouse over the video area, you will see a menu on the left to jump to different sections. If you move your mouse completely out of the video area the menu will hide and the video enlarge.
Connecting to the Service Class (20:29) Another of my screencasts showing how to use Flash Builder to connect to the PHP Service Class using the HTTPService. As I mentioned in the video above, if, after having started the video, you move your mouse over the video area, you will see a menu on the left to jump to different sections. If you move your mouse completely out of the video area the menu will hide and the video enlarge.

Independent Task

This task you can do in class if you want, having first followed the videos and exercises above in your own time.

This task will require you to use the authors-books database you used in semester one - download it again if you don't still have it on your U: drive and save it into U:\local-html\db.

Task Overview

Following the example in the video explaining how to use Flash Builder with PHP you will create a class to represent a database table, a service class to access the database and wrap the data as an object instance, then you'll create a Flash Builder interface to first display that strongly typed value object and later, modify it.

PHP Server-side components

In a sub-directory called U:\local-html\classes create a php file called author.class.php containing one php class called Author (you might be able to use the author.class.php which you created in semester one).
In that Class simply create public class with variables named after the fields in the database, if you are using the author class from semester one you probably probably already have this in place.
Make sure you have your recordset.class.php also in the classes/ directory —this is also a class you created in semester one.
Create a service class called authorservice.class.php following the example in the PHP Service Class video. Make sure you use the database connection singleton class you created in semester one, and that all your database access is via PDO. Your service class should have a getAuthorsXML() method that returns xml with each author in an <author> element.
Because your authorservice.class.php has no entry point from the web you will need to create a controller script to pass on web requests to the appropriate class method, as you saw in the video. Create a similar authorServicePipe.php file that 'exposes' the getAuthorsXML method and returns its XML record set
Test your service pipe class to verify it works without error. You can do this by calling authorServicePipe.php?action=getauthorxml — as in the example in the screencast.

Flash Builder Project

The flash builder project will implement the kind of solution you've seen being used in the MVC solution in the videos. You'll create an AuthorsDetail component, a main project that displays that component, with data drawn using the HTTPService protocol from your authorServicePipe.php script. Here is the detail of what you need to do:

Start a new project called authorInfo
For initial testing display your author data in a form, as in the employees example, not using a datagrid as in my screencast. So, manually create the appropriate HTTPService mxml instance to connect to your authorServicePipe.php in order to retrieve xml data from the getAuthorsXML method (the Connecting to the Service Class video demonstrates how). Your form should include a DropDownList, FormItems with TextInput items and appropriate FormHeadings. The TextInput boxes should get their values from the selectedItem in the DropDownList. The TextInput items in the form should display at least ID, forename and surname.
Test your project to ensure that the DropDownList box displays authors and that when you select an author the other items on the form display the author fields (forename, surname, ID etc.).
Following what you learned in the MVC sections create a separate AuthorDisplay component and move into it the form you've just created in the main application. Again, following the example in the video, leave the HTTPService calls in the main application.
Include the AuthorDisplay component in the main form and join the new AuthorDisplay component with the main form via a public bindable variable, of type ArrayCollection, called authors.
Test your final project to ensure that the new version with the MVC architecture works correctly.
Next, following the techniques used the videos above called "Programming ActionScript classes" and "Implementing a value object and a typed data model", create:
1. an actionscript class called author in a package called valueObjects
2. convert the ArrayCollection called authors that you use into a typed ArrayCollection of elements of type Author
FInally, test your new code to check everything works without errors.

The Wheel

Flash Builder