Primefaces
Your trail: 

This page (revision-10) was last changed on 02-Sep-2014 15:02 by Dieter Käppel

This page was created on 23-Oct-2012 13:57 by Dieter Käppel

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note
10 02-Sep-2014 15:02 2 KB Dieter Käppel to previous
9 02-Sep-2014 15:02 1 KB Dieter Käppel to previous | to last
8 04-Jan-2013 02:12 1 KB Dieter Käppel to previous | to last
7 02-Nov-2012 20:44 1 KB Dieter Käppel to previous | to last
6 02-Nov-2012 20:44 1 KB Dieter Käppel to previous | to last
5 02-Nov-2012 14:30 1 KB Dieter Käppel to previous | to last
4 02-Nov-2012 14:23 1 KB Dieter Käppel to previous | to last
3 02-Nov-2012 14:17 950 bytes Dieter Käppel to previous | to last
2 02-Nov-2012 13:58 1 KB Dieter Käppel to previous | to last
1 23-Oct-2012 13:57 1 KB Dieter Käppel to last

Page References

Incoming links Outgoing links
Primefaces
Primefaces

Version management

Difference between version and

At line 2 changed one line
[JSF Ext|JSF Ext#Primefaces Buttons] liefert CSS- und Javascript-Dateien zum Anpassen normaler Buttons an das Primefaces Layout.
Beim Verwenden von Primefaces werden <h:inputCommand> und native HTML-Buttons nicht im Primefaces-Style dargestellt. Folgende Einträge korrigieren dies (zumindest für Primefaces 3.3):
At line 4 added 23 lines
# Im pom.xml die jsf-ext eintragen, wie in [JSF Ext|JSF Ext#Ext Konfiguration] beschrieben.
# Ins Page-Template folgenden Eingrag am Ende des Body-Tags vornehmen:
{{{
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
...
<h:head id="head">
...
</h:head>
<h:body id="body">
...
<h:outputStylesheet name="prime-buttons.css" library="css"/>
<h:outputScript name="prime-buttons.js" library="ext-js"/>
</h:body>
</html>
}}}
Danach erscheinen alle <h:commandButton> und andere Buttons im Primefaces Style.
At line 8 changed 5 lines
<dependency>
<groupId>org.primefaces.themes</groupId>
<artifactId>sunny</artifactId>
<version>1.0.8</version>
</dependency>
<dependency>
<groupId>org.primefaces.themes</groupId>
<artifactId>sunny</artifactId>
<version>1.0.8</version>
</dependency>
At line 24 removed 6 lines
Oder man bindet das Theme im Page-Template ein:
{{{
<h:outputStylesheet name="theme.css" library="primefaces-<theme>"/>
}}}
At line 31 changed one line
Da Primefaces auf JQuery aufbaut, kann der [Online-Theme-Konfigurator|http://jqueryui.com/themeroller/] für die Skins verwendet werden. Aus dem heruntergeladenen ZIP wird das Verzeichnis custom-theme nach <web-root>/resources/primefaces-<theme>/ extrahiert, sodass sich darin /images und /jquery-ui-1.9.1.custom.css befindet. /jquery-ui-1.9.1.custom.css wird nach theme.css umbenannt, damit Primefaces es findet. Oder eben wieder über die Anweisung <h:outputStylesheet>.
Da Primefaces auf JQuery aufbaut, kann der [Online-Theme-Konfigurator|http://jqueryui.com/themeroller/] für die Skins verwendet werden. Aus dem heruntergeladenen ZIP wird das Verzeichnis custom-theme nach <web-root>/resources/skins/<theme>/ kopiert, sodass sich darin /images und /jquery-ui-1.9.1.custom.css befindet. Die CSS-Datei braucht dann nur noch im Page-Template eingebunden werden:
At line 33 removed 3 lines
!!!Menu
Das Primefaces Menu unterstützt kein Behavior oder ActionEvent-Listener. Mit einem Workaround kann dies umgangen werden:
At line 37 changed 7 lines
<p:menuitem>
<h:commandLink styleClass="ui-menuitem-link ui-corner-all">
<f:ajax/>
<h:outputText value="Scopes"/>
<e:load scopeId=":scopeList"/>
</h:commandLink>
</p:menuitem>
<h:outputStylesheet name="jquery-ui-1.9.1.custom.css" library="skins/<theme>"/>
At line 45 removed 23 lines
__Erklärung:__ Es wird ein <h:commandLink> innerhalb des <p:menuitem> platziert, der den Primefaces-Style enthält. Dieser unterstützt nun Behaviors und ActionEvents und sieht genauso aus.
!!!Datatable
Das Layout der Data-Tables kann mitunter etwas sperrig sein, weil sie sich nur bedingt an umgebende Container anpassen. Ein möglicher Fix besteht in CSS-Styles:
{{{
.ui-datatable table {
table-layout: fixed !important;
}
.ui-datatable .ui-column-filter {
width: 80px;
}
.ui-datatable tbody td, .ui-treetable tbody td {
padding: 3px 4px;
}
.ui-datatable thead th, .ui-treetable thead th {
padding: 3px 4px;
}
.ui-datatable tfoot td, .ui-treetable tfoot td {
padding: 3px 4px;
}
}}}
This page (revision-10) was last changed on 02-Sep-2014 15:02 by Dieter Käppel Top
Übersicht
Startseite
Das Unternehmen
Produkte
Consulting
Referenzen

Jobmarkt
Jobangebote
Profile

Hilfe
Suche
Seitenindex
Letzte Änderungen
Sichere Verbindung

Systeme
Tickets
Jenkins
Nexus
SVN
Email Client
4786 Aufrufe

referenziert von
JPA Support
JSF Ext
Jsf ext

© 2022 Intersult GmbH | Jobs | Kontakt | Presse | AGB | Impressum | Cookies | Datenschutz | Serverzeit 2024.11.24 18:15:09 GMT