You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by Carsten Pieper <ca...@continentale.de> on 2008/01/29 14:44:57 UTC
[Trinidad] Fine tuning the node icon (--> improved tree skinning)
Hi,
I have been fiddling around with the improved tree skinning recently.
Looks fine (thanks to Cristi!), but I have a question concerning the
alignment of those "node-icons" (e.g. look here, if in doubt what these
might be:
http://www.nabble.com/Tree-skinning-problem-with-Trinidad-1.2.5-to15049337.html#a15154727
Tree-skinning-problem-with-Trinidad-1.2.5 )
with the "collapsed-" and "expanded-icons" (skinned by
selectors af|tree::collapsed-icon, af|tree::expanded-icon etc. ...).
I have a tree with nodes/folders and leaves, well, a tree...
What I get is something like this (sorry for the naming -this
is taken from a "grown" example...):
http://www.nabble.com/file/p15159675/whatIHave.jpg
As you can see, leaves aren't aligned with folders on the same level.
I would like to have them all aligned as shown here:
http://www.nabble.com/file/p15159675/whatIWant.jpg
Is there a way to achieve such an alignment via CSS definitions in
my skin? (Note that the "space" for the expanded-/collapsed-icons
is kept free (but occupying space) in a "leaf row", right now.)
Thanks in advance,
Carsten
PS I attach snippets of my sources (just if anyone wanted to have a look).
Please keep in mind that this it's a very sketchy test implementation
thing...
>From my CSS:
-------------
af|tree::node-icon:leaf {
content: url(/images/smallsquare.gif);
}
af|tree::collapsed-icon, af|treeTable::collapsed-icon {
content: url(/images/treeclosed.gif);
}
af|tree::expanded-icon, af|treeTable::expanded-icon {
content: url(/images/treeopened.gif);
}
My tree node class:
------------------
package de.continentale.vu.cp_subapp.jsf.trigger;
import java.util.ArrayList;
import java.util.List;
public class TriggerNavigationNode
{
private String text;
private String outcome;
private String nodeType;
private List<TriggerNavigationNode> nodes = null;
public TriggerNavigationNode(String node, String outcome)
{
this(node, outcome, "");
}
public TriggerNavigationNode(String node, String outcome, String nodeType)
{
this.text = node;
this.outcome = outcome;
this.nodeType = nodeType;
}
public String getText()
{
return text;
}
public void setText(String node)
{
this.text = node;
}
public List getNodes()
{
return nodes;
}
public void add(TriggerNavigationNode node)
{
if (nodes == null)
{
nodes = new ArrayList<TriggerNavigationNode>();
}
nodes.add(node);
}
public String doNavigation()
{
return outcome;
}
public void setOutcome(String outcome)
{
this.outcome = outcome;
}
public void setNodes(List<TriggerNavigationNode> nodes)
{
this.nodes = nodes;
}
/**
* @return nodeType
*/
public String getNodeType()
{
return nodeType;
}
}
Initializing the tree in another class:
----------------------------------
private List<TriggerNavigationNode> navList;
private static final String LEAF = "leaf";
public void initializeNavList()
{
// initialize the tree
navList = new ArrayList<TriggerNavigationNode>();
TriggerNavigationNode ohneButtons = new TriggerNavigationNode(
"A leaf with a long text to make it wrap", "ohneButtons", LEAF);
navList.add(ohneButtons);
TriggerNavigationNode mitButtonA = new TriggerNavigationNode(
"Leaf A", "mitButtonA", LEAF);
navList.add(mitButtonA);
TriggerNavigationNode mitButtonB = new TriggerNavigationNode(
"Leaf B", "mitButtonB", LEAF);
navList.add(mitButtonB);
TriggerNavigationNode mitButtonA2 = new TriggerNavigationNode(
"Folder A2", "mitButtonA");
navList.add(mitButtonA2);
TriggerNavigationNode mitButtonB2 = new TriggerNavigationNode(
"Leaf B2", "mitButtonB", LEAF);
mitButtonA2.add(mitButtonB2);
TriggerNavigationNode mitButtonB3 = new TriggerNavigationNode(
"Folder B3", "mitButtonB");
mitButtonA2.add(mitButtonB3);
TriggerNavigationNode mitButtonA4 = new TriggerNavigationNode(
"Leaf A4", "mitButtonA", LEAF);
mitButtonB3.add(mitButtonA4);
}
And yet elsewhere (just the way my test project grew):
-----------------------------------------------------
TreeModel treeModel = new ChildPropertyTreeModel(tree.getNavList(),
"nodes");
If you want/need to see more, just tell me...
--
View this message in context: http://www.nabble.com/-Trinidad--Fine-tuning-the-node-icon-%28--%3E-improved-tree-skinning%29-tp15159675p15159675.html
Sent from the MyFaces - Users mailing list archive at Nabble.com.
Re: [Trinidad] Fine tuning the node icon (--> improved tree skinning)
Posted by Cristi Toth <cr...@gmail.com>.
Hi Carsten,
hmm, I get your oroblem with the expand/collapse functionality
right now I can't see an immediate solution only by using CSS
only if I add a skin-selector like "af|tree::leaf-icon"...
I'll try and think about it more this evening...
regards,
On Jan 30, 2008 8:05 AM, Carsten Pieper <ca...@continentale.de>
wrote:
>
> Hi Cristi,
>
> thanks for the answer so far!
>
> > there are 2 types of icons, like in the windows explorer tree: ...
> Yes, yes, I understood that (probably I didn't seem to... ). Anyways,
> you made that pretty clear now for "first-readers" ;-)
>
> > and change the getNodeType() method like this:
> >
> > public String getNodeType()
> > {
> > if (nodes == null || nodes.isEmpty) return "node";
> > return "leaf";
> > }
> >
> > This way you won't need to define each nodes type at creation.
> Yes, indeed, that's far nicer than my approach!
>
> But... when I follow the rest of your advice then, yes, those folder/leaf
> icons are
> aligned but they don't get the functionality to collapse/expand the
> folders
> which
> "stays" in the first column where I then get the (default?) plus/minus
> icons
> (~/adf/images/nav-plus.gif ...). Of course I could get rid of those
> plus/minus icons
> by defining some very small, invisible icon here, but that would still not
> solve
> the problem to "move" the collapse/expand functionality to my nicely
> aligned
> folder/leaf icons...
>
> I hope I could make myself clear - and more so that there still is a
> solution to
> my problem ;-)
>
> Thanks, Carsten
>
>
> Cristi Toth wrote:
> >
> > ok, it seems that I need to do some help page on this, cause it's not
> > clear
> > enough
> >
> > there are 2 types of icons, like in the windows explorer tree:
> >
> > 1. the expanded/collapsed icons (+/- from windows, and the current
> > default)
> > "af|tree::expanded-icon", "af|tree::collapsed-icon"
> > these icons are rendered ONLY for nodes which have children
> > they are rendered on the first "active" column of that node (over the
> > vertical line that node is connected to)
> >
> > 2. the node icons - (folder and file icons from windows)
> > these are rendered for ANY node (including leafs and nodes)
> > and they are rendered in the column NEXT to the icon mentioned at point
> 1.
> > these icon selectors are composed using the nodeType value
> > "af|tree::node-icon:nodeType-expanded"
> > "af|tree::node-icon:nodeType-collapsed"
> > "af|tree::node-icon:nodeType"
> > the first two are used for nodes who have children
> > the last one is used for "leafs"
> >
> > SO, Carsten
> > I would suggest for your case not to use any of the selectors at point
> 1.
> > Instead use the selectors at point 2.
> > and change the getNodeType() method like this:
> >
> > public String getNodeType()
> > {
> > if (nodes == null || nodes.isEmpty) return "node";
> > return "leaf";
> > }
> >
> > This way you won't need to define each nodes type at creation.
> >
> > then use the following selectors:
> > "af|tree::node-icon:node-expanded"
> > "af|tree::node-icon:node-collapsed"
> > "af|tree::node-icon:leaf"
> >
> > This way you won't need any other CSS styling for the alignement.
> >
> > I hope this addresses your problem and solves it :)
> >
> > Regards,
> >
> > On Jan 29, 2008 2:44 PM, Carsten Pieper <ca...@continentale.de>
> > wrote:
> >
> >>
> >> Hi,
> >>
> >> I have been fiddling around with the improved tree skinning recently.
> >> Looks fine (thanks to Cristi!), but I have a question concerning the
> >> alignment of those "node-icons" (e.g. look here, if in doubt what these
> >> might be:
> >>
> >>
> http://www.nabble.com/Tree-skinning-problem-with-Trinidad-1.2.5-to15049337.html#a15154727
> >> Tree-skinning-problem-with-Trinidad-1.2.5 )
> >> with the "collapsed-" and "expanded-icons" (skinned by
> >> selectors af|tree::collapsed-icon, af|tree::expanded-icon etc. ...).
> >>
> >> I have a tree with nodes/folders and leaves, well, a tree...
> >>
> >> What I get is something like this (sorry for the naming -this
> >> is taken from a "grown" example...):
> >> http://www.nabble.com/file/p15159675/whatIHave.jpg
> >>
> >> As you can see, leaves aren't aligned with folders on the same level.
> >> I would like to have them all aligned as shown here:
> >> http://www.nabble.com/file/p15159675/whatIWant.jpg
> >>
> >> Is there a way to achieve such an alignment via CSS definitions in
> >> my skin? (Note that the "space" for the expanded-/collapsed-icons
> >> is kept free (but occupying space) in a "leaf row", right now.)
> >>
> >> Thanks in advance,
> >> Carsten
> >>
> >> PS I attach snippets of my sources (just if anyone wanted to have a
> >> look).
> >> ...
> >
> >
>
> --
> View this message in context:
> http://www.nabble.com/-Trinidad--Fine-tuning-the-node-icon-%28--%3E-improved-tree-skinning%29-tp15159675p15176672.html
> Sent from the MyFaces - Users mailing list archive at Nabble.com.
>
>
--
Cristi Toth
-------------
Codebeat
www.codebeat.ro
Re: [Trinidad] Fine tuning the node icon (--> improved tree
skinning)
Posted by Carsten Pieper <ca...@continentale.de>.
Hi Cristi,
thanks for the answer so far!
> there are 2 types of icons, like in the windows explorer tree: ...
Yes, yes, I understood that (probably I didn't seem to... ). Anyways,
you made that pretty clear now for "first-readers" ;-)
> and change the getNodeType() method like this:
>
> public String getNodeType()
> {
> if (nodes == null || nodes.isEmpty) return "node";
> return "leaf";
> }
>
> This way you won't need to define each nodes type at creation.
Yes, indeed, that's far nicer than my approach!
But... when I follow the rest of your advice then, yes, those folder/leaf
icons are
aligned but they don't get the functionality to collapse/expand the folders
which
"stays" in the first column where I then get the (default?) plus/minus icons
(~/adf/images/nav-plus.gif ...). Of course I could get rid of those
plus/minus icons
by defining some very small, invisible icon here, but that would still not
solve
the problem to "move" the collapse/expand functionality to my nicely aligned
folder/leaf icons...
I hope I could make myself clear - and more so that there still is a
solution to
my problem ;-)
Thanks, Carsten
Cristi Toth wrote:
>
> ok, it seems that I need to do some help page on this, cause it's not
> clear
> enough
>
> there are 2 types of icons, like in the windows explorer tree:
>
> 1. the expanded/collapsed icons (+/- from windows, and the current
> default)
> "af|tree::expanded-icon", "af|tree::collapsed-icon"
> these icons are rendered ONLY for nodes which have children
> they are rendered on the first "active" column of that node (over the
> vertical line that node is connected to)
>
> 2. the node icons - (folder and file icons from windows)
> these are rendered for ANY node (including leafs and nodes)
> and they are rendered in the column NEXT to the icon mentioned at point 1.
> these icon selectors are composed using the nodeType value
> "af|tree::node-icon:nodeType-expanded"
> "af|tree::node-icon:nodeType-collapsed"
> "af|tree::node-icon:nodeType"
> the first two are used for nodes who have children
> the last one is used for "leafs"
>
> SO, Carsten
> I would suggest for your case not to use any of the selectors at point 1.
> Instead use the selectors at point 2.
> and change the getNodeType() method like this:
>
> public String getNodeType()
> {
> if (nodes == null || nodes.isEmpty) return "node";
> return "leaf";
> }
>
> This way you won't need to define each nodes type at creation.
>
> then use the following selectors:
> "af|tree::node-icon:node-expanded"
> "af|tree::node-icon:node-collapsed"
> "af|tree::node-icon:leaf"
>
> This way you won't need any other CSS styling for the alignement.
>
> I hope this addresses your problem and solves it :)
>
> Regards,
>
> On Jan 29, 2008 2:44 PM, Carsten Pieper <ca...@continentale.de>
> wrote:
>
>>
>> Hi,
>>
>> I have been fiddling around with the improved tree skinning recently.
>> Looks fine (thanks to Cristi!), but I have a question concerning the
>> alignment of those "node-icons" (e.g. look here, if in doubt what these
>> might be:
>>
>> http://www.nabble.com/Tree-skinning-problem-with-Trinidad-1.2.5-to15049337.html#a15154727
>> Tree-skinning-problem-with-Trinidad-1.2.5 )
>> with the "collapsed-" and "expanded-icons" (skinned by
>> selectors af|tree::collapsed-icon, af|tree::expanded-icon etc. ...).
>>
>> I have a tree with nodes/folders and leaves, well, a tree...
>>
>> What I get is something like this (sorry for the naming -this
>> is taken from a "grown" example...):
>> http://www.nabble.com/file/p15159675/whatIHave.jpg
>>
>> As you can see, leaves aren't aligned with folders on the same level.
>> I would like to have them all aligned as shown here:
>> http://www.nabble.com/file/p15159675/whatIWant.jpg
>>
>> Is there a way to achieve such an alignment via CSS definitions in
>> my skin? (Note that the "space" for the expanded-/collapsed-icons
>> is kept free (but occupying space) in a "leaf row", right now.)
>>
>> Thanks in advance,
>> Carsten
>>
>> PS I attach snippets of my sources (just if anyone wanted to have a
>> look).
>> ...
>
>
--
View this message in context: http://www.nabble.com/-Trinidad--Fine-tuning-the-node-icon-%28--%3E-improved-tree-skinning%29-tp15159675p15176672.html
Sent from the MyFaces - Users mailing list archive at Nabble.com.
Re: [Trinidad] Fine tuning the node icon (--> improved tree skinning)
Posted by Cristi Toth <cr...@gmail.com>.
Hi Jeanne,
that part "nodeType" of these selectors :
"af|tree::node-icon:nodeType-expanded"
"af|tree::node-icon:nodeType-collapsed"
"af|tree::node-icon:nodeType"
was only an example, as it will be replaced dinamically for each node
with the value returned by getNodeType() method of the node
so it would probably be something like:
"af|tree::node-icon:folder-expanded"
"af|tree::node-icon:folder-collapsed"
"af|tree::node-icon:document"
Regards,
--
Cristi Toth
-------------
Codebeat
www.codebeat.roOn Jan 30, 2008 1:25 AM, Jeanne Waldman <
jeanne.waldman@oracle.com> wrote:
> fyi, the convention for selectors is not to use camel case, but instead
> use dashes. You'll see that none of our selectors have camel case except
> for the nodeType ones that you've added.
>
> Thanks!
> Jeanne
>
> Cristi Toth wrote:
> > ok, it seems that I need to do some help page on this, cause it's not
> > clear enough
> >
> > there are 2 types of icons, like in the windows explorer tree:
> >
> > 1. the expanded/collapsed icons (+/- from windows, and the current
> > default)
> > "af|tree::expanded-icon", "af|tree::collapsed-icon"
> > these icons are rendered ONLY for nodes which have children
> > they are rendered on the first "active" column of that node (over the
> > vertical line that node is connected to)
> >
> > 2. the node icons - (folder and file icons from windows)
> > these are rendered for ANY node (including leafs and nodes)
> > and they are rendered in the column NEXT to the icon mentioned at point
> 1.
> > these icon selectors are composed using the nodeType value
> > "af|tree::node-icon:nodeType-expanded"
> > "af|tree::node-icon:nodeType-collapsed"
> > "af|tree::node-icon:nodeType"
> > the first two are used for nodes who have children
> > the last one is used for "leafs"
> >
> > SO, Carsten
> > I would suggest for your case not to use any of the selectors at point
> 1.
> > Instead use the selectors at point 2.
> > and change the getNodeType() method like this:
> >
> > public String getNodeType()
> > {
> > if (nodes == null || nodes.isEmpty) return "node";
> > return "leaf";
> > }
> >
> > This way you won't need to define each nodes type at creation.
> >
> > then use the following selectors:
> > "af|tree::node-icon:node-expanded"
> > "af|tree::node-icon:node-collapsed"
> > "af|tree::node-icon:leaf"
> >
> > This way you won't need any other CSS styling for the alignement.
> >
> > I hope this addresses your problem and solves it :)
> >
> > Regards,
> >
> > On Jan 29, 2008 2:44 PM, Carsten Pieper
> > <carsten.pieper@continentale.de
> > <ma...@continentale.de>> wrote:
> >
> >
> > Hi,
> >
> > I have been fiddling around with the improved tree skinning
> recently.
> > Looks fine (thanks to Cristi!), but I have a question concerning the
> > alignment of those "node-icons" (e.g. look here, if in doubt what
> > these
> > might be:
> >
> http://www.nabble.com/Tree-skinning-problem-with-Trinidad-1.2.5-to15049337.html#a15154727
> > Tree-skinning-problem-with-Trinidad-1.2.5
> > <
> http://www.nabble.com/Tree-skinning-problem-with-Trinidad-1.2.5-to15049337.html#a15154727Tree-skinning-problem-with-Trinidad-1.2.5
> >
> > )
> > with the "collapsed-" and "expanded-icons" (skinned by
> > selectors af|tree::collapsed-icon, af|tree::expanded-icon etc. ...).
> >
> > I have a tree with nodes/folders and leaves, well, a tree...
> >
> > What I get is something like this (sorry for the naming -this
> > is taken from a "grown" example...):
> > http://www.nabble.com/file/p15159675/whatIHave.jpg
> >
> > As you can see, leaves aren't aligned with folders on the same
> level.
> > I would like to have them all aligned as shown here:
> > http://www.nabble.com/file/p15159675/whatIWant.jpg
> >
> > Is there a way to achieve such an alignment via CSS definitions in
> > my skin? (Note that the "space" for the expanded-/collapsed-icons
> > is kept free (but occupying space) in a "leaf row", right now.)
> >
> > Thanks in advance,
> > Carsten
> >
> > PS I attach snippets of my sources (just if anyone wanted to have
> > a look).
> > Please keep in mind that this it's a very sketchy test
> implementation
> > thing...
> >
> > From my CSS:
> > -------------
> > af|tree::node-icon:leaf {
> > content: url(/images/smallsquare.gif);
> > }
> >
> > af|tree::collapsed-icon, af|treeTable::collapsed-icon {
> > content: url(/images/treeclosed.gif);
> > }
> >
> > af|tree::expanded-icon, af|treeTable::expanded-icon {
> > content: url(/images/treeopened.gif);
> > }
> >
> > My tree node class:
> > ------------------
> > package de.continentale.vu.cp_subapp.jsf.trigger;
> >
> > import java.util.ArrayList;
> > import java.util.List;
> >
> > public class TriggerNavigationNode
> > {
> > private String text;
> > private String outcome;
> > private String nodeType;
> >
> > private List<TriggerNavigationNode> nodes = null;
> >
> > public TriggerNavigationNode(String node, String outcome)
> > {
> > this(node, outcome, "");
> > }
> >
> > public TriggerNavigationNode(String node, String outcome, String
> > nodeType)
> > {
> > this.text = node;
> > this.outcome = outcome;
> > this.nodeType = nodeType;
> > }
> >
> > public String getText()
> > {
> > return text;
> > }
> >
> > public void setText(String node)
> > {
> > this.text = node;
> > }
> >
> > public List getNodes()
> > {
> > return nodes;
> > }
> >
> > public void add(TriggerNavigationNode node)
> > {
> > if (nodes == null)
> > {
> > nodes = new ArrayList<TriggerNavigationNode>();
> > }
> > nodes.add(node);
> > }
> >
> > public String doNavigation()
> > {
> > return outcome;
> > }
> >
> > public void setOutcome(String outcome)
> > {
> > this.outcome = outcome;
> > }
> >
> > public void setNodes(List<TriggerNavigationNode> nodes)
> > {
> > this.nodes = nodes;
> > }
> >
> > /**
> > * @return nodeType
> > */
> > public String getNodeType()
> > {
> > return nodeType;
> > }
> > }
> >
> > Initializing the tree in another class:
> > ----------------------------------
> > private List<TriggerNavigationNode> navList;
> > private static final String LEAF = "leaf";
> >
> > public void initializeNavList()
> > {
> > // initialize the tree
> > navList = new ArrayList<TriggerNavigationNode>();
> > TriggerNavigationNode ohneButtons = new TriggerNavigationNode(
> > "A leaf with a long text to make it wrap", "ohneButtons",
> > LEAF);
> > navList.add(ohneButtons);
> > TriggerNavigationNode mitButtonA = new TriggerNavigationNode(
> > "Leaf A", "mitButtonA", LEAF);
> > navList.add(mitButtonA);
> > TriggerNavigationNode mitButtonB = new TriggerNavigationNode(
> > "Leaf B", "mitButtonB", LEAF);
> > navList.add(mitButtonB);
> > TriggerNavigationNode mitButtonA2 = new TriggerNavigationNode(
> > "Folder A2", "mitButtonA");
> > navList.add(mitButtonA2);
> > TriggerNavigationNode mitButtonB2 = new TriggerNavigationNode(
> > "Leaf B2", "mitButtonB", LEAF);
> > mitButtonA2.add(mitButtonB2);
> > TriggerNavigationNode mitButtonB3 = new TriggerNavigationNode(
> > "Folder B3", "mitButtonB");
> > mitButtonA2.add(mitButtonB3);
> > TriggerNavigationNode mitButtonA4 = new TriggerNavigationNode(
> > "Leaf A4", "mitButtonA", LEAF);
> > mitButtonB3.add(mitButtonA4);
> > }
> >
> > And yet elsewhere (just the way my test project grew):
> > -----------------------------------------------------
> > TreeModel treeModel = new ChildPropertyTreeModel(tree.getNavList(),
> > "nodes");
> >
> > If you want/need to see more, just tell me...
> >
> >
> >
> > --
> > View this message in context:
> >
> http://www.nabble.com/-Trinidad--Fine-tuning-the-node-icon-%28--%3E-improved-tree-skinning%29-tp15159675p15159675.html
> > Sent from the MyFaces - Users mailing list archive at Nabble.com
> > <http://Nabble.com>.
> >
> >
> >
> >
> > --
> > Cristi Toth
> >
> > -------------
> > Codebeat
> > www.codebeat.ro <http://www.codebeat.ro>
>
--
Cristi Toth
-------------
Codebeat
www.codebeat.ro
Re: [Trinidad] Fine tuning the node icon (--> improved tree skinning)
Posted by Jeanne Waldman <je...@oracle.com>.
fyi, the convention for selectors is not to use camel case, but instead
use dashes. You'll see that none of our selectors have camel case except
for the nodeType ones that you've added.
Thanks!
Jeanne
Cristi Toth wrote:
> ok, it seems that I need to do some help page on this, cause it's not
> clear enough
>
> there are 2 types of icons, like in the windows explorer tree:
>
> 1. the expanded/collapsed icons (+/- from windows, and the current
> default)
> "af|tree::expanded-icon", "af|tree::collapsed-icon"
> these icons are rendered ONLY for nodes which have children
> they are rendered on the first "active" column of that node (over the
> vertical line that node is connected to)
>
> 2. the node icons - (folder and file icons from windows)
> these are rendered for ANY node (including leafs and nodes)
> and they are rendered in the column NEXT to the icon mentioned at point 1.
> these icon selectors are composed using the nodeType value
> "af|tree::node-icon:nodeType-expanded"
> "af|tree::node-icon:nodeType-collapsed"
> "af|tree::node-icon:nodeType"
> the first two are used for nodes who have children
> the last one is used for "leafs"
>
> SO, Carsten
> I would suggest for your case not to use any of the selectors at point 1.
> Instead use the selectors at point 2.
> and change the getNodeType() method like this:
>
> public String getNodeType()
> {
> if (nodes == null || nodes.isEmpty) return "node";
> return "leaf";
> }
>
> This way you won't need to define each nodes type at creation.
>
> then use the following selectors:
> "af|tree::node-icon:node-expanded"
> "af|tree::node-icon:node-collapsed"
> "af|tree::node-icon:leaf"
>
> This way you won't need any other CSS styling for the alignement.
>
> I hope this addresses your problem and solves it :)
>
> Regards,
>
> On Jan 29, 2008 2:44 PM, Carsten Pieper
> <carsten.pieper@continentale.de
> <ma...@continentale.de>> wrote:
>
>
> Hi,
>
> I have been fiddling around with the improved tree skinning recently.
> Looks fine (thanks to Cristi!), but I have a question concerning the
> alignment of those "node-icons" (e.g. look here, if in doubt what
> these
> might be:
> http://www.nabble.com/Tree-skinning-problem-with-Trinidad-1.2.5-to15049337.html#a15154727
> Tree-skinning-problem-with-Trinidad-1.2.5
> <http://www.nabble.com/Tree-skinning-problem-with-Trinidad-1.2.5-to15049337.html#a15154727Tree-skinning-problem-with-Trinidad-1.2.5>
> )
> with the "collapsed-" and "expanded-icons" (skinned by
> selectors af|tree::collapsed-icon, af|tree::expanded-icon etc. ...).
>
> I have a tree with nodes/folders and leaves, well, a tree...
>
> What I get is something like this (sorry for the naming -this
> is taken from a "grown" example...):
> http://www.nabble.com/file/p15159675/whatIHave.jpg
>
> As you can see, leaves aren't aligned with folders on the same level.
> I would like to have them all aligned as shown here:
> http://www.nabble.com/file/p15159675/whatIWant.jpg
>
> Is there a way to achieve such an alignment via CSS definitions in
> my skin? (Note that the "space" for the expanded-/collapsed-icons
> is kept free (but occupying space) in a "leaf row", right now.)
>
> Thanks in advance,
> Carsten
>
> PS I attach snippets of my sources (just if anyone wanted to have
> a look).
> Please keep in mind that this it's a very sketchy test implementation
> thing...
>
> From my CSS:
> -------------
> af|tree::node-icon:leaf {
> content: url(/images/smallsquare.gif);
> }
>
> af|tree::collapsed-icon, af|treeTable::collapsed-icon {
> content: url(/images/treeclosed.gif);
> }
>
> af|tree::expanded-icon, af|treeTable::expanded-icon {
> content: url(/images/treeopened.gif);
> }
>
> My tree node class:
> ------------------
> package de.continentale.vu.cp_subapp.jsf.trigger;
>
> import java.util.ArrayList;
> import java.util.List;
>
> public class TriggerNavigationNode
> {
> private String text;
> private String outcome;
> private String nodeType;
>
> private List<TriggerNavigationNode> nodes = null;
>
> public TriggerNavigationNode(String node, String outcome)
> {
> this(node, outcome, "");
> }
>
> public TriggerNavigationNode(String node, String outcome, String
> nodeType)
> {
> this.text = node;
> this.outcome = outcome;
> this.nodeType = nodeType;
> }
>
> public String getText()
> {
> return text;
> }
>
> public void setText(String node)
> {
> this.text = node;
> }
>
> public List getNodes()
> {
> return nodes;
> }
>
> public void add(TriggerNavigationNode node)
> {
> if (nodes == null)
> {
> nodes = new ArrayList<TriggerNavigationNode>();
> }
> nodes.add(node);
> }
>
> public String doNavigation()
> {
> return outcome;
> }
>
> public void setOutcome(String outcome)
> {
> this.outcome = outcome;
> }
>
> public void setNodes(List<TriggerNavigationNode> nodes)
> {
> this.nodes = nodes;
> }
>
> /**
> * @return nodeType
> */
> public String getNodeType()
> {
> return nodeType;
> }
> }
>
> Initializing the tree in another class:
> ----------------------------------
> private List<TriggerNavigationNode> navList;
> private static final String LEAF = "leaf";
>
> public void initializeNavList()
> {
> // initialize the tree
> navList = new ArrayList<TriggerNavigationNode>();
> TriggerNavigationNode ohneButtons = new TriggerNavigationNode(
> "A leaf with a long text to make it wrap", "ohneButtons",
> LEAF);
> navList.add(ohneButtons);
> TriggerNavigationNode mitButtonA = new TriggerNavigationNode(
> "Leaf A", "mitButtonA", LEAF);
> navList.add(mitButtonA);
> TriggerNavigationNode mitButtonB = new TriggerNavigationNode(
> "Leaf B", "mitButtonB", LEAF);
> navList.add(mitButtonB);
> TriggerNavigationNode mitButtonA2 = new TriggerNavigationNode(
> "Folder A2", "mitButtonA");
> navList.add(mitButtonA2);
> TriggerNavigationNode mitButtonB2 = new TriggerNavigationNode(
> "Leaf B2", "mitButtonB", LEAF);
> mitButtonA2.add(mitButtonB2);
> TriggerNavigationNode mitButtonB3 = new TriggerNavigationNode(
> "Folder B3", "mitButtonB");
> mitButtonA2.add(mitButtonB3);
> TriggerNavigationNode mitButtonA4 = new TriggerNavigationNode(
> "Leaf A4", "mitButtonA", LEAF);
> mitButtonB3.add(mitButtonA4);
> }
>
> And yet elsewhere (just the way my test project grew):
> -----------------------------------------------------
> TreeModel treeModel = new ChildPropertyTreeModel(tree.getNavList(),
> "nodes");
>
> If you want/need to see more, just tell me...
>
>
>
> --
> View this message in context:
> http://www.nabble.com/-Trinidad--Fine-tuning-the-node-icon-%28--%3E-improved-tree-skinning%29-tp15159675p15159675.html
> Sent from the MyFaces - Users mailing list archive at Nabble.com
> <http://Nabble.com>.
>
>
>
>
> --
> Cristi Toth
>
> -------------
> Codebeat
> www.codebeat.ro <http://www.codebeat.ro>
Re: [Trinidad] Fine tuning the node icon (--> improved tree skinning)
Posted by Cristi Toth <cr...@gmail.com>.
ok, it seems that I need to do some help page on this, cause it's not clear
enough
there are 2 types of icons, like in the windows explorer tree:
1. the expanded/collapsed icons (+/- from windows, and the current default)
"af|tree::expanded-icon", "af|tree::collapsed-icon"
these icons are rendered ONLY for nodes which have children
they are rendered on the first "active" column of that node (over the
vertical line that node is connected to)
2. the node icons - (folder and file icons from windows)
these are rendered for ANY node (including leafs and nodes)
and they are rendered in the column NEXT to the icon mentioned at point 1.
these icon selectors are composed using the nodeType value
"af|tree::node-icon:nodeType-expanded"
"af|tree::node-icon:nodeType-collapsed"
"af|tree::node-icon:nodeType"
the first two are used for nodes who have children
the last one is used for "leafs"
SO, Carsten
I would suggest for your case not to use any of the selectors at point 1.
Instead use the selectors at point 2.
and change the getNodeType() method like this:
public String getNodeType()
{
if (nodes == null || nodes.isEmpty) return "node";
return "leaf";
}
This way you won't need to define each nodes type at creation.
then use the following selectors:
"af|tree::node-icon:node-expanded"
"af|tree::node-icon:node-collapsed"
"af|tree::node-icon:leaf"
This way you won't need any other CSS styling for the alignement.
I hope this addresses your problem and solves it :)
Regards,
On Jan 29, 2008 2:44 PM, Carsten Pieper <ca...@continentale.de>
wrote:
>
> Hi,
>
> I have been fiddling around with the improved tree skinning recently.
> Looks fine (thanks to Cristi!), but I have a question concerning the
> alignment of those "node-icons" (e.g. look here, if in doubt what these
> might be:
>
> http://www.nabble.com/Tree-skinning-problem-with-Trinidad-1.2.5-to15049337.html#a15154727
> Tree-skinning-problem-with-Trinidad-1.2.5 )
> with the "collapsed-" and "expanded-icons" (skinned by
> selectors af|tree::collapsed-icon, af|tree::expanded-icon etc. ...).
>
> I have a tree with nodes/folders and leaves, well, a tree...
>
> What I get is something like this (sorry for the naming -this
> is taken from a "grown" example...):
> http://www.nabble.com/file/p15159675/whatIHave.jpg
>
> As you can see, leaves aren't aligned with folders on the same level.
> I would like to have them all aligned as shown here:
> http://www.nabble.com/file/p15159675/whatIWant.jpg
>
> Is there a way to achieve such an alignment via CSS definitions in
> my skin? (Note that the "space" for the expanded-/collapsed-icons
> is kept free (but occupying space) in a "leaf row", right now.)
>
> Thanks in advance,
> Carsten
>
> PS I attach snippets of my sources (just if anyone wanted to have a look).
> Please keep in mind that this it's a very sketchy test implementation
> thing...
>
> From my CSS:
> -------------
> af|tree::node-icon:leaf {
> content: url(/images/smallsquare.gif);
> }
>
> af|tree::collapsed-icon, af|treeTable::collapsed-icon {
> content: url(/images/treeclosed.gif);
> }
>
> af|tree::expanded-icon, af|treeTable::expanded-icon {
> content: url(/images/treeopened.gif);
> }
>
> My tree node class:
> ------------------
> package de.continentale.vu.cp_subapp.jsf.trigger;
>
> import java.util.ArrayList;
> import java.util.List;
>
> public class TriggerNavigationNode
> {
> private String text;
> private String outcome;
> private String nodeType;
>
> private List<TriggerNavigationNode> nodes = null;
>
> public TriggerNavigationNode(String node, String outcome)
> {
> this(node, outcome, "");
> }
>
> public TriggerNavigationNode(String node, String outcome, String
> nodeType)
> {
> this.text = node;
> this.outcome = outcome;
> this.nodeType = nodeType;
> }
>
> public String getText()
> {
> return text;
> }
>
> public void setText(String node)
> {
> this.text = node;
> }
>
> public List getNodes()
> {
> return nodes;
> }
>
> public void add(TriggerNavigationNode node)
> {
> if (nodes == null)
> {
> nodes = new ArrayList<TriggerNavigationNode>();
> }
> nodes.add(node);
> }
>
> public String doNavigation()
> {
> return outcome;
> }
>
> public void setOutcome(String outcome)
> {
> this.outcome = outcome;
> }
>
> public void setNodes(List<TriggerNavigationNode> nodes)
> {
> this.nodes = nodes;
> }
>
> /**
> * @return nodeType
> */
> public String getNodeType()
> {
> return nodeType;
> }
> }
>
> Initializing the tree in another class:
> ----------------------------------
> private List<TriggerNavigationNode> navList;
> private static final String LEAF = "leaf";
>
> public void initializeNavList()
> {
> // initialize the tree
> navList = new ArrayList<TriggerNavigationNode>();
> TriggerNavigationNode ohneButtons = new TriggerNavigationNode(
> "A leaf with a long text to make it wrap", "ohneButtons", LEAF);
> navList.add(ohneButtons);
> TriggerNavigationNode mitButtonA = new TriggerNavigationNode(
> "Leaf A", "mitButtonA", LEAF);
> navList.add(mitButtonA);
> TriggerNavigationNode mitButtonB = new TriggerNavigationNode(
> "Leaf B", "mitButtonB", LEAF);
> navList.add(mitButtonB);
> TriggerNavigationNode mitButtonA2 = new TriggerNavigationNode(
> "Folder A2", "mitButtonA");
> navList.add(mitButtonA2);
> TriggerNavigationNode mitButtonB2 = new TriggerNavigationNode(
> "Leaf B2", "mitButtonB", LEAF);
> mitButtonA2.add(mitButtonB2);
> TriggerNavigationNode mitButtonB3 = new TriggerNavigationNode(
> "Folder B3", "mitButtonB");
> mitButtonA2.add(mitButtonB3);
> TriggerNavigationNode mitButtonA4 = new TriggerNavigationNode(
> "Leaf A4", "mitButtonA", LEAF);
> mitButtonB3.add(mitButtonA4);
> }
>
> And yet elsewhere (just the way my test project grew):
> -----------------------------------------------------
> TreeModel treeModel = new ChildPropertyTreeModel(tree.getNavList(),
> "nodes");
>
> If you want/need to see more, just tell me...
>
>
>
> --
> View this message in context:
> http://www.nabble.com/-Trinidad--Fine-tuning-the-node-icon-%28--%3E-improved-tree-skinning%29-tp15159675p15159675.html
> Sent from the MyFaces - Users mailing list archive at Nabble.com.
>
>
--
Cristi Toth
-------------
Codebeat
www.codebeat.ro