ICEfaces Note(转)

zuomo

ICEfaces Note(1)
一、ICEfaces架构的主要元素包括：
1）Persistent Faces Servlet：通过”.faces“扩展名映射到Persistent Faces Servlet。
2）Blocking Servlet：管理所有要阻塞和非阻塞的请求。
3）D2D ViewHandler：建立Direct-to-DOM rendering环境。
4）D2D Parser：从JSP文档中聚集组件树。
5）D2D RenderKit：翻译组件树到DOM。
6）DOM Response Writer：往DOM中写入。
7）DOM Serializer：序列化DOM。
8）DOM Updater：聚集DOM的改变到单个的增量DOM更新。
9）Component Suite：提供丰富的JSF组件集。
10）Client-side Ajax Bridge：持续DOM更新请求的产生和响应处理。
二、DataTable组件：显示数据的表组件。
1）支持表头Facet（table Header facet）和表尾Facet（table Footer facet）；
2）内嵌列组件，依次包含列头（column header），列尾（column footer）和commandSortHeader facet；
3）带一可选功能支持分页浏览（a paged tabled view）。
tag-name：
tag-class：com.icesoft.faces.component.ext.taglib.DataTableTag
component-class：com.icesoft.faces.component.ext.HtmlDataTable
component-type：com.icesoft.faces.HtmlDataTable
component-family：javax.faces.Command
renderer-class：com.icesoft.faces.component.ext.renderkit.TableRenderer
renderer-type：com.icesoft.faces.Table
  

ice:form xmlns:h="http://java.sun.com/jsf/html"

       xmlns:f="http://java.sun.com/jsf/core"

       xmlns:ice="http://www.icesoft.com/icefaces/component">

ice:panelGrid styleClass="contentLayoutGridStyle" columns="1" border="0">

    ice:panelTabSet styleClass="componentPanelTabSetLayout">

    ice:panelTab label="#{msgs['tabbedHeadings.demo']}">

        ice:panelGrid styleClass="componentLayoutRootTable" columns="1">

            ice:panelGrid styleClass="formBorderHighlight">

                h3>

                ice:outputText value="#{msgs['component.textFields.directions']}"/>

                h3>

                br/>

                ice:panelGrid columns="2" rowClasses="textFieldNameRow,textFieldNameRow,textFieldCommentsRow">

                    ice:outputText styleClass="propertyLabel" value="#{msgs['component.textFields.name']}"/>

                    ice:inputText value="#{textFields.name}" partialSubmit="true"/>

                    ice:outputText styleClass="propertyLabel" value="#[msgs['component.textFields.password']}"/>

                    ice:inputSecret value="#{textFields.password}" partialSubmit="true"/>

                    div style="padding-top:5px;">

                        ice:outputText styleClass="propertyLabel" value="#{msgs['component.textFields.comments']}"/>

                    div>

                    ice:inputTextarea value="#{textFields.comments}" cols="20" rows="4" partialSubmit="true"

                        style="width:280px;height:80px;overflow:auto;"/>

                ice:panelGrid>

            ice:panelGrid>

            ice:panelGrid styleClass="formBorderHighlight">

                h3>

                    ice:outputText value="#{msgs['component.textFields.serverFeedback']}"/>

                h3>

                ice:panelGrid columns="2">

                    ice:outputText value="#{msgs['component.textFields.name']}" styleClass="valueHeader"/>

                    ice:outputText value="#{textFields.name}" styleClass="valueText"/>


                    ice:outputText value="#{msgs['component.textFields.password']}" styleClass="valueHeader"/>

                    ice:outputText value="#{textFields.password}" styleClass="valueText"/>


                    ice:outputText value="#{msgs['component.textFields.comments']}" styleClass="valueHeader"/>

                    ice:outputText value="#{textFields.comments}" styleClass="valueText"/>

                ice:panelGrid>

            ice:panelGrid>

        ice:panelGrid>

    ice:panelTab>

    ice:panelTab label="#{msgs['tabbedHeadigns.description']}">

        iframe src="./docs/textEntryDoc.html" class="includeIframe" width="100%">iframe>

    ice:panelTab>

    ice:panelTab label="#{msgs['tabbedHeadings.source']}">

        iframe src="./sourcecodeStream.html?path=./inc/components/textFields.jspx"

            class="includeIframe" width="100%">

        iframe>

    ice:panel>

    ice:panelTabSet>

ice:panelGrid>

ice:form>


                          
ICEfaces Note(2)
行选择器（Row Selector）
行选择器tag能够实现数据表中行的选择。它有下面的属性：
1）值（value）：是布尔值，指示某行被选择了。这个值必须被定义到数据表的变量中。它必须出现。
2）多行（multiple）：缺省为false；若为true，表示超过一行被选择。
3）选择监听器（selectionListener）：当点击了一行时，监听器方法被调用。
4）选择类（selectedClass）：当一行被选择时，应用某CSS风格。
5）鼠标覆盖类（mouseOverClass）：当鼠标移动到某行时，应用某CSS风格。


ice:dataTable var="person" value="#{scrollerList.persons}" rows="15" columnClasses="tableCol">

    ice:column rendered="#{table.renderFirstName}">

        ice:rowSelector value="#{person.selected}" multiple="#{table.multipleSelection}"

                selectedClass="tableRowSelected" mouseOverClass="tableRowMouseOver"

                selectionListener="#{table.rowSelection}"/>

        f:facet name="header">

            ice:outputText value="#{msgs['component.table.column1']}"/>

        f:facet>

        ice:outputText value="#{person.firstName}"/>

    ice:column>

ice:dataTable>

列（Columns）
列组件提供了一个动态模型用于在运行时增加和删除列。它使用标准变量和值属性。
列组件连同ice:dataTable一起工作。headerClass和columnClasses在dataTable组件上定义，将被应用于所有产生的列作为一个单一的列。
example:

ice:dataTable var="item" value="#{columnsBean.rowDataModel}" columnClasses="columnsColumn">

    ice:columns value="#{columnsBean.columnDataModel}" var="column">

        f:facet name="header">

            ice:outputText id="intCell" value="#{columnsBean.intValue}"/>

        f:facet>

    ice:columns>

ice:dataTable>



ice:dataTable var="item" value="#{columnsBean.rowDataModel}" columnClasses="columnsColumn">

    ice:column>

        f:facet name="header">

            ice:outputText value="id"/>

        f:facet>

        ice:outputText value="#{item.id}"/>

    ice:columns value="#{columnsBean.columnDataModel}" var="column">

        f:facet name="header">

            ice:outputText value="#{column}"/>

        f:facet>

        ice:outputText value="#{columnsBean.intValue}"/>

    ice:columns>

ice:dataTable>

ICEfaces Note(3)
一、使用ICEfaces的Auto-Complete Component
自动完成组件（Auto-Complete Component）实际上就是ice:selectInputText组件。这个组件提供了一个带有自动完成功能的增强的文本输入组件。一旦用户输入文本到组件中，组件将提供一个可能匹配的弹出列表供用户选择。
这个组件在用户还没有完成输入时预测了用户想要键入的短语。这个组件需要开发者在backing bean实现匹配搜索算法。
下面给了使用该组件的例子。
1、selectInputText组件能产生两种类型的列表（list）：
1）字符串数据的列表；
2）任意复杂的子组件列表。
－－－－－－－－－－－－－－－－－－－－－－－－－－
   
－－－－－－－－－－－－－－－－－－－－－－－－－－
上面的代码将显示一个下拉列表引用来匹配输入的文本。
rows属性定义了当输入文本时，有多少结果项被列出；
width属性定义了输入文本框和下拉列表框的宽度；
valueChangeListener属性链接backing bean，来控制当输入列表改变时相应列表的改变。
f:selectItems是JSF的标签，它链接到backing bean，列出所有的有效值。
下面的代码将展示怎样使用组件来产生任意子组件的列表：
－－－－－－－－－－－－－－－－－－－－－－－－－－

ice:selectInputText rows="6" width="300" listVar="city"

    valueChangeListener="#{autoCompleteBean.updateList}"

    listValue="#{autoCompleteBean.list}">

    f:facet name="selectInputText">

        ice:panelGrid columns="3" style="margin-bottom:-20px;"

            columnClasses="cityCol,stateCol,zipCol">

            ice:outputText value="#{city.city}"/>

            ice:outputText value="#{city.state}"/>

            ice:outputText value="#{city.zip}"/>

        ice:panelGrid>

    f:facet>

ice:selectInputText>
－－－－－－－－－－－－－－－－－－－－－－－－－－
这个例子显示了输入城市名的部分单词，则下拉列表中显示出匹配的城市名、州名、邮政编码。
2、创建Backing Beans
在例子中我们使用三个主要的backing beans：
（1）AutoCompleteBean：从AutoCompleteDictionary类存储收集到的值。其包含的方法是更新列表和从字典列表中得到匹配。
（2）AutoCompleteDictionary：从文件系统中的一个文件得到字典列表。
（3）City：基本类，作为字典列表的对象。
1）创建字典
对于自动完成组件要工作，必须有一个字典，让backing beans能查询和得到匹配的变量列表。如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－

java version="1.4.2_08" class="java.beans.XMLDecoder">

    object class="java.util.ArrayList">

        void method="add">

            object class="com.icesoft.icefaces.tutorial.component.autocomplete.City">

                void property="areaCode">

                    string>631string>

                void>

                void property="city">

                    string>Holtsvillestring>

                void>

                void property="country">

                    string>Suffolkstring>

                void>

                void property="state">

                    string>New Yorkstring>

                void>

                void property="stateCode">

                    string>NYstring>

                void>

                void property="zip">

                    string>00501string>

                void>

            object>

        void>

    object>

java>


ICEfaces Note(4)
配置导航规则
按Navigation Model的解释，导航是一套规则，用于在点击按钮或超链接时，显示所选择的下一个页面。导航规则在应用程序配置源文件中进行定义。
每一个导航规则都规定了怎样从一个页面进入其它的页面集。
当导航规则选定后，从当前页要访问到哪一个下一页，取决于当组件被点击或者逻辑结果返回时调用的行为方法（action method）。
结果（outcome）可以是开发者选择的任何东东，下面列出了通常返回的一些结果：
-----------------------------------------------------------------------------------------------------------------------------------
Outcome                              Means
success                               Everything worked. Go on to the next page.
failure                                   Something is wrong. Go on to an error page.
logon                                    The user needs to log on first. Go on to the logon  page.
on results                             The search did not find anything. Go to the search page again.
-----------------------------------------------------------------------------------------------------------------------------------
下面是匹配用户名和密码的例子：

navigation-rule>

    from-view-id>/logon.jspfrom-view-id>

    navigation-case>

        from-action>#{LogonForm.logon}from-action>

        from-outcome>successfrom-outcome>

        to-view-id>/storefront.jspto-view-id>

    navigation-case>

    navigation-case>

        from-action>#{LogonForm.logon}from-action>

        from-outcome>failurefrom-outcome>

        to-view-id>/logon.jspto-view-id>

    navigation-case>

navigation-rule>


导航规则定义了logon.jsp可能导航的页面。每一个navigation-case元素定义了logon.jsp的一种导航可能。第一个navigation-case元素说明如果LogonForm.logon返回的结果为success，则访问storefront.jsp；第二个navigation-case元素说明如果LogonForm.logon返回为failure，则返回logon.jsp。
下面再看另一个例子：

navigation-rule>

    from-view-id>/catalog.jspfrom-view-id>

    navigation-case>

        from-outcome>successfrom-outcome>

        to-view-id>/bookcashier.jspto-view-id>

    navigation-case>

    navigation-case>

        from-outcome>out of stockfrom-outcome>

        from-action>#{catalog.buy}from-action>

        to-view-id>/outofstock.jspto-view-id>

    navigation-case>

    navigation-case>

        from-outcome>errorfrom-outcome>

        to-view-id>/error.jspto-view-id>

    navigation-case>

navigation-rule>
每一个导航规则元素和经可选的from-view-id元素定义的组件树识别符相一致。
导航规则由可选的from-outcome元素和from-action元素来定义。from-outcome元素定义了一个逻辑结果，from-action元素定义了表达式绑定的一个方法来引用返回一个字符串的行为方法，这个字符串是逻辑结果。
navigation-case元素以下面的情况来检查结果和表达式绑定方法：
1）指定from-outcome和from-action两者的值。
2）只指定from-outcome的值。这个值必须匹配经UI命令组件的action属性或UI命令组件引用的方法返回的结果。
3）只指定from-action的值。这个值必须匹配经组件标签指定的action表达式。
ICEfaces Note(5)


ice:panelGrid styleClass="componentLayoutRootTable" columns="1">

    ice:dataTable value="#{salesRecordsManager.salesGroupRecordBeans}" var="salesRecord" cellpadding="0" width="550px"

            columnClasses="triangleColumn,cartNameColumn,cartQuantityColumn,cartQuantityColumn,cartPriceColumn,cartQuantityColumn">

        ice:column>

            ice:panelGroup styleClass="#{salesRecord.indentStyleClass}">

                ice:commandLink actionListener="#{salesRecord.toggleSubGroupAction}">

                    ice:graphicImage value="#{salesRecord.expandContractImage}" style="border:0px solid;"/>

                ice:commandLink>

            ice:panelGroup>

        ice:column>

        

         Description -->

        ice:column>

            f:facet name="header">

                ice:outputText value="Description"/>

            f:facet>

            ice:panelGroup styleClass="#{salesRecord.rwoStyleClass}" style="width:130px;">

                ice:outputText value="#{salesRecord.description}"/>

            ice:panelGroup>

        ice:column>

        

         Date -->

        ice:column>

            f:facet name="header">

                ice:outputText value="Date"/>

            f:facet>

            ice:panelGroup styleClass="#{salesRecord.rwoStyleClass}" style="width:130px;">

                ice:outputText value="#{salesRecord.dateString}"/>

            ice:panelGroup>

        ice:column>

        

         quantity -->

        ice:column>

            f:facet name="header">

                ice:outputText value="Quantity"/>

            f:facet>

            ice:panelGroup styleClass="#{saleRecord.rowStyleClass}" style="width:60px;">

                ice:outputText value="#{salesRecord.quantity}"/>

            ice:panelGroup>

        ice:column>

        

         price -->

        ice:column>

            f:facet name="header">

                ice:outputText value="Price"/>

            f:facet>

            ice:panelGroup styleClass="#{salesRecord.rwoStyleClass}" style="width:60px;">

                ice:outputText value="#{salesRecord.price}"/>

            ice:panelGroup>

        ice:column>

        

         total -->

        ice:column>

            f:facet name="header">

                ice:outputText value="Total"/>

            f:facet>

            ice:panelGroup styleClass="#{salesRecord.rwoStyleClass}" style="width:60px;">

                ice:outputText value="#{salesRecord.total}"/>

            ice:panelGroup>

        ice:column>

        

        

    ice:dataTable>

ice:panelGrid>
ICEFaces Note（6）
——Progress Bar Component进度条组件
outputProgress组件能用于向用户报告进度，表明服务端任务运行需要多长时间。这个组件能运行在两种模式下：“determinate”模式和“indeterminate”模式。
（1）“determinate”模式：用于反映在运行过程中的步数或单元数。该模式为缺省模式，呈现一个输出进度条指示任务完成的百分比。最典型的是从0%到100%的显示进度。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－
－－－－－－－－－－－－－－－－－－－－－－－－－－－－
（2）“indeterminate”模式：用于无法预测运行的过程需要的时间的情况，或者是无法预测完成任务需要的步骤数的情况。此模式下，该组件呈现一个活动条，指示活动正在进行。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－
－－－－－－－－－－－－－－－－－－－－－－－－－－－－
属性介绍：
（1）binding
这个值绑定表达式连接组件到一个backing bean的属性上。
（2）id
是组件标识符。在封闭的父组件级内，这个值是唯一的。
（3）indeterminate
对未知任务运行时进度条隐藏百分比。
（4）label
缺省为百分比值。可自定义label。
（5）labelComplete
任务完成时显示的label。缺省值为“Done”。
（6）labelPosition
百分比文本显示的位置。可以设置值为：left左，right右，top顶部，topcenter（进度条上方正中），topright（进度条上方靠右），bottom底部，bottomcenter（进度条下方正中），bottomright（进度条下方靠右），embed（嵌入到进度条中）。
（7）rendered
指示是否显示该组件。
（8）renderedOnUserRole
如果用户是指定角色，则该组件将正常显示。
（9）style
此组件的CSS风格应用。
（10）styleClass
用空格分隔的CSS style类的应用。这个值通过“class类“属性传递。
定义其使用的所有风格的类名，缺省值为：iceOutProg。
iceOutProg，iceOutProgBg，iceOutProgTxt。
标准模式：iceOutProgFill
Indeterminate模式：iceOutProgIndetActv（在执行期间），iceOutProgIndetInactv（任务完成后）。
（11）value
绑定到application bean。

ICEFaces Note（7）
ICEfaces 组件集
1、组件
panelSeries组件提供了一个机制，可以在面板（panel）内动态产生一系列重复的子组件。这个组件以一个相似的、重复的方式显示它的子组件，这和数据表dataTable组件显示数据行很相似。然而，panelSeries组件更灵活，它能显示一系列任意复杂的子组件。可以定义数据集（dataset），并分别通过其属性值和变量var来实现。
属性列表：binding，id，rendered，rows，style，styleClass，value
1）first
显示0行。如果此属性值被设置为0，显示将从下面数据的首行开始。
2）var
请求（Request）范围内的属性值。
2、组件
panelStack组件是一个组件容器，它自身包含了多种面板组件组（panel groups）。每次只显示一组包含的面板组件组，其填充到panelStack组件中。通过selectPanel属性选择的面板组件组将被显示，而其它面板组件组将被隐藏。
panelStack组件能用于多种情况，如：一个form区域必须包含多个内嵌的panel时，每次只显示它们中的一个，可以通过应用程序的状态改变或用户选择来动态地改变它们。
属性列表：binding，id，rendered，style，styleClass
1）renderedOnUserRole
如果用户是给定的角色，这个组件将正常显示。如果不是，此组件将会被忽略，不显示。
2）selectedPanel
要显示的子组件的ID
3、组件
使用定位面板组件列表能用于在一个面板内产生一系列重复的子组件。这些子组件的每一个都是可拖拽的（draggable），可以和其它子组件相互交换位置。另外，一个子组件能移动到面板组件的不同位置。当移动一个子组件时，列表的原值（java.util.List）将会做相应的修改来反映位置面板的新顺序。
属性列表：binding，id，rendered，rows，style，styleClass，value，var
1）constraint
可以设置为水平（horizontal）或垂直（vertical）拖拽，缺省为vertical。
2）first
首行为0行，且将会被显示。如果这个值设置为0，将从下面的数据中从首行显示。
3）handle
孩子节点（child node）的CSS类，用于拖拽item时。
4）hoverclass
The class of the list item being hovered over
5）listener
Listener监听器，当list被改变时调用
6）overlap
The class of the list item being hovered over



本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u2/67067/showart_1205358.html