【转】JSF中的三大核心组件 UI标签的详细介绍和使用举例
JSF提供了大量的UI标签来简化创建视图。这些UI标签类似于ASP.NET中的服务器组件。使用这些标签,可以通过其value,binding,action,actionListener等属性直接绑定到托管Bean的属性,实例或者方法上。
b、 JSF提供的UI标签,应用界面的UI标签直接绑定到托管Bean
c、 页面导航规则
下面我们就来介绍UI标签:
JSF与JSP的标签的区别在于,JSF的标签可以使用value,binding,action和actionListener等属性直接绑定到托管Bean上面去。
JSF包括两组标签库:jsf_core.tld核心标签库和html_basic。tld HTML标签库。
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
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
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
locale:指定国家语言
renderKitId:JSF根据该属性值选择对应的绘制器工具箱来绘制该页面
beforePhase:绑定生命周期监听器(必须有public void beforePhase(Java.faces.event.PhaseEvent)形式的签名),JSF会在每个生命周期阶段(除了恢复视图)之前调用该方法。
afterPhase:绑定生命周期监听器(必须有public void afterPhase(java.faces.event.PhaseEvent)形式的签名),JSF会在每个生命周期阶段(除了恢复视图)之后调用该方法。
<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属性用于指定输入框的最大长度。
<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个属性的含义:
itemValue:指定生成列表项或者复选框的值
value:与其他的UI标签的value属性不同,不是将该组件的值绑定到托管Bean,而是将该组件本身绑定到托管Bean
这三个标签的value属性值必须是一个List或者数组。
<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>
这三个标签和前面介绍的三个标签的功能基本相似,只是这里的只能单选。
<h:selectBooleanCheckbox />
在页面上生成一个复选框,用于勾选或者取消勾选该复选框
与上面三个复选框不同,它的value属性必须绑定到托管Bean中boolean类型的属性,不需要与<f:selectItem>标签一起使用。
<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="data:images/01.jpg" />
</h:commandLink>
</h:form>
<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}
<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用于把多个元素组成一个元素。
<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;
}
}
<h:graphicImage value="images/01.jpg" alt="图像01" />
这个标签将生成HTML的img标签。
【转】JSF中的三大核心组件 UI标签的详细介绍和使用举例的更多相关文章
- HTML5中<template>标签的详细介绍
HTML5中<template>标签的详细介绍(图文) 这篇文章主要介绍了HTML5中的template标签,是HTML5入门中的重要知识,需要的朋友可以参考 一.HTML5 templa ...
- Swift UI控件详细介绍(上)
UI控件 首先介绍一下AppDelegate.swift@UIApplicationMain 调用了OC中的UIApplicationMain函数:UIApplicationMain是iOS应用程序的 ...
- SD卡中FAT32文件格式快速入门(图文详细介绍)【转】
本文转自:http://blog.csdn.net/mjx91282041/article/details/8904705 说明: MBR :Master Boot Record ( 主引导记录) D ...
- SD卡中FAT32文件格式快速入门(图文详细介绍)
说明: MBR :Master Boot Record ( 主引导记录) DBR :DOS Boot Record ( 引导扇区) FAT :File Allocation Table ( 文件分配表 ...
- maven中的pom配置文件标签的详细介绍
<span style="padding:0px; margin:0px"><project xmlns="http://maven.apache.or ...
- MyBatis:SQL语句中的foreach标签的详细介绍
foreach 也就是遍历迭代,在SQL中通常用在 in 这个关键词的后面 foreach元素的属性主要有 item,index,collection,open,separator,close. 分别 ...
- HTML:Input元素标签的详细介绍
总结Input的标签: Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍.1,type=text输入类型是t ...
- html meta标签用法详细介绍
meta是html语言head区的一个辅助性标签. 在页面中都有类似这样的html代码: <head> <meta http-equiv="content-Type&quo ...
- Android 项目中文件夹作用(res文件夹详细介绍)
1. src:存放所有的*.Java源程序. 2. gen:为ADT插件自动生成的代码文件保存路径,里面的R.java将保存所有的资源ID. 3. assets:可以存放项目一些较大的资源文件,例如: ...
随机推荐
- Java 容器 & 泛型:二、ArrayList 、LinkedList和Vector比较
Writer:BYSocket(泥沙砖瓦浆木匠) 微博:BYSocket 豆瓣:BYSocket 继续上一篇的容器文章认识容器,泥瓦匠慢慢带你们走进List的容器解说.今天泥瓦匠想说说 ArrayLi ...
- 项目ITP(五) spring4.0 整合 Quartz 实现任务调度
前言 系列文章:[传送门] 项目需求: 二维码推送到一体机上,给学生签到扫描用.然后需要的是 上课前20分钟 ,幸好在帮带我的学长做 p2p 的时候,接触过.自然 quartz 是首选.所以我就配置了 ...
- Python快速学习05:面向对象
系列文章:[传送门] Python对象是Python语言的核心部分.Python使用类(class)和对象(object),进行面向对象(object-oriented programming,简称O ...
- SpringCloud2.0入门3-新的eureka依赖
前言 Springboot2.0推出有一段时间了,是要学习1.5+还是从2.0开始?犹豫的原因是资料不全,目前现有的资料大部分是1.0的.但作为学习者,肯定要学习最新的.不如,先试试. 搭建Eurek ...
- springboot情操陶冶-SpringApplication(一)
SpringApplication是所有springboot的入口类,分析此类有助于我们了解springboot的工作机制.本文以2.0.3.REALEASE版本作分析 SpringApplicati ...
- mysql累积聚合
累积聚合为聚合从序列内第一个元素到当前元素的数据,如为每个员工返回每月开始到现在累积的订单数量和平均订单数量 行号问题有两个解决方案,分别是为使用子查询和使用连接.子查询的方法通常比较直观,可读性强. ...
- 用初中代数结合python画出正方形
在屏幕上打印类似下面的图形: 常规画正方形的算法: 这几乎是初学所有计算机语言时都会遇到的问题.算法都大致类似,就是找出打印规律然后用计算机语句表达出来.最常规的算法是:输入数字n就打印n行,首行和尾 ...
- Python图像处理之图片文字识别(OCR)
OCR与Tesseract介绍 将图片翻译成文字一般被称为光学文字识别(Optical Character Recognition,OCR).可以实现OCR 的底层库并不多,目前很多库都是使用共同 ...
- 阿里云IoT
阿里云IoT: https://iot.aliyun.com/
- “每日一道面试题”.Net中GC的运行机制
GC 也就是垃圾回收,经常遇到的面试题,关于GC 感觉可以写一本书,我们要做的也就是简单理解,如果有意愿,可以深入研究 所谓的垃圾回收,也就是清理回收托管堆上不再被使用的对象内存,并且移动仍在被使用的 ...