RichFaces - Reiche Haut

RichFaces verfügt über eine neue Funktion namens Rich Skin, mit der Sie das Erscheinungsbild Ihrer Website zentral steuern können. Skin ist eine Implementierung alter CSS-Dateien auf hoher Ebene, die für den Back-End-Entwickler bequemer ist, um das Erscheinungsbild der Website zu steuern. Es stehen einige integrierte Skins zur Verfügung, die nach Ihren Wünschen angepasst werden können.

Eingebaute Haut

In der RichFaces-Komponenten-JAR-Datei sind eine Reihe integrierter Skins verfügbar. Im Folgenden finden Sie einige integrierte, reichhaltige Haut.

Default
Plain
emeraldTown
blueSky
wine
japanCherry
ruby
classic
deepMarine
NULL

Im folgenden Beispiel implementieren wir "klassische" Skin. Es ist sehr einfach, eine der oben genannten Skins zu implementieren. Bevor Sie fortfahren, fügen Sie den Skin in der Datei "web.xml" mit der unten angegebenen Codezeile hinzu. Wir können jede Haut unserer Wahl aus der obigen Liste hinzufügen. Wir müssen nur das <param-value> -Tag mit dem entsprechenden Skin-Namen ändern.

<context-param>   
   <param-name>org.richfaces.skin</param-name>
   <param-value>classic</param-value>   
</context-param>

Nachdem Sie dies hinzugefügt haben, erstellen Sie bitte eine "SkinExample.xhtml" -Datei und fügen Sie die folgende Codezeile hinzu.

<?xml version = '1.0' encoding = 'UTF-8' ?>    
<ui:composition xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://java.sun.com/jsf/html"   
   xmlns:f = "http://java.sun.com/jsf/core"   
   xmlns:ui = "http://java.sun.com/jsf/facelets"
   xmlns:a4j = "http://richfaces.org/a4j"   
   xmlns:rich = "http://richfaces.org/rich">   
   
   <f:view>   
      <h:head>   
         <title>Rich Faces Built in Skin</title>   
      </h:head>   
      
      <h:body>   
         <h:form>   
            <rich:panel style = "width:60%"> 
               <rich:tabPanel switchType = "AJAX"> 
                  <rich:tab header = "Name"> 
                     Tutorials Point 
                  </rich:tab> 
                  
                  <rich:tab header = "Features"> 
                     Best Place to learn 
                  </rich:tab> 
               </rich:tabPanel> 
            </rich:panel>           
         </h:form>   
      </h:body>
      
   </f:view>   
</ui:composition>

Sobald wir diese Seite ausgeführt haben, folgt die Ausgabe im Browser, in der sich jede Registerkarte dynamisch ausbreitet, um eine andere Ausgabe zu generieren. Sobald Sie auf die nächste Registerkarte klicken, wird eine andere Ausgabe angezeigt.

Im obigen Beispiel erstellt <rich: panel> ein Panel, in dem wir mithilfe von <rich: tab> verschiedene Registerkarten erstellen. Das <rich: tabPanel switchType = "AJAX"> bietet einen AJAX-Übergang der verwendeten Registerkarte.

Erstellen / Ändern der Haut

Skin ist nichts anderes als eine erweiterte Version des CSS-Designs, die zur Laufzeit auf die Webseite angewendet wird. Im vorherigen Abschnitt haben wir einige grundlegende integrierte Funktionen der Skin kennengelernt. In diesem Abschnitt erstellen wir unsere eigene Skin oder ändern die vorhandene Skin. Die Skin in den RichFaces kann auf den folgenden drei Ebenen angepasst werden.

Skin property file- Alle Skins werden über verschiedene Eigenschaftendateien generiert, die unter der JAR-Datei "rechfaces-a4j-4.5.17.Final" aufgeführt sind. Alles, was wir tun müssen, ist, dieselbe Eigenschaftendatei zu erstellen, sie in unserem Quellordner zu behalten und ihre Eigenschaft zu bearbeiten. Wir müssen unsere "web.xml" entsprechend ändern, um unsere neue Skin-Eigenschaft auf der Website zu berücksichtigen.

Component style sheet - Implementieren Sie eine neue CSS-Datei Ihrer Wahl und verwenden Sie sie in der Anwendung.

Overwrite style class - Sie können den Stil überschreiben, indem Sie die Stileigenschaften in der xhtml-Datei direkt erwähnen.

Betrachten wir ein Beispiel. Wir werden unsere bisherige "klassische" Haut anpassen. Erstellen Sie eine Eigenschaftendatei im Quellpaket und nennen Sie sie "custom.skin.properties". Im Folgenden sind die Einträge dieser Eigenschaftendatei aufgeführt, die aus anderen Eigenschaftendateien kopiert wurden, die in der oben genannten JAR-Datei verfügbar sind.

#Colors 
headerBackgroundColor = #black 
headerGradientColor = #DF5858 
headerTextColor = #FFFFFF 
headerWeightFont = bold 

generalBackgroundColor = #f1f1f1 
generalTextColor = #000000 
generalSizeFont = 10px 
generalFamilyFont = Arial, Verdana, sans-serif 

controlTextColor = #000000 
controlBackgroundColor = #ffffff 
additionalBackgroundColor = #F9E4E4 

shadowBackgroundColor = #000000 
shadowOpacity = 1 
panelBorderColor = #C0C0C0 
subBorderColor = #ffffff 

tabBackgroundColor = #EDAEAE 
tabDisabledTextColor = #C47979 
trimColor = #F7C4C4 
tipBackgroundColor = #FAE6B0 
tipBorderColor = #E5973E 

selectControlColor = #FF9409 
generalLinkColor = #CF0000 
hoverLinkColor = #FF0000 
visitedLinkColor = #CF0000 

# Fonts
headerSizeFont = 11px 
headerFamilyFont = Arial, Verdana, sans-serif 
tabSizeFont = 11 
tabFamilyFont = Arial, Verdana, sans-serif 
buttonSizeFont = 11 
CHAPTER 11 ■ SKINS 223 
buttonFamilyFont = Arial, Verdana, sans-serif 

tableBackgroundColor = #FFFFFF 
tableFooterBackgroundColor = #cccccc 
tableSubfooterBackgroundColor = #f1f1f1 
tableBorderColor = #C0C0C0 
tableBorderWidth = 1px 

#Calendar colors 
calendarWeekBackgroundColor = #f5f5f5 
calendarHolidaysBackgroundColor = #FFF1F1 
calendarHolidaysTextColor = #980808 
calendarCurrentBackgroundColor = #808080 
calendarCurrentTextColor = #ffffff 
calendarSpecBackgroundColor = #f1f1f1 
calendarSpecTextColor = #000000 

warningColor = #FFE6E6 
warningBackgroundColor = #FF0000 
editorBackgroundColor = #F1F1F1 
editBackgroundColor = #FEFFDA 

#Gradients 
Gradient Type = plain

Abhängig von der Fähigkeitsstufe können wir jedes Attribut in dieser Eigenschaftendatei ändern. Wir können eine neue Stilklasse hinzufügen oder die vorhandene bearbeiten. Sobald wir mit der Erstellung der neuen Eigenschaftendatei fertig sind, ist es Zeit, diese in die Datei "web.xml" einzufügen. Es folgt der Eintrag "web.xml", der auf unsere Haut verweisen soll.

<context-param> 
   <param-name>org.richfaces.skin</param-name> 
   <param-value>custom</param-value> 
</context-param>

Note - Stellen Sie sicher, dass die neue Eigenschaftendatei im Quellverzeichnis vorhanden ist. Andernfalls wird ein Laufzeitfehler mit der Meldung "NoClassFound Exception" ausgegeben.

Führen Sie die vorherige Datei mit dem Namen "SkinExample.xhtml" aus. Es folgt die Ausgabe im Browser, in der wir sehen können, dass sich das gesamte Erscheinungsbild der Website in "Ruby" geändert hat, als eine neue Eigenschaftendatei aus der Datei ruby.properties kopiert wurde.

Ändern der Haut zur Laufzeit

In diesem Beispiel wird die Skin zur Laufzeit geändert. Erstellen Sie eine Skin-Klasse wie die folgende.

import javax.faces.bean.ManagedBean; 
import javax.faces.bean.RequestScoped;  

@ManagedBean   
@RequestScoped 

public class skinBean {  
   private String skin;  
   public skinBean() { 
      this.skin="plane"; 
   }
   public String getSkin() { 
      return skin; 
   } 
   public void setSkin(String skin) { 
      this.skin = skin; 
   } 
}

Ändern Sie dann die Datei "web.xml" wie folgt, um den Skin-Namen zur Laufzeit zu füllen.

<context-param>   
   <param-name>org.richfaces.skin</param-name>
   <param-value>#{skinBean.skin}</param-value>
</context-param>

Danach müssen wir die Konfigurationsdateien der JSF-Anwendung ändern. Die Dateien befinden sich im Ordner web-INF. Fügen Sie die folgende Bean-Eigenschaft hinzu.

<managed-bean> 
   <managed-bean-name>skinBean</managed-bean-name> 
   <managed-bean-class>SkinBean</managed-bean-class>> 
   <managed-bean-scope>session</managed-bean-scope> 
   
   <managed-property> 
      <property-name>skin</property-name> 
      <value>plain</value> 
   </managed-property> 
</managed-bean>

Es folgt der xhtml-Dateicode.

<?xml version = "1.0" encoding = "UTF-8"?>  
<!DOCTYPE html> 
<html xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://java.sun.com/jsf/html" 
   xmlns:a4j = "http://richfaces.org/a4j" 
   xmlns:f = "http://java.sun.com/jsf/core" 
   xmlns:rich = "http://richfaces.org/rich">
   
   <h:head> 
      <title>TODO supply a title</title> 
   </h:head> 
   
   <h:body> 
      <h:form> 
         <div style = "display: block; float: left"> 
            <h:selectOneRadio value = "#{skinBean.skin}" border = "0" 
               layout = "pageDirection" title = "Changing skin" style = "font-size: 8; 
               font-family: comic" onchange = "submit()"> 
               <f:selectItem itemLabel = "plain" itemValue = "plain" /> 
               <f:selectItem itemLabel = "emeraldTown" itemValue = "emeraldTown" /> 
               <f:selectItem itemLabel = "blueSky" itemValue = "blueSky" /> 
               <f:selectItem itemLabel = "wine" itemValue = "wine" /> 
               <f:selectItem itemLabel = "japanCherry" itemValue = "japanCherry" /> 
               <f:selectItem itemLabel = "ruby" itemValue = "ruby" /> 
               <f:selectItem itemLabel = "deepMarine" itemValue = "deepMarine" /> 
            </h:selectOneRadio> 
         </div> 
         
         <div style = "display: block; float: left"> 
            <rich:panel > 
               <rich:panelMenu style = "font-family: monospace; font-size: 12;"> 
                  Changing skin in runtime 
               </rich:panelMenu> 
  
               <rich:panelMenu  style = "font-family: monospace; font-size: 12;"> 
                  This is a result of the modification "blueSky" skin 
               </rich:panelMenu> 
            </rich:panel> 
         </div> 
      </h:form> 
   </h:body> 
   
</html>

Der obige Code erzeugt die folgende Ausgabe im Browser.

Im obigen Beispiel wählen wir zunächst "normal" aus, daher zeigt es auf "einfach". Sobald Sie sich über das Optionsfeld ausbreiten, ändert sich die Farbe entsprechend.