rich:tree and draggableoptions

[gonzalad]

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>

[ilya_shaikovsky]

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

[gonzalad]

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.

[gonzalad]

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>

[nbelaevski]

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