- 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) | |
User level | ||
Beginning |
Requirements
Prerequisite knowledge
Exercise 1.1: Setting up Flash Builder and your project files
User level
Beginning
In this exercise you will use Flex text controls to manipulate the application as shown in Figure 1.
Figure 1. Preview the application.
In this exercise, you will learn how to:
In this section, you use the
Label
control to add the title text to the sample application.- Download the ex5_01_starter.zip file if you haven't already and extract the file ex5_01_starter.fxp to your computer.
- Open Flash Builder.
- Import the ex5_01_starter.fxp file.
- Open the ex5_01_starter.mxml file.
- Run the application.The Employee Portal application appears as shown in Figure 2.
Figure 2. Run the application.
- Return to Flash Builder and switch to Design mode.
- From the Components view Layout branch, drag an HGroup container and place it above the Employee of the Month panel.
- 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.
- In the Layout segment of the Properties view, set the Gap property to a value of 15.
- From the Components view Controls branch, drag an Image control and place it inside the HGroup container.
- 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.
- With the logo image selected, switch to Source mode.
- Change the
Image
control to aBitmapImage
control.Note that theBitmapImage
control is used here because you will not be skinning the logo.
- Switch to Design mode.
- 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.
Figure 3. Add a Label control to the application.
- With the Label control selected, use the Properties view to assign the
text
property a value of Employee, afontWeight
value of bold and afontSize
value of 38 (see Figure 4).
Figure 4. Bold and resize the text.
- 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).
Figure 5. Add a Label control to the application.
- With the new Label control selected, use the Properties view to change the Text value to Portal and the size to 38.
- 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.
Figure 6.Run the application; note that the text is not aligned with the bottom of the logo image.
In this section, you will align text within the Label control.
- Return to Flash Builder.
- Select the Employee Label control and switch to Source mode.
- To the
Label
control, assign thealignmentBaseline
property value toideographicBottom
.
<s:Label
fontWeight="bold" fontSize="38"
text="Employee"
alignmentBaseline="ideographicBottom" />
- Locate the Portal
Label
control and assign thealignmentBaseline
property value toideographicBottom
.
<s:Label
fontSize="38"
text="Portal"
alignmentBaseline="ideographicBottom" />
- 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).
Figure 7. Run the application and see the bottom of the title text is now aligned with the bottom of the logo image.
In this section, you will use a
RichText
control to format the Cafeteria Special Panel container's content.- Return to Flash Builder.
- Within the Package Explorer view, from the components package, open the Cafeteria.mxml file.
- Locate the
calorieContent Label
control.The three text primitives provided by the Spark architecture are theLabel
,RichText
, andRichEditableText
controls. TheLabel
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.TheRichText
andRichEditableText
controls support rich text with complex layout by using the Text Layout Framework (TLF) in Flash Player.TheRichText
control does not support scrolling, selection, or editing, while theRichEditableText
control does support these features. This makes theRichEditableText
control the slowest and heaviest of the primitives, but also offers the most of what TLF can do. - Change the
Label
control tags toRichText
control tags. You will use theRichText
control here because there is no need for a scroll bar. - Within the
RichText
control tags, surround the text with aspan
control.
<s:RichText id="calorieContent"
width="220">
<s:span>
Water content...
Calorie content...
Protein content...
...
</s:span>
- 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.
- Open a browser and navigate to the following URL:http://labs.adobe.com/technologies/textlayout/demos/
- Copy the text between the
span
tags in theRichText
control and paste it in the Text Layout Editor window (see Figure 8). Make sure each line of text is left aligned.
Figure 8. Paste the text from the RichText control into the Text Layout Editor.
- Select the text and then, using the Character menu, change the Font to Arial and set the Type to Italic (see Figure 9).
Figure 9. The Text Layout Editor's Character menu.
- Click the Markup button (see Figure 10).
Figure 10. Select the Markup button in the Text Layout Editor window.
- Compare the generated code with the code nested within the
RichText
tags in the Cafeteria component (see Figure 11).
Figure 11. Compare the code generated from the Text Layout Editor with the code from the Cafeteria component.
- From the online code preview window, select and copy the
<flow:p>
tags and its contents (see Figure 12).
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.Figure 12. Copy the tags and all the content within them.
- Return to the Cafeteria.mxml file in Flash Builder.
- Delete the existing
span
tags with the Calorie text. - 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>
- Save the file.You should see an error occur.
- Open the Problems view and expand the Errors directory (see Figure 13).
Figure 13. Look at the error in the Problems view.
- Select all the lines with
flow
tags and calorie text. - Use the Find/Replace window (CTRL+F) to find all the instances of
flow
and replace them with ans
for the Spark namespace. Set the Scope to Selected lines. - Click Replace All.
- Click Close.You should see that all the instances of
flow
are replaced withs
. - Save the file and run the application.You should see that the
calorieContent
text displayed has been formatted (see Figure 14).
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.Figure 14. The calorieContent text has been formatted.
In this section you will use multiple properties to configure the layout of the Monthly Events Panel container.
- Return to Flash Builder.
- From the Package Explorer view, open the MonthlyEvents.mxml file.
- Change the
Label
control around the text to aRichEditableText
control.You will use theRichEditableText
control here because it supports the use of a scroll bar. - In the
RichEditableText
control, set thewidth
to100%
. - 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.
Figure 15. The Monthly Events Panel does not have a scroll bar and the text is editable.
- Return to the MonthlyEvents.mxml file in Flash Builder.
- Surround the
RichEditableText
tags with theScroller
control tag. - To the
Scroller
tag, set thewidth
andheight
to100%
. - From the
RichEditableText
control, remove thewidth
andheight
properties. - 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).
Figure 16. The Monthly Event panel has a scroll bar on the right.
- Return to the MonthlyEvents component in Flash Builder.
- To the
RichEditableText
control, assign theeditable
property value tofalse
. - 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>
- To the
<s:p>
tag, set thefontWeight
property tobold
. - Between the paragraph tags, type COMPANY PICNIC.
<s:p fontWeight="bold">COMPANY PICNIC</s:p>
- 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.
- Copy the paragraph tag that contains the text COMPANY PICNIC and paste it before the paragraph tag for the second paragraph.
- 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>
- Save the file and run the application.
- Try and edit the text within the
RichEditableText
control.You should see that the text is no longer editable within theRichEditableText
control. Also note the lack of vertical spacing between the paragraph title text and the content text (see Figure 17).
Figure 17. Note the lack of vertical spacing between the title text and the content text in the Monthly Event panel.
- Return to the MonthlyEvents.mxml file.
- To the
RichEditableText
control, assign theparagraphSpaceBefore
property value to10
.TheparagraphSpaceBefore
property adds the defined amount of pixels before paragraph tag. - 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.
Figure 18. There is more spacing between the paragraph title and content.
- Return to the MonthlyEvents.mxml file in Flash Builder.
- Copy the padding properties from the
VerticalLayout
tag under theProperties of the parent
comment and paste them into the openingRichEditableText
control tag.
<s:RichEditableText editable="false"
paragraphSpaceBefore="10"
paddingTop="15" paddingLeft="15" paddingRight="15" paddingBottom="15">
- In the
VerticalLayout
tag, delete all of the padding properties except forpaddingBottom
. - 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).
Figure 19. The scroll bar is flush with the right of the Monthly Events panel.
In this section you will use vertical text as a label to the calorie information in the Cafeteria Special panel.
- Return to Flash Builder.
- Open the Cafeteria.mxml file.
- Surround the
Label
control for Calorie Information and theRichText
control and its contents with anHGroup
container. - To the
HGroup
container, assign thewidth
property a value of100%
. - To the
Label
control for Calorie Information, assign therotation
property value to270
. - 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.
Figure 20. Click here and insert your figure caption.
- Return to the Cafeteria.mxml file in Flash Builder.
- Locate the
VerticalLayout
class tag within thelayout
object tags. - To the
VerticalLayout
tag, change thepaddingLeft
andpaddingRight
properties to have value of5
. - Assign the
horizontalAlign
property to theVerticalLayout
class with a value ofcenter
. - 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).
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.
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.