JSF学习笔记超详细，从入门到精通，持续更新中~

JSF笔记

---

1、JSF概述

JavaServer Faces (JSF) 是一种用于构建Java Web 应用程序的标准框架（是Java Community Process 规定的JSR-127标准）。它提供了一种以组件为中心的用户界面（UI）构建方法，从而简化了Java服务器端应用程序的开发。由于由Java Community Process (JCP) 推动，属于Java EE 5中的技术规范，而受到了厂商的广泛支持。它是一种页面表示技术。

1.1 JSF设计目标

解决

• 冗长且重复的编码
• 需要处理超文本传输协议（HTTP）请求和相应

1.2 JSF优点

1. 易于创建用户界面
2. 易于验证和数据管理
3. 分离表示和业务逻辑
4. 可扩展的架构
5. 多个客户及设备的支持

1.3 JSF架构概述

1.3.3 JSF支持的渲染套件

• HTML渲染套件：用于JSF UI组件的默认渲染套件
• WML渲染套件：使用WML浏览器访问JSF页面的客户机
• 可缩放向量图形（SVG）渲染套件：显示包含图形和动画的UI组件

1.3.4 JSF生命周期

• 恢复视图阶段
• 应用请求处理阶段
• 处理验证阶段
• 更新模型值阶段
• 渲染响应阶段

1.3.5 JSF应用程序的组件

• Ui 组件
• 渲染器
• 验证器
• 转换器
• 受管bean
• 事件和侦听器
• 消息
• 导航

---

2、开发用户界面

2.1 JSF标记库

2.1.1 HTML标记库

在最上方添加命名空间 xmlns:h="http://xmlns.jcp.org/jsf/html"

1. 头部和主体

   <h:head>头部</h:head>
   <h:body>
       主体，一般别的标签都在这个里
   </h:body>
   

2. 表单

   <h:form>
           
   </h:form>
   

3. 输入

   1.普通文本输出框
   <h:inputText id="it1" value="pass data" required="true" maxlength="5" title="this is inputText">
       <!-- outputLabel 与inputText不结合使用 -->
       <h:outputLabel value="Enter password"/>
   </h:inputText><br/>
   
   2.文本输入域
   <h:inputTextarea id="ita1" cols="20" rows="20">
       <h:outputLabel value="Enter TextMsg:"/>
   </h:inputTextarea><br/>
   
   3.密码输入框
   <h:inputSecret value="wwww">
       <h:outputLabel value="Enter password"/>
   </h:inputSecret><br/>
   
   4.隐藏输入框
   <h:inputHidden value="hidden"/>
   

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ivysbRqD-1632830824311)(image-20210928193227211.png)]

4. 输出

   1. 普通输出框
   <h:outputText value="today 0915"/> <br/>
   
   3.链接输出
   <h:outputLink value="http://www.baidu.com">
       <h:outputText value="Jump to Baidu"/>
   </h:outputLink> <br/>
   
   3. 转换输出
   <!-- 中间不能有单引号，否则不能正确显示 -->
   <h:outputFormat value="Hello What is Your Favourite {0}? {1}? {2}?">
       <f:param value="Basketball"/>
       <f:param value="Coding"/>
       <f:param value="become better"/>
   </h:outputFormat>
   

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IaPMvA4o-1632830824314)(image-20210928193237652.png)]

5. 命令

   显示的是按钮
   <h:commandButton action="pge1" value="Submit"/> <br/>
   
   显示的是超链接文本
   <h:commandLink action="pge1" value="JumpLink"/>
   

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gWyCK7WF-1632830824316)(image-20210928193254859.png)]

6. 选择

   单选
    <h:selectOneMenu value="passdata">
        <f:selectItem itemLabel="王昭君" itemValue="1"/>
        <f:selectItem itemLabel="吕布" itemValue="2"/>
   </h:selectOneMenu>
   
   <h:selectOneRadio value="passdata">
       <f:selectItem itemLabel="王昭君" itemValue="FS"/>
       <f:selectItem itemLabel="吕布" itemValue="ZS"/>
   </h:selectOneRadio>
   
   <h:selectOneListbox value="passdata" id="sol1" size="3">
       <f:selectItem itemLabel="王昭君" itemValue="FS"/>
       <f:selectItem itemLabel="吕布" itemValue="ZS"/>
   </h:selectOneListbox>
   
   多选
   <h:selectManyMenu>
       <f:selectItem itemLabel="王昭君" itemValue="FS"/>
       <f:selectItem itemLabel="吕布" itemValue="ZS"/>
   </h:selectManyMenu>
   
   <h:selectManyCheckbox value="haha">
       <f:selectItem itemLabel="王昭君" itemValue="FS"/>
       <f:selectItem itemLabel="吕布" itemValue=