Ch6. Page Navigation Steps 例題 Ch7. Managed-Bean What are bean? Steps in Using JSF A Simple Exa

Transcription

1 目錄 Phase 1. 基本安裝... 3 Ch1. 安裝 Jboss Studio Developer... 3 Ch2. 安裝 Application Server Request Files: Install Jboss Epp Server Add server to Jboss Developer Studio... 4 Ch3. Create a war Create a JSF Web App Create a portlet project Phase 2. Web Component Ch4. Html-Library Most common Element Shared and Expected attributes h:form h:inputtext h:inputsecret h:commandbutton h:commandlink Element can Invoke Value change Listeners Element that display lists of items Output Value 例題 1. 使用者登入畫面 Ch5. Use CSS Why CSS(Cascading Style Sheets) Declare CSS CSS Syntax HTML Element Class Selector( 類別選擇器 ) Id Selector 將樣式表用到網頁上 Embedding a Style Sheet 段落屬性的設定 背景屬性設定 邊框屬性設定 區塊屬性設定 定位設定 文字屬性的設定... 41

2 Ch6. Page Navigation Steps 例題 Ch7. Managed-Bean What are bean? Steps in Using JSF A Simple Example 例題 : Ch8. Event-Handling Action controllers v.s event listeners Types of Event Handler Action Listener Value Change Listener Immediate Event Ch9. Properties-Files Loading properties file Parameterized message Internationalized message 例題 C10. Validation Validation approaches Manual Validation Implicit automatic validation Explicit Validation 例題 Ch11. Rich Faces component Adding RichFaces libraries into the project Web.xml Example Page Rich Components Reference Phase 3. EJB Phase SOA&JBPM... 73

3 Phase 1. 基本安裝 Ch1. 安裝 Jboss Studio Developer Ch2. 安裝 Application Server 2.1 Request Files: 1. Use Jre jboss-epp Install Jboss Epp Server 1. Install Java run time Path: \\intra6\software_tools\java Source\ jre-6u24-windows-x64 2. Setting the JAVA_HOME in environment

4 3. Copy jboss epp 5.2 From server 4. Copy the jdbc jar Source : \\intra6\software_tools\oracle\jdbc\ojdbc5.zip To : 5. Update gatein_ds.xml 2.3 Add server to Jboss Developer Studio Ch3. Create a war 3.1 Create a JSF Web App 1. 點 File->New->Project 2. 找資料夾 Web-> 點在 Dynamic Web Project->Next

5 3.1.2 Modify configuration 說明如下 : < 圖 > 1.Project name:, 例如下圖範例的 mytest-war 2.Target runtime: 選 JBoss EPP 5.x Runtime 3.Dynamic web module version:2.5 4.Configuration: 點 Modify Project Face 修改以下 : 4.1 Java 修改 Version 選 打勾 JavaScript 4.3 打勾 JavaServer Faces 修改 Version 選 1.2 請見 < 圖 >, 設定完按 Next> 5. 出現 Open Associalted Perspective< 圖 >, 按 No < 圖 >

6 < 圖 >

7 < 圖 > Create a test page 1. 點在 WebContent, 按右鍵 New->Other-> 找資料夾 Web->JSP File->Next-> 輸入 File name, 按 Finish

8 2. 點開 index.jsp 第一行 Charset 修改為 UTF Deploy war 1. 點 test-war 右鍵 點 Export 2. 選 Web WAR File, 按 Next < 圖 > 3. 指定要路徑檔名, 要選 JBoss EPP 5.x Runtime, 按 Finish < 圖 > 4. 將檔案 copy 至 \JBOSS\JBoss_EPP_5.0.1GA\jboss-epp GA\jboss-epp-5.0\jboss-as\server\defaul t_dfi\deploy 底下 5. 點 JBoss EPP 5.x Runtime Server 右鍵 Restart < 圖 > < 圖 >

9 < 圖 > < 圖 >

10 3.1.5 Open the page 開啟 IE, 輸入

11 3.2 Create a portlet project New a dynamic web project Modify configuration

12 3.2.3 Required Library Jsf-facelets B1.jar 請從其他專案 Copy 過來

13 3.2.4 Edit Faces-config.xml & web.xml Faces-config.xml web.xml Create a test page 1. Add index.xhtml under WebContent 2. 新增 index.xhtml A. New a xhtml page

14 B. Add Content 在 <ui:composition> 之間

15 3.2.6 Create portlet.xml <portlet> <portlet-name>myhelloportlet</portlet-name> <portlet-class>javax.portlet.faces.genericfacesportlet</portlet-class> <init-param> <name>javax.portlet.faces.defaultviewid.view</name> <value>/index.xhtml</value> </init-param> <init-param> <name>javax.portlet.faces.preserveactionparams</name> <value>true</value> </init-param> <init-param> <name>javax.portlet.faces.defaultviewid.edit</name> <value>/index.xhtml</value> </init-param> <init-param> <name>javax.portlet.faces.defaultviewid.help</name> <value>/index.xhtml</value> </init-param> <expiration-cache>-0</expiration-cache> <supports> <mime-type>text/html</mime-type> </supports> <portlet-info> <title>items</title> <short-title>items</short-title> </portlet-info> </portlet>

16 3.2.7 Deploy war Log in portal as root Register a application

17 選擇匯入應用程式

18 3.2.7 Create portal page Edit portal page Add portlet

19 3.2.8 Add Rich faces Component Add Requires Library Setup web.xml <!-- Must Have --> <context-param> <param-name>org.ajax4jsf.xmlparser.order</param-name> <param-value>neko</param-value> </context-param> <context-param> <param-name>org.richfaces.control_skinning</param-name> <param-value>enable</param-value> </context-param> <context-param> <param-name>org.richfaces.loadstylestrategy</param-name> <param-value>all</param-value> </context-param> <context-param> <param-name>org.richfaces.loadscriptstrategy</param-name> <param-value>all</param-value> </context-param> <context-param> <param-name>org.richfaces.skin</param-name> <param-value>default</param-value> </context-param> <filter> <display-name>ajax4jsf Filter</display-name> <filter-name>ajax4jsf</filter-name> <filter-class>org.ajax4jsf.filter</filter-class> <init-param> <param-name>createtempfiles</param-name> <param-value>true</param-value> </init-param>

20 <init-param> <param-name>maxrequestsize</param-name> <param-value> </param-value> </init-param> </filter> <filter-mapping> <filter-name>ajax4jsf</filter-name> <servlet-name>faces Servlet</servlet-name> <dispatcher>request</dispatcher> <dispatcher>forward</dispatcher> <dispatcher>include</dispatcher> </filter-mapping> Setup faces-config.xml

21 Phase 2. Web Component Ch4. Html-Library ndex.html 4-1 Most common Element 4.2 Shared and Expected attributes

22 4.3 h:form

23 4.4 h:inputtext 4.5 h:inputsecret

24 4.6 h:commandbutton 4.7 h:commandlink

25 4.8 Element can Invoke Value change Listeners 4.9 Element that display lists of items The value of f:sleectitems 1. A List or array of java.faces.model.selectitem

26 2. A Map TreeMap selectitem= new TreeMap() selectitem.put( Item Value, Item Label ); Output Value 4.10 例題 1. 使用者登入畫面 建立一個 h:form 包含以下元件 建立一個 h:form 包含以下元件

27 1. 程式如下 : ( 見 行 ) 2. <%@ page language="java" contenttype="text/html; charset=utf-8" pageencoding="big5"%> 3. <%@ taglib prefix="f" uri=" 4. <%@ taglib prefix="h" uri=" 5. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " 6. <html> 7. <head> 8. <meta http-equiv="content-type" content="text/html; charset=big5"> 9. <title> 輸入帳號密碼 </title> 10. <style> 11..bannerTitle {color:blue;} 12. #Title {color:red;} 13. </style> 14. </head> 15. <body> 16. <f:view> 17. <h:form id="mytestform" > 18. <h:outputtext value=" 使用者名稱 :" id="userid" styleclass="bannertitle"/> 19. <h:inputtext required="true" value="lisa01.chen" /> <h:outputtext value=" 密碼 :" id="password" styleclass="bannertitle"/> 22. <h:inputsecret required="true" value="1234" onchange="submit"/> 23. <h:commandbutton value=" 確定 " id="submit"/> 24. <h:commandbutton value=" 取消 " id="cancel"/> 25. </h:form> 26. </f:view> 27. </body> 28. </html>

28 Ch5. Use CSS 5.1 Why CSS(Cascading Style Sheets) 減少圖檔的使用, 便可以達到文字變化的需求, 加快網頁傳輸的速度 集中管理樣式, 當修改時只需針對樣式修改即可 共享樣式設定,CSS 可另外存檔, 供每一個網頁取用共享 5.2 Declare CSS CSS Syntax HTML Element 設定於 HTML 的標籤上, 網頁上所有的標籤都會套用 EX:

29 5.2.2 Class Selector( 類別選擇器 ) Id Selector

30 5.3 將樣式表用到網頁上 Inlining Style 在每個 HTML 標籤中, 都可用 STYLE 參數, 將 CSS 設定於後, EX.. <DIV STYLE="position:absolute; width:20px; height:20px"> Embedding a Style Sheet 宣告方式為使用 <STYLE>...</STYLE> EX: <STYLE TYPE="text/css"> 指明為 CSS 樣式, 另一種為 text/javascript 樣式 <!-- H1 { color:blue; } 其他樣式 --> </STYLE> </HEAD> 如要許多標籤都套用同一組設定, 可用如下語法.. H1,H2,H3,FONT {color:#ff0000; font-family:arial} Linking to an External Style Sheet An external style sheet may be linked to an HTML document through HTML's LINK element: <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen> <LINK REL=StyleSheet HREF="color-8b.css" TYPE="text/css" TITLE="8-bit Color Style" MEDIA="screen, print"> <LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen, print"> <LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=aural>

31 5.3.4 Importing a Style Sheet A style sheet may be imported with statement. This statement may be used in a CSS file or inside the STYLE element: <STYLE TYPE="text/css" MEDIA="screen, projection"> url(/stylesheets/punk.css); DT { background: yellow; color: black } --> </STYLE> Note that other CSS rules may still be included in the STYLE element, but that statements must occur at the start of the style sheet. Any rules specified in the style sheet itself override conflicting rules in the imported style sheets. For example, even if one of the imported style sheets contained DT {background: aqua}, definition terms would still have a yellow background 例題 1. 建立一個 CSS FILE, 並將使用者登入畫面套用此一 CSS 於 WebContent\css\ 新增 css file, 命名為 mytestcss, 輸入如下畫面程式碼

32 2. 在 index.jsp 的 <head> 之間加入 LINK 文字如下 3. 開啟 IE 後, 畫面文字就會套用 CSS 5.4 段落屬性的設定 利用這些設定可以輕易的控制字距 行高 縮排 凸排 水平對齊 垂直對齊等 LETTER-SPACING 功能 : 設定文字間隙 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px ) 語法 : { LETTER-SPACING : NORMAL ( length ) }

33 範例 : {LETTER-SPACING:10pt} 此性質可設定字距, 也就是字與字的間隔, 只需指定一個長度單位給它, 如 cm mm in pt px em ex 等等, 或用 normal 特徵字設為預設值 如 letter-spacing=3px, 則設定字距為 3px LINE-HEIGHT 功能 : 設定文字行列高度 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比% ) 語法 : { LINE-HEIGHT : NORMAL ( number ) ( length ) ( percentage ) } 範例 : {LINE-HEIGHT:10pt} 此性質可設定列高, 可指定特徵字 normal 設為預設值, 或指定含單位的長度值, 或百分比 ( 參照於父元件 ) 均可 如 line-height:3px, 則設定列高為 3px TEXT-ALIGN 功能 : 設定調整文字 ( 可設左邊 右邊 置中 整齊 ) 語法 : { TEXT-ALIGN : LEFT RIGHT CENTER JUSTIFY } 範例 : {TEXT-ALIGN:CENTER} 這個性質可決定文句在區塊內的水平對齊方式, 可用值有 left right center justify 如 text-align:center, 則文字水平置中 5.5 背景屬性設定 背景性質設定可說是 CSS 最強悍的地方, 有了這些 CSS, 我們甚至可以在一段文字, 或一格表格中, 套用不同的背景 BACKGROUND 功能 : 設定背景圖片 顏色 混合 透空 捲動 位置 重複語法 : { BACKGROUND : TRANSPARENT ( scroll ) ( color ) URL ( url ) ( position ) ( repeat ) } BACKGROUND-ATTACHMENT 功能 : 設定背景圖片是否捲動 ( 分為 : 捲動 固定 ) 語法 : { BACKGROUND-ATTACHMENT : SCROLL FIXED } BACKGROUND-COLOR 功能 : 設定背景顏色 透空語法 : { BACKGROUND-COLOR : TRANSPARENT ( color ) } ( color ) 可為顏色名稱 ( 16 種 ) 或 16 進制表示法 - #RRGGBB ( 00 暗 ~FF 亮 ) #RGB ( 0 暗 ~F 亮 ) 表紅綠藍強度 範例 : {BACKGROUND-COLOR:#FF0000} BACKGROUND-IMAGE

34 功能 : 設定背景圖片語法 : { BACKGROUND-IMAGE : NONE URL ( url ) } 範例 : {BACKGROUND-IMAGE:URL(1.JPG)} BACKGROUND-POSITION 功能 : 設定背景位置 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比 % ) 語法 : { BACKGROUND-POSITION : TOP MIDDLE BOTTOM LEFT CENTER RIGHT ( length ) ( position ) } BACKGROUND-REPEAT 功能 : 設定背景重複填滿方式語法 : { BACKGROUND-REPEAT : REPEAT REPEAT-X REPEAT-Y NO-REPEAT } 5.6 邊框屬性設定 在 CSS 中, 幾乎所有的元件都可以使用框線設定, 不像 HTML 般, 只有表格才可使用框線 BORDER 功能 : 設定邊框語法 : { BORDER : ( border-width ) ( border-style ) ( color ) } ( border-width ) - 可設薄 普通 厚 長度 - 單位屬性 : 點 pt 英寸 in 公分 cm 像素 px ( border-style ) - 可設無 實線 雙線 溝線 脊線 嵌入線 浮出線 ( color ) - 可設為顏色名稱 ( 16 種 ) 或 16 進制表示法 - #RRGGBB ( 00 暗 ~FF 亮 ) #RGB ( 0 暗 ~F 亮 ) 表紅綠藍強度 BORDER-BOTTOM 功能 : 設定下邊框語法 : { BORDER-BOTTOM : ( border-bottom-width ) ( border-style ) ( color ) } 範例 : {BORDER-BOTTOM:GROOVE #00FF00} BORDER-BOTTOM-COLOR 功能 : 設定下邊框顏色, 可設為顏色名稱 ( 16 種 ) 或 16 進制表示法 - #RRGGBB ( 00 暗 ~FF 亮 ) #RGB ( 0 暗 ~F 亮 ) 表紅綠藍強度語法 : { BORDER-BOTTOM-COLOR : ( color ) } 範例 : {BORDER-BOTTOM-COLOR:BLUE} BORDER-BOTTOM-STYLE 功能 : 設定下邊框樣式 ( 可設無 實線 雙線 溝線 脊線 嵌入線 浮

35 出線 ) 語法 : { BORDER-BOTTOM-STYLE : NONE SOLID DOUBLE GROOVE RIDGE INSET OUTSET } 範例 : {BORDER-BOTTOM-STYLE:INSET} BORDER-BOTTOM-WIDTH 功能 : 設定下邊框寬度 ( 可設薄 普通 厚 長度 - 單位屬性 : 點 pt 英寸 in 公分 cm 像素 px ) 語法 : { BORDER-BOTTOM-WIDTH : THIN MEDIUM THICK ( length ) } 範例 : {BORDER-BOTTOM-WIDTH:1cm} BORDER-COLOR 功能 : 設定邊框顏色, 可設為顏色名稱 ( 16 種 ) 或 16 進制表示法 - #RRGGBB ( 00 暗 ~FF 亮 ) #RGB ( 0 暗 ~F 亮 ) 表紅綠藍強度語法 : { BORDER-COLOR : ( color ) } 範例 : {BORDER-COLOR:#FFFF00} BORDER-LEFT 功能 : 設定左邊框語法 : { BORDER-LEFT : ( border-left-width ) ( border-style ) ( color ) } 範例 : {BORDER-LEFT:THIN OUTSET} BORDER-LEFT-COLOR 功能 : 設定左邊框顏色, 可設為顏色名稱 ( 16 種 ) 或 16 進制表示法 - #RRGGBB ( 00 暗 ~FF 亮 ) #RGB ( 0 暗 ~F 亮 ) 表紅綠藍強度語法 : { BORDER-LEFT-COLOR : ( color ) } 範例 : {BORDER-LEFT-COLOR:#00FF00} BORDER-LEFT-STYLE 功能 : 設定左邊框樣式 ( 可設無 實線 雙線 溝線 脊線 嵌入線 浮出線 ) 語法 : { BORDER-LEFT-STYLE : NONE SOLID DOUBLE GROOVE RIDGE INSET OUTSET } 範例 : {BORDER-LEFT-STYLE:RIDGE} BORDER-LEFT-WIDTH 功能 : 設定左邊框寬度 ( 可設薄 普通 厚 長度 - 單位屬性 : 點 pt 英寸 in 公分 cm 像素 px ) 語法 : { BORDER-LEFT-WIDTH : THIN MEDIUM THICK ( length ) } 範例 : {BORDER-LEFT-WIDTH:THICK} BORDER-RIGHT 功能 : 設定右邊框語法 : { BORDER-RIGHT : ( border-right-width ) ( border-style ) ( color ) } 範例 : {BORDER-RIGHT:10pt #00A}

36 BORDER-RIGHT-COLOR 功能 : 設定右邊框顏色, 可設為顏色名稱 ( 16 種 ) 或 16 進制表示法 - #RRGGBB ( 00 暗 ~FF 亮 ) #RGB ( 0 暗 ~F 亮 ) 表紅綠藍強度語法 : { BORDER-RIGHT-COLOR : ( color ) } 範例 : {BORDER-RIGHT-COLOR:#00F} BORDER-RIGHT-STYLE 功能 : 設定右邊框樣式 ( 可設無 實線 雙線 溝線 脊線 嵌入線 浮出線 ) 語法 : { BORDER-RIGHT-STYLE : NONE SOLID DOUBLE GROOVE RIDGE INSET OUTSET } 範例 : {BORDER-RIGHT-STYLE:GROOVE} BORDER-RIGHT-WIDTH 功能 : 設定右邊框寬度 ( 可設薄 普通 厚 長度 - 單位屬性 : 點 pt 英寸 in 公分 cm 像素 px ) 語法 : { BORDER-RIGHT-WIDTH : THIN MEDIUM THICK ( length ) } 範例 : {BORDER-RIGHT-WIDTH:10px} BORDER-STYLE 功能 : 設定邊框樣式 ( 可設無 實線 雙線 溝線 脊線 嵌入線 浮出線 ) 語法 : { BORDER-STYLE : NONE SOLID DOUBLE GROOVE RIDGE INSET OUTSET } 範例 : {BORDER-STYLE:DOUBLE} BORDER-TOP 功能 : 設定上邊框語法 : { BORDER-TOP : ( border-top-width ) ( border-style ) ( color ) } 範例 : {BORDER-TOP:1in YELLOW} BORDER-TOP-COLOR 功能 : 設定上邊框顏色, 可設為顏色名稱 ( 16 種 ) 或 16 進制表示法 - #RRGGBB ( 00 暗 ~FF 亮 ) #RGB ( 0 暗 ~F 亮 ) 表紅綠藍強度語法 : { BORDER-TOP-COLOR : ( color ) } 範例 : {BORDER-TOP-COLOR:RED} BORDER-TOP-STYLE 功能 : 設定上邊框樣式 ( 可設無 實線 雙線 溝線 脊線 嵌入線 浮出線 ) 語法 : { BORDER-TOP-STYLE : NONE SOLID DOUBLE GROOVE RIDGE INSET OUTSET }

37 範例 : {BORDER-TOP-STYLE:SOLID} BORDER-TOP-WIDTH 功能 : 設定上邊框寬度 ( 可設薄 普通 厚 長度 - 單位屬性 : 點 pt 英寸 in 公分 cm 像素 px ) 語法 : { BORDER-TOP-WIDTH : THIN MEDIUM THICK ( length ) } 範例 : {BORDER-TOP-WIDTH:THIN} BORDER-WIDTH 功能 : 設定邊框寬度 ( 可設薄 普通 厚 長度 - 單位屬性 : 點 pt 英寸 in 公分 cm 像素 px ) 語法 : { BORDER-WIDTH : THIN MEDIUM THICK ( length ) } 範例 : {BORDER-WIDTH:10pt} 5.7 區塊屬性設定 區塊是指用 <DIV> <SPAN> 等標籤所建立出的邏輯區域, 或是圖形 表格等均可稱之為區塊 CLEAR 功能 : 設定浮動元件位置 ( 可設無 左邊 右邊 兩邊 ) 語法 : { CLEAR : NONE LEFT RIGHT BOTH } 範例 : {CLEAR:LEFT} CURSOR 功能 : 設定滑鼠游標 ( 可設自動 十字 箭頭 手形 移動 改變 - 雙箭頭 文字 等待 求助 ) 語法 : { CURSOR : AUTO CROSSHAIR DEFAULT HAND MOVE E-RESIZE NE-RESIZE NW-RESIZE N-RESIZE SE-RESIZE SW-RESIZE S-RESIZE W-RESIZE TEXT WAIT HELP } DISPLAY 功能 : 設定是否顯示語法 : { DISPLAY : NONE } FLOAT 功能 : 設定浮動元件接續位置語法 : { FLOAT : NONE LEFT RIGHT } HEIGHT 功能 : 設定元件高度 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比 % ) 語法 : { HEIGHT : AUTO ( length ) ( percentage ) } 範例 : {HEIGHT:10pt

38 LEFT 功能 : 設定元件左邊位置 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比% ) 語法 : { LEFT : AUTO ( length ) ( percentage ) } LIST-STYLE 功能 : 設定條列項目符號語法 : { LIST-STYLE : KEYWORD POSITION URL ( url ) } LIST-STYLE-IMAGE 功能 : 設定圖片為條列項目符號語法 : { LIST-STYLE-IMAGE : NONE URL ( url ) } LIST-STYLE-POSITION 功能 : 設定條列項目符號位置 ( 可設內部 外部 ) 語法 : { LIST-STYLE-POSITION : INSIDE OUTSIDE } LIST-STYLE-TYPE 功能 : 設定條列項目符號形狀 ( 可設無 圓形 圓圈 正方形 小數點 羅馬符號 希臘符號 ) 語法 : { LIST-STYLE-TYPE : NONE DISK CIRCLE SQUARE DECIMAL LOWER-ROMAN UPPER-ROMAN LOWER-ALPHA UPPER-ALPHA } MARGIN 功能 : 設定文字和邊緣距離 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比% ) 語法 : { MARGIN : AUTO ( length ) ( percentage ) } 這個性質一次設定上 下 左 右邊界與區塊外之元件間格距離 使用時應依序指定上 右 下 左, 如 margin:3px 2px 5px 1px 亦可一次指定四邊, 如 margin:2px, 則全部均設 2px MARGIN-BOTTOM 功能 : 設定文字和下邊緣距離 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比% ) 語法 : { MARGIN-BOTTOM : AUTO ( length ) ( percentage ) } MARGIN-LEFT 功能 : 設定文字和左邊緣距離 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比% ) 語法 : { MARGIN-LEFT : AUTO ( length ) ( percentage ) } MARGIN-RIGHT 功能 : 設定文字和右邊緣距離 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比% ) 語法 : { MARGIN-RIGHT : AUTO ( length ) ( percentage ) }

39 MARGIN-TOP 功能 : 設定文字和上邊緣距離 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比% ) 語法 : { MARGIN-TOP : AUTO ( length ) ( percentage ) } OVERFLOW 功能 : 設定容器元件顯示方法語法 : { OVERFLOW : NONE CLIP SCROLL } 這個性質是設定當區塊內包含的元件大於區塊之寬或高時, 顯示的方法 可用值有 auto( 自動設定, 當需要時出現捲軸 ) scroll( 強迫顯示捲軸, 即使內部元件並無超過區塊邊界 ) hidden( 超出區塊的部份不顯示 ) visible( 全部顯示, 無視區塊大小 ) 最常用的是 overflow:auto 讓瀏覽器自動判斷 PADDING 功能 : 設定元件和邊緣距離 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比% ) 語法 : { PADDING : ( length ) ( percentage ) } 這個性質一次設定上 下 左 右邊界的間格距離 使用時應依序指定上 右 下 左, 如 padding:3px 2px 5px 1px 亦可一次指定四邊, 如 padding:2px, 則全部均設 2px PADDING-BOTTOM 功能 : 設定元件和下邊緣距離 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比% ) 語法 : { PADDING-BOTTOM : ( length ) ( percentage ) } PADDING-LEFT 功能 : 設定元件和左邊緣距離 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比% ) 語法 : { PADDING-LEFT : ( length ) ( percentage ) } PADDING-RIGHT 功能 : 設定元件和右邊緣距離 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比% ) 語法 : { PADDING-RIGHT : ( length ) ( percentage ) } PADDING-TOP 功能 : 設定元件和上邊緣距離 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比% ) 語法 : { PADDING-TOP : ( length ) ( percentage ) } PAGE-BREAK-AFTER 功能 : 設定元件後加分頁符號語法 : { PAGE-BREAK-AFTER : AUTO LEFT RIGHT ALWAYS PAGE-BREAK-BEFORE

40 功能 : 設定元件前加分頁符號語法 : { PAGE-BREAK-BEFORE : AUTO LEFT RIGHT ALWAYS } POSITION 功能 : 設定元件位置 ( 可設絕對 相對 靜態 ) 語法 : { POSITION : ABSOLUTE RELATIVE STATIC } TOP 功能 : 設定元件上方位置 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比% ) 語法 : { TOP : AUTO ( length ) ( percentage ) } VERTICAL-ALIGN 功能 : 元件垂直調整語法 : { VERTICAL-ALIGN : BASELINE MIDDLE SUB SUPER TEXT-TOP TEXT-BOTTOM TOP BOTTOM } VISIBILITY 功能 : 設定是否可見 ( 可設可見 隱藏 繼承 ) 語法 : { VISIBILITY : VISIBLE HIDDEN INHERIT } 設定此元件要不要顯示, 這個性質與 display 有相似之處, 但不相同 可用值有 visible( 顯示 ) inherit( 貼附, 如此元件所在之父元件可見, 則此元件為可見, 反之亦然 ) hidden( 隱藏, 但仍占有空間, 此與 display:none 不同 ) 用法如 visibility:hidden 則可隱藏此元件 WIDTH 功能 : 設定元件寬度 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比 % ) 語法 : { WIDTH : AUTO ( length ) ( percentage ) } 此性質可設定區塊的寬度, 可用單位或百分比法來指定其值, 或是用特徵字 auto 如 width:30px 或 width:50% 均是可行的方法, 而 width:auto 代表讓瀏覽器幫你決定 至於百分比法是依據其父元件的大小來決定的 Z-INDEX 功能 : 設定 Z 軸參數 ( 正數為上方, 負數為下方 ) 語法 : { Z-INDEX : NUMBER } 所謂 CSS 之 2.5D 擺設就靠這個性質, 當有很多元件重疊時 ( 如 position:absolute 就會發生 ), 擁有較大 z-index 值的元件會擺在上面, 此值可正可負 如 z-index:3 會擺在 z-index:2 的元件之上 5.8 定位設定 position 性質

41 這個性質是設定元件的擺放方式, 我們可依據需要來設定適當的值 可用的屬性值有.. absolute( 絕對定位 ) relative( 相對定位 ) static( 靜態定位 ) 所謂 position:absolute 就是指元件定位法是以父元件 ( 通常就是此網頁 ) 的絕對座標來定位 ( 原點為父元件左上角 ) 而 position:relative 是指讓此元件以一般網頁排列方式決定位置後, 再以此點為相對座標定位 至於 position:static 是如同舊式瀏覽器般, 以一般網頁排列方式決定位置, 並且不能再加以定位 這個屬性設定將會影響座標系統的原點 absolute 原點為父元件左上角 relative 原點為應有之自然位置 static 不可用座標系統 通常用了這個屬性後, 要配合 top left 屬性來決定元件位置 top 性質經由 position 性質設定後, 會決定出一個座標系統, 再由 top 性質來決定此元件有要擺放的垂直位置 屬性值為一測量長度, 可用如 in cm mm pt pc em en ex px 等單位, 但建議各位用 px 這個單位 ( 因為螢幕一格就是 1px) 如 top=20px, 則會依座標系統將此元件擺放在原點下方 +20px 的位置 ( 當然, position:relative 與 position:absolute 所得的結果會不同 ) 注意, 可以指定負值! left 性質這個性質決定元件的水平位置, 當然座標系統還是依 position 之設定而變 例如 left:30px, 則將此元件擺放到座標原點左方 +30px 的地方 EX:<STYLE> SPAN {position:absolute;font-size:50px;font-family:arial;font-weight:700} SPAN.small {font-size:40px;color:red} </STYLE> <SPAN STYLE="top:5px;left:5px;color:gray">SCJH</SPAN> <SPAN STYLE="top:0px;left:0px;color:blue">SCJH</SPAN> <SPAN CLASS=small STYLE="top:24px;left:100px">CSS</SPAN> 5.9 文字屬性的設定 COLOR 功能 : 設定文字顏色語法 : { COLOR : ( color ) } FONT 功能 : 設定字體樣式 大小寫變化 粗細 大小 文字行列高度 字型語法 : { FONT : ( font-style ) ( font-variant ) ( font-weight ) ( font-size ) ( font-family ) / ( line-height ) }

42 範例 : H1 {FONT:ITALIC BOLD 細明體 12pt/18pt} FONT-SIZE 功能 : 設定字體大小 ( 可設單位屬性 : 點 pt 英寸 in 公分 cm 像素 px 百分比 % ) 語法 : { FONT-SIZE : LARGE MEDIUM SMALLER ( length ) ( percentage ) } 範例 : {FONT-SIZE:LARGE} FONT-STYLE 功能 : 設定字體樣式 ( 分為 : 正常 斜體 ) 語法 : { FONT-STYLE : NORMAL ITALIC } 範例 : {FONT-STYLE:ITALIC} FONT-VARIANT 功能 : 設定字體變化 ( 分為 : 正常 小字體 ) 語法 : { FONT-VARIANT : NORMAL SMALL-CAPS } 範例 : {FONT-VARIANT:SMALL-CAPS} FONT-WEIGHT 功能 : 設定字體粗細 ( 分為 : 正常 粗字體 ) 語法 : { FONT-WEIGHT : NORMAL BOLD } 範例 : {FONT-WEIGHT:BOLD} Ch6. Page Navigation 6.1 Steps 1. Create an input form <h:inputtext required="true" requiredmessage="must input" /> 2. Button specifies return condition Button 加入 action 指定 From Outcome Ex:<h:commandButton value=" 確定 " action="new"/> 3. Edit faces-config.xml 1. 路徑 \WebContent\WEB-INF\faces-config.xml 點開 如 < 圖 > 2. 修改編碼為 UTF-8

43 < 圖 > 4. Specify Navigation Rules 1.Navigation Rules, 按 Add Add rule: 輸入 * ( 星號 ), 代表全部 如圖 Navigation Cases, 按 Add From Outcome: new To View ID: return 如 < 圖 > < 圖 > < 圖 >

44 5. Create result pages 1. 點 WebContent 按右鍵 New JSP File 輸入 retrun 2. 俢改編碼 charset=utf-8" pageencoding="utf-8" 3.return.jsp 加入 <h:outputtext value=" 成功登入 "/> <h:outputtext value=" 按此回上一頁 " /> 6.2 例題 依以上步驟, 1. 建立按下確認時, 頁面轉至顯示成功訊息頁面, 2. 點選回上一頁時會回至登入畫面 :

45 6.2.1 加入 Rule 請見 4.Specify Navigation Rules ADD Index.jsp 程式碼 : <h:commandbutton value=" 確定 " action="new"/> ADD Return.jsp 程式碼 : <f:view> <h:form> <h:outputtext value=" 成功登入 "/> <h:commandbutton value=" 按此回上一頁 " action="return" /> </h:form> </f:view> 按確認後畫面 :

46 Ch7. Managed-Bean 7.1 What are bean? 7.2 Steps in Using JSF

47 7.3 A Simple Example Step1. Create a java bean Src/ 底下 New Package, 命名 my.test.backing New Java, 命名 mytestbacking Step2. Create a page include f:view and f:form <f:view> <f:loadbundle basename="my.test.properties.mytest" var="res"/> <h:form id="mytestform" > </h:form> </f:view> Step3. Create a commandbutton and inputtext <h:outputtext value=" 使用者名稱 :" id="userid" styleclass="bannertitle"/> <h:inputtext required="true" requiredmessage="must input" value="#{mytestbacking.myname}"/> <h:outputtext value=" 密碼 :" id="password" styleclass="bannertitle"/> <h:inputsecret required="true" value="#{mytestbacking. }"/> <h:outputtext value="#{mytestbacking.myname}" /> <br> <h:outputtext value="#{mytestbacking. }" /> Step4. Add an action controller 4.1 mytestbacking.java 加入 doconfirmaction() public String doconfirmaction(){ System.out.println("TEST doconfirmaction"); return "#";} 4.2 Index.jsp 加入 commandbutton action <h:commandbutton value=" 確定 " action="#{mytestbacking.doconfirmaction}" /> <h:commandbutton value=" 取消 " /> Step5. Declare java bean in faces-config.xml

48 新增 mytestbacking, 如下圖 Step6. Create pages corresponding to each condition 6.1 mytestbacking.java: 宣告變數產生 get/set 欄位 ( 使用視窗右鍵點 Source Generate Getters and Setters ) String ; public String get () { return ;} public void set (string ) { this. = ;} 6.2 Index.jsp: Inupt/output 時給 value 按 commandbutton 觸發 action 顯示畫面上 <h:inputsecret required="true" value="#{mytestbacking. }"/> <h:outputtext value="#{mytestbacking. }" /> 7.4 例題 : 1. 依前例, 當使用者輸入 及 password 後, 按下確認後, 畫面上顯示輸 入的值 Index.jsp 程式碼

49 mytestbacking.java 程式碼 畫面結果 :

50 Ch8. Event-Handling 8.1 Action controllers v.s event listeners 8.2 Types of Event Handler Action Listener

51 8.2.2 Value Change Listener

52 8.3 Action Listener 1. 在 Java bean 中加一個方法 public void verify(actionevent ae){ }. 2. 加入元件 A. 接受一個 ActionEvent 對象,jsp 頁面中如下編寫 : <h:commandbutton value=" 提交 " actionlistener="#{user.verify}" action="#{user.outcome}"> B. 註冊多個 ActionListener: LogHandle.java 和 VerifyHandle.java 都實現了 ActionListener 接口 我們使用 <f:actionlistener> 標籤向組件註冊事件 如 : <h:commandbutton value=" 提交 " action="#{user.outcome}"> <f:actionlistener type="com.zdx.loghandle"/> <f:actionlistener type="com.zdx.verifyhandle"/> </h:commandbutton> 8.4 Value Change Listener 方法一 : 直接設置 JSF 輸入組件的 valuechangelistener 屬性

53 <h:selectonemenu value="#{user.local}" onchange="this.form.submit();" valuechangelistener="#{user.changelocale}"> <f:selectitem itemvalue="zh_cn" itemlabel="chinese"/> <f:selectitem itemvalue="en" itemlabel="englist"/> </h:selectonemenu> 方法二 : 實現 javax.faces.event.valuechangelistener 接口 在 jsp 頁面中時使用 <f:valuechangelistener type="com.zdx.myvaluechangelistener"> 8.5 Immediate Event 說明 : 1. 加入 actionlistener 在 CONFIRM 按鈕 : 程式碼如下 並加入 OUTTEXT 顯示 myname 的 value Jsp 程式 :

54 當按下 confirm 後 畫面出現欄位為必要檢核的錯誤訊息, 2. 在按 BUTTON 上加入 immediate= true, 相同程式, 按下 confirm 系統將立即執行 ACTIONLISTENER 的動作, 而不再執行檢核!!!!!!

55 Ch9. Properties-Files 9.1 Loading properties file Step1 Create.properties file in/under WEB-INF/classes.properties 內容 Eg: Step2. Load file with f:loadbundle Eg: Step3. Output messages

56 9.2 Parameterized message Step1 Create.properties file in/under WEB-INF/classes.properties 內容 Eg: Step2. Load file with f:loadbundle Eg: Step3. Output messages using h:outputformat

57 9.3 Internationalized message Step1. Create multiple similarly named.properties files Eg: blah.properties,blas_es.properties,blash_zh_tw.properties Step2. Supply locale argument to f:view Load file with f:loadbundle as before Output message using h:outputformat or h:outputtext 9.4 例題 將使用者登入畫面的英文提示, 設定中文, 英文兩種顯示 1. New Package, 取名 my.test.properties 2. New Properties File, 分別為 mytest ; mytest_en_us ; mytest_zh_tw 3. 輸入 name 及 value, 如下圖 4. 設定 Resource Bundles,ADD.. Base Name: my.test.properties.mytest Var: res

58 5. 設定 facess-config.xml 加入兩個語系 en_us/zh_tw,default Locale : en_us 6. Index.jsp 程式碼加入 <f:loadbundle basename="my.test.properties.mytest" var="res"/> <h:outputtext value="#{res.name}" id="userid" styleclass="bannertitle"/> 7. 以系統語系, 呈現結果如下

59 C10. Validation 10.1 Validation approaches 10.2 Manual Validation

60 10.3 Implicit automatic validation 10.4 Explicit Validation How to use explicit validation Eg: 程式碼 :

61 Conversion vs Validation

62 Conversion vs Validation Custom Conversion and Validation Eg1. Converts

63 Eg2. Validator 例題 1. 畫面中一輸入欄位, 以 Explicit Validation 方式檢核使用者輸入的長度大於 6, 且小於 12 程式碼如下 : <h:inputtext required="true" requiredmessage="user must input value" value="#{mytestbacking.myname}"> <f:validatelength maximum="12" minimum="6" /> </h:inputtext> 2. 使用者登入畫面, 名稱欄位加入一個自定的 mail format validator, 檢核使用者輸入的是 mail 格式 2.1 建立 Validator.java package my.test.backing;

64 import java.util.regex.matcher; import java.util.regex.pattern; import javax.faces.application.facesmessage; import javax.faces.component.uicomponent; import javax.faces.context.facescontext; import javax.faces.validator.validator; import javax.faces.validator.validatorexception; public class Validator implements Validator { private static final String _PATTERN = "^[_A-Za-z0-9-]+(\\." + "[_A-Za-z0-9-]+)*@[A-Za-z0-9]+(\\.[A-Za-z0-9]+)*" + "(\\.[A-Za-z]{2,})$"; private Pattern pattern; private Matcher matcher; public Validator(){ } pattern = Pattern.compile( _PATTERN); public void validate(facescontext context, UIComponent component, } Object value) throws ValidatorException { matcher = pattern.matcher(value.tostring()); if(!matcher.matches()){ } FacesMessage msg = new FacesMessage(" validation failed.", "Invalid format."); msg.setseverity(facesmessage.severity_error); throw new ValidatorException(msg); } 2.2 faces-config.xml: 將 validator 加入 Managed Beans, 如下圖 2.3 faces-config.xml:validators 加入 checkvalid , 如下圖

65 2.4 index.jsp 加入程式碼 ( 反白部份 ) <h:inputtext required="true" requiredmessage="user must input value" value="#{mytestbacking.myname}" > <f:validator validatorid="checkvalid "/> <f:validatelength maximum="12" minimum="6" /> </h:inputtext> 2.5 畫面如下

66 Ch11. Rich Faces component 11.1 Adding RichFaces libraries into the project 11.2 Web.xml web.xml

67 11.3 Example Page page language="java" contenttype="text/html; charset=utf-8" pageencoding="iso "%> taglib prefix="f" uri=" taglib prefix="h" uri=" <!-- RichFaces tag library declaration --> taglib uri=" prefix="a4j"%> taglib uri=" prefix="rich"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>insert title here</title> </head> <body> <f:view> <a4j:form> <rich:panel header="richfaces Greeter" style="width: 315px"> <h:outputtext value="your name: " /> <h:inputtext value="#{mytestbacking.myname}" > <f:validatelength minimum="1" maximum="30" /> </h:inputtext>

68 <a4j:commandbutton value="get greeting" rerender="greeting" /> <h:panelgroup id="greeting" > <h:outputtext value="hello, " rendered="#{not empty mytestbacking.myname}" /> <h:outputtext value="#{mytestbacking.myname}" /> <h:outputtext value="!" rendered="#{not empty mytestbacking.myname}" /> </h:panelgroup> </rich:panel> </a4j:form> </f:view> </body> </html> 11.3 Rich Components a4j:support a4j:support should be attached to a direct child of the JSF component that has to be ajaxified. The key attributes are 'event' and 'rerender'. event attribute defines the javascript event the ajax support will be attached to. rerender attribute points to the JSF component(s) that should be re-rendered on the server side and updated on the client when an Ajax Response comes back. ajaxsingle attribute is equal true, it orders to process only a value of the current component (along with f:param or a4j:actionparam values if any). In case of a4j:support, it will be a value of the parent component.

69 a4j:commandbutton a4j:commandbutton is similar to the standard h:commandbutton, but produces an Ajax request with a further partial page update. 'rerender' attribute points to the component(s) that should be re-rendered in the component tree and updated in the browser DOM after an Ajax Response is completed a4j:commandlink a4j:commandlink is similar to the standard h:commandlink, but produces an Ajax request with further partial page update. 'rerender' attribute point to the component(s) that should be re-rendered in the component tree and updated in the browser DOM after the Ajax Response is complete a4j:status a4j:status is an indicator of an Ajax request. It has two states - start and stop. The start state indicates that an Ajax request is in progress. When Ajax Response comes back, the component switches to the stop stage.

70 ModelPanel Open/close Method1. Open: modal panel close Method2. using the JS API show function (#{rich:component('mp')}.show) Open Modal Panel using the JS API hide function (#{rich:component('mp')}.hide) close Modal Panel DataScroller & DataTabel

71 11.4 Reference Richfaces Demo

72 Phase 3. EJB Phase 4.

73 SOA&JBPM