JSF提供了大量的UI标签来简化创建视图。这些UI标签类似于ASP.NET中的服务器组件。使用这些标签，可以通过其value，binding，action，actionListener等属性直接绑定到托管Bean的属性，实例或者方法上。

1、JSF中的三大核心组件：

a、 JSF容器管理的托管Bean 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解压目录\tlddocs\index.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解压目录\tlddocs\index.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>

表单标签

<h:form>
单行文本框：<h:inputText value=“#{userbean.username }” />

密码框：<h:inputSecret value=“#{userbean.password }” />

多行文本区：<h:inputTextarea rows=“3” cols=“20” />

隐藏域：<h:inputHidden value=“#{userbean.message }” />

</h:form>
</f:view>

其中<h:inputText>和<h:inputSecret>可以指定一个size属性用于指定输入框的最大长度。

3.2、多选标签的使用：

多选标签的使用

<!\-\- 生成一个允许多选的列表框 -->
<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

这三个标签的value属性值必须是一个List或者数组。

3.3、单选标签的使用：

单选标签的使用

这三个标签和前面介绍的三个标签的功能基本相似，只是这里的只能单选。

3.4、UISelectBoolean组件的使用：

<h:selectBooleanCheckbox />

在页面上生成一个复选框，用于勾选或者取消勾选该复选框

与上面三个复选框不同，它的value属性必须绑定到托管Bean中boolean类型的属性，不需要与<f:selectItem>标签一起使用。

3.5、UICommand组件的使用：

UICommand组件的使用

3.6、UIOutput对应的输出组件的使用：

UIOutput对应的输出组件的使用

IT宅

这里使用到了国际化资源，需要创建：

在faces-config.xml问价中加载国际化资源的配置：

com.itzhai.user

userInfo

然后在com.itzhai目录下创建一个国际化资源文件的basename为user：

username=“arthinking”
message=用户名：{0}

3.7、panelGrid和panelGroup的使用：

panelGrid标签的使用

panelGrid用于生成表格，panelGroup用于把多个元素组成一个元素。

3.8、使用UIData迭代输出从数据源中获取的数据：

dataTable的使用

<!\-\- 使用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 getBookList(){
List books = new ArrayList();
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标签。