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";    }