JSF中處理組件的顯示和隱藏、數(shù)據(jù)的排序等相對(duì)其它框架非常輕易和直接了當(dāng)， 常被教科書(shū)作為實(shí)例分析和講解。下面這個(gè)實(shí)例來(lái)自名為《 Mastering javaServer Faces中文版》的書(shū)（略有改動(dòng)），通過(guò)組件的顯示（或隱藏）及數(shù)據(jù)的排序來(lái)講解JSF中UI組件的用法。

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

（2）ModifyInvoice.jsp，這個(gè)修改發(fā)票界面有一個(gè)顯示（隱藏）按鈕，點(diǎn)擊時(shí)可顯示（或隱藏）部分組件。

（3）ViewInvoices.jsp，顯示全部發(fā)票的列表。并可以按發(fā)票序號(hào)和數(shù)額排序。

　　主要看看這個(gè)頁(yè)面中，當(dāng)點(diǎn)擊發(fā)票的發(fā)票序號(hào)時(shí)如何正確返回到ModifyInvoice.jsp頁(yè)面（在我們自己的實(shí)踐當(dāng)中一定要碰到的問(wèn)題啊，通常的做法是超鏈接當(dāng)中帶參數(shù)）。當(dāng)然首先要在faces-config.xml文件中定義導(dǎo)航法則：


  /ViewInvoices.jsp
  
    modifyInvoice
    /ModifyInvoice.jsp
  

　　從源碼可以知道這個(gè)頁(yè)面通過(guò)一個(gè) 標(biāo)記來(lái)顯示所有發(fā)票。

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

　　從上看出，當(dāng)我們點(diǎn)擊發(fā)票的序號(hào)時(shí)，JSF調(diào)用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";    }