Exploring Rich Island development with Flex Builder – Part 2: Laying out and styling visual elements

Additional Requirements

Sample files:

Note: The ZIP files are Flex Builder project archives. The starter archive is the completed Part 1 project archive. The solution archive contains the completed code and assets associated with this tutorial. The latter is provided for you to compare against your own completed code.

Welcome to Part 2 of this tutorial series. In this part, you will learn how to use containers to lay out visual elements and style them using the component styles and CSS. You also learn how to embed fonts and an image. This will be the visual foundation of the application.

Note: Parts 1 through 6 focus on teaching Flex development to SAP developers. Part 7 teaches Flex developers how to create a Web Dynpro application. Parts 8 and 9 show both SAP and Flex developers how to integrate the Flex application as a Rich Island into the Web Dynpro application.

In Part 1 you watched a video that explains the functionality of the final Web Dynpro application that you build in this tutorial series. In this part, you will lay out all of the elements of the Wagon Assembly Line application (see Figure 1).

Note: In Parts 8 and 9, when you learn how to integrate the Rich Island into the Web Dynpro application, the Flex DataGrid component pictured at the top of Figure 1 will be replaced with the Web Dynpro table UI element.

Figure 2 outlines the Flex framework controls and containers that you will use in this application. Note that containers (such as Application, VBox, or Canvas) hold other containers or controls and are used to lay out visual elements in an application.

You will learn how to style these controls and containers, which are collectively called components. Specifically, you will find that the Canvas container is useful because it not only acts as a container for layout, but can also be styled for use as a visual element, such as, for example, the blue clock or green inventory bins.

Importing a Flex Builder project

Note: If you wish to continue using the ShopFloorBins project from Part 1, skip the following steps. Otherwise, use the following steps to import the starting project archive for Part 2.

1. In Flex Builder, right-click on the ShopFloorBins folder and select Delete.
2. Click Yes.

   Note: In the dialog box, you may select to delete the project contents or keep them. If you keep the contents the new project will overwrite the contents.

3. Select File > Import > Flex Project.
4. Select Archive File and click Browse to navigate to where you downloaded sap_ri_pt2_starter.zip on your computer.
5. Click Finish.

Creating the application layout

You will create the visual layout of the application using container controls.

1. In the ShopFloorBins project folder, open ShopFloorBins.mxml from the src folder and locate the layout property in the opening Application tag.
2. Change the layout property to vertical if it is not.

   A value of vertical means all the visual components you add between the Application container tags will display vertically.

3. Inside the Application tag block, add a DataGrid control without any properties.

4. After the DataGrid control, add a Canvas container component code block.

5. To the Canvas container, add an id property with a value of assemblyLineBackground, a width property with a value of 770 and a height property with a value of 500.

   Note: A Flex framework container lays out other components, which could be other containers or controls. The Canvas container, which is just one of many Flex containers, lays out its children using absolute positioning. Absolute positioning specifies x and y layout properties relative to the upper left corner of the container, which is the 0, 0 position. The id property is the instance name for the component.

6. Save the file and run it.

   You should only see the empty DataGrid control in the application. Canvas containers are not visible by default.

7. Add the property backgroundColor with a gray color value (#F3F3F3) to the opening Canvas tag.

8. Save the file and run it.

   Your application should appear as shown in Figure 3.

9. Locate the Application tag and change the layout property value to horizontal.

10. Save the file and run it.

    You will see the DataGrid control and the Canvas container aligned horizontally.

11. Change the Application tag layout property value to absolute.

12. Save the file and run it.

    Like a Canvas container, the Application container can be set to use absolute positioning. Because no x and y properties are specified for either the Canvas or DataGrid components, they default to the 0, 0 position of the container, which is, in this case, the Application container. When two components overlap in absolute positioning, the component that is further down in the code will be positioned above. Since the Canvas container is larger than the DataGrid control, you only see the Canvas container.

13. Change the Application tag layout property value back to vertical.

Creating the clock layout

In this section, you create the clock layout that will show the time until the assembly line stops. You will use two Canvas containers in this display element because later in this tutorial you will apply styles to them for background color and rounded corners. Figure 4 shows the Flex components that will be used for the clock display.

1. Between the assemblyLineBackground Canvas container tags, create another Canvas container tag set with the following properties and values:

Note: The horizontalCenter property aligns the clockBase container to the horizontal center of its parent container, the assemblyLineBackground container.

2. Between the clockBase Canvas tags, create a Label control and add the following properties and values to the Label control:

Note: The textAlign property will center the text within the Label control.

3. After the clockTitle Label control, create a Canvas container tag set and add the following properties and values to the Canvas container:

4. Between the timeLeftBackground Canvas tags, create a Label control and add the following properties and values to the Label control:

Note: The verticalCenter property aligns the Label control to the vertical center of the parent Canvas container.

5. Save the file and run it.

Your application should appear as shown in Figure 5.

You can see that the timeLeft Label control text is not visible against the background of the timeLeftBackground Canvas container. This will change once you apply the styles later in this tutorial.

Creating the bin layout

In this section, you create the colored bins that will display available inventory for each wagon part. For each bin you will use a VBox container that encompasses a Label control and a Canvas container. The Canvas container, in turn, holds a TextInput control and is the element that has the green background color. Figure 6 shows the Flex components that will be used for the bin display.

1. After the closing clockBase Canvas tag, but still inside the assemblyLineBackground Canvas container tags, create a VBox container tag set and add a x property with a value of 47 and a y property with a value of 178.
2. Within the opening VBox container tag, add the backgroundColor property with a value of #0066FF.

3. Between the VBox tag set, add a Label control with the id property set to binTitle0. Flex is a zero-indexed programming language, so you will start numbering at zero. This is merely a convention and is not required.
4. Also add the text property with a value of Bin, a textAlign property with a value of center and a width property with a value of 100.

   Note: The text value is what will be displayed to the user.

5. After the binTitle0 Label control, add a Canvas container tag set and add the following properties and values to the Canvas tag:

6. Between the binCanvas0 Canvas tags, add a TextInput control and add the following properties and values to the TextInput tag:

7. Save the file and run it.

   Your application should appear as shown in Figure 7.

Add additional bins

In this section, you will create the other four bins needed for the wagon inventory.

1. Copy the entire VBox tag block and paste it four times after the first VBox tag set, but still between the assemblyLineBackground Canvas tags.
2. For the second VBox tag block, change its x property to 186.
3. Locate the id property of the new Label control and change its value to binTitle1.
4. Locate the id property of the new Canvas container and change its value to binCanvas1.
5. Locate the id property of the new TextInput control and change its value to binData1.

6. For the third VBox tag block, change the x property value to 331 and increment the id property values to binTitle2, binCanvas2 and binData2.
7. To the fourth VBox container block, change the x property value to 471 and change the id property values to binTitle3, binCanvas3 and binData3.
8. To the fifth new VBox container block, change the x property value to 614 and change the id property values to binTitle4, binCanvas4 and binData4.
9. Save the file and run it.

   Your application should appear as shown in Figure 8.

In this section you will use the component styles to change the display of the element.

1. Locate the opening Application tag and add the backgroundGradientColors property with a value of [0xFFFFFF, 0xFFFFFF]. By default, Flex applications have a gray gradient background. With this code you are setting the application background color to a solid white background.
2. Save the file and run it.

   Your application should appear as shown in Figure 9. The main application background is white but the Canvas container for the assembly line is gray.

Note: The timeLeft Label control text is not visible since the text color is the same as the background color.

3. Locate the assemblyLineBackground Canvas container and add the following styles and values to the Canvas tag:

4. Save the file and run it.

   Your application should appear as shown in Figure 10.

The next step corrects the text background in the clock.

5. Locate the clockTitle Label and add the fontSize style with a value of 12, the fontWeight style with a value of bold and color style with a value of #FFFFFF.

6. Locate the timeLeftBackground Canvas container and add the following styles and values to the Canvas tag:

7. Locate the timeLeft Label control and add the color property with a value of #FFFF00.

8. Locate the binData0 TextInput control and add the fontSize style with a value of 18.
9. Add the fontSize style to binData1, binData2, binData3 and binData4.
10. Save the file and run it.

    Your application should appear as shown in Figure 11.

In this section, you create a cascading style sheet (CSS) file and apply it to style the application further. You also use embedded fonts.

Create the CSS file

1. Right-click on the assets folder in the src folder and select New > CSS File.
2. Name the file ShopFloor.
3. Click Finish.

   The file will be opened in Flex Builder Source mode.

4. In the ShopFloor.css file, create a class selector named .binStyle using the curly brace notation.
5. Between the braces, add the following attributes and values:

   Note: In a CSS file, you can use either the camel case or dash format for CSS attribute names.

6. Create another class selector named .clockStyle using curly brace syntax.
7. Add the following attributes and values:

8. Save the file and return to ShopFloorBins.mxml.
9. Create a Style tag after the beginning Application tag.
10. Add a source property with a value of assets/ShopFloor.css.

11. Locate the opening VBox container tags and delete the backgroundColor property. (You'll have to delete five isntances of this property).
12. Locate the binCanvas0 Canvas and add a styleName property with the value of binStyle.

13. Add the styleName property and value to binCanvas1, binCanvas2, binCanvas3 and binCanvas4.
14. Locate the clockBase Canvas container and delete the backgroundColor property.
15. Add the styleName property with a value of .clockStyle.

16. Save the file and run it.

    Your application should appear as shown in Figure 12.

Creating and using embedded fonts

In this section, you will embed three fonts. Fonts are normally embedded when there is a good chance the font will not be on the end user's computer. Fonts are copyrighted so you will need to purchase a license in order to use most fonts.

1. Return to ShopFloor.css.
2. After the .clockStyle selector, embed a font using the @font-face syntax and curly braces.
3. Within the curly braces add an attribute named src with a value of local("Arial"), the fontFamily attribute with a value of fontArialBold and the font-weight attribute with a value of bold.

4. Embed another font using @font-face syntax.
5. Add the src attribute with a value of local("Arial")and the fontFamily attribute with a value of fontArialRegular.

6. Embed another font using @font-face syntax.
7. Add the src attribute with a value of local("Times New Roman")and the fontFamily attribute with a value of fontTimes.

8. After the embedded font code, create a class selector named .binInputFont using curly brace syntax.
9. Add the following attributes and values:

10. Create another class selector named .titleFont using curly brace syntax.
11. Add the following attributes and values:

12. Create another class selector named .clockFont using curly brace syntax.
13. Add the following attributes and values:

14. Save the file.
15. Return to ShopFloorBins.mxml.
16. Locate the binTitle0 Label control.
17. Add the styleName property with a value of titleFont.
18. Add the same styleName property and value to binTitle1, binTitle2, binTitle3 and binTitle4.
19. Locate the binData0 TextInput control.
20. Add the styleName property with a value of binInputFont.
21. Add the styleName property and value to binData1, binData2, binData3 and binData4.
22. Locate the clockTitle Label control.
23. Add the styleName property with the value titleFont.
24. Locate the timeLeft Label control and add the styleName property with a value of clockFont.
25. Save the file and run it.

    Your application should appear as shown in Figure 13.

In this section, you use the @Embed syntax within the Image control to embed an image. By embedding, the image is compiled into the SWF file and allows faster access than if it is loaded at runtime.

1. Before the closing assemblyLineBackground Canvas container tag, add an Image control with the following properties and values:

2. After the Image tag, create a Label control with the following properties and values.

3. Save the file and run it.

   Your application should appear as shown in Figure 14.

Where to go from here

In this tutorial you created the layout using the Application, VBox and Canvas containers and some additional controls. You styled the application with a combination of component styles and CSS. You used embedded fonts and an image to start the visual foundation of the application. If you are interested in learning more about these topics, visit the following links:

• Using the DataGrid control and binding to data
• Using pre-built Flex controls (4:34)
• Working with containers (12:12)
• Applying styles to MXML components (29:06)
• Embedding fonts (28:59)
• Flex 3 Style Explorer

In Part 3, SAP developers will create data for this Flex application and bind it to the controls.

Exploring Rich Island development with Flex Builder

For your reference, here are all the parts in this series:

• SAP developers: Build an interactive Flex application from scratch
  • Part 1: Getting started
  • Part 2: Laying out and styling visual elements
  • Part 3: Handling data and binding it to controls
  • Part 4: Creating a custom component
  • Part 5: Animating with ActionScript
  • Part 6: Synchronizing data in components
• Flex developers: Create a Web Dynpro application
  • Part 7: Creating an SAP application
• Flex and SAP developers: Create a working Rich Island
  • Part 8: Creating a Rich Island and handling data
  • Part 9: Communicating between a Rich Island and a Web Dynpro application