trilemetry_bio

Created

5 April 2010

Requirements
     
Prerequisite knowledge Required products Sample files User level

Exercise 1.1: Setting up Flash Builder and your project files

Exercise 5.1: Using text controls

Flex Builder (Download trial)

ex5_02_starter.zip (40 KB)

ex5_02_solution.zip (41 KB)

All
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.
 
Preview the application.

Figure 1. Review your task for this exercise.

In this exercise, you will learn how to:
 

 
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.
     
<s:span fontWeight="normal"> Water content (grams per 100g) 47.31<s:br/> Calorie content of Food (kcals per 3.5oz) 283<s:br> Protein content (grams per 100g) 13.25<s:br/> Fat content (lipids) (grams per 100g) 16.18<s:br/> Ash content (grams per 100g) 2<s:br/> Carbohydrate content (grams per 100g) 21.26<s:br/> Dietary Fiber content (grams per 100g) N/A<s:br/> Sugar content (grams per 100g) N/A<s:br/> </s:span>
  1. Surround the span tags with a RichText control.
... <s:RichText/> <s:span fontWeight="normal"> Water content (grams per 100g) 47.31<s:br/> Calorie content of Food (kcals per 3.5oz) 283<s:br/> Protein content (grams per 100g) 13.25<s:br/> Fat content (lipids) (grams per 100g) 16.18<s:br/> Ash content (grams per 100g) 2<s:br/> Carbohydrate content (grams per 100g) 21.26<s:br/> Dietary Fiber content (grams per 100g) N/A<s:br/> Sugar content (grams per 100g) N/A<s:br/> </s:span> </s:RichText> ...
  1. Save the file and open the main ex5_02_starter.mxml application file.
  2. Run the application to see a baseline for what the Cafeteria content looks like.
  3. Close the browser and return to Flash Builder and the Cafeteria.mxml file.
  4. Save the file.
  5. Run the application.
    You should see each food specification item on its own line (see Figure 2).
     
Run the application to see the text displayed.

Figure 2. Run the application to see the text displayed.

  1. Return to the Cafeteria component in Flash Builder.
  2. To the opening tag of the RichText control, assign the lineHeight property value to 20.
<s:RichText width="100%" lineHeight="20">
  1. Save the file and run the application.
  2. Note that there is now more space between each line of text (see Figure 3).
     
Use the lineHeight property to space the text.

Figure 3. Use the lineHeight property to space the text.

 
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).
Type Chicken Satay in the editor window.

Figure 4. Type Chicken Satay in the editor window.

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

Figure 5. Bold the text and change the font to Arial.

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

Figure 6. Click the Markup button.

  1. Compare the generated code with the code nested between the RichText tags in the Cafeteria component (see Figure 7).
The online generated code vs. the Flash Builder code.

Figure 7. The online generated code vs. the Flash Builder code.

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.
 
  1. From the online code preview window, select and copy the flow:span tags and its content (see Figure 8).
Copy the flow:span tags.

Figure 8. Copy the flow:span tags.

  1. Return to the Cafeteria.mxml file in Flash Builder.
  2. Paste the copied code between the opening RichText and span tags.
... <s:RichText> <flow:span fontFamily="Arial" fontWeight="bold">Chicken Satay</flow:span> <s:span fontWeight="normal"> ...
  1. Save the file.
    You should see an error occur.
     
  2. Open the Problems view and expand the Errors directory (see Figure 9).
Open the Problems view to see the error report.

Figure 9. Open the Problems view to see the error report.

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.
 
  1. Change the flow namespace to an s to map the span element to the Spark namespace.
<s:span fontFamily="Arial" fontWeight="bold">Chicken Satay</s:span>
  1. Add a line break tag after the closing span tag.
<s:span fontFamily="Arial" fontWeight="bold">Chicken Satay</s:span><s:br/>
  1. Save the file and run the application.
    You should see the Chicken Satay text displayed (see Figure 10).
     
Run the application to see the Chicken Satay text.

Figure 10. Run the application to see the Chicken Satay text.

 
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.
<s:TextArea> <s:span fontWeight="bold">COMPANY PICNIC ... <s:span fontWeight="bold">FAMILY DAY AT THE BALL PARK ... </s:TextArea>
  1. To the TextArea control, assign the following property values:
<s:TextArea color="#0B85B7" height="100%" width="100%" contentBackgroundColor="#FCFCE0">
  1. 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.
     
Run the application to see the text can be edited and to see the spacing between title and content text.

Figure 11. Run the application to see the text can be edited and to see the spacing between title and content text.

  1. Return to Flash Builder.
  2. In the MonthlyEvents component, to the TextArea control, assign the editable property value to false.
<s:TextArea color="#0B85B7" height="100%" width="100%" contentBackgroundColor="#FCFCE0" editable="false">
  1. Between the TextArea tags, note that the span tags containing the paragraph content are preceded by paragraph (p) tags (see Figure 12).
Notice the paragraph tags.

Figure 12. Notice the paragraph tags.

  1. To the TextArea control, assign the paragraphSpaceBefore property value to 4.
    The paragraphSpaceBefore property adds the defined amount of pixels before any paragraph tag.
     
<s:TextArea color="#0B85B7" height="100%" width="100%" contentBackgroundColor="#FCFCE0" editable="false" paragraphSpaceBefore="4">
  1. Save the file and run the application.
  2. 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).
     
Note the space between the text and the

Figure 13. Note the space between the text and the

  1. Return to the MonthlyEvents component in Flash Builder.
  2. To the TextArea block, assign the paddingTop, paddingRight, paddingBottom, and paddingLeft property values to 15.
paragraphSpaceBefore="4"> <s:TextArea color="#0B85B7" height="100%" width="100%" contentBackgroundColor="#FCFCE0" paragraphSpaceBefore="4" paddingBottom="15" paddingTop="15" paddingLeft="15" paddingRight="15"> ...
  1. 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).
     
Note the space that is now between the top, bottom, left, and right of the text in the Monthly Events panel.

Figure 14. Note the space that is now between the top, bottom, left, and right of the text in the Monthly Events panel.

 
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.
<s:HGroup> <s:RichText width="100%" lineHeight="20"> ... </s:RichText> </s:HGroup>
  1. To the HGroup container, assign the verticalAlign property value to top and the width property value to 100%.
<s:HGroup verticalAlign="top" width="100%"> ...
  1. Between the closing tag of the RichText control and the closing tag of the HGroup container, create a Label control.
</s:RichText> <s:Label/> </s:HGroup>
  1. 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.
<s:Label text="Calorie Information" fontWeight="bold" rotation="270"/>
  1. 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).
     
See the vertical text is on the right side of the container.

Figure 15. See the vertical text is on the right side of the container.

  1. Return to Flash Builder.
  2. 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.
     
<s:HGroup> <s:Label text="Calorie Information" fontWeight="bold" rotation="270"/> <s:RichText textAlign="left" height="222" width="100%" paddingTop="20" lineHeight="20"> ...
  1. 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.
     
See the vertical text is now on the left of the food content information.

Figure 16. See the vertical text is now on the left of the food content information.

  1. Return to the Cafeteria.mxml file in Flash Builder.
  2. Between the Image control and the HGroup container, create a Spark Label control.
<mx:Image source="assets/app_chixSatay.jpg"/> <s:Label/> <s:HGroup verticalAlign="top" width="100%">
  1. To the Label control, assign the text property value to Chicken Satay and the fontWeight property value to bold.
<s:Label text="Chicken Satay" fontWeight="bold"/>
  1. From within the RichText tags, remove the span tags that contain the Chicken Satay text.
  2. 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.
<s:RichText width="100%" lineHeight="20"> <s:span fontStyle="normal">Water content (grams per 100g)</s:span>: 47.31<s:br/> <s:span>Calorie content of Food (kcals per 3.5oz)</s:span>: 283<s:br/> <s:span>Protein content (grams per 100g)</s:span>: 13.25<s:br/> <s:span>Fat content (lipids) (grams per 100g)</s:span>: 16.18<s:br/> <s:span>Ash content (grams per 100g)</s:span>: 2<s:br/> <s:span>Carbohydrate content (grams per 100g)</s:span>: 21.26<s:br/> <s:span>Dietary Fiber content (grams per 100g)</s:span>: N/A<s:br/> <s:span>Sugar content (grams per 100g)</s:span>: N/A<s:br/> </s:RichText>
  1. Assign each span tag the fontStyle property value of italic.
<s:RichText width="100%" lineHeight="20"> <s:span fontStyle="italic">Water content (grams per 100g)</s:span>: 47.31<s:br/> <s:span fontStyle="italic">Calorie content of Food (kcals per 3.5oz)</s:span>: 283<s:br/> <s:span fontStyle="italic">Protein content (grams per 100g)</s:span>: 13.25<s:br/> <s:span fontStyle="italic">Fat content (lipids) (grams per 100g)</s:span>: 16.18<s:br/> <s:span fontStyle="italic">Ash content (grams per 100g)</s:span>: 2<s:br/> <s:span fontStyle="italic">Carbohydrate content (grams per 100g)</s:span>: 21.26<s:br/> <s:span fontStyle="italic">Dietary Fiber content (grams per 100g)</s:span>: N/A<s:br/> <s:span fontStyle="italic">Sugar content (grams per 100g)</s:span>: N/A<s:br/> </s:RichText>
  1. 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).
     
See the text within the span tags is italic, the amounts are not and the Chicken Satay label is now centered above the food content information

Figure 17. See the text within the span tags is italic, the amounts are not and the Chicken Satay label is now centered above the food content information

  1. Return to Flash Builder and Cafeteria.mxml.
  2. Locate the HGroup container and add a height property set to 200.
  3. Save the file and run the application.
    You should see that the Panel submit buttons are aligned (see Figure 18).
     
See that the Panel buttons are aligned.

Figure 18. See that the Panel buttons are aligned.

 
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.