Wie und wo werden PrimeFaces-Stylesheets eingebunden?

Question

Wie und wo werden PrimeFaces-Stylesheets eingebunden?

Antwort

Verwandte Fragen

Wie kann man in PrimeFaces zu lange Feldinhalte in Tabellenzellen mit "..." abbrechen lassen?

Wie kann man bei PrimeFaces DataTable das Filtern nur beim Verlassen des Feldes und nicht bei jedem Tastenanschlag auslösen?

Welche Filter-Events gibt es bei PrimeFaces?

Wie heißt bei PrimeFaces das Filter-Event beim Verlassen eines Feldes?

Wie stellt man in einer PrimeFaces DataTable ein anderes Feld dar, als das zum Sortieren verwendete?

Wie muss die Datei primefaces-locales.js aussehen und wo muss sie platziert werden, damit Deutsch als Sprache genutzt wird?

Warum zeigt Primefaces Datepicker englische Bezeichnungen, obwohl in der web.xml LOCALE und im Tag locale="de" eingestellt sind?

In welcher Datei stelle ich den PrimeFaces Datepicker 8 auf Deutsch um und wo muss sie liegen?

Warum zeigt der PrimeFaces Datepicker keine Kalenderwoche an?

Wie binde ich 'primefaces/locales/primefaces-locales.js' korrekt ein?

Accepted Answer

PrimeFaces-Stylesheets werden in der Regel automatisch eingebunden, sobald du ein PrimeFaces-Komponenten-Set in deiner JSF-Seite verwendest. Das Framework lädt die benötigten CSS-Dateien (z. B. für Themes und Komponenten) selbstständig. Dennoch gibt es Möglichkeiten, das Einbinden zu steuern oder eigene Stylesheets zu ergänzen: **1. Automatisches Einbinden durch PrimeFaces:** Sobald du PrimeFaces-Komponenten wie `<p:button>`, `<p:datatable>` usw. verwendest, werden die Standard-Stylesheets und das Theme automatisch in den `<head>`-Bereich deiner HTML-Seite eingefügt. **2. Theme-Auswahl:** Das gewünschte Theme wird in der Regel in der `web.xml` konfiguriert: ```xml <context-param> <param-name>primefaces.THEME</param-name> <param-value>saga</param-value>  </context-param> ``` Weitere Themes findest du auf der offiziellen PrimeFaces-Themeseite: [https://www.primefaces.org/themes/](https://www.primefaces.org/themes/) **3. Manuelles Einbinden zusätzlicher Stylesheets:** Eigene CSS-Dateien kannst du im `<h:head>`-Bereich deiner JSF-Seite einbinden: ```xml <h:outputStylesheet library="css" name="custom.css"/> ``` Dabei muss sich die Datei im Ressourcenordner (`src/main/webapp/resources/css/custom.css`) befinden. **4. Deaktivieren des automatischen Einbindens:** Falls du die PrimeFaces-Stylesheets nicht automatisch laden möchtest (z. B. für ein eigenes Build), kannst du dies in der `web.xml` steuern: ```xml <context-param> <param-name>primefaces.FONT_AWESOME</param-name> <param-value>false</param-value> </context-param> ``` Weitere Optionen findest du in der [PrimeFaces-Dokumentation](https://primefaces.org/documentation/). **Zusammengefasst:** PrimeFaces-Stylesheets werden automatisch eingebunden, sobald du PrimeFaces-Komponenten nutzt. Die Theme-Auswahl erfolgt über die `web.xml`. Eigene Stylesheets kannst du zusätzlich im `<h:head>` mit `<h:outputStylesheet>` einbinden.

Accepted Answer

Um in PrimeFaces zu lange Inhalte in einer Tabelle (z. B. `p:dataTable`) mit "..." (Ellipsis) abzubrechen, musst du das CSS für die jeweilige Spalte anpassen. PrimeFaces selbst bietet k... [mehr]

Accepted Answer

Um in PrimeFaces zu lange Inhalte in einer Tabelle (z. B. `p:dataTable`) mit "..." (Ellipsis) abzubrechen, musst du das CSS für die jeweilige Spalte anpassen. PrimeFaces selbst bietet keine direkte Attribut-Lösung dafür, aber mit CSS ist das einfach möglich. **Beispiel:** Angenommen, du hast eine Spalte mit folgendem Code: ```xml <p:column headerText="Beschreibung"> <h:outputText value="#{item.beschreibung}" /> </p:column> ``` **So geht’s:** 1. **Füge eine CSS-Klasse zur Spalte hinzu:** ```xml <p:column headerText="Beschreibung" styleClass="ellipsis-column"> <h:outputText value="#{item.beschreibung}" /> </p:column> ``` 2. **Definiere das CSS:** ```css .ellipsis-column { max-width: 150px; /* oder gewünschte Breite */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } ``` **Wichtige Hinweise:** - Die Klasse `ellipsis-column` kannst du beliebig benennen. - Passe `max-width` an deine Bedürfnisse an. - Das CSS muss im Gültigkeitsbereich deiner Seite eingebunden sein (z. B. in einer globalen CSS-Datei oder im `<h:head>`). **Weitere Infos:** - [PrimeFaces DataTable Dokumentation](https://primefaces.org/showcase/ui/data/dataTable/basic.xhtml) - [CSS text-overflow: ellipsis](https://developer.mozilla.org/de/docs/Web/CSS/text-overflow) Damit werden zu lange Inhalte in der Spalte mit "..." abgekürzt.

Accepted Answer

Um bei einer PrimeFaces DataTable das Filtern nicht bei jedem Tastenanschlag (dem Standardverhalten mit `filterEvent="keyup"`) auszulösen, sondern erst beim Verlassen des Filterfeldes (... [mehr]

Accepted Answer

Um bei einer PrimeFaces DataTable das Filtern nicht bei jedem Tastenanschlag (dem Standardverhalten mit `filterEvent="keyup"`) auszulösen, sondern erst beim Verlassen des Filterfeldes (also beim `blur`-Event), kannst du das Attribut `filterEvent` entsprechend anpassen. Beispiel: ```xml <p:dataTable value="#{bean.liste}" var="item"> <p:column headerText="Name" filterBy="#{item.name}" filterEvent="blur"> <h:outputText value="#{item.name}" /> </p:column>  </p:dataTable> ``` Mit `filterEvent="blur"` wird die Filterung erst ausgelöst, wenn das Filterfeld den Fokus verliert (also z.B. durch Tab oder Klick außerhalb des Feldes). **Weitere Hinweise:** - Du kannst das Attribut `filterEvent` pro Spalte oder für die gesamte Tabelle setzen. - Mögliche Werte für `filterEvent` sind z.B. `"keyup"`, `"blur"`, `"change"`. - Dokumentation: [PrimeFaces DataTable User Guide](https://primefaces.org/showcase/ui/data/datatable/filter.xhtml) Damit erreichst du das gewünschte Verhalten.

Accepted Answer

PrimeFaces bietet im DataTable-Component verschiedene Filterevents, die du nutzen kannst, um auf Filteraktionen zu reagieren. Die wichtigsten Filterevents sind: 1. **`filter`** Wird ausgelö... [mehr]

Accepted Answer

PrimeFaces bietet im DataTable-Component verschiedene Filterevents, die du nutzen kannst, um auf Filteraktionen zu reagieren. Die wichtigsten Filterevents sind: 1. **`filter`** Wird ausgelöst, wenn der Benutzer einen Filter in einer DataTable anwendet (z.B. Eingabe in ein Filterfeld, Auswahl eines Filterwerts). Beispiel: ```xml <p:dataTable ...> <p:ajax event="filter" listener="#{bean.onFilter}" update=":form:table"/> </p:dataTable> ``` 2. **`filter`-Event bei anderen Komponenten** Auch andere Komponenten wie z.B. `p:column` (mit Filterfunktion) oder `p:filterMatchMode` unterstützen das Filterevent im Kontext der DataTable. **Hinweis:** Das Filterevent ist hauptsächlich für die DataTable (`p:dataTable`) relevant. Andere Komponenten wie `p:dropdown`, `p:autocomplete` oder `p:selectOneMenu` haben eigene Events, aber kein dediziertes "filter"-Event wie die DataTable. **Weitere Events der DataTable (zur Übersicht):** - `rowSelect` - `rowUnselect` - `sort` - `page` - `toggleSelect` - `colResize` - `colReorder` - `rowEdit` - `rowEditCancel` - `cellEdit` - `cellEditCancel` **Dokumentation:** Eine vollständige Liste und Beschreibung der Events findest du in der offiziellen PrimeFaces-Dokumentation: [https://primefaces.org/showcase/ui/data/datatable/events.xhtml](https://primefaces.org/showcase/ui/data/datatable/events.xhtml) **Fazit:** Das zentrale Filterevent bei PrimeFaces ist das `filter`-Event der DataTable.

Accepted Answer

Bei PrimeFaces gibt es kein spezielles „FilterEvent“ für das Verlassen eines Feldes. Das Verlassen eines Eingabefeldes wird im Allgemeinen durch das JavaScript-Event **"blur"... [mehr]

Accepted Answer

Bei PrimeFaces gibt es kein spezielles „FilterEvent“ für das Verlassen eines Feldes. Das Verlassen eines Eingabefeldes wird im Allgemeinen durch das JavaScript-Event **"blur"** ausgelöst. In PrimeFaces-Komponenten wie `<p:inputText>` oder `<p:column>` (mit Filter in DataTables) kannst du das Verlassen eines Feldes mit dem Attribut `onblur` abfangen. Ein dediziertes Filter-Event gibt es bei PrimeFaces DataTable für das Filtern von Daten, das ist das **`filter`**-Event (z.B. `p:ajax event="filter"`). Dieses wird aber ausgelöst, wenn der Benutzer einen Filter anwendet, nicht explizit beim Verlassen eines Feldes. **Zusammengefasst:** - Für das Verlassen eines Feldes: **onblur** (JavaScript-Event) - Für das Filtern in DataTable: **p:ajax event="filter"** **Beispiel für DataTable-Filter:** ```xml <p:dataTable ...> <p:ajax event="filter" listener="#{bean.onFilter}" /> </p:dataTable> ``` **Beispiel für onblur bei einem Eingabefeld:** ```xml <p:inputText onblur="alert('Feld verlassen!')" /> ``` Weitere Infos findest du in der [PrimeFaces Dokumentation](https://primefaces.org/documentation/).

Accepted Answer

Um in einer PrimeFaces DataTable nach einem anderen Feld zu sortieren, als dem, das angezeigt wird, kannst du das Attribut `sortBy` verwenden. Das Attribut `value` im `<p:column>` gibt an, was a... [mehr]

Accepted Answer

Um in einer PrimeFaces DataTable nach einem anderen Feld zu sortieren, als dem, das angezeigt wird, kannst du das Attribut `sortBy` verwenden. Das Attribut `value` im `<p:column>` gibt an, was angezeigt wird, während `sortBy` bestimmt, nach welchem Wert sortiert wird. **Beispiel:** Angenommen, du hast eine Liste von Objekten `Person` mit den Feldern `name` und `nameSort` (z.B. für einen sortierbaren Nachnamen ohne Sonderzeichen). ```xml <p:dataTable value="#{bean.personen}" var="person"> <p:column headerText="Name" value="#{person.name}" sortBy="#{person.nameSort}"> <h:outputText value="#{person.name}" /> </p:column> </p:dataTable> ``` **Erklärung:** - `value="#{person.name}"` zeigt den Namen an. - `sortBy="#{person.nameSort}"` sorgt dafür, dass nach dem Feld `nameSort` sortiert wird. **Weitere Hinweise:** - Du kannst auch komplexere Ausdrücke in `sortBy` verwenden, z.B. Methodenaufrufe oder verschachtelte Felder. - Das funktioniert auch mit mehreren Spalten und verschiedenen Datentypen. **Dokumentation:** [PrimeFaces DataTable User Guide](https://primefaces.org/showcase/ui/data/datatable/sort.xhtml) So kannst du also ein anderes Feld für die Sortierung verwenden, als das, das angezeigt wird.

Accepted Answer

Um in PrimeFaces die deutsche Lokalisierung zu aktivieren, benötigst du eine JavaScript-Datei, die die Übersetzungen für die PrimeFaces-Kom bereitstellt. Diese Datei üblicherweise... [mehr]

Accepted Answer

Um in PrimeFaces die deutsche Lokalisierung zu aktivieren, benötigst du eine JavaScript-Datei, die die Übersetzungen für die PrimeFaces-Kom bereitstellt. Diese Datei üblicherweise `primefaceses.js` spezifischer `prime-locales-de`. **Inhalt JS-Datei (`primefaces-local.js`):Hier ein Beispiel für den deutschen Sprachsatz (Stand PrimeFaces 13.x): ```javascript PrimeFaces.locales['de'] = { closeText: 'Schließen', prevText: 'Zurück', nextText: 'Weiter', monthNames: ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'], monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'], dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'], dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'], dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'], weekHeader: 'KW', firstDay: 1, isRTL: false, showMonthAfterYear: false, yearSuffix: '', timeOnlyTitle: 'Nur Zeit', timeText: 'Zeit', hourText: 'Stunde', minuteText: 'Minute', secondText: 'Sekunde', millisecondText: 'Millisekunde', currentText: 'Aktuelles Datum', ampm: false, month: 'Monat', week: 'Woche', day: 'Tag', allDayText: 'Ganzer Tag', today: 'Heute', clear: 'Löschen', // ggf. weitere Übersetzungen für andere Komponenten }; ``` **Ablageort der Datei:** - Lege die Datei im Webprojekt ab, z.B. unter `resources/js/primefaces-locales.js` (bei Maven-Projekten: `src/main/webapp/resources/js/primefaces-locales.js`). - Alternativ kannst du die Datei auch direkt aus dem [PrimeFaces GitHub-Repository](https://github.com/primefaces/primefaces/tree/master/src/main/resources/META-INF/resources/primefaces/locales) beziehen. **Einbindung in die Seite:** Füge in deiner XHTML-Seite vor dem schließenden `</h:body>`-Tag oder im `<h:head>`-Bereich folgenden Eintrag hinzu: ```xml <h:outputScript library="js" name="primefaces-locales.js" target="head"/> ``` **Aktivierung der Sprache:** Stelle sicher, dass in deiner JSF-Konfiguration (z.B. in der `faces-config.xml` oder per View-Parameter) die Sprache auf Deutsch gesetzt ist: ```xml <application> <locale-config> <default-locale>de</default-locale> </locale-config> </application> ``` Oder im View: ```xml <f:view locale="de"/> ``` **Zusammenfassung:** 1. Die Datei muss die deutschen Übersetzungen wie oben enthalten. 2. Sie muss im Ressourcenpfad deines Projekts liegen (z.B. `resources/js/primefaces-locales.js`). 3. Sie muss per `<h:outputScript>` eingebunden werden. 4. Die JSF-Locale muss auf `de` stehen. Weitere Infos findest du in der [PrimeFaces Dokumentation](https://primefaces.org/documentation/).

Accepted Answer

Das Problem, dass beim PrimeFaces DatePicker trotz gesetzter Locale (z.B. `locale="de"`) und entsprechender Einstellung in der `web.xml` weiterhin englische Bezeichnungen angezeigt werden, t... [mehr]

Accepted Answer

Das Problem, dass beim PrimeFaces DatePicker trotz gesetzter Locale (z.B. `locale="de"`) und entsprechender Einstellung in der `web.xml` weiterhin englische Bezeichnungen angezeigt werden, tritt häufig auf und hat meist folgende Ursachen: 1. **Fehlende oder falsche PrimeFaces-Resource-Bund:** Faces bringt eigene Lokierungsdateien die DatePickerponente mit. Wenn diese nicht korrekt eingebunden oder nicht vorhanden sind, wird auf Englisch zurückgegriffen. 2. **Locale-Attribut überschreibt globale Einstellungen:** Die Einstellung in der `web.xml` (z.B. `<locale-config>`) legt die Standard-Locale für die JSF-Anwendung fest. Das Attribut `locale="de"` am DatePicker-Tag sollte dies eigentlich überschreiben. Wenn aber z.B. ein Tippfehler vorliegt oder die Locale nicht korrekt erkannt wird, bleibt es bei Englisch. 3. **Fehlende oder falsche JavaScript-Übersetzungen:** Der DatePicker verwendet intern JavaScript für die Lokalisierung. Die deutschen Übersetzungen werden über eine JS-Datei geladen (`primefaces-locales.js`). Wenn diese Datei nicht geladen wird, bleibt die Sprache auf Englisch. **Lösungsansätze:** - **Prüfe, ob die PrimeFaces-Locale-Resource geladen wird:** Stelle sicher, dass die Datei `primefaces-locales.js` im Browser geladen wird. Das kannst du in den Entwicklertools (Netzwerk-Tab) überprüfen. - **Setze das Locale-Attribut korrekt:** ```xml <p:datePicker locale="de" ... /> ``` oder ```xml <p:datePicker value="#{bean.date}" locale="#{view.locale}" ... /> ``` - **Überprüfe die web.xml:** Die Einstellung in der `web.xml` sieht z.B. so aus: ```xml <locale-config> <default-locale>de</default-locale> </locale-config> ``` Diese Einstellung wirkt sich auf die gesamte Anwendung aus, aber das Attribut am Tag hat Vorrang. - **PrimeFaces-Version prüfen:** In älteren Versionen von PrimeFaces gab es Bugs bei der Lokalisierung des DatePickers. Stelle sicher, dass du eine aktuelle Version verwendest: [PrimeFaces Download](https://www.primefaces.org/downloads/) - **Eigene Übersetzungen setzen (optional):** Du kannst die Übersetzungen auch manuell setzen, falls es weiterhin Probleme gibt: ```xml <p:datePicker ... > <f:attribute name="monthNames" value="Januar,Februar,März,April,..." /> <f:attribute name="dayNamesMin" value="So,Mo,Di,Mi,Do,Fr,Sa" /> ... </p:datePicker> ``` **Zusammenfassung:** Meist liegt es daran, dass die JavaScript-Lokalisierungsdatei nicht geladen wird oder das Locale-Attribut nicht korrekt gesetzt ist. Prüfe diese Punkte und aktualisiere ggf. PrimeFaces. Weitere Infos findest du in der [PrimeFaces-Dokumentation](https://primefaces.org/showcase/ui/input/datepicker/localization.xhtml).

Accepted Answer

Um den PrimeFaces DatePicker in Version 8 auf Deutsch einzustellen, gibt es zwei gängige Wege: **1. Über die `web.xml` (globale Einstellung):** Füge in deiner `web.xml` (im Verzeichni... [mehr]

Accepted Answer

Um den PrimeFaces DatePicker in Version 8 auf Deutsch einzustellen, gibt es zwei gängige Wege: **1. Über die `web.xml` (globale Einstellung):** Füge in deiner `web.xml` (im Verzeichnis `src/main/webapp/WEB-INF/`) folgende Zeile: ```xml<context-param> <param-name>primefaces.LOCALE</param-name> <param-value>de</param-value> </context-param> ``` Dadurch wird die Sprache für alle PrimeFaces-Komponenten auf Deutsch gesetzt. --- **2. Direkt im DatePicker-Tag (lokale Einstellung):** Du kannst die Sprache auch direkt im DatePicker-Tag setzen: ```xml <p:datePicker value="#{bean.date}" locale="de" /> ``` --- **Zusätzlicher Hinweis:** Stelle sicher, dass die deutsche Übersetzung in deiner PrimeFaces-Version enthalten ist. In der Regel ist das ab Werk der Fall. **Dateipositionen:** - Die `web.xml` liegt im Verzeichnis: `src/main/webapp/WEB-INF/` - Die JSF-Seite mit dem DatePicker liegt meist unter: `src/main/webapp/` (z.B. `index.xhtml`) **Weitere Infos:** [PrimeFaces Dokumentation](https://primefaces.org/documentation/v8.0/input/datepicker.html) Damit wird der DatePicker auf Deutsch angezeigt.

Accepted Answer

Im Standardverhalten zeigt der PrimeFaces DatePicker keine Kalenderwoche an, weil diese Funktion nicht automatisch aktiviert ist. Die Anzeige der Kalenderwoche (meist als "KW" oder "Wee... [mehr]

Accepted Answer

Im Standardverhalten zeigt der PrimeFaces DatePicker keine Kalenderwoche an, weil diese Funktion nicht automatisch aktiviert ist. Die Anzeige der Kalenderwoche (meist als "KW" oder "Week Number" bezeichnet) muss explizit konfiguriert werden. **Lösung:** Du kannst die Kalenderwochen im DatePicker anzeigen lassen, indem du das Attribut `showWeek` auf `true` setzt: ```xml <p:datePicker showWeek="true" /> ``` **Wichtige Hinweise:** - Die Kalenderwochen werden nur im **Popup-Modus** angezeigt, nicht im Inline-Modus. - Die Anzeige der Kalenderwoche ist ab PrimeFaces 8.0 verfügbar. Bei älteren Versionen gibt es diese Option nicht. - Die Darstellung kann je nach Theme und Lokalisierung unterschiedlich sein. **Weitere Infos:** Offizielle Dokumentation: [PrimeFaces DatePicker Dokumentation](https://www.primefaces.org/showcase/ui/input/datepicker/basic.xhtml) Falls du eine bestimmte Version von PrimeFaces nutzt, prüfe bitte, ob das Attribut `showWeek` dort unterstützt wird.

Accepted Answer

Um die Datei `primefaces/locales/primefaces-locales.js` korrekt in dein Projekt einzubinden, gehe wie folgt vor: 1. **Datei bereitstellen:** Stelle sicher, dass die Datei `primefaces-locales.js`... [mehr]

Accepted Answer

Um die Datei `primefaces/locales/primefaces-locales.js` korrekt in dein Projekt einzubinden, gehe wie folgt vor: 1. **Datei bereitstellen:** Stelle sicher, dass die Datei `primefaces-locales.js` in deinem Projekt vorhanden ist. Sie ist Teil der [PrimeFaces](https://www.primefaces.org/) Ressourcen und kann z.B. aus dem offiziellen [PrimeFaces GitHub-Repository](https://github.com/primefaces/primefaces) oder aus dem PrimeFaces-Download entnommen werden. 2. **Einbindung in JSF-Seite:** Binde die Datei in deiner JSF-Seite (z.B. `xhtml`) ein. Das geschieht am besten mit dem `<h:outputScript>`-Tag, damit JSF die Ressource korrekt verwaltet. Beispiel: ```xml <h:outputScript name="locales/primefaces-locales.js" library="primefaces" target="head"/> ``` - `name`: Pfad zur Datei innerhalb der PrimeFaces-Resourcenstruktur. - `library`: Name der Ressourcenbibliothek, in diesem Fall `"primefaces"`. - `target`: Optional, z.B. `"head"`, um das Script im `<head>`-Bereich einzubinden. 3. **Reihenfolge beachten:** Die Datei sollte **nach** der Haupt-JavaScript-Datei von PrimeFaces eingebunden werden, damit die Lokalisierungen korrekt überschrieben werden. 4. **Verwendung:** Nach der Einbindung stehen dir die Lokalisierungen zur Verfügung. Du kannst dann z.B. in deinen Komponenten die gewünschte Sprache einstellen. **Beispiel für eine vollständige Einbindung:** ```xml <h:outputScript name="primefaces.js" library="primefaces"/> <h:outputScript name="locales/primefaces-locales.js" library="primefaces"/> ``` **Hinweis:** Falls du die Datei an einem anderen Ort ablegst (z.B. im eigenen Ressourcenordner), passe den `library`- und `name`-Parameter entsprechend an. **Weitere Infos:** - [PrimeFaces Dokumentation](https://primefaces.org/documentation/) - [PrimeFaces GitHub](https://github.com/primefaces/primefaces) So stellst du sicher, dass die Lokalisierungen von PrimeFaces korrekt geladen werden.