JSF笔记 – JSF中的三大核心组件 UI标签的详细介绍和使用举例
来源:互联网 发布:mac电脑远程控制怎么弄 编辑:程序博客网 时间:2024/06/17 23:59
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:actionListenerf:attributef:convertDateTimef:convertNumberf:converterf:facetf:loadBundlef:paramf:phaseListenerf:selectItemf:selectItemsf:setPropertyActionListenerf:subviewf:validateDoubleRangef:validateLengthf:validateLongRangef:validatorf:valueChangeListenerf:verbatimf:view
关于个标签的详细介绍,可以参考JSF自带的帮助文档:
JSF解压目录\tlddocs\index.html
h:commandButtonh:commandLinkh:dataTableh:formh:graphicImageh:inputHiddenh:inputSecreth:inputTexth:inputTextareah:messageh:messagesh:outputFormath:outputLabelh:outputLinkh:outputTexth:panelGridh:panelGrouph:selectBooleanCheckboxh:selectManyCheckboxh:selectManyListboxh:selectManyMenuh:selectOneListboxh:selectOneMenuh:selectOneRadioh:column
关于个标签的详细介绍,可以参考JSF自带的帮助文档:
JSF解压目录\tlddocs\index.html
JSF的UI大都会生成一个或多个HTML标签,所以使用这些UI标签有时一些属性是通用的:
idimmediate:是否立即处理UIInput组件和实现了ActionSource接口的UI组件上事件rendered:指定条件表达式,当条件表达式为true时才会绘制组件required:指定用户是否必须为组件输入值requeredMessage:与requered一起使用,如果没有输入时提示信息value:该组件的值绑定到托管对象上onbluronchangeonclickondblclickonfocusonkeydownonkeypressonkeyuponmousedownonmousemoveonmouseoutonmouseoveronmouseupstylestyleClassbinding:将组件本身绑定到托管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="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笔记 – JSF中的三大核心组件 UI标签的详细介绍和使用举例
- JSF中的UI组件
- JSF笔记 – JSF消息FacesMessage的使用
- JSF笔记 – JSF消息FacesMessage的使用
- JSF组件标签
- JSF标签的使用实例
- JSF标签的使用1
- JSF标签的使用2
- jsf基础标签的使用
- JSF标签的使用1
- JSF标签的使用2
- 详细介绍JSF框架技术中使用的设计模式
- jsf 标签介绍1
- JSF使用icefaces标签<ui:insert>,<ui:include>,<ui:composition>
- 详细介绍JSF与Struts的异同
- JSF ui使用
- jsf表达式和jstl的标签混合使用原则
- JSF fileUpload 标签使用
- background-position:top left(关键字)、0px 0px(数值)、0% 0%(百分数)
- Python 和 VBScript 对文件编码-解码的方式 (Hex, Base64) 的疑问
- 华为软件训练营培训前自测题(黑色为网上看到版本,蓝色为自己写的,红色为修改后的版本)
- 查询语句之空值处理以及排序和分组
- OPENCV中cvFindContours函数说明
- JSF笔记 – JSF中的三大核心组件 UI标签的详细介绍和使用举例
- tns就是通过tcp/ip协议远程连接到其他机器上的Oracle,basic就是指本机中的Oracle
- SQL SERVER 2005 进行XML查询
- hdu1418
- 找方法删除媒体工具软件
- 视图
- oracle中的NLSRTL是什么呢?有什么用?
- GDI创建旋转HFONT
- CentOS 6.2 VirtualBox虚拟机镜像