4 Replies Latest reply on Oct 9, 2009 8:57 AM by Nick Belaevski

    rich:tree and draggableoptions

    gonzalad Apprentice

      Hello,

      I'm using RF 3.3.0.GA.

      I'm trying to strim down the HTML size for my rich:tree and rich:treeNode.

      I'm looking at the HTML generated code and there are 2 possibilities :
      * rich:draggableoptions attribute has always a value (even if I don't need d&d support).
      * id - always a very long id (tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dN:icon)
      * very long image paths (is there a way to have an alias ?)

      Is there a way to strim down those 2 values ?

      Thanks very much !!

      Here's the generated code :

      <td
       class="dr-tree-h-ic rich-tree-node-icon dr-tree-h-ic-line-exp"
       id="tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dN:icon"
       rich:draggableoptions="{'parameters':{'tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dN':'tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dN','dragSourceId':'tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dN'} }"
       rich:dropzoneoptions="{}">
       <img alt=""
       class="dr-tree-h-ic-img-md dr-tree-h-ic-img"
       src="/gedig/img/folder_close.gif" />
      </td>
      




        • 1. Re: rich:tree and draggableoptions
          Ilya Shaikovsky Master

          please try 3.3.2 GA. there were many optimization tasks done for the release.

          • 2. Re: rich:tree and draggableoptions
            gonzalad Apprentice

            Thanks, downloaded and installed 3.3.2.GA, but I have a problem integrating it with my seam app (message conversation interrupted when I open my tree node).

            I'll have to revert to 3.3.0.GA for the moment, and make some more time to upgrade - I'll then update this thread.

            • 3. Re: rich:tree and draggableoptions
              gonzalad Apprentice

              Ok, I've installed 3.3.2.GA.

              Same behaviour.

              With 3.3.2.GA I have 2.97 ko per node.
              With 3.3.0.GA I have 3.11 ko per node.

              Do you have an idea how can I downstream the HTML size ?

              Thanks !


              3.3.2.GA :

              <table border="0" cellpadding="0" cellspacing="0"
               class="rich-tree-node"
               id="tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dN">
               <tbody>
               <tr
               id="tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dN:mainRow"
               onclick="">
               <td
               class="rich-tree-node-handleicon rich-tree-h-ic-line-node"
               id="tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dN:handles"
               style="background-image:expression(this.parentNode.parentNode.parentNode.nextSibling.nextSibling ? 'url(/gedig/a4j/g/3_3_2.GAorg.richfaces.renderkit.html.images.TreeLineNodeImage/DATB/eAH7!!!!1Tv3GRgYACS3BY4_)' : 'url(/gedig/a4j/g/3_3_2.GAorg.richfaces.renderkit.html.images.TreeLineLastImage/DATB/eAH7!!!!1Tv3GRgYACS3BY4_)')">
               <div>
               <a class="rich-tree-node-handle"
               href="#"
               id="tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dN:handle"
               onclick="var c = Tree.Item.findComponent(this); if (!c) return; c.fireCollapsionEvent();;A4J.AJAX.Submit('tF',event,{'eventsQueue':'search','similarityGroupingId':'tF:dT:{F0F8A00C\x2D85AC\x2D4077\x2DBC0B\x2DD51D289E1E9D}::dN','parameters':{'tF:dT:{F0F8A00C\x2D85AC\x2D4077\x2DBC0B\x2DD51D289E1E9D}::dNNodeExpanded':'false','tF:dT:{F0F8A00C\x2D85AC\x2D4077\x2DBC0B\x2DD51D289E1E9D}::dNAjaxExpanded':true} ,'status':'ajaxStatusMP'} ); return false;">
               <img alt=""
               class="rich-tree-node-handleicon-collapsed"
               id="tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dN:handle:img:collapsed"
               src="/gedig/a4j/g/3_3_2.GAorg.richfaces.renderkit.html.images.TreePlusImage/DATB/eAH7!!!!1Tv3GRgYACS3BY4_"
               style="display: none;;border:0" />
               <img alt=""
               class="rich-tree-node-handleicon-expanded"
               id="tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dN:handle:img:expanded"
               src="/gedig/a4j/g/3_3_2.GAorg.richfaces.renderkit.html.images.TreeMinusImage/DATB/eAH7!!!!1Tv3GRgYACS3BY4_"
               style=";border:0" />
               </a>
               </div>
               </td>
               <td
               class="rich-tree-node-icon rich-tree-h-ic-line-exp"
               id="tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dN:icon"
               rich:draggableoptions="{'parameters':{'tF:dT:{F0F8A00C\x2D85AC\x2D4077\x2DBC0B\x2DD51D289E1E9D}::dN':'tF:dT:{F0F8A00C\x2D85AC\x2D4077\x2DBC0B\x2DD51D289E1E9D}::dN','dragSourceId':'tF:dT:{F0F8A00C\x2D85AC\x2D4077\x2DBC0B\x2DD51D289E1E9D}::dN'} }"
               rich:dropzoneoptions="{}">
               <img alt="" class="rich-tree-h-ic-img"
               src="/gedig/img/folder_close.gif" />
               </td>
               <td class="rich-tree-node-text"
               id="tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dN:text"
               rich:highlightedclass="rich-tree-node-highlighted"
               rich:selectedclass="rich-tree-node-selected tree-selected">
               <span
               id="tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dNL"
               style="cursor:hand;">
               7-Transversal IG
               </span>
               </td>
               </tr>
               </tbody>
              </table>
              


              3.3.0.GA :
              <table border="0" cellpadding="0" cellspacing="0"
               class="dr-tree-full-width rich-tree-node"
               id="tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dN">
               <tbody>
               <tr
               id="tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dN:mainRow"
               onclick="">
               <td
               class="dr-tree-h-ic rich-tree-node-handleicon dr-tree-h-ic-line-node"
               id="tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dN:handles"
               style="background-image:expression(this.parentNode.parentNode.parentNode.nextSibling.nextSibling ? 'url(/gedig/a4j/g/3_3_0.GAorg.richfaces.renderkit.html.images.TreeLineNodeImage/DATB/eAH7!!!!1Tv3GRgYACS3BY4_)' : 'url(/gedig/a4j/g/3_3_0.GAorg.richfaces.renderkit.html.images.TreeLineLastImage/DATB/eAH7!!!!1Tv3GRgYACS3BY4_)')">
               <div>
               <a href="#"
               id="tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dN:handle"
               onclick="Tree.Item.fireCollapsionEvent(this);;A4J.AJAX.Submit('_viewRoot','tF',event,{'actionUrl':'/gedig/views/document/explorer.action','eventsQueue':'search','similarityGroupingId':'tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dN','parameters':{'tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dNNodeExpanded':'false','tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dNAjaxExpanded':true} ,'status':'ajaxStatusMP'} ); return false;">
               <img alt=""
               class="dr-tree-pointer-cursor dr-tree-h-ic-img-md dr-tree-h-ic-img rich-tree-node-handleicon-collapsed"
               id="tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dN:handle:img:collapsed"
               src="/gedig/a4j/g/3_3_0.GAorg.richfaces.renderkit.html.images.TreePlusImage/DATB/eAH7!!!!1Tv3GRgYACS3BY4_"
               style="display: none;;border:0" />
               <img alt=""
               class="dr-tree-pointer-cursor dr-tree-h-ic-img-md dr-tree-h-ic-img rich-tree-node-handleicon-expanded"
               id="tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dN:handle:img:expanded"
               src="/gedig/a4j/g/3_3_0.GAorg.richfaces.renderkit.html.images.TreeMinusImage/DATB/eAH7!!!!1Tv3GRgYACS3BY4_"
               style=";border:0" />
               </a>
               </div>
               </td>
               <td
               class="dr-tree-h-ic rich-tree-node-icon dr-tree-h-ic-line-exp"
               id="tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dN:icon"
               rich:draggableoptions="{'parameters':{'tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dN':'tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dN','dragSourceId':'tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dN'} }"
               rich:dropzoneoptions="{}">
               <img alt=""
               class="dr-tree-h-ic-img-md dr-tree-h-ic-img"
               src="/gedig/img/folder_close.gif" />
               </td>
               <td class="dr-tree-h-text rich-tree-node-text"
               id="tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dN:text"
               rich:highlightedclass="dr-tree-i-hl rich-tree-node-highlighted"
               rich:selectedclass="dr-tree-i-sel rich-tree-node-selected tree-selected">
               <span
               id="tF:dT:{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}::dNL"
               style="cursor:hand;">
               7-Transversal IG
               </span>
               </td>
               </tr>
               </tbody>
              </table>
              


              • 4. Re: rich:tree and draggableoptions
                Nick Belaevski Master

                Hi,

                You can make it smaller by:

                - using shorter row keys: "{F0F8A00C-85AC-4077-BC0B-D51D289E1E9D}" is a pretty long string
                - using your own icons with shorter paths