简述学习JSF小记
创始人
2024-04-06 01:12:03
0

学习JSF有一段时间了,从刚开始对JSF的好奇到现在对JSF的渐渐熟悉,花费了不少时间,但所获还是甚少。提到JSF,我们总喜欢把它跟jsp作比较,这很正常。我认为JSF是站在jsp这个巨人的肩膀上,才能有如此的成就。JSF看似像是一个类似于struts的框架,但又不仅是如此。虽然 Struts和JSF都属于表现层框架,但两者分属不同性质的框架,后者是一种事件驱动型的组件模型,而Struts只是单纯的MVC模式框架。从技术上说,JSF提供了一套类似于html的统一标签,但这种标签不是简单的静态标签,而是动态的。

学习JSF的起步,我们按照惯例先从一个demo开始。在使用eclipse开发***个JSF的demo前,先要去下载JSF的几个jar包:JSF-impl.jar,JSF- api.jar,commons-digester.jar,commons-collections.jar,commons- beanutils.jar,jstl.jar,standard.jar。你可以把他们先放到Web应用程序的/WEB-INF/lib目录下,或者以后再添加进去。

在eclipse中新建一个JSF项目,“新建”—“web project”,它跟创建一个jsp项目完全相同。完成后,右键项目名,选择“myeclipse”—“add JSF facelets capabilities……”,这相当于添加了对JSF的支持平台。打开项目,我们可以看到熟悉的文件路径,几个jar包,webroot文件夹,index.jsp,web.xml文件等。不过这个多了一个face-config文件,这也是JSF项目与jsp项目的***不同之处。接下来,我们要配置web.xml文件,还有faces-config文件。

如果你以前使用过struts,那么你肯定熟悉struts里面的struts-config文件,它与faces-config何其相似。faces-config的参数配置主要有以下几个:

1.navigation- rule(导航规则)。它由(起始页面),(导航案例)两部分组成。在“导航案例”中,有(导航动作),(导航结果),(目的页面)等。通过这个配置,我们告诉web应用程序在什么时候跳转,如何跳转,以及从哪个页面跳转到哪个页面。

2.managed-bean(托管bean)。托管bean主要有以下几个部分:(托管bean的实例名),(托管bean类的全名),(托管 bean的作用域)。scope有none,request,session,applicaton等。application不常用,用得较多的就是 session和request了。request表示bean的存活时间为程序请求阶段,而session的存活时间为程序交互开始,直到浏览器关闭或者会话结束。在faces-config的“design”视图中,我们可以很方便地进行配置,

下一步,我们开始在eclipse中编辑学习JSF页面的内容,为了简便,我们直接对index.jsp页面进行修改。在页头我们需要添加一些jsp的page指令和常用的html,head和body标签(有的已经自动生成),如以下:
◆<%@ page contentType="text/html;charset=utf-8" pageEncoding="utf-8" language="java"%>
……<BR>同时,还要添加声明2个JSF标准的标签库描述文件:<BR>◆<%@ taglib uri="http://java.sun.com/JSF/core" prefix="f"%>(JSF标记标签)<BR>◆<%@ taglib uri="http://java.sun.com/JSF/html" prefix="h"%>(JSF的html用户界面组件标签)<BR>此外,页面中还需要加入view和form标签,因为所有的JSF组件标签必须定义在view这个标签之内。   </P> <P></P> <P>【编辑推荐】</P> <OL> <LI><FONT color=#0000ff>JSF标记与JSTL标记混合使用</FONT></LI> <LI><FONT color=#0000ff>升级JSF1.2的艰难之旅</FONT></LI> <LI><FONT color=#0000ff>OSGi与JSF结合开发</FONT></LI> <LI><FONT color=#0000ff>使JSF支持带有HTMLMessage</FONT></LI> <LI><FONT color=#0000ff>JSF如何使用ExternalContext</FONT></LI></OL> <!--end::Text--> </div> <!--end::Description--> <div class="mt-5"> <!--关键词搜索--> </div> <div class="mt-5"> <p class="fc-show-prev-next"> <strong>上一篇:</strong><a href="/chengxu/12491.html">常用的JavaScript验证正则表达式</a><br> </p> <p class="fc-show-prev-next"> <strong>下一篇:</strong><a href="/chengxu/12493.html">Adobe最新开发工具组合:进军RIA的催化剂</a> </p> </div> <!--begin::Block--> <div class="d-flex flex-stack mb-2 mt-10"> <!--begin::Title--> <h3 class="text-dark fs-5 fw-bold text-gray-800">相关内容</h3> <!--end::Title--> </div> <div class="separator separator-dashed mb-9"></div> <!--end::Block--> <div class="row g-10"> </div> </div> <!--end::Table widget 14--> </div> <!--end::Col--> <!--begin::Col--> <div class="col-xl-4 mt-0"> <!--begin::Chart Widget 35--> <div class="card card-flush h-md-100"> <!--begin::Header--> <div class="card-header pt-5 "> <!--begin::Title--> <h3 class="card-title align-items-start flex-column"> <!--begin::Statistics--> <div class="d-flex align-items-center mb-2"> <!--begin::Currency--> <span class="fs-5 fw-bold text-gray-800 ">热门资讯</span> <!--end::Currency--> </div> <!--end::Statistics--> </h3> <!--end::Title--> </div> <!--end::Header--> <!--begin::Body--> <div class="card-body pt-3"> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/241137.html" class="text-dark fw-bold text-hover-primary fs-6">如何允许远程连接到MySQL数...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">[[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/61017.html" class="text-dark fw-bold text-hover-primary fs-6">如何利用交换机和端口设置来管理...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/119031.html" class="text-dark fw-bold text-hover-primary fs-6">施耐德电气数据中心整体解决方案...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://files.pic99.top/shayuweb/202409/eb2e03366045d9f.jpg')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/139440.html" class="text-dark fw-bold text-hover-primary fs-6">20个非常棒的扁平设计免费资源</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/27164.html" class="text-dark fw-bold text-hover-primary fs-6">2009 IBM动态架构新动力...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/225.html" class="text-dark fw-bold text-hover-primary fs-6">通过 XML 进行内容发布</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/130901.html" class="text-dark fw-bold text-hover-primary fs-6">德国电信门户网站可实时显示全球...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://files.pic99.top/shayuweb/202503/5fe82cca6c5ff78.jpg')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/246646.html" class="text-dark fw-bold text-hover-primary fs-6">为啥国人偏爱 Mybatis,...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://files.pic99.top/shayuweb/202407/404021d01b8347f.jpg')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/48727.html" class="text-dark fw-bold text-hover-primary fs-6">《非诚勿扰》红人闫凤娇被曝厕所...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">【51CTO.com 综合消息360安全专家提醒说,“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/133934.html" class="text-dark fw-bold text-hover-primary fs-6">2012年第四季度互联网状况报...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">[[71653]]  北京时间4月25日消息,据国外媒体报道,全球知名的云平台公司Akamai Te...</span> </div> <!--end::Title--> </div> </div> <!--end::Body--> </div> <!--end::Chart Widget 35--> </div> <!--end::Col--> </div> </div> <!--end::Content container--> </div> <!--end::Content--> </div> <!--end::Content wrapper--> <!--begin::Footer--> <div id="kt_app_footer" class="app-footer"> <!--begin::Footer container--> <div class="app-container container-xxl d-flex flex-column flex-md-row flex-center flex-md-stack py-3"> <!--begin::Copyright--> <div class="text-dark order-2 order-md-1"> <span class="text-muted fw-semibold me-1">2025 ©</span> <a href="/" target="_blank" class="text-gray-800 text-hover-primary">鲨鱼网</a> <a href="https://beian.miit.gov.cn/" target="_blank" class="text-gray-800 text-hover-primary"></a> <a href="http://spbjmm.com.shayuweb.com">上品网</a><a href="http://www.zzszq.net/">深知网</a><a href="http://www.taiyangwa.net/">太阳生活网</a><a href="http://baike.taiyangwa.net/">太阳百科网</a><a href="http://ypkjmy.com.shayuweb.com/">一品科技</a><a href="http://www.yuansudz.com/news/">元素网</a><a href="http://www.xn--i6qw12a.com/">帛典网</a><a href="http://xldmm.com.shayuweb.com/">星链岛</a> </div> <!--end::Copyright--> <!--begin::Menu--> <ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1"> <li class="menu-item"> <a href="/news/" target="_blank" class="menu-link px-2">科技资讯</a> </li> <li class="menu-item"> <a href="/chengxu/" target="_blank" class="menu-link px-2">程序开发</a> </li> <li class="menu-item"> <a href="/sitemap.xml" target="_blank" class="menu-link px-2">sitemap</a> </li> </ul> <!--end::Menu--> </div> <!--end::Footer container--> </div> <!--end::Footer--> </div> <!--end:::Main--> </div> <!--end::Wrapper--> </div> <!--end::Page--> </div> <!--end::App--> <div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true"> <!--begin::Svg Icon | path: icons/duotune/arrows/arr066.svg--> <span class="svg-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect opacity="0.5" x="13" y="6" width="13" height="2" rx="1" transform="rotate(90 13 6)" fill="currentColor"></rect> <path d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z" fill="currentColor"></path> </svg> </span> <!--end::Svg Icon--> </div> <!--begin::Javascript--> <script>var hostUrl = "/static/default/pc/";</script> <!--begin::Global Javascript Bundle(mandatory for all pages)--> <script src="/static/default/pc/plugins/global/plugins.bundle.js"></script> <script src="/static/default/pc/js/scripts.bundle.js"></script> <!--end::Global Javascript Bundle--> <!--end::Javascript--> </body> <!--end::Body--> </html>