JSF中處理組件的顯示和隱藏、數據的排序等相對其它框架非常輕易和直接了當， 常被教科書作為實例分析和講解。下面這個實例來自名為《 Mastering javaServer Faces中文版》的書（略有改動），通過組件的顯示（或隱藏）及數據的排序來講解JSF中UI組件的用法。

　　先看看它的界面共三個（1）index.jsp,

（2）ModifyInvoice.jsp，這個修改發票界面有一個顯示（隱藏）按鈕，點擊時可顯示（或隱藏）部分組件。

（3）ViewInvoices.jsp，顯示全部發票的列表。并可以按發票序號和數額排序。

　　主要看看這個頁面中，當點擊發票的發票序號時如何正確返回到ModifyInvoice.jsp頁面（在我們自己的實踐當中一定要碰到的問題啊，通常的做法是超鏈接當中帶參數）。當然首先要在faces-config.xml文件中定義導航法則：


  /ViewInvoices.jsp
  
    modifyInvoice
    /ModifyInvoice.jsp
  

　　從源碼可以知道這個頁面通過一個 標記來顯示所有發票。

...
   value="#{invoice.invoiceNumber}"    action="#{viewInvoicesPage.modifyInvoice}">
  
 
.....

　　從上看出，當我們點擊發票的序號時，JSF調用viewInvoicesPage.modifyInvoice方法。

 public String modifyInvoice() {   FacesContext facesContext = FacesContext.getCurrentInstance();           UIViewRoot root = facesContext.getViewRoot();   UIData table = (UIData) root.findComponent("invoiceForm").findComponent("table");   InvoiceBean invoice = (InvoiceBean) table.getRowData();   ValueBinding binding = 
　　facesContext.getapplication().createValueBinding("#{modifyInvoicePage}");   ModifyInvoicePage detailPage = (ModifyInvoicePage) binding.getValue(facesContext);       detailPage.setInvoice(invoice);           return "modifyInvoice";    }