JSF框架

 

JSF学习心得之基本概念理解<o:p></o:p>

前段日子接触一个项目采用了JSF框架,在开发的过程中也出现了或多或少的难题，但是毕竟计算机知识嘛，边学边用。先将体会和对它的理解写出来。与各位JSF爱好者分享分享<o:p></o:p>

一、    了解基本概念<o:p></o:p>

JSF 将表示和应用程序行为明确分开，JSF是一种事件驱动型的组件模型，<o:p></o:p>

1、理解使用JSF的必要性<o:p></o:p>

2、掌握 JSF 体系结构<o:p></o:p>

3、掌握JSF 的工作方式<o:p></o:p>

4、了解JSF的用户界面模型<o:p></o:p>

5、理解受管理的Bean的作用<o:p></o:p>

二、JSF 生命周期<o:p></o:p>

JSF的每个组件基本上都是可替换的，像是转换器（Converter）、验证器（Validator）、组件（Component）、绘制器 （Renderer）等等，每个组件都可以替换让JSF在使用时更有弹性，但相对的所付出的就是组件组合时的复杂性，为此，最基本的，如果您打算自订一些 JSF组件，那么您对于JSF处理请求的每个阶段必须要有所了解。
下图是JSF处理请求时的每个阶段与简单说明，起始状态即使用者端发出请求时，终止状态则相当于绘制器发出响应时：

<o:p></o:p>

<v:shapetype id="_x0000_t75" stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><v:stroke joinstyle="miter"></v:stroke><v:formulas><v:f eqn="if lineDrawn pixelLineWidth 0"></v:f><v:f eqn="sum @0 1 0"></v:f><v:f eqn="sum 0 0 @1"></v:f><v:f eqn="prod @2 1 2"></v:f><v:f eqn="prod @3 21600 pixelWidth"></v:f><v:f eqn="prod @3 21600 pixelHeight"></v:f><v:f eqn="sum @0 0 1"></v:f><v:f eqn="prod @6 1 2"></v:f><v:f eqn="prod @7 21600 pixelWidth"></v:f><v:f eqn="sum @8 21600 0"></v:f><v:f eqn="prod @7 21600 pixelHeight"></v:f><v:f eqn="sum @10 21600 0"></v:f></v:formulas><v:path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"></v:path><o:lock aspectratio="t" v:ext="edit"></o:lock></v:shapetype><v:shape id="_x0000_s1058" style="MARGIN-TOP: 5.55pt; Z-INDEX: 3; MARGIN-LEFT: -1in; WIDTH: 562.9pt; POSITION: absolute; HEIGHT: 238.3pt; mso-wrap-style: none; v-text-anchor: middle" fillcolor="#fcccc8" type="#_x0000_t75"><v:fill opacity="26214f"></v:fill><v:imagedata o:title="" src="file:///C:\DOCUME~1\LionKing\LOCALS~1\Temp\msohtml1\01\clip_image001.wmz"></v:imagedata><v:shadow color="#ddd"></v:shadow></v:shape><o:p> </o:p>

<o:p> </o:p>

<o:p> </o:p>

<o:p> </o:p>

<o:p> </o:p>

<o:p> </o:p>

<o:p> </o:p>

<o:p> </o:p>

<o:p> </o:p>

<o:p> </o:p>

<o:p></o:p>

<o:p> </o:p>

<o:p> </o:p>

<o:p> </o:p>

<o:p> </o:p>

<o:p> </o:p>

扣除事件处理，JSF总共必须经过六个阶段：
•恢复视图(Restore View）
   对于选择的页面如果是初次浏览则建立新的组件树。如果是会话阶段，会从使用者端或服务器端的数据找寻数据以回复每个组件的状态并重建组件树，如果不包括请求参数，则直接跳过接下来的阶段直接绘制响应。
• 应用请求值(Apply Request Values)
  每个组件尝试从到来的请求中找寻自己的参数并更新组件值，在这边会触发ActionEvent，这个事件会被排入队列中，然后在唤起应用程序阶段之后才会真正由事件处理者进行处理。 然而对于设定immeduate为true的命令（Commamnd）组件来说，会立即处理事件并跳过之后的阶段直接绘制响应，而对于设定immediate为true的输入（Input）组件，会马上进行转换验证并处理值变事件，之后跳过接下来的阶段，直接绘制响应。
• 处理验证(Process Validations）
   进行转换与验证处理，如果验证错误，则会跳过之后的阶段，直接绘制响应，结果是重新呼叫同一页绘制结果.拥有第三方验证插件
• 更新模型值(Update Model Values)<o:p></o:p>

   更新每一个与组件绑定的backing bean或模型对象。
• 调用应用程序(Invoke Application)<o:p></o:p>

处理动作事件，并进行后端应用程序逻辑。
• 呈现响应(Render Response)<o:p></o:p>

使用绘制器绘制页面。<o:p></o:p>

三、  体系结构<o:p></o:p>

<v:group id="_x0000_s1026" style="WIDTH: 415.3pt; HEIGHT: 229.25pt; mso-position-horizontal-relative: char; mso-position-vertical-relative: line" coordsize="10717,5925" coordorigin="2362,4075" editas="canvas"><o:lock aspectratio="t" v:ext="edit"></o:lock><v:shape id="_x0000_s1027" style="LEFT: 2362px; WIDTH: 10717px; POSITION: absolute; TOP: 4075px; HEIGHT: 5925px" o:preferrelative="f" type="#_x0000_t75"><v:fill o:detectmouseclick="t"></v:fill><v:path o:connecttype="none" o:extrusionok="t"></v:path><o:lock v:ext="edit" text="t"></o:lock></v:shape><v:shape id="_x0000_s1028" style="LEFT: 2597px; WIDTH: 1174px; POSITION: absolute; TOP: 7128px; HEIGHT: 1374px" type="#_x0000_t75"><v:imagedata o:title="" src="file:///C:\DOCUME~1\LionKing\LOCALS~1\Temp\msohtml1\01\clip_image003.png" cropright="56723f" cropleft="583f" cropbottom="24694f" croptop="26600f"></v:imagedata></v:shape><v:roundrect id="_x0000_s1029" style="LEFT: 4699px; WIDTH: 8380px; POSITION: absolute; TOP: 4766px; HEIGHT: 5234px; mso-wrap-style: none; v-text-anchor: middle" fillcolor="#ccecff" arcsize="10923f"><v:fill type="gradient" focus="100%" rotate="t"></v:fill><v:shadow color="#ddd"></v:shadow></v:roundrect><v:shapetype id="_x0000_t22" path="m10800,qx0@1l0@2qy10800,21600,21600@2l21600@1qy10800,xem0@1qy10800@0,21600@1nfe" o:spt="22" coordsize="21600,21600" adj="5400"><v:formulas><v:f eqn="val #0"></v:f><v:f eqn="prod #0 1 2"></v:f><v:f eqn="sum height 0 @1"></v:f></v:formulas><v:path o:connecttype="custom" gradientshapeok="t" o:extrusionok="f" textboxrect="0,@0,21600,@2" o:connectangles="270,270,180,90,0" o:connectlocs="10800,@0;10800,0;0,10800;10800,21600;21600,10800"></v:path><v:handles><v:h position="center,#0" yrange="0,10800"></v:h></v:handles><o:complex v:ext="view"></o:complex></v:shapetype><v:shape id="_x0000_s1030" style="LEFT: 10615px; WIDTH: 1738px; POSITION: absolute; TOP: 5655px; HEIGHT: 3161px; mso-wrap-style: none; v-text-anchor: middle" fillcolor="#ffe2c5" type="#_x0000_t22" adj="2469"><v:fill type="gradient" focus="-50%" rotate="t" angle="-90" color2="#39f"></v:fill><v:shadow color="#ddd"></v:shadow><v:textbox inset="1.70181mm,.85089mm,1.70181mm,.85089mm">

应用程序<o:p></o:p>

数据<o:p></o:p>

</v:textbox></v:shape><v:shapetype id="_x0000_t70" path="m10800,l21600@0@3@0@3@2,21600@2,10800,21600,0@2@1@2@1@0,0@0xe" o:spt="70" coordsize="21600,21600" adj="5400,4320"><v:stroke joinstyle="miter"></v:stroke><v:formulas><v:f eqn="val #1"></v:f><v:f eqn="val #0"></v:f><v:f eqn="sum 21600 0 #1"></v:f><v:f eqn="sum 21600 0 #0"></v:f><v:f eqn="prod #1 #0 10800"></v:f><v:f eqn="sum #1 0 @4"></v:f><v:f eqn="sum 21600 0 @5"></v:f></v:formulas><v:path o:connecttype="custom" textboxrect="@1,@5,@3,@6" o:connectangles="270,180,180,180,90,0,0,0" o:connectlocs="10800,0;0,@0;@1,10800;0,@2;10800,21600;21600,@2;@3,10800;21600,@0"></v:path><v:handles><v:h position="#0,#1" yrange="0,10800" xrange="0,10800"></v:h></v:handles></v:shapetype><v:shape id="_x0000_s1031" style="LEFT: 8145px; WIDTH: 692px; POSITION: absolute; TOP: 4280px; HEIGHT: 4171px; mso-wrap-style: none; v-text-anchor: middle; rotation: 90" fillcolor="#fc0" type="#_x0000_t70" adj="5756,1843"><v:fill type="gradient" focus="100%" rotate="t"></v:fill><v:shadow color="#ddd"></v:shadow></v:shape><v:rect id="_x0000_s1032" style="LEFT: 4985px; WIDTH: 1487px; POSITION: absolute; TOP: 5314px; HEIGHT: 3852px; mso-wrap-style: none; v-text-anchor: middle" strokecolor="purple"><v:fill type="gradient" focus="100%" rotate="t" angle="-135" color2="#c9f"></v:fill><v:shadow color="#ddd"></v:shadow><v:textbox inset="1.70181mm,.85089mm,1.70181mm,.85089mm">

Faces<o:p></o:p>

Servlet<o:p></o:p>

</v:textbox></v:rect><v:group id="_x0000_s1033" style="LEFT: 7390px; WIDTH: 2072px; POSITION: absolute; TOP: 7037px; HEIGHT: 1779px" coordsize="912,1104" coordorigin="1776,2688"><v:rect id="_x0000_s1034" style="LEFT: 1776px; WIDTH: 624px; POSITION: absolute; TOP: 2688px; HEIGHT: 816px; v-text-anchor: middle-center" fillcolor="#c9f" strokecolor="#ddd"><v:fill type="gradientRadial" focus="100%" color2="fill darken(143)" method="linear sigma" focussize="" focusposition=".5,.5"></v:fill><v:shadow color="#ddd"></v:shadow><v:textbox inset="1.70181mm,.85089mm,1.70181mm,.85089mm">

Action <o:p></o:p>

Servlet<o:p></o:p>

</v:textbox></v:rect><v:rect id="_x0000_s1035" style="LEFT: 1872px; WIDTH: 624px; POSITION: absolute; TOP: 2784px; HEIGHT: 816px; v-text-anchor: middle-center" fillcolor="#c9f" strokecolor="#ddd"><v:fill type="gradientRadial" focus="100%" color2="fill darken(143)" method="linear sigma" focussize="" focusposition=".5,.5"></v:fill><v:shadow color="#ddd"></v:shadow><v:textbox inset="1.70181mm,.85089mm,1.70181mm,.85089mm">

Action <o:p></o:p>

Servlet<o:p></o:p>

</v:textbox></v:rect><v:rect id="_x0000_s1036" style="LEFT: 1968px; WIDTH: 624px; POSITION: absolute; TOP: 2880px; HEIGHT: 816px; v-text-anchor: middle-center" fillcolor="#c9f" strokecolor="#ddd"><v:fill type="gradientRadial" focus="100%" color2="fill darken(143)" method="linear sigma" focussize="" focusposition=".5,.5"></v:fill><v:shadow color="#ddd"></v:shadow><v:textbox inset="1.70181mm,.85089mm,1.70181mm,.85089mm">

Action <o:p></o:p>

Servlet<o:p></o:p>

</v:textbox></v:rect><v:rect id="_x0000_s1037" style="LEFT: 2064px; WIDTH: 624px; POSITION: absolute; TOP: 2976px; HEIGHT: 816px; v-text-anchor: middle-center" fillcolor="#c9f" strokecolor="#ddd"><v:fill type="gradientRadial" focus="100%" color2="fill darken(143)" method="linear sigma" focussize="" focusposition=".5,.5"></v:fill><v:shadow color="#ddd"></v:shadow><v:textbox inset="1.70181mm,.85089mm,1.70181mm,.85089mm">

JSF页面<o:p></o:p>

</v:textbox></v:rect></v:group><v:shape id="_x0000_s1038" style="LEFT: 9738px; WIDTH: 592px; POSITION: absolute; TOP: 7483px; HEIGHT: 1084px; mso-wrap-style: none; v-text-anchor: middle; rotation: 90" fillcolor="#fc0" type="#_x0000_t70" adj="5638,2380"><v:fill type="gradient" focus="100%" rotate="t"></v:fill><v:shadow color="#ddd"></v:shadow></v:shape><v:shape id="_x0000_s1039" style="LEFT: 6602px; WIDTH: 592px; POSITION: absolute; TOP: 7532px; HEIGHT: 985px; mso-wrap-style: none; v-text-anchor: middle; rotation: 90" fillcolor="#fc0" type="#_x0000_t70" adj="5638,2380"><v:fill type="gradient" focus="100%" rotate="t"></v:fill><v:shadow color="#ddd"></v:shadow></v:shape><v:shape id="_x0000_s1040" style="LEFT: 4173px; WIDTH: 593px; POSITION: absolute; TOP: 6151px; HEIGHT: 984px; mso-wrap-style: none; v-text-anchor: middle; rotation: 90" fillcolor="#fc0" type="#_x0000_t70" adj="5638,2380"><v:fill type="gradient" focus="100%" rotate="t"></v:fill><v:shadow color="#ddd"></v:shadow></v:shape><v:shape id="_x0000_s1041" style="LEFT: 4181px; WIDTH: 591px; POSITION: absolute; TOP: 7829px; HEIGHT: 985px; mso-wrap-style: none; v-text-anchor: middle; rotation: 90" fillcolor="#fc0" type="#_x0000_t70" adj="5638,2380"><v:fill type="gradient" focus="100%" rotate="t"></v:fill><v:shadow color="#ddd"></v:shadow></v:shape><v:shapetype id="_x0000_t202" path="m,l,21600r21600,l21600,xe" o:spt="202" coordsize="21600,21600"><v:stroke joinstyle="miter"></v:stroke><v:path o:connecttype="rect" gradientshapeok="t"></v:path></v:shapetype><v:shape id="_x0000_s1042" style="LEFT: 6897px; WIDTH: 3253px; POSITION: absolute; TOP: 4173px; HEIGHT: 900px" stroked="f" filled="f" fillcolor="#fcccc8" type="#_x0000_t202"><v:fill opacity="26214f"></v:fill><v:shadow color="#ddd"></v:shadow><v:textbox style="mso-fit-shape-to-text: t" inset="1.70181mm,.85089mm,1.70181mm,.85089mm">

Web 容器<o:p></o:p>

</v:textbox></v:shape><v:shape id="_x0000_s1043" style="LEFT: 4825px; WIDTH: 1972px; POSITION: absolute; TOP: 9194px; HEIGHT: 899px" stroked="f" filled="f" fillcolor="#fcccc8" type="#_x0000_t202"><v:fill opacity="26214f"></v:fill><v:shadow color="#ddd"></v:shadow><v:textbox style="mso-fit-shape-to-text: t" inset="1.70181mm,.85089mm,1.70181mm,.85089mm">

控制器<o:p></o:p>

</v:textbox></v:shape><v:shape id="_x0000_s1044" style="LEFT: 7786px; WIDTH: 1971px; POSITION: absolute; TOP: 9112px; HEIGHT: 900px" stroked="f" filled="f" fillcolor="#fcccc8" type="#_x0000_t202"><v:fill opacity="26214f"></v:fill><v:shadow color="#ddd"></v:shadow><v:textbox style="mso-fit-shape-to-text: t" inset="1.70181mm,.85089mm,1.70181mm,.85089mm">

视图<o:p></o:p>

</v:textbox></v:shape><v:shape id="_x0000_s1045" style="LEFT: 10447px; WIDTH: 1971px; POSITION: absolute; TOP: 9112px; HEIGHT: 900px" stroked="f" filled="f" fillcolor="#fcccc8" type="#_x0000_t202"><v:fill opacity="26214f"></v:fill><v:shadow color="#ddd"></v:shadow><v:textbox style="mso-fit-shape-to-text: t" inset="1.70181mm,.85089mm,1.70181mm,.85089mm">

模型<o:p></o:p>

</v:textbox></v:shape><v:shape id="_x0000_s1046" style="LEFT: 2362px; WIDTH: 1774px; POSITION: absolute; TOP: 4075px; HEIGHT: 2265px" type="#_x0000_t75"><v:imagedata o:title="Untitled-1" src="file:///C:\DOCUME~1\LionKing\LOCALS~1\Temp\msohtml1\01\clip_image004.jpg"></v:imagedata></v:shape><w:wrap type="none"></w:wrap><w:anchorlock></w:anchorlock></v:group><o:p></o:p>

四、  工作方式<o:p></o:p>

<v:group id="_x0000_s1047" style="WIDTH: 415.3pt; HEIGHT: 232pt; mso-position-horizontal-relative: char; mso-position-vertical-relative: line" coordsize="11043,6180" coordorigin="2362,4585" editas="canvas"><o:lock aspectratio="t" v:ext="edit"></o:lock><v:shape id="_x0000_s1048" style="LEFT: 2362px; WIDTH: 11043px; POSITION: absolute; TOP: 4585px; HEIGHT: 6180px" o:preferrelative="f" type="#_x0000_t75"><v:fill o:detectmouseclick="t"></v:fill><v:path o:connecttype="none" o:extrusionok="t"></v:path><o:lock v:ext="edit" text="t"></o:lock></v:shape><v:line id="_x0000_s1049" style="POSITION: absolute; mso-wrap-style: none; v-text-anchor: middle" strokeweight="1.25pt" to="10940,8634" from="9066,5572"><v:stroke endarrow="block"></v:stroke><v:shadow color="#ddd"></v:shadow></v:line><v:oval id="_x0000_s1050" style="LEFT: 9504px; WIDTH: 4219px; POSITION: absolute; TOP: 8634px; HEIGHT: 1581px; mso-wrap-style: none; v-text-anchor: middle" fillcolor="#39f"><v:fill type="gradientRadial" focus="100%" rotate="t" focussize="" focusposition="1,1"><o:fill v:ext="view" type="gradientCenter"></o:fill></v:fill><v:shadow color="#ddd"></v:shadow><v:textbox inset="4.68pt,2.34pt,4.68pt,2.34pt">

FacesContext<o:p></o:p>

</v:textbox></v:oval><v:line id="_x0000_s1051" style="POSITION: absolute; mso-wrap-style: none; v-text-anchor: middle; flip: x" strokeweight="1.25pt" to="6405,8337" from="4531,5572"><v:stroke endarrow="block"></v:stroke><v:shadow color="#ddd"></v:shadow></v:line><v:oval id="_x0000_s1052" style="LEFT: 3012px; WIDTH: 2780px; POSITION: absolute; TOP: 8337px; HEIGHT: 1581px; mso-wrap-style: none; v-text-anchor: middle" fillcolor="#39f"><v:fill type="gradientRadial" focus="100%" rotate="t" focussize="" focusposition="1,1"><o:fill v:ext="view" type="gradientCenter"></o:fill></v:fill><v:shadow color="#ddd"></v:shadow><v:textbox inset="4.68pt,2.34pt,4.68pt,2.34pt">

Lifecycle<o:p></o:p>

</v:textbox></v:oval><v:shape id="_x0000_s1053" style="LEFT: 9657px; WIDTH: 3551px; POSITION: absolute; TOP: 6262px; HEIGHT: 1723px" stroked="f" filled="f" fillcolor="#fcccc8" type="#_x0000_t202"><v:fill opacity="26214f"></v:fill><v:shadow color="#ddd"></v:shadow><v:textbox style="mso-fit-shape-to-text: t" inset="4.68pt,2.34pt,4.68pt,2.34pt">

1. 创建FacesContext<o:p></o:p>

</v:textbox></v:shape><v:shape id="_x0000_s1054" style="LEFT: 2362px; WIDTH: 3550px; POSITION: absolute; TOP: 6165px; HEIGHT: 1723px" stroked="f" filled="f" fillcolor="#fcccc8" type="#_x0000_t202"><v:fill opacity="26214f"></v:fill><v:shadow color="#ddd"></v:shadow><v:textbox style="mso-fit-shape-to-text: t" inset="4.68pt,2.34pt,4.68pt,2.34pt">

2. 把控制权交给Lifecycle<o:p></o:p>

</v:textbox></v:shape><v:line id="_x0000_s1055" style="POSITION: absolute; mso-wrap-style: none; v-text-anchor: middle" strokeweight="1.25pt" to="9559,9424" from="6701,9127"><v:stroke endarrow="block"></v:stroke><v:shadow color="#ddd"></v:shadow></v:line><v:shape id="_x0000_s1056" style="LEFT: 6110px; WIDTH: 3548px; POSITION: absolute; TOP: 9719px; HEIGHT: 1724px" stroked="f" filled="f" fillcolor="#fcccc8" type="#_x0000_t202"><v:fill opacity="26214f"></v:fill><v:shadow color="#ddd"></v:shadow><v:textbox style="mso-fit-shape-to-text: t" inset="4.68pt,2.34pt,4.68pt,2.34pt">

3. 分6个阶段处理FacesContext<o:p></o:p>

</v:textbox></v:shape><v:oval id="_x0000_s1057" style="LEFT: 5960px; WIDTH: 3992px; POSITION: absolute; TOP: 4585px; HEIGHT: 1185px; mso-wrap-style: none; v-text-anchor: middle" fillcolor="#39f"><v:fill type="gradientRadial" focus="100%" rotate="t" focussize="" focusposition="1,1"><o:fill v:ext="view" type="gradientCenter"></o:fill></v:fill><v:shadow color="#ddd"></v:shadow><v:textbox inset="4.68pt,2.34pt,4.68pt,2.34pt">

FacesServlet<o:p></o:p>

</v:textbox></v:oval><w:wrap type="none"></w:wrap><w:anchorlock></w:anchorlock></v:group><o:p></o:p>

<o:p> </o:p>

<o:p> </o:p>

五、<o:p></o:p>

在faces-config.xml 文件中配置受管理的Bean<o:p></o:p>

六、Strust与Jsf的区别<o:p></o:p>

1、Struts侧重于控制层，而JSF则侧重于表示层<o:p></o:p>

2、和JSP对应的Bean不同<o:p></o:p>

3、数据验证<o:p></o:p>

4、控制层<o:p></o:p>

5、页面导航<o:p></o:p>

<o:p> </o:p>

<o:p> </o:p>

<o:p> </o:p>

<o:p> </o:p>

评论

1 楼 Imagination_Fly 2007-08-29  

由于一些图片看不清楚 我把WORD文档打包上传一个