Open the wineJournal-start.fxp file.

Select the Red text, and, in the HUD, convert it to a button as shown in Figure 10-6. You can also change the look of the text in the Over and Down button states if you want to give the button a rollover effect.

Figure 10-6. Creating the button

As you see when you move this project into Flash Builder, effective naming of the components makes the process move more efficiently later. Name the layer that the button is on redButtonLayer. Note that in the library, this button has been named automatically using the following convention; layerName+ComponentType. In this case, because the layer the button was originally on was named red, the button in the library is named redButton.

Next, you want to create the Data List component that is at the heart of this application. The elements to create the repeated item of the Data List are already on the stage (see Figure 10-7).

Figure 10-7. Elements of the Data List repeated item

Select all the elements to make up one wine listing (the thumbnail image, the four text boxes, and the line) by clicking each while holding down the Shift key.

Convert them into a Data List by selecting Convert Artwork to Component

Figure 10-8. Converting the elements to a Data List

As you saw in Chapter 7, the Data List needs to know which pieces are to be repeated. This process is guided by the HUD. In the HUD, select Edit Parts (see Figure 10-9).

Figure 10-9. Editing the Data List's parts

In the Data List, select all the items again by clicking them while holding down the Shift key, and define them as the repeated item (see Figure 10-10).

Figure 10-10. All the elements of the Data List set as a repeated item

Scale the Data List bounding box so the Data List occupies the whole of the white box it's on (see Figure 10-11).

Figure 10-11. Extending the bounding box

Because there will be more wines to present than the default five repeated items that are created in a Data List, add several more repeated items. To do so, add rows in the Design-Time Data panel, as shown in Figure 10-12. Because you'll add a vertical scrollbar to this Data List, you can add more rows than are visible at one time.

Figure 10-12. Design-Time Data panel for the Data List

It's important to have clear and consistent naming in the project. Notice that the naming of the repeated items is currently generic (image 1, Text 1, Text 2, and so on). These names give the developer little indication as to what needs to go in these fields. To make the names more meaningful, enter the Data List by double-clicking it; then, enter the repeated item, again by double-clicking. Here, rename the layers as shown in Figure 10-13.

Select the Illustrator file, and use the default import settings. This places the image of the vertical scrollbar in the Data List (see Figure 10-15). Position the graphics so they're in the appropriate location for the scrollbar.

Figure 10-15. Importing the artwork for the vertical scrollbar

To make this artwork into a functioning scrollbar, with all the pieces still selected, choose Modify

Figure 10-16. Artwork converted to a vertical scrollbar

Double-click the scrollbar to enter it so you can define which piece of the artwork becomes which part of the component. Select each part of the artwork and define its role in the HUD, as shown in Figure 10-17.

Figure 10-17. Defining the parts of the vertical scrollbar

Duplicate the Expanded state, and name it WineList (see Figure 10-18). This state presents the menu and the Data List but not the detailed information.

Figure 10-18. Duplicating the Expanded state to create the WineList state

To make the detailed information invisible, click the eye icon for the ExpandedInfo folder in the Layers panel (see Figure 10-19). Doing so makes all the elements that are part of the detailed information not visible in this state.

Figure 10-19. ExpandedInfo made invisible in the Layers panel

In the same way, you can create a duplicate state that shows only the wine-selection menu. Duplicate the WineList state, and name the copy selectionMenu. In this state, set the WineDataList folder to be invisible by selecting the eye icon. The design should now look like Figure 10-20.

Figure 10-20. Design of the selectionMenu state

To set this state as the first state the user sees, right-click the state and select Set as Default State from the context menu, as shown in Figure 10-21.

Figure 10-21. Defining selectionMenu as the default state

Select the redButton. In the Interactions panel, define the interaction as On Click

Figure 10-22. Adding an interaction to redButton

In a similar way, when the user selects one of the wines, you want the application to transition to the Expanded state that shows the detailed information about the wine. Select the WineDataList and, in the Interactions panel, define the interaction as On Select

It doesn't matter in which state you define the interactions, because they're associated with the component, not the state.

Save the project (File

In Flash Builder, import the Wine Journal Application that you created in Catalyst (File

Figure 10-24. Importing the Catalyst project

Figure 10-25. Import Flex Project dialog box

This brings your project into Flash Builder. You can see the project in the Package Explorer (see Figure 10-26).

Figure 10-26. Project in the Package Explorer panel

A Flash Builder project is made up of a variety of files and folders that are all contained in a package. If you open the package by clicking the arrow next to the name, you can see its folders and files. The ones you're most concerned with are in the src folder. This is the Source folder, and it's automatically created to hold the project's main code files.

A package is essentially a collection of code. The default package holds the main code for the project. Main.mxml contains the main structure of the project you created in Catalyst, and the assets.images folder holds all the images you used. You can see these in Figure 10-27.

Figure 10-27. File structure of the project

Double-click Main.mxml to open the project in the code view. Click the Design button above the main window, as shown in Figure 10-28, to switch to the design view and get a more familiar look at your project.

Figure 10-28. Code view of the project

In this project, you replace the data that is used to populate the list of wines. In Catalyst, the data was the single repeated wine that you used when you created the Data List. In a finished application, the data that populates the list comes from an outside file or database. In this case, you use data from an XML file—specifically, the provided file XMLAndImages.zip.

Because your data source is an XML file, you bring the file into the project so it's a part of the overall package. It's good form to bring the XML into the project's assets folder but keep it separate from the images. To do this, you need to create a new folder named data in the assets folder.

Right-click the assets.images folder, and select New

Figure 10-29. Adding a new folder for data

In the New Folder dialog box, select assets, give the folder the name data, and click Finish, as shown in Figure 10-30.

Figure 10-30. Adding a data folder to assets

The XML file and a series of images that are used for the different wines are provided with the example files for this chapter in the zip file XMLAndImages.zip. Download and extract these files onto your desktop.

To make the XML part of the project, drag and drop the file directly into the data folder in the Package Explorer panel, as shown in Figure 10-31. Doing so places a copy of the XML file into the assets folder; it will be exported with the project when it's finished.

Figure 10-31. Dragging the XML file into the data folder

Do the same thing to make the images part of the project: drag the images that were in XMLAndImages.zip into the assets.images folder.

With the XML file in place, you can now make it into a data service in the project. A data service takes in and processes data, making the individual fields accessible later in this example. When you make the data into a data service, Flash Builder can connect or, in the language of Flash Builder, bind the information in the file to the individual components.

To create a data service, select the Data Services tab along the bottom panel, and click Connect to Data/Service, as shown in Figure 10-32. Doing so brings up a Data/Service wizard to guide you through the process (see Figure 10-33). As you can see, Flash Builder can work with a variety of different kinds of data sources.

Figure 10-32. Data/Services panel

Figure 10-33. Data/Service creation wizard

Select XML, and click Next.

The next step in the wizard has you locate the XML file you need to use. To find the one you just added to the project, click Browse beside the Path field (see Figure 10-34). This opens the Browse window at the root of the current project.

Figure 10-34. Path to the data service

Navigate through the project's file structure until you reach the data.xml file. It's in the src/assets/data/ folder, as shown in Figure 10-35. Click Finish to complete the creation of the data service.

Figure 10-35. XML file selected in the project's folder structure

You've now created the data service. Flash Builder understands the structure of the XML, and it can be used to bind to a component. In the Data/Services panel, you can see the structure of the XML file, as shown in Figure 10-36.

Figure 10-36. Structure of the XML file

You now want to connect the data service with the Data List you created in Catalyst. Select the WineList state in the States panel at upper-right in the interface (see Figure 10-37).

Figure 10-37. Selecting the WineList state in the States panel

Notice that when the Data List is selected, an icon that looks like a chain appears to the left of the component. This is the binding icon (see Figure 10-38). Click it to bind the data service to the component.

Figure 10-38. Binding icon

You receive a message stating the component is already bound (see Figure 10-39). This is because the Data List has been bound, in Catalyst, to the design-time data. Because you no longer want to use the design-time data, you can replace the binding. Click OK in the message.

Figure 10-39. Message regarding a preexisting binding

The next dialog box gives you some control over how the data service binds to the Data List (see Figure 10-40). Keep the default settings, and click OK.

Figure 10-40. Bind to Data dialog box

The contents of the Data List disappear at this point. This is because, although the data from the XML file is now being passed to the Data List, it doesn't yet know how to handle the data. It doesn't know which field from the XML goes into which part of the repeated item. You need to manually connect this directly in the code.

All the components that you created in Catalyst also exist in Flash Builder as individual MXML files. These MXML files control the appearance of the individual components and can be found in the Package Explorer panel in the src/components folder, as shown in Figure 10-41.

Figure 10-41. Component MXML files in the Package Explorer panel

The component you're concerned with here is RepeatedItem. This is the part of the Data List that is repeated for each wine.

Double-click the RepeatedItem.mxml file to open it. It isn't much to look at in the design view, because it doesn't contain the data. But if you switch to source view, you can see the code that makes up the component.

This source view can be difficult to understand if you aren't familiar with MXML, but it holds all the properties of the components you created in Catalyst (see Figure 10-42). You need to make a few small changes to this code in order for it to understand how to handle the data that is coming in.

Let's start with the thumb image of the wine label. This can be found at line 17 (see Figure 10-43). The source property of this image defines where the image data comes from. Right now, it's looking for a field called image1 in the XML file, because this was the generic name given it from the design-time data. This is represented as source="{data.image1}". You need to change it to the correct field in the XML: thumb.

Figure 10-42. Code View for RepeatedItem

Figure 10-43. MXML for the thumb image

Change the source property to {data.thumb}, as shown in Figure 10-44.

Figure 10-44. Thumb image connected to the correct data field from XML

In the same way, the text field that contains the information about the wine name, region, year, and price needs to be pointed to the correct part of the XML file. You can find these components at lines 8 to 11. Currently, the data fields they're pulling from are named {data.text1}, {data.text2}, {data.text3}, and {data.text4}, as shown in Figure 10-45.

Figure 10-45. MXML for the text components

You need to change these to pull from the appropriate fields. You can tell which data should go to which component by looking at the userLabel field of each component. These are the names of the layers you added in Catalyst. (You can tell that this process would be considerably more difficult if the userLabel field weren't clear.)

Change the fields to {data.name}, {data.region}, {data.year}, and {data.price}, as shown in Figure 10-46.

Figure 10-46. Text components connected to the correct data fields from XML

That's all for the Data List. To see the project in action, run it by selecting Run

Figure 10-47. Running the project

The contents of the Data List showing all the wines are now brought in from the XML data, as shown in Figure 10-48. Any future changes in the XML file will be reflected in the contents of the Data List.

Figure 10-48. Data List with data coming in from XML

Clicking any of the wines in the Data List still bring up the detailed view. This information is still static. Making it live would require a deeper investigation of the coding in Flash Builder than is in the scope of this book, but you should now have some idea of how you might go about it.

There is a bit of an issue: when you click the Data List, it seems to disappear (see Figure 10-49). To prevent this, select the Data List in the Main.mxml file (in the design view), and select Apply Current Properties to All States from the context menu (see Figure 10-50). This carries over the changes that you made to the Expanded state.

Figure 10-49. Issue with the Data List

Figure 10-50. Applying properties to all states to eliminate the issue