Styles

Now, our tiny caculator masters the basic arithmetics. Within the browser, this looks a bit compact. It’s usefull to design the user interface. And the medium of choice to design a web page are the cascading style sheets (CSS).

Since this is a JSF tutorial and not a CSS one, I’ll only show how to implement this into a JSF project. It’s not a complete design, just a demonstartion of the principle how to incorporate this into a JSF project.

NetBeans offers a wizzard to create styles for JSF. After a right-click onto the project within the project tree, just choose New->Other and in the following dialog from the domain “Web” “Cascading Style Sheet”.

After a click onto [Next >], provide an name, in this example CalculatorStyle. For folder enter a relative path, resources\css. Later on, the special meaning of this path is described.

 NetBeans opens an editor containing the just creates style sheet. Enhance as shown here:

.button{
    width: 70px;
    margin: 10px 5px 20px 0;
}

.label{
    display: inline-block;
    width: 70px;
}

 

This defines two new style classes, “button” and “label”. They will be used to style the elements of the calculator application. These classes will be assigned to the labels and buttons. This will be shown in the page source beneath.

Today CSS is part of a web developers standard repertoire. Thus, I wont explain details here. On the other hand, many Java developers build up well suited and complex desktop and enterprise applications, but know the web only from a user’s point of view. HTML and CSS might not been well known. Thus, if you like me to provide some more information about HTML and CSS, please let me know.
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head >
<title>Tiny calculator</title>
</h:head>

<h:body>
<h1>Tiny calculator</h1>
<h:outputStylesheet library="css" name="CalculatorStyle.css"/>
<h:form id="calculator">

<h:outputLabel styleClass="label" for="param1" value="Param 1:"/>
<h:inputText id="param1" value="#{calculatorBean.param1}"/>

<br/>
<h:outputLabel styleClass="label" for="param2" value="Param 2:"/>
<h:inputText id="param2" value="#{calculatorBean.param2}"/>

<br/>
<h:commandButton styleClass="button" action="#{calculatorBean.add}" value="add"/>
<h:commandButton styleClass="button" action="#{calculatorBean.substract}" value="substract"/>

<h:commandButton styleClass="button" action="#{calculatorBean.multiply}" value="multiply"/>
<h:commandButton styleClass="button" action="#{calculatorBean.divide}" value="divide"/>

<br/>
<h:outputLabel styleClass="label" for="result" value="Result:"/>
<h:outputText id="result" value="#{calculatorBean.result}"/>

</h:form>
</h:body>
</html>

After the application’s start, the tiny calculator looks a bit more frindly. Not really good designed, just enough to explain the principle.

 Let’s take a look onto the implementation. This instruction included the style sheet:

 <h:outputStylesheet library="css" name="CalculatorStyle.css"/>

No reference to the source path. By convention, JSF tries to load such an element from the default path of “resources”. In attribute “library” there is a relative (sub) path of this directory. If you already know about CSS, you know the link to an external style sheet has to be included in the head section of the page. But in this JSF page, it is declared in the body. No matter where it is declared within a valid HTML tag, prefixed by the proper namespace “h:”, JSF knows, where to place the resulting link. In the HTML source of the page, you’ll find the link on it’s proper place within the head section:

<link type="text/css" rel="stylesheet" href="/TinyCalculator/javax.faces.resource/CalculatorStyle.css.xhtml?ln=css" />

Attend to the special way the path is coded. And refer to the extension: xhtml. You’ll face this again soon.

In the last part, I promised to show an example, where the namespace prefix “h:” plays it’s role for the head element. It’s the application shown above. Without this prefix, JSF would treat the “head” tag as any HTML tag without special meaning. Only with this prefix JSF knows where to place the link to the CSS. If you ommit the “h:” you’d get an error message. Just try it.

A picture explains more than words can say. Thus we’ll place a picture in the headline of our app, indicating “this is a calculator”. Ok, not a real good picture, but an authentic Müller ;-). To do so, in the folder of “resources” add a subfolder called “images” and copy any image you like to use into. In this example it is “BasicArithmetics.png“. Fell free to copy it from this tutorial.

For images JSF offers a special tag also. Add this code according to the following listing:

[...]
<h:body>
<h:graphicImage alt="BasicArithmetics" library="images" name="BasicArithmetics.png"/>
<h1>Tiny calculator</h1>
[...]

And action (start the app):

 

Ok, the result is not very stunning, but this is just to show, how it works. A quick look into the generated source of the page.

<img src="/TinyCalculator/javax.faces.resource/BasicArithmetics.png.xhtml?ln=images"
     alt="BasicArithmetics" />

Here it is again, the extension of xhtml. And what does “ln=…” mean? Simply compare this with the value of the attribute “library”…

Resources needs to be explained in more detail, just as configuration. Before such rather theoretical lessons, lets have some more practical stuff. The next “scene change” is about simple navigation between pages.

 

To web development content.