Content unavailable! (broken link)https://dynarocks.com/wiki/attach/PageHeader/interSULT-2.002.jpg
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.

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
Incoming links Outgoing links
Primefaces
Primefaces

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:
[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 VerbindungContent unavailable! (broken link)https://dynarocks.com/wiki/images/out.png

Systeme
TicketsContent unavailable! (broken link)https://dynarocks.com/wiki/images/out.png
JenkinsContent unavailable! (broken link)https://dynarocks.com/wiki/images/out.png
NexusContent unavailable! (broken link)https://dynarocks.com/wiki/images/out.png
SVNContent unavailable! (broken link)https://dynarocks.com/wiki/images/out.png
Email ClientContent unavailable! (broken link)https://dynarocks.com/wiki/images/out.png
267 Aufrufe

referenziert von
JPA Support
JSF Ext
Jsf ext

© 2022 Intersult GmbH | Jobs | Kontakt | Presse | AGB | Impressum | Cookies | Datenschutz | Serverzeit 2025.04.15 10:16:15 GMT
×