Quick Start: Using Styles

Overview

  1. Use the Style Sheets section of the Project Overview to create a new style sheet.
  2. Provide a class name for the style sheet.
  3. Add a style, provide its name, and select the type of component to which it applies.
  4. Set values for the visual elements of the components to which the style will be applied.
  5. Open the form component in the Design Context of the Form Editor.
  6. Select each stylized component in turn and set its Style psuedo-property. Use the Select Style window to find the appropriate style to be applied.

Video

View the short video walkthrough (1.3M, 2:58) to observe the techniques described in this section.

Details

Using the EchoStudio Project Overview, create a new Style by finding the Style Sheets section and clicking the New Style Sheet... button. (Figure 1) EchoStudio presents you with the New Echo Style Sheet window. (Figure 2) Enter a name of MainStyles and click Finish.

EchoStudio opens the new style in the Style Sheet Editor. (Figure 3) Find the New Style button in the upper left of the editor and click it. This opens the New Style window. (Figure 4) Select the Label component in the left column and notice that EchoStudio provides a default Style ID on the right. Click OK.

Style IDs
A style's ID (name) should describe the role of the components to which it will be applied, such as ERRMSG_LABEL_STYLE or TOOLBAR_BUTTON_STYLE.

EchoStudio has added an empty style in the style sheet. (Figure 5) This style has properties that impact the visual representation of Labels. We will use this style to control the appearance of the "Username:" and "Password:" prompts. The properties of a style can be changed in the same manner as the properties of a component.

With the LABEL_STYLE style you just created, set the font property to San-Serif 12pt and set the foreground property to #808080 (dark gray).

Using the toolbox on the left, create a new style for TextComponents. (Figure 6) The toolbox only displays the core Echo components. By using the toolbox, we can skip the New Style window and EchoStudio will use a default Style ID. The toolbox used in the Style Editor includes abstract components not found in the Design Context's toolbox. The abstract components have an a character in their icon. The abstract components can be applied to any component that extends the abstract component. For example, a style for TextComponents can be applied to TextFields and PasswordFields. For our new TextComponent style, set the font property to Monospace 10pt.

Finally, create another style for Labels. This style will be used for the error message of our LoginScreen. The style should be named ERRMSG_LABEL_STYLE. If you use the toolbox to create the style, you can rename the style by click on the down arrow to the right of the style's name. (Figure 7) Once you rename it, EchoStudio will re-sort your styles to keep them in alphabetical order. If your style was collapsed when it was sorted, you can expand it using the plus ('+') icon to the left of the name. (Figure 8) Set the font property to San-Serif [B] 14pt and set the foreground property to red.

Save your style sheet and return to the Project Overview. Notice that your style is now listed in the Style Sheets section of the overview. (Figure 9)

Open the LoginScreen and select the PasswordField component. Set its Style pseudo-property to MainStyles' TEXTCOMPONENT_STYLE style. You will be presented with a Select Style window to browse for the appropriate style. (Figure 10) The window only displays styles that can be applied to the currently selected component. When you have selected the style, the preview will update to reflect the component's new appearance.

Apply the same style to the TextField component. Then apply the LABEL_STYLE style to the "Username:" and "Password:" labels. Next, select the error message Label and clear its font and foreground properties. To clear a property, right-click on the property's name to open the context menu and choose Clear Value. (Figure 11) Then set the Label's style to ERRMSG_LABEL_STYLE.

Styles and Component Properties
Properties set directly on a component override the style.

Launch your application to view the changes. You should see a screen like (Figure 12) when you enter an invalid user name or password.



< Internationalization

Figure 1
Figure 1

Figure 2
Figure 2

Figure 3
Figure 3

Figure 4
Figure 4

Figure 5
Figure 5

Figure 6
Figure 6

Figure 7
Figure 7

Figure 8
Figure 8

Figure 9
Figure 9

Figure 10
Figure 10

Figure 11
Figure 11

Figure 12
Figure 12
© 2002-2009 NextApp, Inc. All rights reserved.