Adding Styles to Components

January 2006 [Revision number: V2-1]

Copyright 2006 Sun Microsystems, Inc.

This tutorial explains how to use Sun Java Studio Creator integrated development environment (the IDE) to add styles to both a single component and several instances of the component. This tutorial also describes how to create a new style class and how to create and apply a new style sheet to your project. Contents - About Styles and the IDE - Opening a Sample Project - Applying a Style to a Single Component - Creating a New Style Rule to Apply to Selected Instances of a Component - Editing an Existing Style Rule to Change All Instances of a Component - Creating a New Style Sheet - Advanced Tips - Summary Example used in this tutorial Vehicle Incident Report Application provided in the samples directory of the IDE

About Styles and the IDE

The Java Studio Creator IDE includes several style rules that you can use to set the appearance of your web application. The IDE has a default Cascading Style Sheet (CSS) file that defines a set of common properties, such as color, font information, spacing, and layout. The CSS file assigns a precedence to each style rule, and when several style rules apply, the style rule with the greatest level of precedence is used. In the Java Studio Creator 2 IDE, the style rules follow these levels of precedence:
q

First level of precedence. Goes to in-line style. In the Java Studio Creator IDE, the in-line style applies to rules you add to a component's style property, which you can edit using the Style Editor (see Figure 1). When you use in-line style, you override both the default CSS file, stylesheet.css, and, in most cases, the default theme, defaulttheme.jar. Setting styles on a per-component basis is good if you want to make one component different from the rest of the components on the page. For example, you might want to make an Order button bigger than the rest of the buttons in the application. However, setting styles on a per-component basis is not recommended as a general practice. For example, to change the background-color of that Order button, you need not only to set the style property's background-color but also you need to set the background-image to null to override what has been set by the css_master.css .Btn2 class. See the section in this tutorial, Advanced Tips, for more information.

Second level of precedence. Goes to the default CSS file which the Java Studio Creator IDE adds to every project that you create, and the IDE also includes a link to the CSS file within every page that you add to a project. Using a CSS file enables you to write styles that apply to many components instead of just a single component. Then, when you change the style definition in one place, the style is immediately reflected on all of the same component types. The IDE has a CSS Editor that you can use to edit the CSS file and a Style Rule Editor (see Figure 2) that you can use to create a new style rule. The IDE includes a styleClass Property Editor (see Figure 3) that you can

use to add style classes to the styleClass property or to bind the styleClass property to a JavaBean that determines the style classes applied to the component at runtime.
q

Third level of precedence. Goes to the theme. The IDE applies a default theme to each project. A theme consists of images, JavaScript, CSS files, and messages that are used by components to define the look and feel of the components. You cannot edit a theme, but if you know a theme rule that applies to a component, you can override it by creating a rule with the same name in the default CSS file. The section of this tutorial Editing an Existing Style Rule to Change All Instances of a Component includes instructions for finding the component's theme rule.

This tutorial demonstrates all three levels of CSS precedence and shows you how to modify the style rules in your project. Note: There are exceptions and the final result of the styling is based on the computed style as defined at http://www.w3. org/TR/CSS21/cascade.html.

Opening a Sample Project

You begin this tutorial by opening the sample application Vehicle Incident Report Application. 1. Before opening the project, make sure that the Application Server and bundled database server are running. a. In the Servers window, right-click Deployment Server, select Start/Stop Server, and click Start Server. b. In the Servers window, right-click Bundled Database Server, and select Start Bundled Database. 2. From the main menu, choose File > New Project. 3. In the New Project wizard, choose Samples in the Categories pane and Vehicle Incident Report Application in the Projects pane and then click Next. The project name is listed as VehicleIncidentReportApplicationx, with x being an appended version number. You can either rename your project or keep the default name. For this tutorial, the project name is VehicleIncidentReportApplication1. 4. Click Finish to open the new project in the Visual Designer. The page SearchAVehicle is opened in the Visual Designer.

Applying a Style to a Single Component

When you edit an individual component's style and styleClass properties, the resulting styles have the highest level of precedence for CSS rules applied to the component. In this section, you set the font style of a single component, the Search button component. 1. In the Visual Designer, select the Search button that is located at the bottom left side of the SearchAVehicle page. 2. In the Properties window, click the ellipsis button (...) next to the style property to open the Style Editor. 3. Using the Style Editor, set the following Font styles for the Search button component:
r r

Font family = Georgia, 'Times New Roman', times, serif Size = 24

You can see a preview of the new styles in the CSS Style text area at the bottom of the Style Editor, as shown in Figure 1.

Figure 1: Style Editor 4. Click OK to apply the style and close the Style Editor. 5. To verify the style change, click the Preview in Browser icon page in the default browser. in the Visual Designer toolbar and view the

Creating a New Style Rule to Apply to Selected Instances of a Component

In the first section of this tutorial, you used the Style Editor to edit the style property of an individual component, the Search button. If you want to apply those same styles to other selected components, then you can create a new CSS rule in the CSS Editor. The advantage of creating a new CSS rule is that you can apply the rule to more than one component, which is more efficient than editing multiple style properties of individual components. These CSS rules are at the second level of precedence in the CSS cascade, below styles added to a component's style property. 1. In the Projects window, expand VehicleIncidentReportApplication1 > Web Pages > resources and double-click stylesheet.css. The Style Editor opens. 2. Open the Style Rule Editor by clicking the Create Rule icon in the toolbar above the style sheet.

3. In the text field under the Class radio button, type fancybutton in the text field after the period (.), as shown in Figure 2.

Figure 2: Style Rule Editor

4. Click the

button to move the fancybutton class to the Style Rule Hierarchy box, and then click OK.

Notice the period (.) before the rule name in the style sheet. This CSS syntax defines a class rule rather than an HTML element rule or an element ID rule. 5. In the CSS Editor, select the following Font styles:
r r

Font family = Georgia, 'Times New Roman', times, serif Size = 24

The following rule is applied to the style sheet:

Code Sample 1: fancybutton Style .fancybutton { font-family: Georgia,'Times New Roman',times,serif; font-size: 24px }

6. In the Projects window, double-click Login.jsp to open the file in the Visual Designer. 7. In the Properties window for the New User button, click the ellipsis button (...) next to the styleClass property. The styleClass property editor opens, as shown in Figure 3. The styleClass property editor shows all style classes that are available to the CSS files.

Figure 3: styleClass Property Editor 8. In the Filter field, type fan. You see the fancybutton style class listed.

9. Select the fancybutton style class and click the add this style class to the property.

button to add it to the Selected list, and then click OK to

The New User button font type and size changes to the fancybutton style class.

Note: To add the fancybutton style rule to more than one button at a time, in the Visual Designer, you can select all the buttons to which you want to apply the style and add fancybutton to the styleClass property just one time. 10. To view the style change, right-click the Login page and choose Preview in Browser.

Editing an Existing Style Rule to Change All Instances of a Component

In this section, you find which style rule the theme is using for a particular component, and you set a component's primary property to true so the component uses a CSS file rule that is based on the theme's CSS file rule. You add a rule to the project's default CSS file that matches the name of a rule in the theme's CSS file. The new rule overrides the theme's rule and applies to all components that use the rule. The result is that all buttons in the project change to italic when the user hovers the mouse over a button, except for the one button that has the primary property set to true. 1. Select the component for which you want to change the style rule, press and hold Ctrl-Alt, and click the mouse button. The outline of the component changes to red. 2. In the Properties window, look at the Attributes line. The style class for the search button is listed as class="Btn2", which is the style class used by all buttons in the Vehicle Incident Report Application project. You can click the ellipsis button (...) next to Attributes to see the full list of attributes. 3. In the Visual Designer, click the SearchAVehicle tab to open that page, and then select the Search button. If the page is not open, then in the Projects window, expand VehicleIncidentReportApplication1 > Web Pages and double-click SearchAVehicle.jsp. 4. In the Properties window, select the primary property of the Search button. Setting the primary property ensures that the appearance of the Search button is based on the theme's CSS file rule and prevents the default CSS file's rule from overriding the theme's rule. 5. Click the stylesheet.css tab, right-click in the stylesheet, and select Create Rule. 6. In the text field under the Class radio button, type Btn2Hov in the text field after the period (.) that is under the Class radio button. Figure 2 in the previous section of this tutorial shows the Style Rule Editor.

7. Click the

button to move the Btn2Hov class to the Style Rule Hierarchy box, and then click OK.

8. In the Style Sheet Editor below the editing pane, set the Font to italic in the Style drop-down. The following rule is applied to the style sheet: Code Sample 2: Btn2Hov Style .Btn2Hov { font-style: italic }

9. Deploy the project to verify the changes by clicking from the main menu Run > Run Main Project. In the web browser, by default, the first page that opens is the Search page. Note that when you hover the mouse over the Search button, it does not change to italic because its style is taken from the theme's CSS file rule. 10. Click the Search button to go to the list of vehicles page and hover the mouse over the buttons in the table.

All non-primary buttons change to italic when you hover the mouse over them. Any new button that you create has the Btn2Hov style applied to it.

Creating a New Style Sheet

If you do not want to use the default style sheet provided with the IDE, then you can create a new style sheet. You can add a new style sheet by either replacing the link to the default style sheet or by allowing the two style sheets to coexist on the same page. To add a new style sheet to replace the default style sheet: 1. In the Projects window, right-click the VehicleIncidentReportApplication1 > Web Pages > resources node and choose New > Cascading Stylesheet. 2. In the Cascading Style Sheet wizard, type a new style sheet name. Click Finish. 3. Edit the new style sheet to include the style changes you want to make. 4. Open the page to which you want to apply the style sheet. If a component in the open page is selected, click in the page background to change to the page properties. 5. In the Properties window for the page, set the Style Sheet property to /resources/newstylesheetname. css. To have multiple style sheets: In this section you add a link component with an additional style sheet. 1. In the Projects window, right-click the VehicleIncidentReportApplication1 > Web Pages > resources node and choose New > Cascading Stylesheet. 2. In the Cascading Style Sheet wizard, type a new style sheet name. Click Finish. 3. Edit the new style sheet to include the style changes you want to make. 4. Open the page to which you want to apply the style sheet. If a component in the open page is selected, click in the page background to change to the page properties. 5. From the Palette window, expand the Advanced node, and drag and drop the Link component on the page. 6. In the Properties window for the new link, click the ellipsis button (...) next to the URL property. The URL Property Editor opens. 7. In the URL Property Editor, select the new style sheet and click OK. The new style sheet is shown in the Outline window along with the default style sheet.

Advanced Tips
The following tips are provided for developers who are comfortable using and developing CSS styles.

You can view the rendered HTML by using the Mozilla DOM feature. Another method to use for viewing rendered HTML is to select a component, press and hold Ctrl-Alt, and click the mouse button. When properly activated, the component outline changes to red. In the JSF section of the Properties window, click the ellipsis button (...) next to RenderedHTML to see the rendered HTML for the component. In both Attributes and Rendered HTML you can find the active style class name. For example, the Search button yields a class="Btn2". To find the style properties defined in class Btn2, go to the theme's read-only css_master.css file: 1. In the Projects window, expand Libraries > Default Theme > com.sun.rave.web.ui.defaultheme.css. 2. Double-click the css_master.css file to open the file. 3. Search the file for the style class of interest, such as Btn2. For example, to set a Btn2 background-color, both background-color and backgroundimage must be defined to override the existing style class. Since you cannot make edits to the read-only css_master.css, use the style property editor to set the background-image to null and the background-color to the one desired for your component.

Another way to add a style sheet to your project is to drag and drop the style sheet file from a file manager window onto the page. The link to the style sheet is automatically added to the JSP file.

Summary

q q q

You can edit an individual component's style properties to override the default style sheet. You can create a new style rule and apply it to selected components. You can edit an existing style rule that applies to all new or existing components of the same type that you use in your project. You can create your own style sheet and apply it to your project.

See Also:
q q

Using Page Fragments, a tutorial available on the Java Studio Creator portal. Cascading Style Sheets, level 2, revision 1, CSS 2.1 Specification, a specification defined by the World Wide Web Consortium.

This page was last modified: January 25, 2006

Sun and Third-party Trademarked Terminology

The following Sun trademarked terms might be used in the Sun Java(tm) Studio Creator tutorials:
q q q q q q q q q

Sun Java Studio Creator integrated development environment (IDE) Sun Java System Application Server version number (Application Server) Java Platform, Standard Edition technology (Java SE(tm) platform) JavaServer(tm) Faces technology JavaServer Pages(tm) technology (JSP(tm) technology) Sun Java System Web Server version number (Web Server) Java Database Connectivity software (JDBC software) Enterprise JavaBeans(tm) specification (EJB(tm) specification) Solaris(tm) Operating System software (Solaris OS software)

The following third-party trademarked terms might be used in the Sun Java Studio Creator tutorials:
q q

UNIX(R) software SPARC(R) processor

Copyright 2006 Sun Microsystems, Inc., 4150 Network Circle, Santa Clara, California 95054, U.S.A. All rights reserved. Sun Microsystems, Inc. has intellectual property rights relating to technology embodied in the product that is described in this document. In particular, and without limitation, these intellectual property rights may include one or more of the U.S. patents listed at http://www.sun.com/patents and one or more additional patents or pending patent applications in the U.S. and in other countries. U.S. Government Rights - Commercial software. Government users are subject to the Sun Microsystems, Inc. standard license agreement and applicable provisions of the FAR and its supplements. Use is subject to license terms. Sun, Sun Microsystems, the Sun logo, Java and the Java Coffee Cup logo are trademarks or registered trademarks of Sun Microsystems, Inc. in the U.S. and other countries.This product is covered and controlled by U.S. Export Control laws and may be subject to the export or import laws in other countries. Nuclear, missile, chemical biological weapons or nuclear maritime end uses or end users, whether direct or indirect, are strictly prohibited. Export or reexport to countries subject to U.S. embargo or to entities identified on U.S. export exclusion lists, including, but not limited to, the denied persons and specially designated nationals lists is strictly prohibited. Note: Sun is not responsible for the availability of third-party web sites mentioned in this document and does not endorse and is not responsible or liable for any content, advertising, products, or other materials on or available from such sites or resources. Sun will not be responsible or liable for any damage or loss caused or alleged to be caused by or in connection with use of or reliance on any such content, goods, or services available on or through any such sites or resources.

Copyright 2006 Sun Microsystems, Inc., 4150 Network Circle, Santa Clara, California 95054, tats-Unis. Tous droits rservs. Sun Microsystems, Inc. dtient les droits de proprit intellectuels relatifs la technologie incorpore dans le produit qui est dcrit dans ce document. En particulier, et ce sans limitation, ces droits de proprit intellectuelle peuvent inclure un ou plus des brevets amricains lists l'adresse http://www.sun.com/patents et un ou les brevets supplmentaires ou les applications de brevet en attente aux tats-Unis et dans les autres pays. L'utilisation est soumise aux termes de la Licence. Sun, Sun Microsystems, le logo Sun, Java et le logo Java Coffee Cup sont des marques de fabrique ou des marques dposes de Sun Microsystems, Inc. aux tats-Unis et dans d'autres pays.Ce produit est soumis la lgislation amricaine en matire de contrle des exportations et peut tre soumis la rglementation en vigueur dans d'autres pays dans le domaine des exportations et importations. Les utilisations, ou utilisateurs finaux, pour des armes nuclaires,des missiles, des armes biologiques et chimiques ou du nuclaire maritime, directement ou indirectement, sont strictement interdites. Les exportations ou rexportations vers les pays sous embargo amricain, ou vers des entits figurant sur les listes d'exclusion d'exportation amricaines, y compris, mais de manire non exhaustive, la liste de personnes qui font objet d'un ordre de ne pas participer, d'une faon directe ou indirecte, aux exportations des produits ou des services qui sont rgis par la lgislation amricaine en matire de contrle des exportations et la liste de ressortissants spcifiquement dsigns, sont rigoureusement interdites. Sun Microsystems n'est pas responsable de la disponibilit de tiers emplacements d'enchanement mentionns dans ce document et n'approuve pas et n'est pas responsable ou iresponsable d'aucun contenu, de la publicit, de produits, ou d'autres matriaux dessus ou fournis par de tels emplacements ou ressources. Sun ne sera pas responsable ou iresponsable d'aucuns dommages ou perte causs ou allgus pour tre caus par ou en liaison avec l'utilisation de ce produit ou la confiance dans des tels contenu, marchandises, ou services disponibles sur ou par des tels emplacements ou ressources.