03.視圖(View/XHTML)


JSF - XML命名空間

<?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"
    xmlns:p="http://primefaces.prime.com.tr/ui">

....</html>



xmlns:f="http://java.sun.com/jsf/core"


  • JSF 核心標籤庫
    • 提供基本全務的組件樹根, 驗證, 轉換, 事件處理
    • <f:view>
<f:view>
在以JSP作為視圖技術的JSF的頁面中是必需的。因為JSF的頁面其實在RAM中模型就是一棵樹，如下圖所示。理解這點非常重要，所以是必須有根節點。Facelets 的 FaceletViewHandler 會自動創建一個UIViewRoot，如果XHTML中沒有定義的話。





xmlns:h="http://java.sun.com/jsf/html"


  • JSF HTML 組件標籤庫, 用來呈現 Web 上的 UI
    • <h:head>
      • <h:body>
        • <h:form> : HtmlForm
          • <h:inputText id="" value="" requried="ture" />：HtmlInputText
          • <h:message for="idName" />
          • <h:commandButton id="" type="sumbit" value="Sumbit" action=#{manageBean.action}" />
            • HtmlCommandButton
            • #{} : EL表達式
        • <h:messages globalOnly="ture"></h:messages>
        • <h:outputText />

xmlns:ui="http://java.sun.com/jsf/faeclets"

  • Template-snippet Framework
    • Template
    • Client
    • Snippet

EL表達式


<tag attribute="#{managedBean.property}" action="#{managedBean.action}" />



Sample code

<!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">

<h:head><title>JSF 2.0: Success</title>

<link href="./css/styles.css" 

      rel="stylesheet" type="text/css"/>

</h:head>

<h:body>

<div align="center">

<table border="5">

  <tr><th class="title">JSF 2.0: Success</th></tr>

</table>

<p/>


<h2>If you got this page after clicking on button in test.jsf,

then your JSF 2.0 app is configured and deployed correctly.</h2>


</div></h:body></html>