Css dla primefaces

Pisząc aplikację z wykorzystaniem primefaces, często dochodzimy do momentu, gdy stwierdzamy, że wygląd aplikacji nas nie satysfakcjonuje. Mamy wtedy kilka opcji. Oto moje propozycje w kolejności od gotowców, do wymagających najwięcej wkładu własnego. Możemy:

1. skorzystać z jednej z dostępnych skórek dla primefaces. Podgląd dostępnych skórek: http://www.primefaces.org/showcase/ (guzik PFThemes, z pędzelkiem). Aby do aplikacji dołączyć wybraną skórkę wystarczy tylko dodać:

•  w pliku pom.xml:

<dependency>
      <groupId>org.primefaces.themes</groupId>
      <artifactId>south-street</artifactId>
</dependency>

• w web.xml:

<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>south-street</param-value>
</context-param>


2. stworzyć własny szablon stylu korzystając z generatora: http://jqueryui.com/themeroller/
    (styl stworzony w ten sposób jest bardzo ogólny, detale nie są zdefiniowane)

3. stworzyć własny css "od zera".

Decydując się stworzyć własną skórkę, warto nadpisać klasy stylów primefaces, aby styl był globalny i spójny, a tym samym, by uniknąć nazywania podstawowych i powtarzalnych elementów, co prowadziłoby do niepotrzebnego bałaganu na stronce i konieczności pamiętania, że dany element musi mieć zdefiniowaną daną klasę.

Robiąc to, warto mieć na względzie poniższe uwagi:

• należy dodać styl css, który "zresetuje" niepożądane cechy zdefiniowanych stylów w primefaces,
• nadpisywać klasy zdefiniowane w primefaces, tak by nie nazywać elementów powtarzalnych.

Jeżeli chcemy by jakiś element powtarzalny miał inny styl np. guzik w panelu akcji w nagłówku miał inny kolor niż w innych miejscach aplikacji, nie definiujmy klasy "greenButton", tylko klasę "headerPanel" i określmy styl guzika w tej klasie, korzystając z globalnej nazwy guzika, a następnie w htmlu stwórzmy komponent "headerPanel", który będzie wspólny dla wszystkich nagłówków, pozwoli to zachować spójność w całej aplikacji i łatwość wprowadzania zmian.

•  warto korzystając z punktu 2. wygenerować sobie ogólny szablon (w tym np. ikonki), pozwoli to skrócić czas pracy. Mając taki szablon, można skupić się na detalach i personalizacji.

Miłej zabawy!