Announcement

Collapse
No announcement yet.

JSF und CSS Problem

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • JSF und CSS Problem

    Hallo!

    Ich habe gerade erst mit JSF angefangen, bin daher noch ein blutiger Anfänger. Allerdings hab ich schon jetzt ein Problem welches ich nicht gelöst bekomme. Ich hab schon sämtliche Google Treffer zu diesem Thema angeklickt, aber nirgendwo finde ich eine Lösung.

    Zu meinem Problem:

    Ich möchte eine Login-Seite für eine Anwendung bauen. Der Benutzer wird dann mittels JCIFS an unserem AD authentifziert, was auch schon prima funktioniert.

    Das ist auch nicht das Problem.

    Ich kriege es allerdings nicht hin, dass die JSF Elemente auf meiner Klasse die StyleClasses aus meiner CSS verwenden. Ich kann sowohl im Code der JSP, als auch im CSS ändern was ich will, die Änderungen werden nicht genommen und die JSF Elemente (z.B. hutputText) sehen immer gleich aus.

    Hier mal der Code meiner CSS:

    Code:
    @CHARSET "ISO-8859-1";
    
    body {
    	font-family: Arial;
    	background: #FFFFFF;
    }
    
    head {
    	margin-left: auto;
    	margin-right: auto;
    }
    
    outputText thead {
    	font-size: 8;
    	font-weight: bold;
    	font-family: Arial;
    	font-style: normal;
    	text-align: left;
    }
    
    outputText subhead {
    	font-size: 14;
    	font-weight: normal;
    	font-family: Arial;
    	font-style: normal;
    	text-align: center;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    outputText standard {
    	font-family: Arial;
    	font-size: 20;
    	font-style: normal;
    	text-align: right;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    benutzerinput {
    	font-family: Arial;
    	font-size: 12;
    	font-style: normal;
    }
    
    input.button {
    	font-family: Arial;
    	font-size: 10;
    	border-style: double;
    	background: #E6E6E6;
    	width: 110;
    	height: 27;
    	rendered: true;
    }
    
    table.willkommen {
    	width: 500px;
    	table-layout: fixed;
    	padding: 1px;
    	border-collapse: collapse;
    	border: 1px thin #EEE;
    	border-bottom: 1;
    	border-spacing: 20;
    	border-style: double;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    table.willkommen thead {
    	background-color: #EEE;
    	font-size: 10;
    	font-weight: normal;
    	font-family: Arial;
    	font-style: normal;
    	text-align: left;
    }
    
    table.anmeldung {
    	width: 500px;
    	padding: 1px;
    	table-layout: fixed;
    	border-collapse: collapse;
    	border: 1px thin #EEE;
    	border-bottom: 1;
    	border-spacing: 20;
    	border-style: double;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    table.anmeldung thead {
    	background-color: #EEE;
    	font-size: 10;
    	font-weight: normal;
    	font-family: Arial;
    	font-style: normal;
    	text-align: left;
    }
    
    table.noborder {
    	border: 0px thin #FFF;
    	table-layout: fixed;
    }

    und hier meine JSP:

    Code:
    <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
    <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
    <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <f:view>
      <html>
        <link href="css/layout.css" rel="stylesheet" type="text/css" />
        <head>
          <title>
            Anmeldung
          </title>
        </head>
    
        <body>
          <h:form>
              <h:panelGrid>
                <h:graphicImage id="nlm" value="/bilder/nlm.jpg" styleClass="head"/>
                <h:outputText value=" " styleClass="head"/>
                <h:outputText value=" " styleClass="head"/>
              </h:panelGrid>        
              <h:panelGrid styleClass="willkommen">
                <f:facet name="header">
                  <h:outputText styleClass="thead" value="Willkommen in der Administration"/>
                </f:facet>
                <h:outputText value=" " styleClass="subhead"/>
                <h:outputText value="Bitte melden Sie sich mit Ihrem TSS-Kennwort an" styleClass="subhead"/>
                <h:outputText 
                    value="Sollten Sie noch keinen Zugriff haben, klicken Sie bitte auf &quot;Zugriff beantragen&quot;."
                    styleClass="subhead"/>
              </h:panelGrid>        
            <br>
    
    
            <table align="center" class="anmeldung">
              <thead>
                <tr>
                  <td>
                    <h:outputText value=" Anmeldung " styleClass="standard"/>
                  </td>
                </tr>
              </thead>
    
              <tr>
                <td>
                  &nbsp;
                </td>
              </tr>
    
              <tr>
                <td>
                  <table align="center" class="noborder">
                    <tr class="even">
                      <td>
                        <h:outputText value="Benutzer: " styleClass="standard" />
                      </td>
                      <td>
                        <h:inputText 
                            id="user"
                            required="#{true}"
                            value="#{SecurityManager.user}"                        
                            maxlength="7"
                            size="10"
                        />
                      </td>
                    </tr>
                    <tr class="even">
                      <td>
                        <h:outputText value="Password: " styleClass="standard" />
                      </td>
                      <td>
                        <h:inputSecret 
                            id="password"
                            required="#{true}"
                            value="#{SecurityManager.password}"
                            size="10"
                        />
                      </td>
                    </tr>
    
                  </table>
                </td>
              </tr>
              <tr>
                <td>
                  &nbsp;
                </td>
              </tr>
              <tr>
                <td>
                  <table align="center" class="noborder">
                    <tr>
                      <td align="right">
                        <h:commandButton 
                            value="Anmelden"
                            action="#{SecurityConnectorManager.authenticate}"
                            styleClass="button"
                        />
                      </td>
                      <td>
                        <h:commandButton 
                            value="Zugriff beantragen"
                            action="#{SecurityConnectorManager.authenticate}"
                            styleClass="button"
                        />
                      </td>
                    </tr>
    
                  </table>
                </td>
              </tr>
              <tr>
                <td>
                  &nbsp;
                </td>
              </tr>
            </table>
          </h:form>
        </body>
      </html>
    </f:view>

    Zum Code selber: Ja das ist wirklich mein erstes Webprojekt und man möge mir eine eventuelle nicht-konforme oder ungünstige Programmierung nachsehen.

  • #2
    Auch hallo,

    auf die Schnelle ungeprüft: in der jsp.Datei muss der Befehl für die .css-Datei nach <head> kommen. Vgl. mit den Beispielen von http://www.jsf-forum.de/forum/pages/...als/basics.jsf (View source)
    MfG
    Cheat-Sheets for Developers / Programming Quotes

    Comment


    • #3
      Vielen Dank für das erste Feedback.

      Das hat zumindest bewirkt, dass nun die Tabellen und die Buttons formatiert werden. Alle anderen Elemente wie die outputText, und das Bild auf der Seite bleiben unformatiert.

      Ich hab den Code nochmal angepasst und alle überflüssigen html tags rausgeworfen. Hier nochmal der Code der jsp und der css datei:



      JSP
      Code:
      <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
      <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
      <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      <f:view>
        <html>
          <head>
            <link href="layout.css" rel="stylesheet" type="text/css" />
            <title>
              Anmeldung
            </title>
          </head>
      
          <body>
            <h:form>
              <h:panelGrid>
                <h:graphicImage id="nlm" value="/bilder/nlm.jpg" styleClass="head"/>
              </h:panelGrid>
              <br>
              <br>
              <h:panelGrid styleClass="willkommen">
                <f:facet name="header">
                  <h:outputText styleClass="thead" value="Willkommen in der Administration"/>
                </f:facet>
                <br>
                <h:outputText value=" " styleClass="subhead"/>
      
                <h:outputText value="Bitte melden Sie sich mit Ihrem Domänen-Kennwort an" styleClass="subhead"/>
                <h:outputText 
                    value="Sollten Sie noch keinen Zugriff haben, klicken Sie bitte auf &quot;Zugriff beantragen&quot;."
                    styleClass="subhead"/>
                <br>
              </h:panelGrid>
              <br>
      
      
              <h:panelGrid styleClass="anmeldung">
                <f:facet name="header">
                  <h:outputText value="Anmeldung" styleClass="thead"/>
                </f:facet>
                <h:outputText value=" " styleClass="thead"/>
                <br>
                <h:panelGrid columns="2">
      
                  <h:outputText value="Benutzer: " styleClass="standard" />
      
                  <h:inputText 
                      id="user"
                      required="#{true}"
                      value="#{SecurityManager.user}"
                      styleClass="dtasaetze"
                      maxlength="7"
                      size="10"
                  />
      
                  <h:outputText value="Password: " styleClass="standard" />
                  <h:inputSecret id="password" required="#{true}" value="#{SecurityManager.password}" size="10" />
                  <br>
      
                </h:panelGrid>
                <h:outputText value=" " styleClass="standard" />
                <h:panelGrid columns="2" styleClass="button">
      
                  <h:commandButton value="Anmelden" action="#{SecurityManager.authenticate}" styleClass="button" />
      
                  <h:commandButton 
                      value="Zugriff beantragen"
                      action="#{SecurityManager.authenticate}"
                      styleClass="button"
                  />
      
                </h:panelGrid>
              </h:panelGrid>
            </h:form>
          </body>
        </html>
      </f:view>
      CSS

      Code:
      @CHARSET "ISO-8859-1";
      
      body {
      	background: #FFFFFF;
      }
      
      head {	
      	text-align: center;
      	margin-left: auto;
      	margin-right: auto;
      	}
      	
      output.subhead {
      	font-size: 14;
      	font-weight: normal;
      	font-family: Arial;
      	font-style: normal;
      	text-align: center;
      	margin-left: auto;
      	margin-right: auto;
      	text-align: center;	
      	}
      
      output.standard {
      	font-family: Arial;
      	font-size: 10;
      	font-style: normal;
      	text-align: right;
      	color: red;
      	margin-left: auto;
      	margin-right: auto;
      	text-align: center;	
      }
      
      input.benutzerinput {
      	font-family: Arial;
      	font-size: 10;
      	font-style: normal;
      	margin-left: auto;
      	margin-right: auto;
      	text-align: center;	
      }
      
      input.button {
      	font-family: Arial;
      	font-size: 10;
      	border-style: double;
      	background: #E6E6E6;
      	width: 110;
      	height: 27;
      	rendered: true;
      	margin-left: auto;
      	margin-right: auto;
      	text-align: center;	
      	}
      
      table.willkommen {
      	width: 500px;
      	table-layout: fixed; 
      	padding: 1px;
      	border-collapse: collapse;
      	border: 1px thin #EEE;
      	border-bottom: 1;
      	border-spacing: 20;	
      	border-style: double;
      	margin-left: auto;
      	margin-right: auto;
      	text-align: center;	
      	}
      	
      table.willkommen thead {	
      	background-color: #EEE;
      	font-size:8;
      	font-weight: normal;
      	font-family: Arial;
      	font-style: normal;
      	text-align: left;
      }
      	
      table.anmeldung {	
      	width: 500px;	
      	padding: 1px;
      	table-layout: fixed;
      	border-collapse: collapse;
      	border: 1px thin #EEE;
      	border-bottom: 1;
      	border-spacing: 20;	
      	border-style: double;
      	margin-left: auto;
      	margin-right: auto;
      	text-align: center;	
      }
      
      table.anmeldung thead{
      	background-color: #EEE;
      	font-size:8;
      	font-weight: normal;
      	font-family: Arial;
      	font-style: normal;
      	text-align: left;
      }
      
      table.bedienung{
      	width: 500px;
      	border: 0px thin #FFF;
      	table-layout: fixed;
      	margin-left: auto;
      	margin-right: auto;
      	text-align: center;	
      }
      
      table.noborder{
      	border: 0px thin #FFF;
      	table-layout: fixed;
      }

      Comment


      • #4
        Code:
        output.standard {
        	...
        }
        macht im CSS nicht viel Sinn.

        HTML Code:
        <h:outputText value="Password: " styleClass="standard" />
        wird als

        HTML Code:
        <span class="standard">Password:</span>
        gerendert. Also müsste die Style-Klasse mit

        Code:
        span.standard {
        	...
        }
        oder

        Code:
        .standard {
        	...
        }
        definiert werden. Für die tables und buttons stimmt es.

        Comment

        Working...
        X