by Trilemetry
trilemetry_bio
Trilemetry, Inc.

Table of contents

Created

24 May 2011

- Requirements
Prerequisite knowledge Required products Sample files
Exercise 1.1: Setting up Flash Builder and your project files
 
 Flash Builder 4.7 Premium (Download trial)
ex5_01_starter.zip
ex5_01_solution.zip
User level    
Beginning    

 

Requirements

Prerequisite knowledge

User level

Beginning

In this exercise you will use Flex text controls to manipulate the application as shown in Figure 1.
 
Preview the application.
Figure 1. Preview the application.
In this exercise, you will learn how to:
 

 
Use the Label control

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.
     
Run the application.
Figure 2. Run the application.
  1. Return to Flash Builder and switch to Design mode.
  2. From the Components view Layout branch, drag an HGroup container and place it above the Employee of the Month panel.
  3. 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.
  4. In the Layout segment of the Properties view, set the Gap property to a value of 15.
  5. From the Components view Controls branch, drag an Image control and place it inside the HGroup container.
  6. 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.
     
  7. With the logo image selected, switch to Source mode.
  8. Change the Image control to a BitmapImage control.
    Note that the BitmapImage control is used here because you will not be skinning the logo.
     

     
  9. Switch to Design mode.
  10. 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.
Add a Label control to the application.
Figure 3. Add a Label control to the application.
  1. 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).
Bold and resize the text.
Figure 4. Bold and resize the text.
  1. 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).
Add a Label control to the application.
Figure 5. Add a Label control to the application.
  1. With the new Label control selected, use the Properties view to change the Text value to Portal and the size to 38.
  2. 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.
 
Run the application; note that the text is not aligned with the bottom of the logo image.
Figure 6.Run the application; note that the text is not aligned with the bottom of the logo image.

 
Align text within controls

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.
<s:Label fontWeight="bold" fontSize="38" text="Employee" alignmentBaseline="ideographicBottom" />
  1. Locate the Portal Label control and assign the alignmentBaseline property value to ideographicBottom.
<s:Label fontSize="38" text="Portal" alignmentBaseline="ideographicBottom" />
  1. 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).
     
Run the application and see the bottom of the title text is now aligned with the bottom of the logo image.
Figure 7. Run the application and see the bottom of the title text is now aligned with the bottom of the logo image.

 
Display rich text

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.
<s:RichText id="calorieContent" width="220"> <s:span> Water content... Calorie content... Protein content... ... </s:span>
  1. 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.
 

 
Use the online Text Layout Editor

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.
Paste the text from the RichText control into the Text Layout Editor.
Figure 8. Paste the text from the RichText control into the Text Layout Editor.
  1. Select the text and then, using the Character menu, change the Font to Arial and set the Type to Italic (see Figure 9).
The Text Layout Editor's Character menu.
Figure 9. The Text Layout Editor's Character menu.
  1. Click the Markup button (see Figure 10).
Select the Markup button in the Text Layout Editor window.
Figure 10. Select the Markup button in the Text Layout Editor window.
  1. Compare the generated code with the code nested within the RichText tags in the Cafeteria component (see Figure 11).
Compare the code generated from the Text Layout Editor with the code from the Cafeteria component.
Figure 11. Compare the code generated from the Text Layout Editor with the code from the Cafeteria component.
    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.
     
  1. From the online code preview window, select and copy the <flow:p> tags and its contents (see Figure 12).
Copy the <flow:p> tags and all the content within them.
Figure 12. Copy the tags and all the content within them.
  1. Return to the Cafeteria.mxml file in Flash Builder.
  2. Delete the existing span tags with the Calorie text.
  3. Paste the copied code after the opening RichText tag.
<s:RichText id="calorieContent" width="220"> <flow:p><flow:span fontSize="12" fontFamily="Arial" fontStyle="italic">Water content (grams per 100g): 47.31</flow:span></flow:p> <flow:p><flow:span fontSize="12" fontFamily="Arial" fontStyle="italic">Calorie content of Food (kcals per 3.5oz): 283</flow:span></flow:p> ... </s:RichText>
  1. Save the file.
    You should see an error occur.
     
  2. Open the Problems view and expand the Errors directory (see Figure 13).
Look at the error in the Problems view.
Figure 13. Look at the error in the Problems view.
    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.
     
  1. Select all the lines with flow tags and calorie text.
  2. 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.
  3. Click Replace All.
  4. Click Close.
    You should see that all the instances of flow are replaced with s.
     
  5. Save the file and run the application.
    You should see that the calorieContent text displayed has been formatted (see Figure 14).
     
The calorieContent text has been formatted.
Figure 14. The calorieContent text has been formatted.

 
Use text layout properties

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.
     
The Monthly Events Panel does not have a scroll bar and the text is editable.
Figure 15. The Monthly Events Panel does not have a scroll bar and the text is editable.
  1. Return to the MonthlyEvents.mxml file in Flash Builder.
  2. Surround the RichEditableText tags with the Scroller control tag.
  3. To the Scroller tag, set the width and height to 100%.
  4. From the RichEditableText control, remove the width and height properties.
  5. 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).
     
The Monthly Event panel has a scroll bar on the right.
Figure 16. The Monthly Event panel has a scroll bar on the right.
  1. Return to the MonthlyEvents component in Flash Builder.
  2. To the RichEditableText control, assign the editable property value to false.
  3. Between the RichEditableText tags, add an opening and closing paragraph tag before the text.
<s:RichEditableText editable="false"> <s:p></s:p> Remember that our annual company picnic... </s:RichEditableText>
  1. To the <s:p> tag, set the fontWeight property to bold.
  2. Between the paragraph tags, type COMPANY PICNIC.
<s:p fontWeight="bold">COMPANY PICNIC</s:p>
  1. 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.
  2. Copy the paragraph tag that contains the text COMPANY PICNIC and paste it before the paragraph tag for the second paragraph.
  3. Change the text in the paragraph tag from COMPANY PICNIC to FAMILY DAY AT THE BALL PARK.
<s:RichEditableText editable="false"> <s:p fontWeight="bold">COMPANY PICNIC</s:p> <s:p>Remember that our annual company picnic is this ...</s:p> <s:p>There are lots of different activities including, ...</s:p> <s:p>As usual, due to the great response from our previous ....</s:p> <s:p>This year's raffle is filled with wonderful prizes ...</s:p> <s:p fontWeight="bold">FAMILY DAY AT THE BALL PARK</s:p> <s:p>Our monthly Sales and Leadership meeting is open to ....</s:p> <s:p>We will kick off the second part of the meeting...</s:p> </s:RichEditableText>
  1. Save the file and run the application.
  2. 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).
     
Note the lack of vertical spacing between the title text and the content text in the Monthly Event panel.
Figure 17. Note the lack of vertical spacing between the title text and the content text in the Monthly Event panel.
  1. Return to the MonthlyEvents.mxml file.
  2. To the RichEditableText control, assign the paragraphSpaceBefore property value to 10.
    The paragraphSpaceBefore property adds the defined amount of pixels before paragraph tag.
     
  3. 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.
     
There is more spacing between the paragraph title and content.
Figure 18. There is more spacing between the paragraph title and content.
  1. Return to the MonthlyEvents.mxml file in Flash Builder.
  2. Copy the padding properties from the VerticalLayout tag under the Properties of the parent comment and paste them into the opening RichEditableText control tag.
<s:RichEditableText editable="false" paragraphSpaceBefore="10" paddingTop="15" paddingLeft="15" paddingRight="15" paddingBottom="15">
  1. In the VerticalLayout tag, delete all of the padding properties except for paddingBottom.
  2. 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).
 
The scroll bar is flush with the right of the Monthly Events panel.
Figure 19. The scroll bar is flush with the right of the Monthly Events panel.

 
Display vertical text

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.
     
Click here and insert your figure caption.
Figure 20. Click here and insert your figure caption.
  1. Return to the Cafeteria.mxml file in Flash Builder.
  2. Locate the VerticalLayout class tag within the layout object tags.
  3. To the VerticalLayout tag, change the paddingLeft and paddingRight properties to have value of 5.
  4. Assign the horizontalAlign property to the VerticalLayout class with a value of center.
  5. 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).
 
The image, title, and text are centered in the Cafeteria Special panel.
Figure 21. The image, title, and text are centered in the Cafeteria Special panel.
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.
 
Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License+Adobe Commercial Rights
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.