公司动态
当前位置:首页 > 公司动态 > 学术交流 > JSF框架介绍(二)

     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标签。

版权归威海众成信息科技股份公司所有,转载请注明出处