`
wylloveying
  • 浏览: 16482 次
  • 性别: Icon_minigender_1
  • 来自: 大连
最近访客 更多访客>>
社区版块
存档分类
最新评论

tomahawk JSF组件扩展组件(三)

JSFF#CC++C# 
阅读更多

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

    <t:tree id="tree" value="#{treeModel}"
        styleClass="tree"
        nodeClass="treenode"
        selectedNodeClass="treenodeSelected"
        expandRoot="true">
    </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>
分享到：
| tomahawk JSF组件扩展组件(二)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics