how to customize celltree.

[norberthu]

1:how to adjust the pic (cellTreeClosedItem.gif,cellTreeOpenItem.gif)
at vertical center.

the pic has following html fragment,and there is no style to adjust.
the classname "GJKF13HCNF" is ".cellTreeItem". If I add "top: 9px" in
"cellTreeItem", it takes no effect.If I add "top:9px;" in div
style,for example [<div style="position: absolute; left: 0px;top:9px;
width: 15px; height: 15px;"]， that's ok.

<div style="position: absolute; left: 0px; width: 15px; height:
15px;" class="GJKF13HCNF"><img border="0" style="width: 15px; height:
15px; background: url(&quot;data:image/
gif;base64,R0lGODlhDwAPAIQaAFhorldnrquz1mFxsvz9/vr6/
M3Q2ZGbw5mixvb3+Gp5t2Nys77F4GRzs9ze4mt6uGV1s8/R2VZnrl5usFdortPV2/
P09+3u8eXm6lZnrf///wAAzP///////////////
yH5BAEAAB8ALAAAAAAPAA8AAAVC4CeOZGmeaEoqWds+58IUWk0IgwlY/
MUnEhPlQixegiUKZsNkYjJCjPQifZoCjmkVWpogIpWw4TA5QVythmrNbo9CADs=&quot;)
no-repeat scroll 0px 0px transparent;" src="http://127.0.0.1:8888/
treedemo/clear.cache.gif"
onload="this.__gwtLastUnhandledEvent=&quot;load&quot;;"></div>





2:how to make celltree show horizontal scroll ?


<ui:style>
.scrolltree {
width: 200px;
height: 500px;
border: 1px solid #ccc;
}
</ui:style>

<g:HTMLPanel>
<table>

<tr>
<td colspan="2">
<g:ScrollPanel addStyleNames='{style.scrolltree}'>
<c:CellTree ui:field='cellTree'/>
</g:ScrollPanel>
</td>

corresponding html fragment is following, and I Hope remove all
"overflow: hidden;" and how to remove ?



<div>
<div>
<div>
<div style="padding-left: 0px;" class="GEGGSC0BKD GEGGSC0BCE">
<div onclick="" style="position: relative; padding-left: 16px;"
class="GEGGSC0BKD GEGGSC0BMD GEGGSC0BEE">
<div class="GEGGSC0BLD GEGGSC0BDE"
style="position: absolute; left: 0px; width: 15px; height:
15px;">
<img onload='this.__gwtLastUnhandledEvent="load";'
src="http://gwt.google.com/samples/Showcase/showcase/
clear.cache.gif"
style="width: 15px; height: 15px; background: url() no-repeat
scroll 0px 0px transparent;"
border="0">
</div>
<div tabindex="0" class="GEGGSC0BND GEGGSC0BPD">
<img onload='this.__gwtLastUnhandledEvent="load";'
src="http://gwt.google.com/samples/Showcase/showcase/
clear.cache.gif"
style="width: 15px; height: 11px; background: url() no-repeat
scroll 0px 0px transparent;"
border="0"> Family
</div>
</div>
</div>
<div id="animFrame" style="position: relative; overflow: hidden;">
<div style="">
<div>
<div>
<div style="padding-left: 16px;" class="GEGGSC0BKD">
<div onclick="" style="position: relative; padding-left:
16px;"
class="GEGGSC0BKD GEGGSC0BMD">
<div class="GEGGSC0BLD"
style="position: absolute; left: 0px; width: 15px; height:
15px;">
<img onload='this.__gwtLastUnhandledEvent="load";'
src="http://gwt.google.com/samples/Showcase/showcase/
clear.cache.gif"
style="width: 15px; height: 15px; background: url() no-
repeat scroll 0px 0px transparent;"
border="0">
</div>
<div class="GEGGSC0BND GEGGSC0BPD">F (1)</div>
</div>
</div>
<div id="animFrame" style="position: relative; overflow:
hidden;">
<div style="">
<div>
<div>
<div style="padding-left: 32px;" class="GEGGSC0BKD">
<div onclick="" style="position: relative; padding-left:
16px;"
class="GEGGSC0BKD GEGGSC0BMD">
<div style="position: absolute; display: none;"></div>
<div class="GEGGSC0BND">
<table>
<tbody>
<tr>
<td>
<input tabindex="-1" type="checkbox">
</td>
<td>
<table>
<tbody>
<tr>
<td rowspan="3">
<img
onload='this.__gwtLastUnhandledEvent="load";'
src="http://gwt.google.com/samples/Showcase/
showcase/clear.cache.gif"
style="width: 32px; height: 32px; background:
url() no-repeat scroll 0px 0px transparent;"
border="0">
</td>
<td style="font-size: 95%;">Floyd Ramos</td>
</tr>
<tr>
<td>154 Courtland Ln</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div style="display: none;" class="GEGGSC0BJD">no data</div>
<a style="display: none;" class="GEGGSC0BBE"
href="javascript:;">Show more
</a>
</div>
</div>
</div>


</div>
<div style="display: none;" class="GEGGSC0BJD">no data</div>
<a style="display: none;" class="GEGGSC0BBE"
href="javascript:;">Show more</a>
</div>
</div>
</div>
<div>
<div style="padding-left: 0px;" class="GEGGSC0BKD GEGGSC0BCE">
<div onclick="" style="position: relative; padding-left: 16px;"
class="GEGGSC0BKD GEGGSC0BMD GEGGSC0BEE">
<div class="GEGGSC0BLD GEGGSC0BDE"
style="position: absolute; left: 0px; width: 15px; height:
15px;">
<img onload='this.__gwtLastUnhandledEvent="load";'
src="http://gwt.google.com/samples/Showcase/showcase/
clear.cache.gif"
style="width: 15px; height: 15px; background: url(2011-01-07)
no-repeat scroll 0px 0px transparent;"
border="0">
</div>
<div class="GEGGSC0BND">
<img onload='this.__gwtLastUnhandledEvent="load";'
src="http://gwt.google.com/samples/Showcase/showcase/
clear.cache.gif"
style="width: 15px; height: 11px; background:
url(&quot;data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAALCAYAAACgR9dcAAABi0lEQVR42mNgwAJYWVmNWFhYrgPxfyD
+DsQ1DLgANze3BBsbWzhQUxwI8/Ly3uTj4/sPw0D
+fyEhIVmsmgUEBOwEBQUjoThCXFz8JRD/R8b8/
Px7gRYsAOK5HBwcjnDN0tLSzlJSUpEgDGSnKygo/AXi/
8hYUlLyBNDgmSAMtAzkDWaQXiYVFRV/
JSWlSCiO0tDQeKqpqfkfCf9TVFTcKCMjMxOE5eTkukRFRXnANuvo6Cjr6elFwrCBgUGVsbHxfxg2NDS8pK6uPkNNTW0mCAPZTUDXcMBczmhmZuYDxJHm5uYRlpaW0jY2Ng
+A+D8IA/n2RkZG/SYmJjOB9Ax9fX1tlEBzdnb2cHJyigTiUFdXVzcg/gHE/
6G40c7OLhto0Awg3QDX5OLiwu/r62vv7e0dAcSZfn5+B4D4v7+/PxyD+ED82cfH56inp
+c0IA4JDQ3lZAgJCYkOCwuLBOLy8PDw/
yAcERGBFUPlXwH1zAoODp7MkJCQEBEfHx8JxM2JiYn/
icCfgGqngzAAUEisgBk1FpoAAAAASUVORK5CYII=&quot;) no-repeat scroll 0px
0px transparent;"
border="0"> Friends
</div>
</div>
</div>
<div id="animFrame" style="position: relative; overflow: hidden;
display: none;">
<div style="">
<div></div>
<div style="display: none;" class="GEGGSC0BJD">no data</div>
<a style="display: none;" class="GEGGSC0BBE"
href="javascript:;">Show more</a>
</div>
</div>
</div>


</div>
<div style="display: none;" class="GEGGSC0BJD">no data</div>
<a style="display: none;" class="GEGGSC0BBE" href="javascript:;">Sskw
more</a>
</div>




any comment is appreciated , thanks

[norberthu]

maybe this is a workaround about question 1 :

original , the pic is "width: 15px; height:15px", now I change it as
""width: 15px; height:24px", and make the pic 9px height from top is
transparent.tomorrow I will verify it.

[norberthu]

I verify that it doesnt take effect.

> ...
>
> 阅读更多 »

[Tej Sarup]

Hey there,

I have been looking out for a solution to the similar problem. From what i haver understood is that if you use something like the 'CellTree.BasicResources' class at the time of instantiating the tree that links up to CSS/Images provided in the GWT jars. So we have to find a way to override those setting by providing some implementation class of our own!

Would appreciate if some one could provide insight on how to adjust image used/ the padding on the nodes/ change the blue background if a node is selected? I have not been able to grasp the whole ResourceBundle/Resources concept of GWT yet (sorry about that!). It would be great if some one could provide steps to make the changes to the cell tree display!

To sum it up would like to know:

1. Change the image for the closed item in tree

2. The cell padding on the left/top/bottom of the nodes of the tree, otherwise tends to be a bit big 

3. Change the background color of selected nodes (the blue and the yellow!)

4. If we have to implement an interface of our own similar to CellTree.BasicResources where do we have to put our new CSS/Image files?

Thanks!

Tej

[icemaker]

Hello,

The cell tree get all it resources (images and css) from
CellTree.BasicResources which extends CellTree.Resources.

To use your own images and css you have to extend CellTree.Resources.

Ex:

interface TreeResources extends CellTree.Resources {
@Source("cellTreeClosedItem.gif")
ImageResource cellTreeClosedItem();

@Source("cellTreeOpenItem.gif")
ImageResource cellTreeOpenItem();

@Source("MyCellTree.css")
CellTree.Style cellTreeStyle();
}

This tells that the cellTreeCloseItem image will be
'cellTreeClosedItem.gif' which is in the same package as your custom
interface TreeResources. You can put the image in another package if
you want. You just have to prefix the image name with the the package
path.

It also tells that the cellTreeOpenItem image will be
'cellTreeOpenItem.gif' and that the css to use for the tree style will
be "MyCellTree.css".

To create MyCellTree.css, just copy the content from CellTree.css
which is in the package com\google\gwt\user\cellview\client (from gwt-
user.jar or
http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/user/cellview/client/CellTree.css)
and customize it.

Then to tell your tree to use your customized resource you just do :

CellTree.Resources resource = GWT.create(TreeResources.class);
CellTree cellTree = new CellTree(new MyTreeModel(),null, resource);


I know it is a bit weird and badly documented from Google :/
I've spent hours to find how to do this.