Stylesheets Comps

7/28/2019 Stylesheets Comps

1/9

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 stylesto both a single component and several instances of the component. This tutorial also describes how to create a newstyle 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- SummaryExample used in this tutorial

Vehicle Incident Report Application provided in the samples directory of theIDE

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, fontinformation, 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 rulesyou add to a component's style property, which you can edit using the Style Editor (see Figure 1). When you usein-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 componentdifferent from the rest of the components on the page. For example, you might want to make an Order buttonbigger than the rest of the buttons in the application. However, setting styles on a per-component basis is notrecommended as a general practice.

For example, to change the background-color of that Order button, you need not only to set the styleproperty's background-color but also you need to set the background-image to null to override what hasbeen set by the css_master.css .Btn2 class. See the section in this tutorial, Advanced Tips, for moreinformation.

q Second level of precedence. Goes to the default CSS file which the Java Studio Creator IDE adds to every projectthat you create, and the IDE also includes a link to the CSS file within every page that you add to a project. Usinga 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 componenttypes. The IDE has a CSS Editor that you can use to edit the CSS file and a Style Rule Editor (see Figure 2) thatyou can use to create a new style rule. The IDE includes a styleClass Property Editor (see Figure 3) that you can

1


2/9

use to add style classes to the styleClass property or to bind the styleClass property to a JavaBean thatdetermines 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 consistsof images, JavaScript, CSS files, and messages that are used by components to define the look and feel of thecomponents. 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 ExistingStyle 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 theProjects pane and then click Next.

The project name is listed as VehicleIncidentReportApplicationx, withx being an appended version number. Youcan either rename your project or keep the default name. For this tutorial, the project name isVehicleIncidentReportApplication1.

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 ofprecedence for CSS rules applied to the component. In this section, you set the font style of a single component, theSearch 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 Font family = Georgia, 'Times New Roman', times, serifr 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 inFigure 1.

2
http://www.w3.org/TR/CSS21/cascade.htmlhttp://www.w3.org/TR/CSS21/cascade.htmlhttp://www.w3.org/TR/CSS21/cascade.htmlhttp://www.w3.org/TR/CSS21/cascade.html


3/9

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 in the Visual Designer toolbar and view thepage in the default browser.

3


4/9


5/9

.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 classesthat 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 button to add it to the Selected list, and then click OK toadd this style class to the property.

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

Code Sample 1: fancybutton Style

5


6/9

Note: To add the fancybutton style rule to more than one button at a time, in the Visual Designer, you canselect all the buttons to which you want to apply the style and add fancybutton to the styleClass propertyjust 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'sprimary property to true so the component uses a CSS file rule that is based on the theme's CSS file rule. You add arule to the project's default CSS file that matches the name of a rule in the theme's CSS file. The new rule overrides thetheme's rule and applies to all components that use the rule. The result is that all buttons in the project change to italicwhen 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 mousebutton.

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 asclass="Btn2", which is the style class used by all buttons in the Vehicle Incident ReportApplication 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 thepage is not open, then in the Projects window, expand VehicleIncidentReportApplication1 > Web Pages anddouble-click SearchAVehicle.jsp.

4. In the Properties window, select theprimary property of the Search button.

Setting the primary property ensures that the appearance of the Search button is based on the theme's CSS filerule 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 theClass 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 isapplied 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 mouseover 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.

6


7/9

All non-primary buttons change to italic when you hover the mouse over them. Any new button that you createhas 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 canadd a new style sheet by either replacing the link to the default style sheet or by allowing the two style sheets to coexiston 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 andchoose 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 andchoose 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.

7


8/9

q You can view the rendered HTML by using the Mozilla DOM feature. Another method to use for viewingrendered HTML is to select a component, press and hold Ctrl-Alt, and click the mouse button. When properlyactivated, the component outline changes to red. In the JSF section of the Properties window, click the ellipsisbutton (...) next to RenderedHTML to see the rendered HTML for the component. In both Attributes and RenderedHTML you can find the active style class name. For example, the Search button yields a class="Btn2".

q 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 background-image must be defined to override the existing style class. Since you cannot make edits to the read-onlycss_master.css, use the style property editor to set the background-image to null and thebackground-color to the one desired for your component.

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

Summary

q You can edit an individual component's style properties to override the default style sheet.q You can create a new style rule and apply it to selected components.q 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.q You can create your own style sheet and apply it to your project.

See Also:

q Using Page Fragments, a tutorial available on the Java Studio Creator portal.q 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 Sun Java Studio Creator integrated development environment (IDE)q Sun Java System Application Server version number(Application Server)q Java Platform, Standard Edition technology (Java SE(tm) platform)q JavaServer(tm) Faces technologyq JavaServer Pages(tm) technology (JSP(tm) technology)q Sun Java System Web Server version number(Web Server)q Java Database Connectivity software (JDBC software)q Enterprise JavaBeans(tm) specification (EJB(tm) specification)q Solaris(tm) Operating System software (Solaris OS software)

8
http://developers.sun.com/prodtech/javatools/jscreator/learning/tutorials/2/pagefragments.htmlhttp://www.w3.org/TR/CSS21/http://www.w3.org/TR/CSS21/http://developers.sun.com/prodtech/javatools/jscreator/learning/tutorials/2/pagefragments.html


9/9

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

q UNIX(R) softwareq 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 inthis 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 theFAR and its supplements. Use is subject to license terms. Sun, Sun Microsystems, the Sun logo, Java and the Java CoffeeCup logo are trademarks or registered trademarks of Sun Microsystems, Inc. in the U.S. and other countries.This product iscovered 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 exclusionlists, 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 andis not responsible or liable for any content, advertising, products, or other materials on or available from such sites orresources. Sun will not be responsible or liable for any damage or loss caused or alleged to be caused by or in connectionwith 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 droitsrservs.

Sun Microsystems, Inc. dtient les droits de proprit intellectuels relatifs la technologie incorpore dans le produit qui estdcrit dans ce document. En particulier, et ce sans limitation, ces droits de proprit intellectuelle peuvent inclure un ou plusdes brevets amricains lists l'adresse http://www.sun.com/patents et un ou les brevets supplmentaires ou les applicationsde brevet en attente aux tats-Unis et dans les autres pays. L'utilisation est soumise aux termes de la Licence. Sun, SunMicrosystems, le logo Sun, Java et le logo Java Coffee Cup sont des marques de fabrique ou des marques dposes de SunMicrosystems, Inc. aux tats-Unis et dans d'autres pays.Ce produit est soumis la lgislation amricaine en matire decontrle des exportations et peut tre soumis la rglementation en vigueur dans d'autres pays dans le domaine desexportations et importations. Les utilisations, ou utilisateurs finaux, pour des armes nuclaires,des missiles, des armesbiologiques et chimiques ou du nuclaire maritime, directement ou indirectement, sont strictement interdites. Lesexportations ou rexportations vers les pays sous embargo amricain, ou vers des entits figurant sur les listes d'exclusiond'exportation amricaines, y compris, mais de manire non exhaustive, la liste de personnes qui font objet d'un ordre de nepas participer, d'une faon directe ou indirecte, aux exportations des produits ou des services qui sont rgis par la lgislationamricaine en matire de contrle des exportations et la liste de ressortissants spcifiquement dsigns, sont rigoureusementinterdites.

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'autresmatriaux dessus ou fournis par de tels emplacements ou ressources. Sun ne sera pas responsable ou iresponsable d'aucunsdommages ou perte causs ou allgus pour tre caus par ou en liaison avec l'utilisation de ce produit ou la confiance dansdes tels contenu, marchandises, ou services disponibles sur ou par des tels emplacements ou ressources.

9

Documents

Stylesheets Comps