tomahawk JSF组件扩展组件(三)

<t:jsValueChangeListener>组件：

< h:panelGrid columns = " 2 " >
         < h:outputLabel  for = " text1 "  value = " Text: " />
         < h:inputText id = " text1 " >
             < t:jsValueChangeListener  for = " text2 "  property = " value "  expressionValue = " ($srcElem.value=='yes')?'true':'false' "   />
             < t:jsValueChangeListener  for = " text3 "  property = " value "  expressionValue = " $srcElem.value "   />
             < t:jsValueChangeListener  for = " text4 "  expressionValue = " $destElem.innerHTML = $srcElem.value "   />
             < t:jsValueChangeListener  for = " text5 "  expressionValue = " ($srcElem.value=='hide')?$destElem.style.display='none':$destElem.style.display='inline' "   />
             < t:jsValueSet name = " countryMap "  value = " #{countryList.countryMap} " />
             < t:jsValueChangeListener  for = " text6 "  expressionValue = " $destElem.innerHTML = countryMap[$srcElem.value] "   />
         </ h:inputText >
         < h:inputText id = " text2 " />
         < h:inputText id = " text3 " />
         < h:panelGroup id = " text4 "   />
         < h:panelGroup id = " text5 "   >
             < h:outputText value = " Hide me - enter hide in first input-field. " />
         </ h:panelGroup >
         < h:panelGroup id = " text6 "   >
             < h:outputText value = " Countryname - enter ISO Code in first input-field (e.g. AT) " />
         </ h:panelGroup >
         < h:panelGroup />
         < h:selectOneMenu id = " selone_menu_colors "  value = " red "  styleClass = " selectOneMenu " >
             < f:selectItem itemValue = ""  itemLabel = " #{example_messages['empty_selitem']} "   />
             < f:selectItems value = " #{carconf.colors} "   />
             < t:jsValueChangeListener  for = " selone_menu_subcolors "  expressionValue = " ($srcElem.options[$srcElem.selectedIndex].value=='color_black')?$destElem.style.display='inline':$destElem.style.display='none'; " />
         </ h:selectOneMenu >
         < h:inputText id = " selone_menu_subcolors " />
</ h:panelGrid >

  <t:inputDate>组件的使用：
<t:inputDate id="date3" value="#{date3}" type="both"/>
type属性可以是time或both等...
<t:dataList>组件：

< t:dataList id = " data3 "
        styleClass = " standardList "
        var = " country "
        value = " #{countryList.countries} "
        layout = " orderedList " >
         < h:inputText value = " #{country.name} "   />
</ t:dataList >

<t:tree>组件：

<%
    if  (pageContext.getAttribute( " treeModel " , PageContext.SESSION_SCOPE)  ==   null )  ... {
      DefaultMutableTreeNode root = new DefaultMutableTreeNode("XY");
      DefaultMutableTreeNode a = new DefaultMutableTreeNode("A");
      root.insert(a);
      DefaultMutableTreeNode b = new DefaultMutableTreeNode("B");
      root.insert(b);
      DefaultMutableTreeNode c = new DefaultMutableTreeNode("C");
      root.insert(c);

      DefaultMutableTreeNode node = new DefaultMutableTreeNode("a1");
      a.insert(node);
      node = new DefaultMutableTreeNode("a2 ");
      a.insert(node);
      node = new DefaultMutableTreeNode("b ");
      b.insert(node);

      a = node;
      node = new DefaultMutableTreeNode("x1");
      a.insert(node);
      node = new DefaultMutableTreeNode("x2");
      a.insert(node);

      pageContext.setAttribute("treeModel", new DefaultTreeModel(root), PageContext.SESSION_SCOPE);
   }
%>

< f:view >

& nbsp; & nbsp; & nbsp;  < t:tree id = " tree "  value = " #{treeModel} "
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; styleClass = " tree "
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; nodeClass = " treenode "
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; selectedNodeClass = " treenodeSelected "
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; expandRoot = " true " >
& nbsp; & nbsp; & nbsp;  </ t:tree >

</ f:view >

treeTable：

< t:tree id = " tree "  value = " #{treeTable.treeModel} "
                    var = " treeItem "
                    styleClass = " tree "
                nodeClass = " treenode "
                headerClass = " treeHeader "
                footerClass = " treeFooter "
            rowClasses = " a, b "
            columnClasses = " col1, col2 "
                selectedNodeClass = " treenodeSelected "
                expandRoot = " true " >
             < h:column >
                     < f:facet name = " header " >
                     < h:outputText value = " Header 1 "   />
             </ f:facet >
             < h:outputText value = " #{treeItem.isoCode} "   />
         </ h:column >
             < t:treeColumn >
                     < f:facet name = " header " >
                     < h:outputText value = " Header 2 "   />
             </ f:facet >
                     < h:outputText value = " #{treeItem.name} "   />
             </ t:treeColumn >
             < h:column >
                     < f:facet name = " header " >
                     < h:outputText value = " Header 3 "   />
             </ f:facet >
                     < h:outputText value = " #{treeItem.description} "   />
         </ h:column >
         < f:facet name = " footer " >
             < h:outputText value = " Footer "   />
         </ f:facet >
</ t:tree >

treeTable.java:

public  TreeTable()
     ... {
        DefaultMutableTreeNode root = new DefaultMutableTreeNode(new TreeItem(1, "XY", "9001", "XY 9001"));
        DefaultMutableTreeNode a = new DefaultMutableTreeNode(new TreeItem(2, "A", "9001", "A 9001"));
        root.insert(a);
        DefaultMutableTreeNode b = new DefaultMutableTreeNode(new TreeItem(3, "B", "9001", "B 9001"));
        root.insert(b);
        DefaultMutableTreeNode c = new DefaultMutableTreeNode(new TreeItem(4, "C", "9001", "C 9001"));
        root.insert(c);
        DefaultMutableTreeNode node = new DefaultMutableTreeNode(new TreeItem(5, "a1", "9002", "a1 9002"));
        a.insert(node);
        node = new DefaultMutableTreeNode(new TreeItem(6, "a2", "9002", "a2 9002"));
        a.insert(node);
        node = new DefaultMutableTreeNode(new TreeItem(7, "a3", "9002", "a3 9002"));
        a.insert(node);
        node = new DefaultMutableTreeNode(new TreeItem(8, "b", "9002", "b 9002"));
        b.insert(node);
        a = node;
        node = new DefaultMutableTreeNode(new TreeItem(9, "x1", "9003", "x1 9003"));
        a.insert(node);
        node = new DefaultMutableTreeNode(new TreeItem(9, "x2", "9003", "x2 9003"));
        a.insert(node);
        this.treeModel = new DefaultTreeModel(root);
    }
     /** */ /**
     * @return Returns the treeModel.
     */
     public  DefaultTreeModel getTreeModel()
     ... {
        return treeModel;
    }

<t:tree2>组件：

<!--  clientSideToggle = " false " 指是否一次过从服务器下载结点信息.showRootNode = " false " 指是否显示根结点  -->
< t:tree2 id = " serverTree "  value = " #{treeBacker.treeData} "  var = " node "  varNodeToggler = " t "  clientSideToggle = " false "  showRootNode = " false " >   
         < f:facet name = " person " >
             < h:panelGroup >
                 < t:graphicImage value = " /images/yellow-folder-open.png "  rendered = " #{t.nodeExpanded} "  border = " 0 " />
                 < t:graphicImage value = " /images/yellow-folder-closed.png "  rendered = " #{!t.nodeExpanded} "  border = " 0 " />
                 < h:outputText value = " #{node.description} "  styleClass = " nodeFolder " />
             </ h:panelGroup >
         </ f:facet >
         < f:facet name = " foo-folder " >
             < h:panelGroup >
                 < t:graphicImage value = " /images/yellow-folder-open.png "  rendered = " #{t.nodeExpanded} "  border = " 0 " />
                 < t:graphicImage value = " /images/yellow-folder-closed.png "  rendered = " #{!t.nodeExpanded} "  border = " 0 " />
                 < h:outputText value = " #{node.description} "  styleClass = " nodeFolder " />
                 < h:outputText value = "  (#{node.childCount}) "  styleClass = " childCount "  rendered = " #{!empty node.children} " />
             </ h:panelGroup >
         </ f:facet >
         < f:facet name = " bar-folder " >
             < h:panelGroup >
                 < t:graphicImage value = " /images/blue-folder-open.gif "  rendered = " #{t.nodeExpanded} "  border = " 0 " />
                 < t:graphicImage value = " /images/blue-folder-closed.png "  rendered = " #{!t.nodeExpanded} "  border = " 0 " />
                 < h:outputText value = " #{node.description} "  styleClass = " nodeFolder " />
                 < h:outputText value = "  (#{node.childCount}) "  styleClass = " childCount "  rendered = " #{!empty node.children} " />
             </ h:panelGroup >
         </ f:facet >
         < f:facet name = " document " >
             < h:panelGroup >
                 < h:commandLink immediate = " true "  styleClass = " #{t.nodeSelected ? 'documentSelected':'document'} "  actionListener = " #{t.setNodeSelected} " >
                     < t:graphicImage value = " /images/document.png "  border = " 0 " />
                     < h:outputText value = " #{node.description} " />
                     < f:param name = " docNum "  value = " #{node.identifier} " />
                 </ h:commandLink >
             </ h:panelGroup >
         </ f:facet >
     </ t:tree2 >

也可以使用<h:panelGrid>组件做为<f:fact>的子组件,并设置cellpadding和cellspacing属性,以取得好有布局.

< f:facet name = " foo-folder " >
                 < h:panelGrid id = " b "  columns = " 2 "  cellpadding = " 2 "  cellspacing = " 0 " >
                     < t:graphicImage value = " /images/yellow-folder-open.png "  rendered = " #{t.nodeExpanded} "  border = " 0 " />
                     < t:graphicImage value = " /images/yellow-folder-closed.png "  rendered = " #{!t.nodeExpanded} "  border = " 0 " />
                     < h:panelGroup >
                         < h:outputText value = " #{node.description} "  styleClass = " nodeFolder " />
                         < h:outputText value = "  (#{node.childCount}) "  styleClass = " childCount "  rendered = " #{!empty node.children} " />
                     </ h:panelGroup >
                 </ h:panelGrid >
</ f:facet >

treeData:

public  TreeNode getTreeData()
    {
        TreeNode treeData  =   new  TreeNodeBase( " foo-folder " ,  " Inbox " ,  false );
         //  construct a set of fake data (normally your data would come from a database)
         //  populate Frank's portion of the tree
        TreeNodeBase personNode  =   new  TreeNodeBase( " person " ,  " Frank Foo " ,  false );
        personNode.getChildren().add( new  TreeNodeBase( " foo-folder " ,  " Requires Foo " ,  false ));
        TreeNodeBase folderNode  =   new  TreeNodeBase( " foo-folder " ,  " Requires Foo Reviewer " ,  false );
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " X050001 " ,  true ));
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " X050002 " ,  true ));
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " X050003 " ,  true ));
        personNode.getChildren().add(folderNode);
        personNode.getChildren().add( new  TreeNodeBase( " foo-folder " ,  " Requires Foo Recommendation " ,  false ));
        folderNode  =   new  TreeNodeBase( " foo-folder " ,  " Requires Foo Approval " ,  false );
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " J050001 " ,  true ));
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " J050002 " ,  true ));
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " J050003 " ,  true ));
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " E050011 " ,  true ));
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " R050002 " ,  true ));
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " C050003 " ,  true ));
        personNode.getChildren().add(folderNode);
        folderNode  =   new  TreeNodeBase( " bar-folder " ,  " Requires Bar Processing " ,  false );
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " X050003 " ,  true ));
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " X050011 " ,  true ));
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " F050002 " ,  true ));
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " G050003 " ,  true ));
        personNode.getChildren().add(folderNode);
        folderNode  =   new  TreeNodeBase( " bar-folder " ,  " Requires Bar Approval " ,  false );
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " J050006 " ,  true ));
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " J050007 " ,  true ));
        personNode.getChildren().add(folderNode);
        treeData.getChildren().add(personNode);
         //  populate Betty's portion of the tree
        personNode  =   new  TreeNodeBase( " person " ,  " Betty Bar " ,  false );
        personNode.getChildren().add( new  TreeNodeBase( " foo-folder " ,  " Requires Foo " ,  false ));
        folderNode  =   new  TreeNodeBase( " foo-folder " ,  " Requires Foo Reviewer " ,  false );
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " X012000 " ,  true ));
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " X013000 " ,  true ));
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " X014000 " ,  true ));
        personNode.getChildren().add(folderNode);
        folderNode  =   new  TreeNodeBase( " foo-folder " ,  " Requires Foo Recommendation " ,  false );
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " J010026 " ,  true ));
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " J020002 " ,  true ));
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " J030103 " ,  true ));
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " E030214 " ,  true ));
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " R020444 " ,  true ));
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " C010000 " ,  true ));
        personNode.getChildren().add(folderNode);
        personNode.getChildren().add( new  TreeNodeBase( " foo-folder " ,  " Requires Foo Approval " ,  false ));
        folderNode  =   new  TreeNodeBase( " bar-folder " ,  " Requires Bar Processing " ,  false );
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " T052003 " ,  true ));
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " T020011 " ,  true ));
        personNode.getChildren().add(folderNode);
        folderNode  =   new  TreeNodeBase( " bar-folder " ,  " Requires Bar Approval " ,  false );
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " J010002 " ,  true ));
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " J030047 " ,  true ));
        folderNode.getChildren().add( new  TreeNodeBase( " document " ,  " F030112 " ,  true ));
        personNode.getChildren().add(folderNode);
        treeData.getChildren().add(personNode);
         return  treeData;
    }

<t:collapsiblePanel>组件：

< t:collapsiblePanel collapsed = " #{collapsiblePanelBean.collapsed} "  value = " testTitle " >
         < h:panelGrid >
             < h:outputText value = " Test " />
             < h:inputText value = " test2 " />
             < t:inputCalendar value = ""  renderAsPopup = " true " />
         </ h:panelGrid >
</ t:collapsiblePanel >