Exercise 5.2: Using text layout features

In this exercise, you will use text layout properties and controls to display and format the information for the Cafeteria and Monthly Events components of the sample application (see Figure 1). You will also display text in a vertical orientation.

In this exercise, you will learn how to:

• Format text with flow elements
• Use the online Text Layout Editor
• Use text layout properties

Format text with flow elements

In this section, you will use Flash Builder flow elements to format the text content for the Cafeteria component of the sample application.

1. Download the ex5_02_starter.zip file if you haven't already and extract the file ex5_02_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex5_02_starter.fxp file.
4. Within the Package Explorer view, from the components package, open the Cafeteria.mxml file and switch to Source mode.
5. Below the Image control, uncomment the span tags and nested code.

   Note that the span and br flow tags being used within the component are based on HTML tags.

6. Surround the span tags with a RichText control.

7. Save the file and open the main ex5_02_starter.mxml application file.
8. Run the application to see a baseline for what the Cafeteria content looks like.
9. Close the browser and return to Flash Builder and the Cafeteria.mxml file.
10. Save the file.
11. Run the application.

    You should see each food specification item on its own line (see Figure 2).

12. Return to the Cafeteria component in Flash Builder.
13. To the opening tag of the RichText control, assign the lineHeight property value to 20.

14. Save the file and run the application.

Note that there is now more space between each line of text (see Figure 3).

Use the online Text Layout Editor

In this section, you will use the online Text Layout Editor demo to create label text for the sample application.

1. Open a browser and navigate to the URL: http://labs.adobe.com/technologies/textlayout/demos/.
2. Type Chicken Satay in the editor window (see Figure 4).

3. Select the text, then, using the Character menu, change the Font to Arial and bold the text (see Figure 4).

4. Click the Markup button (see Figure 6).

5. Compare the generated code with the code nested between the RichText tags in the Cafeteria component (see Figure 7).

Note that the flow:span tags are similar to the <s:span> tags in Flash Builder. The online text generation tool can be used to create all the HTML markup that can be used with Flash Builder components. However, the XML namespace component, flow, must be modified to make the code functional in Flash Builder.

6. From the online code preview window, select and copy the flow:span tags and its content (see Figure 8).

7. Return to the Cafeteria.mxml file in Flash Builder.
8. Paste the copied code between the opening RichText and span tags.

9. Save the file.

   You should see an error occur.

10. Open the Problems view and expand the Errors directory (see Figure 9).

The application is producing an error because the code you copied from the HTML generator contains the flow prefix within the span tags. In order for the copied code to work, you must alter the namespace being used with the span tags.

11. Change the flow namespace to an s to map the span element to the Spark namespace.

12. Add a line break tag after the closing span tag.

13. Save the file and run the application.

    You should see the Chicken Satay text displayed (see Figure 10).

Use text layout properties

In this section you will use multiple properties to configure the layout of the Monthly Events Panel container.

1. From the Package Explorer view, open the MonthlyEvents.mxml file.
2. Uncomment and surround the span element code with a TextArea control.

3. To the TextArea control, assign the following property values:

4. Save the file and run the application.

   You should see the content within the MonthlyEvents component as shown in Figure 11. Note the lack of vertical spacing between the paragraph title text and content text and the fact that you can edit the text within the TextArea control. Lastly, remember that the TextArea control has a Scroller component built into it to create a scrollbar if the text content requires one.

5. Return to Flash Builder.
6. In the MonthlyEvents component, to the TextArea control, assign the editable property value to false.

7. Between the TextArea tags, note that the span tags containing the paragraph content are preceded by paragraph (p) tags (see Figure 12).

8. To the TextArea control, assign the paragraphSpaceBefore property value to 4.

   The paragraphSpaceBefore property adds the defined amount of pixels before any paragraph tag.

9. Save the file and run the application.
10. Try and edit the text within the TextArea control.

    You should see that the text is no longer editable within the TextArea control. Also note the spacing between the paragraph title and content (see Figure 13).

11. Return to the MonthlyEvents component in Flash Builder.
12. To the TextArea block, assign the paddingTop, paddingRight, paddingBottom, and paddingLeft property values to 15.

13. Save the file and run the application.

    You should see there is an extra 15 pixels of space between the edge of the container and the text (see Figure 14).

Display vertical text

In this section, you will use vertical text as a label to a set of information.

1. Return to Flash Builder.
2. Open the Cafeteria.mxml file.
3. Surround the RichText control and its contents with an HGroup container.

4. To the HGroup container, assign the verticalAlign property value to top and the width property value to 100%.

5. Between the closing tag of the RichText control and the closing tag of the HGroup container, create a Label control.

6. To the Label control, assign the text property value to Calorie Information, the fontWeight property value to bold and the rotation property value to 270.

7. Save the file and run the application.

   You should see the Calorie Information text displayed vertically on the right side of the Cafeteria Panel container and the text within the RichText control is now too long to fit on one line (see Figure 15).

8. Return to Flash Builder.
9. Within the Cafeteria.mxml file, move the Label control from between the closing RichText control and HGroup container tags to between the opening HGroup container and RichText control tags.

   You want the Cafeteria Information text to display on the left side of food content information. Therefore, the Label control needs to be placed before the RichText control within the HGroup container so it is processed before the RichText control.

10. Save the file and run the application.

    You should see the vertical text now displays on the left side of the container as shown in Figure 16. Note that the food content information and title are still poorly formatted.

11. Return to the Cafeteria.mxml file in Flash Builder.
12. Between the Image control and the HGroup container, create a Spark Label control.

13. To the Label control, assign the text property value to Chicken Satay and the fontWeight property value to bold.

14. From within the RichText tags, remove the span tags that contain the Chicken Satay text.
15. Within the RichText tags, surround each line of food content information with span tags. Place the closing span tag for each line before the number amount of each ingredient, adding a colon to separate the text from the amount. Leave the fontStyle property within the first tag.

16. Assign each span tag the fontStyle property value of italic.

17. Save the file and run the application.

    You should see the text within the span tags are italic, but the amounts are not (see Figure 17).

18. Return to Flash Builder and Cafeteria.mxml.
19. Locate the HGroup container and add a height property set to 200.
20. Save the file and run the application.

    You should see that the Panel submit buttons are aligned (see Figure 18).

Test your knowledge

Which property lets you modify the space between each line of text?

You can use lineHeight to define the space between multiple lines of text.

Which property can be used to change the orientation of text to vertical?

You can use the rotation property to change the text orientation.

What do you need to do to get scrollbars in a TextArea component?

The TextArea component has a built-in Scroller component, and doesn't need a separate scroller defined for it.