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 <
[EMAIL PROTECTED]> 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
> > <[EMAIL PROTECTED]
> > <mailto:[EMAIL PROTECTED]>> 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
