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;
    }