In the Flex Navigator View, right-click the src folder and select New Folder.

Call the new folder components, as shown in Figure 10-11.

Click Finish.

Naming the components folder in the New Folder dialog box

Look in the Flex Navigator pane, and you should now see the new folder, as shown in Figure 10-12.

The Flex Navigator pane with the components folder

Right-click the new components folder and select New MXML Component.

Recall that components have to be based on one of the container components and not on the Application tag.

Call the new component BookHome and base it on the VBox container, as shown in Figure 10-13. Unlike earlier examples, we will set the size of this component to a width of 400 and a height of 300.

Defining the BookHome component in the New MXML Component dialog box

Click Finish.

The code for the new component should look as follows:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" 

height="300">

</mx:VBox>

Within the VBox container, put an HBox container:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" 

height="300">
     <mx:HBox>

     </mx:HBox>
</mx:VBox>

Now, within the HBox container, put an Image tag, and make the source assets/EbooksHomeAd.jpg.

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" 

height="300">
     <mx:HBox>
     <mx:Image source="assets/EbooksHomeAd.jpg"/>
     </mx:HBox>
</mx:VBox>

You will recall that a Flex application is built with containers within containers. The containers, in turn, handle the placement of whatever content is inside of them.

You now want to place some text below the image you just inserted. Put a VBox below the Image tag.

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" 

height="300">
     <mx:HBox>
            <mx:Image source="assets/EbooksHomeAd.jpg"/>
            <mx:VBox>

           </mx:VBox>
     </mx:HBox>
</mx:VBox>

Recall that when I talked about UI components, I talked about Text. What you need to do is create a Text container to control the font, size, color, and so forth of the text.

Place a Text container within the new VBox container. Give it a fontSize property of 12 and a color property of blue. Make the container 200 wide (remember, all measurements in Flex are in pixels).

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" 

height="300">
     <mx:HBox>
           <mx:Image source="assets/EbooksHomeAd.jpg"/>
           <mx:VBox>
                   <mx:Text color="blue" fontSize="12" width="200">

</mx:Text>
        </mx:VBox>
    </mx:HBox>
</mx:VBox>

Notice that I didn't put the text property in the Text container to hold the text. I did that for a reason. Recall from the earlier discussions of states and transitions that you can take an MXML property and break it out to its own subcontainer. This is handy if the property will contain an array of objects. It is also a handy way to sometimes make blocks of text a little more readable in code.

Within the Text container, create a text container and give it the text friends of ED eBooks are offered for sale at a discount of almost 50%.

<mx:Text color="blue" fontSize="12" width="200">
     <mx:text>
						friends of ED eBooks are offered for sale at a discount
						

						of almost 50%
						</mx:text>
</mx:Text>

Remember, you cannot run a component as an application because it has no Application tag of its own. However, you can see it in Design View. Compare your work so far against Figure 10-14.

The component as of the last step

Return to Source Perspective so you can add some additional code.

To save yourself some time, copy the <mx:Text> container and paste it below the present Text container. Inside of the <mx:text> tag of the new container, replace the text with the following:

Please use our site to find the technical books you need.

Follow the same procedure to add one more Text container with the following text:

Keep coming back to our site to see the latest news about new 

books and technical information.

Your code should look as follows:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" 

height="300">
     <mx:HBox>
          <mx:Image source="assets/ebooksHomeAd.jpg"/>
          <mx:VBox>
                 <mx:Text color="blue" fontSize="12" width="200">
                        <mx:text>
                             friends of ED eBooks are offered for 

sale at a discount of almost 50%
             </mx:text>
             </mx:Text>
             <mx:Text color="blue" fontSize="12" width="200">
                <mx:text>
                     Please use our site to find the technical 

books you need.
           </mx:text>
           </mx:Text>
           <mx:Text color="blue" fontSize="12" width="200">
                <mx:text>
                     Keep coming back to our site to see 

the latest news about new books and technical information
                 </mx:text>
            </mx:Text>
       </mx:VBox>
   </mx:HBox>
</mx:VBox>

					  

Switch to Design Perspective. Your screen should look like Figure 10-15.

The component with text added

We will be returning to this component to make some additional changes later on. Working with components means the site will be easy to update.

When you learned how to build and attach components, you used the drag-and-drop technique to bring them into the main page. In this case, you could do that also. However, in this exercise and for the sake of review, you are going to do it manually. This will reinforce the concepts you've learned.

Switch back to the BooksMain.mxml file.

Recall that in the Application tag, you have to declare a namespace. For review, a namespace is simply a way of predefining a path to find an object that will be needed.

To define a namespace, use the xmlns property as follows:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 

layout="vertical" backgroundColor="#FFFFFF"

						xmlns:comp="components.*">
     <mx:Image source="assets/Logo1.gif"/>
</mx:Application>

The asterisk signifies all components in the directory named components. As you may recall, the name itself, comp, has absolutely no significance. However, it is a good idea to use a name that describes what is in the path. In this case, I used comp as a name to tell me that this path contains my components. Using precise terminology, the name (in this case, comp) is called a prefix.

Under the Image tag, place the component by starting the tag not with mx, as you have done with many tags up to this point, but with comp, which is the prefix of the namespace you just created.

<comp

As soon as you type the colon, after the namespace prefix, a list of components in the components directory (in this case there is only one so far) comes up, as shown in Figure 10-16.

The component listing

Select the BookHome component.

For the purposes of this exercise, you want the height and width of the component to be 50% of the size the application, as shown here:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 

layout="vertical" backgroundColor="#FFFFFF" xmlns:comp="components.*">
     <mx:Image source="assets/logo1.gif"/>
     <comp:BookHome height="50%" width="50%"/>
     </mx:Application>

Save the project and run it. Your output should be as shown in Figure 10-17.

The component in the main application

This is a good place to show you the power of components:

Close the browser and return to the BookHome component.

Under the closing HBox tag, insert a Text container with the following text. Set the fontSize to 20 and the fontWeight to bold.

</mx:HBox>
<mx:Text fontSize="20" fontWeight="bold">
     <mx:text>Book of the Week</mx:text>
</mx:Text>

Under the closing Text tag, place an Image tag that calls the Green.jpg file in the assets folder.

</mx:HBox>
<mx:Text fontSize="20" fontWeight="bold">
     <mx:text>Book of the Week</mx:text>
</mx:Text>
<mx:Image source="assets/Green.jpg"/>

Save the component.

Switch back to BooksMain and run the application; you should now see the updated component in the application, as shown in Figure 10-18. That is the real power ofcomponents: to be able to update easily without affecting other aspects of the application.

The finished home page

As you can see, once the component is updated, everything that uses that component is updated automatically as soon as the component is saved.

As you progress through this case study, you will be calling this component programmatically as well as building a navigation bar. For that reason, you need to give the call to the component an id property and a label property. In this case, we will call both home. In the label property, you must enter the name exactly the way you want it to appear in the navigation bar. So you will use a capital "H" for "home":

Modify the component call as follows:

<comp:BookHome height="50%" width="50%" label="Home" id="home"/>

The finished code in BooksMain.mxml should look as follows:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 

layout="vertical" backgroundColor="#FFFFFF" xmlns:comp="components.*">
     <mx:Image source="assets/Logo1.gif"/>
     <comp:BookHome height="50%" width="50%" label="Home" id="home"/>
</mx:Application>