Exercise 5.1: Using text controls

In this exercise you will use Flex text controls to manipulate the application as shown in Figure 1.

In this exercise, you will learn how to:

• Use the Label control
• Align text within controls
• Display rich text
• Use the online Text Layout Editor
• Use text layout properties
• Display vertical text

In this section, you use the Label control to add the title text to the sample application.

1. Download the ex5_01_starter.zip file if you haven't already and extract the file ex5_01_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex5_01_starter.fxp file.
4. Open the ex5_01_starter.mxml file.
5. Run the application.

   The Employee Portal application appears as shown in Figure 2.

6. Return to Flash Builder and switch to Design mode.
7. From the Components view Layout branch, drag an HGroup container and place it above the Employee of the Month panel.
8. In the Properties view for the HGroup container, set the X value to 24 and the Y value to 21 and remove the Width and Height values.
9. In the Layout segment of the Properties view, set the Gap property to a value of 15.
10. From the Components view Controls branch, drag an Image control and place it inside the HGroup container.
11. In the Properties view, locate the Source field and click the folder icon to the right of the field. Browse to and open the .../src/assets/logo.png file.

    You should see the Employee Portal logo appear on the stage in Design Mode.

12. With the logo image selected, switch to Source mode.
13. Change the Image control to a BitmapImage control.

    Note that the BitmapImage control is used here because you will not be skinning the logo.

    
    

14. Switch to Design mode.
15. From the Components view Controls branch, drag a Label control and place to the right of the logo image. Make sure the Label control is inside the HGroup container as shown in Figure 3.

16. With the Label control selected, use the Properties view to assign the text property a value of Employee, a fontWeight value of bold and a fontSize value of 38 (see Figure 4).

17. From the Components view Controls branch, drag another Label control and drop it next to the Employee Label control, within the HGroup container (see Figure 5).

18. With the new Label control selected, use the Properties view to change the Text value to Portal and the size to 38.
19. Save the file and run the application.

The Employee Portal text should appear as shown in Figure 6. Note that the bottom of the text is aligned with the top of the HGroup container and not with the bottom of the logo image.

In this section, you will align text within the Label control.

1. Return to Flash Builder.
2. Select the Employee Label control and switch to Source mode.
3. To the Label control, assign the alignmentBaseline property value to ideographicBottom.

4. Locate the Portal Label control and assign the alignmentBaseline property value to ideographicBottom.

5. Save the file and run the application.

   You should see the bottom of the Employee Portal text is now aligned with the bottom of the logo image (see Figure 7).

In this section, you will use a RichText control to format the Cafeteria Special Panel container's content.

1. Return to Flash Builder.
2. Within the Package Explorer view, from the components package, open the Cafeteria.mxml file.
3. Locate the calorieContent Label control.

   The three text primitives provided by the Spark architecture are the Label, RichText, and RichEditableText controls. The Label control only uses the Flash Text Engine (FTE) and is limited in its capabilities. It does not support rich text, scrolling, selection, or editing. This makes it the most lightweight and the fastest of these text primitives.

   The RichText and RichEditableText controls support rich text with complex layout by using the Text Layout Framework (TLF) in Flash Player.

   The RichText control does not support scrolling, selection, or editing, while the RichEditableText control does support these features. This makes the RichEditableText control the slowest and heaviest of the primitives, but also offers the most of what TLF can do.

4. Change the Label control tags to RichText control tags. You will use the RichText control here because there is no need for a scroll bar.
5. Within the RichText control tags, surround the text with a span control.

6. Save the file and run the application.

You should see the Calorie Information text is displayed, but it is not formatted. You will format it in the next section.

In this section, you will use the online Text Layout Editor demo to format text from the sample application.

1. Open a browser and navigate to the following URL:

   http://labs.adobe.com/technologies/textlayout/demos/

2. Copy the text between the span tags in the RichText control and paste it in the Text Layout Editor window (see Figure 8). Make sure each line of text is left aligned.

3. Select the text and then, using the Character menu, change the Font to Arial and set the Type to Italic (see Figure 9).

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

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

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 use with Flash Builder components. However, the XML namespace component, flow must be modified to make the code function in Flash Builder.

6. From the online code preview window, select and copy the <flow:p> tags and its contents (see Figure 12).

7. Return to the Cafeteria.mxml file in Flash Builder.
8. Delete the existing span tags with the Calorie text.
9. Paste the copied code after the opening RichText tag.

10. Save the file.

    You should see an error occur.

11. Open the Problems view and expand the Errors directory (see Figure 13).

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. You will change the flow namespace to an s to map the span element to the Spark namespace.

12. Select all the lines with flow tags and calorie text.
13. Use the Find/Replace window (CTRL+F) to find all the instances of flow and replace them with an s for the Spark namespace. Set the Scope to Selected lines.
14. Click Replace All.
15. Click Close.

    You should see that all the instances of flow are replaced with s.

16. Save the file and run the application.

    You should see that the calorieContent text displayed has been formatted (see Figure 14).

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

1. Return to Flash Builder.
2. From the Package Explorer view, open the MonthlyEvents.mxml file.
3. Change the Label control around the text to a RichEditableText control.

   You will use the RichEditableText control here because it supports the use of a scroll bar.

4. In the RichEditableText control, set the width to 100%.
5. Save the file and run the application.

   You should see the content within the MonthlyEvents component as shown in Figure 15. Note that all of the text is not displayed and there is no scroll bar. Also note that the text is editable.

6. Return to the MonthlyEvents.mxml file in Flash Builder.
7. Surround the RichEditableText tags with the Scroller control tag.
8. To the Scroller tag, set the width and height to 100%.
9. From the RichEditableText control, remove the width and height properties.
10. Save the file and run the application.

    You should see the content within the Monthly Events Panel container has a scroll bar on the right (see Figure 16).

11. Return to the MonthlyEvents component in Flash Builder.
12. To the RichEditableText control, assign the editable property value to false.
13. Between the RichEditableText tags, add an opening and closing paragraph tag before the text.

14. To the <s:p> tag, set the fontWeight property to bold.
15. Between the paragraph tags, type COMPANY PICNIC.

16. Surround each line of text with a paragraph tag set. Make sure there is no space between the <s:p> tag and the first word of the text.
17. Copy the paragraph tag that contains the text COMPANY PICNIC and paste it before the paragraph tag for the second paragraph.
18. Change the text in the paragraph tag from COMPANY PICNIC to FAMILY DAY AT THE BALL PARK.

19. Save the file and run the application.
20. Try and edit the text within the RichEditableText control.

    You should see that the text is no longer editable within the RichEditableText control. Also note the lack of vertical spacing between the paragraph title text and the content text (see Figure 17).

21. Return to the MonthlyEvents.mxml file.
22. To the RichEditableText control, assign the paragraphSpaceBefore property value to 10.

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

23. Save the file and run the application.

    Note the spacing between the paragraph title and content (see Figure 18). Also note the padding around the scroll bar.

24. Return to the MonthlyEvents.mxml file in Flash Builder.
25. Copy the padding properties from the VerticalLayout tag under the Properties of the parent comment and paste them into the opening RichEditableText control tag.

26. In the VerticalLayout tag, delete all of the padding properties except for paddingBottom.
27. Save the file and run the application.

You should see that the scroll bar is now flush with the right of the Monthly Events Panel container (see Figure 19).

In this section you will use vertical text as a label to the calorie information in the Cafeteria Special panel.

1. Return to Flash Builder.
2. Open the Cafeteria.mxml file.
3. Surround the Label control for Calorie Information and the RichText control and its contents with an HGroup container.
4. To the HGroup container, assign the width property a value of 100%.
5. To the Label control for Calorie Information, assign the rotation property value to 270.
6. Save the file and run the application.

   You should see the vertical text displayed on the left side of the container as shown in Figure 20. Note that the image, title, and content are not centered.

7. Return to the Cafeteria.mxml file in Flash Builder.
8. Locate the VerticalLayout class tag within the layout object tags.
9. To the VerticalLayout tag, change the paddingLeft and paddingRight properties to have value of 5.
10. Assign the horizontalAlign property to the VerticalLayout class with a value of center.
11. Save the file and run the application.

You should see that the image, title, and text are all centered within the Panel (see Figure 21).

In this exercise you used Flex text controls to manipulate an application. In the next exercise, you will use the Flash Builder Appearance view and cascading style sheets (CSS) to create the styles.