JSF PrimeFaces center content of layoutUnit Center

[Willi2793]

hallo,

ich teste gerade mal Primefaces aus und finde das eigentlich ganz okay. Aber im Moment stellt sich mir die Frage wie ich in einem "p:layout" den Inhalt von "p:layoutunit position=center" zentriere.

Grüße,
Willi

 

[F.S.WhiTeY]

Aus der Dokumentation:

Skinning
Following is the list of structural style classes;
Style Class Applies
.ui-layout Main wrapper container element
.ui-layout-doc Layout container
.ui-layout-unit Each layout unit container
.ui-layout-{position} Position based layout unit
.ui-layout-unit-header Layout unit header
.ui-layout-unit-content Layout unit body
As skinning style classes are global, see the main Skinning section for more information.

Also folgendes CSS:

.ui-layout-unit-content.myContentClass{

text-align: center !important;

}

Und das benutzen des CSS:
[XML]
<p:layout >

<p:layoutUnit position="center" styleClass="myContentClass">
<hutputText/>
</p:layoutUnit>

</p:layout>
[/XML]


LG

David

 

[Willi2793]

Hm, leider funktioniert das nicht. Der Inhalt wird nicht zentriert.

 

[F.S.WhiTeY]

Dann habe ich vilt. die falsche Klasse genommen:

.ui-layout-center.myContentClass{

text-align: center !important;

}

 

[Willi2793]

Das hatte ich dann auch ausprobiert Ohne Erfolg

 

[F.S.WhiTeY]

Jaja das liebe Primefaces und CSS xD Machen wir es auf die harte Tour:

[XML]
<p:layout >

<p:layoutUnit position="center" style="text-align: center !important;">
<hutputText/>
</p:layoutUnit>

</p:layout>

[/XML]

Wenn das nicht hilft, fällt mir nur noch eins ein, aber das is SEHR UNSCHÖN:
[XML]

<p:layout >

<p:layoutUnit position="center" >
<center>
<hutputText/>
</center>
</p:layoutUnit>

</p:layout>

[/XML]

 

[Willi2793]

Okay, das scheint zu helfen. Das erste funktioniert auf den Inhalts-Seiten und das zweite dann auch auf der Login-Seite. Das heißt ich habe jetzt was mit dem ich experimentieren kann.

Danke :toll:

 

[F.S.WhiTeY]

Immer wieder gerne. Als Tip: Primefaces ist teilweise SEHR CSS resistent und undurchsichtig. Dafür sind die Komponenten einfach nur geil.

Alternative: RichFaces. Genau so mächtig aber das Design ist... naja.... welches Design? Dafür sind RichFaces aber nicht so kompliziert wenn man etwas mit CSS "nach bearbeiten" will


LG und viel Spaß/Erfolg

David

 

[Willi2793]

Ich bemerke es schon. Mit RF habe ich früher mal was gemacht. Aber damit wurde ich nicht so richtig warm. Deshalb versuche ich gerade mal PF.

 

[F.S.WhiTeY]

Ich mag PF auch lieber, ist halt teilweise ne fette Fummelei und manchmal muss man etwas "mit der Brechstange" durchsetzen was Layout angeht. Aber die restlichen Vorteile überwiegen. Ich sage nur : AJAX und AJAX-Behavior support. Eifach nur GEIL

 

[Willi2793]

Da komme ich noch hin Ich habe seit längerer Zeit jetzt wieder angefangen was mit JSF zu machen und damals gab es AJAX noch nicht wirklich.

LG,
Willi

 

[F.S.WhiTeY]

Kein Ding, du wirst es lieben lernen. Eigentlich macht es von der Programmierung her kaum einen Unterschied aber es gaukelt einem vor dass die App schneller läuft. Das macht dir mehr Spaß, das macht dem User mehr Spaß und es sieht auch noch total geil aus

LG

David

 

[Willi2793]

Im verlaufe meines "Projektes" wirst Du sicher merken wie mein Fortschritt ist

Vielen Dank auf jeden Fall!

 

[Templarthelast]

Hast du dir schonmal das Primefaces showcase zu layout angeschaut(PrimeFaces - ShowCase) angeschaut? Da wäre es auch erklärt worden.

 

[Willi2793]

Leider steht da aber nicht (oder ich sehe es zumindest nicht) wie man iinerhalb des "Center" den Inhalt zentriert.

 

[Fant]

Bei solchen Fällen einfach mal in den generierten Code schauen, wie die style-Klasse heißt, die man anpassen muss. Ich hatte am Anfang auch Probleme mit den Eigenheiten vom PrimeFaces, was die Styles angeht, aber FireBug oder was vergleichbares ist hier einfach ein unverzichtbares Werkzeug, mit dem man solche Probleme in Nullkommnix lösen kann.

 

[Willi2793]

Bei solchen Fällen einfach mal in den generierten Code schauen, wie die style-Klasse heißt, die man anpassen muss. Ich hatte am Anfang auch Probleme mit den Eigenheiten vom PrimeFaces, was die Styles angeht, aber FireBug oder was vergleichbares ist hier einfach ein unverzichtbares Werkzeug, mit dem man solche Probleme in Nullkommnix lösen kann.

Danke. Ich habe genau das auch nachgesehen im generierten Code. Ich habe mir da auch einige Klassen rausgesucht die ich mal verändert hatte aber ich hatte keinen Erfolg. Welche ist denn die Richtige?

 

[Fant]

Da müsste ich selbst suchen. Aus dem Kopf weiß ich dass da nun nicht. Ich hab hier grad nicht die Möglichkeit das zu tun, aber später kann ich spaßeshalber gern mal nachschauen, ob ich was finde
Aber das Problem war doch schon gelöst dachte ich?
Grundsätzlich sollte man sich hier jedoch noch überlegen, dass es schon einen Unterschied macht, was denn zentiert werden soll und wie genau. Renderst du zB in die layout-unit noch ein container-element, so kannst du dieses zwar zentrieren, aber wenn es sowieso die ganze Breite einnimmt, dann sieht man davon natürlich nichts. Was dann vermutlich gewünscht ist, ist dass der Inhalt vom inneren Container zentriert wird.
Das ist vermutlich auch der Grund, warum die Lösung von F.S.WhiTeY bei dir bei einigen Seiten klappt und bei anderen (so scheint es wenigstens) nicht.
Um da genauer drauf einzugehen wär aber ein Minimalbeispiel von einer Seite, wo es denn nicht klappt, schön. Wär dann mit weniger Arbeit für den Helfer verbunden

 

[F.S.WhiTeY]

da bleibt ja nicht viel.

<div class="ui-layout-unit-content ui-widget-content">Right unit content.</div>

Wäre das, was beim showcase rauskommt. Ergo bleiben als CSS-Klassen nur:

ui-layout-unit-content
ui-widget-content

[XML]
<p:layoutUnit position="east" size="200" header="Right" resizable="true" closable="true" collapsible="true" effect="drop">
<hutputText value="Right unit content." />
</p:layoutUnit>
[/XML]

Womit mein erster Post eigentlich zum erfolg hätte führen sollen. Man kann jetzt lediglich noch

ui-widget-content

ausprobieren

LG

 

[Willi2793]

Zuerst mal die Seiten die die Probleme machen:

template.xhtml
[XML]<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title><ui:insert name="title"/> - TWiBu 1.0, © by TWi 2012</title>

<style type="text/css">
.ui-corner-all {
border: 0 solid #000;
}
.ui-widget-header {
text-align: center;
}
.ui-layout-center .twibu-layout-center {
text-align: center !important;
}
</style>

</h:head>
<h:body>
<p:layout fullPage="true">

<p:layoutUnit position="north" size="100" resizable="true" closable="true" collapsible="true">
Header
</p:layoutUnit>

<p:layoutUnit position="south" size="100" closable="true" collapsible="true">
Footer
</p:layoutUnit>

<p:layoutUnit position="west" size="175" collapsible="false">
Menu
</p:layoutUnit>

<p:layoutUnit position="center" styleClass="twibu-layout-center">
<ui:insert name="content"/>
</p:layoutUnit>

</p:layout>

</h:body>
</f:view>
</html>[/XML]


login.xhtml
[XML]<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns="http://primefaces.org/ui">
<body>
<ui:composition template="/template.xhtml">

<ui:define name="title">
<hutputText value="Login"/>
</ui:define>

<ui:define name="content">
<form method="POST" action="j_security_check">
<panelGrid columns="2">
<f:facet name="header">
<hutputLabel value="Bitte Userid und Passwort eingeben"/>
</f:facet>
<putputLabel value="Username:" for="j_username"/>
<p:inputText id="j_username"/>
<putputLabel value="Password:" for="j_password"/>
<password id="j_password"/>
<f:facet name="footer">
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="submit">
<span class="ui-button-text">Login</span>
</button>
</f:facet>
</panelGrid>
</form>
</ui:define>

</ui:composition>
</body>
</html>[/XML]

In dem CSS-Teil in der template.xhtml habe ich folgende Kombinationen versucht:

• .ui-layout-center .twibu-layout-center
• .ui-layout-unit-content .twibu-layout-center
• .ui-widget-content .twibu-layout-center
• .twibu-layout-center

Aber nie wird der Inhalt des Center-Layouts zentriert.

Fant: Ja, es ist gelöst aber mit <center></center>. Wenn es da eine andere Möglichkeit gäbe faände ich das schon besser.

F.S.WhiTeY: Leider eben nicht.

Grüße,
Willi