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
Beim Verwenden von Primefaces werden <h:inputCommand> und native HTML-Buttons nicht im Primefaces-Style dargestellt. Folgendes JavaScript korrigiert dies für Primefaces 3.3:
[JSF Ext|JSF Ext#Primefaces Buttons] liefert CSS- und Javascript-Dateien zum Anpassen normaler Buttons an das Primefaces Layout.
At line 4 added 3 lines
!!!Skins
Skins können inzwischen über Maven konfiguriert werden. In der pom.xml:
At line 5 changed 13 lines
function init() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; ++i) {
var input = inputs[i];
if ((input.type === 'submit' || input.type === 'button') && typeof input.classNameBase == 'undefined') {
input.classNameBase = input.className +
" ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-text";
input.className = input.classNameBase;
input.addEventListener("mouseover", onmouseover, false);
input.addEventListener("mouseout", onmouseout, false);
}
}
}
<dependency>
<groupId>org.primefaces.themes</groupId>
<artifactId>sunny</artifactId>
<version>1.0.8</version>
</dependency>
}}}
At line 19 changed 6 lines
function onmouseout(event) {
event.target.className = event.target.classNameBase;
}
function onmouseover(event) {
event.target.className = event.target.classNameBase + " ui-state-hover";
}
Und dann nur noch in der web.xml auswählen:
At line 26 changed one line
document.body.addEventListener("load", init, true);
{{{
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>sunny</param-value>
</context-param>
}}}
At line 28 changed 4 lines
function initAjax(data) {
if (data.status == 'success')
init();
}
Oder man bindet das Theme im Page-Template ein:
At line 33 changed one line
jsf.ajax.addOnEvent(initAjax);
{{{
<h:outputStylesheet name="theme.css" library="primefaces-<theme>"/>
At line 29 added 39 lines
!!Custom Themes
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>.
!!!Menu
Das Primefaces Menu unterstützt kein Behavior oder ActionEvent-Listener. Mit einem Workaround kann dies umgangen werden:
{{{
<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>
}}}
__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
4420 Aufrufe

referenziert von
JPA Support
JSF Ext
Jsf ext

© 2022 Intersult GmbH | Jobs | Kontakt | Presse | AGB | Impressum | Cookies | Datenschutz | Serverzeit 2024.05.08 23:35:16 GMT