JSF提供了大量的UI标签来简化创建视图。这些UI标签类似于ASP.NET中的服务器组件。使用这些标签，可以通过其value，binding，action，actionListener等属性直接绑定到托管Bean的属性，实例或者方法上。
1、JSF中的三大核心组件：
a、 JSF容器管理的托管Bean
b、 JSF提供的UI标签，应用界面的UI标签直接绑定到托管Bean
c、 页面导航规则
b、 JSF提供的UI标签，应用界面的UI标签直接绑定到托管Bean
c、 页面导航规则
下面我们就来介绍UI标签：
2、JSF中的UI标签：
JSF与JSP的标签的区别在于，JSF的标签可以使用value，binding，action和actionListener等属性直接绑定到托管Bean上面去。
JSF包括两组标签库：jsf_core.tld核心标签库和html_basic。tld HTML标签库。
2.1、JSF核心标签库：
f:actionListener f:attribute f:convertDateTime f:convertNumber f:converter f:facet f:loadBundle f:param f:phaseListener f:selectItem f:selectItems f:setPropertyActionListener f:subview f:validateDoubleRange f:validateLength f:validateLongRange f:validator f:valueChangeListener f:verbatim f:view
关于个标签的详细介绍，可以参考JSF自带的帮助文档：
JSF解压目录 lddocsindex.html
2.2、JSF的HTML标签：
h:commandButton h:commandLink h:dataTable h:form h:graphicImage h:inputHidden h:inputSecret h:inputText h:inputTextarea h:message h:messages h:outputFormat h:outputLabel h:outputLink h:outputText h:panelGrid h:panelGroup h:selectBooleanCheckbox h:selectManyCheckbox h:selectManyListbox h:selectManyMenu h:selectOneListbox h:selectOneMenu h:selectOneRadio h:column
关于个标签的详细介绍，可以参考JSF自带的帮助文档：
JSF解压目录 lddocsindex.html
2.3、UI标签的通用属性：
JSF的UI大都会生成一个或多个HTML标签，所以使用这些UI标签有时一些属性是通用的：
id immediate：是否立即处理UIInput组件和实现了ActionSource接口的UI组件上事件 rendered：指定条件表达式，当条件表达式为true时才会绘制组件 required：指定用户是否必须为组件输入值 requeredMessage：与requered一起使用，如果没有输入时提示信息 value：该组件的值绑定到托管对象上 onblur onchange onclick ondblclick onfocus onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup style styleClass binding：将组件本身绑定到托管Bean
2.4、<f:view>标签的常用属性：
locale：指定国家语言
renderKitId：JSF根据该属性值选择对应的绘制器工具箱来绘制该页面
beforePhase：绑定生命周期监听器(必须有public void beforePhase(Java.faces.event.PhaseEvent)形式的签名)，JSF会在每个生命周期阶段（除了恢复视图）之前调用该方法。
afterPhase：绑定生命周期监听器(必须有public void afterPhase(java.faces.event.PhaseEvent)形式的签名)，JSF会在每个生命周期阶段（除了恢复视图）之后调用该方法。
3、UI标签的使用举例：
3.1、<h:form>和基本输入标签的使用：
<f:view>
<h1>表单标签</h1>
<h:form>
单行文本框：<h:inputText value="#{userbean.username }" /><br />
密码框：<h:inputSecret value="#{userbean.password }" /><br />
多行文本区：<h:inputTextarea rows="3" cols="20" /><br />
隐藏域：<h:inputHidden value="#{userbean.message }" /><br />
</h:form>
</f:view>
其中<h:inputText>和<h:inputSecret>可以指定一个size属性用于指定输入框的最大长度。
3.2、多选标签的使用：
<h1>多选标签的使用</h1>
<h:form>
<!-- 复选框 -->
<h:selectManyCheckbox value="#{userbean.booklist }">
<f:selectItem itemLabel="Core Java" itemValue="Java" />
<f:selectItem itemLabel="Thinking in C++" itemValue="C++" />
<f:selectItem itemLabel="Spring Internals" itemValue="Spring" />
</h:selectManyCheckbox>
<!-- 生成一个允许多选的列表框 -->
<h:selectManyListbox value="#{userbean.booklist }" size="5">
<f:selectItem itemLabel="Core Java" itemValue="Java" />
<f:selectItem itemLabel="Thinking in C++" itemValue="C++" />
<f:selectItem itemLabel="Spring Internals" itemValue="Spring" />
</h:selectManyListbox>
<!-- 生成一个允许多选的复合框 -->
<h:selectManyMenu value="#{userbean.booklist }">
<f:selectItem itemLabel="Core Java" itemValue="Java" />
<f:selectItem itemLabel="Thinking in C++" itemValue="C++" />
<f:selectItem itemLabel="Spring Internals" itemValue="Spring" />
</h:selectManyMenu>
</h:form>
使用上面的三个标签必须与<f:selectItem>或者<f:selectItems>标签结合使用，其中的<f:selectItem>3个属性的含义：
itemLabel：可视化标签值
itemValue：指定生成列表项或者复选框的值
value：与其他的UI标签的value属性不同，不是将该组件的值绑定到托管Bean，而是将该组件本身绑定到托管Bean
itemValue：指定生成列表项或者复选框的值
value：与其他的UI标签的value属性不同，不是将该组件的值绑定到托管Bean，而是将该组件本身绑定到托管Bean
这三个标签的value属性值必须是一个List或者数组。
3.3、单选标签的使用：
<h1>单选标签的使用</h1>
<h:form>
<!-- 生成一组单选按钮 -->
<h:selectOneRadio value="userbean.booklist">
<f:selectItem itemLabel="Core Java" itemValue="Java" />
<f:selectItem itemLabel="Thinking in C++" itemValue="C++" />
<f:selectItem itemLabel="Spring Internals" itemValue="Spring" />
</h:selectOneRadio>
<!-- 生成一个只允许单选的列表框 -->
<h:selectOneListbox value="userbean.booklist" size="5">
<f:selectItem itemLabel="Core Java" itemValue="Java" />
<f:selectItem itemLabel="Thinking in C++" itemValue="C++" />
<f:selectItem itemLabel="Spring Internals" itemValue="Spring" />
</h:selectOneListbox>
<!-- 生成一个只允许单选的下来菜单 -->
<h:selectOneMenu value="#{userbean.booklist }">
<f:selectItem itemLabel="Core Java" itemValue="Java" />
<f:selectItem itemLabel="Thinking in C++" itemValue="C++" />
<f:selectItem itemLabel="Spring Internals" itemValue="Spring" />
</h:selectOneMenu>
</h:form>
这三个标签和前面介绍的三个标签的功能基本相似，只是这里的只能单选。
3.4、UISelectBoolean组件的使用：
<h:selectBooleanCheckbox />
在页面上生成一个复选框，用于勾选或者取消勾选该复选框
与上面三个复选框不同，它的value属性必须绑定到托管Bean中boolean类型的属性，不需要与<f:selectItem>标签一起使用。
3.5、UICommand组件的使用：
<h1>UICommand组件的使用</h1>
<h:form>
<!-- 生成一个可以提交表单的按钮 -->
<h:commandButton value="点击" />
<!-- 生成一个图片按钮 -->
<h:commandButton image="images/01.jpg" />
<!-- 生成一个可以提交表单的超链接 -->
<h:commandLink value="提交表单" />
<!-- 生成一个可以提交表单的图片链接 -->
<h:commandLink shape="circle" coords="20,20,10">
<img src="images/01.jpg" />
</h:commandLink>
</h:form>
3.6、UIOutput对应的输出组件的使用：
<h1>UIOutput对应的输出组件的使用</h1>
<!-- 使用outputText标签输出国际化资源 -->
<h:outputText value="#{userInfo.username }" />
<!-- 使用outputText标签输出Bean属性 -->
<h:outputText value="#{userbean.username }" />
<!-- 生成Label标签 -->
<h:outputLabel value="#{userbean.username }" />
<!-- 生成超链接 -->
<h:outputLink value="http://www.itzhai.com">IT宅</h:outputLink>
<!-- 输出带占位符的国际化消息 -->
<h:outputFormat value="#{userInfo.message }">
<f:param value="arthinking" />
</h:outputFormat>
这里使用到了国际化资源，需要创建：
在faces-config.xml问价中加载国际化资源的配置：
<application>
<resource-bundle>
<base-name>com.itzhai.user</base-name>
<var>userInfo</var>
</resource-bundle>
</application>
然后在com.itzhai目录下创建一个国际化资源文件的basename为user：
username="arthinking"
message=用户名：{0}
3.7、panelGrid和panelGroup的使用：
<h1>panelGrid标签的使用</h1>
<h:panelGrid columns="3" width="300px" border="1">
<!-- 生成表格标题 -->
<f:facet name="caption">
<h:outputText value="表格标题" />
</f:facet>
<!-- 生成表格头 -->
<f:facet name="header">
<h:outputText value="表格头" />
</f:facet>
<h:outputText value="1" />
<h:outputText value="2" />
<h:outputText value="3" />
<!-- panelGroup的使用 -->
<h:panelGroup layout="block" style="color:#cfcfff">
<h:outputText value="4" />
<h:outputText value="5" />
</h:panelGroup>
<h:outputText value="6" />
<h:outputText value="7" />
</h:panelGrid>
panelGrid用于生成表格，panelGroup用于把多个元素组成一个元素。
3.8、使用UIData迭代输出从数据源中获取的数据：
<h1>dataTable的使用</h1>
<h:dataTable width="600px" border="1" value="showbook.bookList" var="book" rowClasses="odd,even">
<!-- 使用facet生成caption -->
<f:facet name="caption">
<h:outputText value="book list" />
</f:facet>
<!-- 定义第一列 -->
<h:column>
<f:facet name="header">
<h:outputText>图书名</h:outputText>
</f:facet>
<h:inputText value="#{book.name }" size="3" />
</h:column>
<!-- 定义第二列 -->
<h:column>
<f:facet name="header">
<h:outputText>图书分类</h:outputText>
</f:facet>
<h:outputLink value="#{book.url }">
<h:inputText value="#{book.bookClass }" />
</h:outputLink>
</h:column>
<!-- 生成表格底部 -->
<f:facet name="footer">
<h:panelGroup>
<h:outputText value="计算机书籍" />
</h:panelGroup>
</f:facet>
</h:dataTable>
下面需要在名为showbook的托管Bean中提供一个bookList数据源，可以在他的get方法中提供数据：
public List<BookInfo> getBookList(){
List<BookInfo> books = new ArrayList<BookInfo>();
books.add(new BookInfo("Core Java", "Java", "www.itzhai.com"));
books.add(new BookInfo("Core Java", "Java", "www.itzhai.com"));
books.add(new BookInfo("Core Java", "Java", "www.itzhai.com"));
return books;
}
其中的BookInfo类如下：
public class BookInfo {
private String name;
private String url;
private String bookClass;
public BookInfo(String name, String bookClass, String url){
this.name = name;
this.bookClass = bookClass;
this.url = url;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public String getBookClass() {
return bookClass;
}
public void setBookClass(String bookClass) {
this.bookClass = bookClass;
}
}
3.9、图像组件的使用：
<h:graphicImage value="images/01.jpg" alt="图像01" />
这个标签将生成HTML的img标签。