JEE7: JSF Gui Komponenten auslagern


Umgebung

  • Wildfly 10
  • EE7

Neben den Java Klassen werden in einer Web-Anwendung auch die JSF-Darstellungskomponenten verwaltet. Dies sind ganze HTML-Seiten, Includes in XHTML-Seiten, Templates, Grafiken und andere Darstellungsbeschreibungen. Auch diese können in externe jar-Dateien ausgelagert werden. Bei der Bereitstellung gibt es Einschränkungen (vergl. Ende dieses Abschnitts), die aber keine Einschränkungen für die Entwicklung und die Auslagerung in separate Projekte für die Wiederverwendung darstellen. Das Auslagern von EJB Bestandteilen ist in diesem Post und das Auslagern von Java Komponenten aus JSF ist in diesem Post besprochen worden.

Ablage in jar-Archiven

Bei Start des Anwendungs-Servers werden folgende Ordner nach Ressourcen durchsucht

  • Im Wurzelverzeichnis der Webanwendung oder des Web-Moduls das Verzeichnis /resources
  • Das Verzeichnis /META-INF/resources in allen Jar-Dateien des Classpaths

In diese Ressourcen-Verzeichnisse können alle oben genannten Ressourcen ausgelagert werden.

Pfad zu den Ressourcen im Web-Projekt ändern

Web-Projekte suchen die Ressourcen in der Grundeinstellung im Verzeichnis /resources des Web-Root. Dieser (öffentliche) Pfad kann seit JSF 2.2 über einen Parameter in der web.xml verändert werden.

<context-param>
  <?param-name>
    javax.faces.WEBAPP_RESOURCES_DIRECTORY
  </param-name>
  <param-value>/WEB-INF/resources</param-value>
</context-param>

Das obige Beispiel verschiebt den Ressourcen-Pfad in das nicht öffentliche Verzeichnis WEB-INF.

Zugriff auf CSS

CSS-Dateien können seit JSF 2.2 auf zwei Arten in die JSF Seiten eingebunden werden. Entweder über oder wie bisher im Kopf der Datei, wobei die Ressource über #{resource angesprochen wird.

<link rel="stylesheet" type="text/css" href="#{resource['/resBase/css/common/ecrBase.css']}" ></link>

(alte Notation mit festem Pfad z.B. für ein Image: #{facesContext.externalContext.requestContextPath}/resources/image/favicon.png) Das Attribut library schafft eine weitere Strukturierungsebne auf die ich hier nicht weiter eingehe. Es kann im einfachen Fall auch weggelassen werden.

Nutzung von JSF Ressourcen innerhalb von CSS-Dateien

Innerhalb der CSS Dateien werden die Ressourcen ebenfalls über die EL angesprochen.

background-image: url("#{resource['img/glyphicons-halflings.png']}");

Zugriff auf Javascript

Im h:head Tag eines Faclets kann wie bisher allerdings mit neuer Notation auf die Dateien zugegriffen werden.

<script type="text/javascript" src="#{resource['/resBase/jscript/common/timeOutTimer.js']}" ></script>

Alternativ kann das folgende JSF-Tag verwendet werden.

<h:outputScript name="resBase/jscript/common/timeOutTimer.js" target="head" />

JSF-Templates

Der Pfad für Templates kann relativ zu oben bestimmten Ressourcen angegeben werden und damit in allen eingelesenen Dateien liegen. Zumindest in Wildfly 10 muss allerdings ein jar-Archiv, das solche Ressourcen hält, im lib Verzeichnis des Web-Moduls liegen, damit der Zugriff funktioniert.

<ui:composition template="/common/sometemplate.xhtml" />

In der aktuellen MyEclipse Version werden ausgelagerte Dateien nicht erkannt und führen zu einer Warnung im xhtml-Editor. Zur Laufzeit gibt es keine Probleme.

JSF-Includes

Für JSF-Includes gilt das Gleiche wie für JSF-Templates.

<ui:include src="/common/someinclude.xhtml" />

JSF-Composits

Für JSF-Composits gilt das Gleiche wie für JSF-Templates.

Grafiken

Um auf Grafiken aus Ressourcen zuzugreifen kann statt src das Attribut name verwendet werden

<h:graphicImage name="/resBase/image/helper/1x1-trans.gif" width="5" height="1" />

Du hast Fragen oder Anmerkungen? Kontakt: arndt@schoenb.de

,