UI标签的详尽介绍和动用举例

JSF提供了大气的UI标签来简化创立视图。这几个UI标签类似于ASP.NET中的服务器组件。使用这个标签,能够经过其value,binding,action,actionListener等属性直接绑定到托管Bean的属性,实例或然措施上。

一 、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.一 、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.四 、<f:view>标签的常用属性:

locale:点名国家语言
renderKitId:JSF依据该属性值选用相应的绘制器工具箱来绘制该页面
beforePhase:绑定生命周期监听器(必须有public void
beforePhase(Java.faces.event.Phase伊芙nt)情势的签字),JSF会在各样生命周期阶段(除了回复视图)在此以前调用该情势。
afterPhase:绑定生命周期监听器(必须有public void
afterPhase(java.faces.event.Phase伊芙nt)格局的签字),JSF会在每种生命周期阶段(除了回复视图)之后调用该方法。

③ 、UI标签的选拔举例:

3.① 、<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>能够钦命2个size属性用于钦赐输入框的最大尺寸。

国家地理,3.贰 、多选标签的应用:

<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>三个天性的含义:

itemLabel:可视化标签值
itemValue:点名生成列表项大概复选框的值
value:与别的的UI标签的value属性差别,不是将该器件的值绑定到托管Bean,而是将该器件本人绑定到托管Bean

那多少个标签的value属性值必须是八个List或许数组。

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.④ 、UISelectBoolean组件的利用:

<h:selectBooleanCheckbox />

在页面上生成三个复选框,用于勾选或然裁撤勾选该复选框

与地点五个复选框区别,它的value属性必须绑定到托管Bean中boolean类型的习性,不须要与<f:selectItem>标签一起行使。

3.⑤ 、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.⑥ 、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目录下创制3个国际化能源文件的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.⑧ 、使用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.玖 、图像组件的接纳:

<h:graphicImage value="images/01.jpg" alt="图像01" />

其一标签将生成HTML的img标签。

 

相关文章