鍍金池/ 教程/ HTML/ JSF輸出樣式
JSF數(shù)據(jù)表(h:dataTable)添加刪除
JSF <h:commandLink>標(biāo)簽
JSF應(yīng)用程序入門示例
JSF數(shù)據(jù)表(ui:repeat)創(chuàng)建表
JSF列表框
JSF數(shù)據(jù)表(h:dataTable)DataModel排序數(shù)據(jù)
JSF復(fù)合組件
JSF <h:inputText>標(biāo)簽
JSF表單組合框
JSF <h:messages>標(biāo)簽
JSF <h:message>標(biāo)簽
JSF轉(zhuǎn)換日期時(shí)間
JSF JDBC連接
JSF <h:inputHidden>標(biāo)簽
JSF多選列表框
JSF <h:inputSecret>標(biāo)簽
JSF自定義轉(zhuǎn)換器
JSF <f:ajax>標(biāo)簽
JSF生命周期
JSF可重定位資源
JSFJSF用戶界面組件模型
JSF <h:attribute>標(biāo)簽
JSF驗(yàn)證器標(biāo)簽
JSF驗(yàn)證字符串長(zhǎng)度
JSF轉(zhuǎn)換器標(biāo)簽
JSF托管bean（Managed Bean）
JSF值變化的事件
JSF UI組件示例
JSF MySQL CURD實(shí)例
JSF數(shù)據(jù)表(h:dataTable)排序數(shù)據(jù)
JSF <h:graphicImage>標(biāo)簽
JSF <f:convertNumber>標(biāo)簽
JSF教程
JSF托管Bean
JSF輸出腳本
JSF <h:outputText>標(biāo)簽
JSF操作事件
JSF驗(yàn)證正則表達(dá)式
JSF數(shù)據(jù)表(h:dataTable)行號(hào)
JSF <h:setPropertyActionListener>標(biāo)簽
JSF注入托管bean實(shí)例
JSF <h:commandButton>標(biāo)簽
JSF Web資源
JSF <h:inputFile>標(biāo)簽
JSF驗(yàn)證浮點(diǎn)數(shù)值范圍
JSF Facelets視圖
JSF是什么？
JSF Facelets模板
JSF的特性（特點(diǎn)）
JSF自定義驗(yàn)證器類
JSF單選按鈕
JSF輸出樣式
JSF數(shù)據(jù)表(h:dataTable)更新數(shù)據(jù)
JSF HTML5友好標(biāo)記
JSF表單復(fù)選框(CheckBox)示例
JSF <h:form>標(biāo)簽
JSF Facelets技術(shù)介紹
JSF輸出格式化
JSF <h:inputtextarea>標(biāo)簽
JSF驗(yàn)證整數(shù)范圍
JSF <h:panelGrid>標(biāo)簽

JSF輸出樣式

<h:outputStylesheet>標(biāo)簽用類型“text/css”呈現(xiàn)類型為“link”的HTML元素。

此標(biāo)簽將外部樣式表文件添加到JSF頁(yè)面。

以下JSF標(biāo)簽 - 

<h:outputStylesheet library="css" name="styles.css"  />

被渲染成如下HTML代碼 -

<link type="text/css" rel="stylesheet" 
   href="/helloworld/javax.faces.resource/styles.css.jsf?ln=css" />

例子

以下是文件：UserBean.java 中的代碼 - 

package com.yiibai;

import java.io.Serializable;
import java.math.BigDecimal;
import java.util.ArrayList;
import java.util.Arrays;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name="book")
@SessionScoped
public class UserBean implements Serializable{
  private static final long serialVersionUID = 1L;
  String bookNo;
  String productName;
  BigDecimal price;
  int qty;
  public String getBookNo() {
    return bookNo;
  }
  public void setBookNo(String bookNo) {
    this.bookNo = bookNo;
  }
  public String getProductName() {
    return productName;
  }
  public void setProductName(String productName) {
    this.productName = productName;
  }

  public BigDecimal getPrice() {
    return price;
  }

  public void setPrice(BigDecimal price) {
    this.price = price;
  }

  public int getQty() {
    return qty;
  }

  public void setQty(int qty) {
    this.qty = qty;
  }

  private static final ArrayList<Book> bookList = 
    new ArrayList<Book>(Arrays.asList(

    new Book("1", "CSS", new BigDecimal("123.12"), 1),
    new Book("2", "HTML", new BigDecimal("321.12"), 2),
    new Book("3", "SQL", new BigDecimal("12333.33"), 8),
    new Book("4", "Javascript", new BigDecimal("1233.33"), 3),
    new Book("5", "Web", new BigDecimal("123.22"), 10)
  ));

  public ArrayList<Book> getBookList() {
    return bookList;
  }
  public String addAction() {
    Book book = new Book(this.bookNo, this.productName, 
      this.price, this.qty);
    bookList.add(book);
    return null;
  }
  public String deleteAction(Book book) {

    bookList.remove(book);
    return null;
  }

    public static class Book{

      String bookNo;
      String productName;
      BigDecimal price;
      int qty;

      public Book(String bookNo, String productName, 
          BigDecimal price, int qty) {
        this.bookNo = bookNo;
        this.productName = productName;
        this.price = price;
        this.qty = qty;
      }

      public String getBookNo() {
        return bookNo;
      }
      public void setBookNo(String bookNo) {
        this.bookNo = bookNo;
      }
      public String getProductName() {
        return productName;
      }
      public void setProductName(String productName) {
        this.productName = productName;
      }
      public BigDecimal getPrice() {
        return price;
      }
      public void setPrice(BigDecimal price) {
        this.price = price;
      }
      public int getQty() {
        return qty;
      }
      public void setQty(int qty) {
        this.qty = qty;
      }
    }

}

以下是文件： table-style.css 的代碼 - 

.book-table-header{
  bbook-bottom:1px solid #BBB;
  padding:16px;
  color: red;
}

.book-table-odd-row{
  bbook-top:1px solid #BBB;
}

.book-table-even-row{
  bbook-top:1px solid #BBB;
}

以下是文件： index.xhtml 的代碼 - 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html 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">
    <h:head>
      <h:outputStylesheet library="css" name="table-style.css"  />
    </h:head>
    <h:body>
      <h:form>
        <h:dataTable value="#{book.bookList}" var="o"
          styleClass="book-table"
          headerClass="book-table-header"
          rowClasses="book-table-odd-row,book-table-even-row">
          <h:column>
            <f:facet name="header">Book No</f:facet>#{o.bookNo}
          </h:column>
          <h:column>
            <f:facet name="header">Product Name</f:facet>#{o.productName}
          </h:column>
          <h:column>
            <f:facet name="header">Price</f:facet>#{o.price}
          </h:column>
          <h:column>
            <f:facet name="header">Quantity</f:facet>#{o.qty}
          </h:column>
          <h:column>
            <f:facet name="header">Action</f:facet>
            <h:commandLink value="Delete" action="#{book.deleteAction(o)}" />
          </h:column>
        </h:dataTable>
        <h3>Enter Book</h3>
        <table>
        <tr>
          <td>Book No :</td>
          <td><h:inputText size="20" value="#{book.bookNo}" /></td>
        </tr>
        <tr>
          <td>Product Name :</td>
          <td><h:inputText size="20" value="#{book.productName}" /></td>
        </tr>
        <tr>
          <td>Quantity :</td>
          <td><h:inputText size="20" value="#{book.price}" /></td>
        </tr>
        <tr>
          <td>Price :</td>
          <td><h:inputText size="20" value="#{book.qty}" /></td>
        </tr>
        </table>
        <h:commandButton value="Add" action="#{book.addAction}" />
      </h:form>
    </h:body>
</html>

運(yùn)行測(cè)試

這里使用NetBeans創(chuàng)建一個(gè)名稱為：OutputStylesheet 的Web項(xiàng)目。并使用以提及的代碼文件。

Tomcat啟動(dòng)完成后，在瀏覽器地址欄中輸入以下URL。

http://localhost:8084/OutputStylesheet/

訪問(wèn)上面URL應(yīng)該會(huì)看到以下結(jié)果 -