Quick Start: Using Styles
Overview
- Use the Style Sheets section of the Project Overview to create a new style sheet.
- Provide a resource name for the style sheet.
- Add a style, provide its name, and select the type of component to which it applies.
- Set values for the visual elements of the components to which the style will be applied.
- Open the form component in the Design Context of the Form Editor.
- Select each stylized component in turn and set its Style property. Use the Select Style window to find the appropriate style to be applied.
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 Default 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 Name on the right. Replace the provided style name with the name PromptLabel. Click OK.
Style Names
A style's name should describe the role of the components to which it will be applied, such as ErrorMessageLabel or ToolbarButton.
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 PromptLabel style you just created, set the font property to San-Serif 12pt and set the foreground property to #808080 (dark gray).
Using the toolbox at the top of the screen, create a new style for TextComponents. The style will be assigned the default identifier "Default". (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 Name. 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 ErrorMessageLabel. If you use the toolbox to create the style, you can rename the style by clicking 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 form. By default, the Form Editor will use no stylesheet to render its preview of a form. A StyleSheet may be selected using the Style Selection Menu (Figure 10) Open the Style Selection Menu and select Choose.... The Select StyleSheet window will open. Select the Default StyleSheet.
Open the LoginScreen and select the PasswordField component. Set its Style pseudo-property to our Default stylesheet's Default TextComponent style. You will be presented with a Select Style window to browse for the appropriate style. 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 PromptLabel 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. Then set the Label's style to ErrorMessageLabel.
Styles and Component Properties
Properties set directly on a component override the style.
You will now need to modify your application such that the StyleSheet will be initially used on startup. Update your application to include the highlighted code:
package loginscreendemo;
import nextapp.echo2.app.ApplicationInstance;
import nextapp.echo2.app.StyleSheet;
import nextapp.echo2.app.Window;
import nextapp.echo2.app.componentxml.ComponentXmlException;
import nextapp.echo2.app.componentxml.StyleSheetLoader;
/**
* Application instance implementation.
*/
public class Application extends ApplicationInstance {
public static final StyleSheet DEFAULT_STYLE_SHEET;
static {
try {
DEFAULT_STYLE_SHEET
= StyleSheetLoader.load("/loginscreendemo/Default.stylesheet",
Thread.currentThread().getContextClassLoader());
} catch (ComponentXmlException ex) {
throw new RuntimeException(ex);
}
}
/**
* Main window of user interface.
*/
private Window mainWindow;
/**
* @see nextapp.echo2.app.ApplicationInstance#init()
*/
public Window init() {
setStyleSheet(DEFAULT_STYLE_SHEET);
mainWindow = new Window();
mainWindow.setContent(new LoginScreen());
return mainWindow;
}
}
Launch your application to view the changes.
|
