Flex Sample App: Building the Restaurant Finder

About the Restaurant Tutorial

Even though you can use this tutorial with no prior experience with Flex, this is not a traditional "getting started" tutorial. The goal of this tutorial is to:

• Demonstrate best practices for architecting Flex applications
• Highlight traditional pitfalls to avoid when developing your first Flex project

Some of the techniques demonstrated in this tutorial include:

• Application partitioning
• Loose coupling of application components
• Event notification
• Using ActionScript classes as Model classes
• Deserializing Java objects into "typed" ActionScript objects
• Passing client-side ActionScript objects to Java methods at the server-side

In this tutorial, you build a Restaurant Portal application. The application has two modules:

The user module

This is the module that end-users use to search for restaurants. Users can select restaurants by location (using a map-based selection) and by categories. You can also read customers' reviews and write your own review. In this tutorial, you build the application from scratch.

Figure 1. The user module

The administration module

This is the module that the administrators of the portal use. Administrators can add, update, and delete restaurants, indicate their location on a map, and so forth. It's a typical database maintenance application. I provide the administration module to you as a reference application. I also provide the steps to install the administration module later in this tutorial.

Figure 2. The administration module

Requirements

To perform this tutorial, you need to download and install the following software and files.

1. Install Flex

• If you don't have Flex, find out how you can try or buy it.
• If Flex is not installed on your system, start the setup program and follow the installation instructions.

2. If you don't have MySql installed on your system, install MySql

1. Download MySql. Choose the latest production version (4.0.20 at the time of writing).
2. Unzip the MySql file in a temporary directory.
3. Run the setup program (setup.exe) and accept all the default installation options.

3. Create the restaurant database

1. Start MySql.
   

   c:\mysql\bin>mysqld

2. Create the restaurant database.
   

   c:\mysql\bin>mysqladmin –u root create restaurant

3. Download restaurantadmin_sql.zip (ZIP, 12K), and copy the included restaurant.sql into the mysql\bin directory.
   
4. Create the database structure and import data.
   

   c:\mysql\bin>mysql –u root restaurant < restaurant.sql

4. Install the MySql JDBC driver

1. Download the MySql JDBC driver.
2. Unzip the file in a temporary directory.

3. Copy mysql-connector-java-3.0.14-production-bin.jar in the [webapp_root]\WEB-INF\lib directory of your web application.

   Note: The exact name of the file may vary depending on the version number of the driver at the time you download it.

   The location of [webapp_root] is the root directory of the web application hosting the Flex server you are using. For example, if you chose the Integrated Server installation, the webapp root is: Program Files\Macromedia\Flex\jrun4\servers\default\flex.

Installing the Administration Module

The Restaurant application has two modules:

• The user module
• The administration module

In this tutorial, you will build the user module. I provide the administration module as a reference application.

To install the Administration module:

1. Download restaurantadmin.zip (ZIP, 688K).
2. Unzip restaurantadmin.zip in your Flex server directory. For example, if you chose the Integrated Server installation, unzip restaurantadmin.zip in Program Files\Macromedia\Flex\jrun4\servers\default\flex.

3. Test the application. For example, if you chose the Integrated Server installation, browse the administration module at: http://localhost:8700/flex/restaurantadmin/admin.mxml.

   If you haven't already modified the RemoteObject whitelist, the following error message appears:

   

   Figure 3. The error message that appears if you haven't modified the whitelist

   This is because Flex is installed with strict security constraints by default. To allow your application to access the required Java class in your application server, you have to edit the RemoteObject whitelist as described in the following steps.

4. Edit flex-config.xml in the [webapp_root]\WEB-INF\flex directory.
5. Locate the <remote-objects> entry
6. Add the samples.* package to the unnamed whitelist.
   

   <remote-objects>
   <!-- Other entries -->
   <whitelist>
       <unnamed>
           <source>samples.*</source>
       </unnamed>

   With this entry, the client application can access any class in the samples packages.
7. Test the application again, using the URL: http://localhost:8700/flex/restaurantadmin/admin.mxml. (Your URL may differ based on your configuration.)
   

Installing the Tutorial Resource Files

Install the resource files (images, style sheet, etc.) in this tutorial.

1. Download restaurant_tutorial.zip (ZIP, 460K).
2. Unzip restaurant_tutorial.zip in your Flex server directory. For example, if you chose the Integrated Server installation, unzip restaurant_tutorial.zip in Program Files\Macromedia\Flex\jrun4\servers\default\flex.

Page 1 of 14

Next Page

About the author