Stylen

Nun, unser Rechner beherrscht die vier Grundrechenarten, aber auf dem Bildschirm sieht das Ganze etwas gedrängt aus. Es gilt also, die Oberfläche zu gestalten. Und wie geschieht dies heutzutage, wenn nicht mit CSS? Jetzt kommt aber kein Kurs zum Webdesign. Ich möchte lediglich zeigen, wie dies in Verbindung mit JSF geschieht.

Zur Anlage eines CSS stellt NetBeans einen passenden Assistenten zur Verfügung. Nach einem Rechtsklick auf das Projekt TinyCalculator wählen Sie New->Other und im darauffolgenden Dialog aus dem Bereich Web das Cascading Style Sheet.

 

Nach Klick auf [Next >] geben Sie einfach einen Namen an, hier CalculatorStyle. Unter Folder geben Sie einen relativen Pfad an, nämlich resources\css. Was für eine Bewandnis es mit diesem Pfad hat, werden Sie bald sehen.

 

NetBeans öffnet das neue Style Sheet im Editor. Ergänzen Sie dies wie folgt:

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

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

 

 

Somit haben Sie zwei neue Klassen, “button” und “label” definiert. Diese werden wir nutzen, um die betreffenden Elemente ein wenig zu gestalten. Dazu weisen Sie auf der Seite index.xhtml den Labeln die Klasse “label” zu und den Schaltflächen die Klasse “button”.

CSS gehört heutzutage zum Standard-Repertoire eines Webentwicklers, so dass ich dies hier vorerst nicht näher erläutere. Viele Java-Entwickler bauen hervorragende Enterprise- oder Desktopanwendungen, kennen das Web aber nur aus Anwendersicht. Und so könnte ein wenig mehr Info nicht schaden. Sollten auch Sie tiefergehende Informationen zu CSS wünschen, so lassen Sie es mich bitte wissen.
<?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>

Nach dem Start ist der Rechner ein wenig aufgehübcht. Nicht viel, aber das war an dieser Stelle auch noch nicht Sinn der Sache.

 

Vielmehr geht es hier um das wie. Schauen wir uns dazu die Einbindung des Stylesheets an:

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

Nicht erwähnt ist hier das vorhin gewählte Verzeichnis, denn JSF läd externe Ressourcen per Konvention aus dem Verzeichnis “resources”. Im Attribut “library” geben Sie den relativen Pfad zu diesem Verzeichnis an. Sofern Sie CSS bereit kennen, wissen Sie, dass der Verweis auf das (exterene) Stylesheet im head-Bereich erfolgen muss. Hier aber steht dies im Body. Aber eigentlich ist dies egal, solange es irgendwo innerhalb der HTML-Tags (genauer gesagt, im Gültigkeitsbereich des entsprechenden Namespaces) steht. Dank JSF müssen Sie sich nicht mehr darum kümmern, das System weiß, wohin der Verweis gehört. Den Zielbereich erkennt JSF am Tag. Und so finden Sie im Seitenquelltext in head.-Bereich auch diesen Link:

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

Beachten Sie, wie das spezielle Ressourcenverzeichnis umgesetzt wird. Und achten Sie auf die Dateiendung: xhtml. Dies wird Ihnen in Kürze wieder begegnen.

Im vorherigen Teil habe ich versprochen, Ihnen ein Beispiel zu zeigen, wo die Angabe des Namespaces (NS) “h:” beim head-Element wichtig ist. Nun, genau hier. Lassen Sie den NS fort, so weiß JSF nicht wohin mit dem Stylesheet und Sie erhalten eine Fehlermeldung. Probieren Sie es ruhig einmal aus.

Ein Bild sagt mehr als Tausend Worte. Und so gehört zum Aufhübschen auch eine nette Zeichnung. Legen Sie dazu im Verzeichnis “resources” einen Ordner “images” an und kopieren Sie ein beliebiges Bild hinein. Im Beispiel ist dies “BasicArithmetics.png“, ein echter Müller ;-), den Sie sich auch gerne von diesem Tutorial kopieren dürfen.

Auch für Images bietet Ihnen JSF einen Tag, den Sie entsprechend dem folgenden Codeausschnitt zufügen.

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

Und Action:

 

Ok, das Ergebnis ist noch nicht gerade umwerfend, aber hier kommt es ja auf den Weg an. Schnell noch ein Blick in den Seitenquelltext.

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

Nun, da ist sie wieder, unser xhtml-Erweiterung. Und was verbirgt sich hinter “ln=…”? Vergleichen Sie dies doch einfach mit dem Wert des Attributs “library”…

Nun Ressourcen gehören detaillierter betrachtet, ebenso wie die bisher weitgehend ausgeklammerte Konfiguration. Aber vor diesen eher theoretischen Betrachtungen kommt noch etwas mehr Praxis. Im nächten Teil der “Szenenwechsel”, die einfache Navigation zwischen Seiten.