JSF HTML Tags

Biblioteka jsf_html udostępnia HTML-owe elementy GUI, znaczniki dla wszystkich kombinacji UIComponent i rendererów z HTML RenderKit zdefiniowanych w specyfikacji JavaServer Faces. Jednemu komponentowi może odpowiadać więcej niż jeden znacznik, np. zarówno commandButton, jak commandLink odpowiadają funkcjonalności UICommand.

Ważniejsze znaczniki:

• commandButton, commandLink (UICommand): komponent wykonujący akcję. Można dla niego określić akcję (wprost lub jako metodę beana)

  <h:commandButton id="submit"
    action="#{userNumberBean.getOrderStatus}" value="Submit" />
  <h:commandButton value="#{bundle.Submit}"
    action="success"/>
  

• dataTable, column (UIData)
  dataTable służy do iteracji po danych: liście/tablicy beanów bądź pojedynczym beanie, java.sql.ResultSet/RowSet etc. (generalnie: czymś, co ma javax.faces.model.DataModel); column reprezentuje kolumnę

  <h:dataTable id="items"
    value="#{cart.items}"
    var="item">
    <h:column >
       <h:inputText id="quantity" size="4"
          value="#{item.quantity}" >
       </h:inputText>
    </h:column>
  </h:dataTable>
  

  value mówi, po czym się iterujemy, var pozwala nazwać ,,bieżący'' element, by odwoływać się do niego; można ustawić, które rzędy chcemy wyświetlać przez first (numer pierwszego wyświetlanego) i rows (liczba wyświetlanych)
• message, messages (UIMessage, UIMessages) Informacje o błędach - message wyświetli błąd dla pojedynczego komponentu (określonego przez atrybut for), messages wszystkie błędy dla strony.

  <h:message
    style= "color: red;
    font-family: 'New Century Schoolbook', serif;
    font-style: oblique;
    text-decoration: overline" id="errors1" for="userNo"/>
  <h:inputText id="userNo" value="#{UserNumberBean.userNumber}">
    <f:validateLongRange minimum="0" maximum="10" />
  

• panelGrid - wyświetla tabelkę, panelGroup - zbiera komponenty pod jednym rodzicem (np. tworząc rząd tabelki)

  <h:panelGrid columns="2" 
    styleClass="list-background"
    title="#{bundle.Checkout}">
    <h:outputText value="#{bundle.Name}" />
    <h:inputText id="name" size="50"
       value="#{cashier.name}"
       required="true">
       <f:valueChangeListener
          type="listeners.NameChanged" />
    </h:inputText>
    <h:message styleClass="validationMessage" for="name"/>
    <h:outputText value="#{bundle.CCNumber}"/>
  </h:panelGrid>
  

Pewna liczba własności jest wspólna dla wszystkich (czy prawie wszystkich) komponentów, są to np.:

• id - unikalna nazwa komponentu; jeśli nie będzie podana, a będzoe potrzebna (czyli inny komponent/klasa po stronie serwera odwołują się do tego komponentu) implementacja JSF wygeneruje ją automatycznie
• value - wartość komponentu
• style - styl CSS odnoszący się do komponentu, może być wklepany nawet bezpośrednio:

  <h:outputText style= "color: red" value="#{UserNumberBean.minimum}"/>
  

• styleClass - klasa CSS zawierająca definicję stylu:

  <h:outputText styleClass="subtitle"  value="just a subtitle"/>
  

• immediate - czy wyzwalane zdarzenia, walidacja czy konwersja (zależnie od komponentu) mają następować podczas Apply Request Value Phase czy później, w zwykłej (patrz rysunek poniżej) kolejności.
  Np. ustawienie immediate na true zarówno dla linka, jak i dla jakiegoś pola, którego wartość można wprowadzić spowoduje, że nowa wartość pola będzie dostępna dla zdarzeń odpalonych przez kliknięcie na link (po wprowadzeniu nowej wartości). W podobnym scenariuszu jeśli dla pola nie ustawimy immediate (false jest defaultem), dla zdarzeń odpalonych przez link dostępna będzie stara wartość pola.
  
• binding - związuje komponent z property beana:

  <inputText binding="\#{UserNumberBean.userNoComponent}" />
  

• converter, validator - łatwo się domyślić...

  <h:inputText id="userNo"
    value="\#{UserNumberBean.userNumber}"
    validator="\#{UserNumberBean.validate}" />
  

• rendered - definiuje warunki, przy których komponent ma być wyświetlany

  <h:commandLink id="check" rendered="#{cart.numberOfItems > 0}">
    <h:outputText value="#{bundle.CartCheck}"/>
  </h:commandLink>
  

Informacje dodatkowe:

• CSS
  Przede wszystkim warto zauważyć, że jakkolwiek renderery definiują sposób wyświetlania komponentu, to nie ma oczywiście sensu definiować praktycznie takich samych rendererów, z których jeden wyświetli coś na czerwono, a drugi na niebiesko. Do określenia szczegółów sposobu wyświetlania lepiej użyć CSS.
  Poza określaniem stylu CSS bezpośrednio lub przez wymienienie klasy (atrybuty style i styleClass) dla niektórych znaczników jest możliwości dokładania CSS są jeszcze bardziej rozbudowane. Mowa tu przede wszystkim o dataTable i panelGrid, dla których można określić klasy CSS dla kolumn i wierszy (a także np. dla nagłówka czy stopki).
  Klasy dla wierszy i kolumn stosowane są w kolejności podania. Jeśli klas dla kolumn czy wierszy będzie mniej niż kolumn czy wierszy w rzeczywistości, to po wyczerpaniu klas stosowane będą klasy ponownie od pierwszej podanej poczynając - w ten sposób można np. zdefiniować inne wyświetlanie rzędów parzystych i nieparzystych.

  <h:dataTable id="items"
    columnClasses="list-column-center, list-column-left,
       list-column-right, list-column-center"
    footerClass="list-footer"
    rowClasses="list-row-even, list-row-odd"
    styleClass="list-background"
    value="#{cart.items}"
    var="item">
    <h:column >
      <f:facet name="footer"
         <h:panelGroup>
            <h:outputText value="#{bundle.Subtotal}"/>
            <h:outputText value="#{cart.total}" />
               <f:convertNumber type="currency" />
            </h:outputText>
         </h:panelGroup>
      </f:facet>
      <h:inputText id="quantity" size="4"
          value="#{item.quantity}" >
      </h:inputText>
    </h:column>
  </h:dataTable>
  

• JavaScript
  Wiele tagów ma atrybuty takie jak onclick (jak commandButton) czy onmouseover (np. graphicImage). Tu jest lista takich atrybutów. Pozwalają one dołożyć do JSF JavaScript:

  <h:commandButton onclick="history.go(-1)" value="Go Back!"/>
  

  Można też skonfigurować np. ListBoxa tak, by strona była submitowana bezpośrednio po wyborze jednego z elementów - by to osiągnąć, należy dodać coś w stylu

  onchange="this.form.submit()"