myfaces-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Jeanne Waldman <jeanne.wald...@oracle.com>
Subject Re: [Trinidad] Fine tuning the node icon (--> improved tree skinning)
Date Wed, 30 Jan 2008 00:25:56 GMT
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 
> <mailto:carsten.pieper@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> 

Mime
View raw message