# Tmplating/CSS Problem bei JSF



## F.S.WhiTeY (14. Mai 2011)

Hallo leute, 

ich bekomme es irgendwie nicht hin, das in meinen JSF seiten irgendwtwas style-mäßiges angezeigt wird. Weder per template noch per CSS. 

Der Content oder die Formulare werden alle angezeigt, der rest bleibt allerdings weiß. Wenn ich die Dateien im Browser ohne Server anzeigen lasse, wird alles umgesetzt.

Ich hab es schon mit folgenden mitteln probiert:

im <head>-bereich mit:



```
<link rel="stylesheet" type="text/css" href="main.css" />
```


```
<link rel="stylesheet" type="text/css" href="#/TESTAPP/main.css"/>
```


```
<link rel="stylesheet" type="text/css" href="#{request.contextPath}/main.css"/>
```
im body mit : 

[c]<hutputStylesheet name="main.css" />[/c]

Danach wars mir zu dumm und ich wollte auf templating umsteigen. Das hat aber auch nix gebracht. Hat jemand nen tipp für mich was ich falsch mache? 

hier nochmal das template:


```
<!DOCTYPE html>
<?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"
      xmlns:c="http://java.sun.com/jsf/core" 
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>name</title>
        <link rel="stylesheet" type="text/css" href="main.css"/>
    </h:head>
    <h:body>
     
        <center>

            <table width="1024" border="0" cellpadding="0" cellspacing="0">
                <!--DWLayoutTable-->
                <tr>
                    <td height="221" colspan="3" valign="top">
                        <div id="header"></div>        </td>
                </tr>
                <tr>
                    <td width="22" rowspan="2" valign="top" bgcolor="#999999" height="100%"></td>
                    <td width="979" height="253" valign="top"><div id="content">
                            <ui:insert name="content">
                                
                            </ui:insert>
                        </div></td>
                    <td width="22" rowspan="2" valign="top" bgcolor="#999999" height="100%"></td>
                </tr>
                <tr>
                    <td height="100%" valign="top"><div id="foot"></div>
                </tr>
            </table>
        </center>
    </h:body>
</html>
```


----------



## JimPanse (14. Mai 2011)

wo liegt denn deine css-datei??? doch nicht im root deines webapp Verzeichnisses oder? Die CSS-Datei wird doch bestimmt in einem resourcen Ordner liegen d.h. wird die Pfad angabe falsch sein:

Bsp-Struktur:
deine web-app
|______ src
|______webapp (WebContent)
           |______ WEB-INF
           |______ resources/css


dann muss die Pfad angabe lauten über HTML lauten


```
<h:head>
	<link rel="stylesheet" type="text/css"
			href="#{request.contextPath}/resources/css/main.css" />
</h:head>
```

-> SELFHTML: Stylesheets / CSS-Formate definieren / Stylesheets in HTML einbinden

falls du JSF 2.0 verwendest ist es noch einfacher


```
<h:head>
<h:outputStylesheet name="style.css" library="css" />
</h:head>
```

Resources (library) in JSF 2.0

Greetz


----------



## F.S.WhiTeY (14. Mai 2011)

Hey,

danke für deine Antwort. Doch die CSS liegt im root. Genau da, wo auch die *.xhtml Dateien liegen. Von daher sollte der Pfad doch richtig sein. 

Ich nutze JSF 2.0, hab diesen Tag allerdings im Body benutzt. Hab ich in irgendeinem Tutorial so gesehen. Ich werd es damit mal im Head versuchen und mir deinen Link genauer anschauen. 

Eine weitere möglichkeit die mir eingefallen ist, war ein Rechteproblem. Ich spiele derzeit zudem noch mit Spring Security 3 rum und dachte mir das ich das template, die CSS und mein Logo freigeben müsste. Hat aber nix gebracht, steht alles auf :


```
<intercept-url pattern="/dateiname.endung" access="permitAll" />
```

Für meine selbstgebaute Login-Seite funktioniert der Zugriff, aber der style macht halt probleme. 


Naja vieleicht funktioniert es ja mit dem JSF 2.0 Tag.


Danke erstmal und liebe Grüße

WhiTeY


----------



## F.S.WhiTeY (15. Mai 2011)

Hey ho, 

also es funktioniert immer noch nicht. Ich bin nun voll auf templating umgestiegen und habe gar kein css mehr. Hab es mit nem tabellenlayout gemacht und es kommt nix bei rum. 

Meine seiten bleiben einfach nur leer bis auf die Formulardaten. Das einloggen funktioniert auch aber es ist halt nix von bildern oder sonstwas zu sehen. 

template.xhtml :

```
<?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"
      xmlns:c="http://java.sun.com/jsf/core" 
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <head>
        <ui:insert name="title">
        <title>TITEL</title>
        </ui:insert>
    </head>
    <body>

        <center>

            <table width="1024" border="0" cellpadding="0" cellspacing="0">
                <!--DWLayoutTable-->
                <tr>
                    <td height="221" colspan="3" valign="top">
                        <img src="resources/images/logo.jpg"/>
                    </td>
                </tr>
                <tr>
                    <td width="22" rowspan="2" valign="top" bgcolor="#999999" height="100%"></td>
                    <td width="979" height="253" valign="top" bgcolor="#0099FF">

                            <ui:insert name="content">

                            </ui:insert>

                       </td>
                    <td width="22" rowspan="2" valign="top" bgcolor="#999999" height="100%"></td>
                </tr>
                <tr>
                    <td height="100%" valign="top" bgcolor="#999999">
            FOOTER TEXT                                       
                    </td>
                </tr>
            </table>
        </center>
    </body>
</html>
```

login.xhtml :


```
<?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"
      xmlns:c="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <body>
        <ui:composition template="template.xhtml">
            <ui:define name="content">
                <center>
                    <br /> Willkommen !!
                                <br /> Bittel melden Sie sich an:
                                <br/><form name='f' action='/AFW/j_spring_security_check'
                                      method='POST'>
                                    Username:<input type='text' name='j_username' value=''/>
                                    <br/>Passwort:<input type='password' name='j_password'/>
                                        <br/><input name="Anmelden" type="submit"/>
                                        <br/><input name="ZurÃ¼cksetzen" type="reset"/>
                                </form>
                            </center>
            </ui:define>
        </ui:composition>        
    </body>
</html>
```


----------



## JimPanse (16. Mai 2011)

```
<img src="resources/images/logo.jpg"/>
```

zu


```
<img src="#{request.contextPath}/resources/images/logo.jpg"/>
```

oder


```
<h:graphicImage value="/resources/images/logo.jpg"  />
```


----------



## F.S.WhiTeY (17. Mai 2011)

Danke für die Antwort aber das hat auch nichts gebracht. 

Es ist ja nicht so, dass nur teile des templates oder des Stylesheets fehlen. Es ist mehr so, das absolut nichts übernommen wird. 

Außer den formularfeldern (inputtext, links, outputtext etc.) die z.B. in der login.xhtml eingefügt sind, wird nichts sichtbar. 
Das template ist ja nun wirklich ein schlichtes Tabellendesign und hat außer Hintergrundfarben und dem logo im header nichts zu bieten. Aber noch nicht mal das wird umgesetzt. 

Mir ist allerdings etwas aufgefallen, ka ob das nun normal ist oder nicht:

Wenn ich mir den seitenquelltext anzeigen lasse, sehe ich anstat geparsten html meinen jsf/xhtml-code. Egal was ich gelesen habe, überall stand das im browser zu reinem html geparst wird, dass scheint bei mir nicht der fall zu sein. 

Ist möglicherweise etwas mit meiner serverconfig nicht in Ordnung?

Das sehe ich wenn ich mir im Browser den Seitenquelltext anzeigen lasse:

```
<?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"
      xmlns:c="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <body>
        <ui:composition template="template.xhtml">
            <ui:define name="content">
                <center>
                    <br /> Willkommen!
                                <br /> Bittel melden Sie sich an:
                                <br/><form name='f' action='/AFW/j_spring_security_check'
                                      method='POST'>

                                    Username:<input type='text' name='j_username' value=''/>
                                    <br/>Passwort:<input type='password' name='j_password'/>
                                        <br/><input name="Anmelden" type="submit"/>
                                        <br/><input name="Zurücksetzen" type="reset"/>
                                </form>
                            </center>
            </ui:define>
        </ui:composition>        
    </body>

</html>
```


----------



## gman (17. Mai 2011)

Hi,

sieht so aus als ob dein JSF-Code nicht umgesetzt wird. Überprüfe mal deine web.xml, ob auch alle Einträge
vorhanden und richtig sind. Kannst ja auch loggen ob die Methoden in dem Controller ausgeführt werden.


----------



## F.S.WhiTeY (19. Mai 2011)

Hey,

ich danke euch nochmal für die antworten. Ich habe es leider nicht hinbekommen den Fehler zu finden. 

Da ich allerdings eh ein wenig Wirrwar in meinem Entwicklungsumfeld hatte, habe ich aufgeräum und noch mal vom Anfang gestartet.

Ich hab keine Ahnung ob es daran gelegen hat, das ih Spring Security eingebunden hatte oder eher an Netbeans 7.0 RC2 anstat Netbeans 7.0 Final. 

Auf jeden fall hab ich ne große Deinstallationsrunde gestartet und alles mal neu Eingerichtet. Nun läuft es und die facelets werden auch richtig umgesetzt. 

Lediglich Spring Security werd ich erst am ende meines kleinen Projectes einbinden. Wenn es dann wieder nicht klappt, hab ich wenigstens ne Ahnung in welche richtung ich schauen muss. Obwohl ich mir das nicht vorstelle kann. 

Mir wäre es zwar lieber gewehsen den Fehler in der web.xml oder irgendwo anders zu finden, als die brutale Version durchzuziehen aber nach nen paar tagen vergeblichen Suchens hatte ich dann doch keine Lusst mehr. ^^

Wie gesagt ich danke euch für eure Mühen.


LG 


WhiTeY


----------

