JSF笔记 – JSF中的三大核心组件 UI标签的详细介绍和使用举例
本文由发表于6年前 | J2EE | 暂无评论 |  被围观 9,192 views+
1、JSF中的三大核心组件:2、JSF中的UI标签:2.1、JSF核心标签库:2.2、JSF的HTML标签:2.3、UI标签的通用属性:2.4、<f:view>标签的常用属性:3、UI标签的使用举例:3.1、<h:form>和基本输入标签的使用:3.2、多选标签的使用:3.3、单选标签的使用:3.4、UISelectBoolean组件的使用:3.5、UICommand组件的使用:3.6、UIOutput对应的输出组件的使用:3.7、panelGrid和panelGroup的使用:3.8、使用UIData迭代输出从数据源中获取的数据:3.9、图像组件的使用:

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>
    <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

这三个标签的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标签。

除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/jsf-notes-jsf-in-the-three-core-components-of-the-ui-tags-and-use-of-detailed-examples.html
关键字: ,
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2011 12/3
如果您有更好的原创技术博文或者观点,欢迎投稿:admin@itzhai.com,或者关注订阅左侧浮动面板的微信号订阅IT宅itread)发送消息。
文章评论
    没有评论
给我留言

有人回复时邮件通知我
J2EE的相关文章
随机文章 本月热门 热评
1 Javascript中的for in语句获取对象属性的顺序问题 2012/8/16
2 Java Web笔记汇总 | IT宅文章归档 AD 2011/11/14 2011/11/14
3 JVM笔记 – 自动内存管理机制(垃圾收集器与内存分配策略) 2014/11/26
4 Java基础笔记 – 字符流分类详细介绍和各种字符流类介绍与使用 字符集 2011/10/22
5 C++语法笔记 – 泛型程序设计与C++标准库 2011/9/3
6 C++语法笔记 – C++简单程序设计 2011/9/3
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.