tomahawk JSF組件擴展組件(二)

九.使用DataModel作爲table的列或數據。

List headerList = new ArrayList();
        headerList.add(new ColumnHeader("Index","100",false));
        headerList.add(new ColumnHeader("Type","200",true));
        headerList.add(new ColumnHeader("Model","300",true));
        columnHeaders = new ListDataModel(headerList);

List rowList = new ArrayList();
        for (int i = 100; i <= 999; i++)
        {
            List colList = new ArrayList();
            colList.add(new Integer(i));
            colList.add("Car Type " + i);
            colList.add((i%2==0) ? "blue" : "green");
            rowList.add(colList);
        }
        data = new ListDataModel(rowList);

public void setColumnValue(Object value)
    {
      if (data.isRowAvailable() && columnHeaders.isRowAvailable())
      {
          ((List)data.getRowData()).set(columnHeaders.getRowIndex(), value);
      }
    }

    public String getColumnWidth()
    {
        String columnWidth = null;
        if (data.isRowAvailable() && columnHeaders.isRowAvailable())
        {
            columnWidth = ((ColumnHeader)columnHeaders.getRowData()).getWidth();
        }
        return columnWidth;
    }

 再動態地在<t:datatable>中生成列與行數據:

<t:columns id="columns" value="#{openDataList.columnHeaders}" 
                  var="columnHeader" style="width:#{openDataList.columnWidth}px">
    <f:facet name="header">
        <t:commandSortHeader columnName="#{columnHeader.label}" arrow="false" immediate="false">
            <f:facet name="ascending">
                <t:graphicImage value="images/ascending-arrow.gif" rendered="true" border="0"/>
            </f:facet>
            <f:facet name="descending">
                <t:graphicImage value="images/descending-arrow.gif" rendered="true" border="0"/>
            </f:facet>
            <h:outputText value="#{columnHeader.label}" />
        </t:commandSortHeader>
    </f:facet>
    <!-- row is also available -->
    <h:inputText rendered="#{openDataList.valueModifiable}" value="#{openDataList.columnValue}" />
    <h:outputText rendered="#{!openDataList.valueModifiable}" value="#{openDataList.columnValue}" />
</t:columns>

 十.<t:panelTabbedPane>的使用

<t:panelTabbedPane bgcolor="#FFFFCC" >
    <!-- 所有tab都有組件寫在panelTab組件的前面-->
    <f:verbatim><p></f:verbatim>
    <h:outputText value="#{example_messages['tabbed_common']}"/>
    <f:verbatim></p></f:verbatim>
    <t:panelTab id="tab1" label="#{example_messages['tabbed_tab1']}" 
                    rendered="#{tabbedPaneBean.tab1Visible}">
        <h:selectBooleanCheckbox id="testCheckBox" value="#{testCheckBox.checked}"/>
        <h:outputLabel for="testCheckBox" value="A checkbox"/>
        <f:verbatim><br/><br/></f:verbatim>
        <h:inputText id="inp1"/><f:verbatim><br></f:verbatim>
        <h:inputText id="inp2" required="true" />
        <h:message for="inp2" showSummary="false" showDetail="true" />
    </t:panelTab>
    <f:subview id="tab2" >
        <jsp:include page="tab2.jsp"/>
    </f:subview>
</t:panelTabbedPane>

十一.js日期彈出式組件<t:inputCalendar>

<t:inputCalendar monthYearRowClass="yearMonthHeader" weekRowClass="weekHeader"
                currentDayCellClass="currentDayCell" value="#{calendarBean.secondDate}" 
                renderAsPopup="true" popupTodayString="#{example_messages['popup_today_string']}" 
                popupWeekString="#{example_messages['popup_week_string']}"
                renderPopupButtonAsImage="true" />

 十二.jscookmenu的使用。

<t:jscookMenu layout="hbr" theme="ThemeOffice">
    <%/* Availaible jscookMenu themes: ThemeIE, ThemeMiniBlack, ThemeOffice, ThemePanel
             Availaible jscookMenu layout: hbr, hbl, hur, hul, vbr, vbl, vur, vul
             respect to Heng Yuan http://www.cs.ucla.edu/~heng/JSCookMenu
    */%>
    <t:navigationMenuItem id="nav_1"
            itemLabel="#{example_messages['nav_Home']}" action="go_home" />
    <t:navigationMenuItem id="nav_2"
            itemLabel="#{example_messages['nav_Examples']}">
            <t:navigationMenuItem id="nav_2_1"
                   itemLabel="#{example_messages['nav_Sample_1']}" action="go_sample1" />
    </t:navigationMenuItem>
 </t:jscookMenu>

 十三.<t:panelNavigation2>組件:

<t:panelNavigation2 id="nav1" layout="list" itemClass="mypage" 
                                 activeItemClass="selected" openItemClass="selected" >
  <t:commandNavigation2 value="#{example_messages['panelnav_products']}" action="" >
            <t:commandNavigation2 action="go_panelnavigation_1" >
                <f:verbatim>› </f:verbatim>
                <t:outputText value="#{example_messages['panelnav_serach1']}" />
            </t:commandNavigation2>
            <t:commandNavigation2 action="go_panelnavigation_1" >
                <f:verbatim>› </f:verbatim>
                <t:outputText value="#{example_messages['panelnav_serach_acc1']}" />
            </t:commandNavigation2>
            <t:commandNavigation2 action="go_panelnavigation_1" >
                <f:verbatim>› </f:verbatim>
                <t:outputText value="#{example_messages['panelnav_search_adv1']}" />
            </t:commandNavigation2>
        </t:commandNavigation2>
        <t:commandNavigation2 value="#{example_messages['panelnav_shop']}" action="" />

</t:panelNavigation2>

 也可以動態地生成navigationMenuItem:

<t:panelNavigation2 id="nav1" layout="list" itemClass="mypage" activeItemClass="selected" openItemClass="selected" >
        <t:navigationMenuItems value="#{navigationMenu.panelNavigationItems}" />
    </t:panelNavigation2>

panelNavigationItems方法:

public List getPanelNavigationItems() {
        List menu = new ArrayList();
        // Products
        NavigationMenuItem products = getMenuNaviagtionItem("#{example_messages['panelnav_products']}", null);
        menu.add(products);
        products.add(getMenuNaviagtionItem("#{example_messages['panelnav_serach']}", "#{navigationMenu.getAction2}"));
        products.add(getMenuNaviagtionItem("#{example_messages['panelnav_serach_acc']}", "#{navigationMenu.getAction2}"));
        NavigationMenuItem item = getMenuNaviagtionItem("#{example_messages['panelnav_search_adv']}", "#{navigationMenu.getAction2}");
        item.setActive(true);
        item.setOpen(true);
        item.setTarget("_blank");
        products.add(item);
        // Shop
        menu.add(getMenuNaviagtionItem("#{example_messages['panelnav_shop']}", "#{navigationMenu.getAction2}"));
        // Corporate Info
        NavigationMenuItem corporateInfo = getMenuNaviagtionItem("#{example_messages['panelnav_corporate']}", null);
        menu.add(corporateInfo);
        corporateInfo.add(getMenuNaviagtionItem("#{example_messages['panelnav_news']}", "#{navigationMenu.getAction2}"));
        item = getMenuNaviagtionItem("#{example_messages['panelnav_investor']}", "#{navigationMenu.getAction3}");
        //item.setIcon("images/arrow-first.gif");
        item.setDisabled(true);
        corporateInfo.add(item);
        // Contact
        menu.add(getMenuNaviagtionItem("#{example_messages['panelnav_contact']}", "#{navigationMenu.getAction2}"));
        // External Link
        item = getMenuNaviagtionItem("#{example_messages['panelnav_contact']}", null);
        item.setExternalLink("#{example_messages['external_link']}");
        item.setTarget("_blank");
        menu.add(item);
        return menu;
    }