JSF/RichFaces anpassen?

[Mean]

Hallo,

ich habe mir über Seam-Gen ein Seam-Projekt generieren lassen und jetzt u.a. einigen XHTML-Seiten.

Das über CSS gesteuerte Layout anzupassen ist nicht wirklich ein Problem, wenn ich dann allerdings so eine Seite habe:

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:s="http://jboss.com/products/seam/taglib"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:rich="http://richfaces.org/rich"
                template="layout/template.xhtml">

<ui:define name="body">

    <h:messages globalOnly="true" styleClass="message" id="globalMessages"/>

		 <h:form id="loginSearch" styleClass="edit">

        <rich:simpleTogglePanel label="Login" switchType="ajax">

            <s:decorate template="layout/display.xhtml">
                <ui:define name="label">email</ui:define>
                <h:inputText id="email" value="#{credentials.username}"/>
            </s:decorate>

            <s:decorate template="layout/display.xhtml">
                <ui:define name="label">password</ui:define>
                <h:inputSecret id="password" value="#{credentials.password}"/>
            </s:decorate>


        </rich:simpleTogglePanel>

        <div class="actionButtons">
            <h:commandButton action="#{identity.login}" value="Login" />
        </div>

    </h:form>


	 

</ui:define>

</ui:composition>

Dann steht z.B. oben ein grauer Querbalken mit der Beschriftung "Login" (das müßte der Tag mit label="Login" sein).
Ich kann nun über styleClass z.B. die Border-Farbe wechseln, aber auch nicht z.B. diesen kompletten Kasten um "Login" mit den Inputs, etc.

Kann mir da vielleicht jemand auf die Sprünge helfen, wie ich da etwas anpassen kann?

Vielen Dank und Grüße,

Dirk

 

[Okkulytus]

Hallo Dirk,

das TogglePanel besitzt eine Reihe von Properties, welche eine Formatierung via CSS ermöglichen. Zu diesen Properties zählen: styleClass, headerClass und bodyClass uvm. Hier hinterlegst Du einfach die Klassennamen aus Deinem CSS und formatierst die Box dort.

Z.B.: <rich:simpleTogglePanel label="Login" switchType="ajax" styleClass="meinStyle" headerClass="meinHeader" bodyClass="meinBody">

Nun kannst Du das Panel nach Deinen Wünschen formatieren, inkl. der Inhalte.

Ich hoffe Deine Frage richtig verstanden zu haben?

Viele Grüße
Okkulytus

 

[Mean]

Hi Okkulytus,

vielen Dank für die Antwort! Genau nach so etwas habe ich gesucht - habe aber leider nirgends was passendes ergooglen können...

Vielen Dank und Grüße,

Dirk