KAWWA Markup Pattern Library


Navigation

Treeview Component Information

  • Class name: (k-tree)
  • Version: 1.1
  • jQuery jQuery Interactive feature
  • Tapestry Tapestry Integration

Add to list

A treeview can be used to display and navigate through heavy, deep hierarchical information.

"...It makes sense to use a treeview, no matter how tempting it may be, only in the case where what is being represented is "naturally" thought of as a hierarchy (such as a family tree). Using a treeview to represent arbitrary objects organized in an arbitrary fashion at the whim of a programmer is asking for big trouble when it comes to usability." (Alan Cooper, "About Face")

HTML5 Plain Code

COPY
  1. <p class="k-skip"><a href="#">To navigate through the tree, use up/down arrows to jump nodes and left/right arrows to close/open them</a></p>
  2. <div class="k-tree">
  3. 	<ul>
  4. 		<li><a href="#">Declined</a>
  5. 			<ul>
  6. 				<li> <a href="#">John Doe</a> </li>
  7. 				<li> <a href="#">Jack Smith</a> </li>
  8. 				<li> <a href="#">Hannah Boyd</a> </li>
  9. 				<li> <a href="#">Reconsider?</a>
  10. 					<ul>
  11. 						<li> <a href="#">Sandra johnson</a> </li>
  12. 						<li> <a href="#">Dan Smith</a> </li>
  13. 						<li> <a href="#">Jason Bourne</a> </li>
  14. 						<li> <a href="#">Jason Maple</a> </li>
  15. 					</ul>
  16. 				</li>
  17. 			</ul>
  18. 		</li>
  19. 	</ul>
  20. </div>

CSS Code

COPY
  1. div.k-tree {}
  2. 
                                
  3. 
                                
  4. 	div.k-tree li {
  5. 		list-style-type: none;
  6. 		font-size: 0.85em;
  7. 		background: #FFF url(../img/k-theme0/tree_sprite.gif) -90px 0 repeat-y;
  8. 	}
  9. 	div.k-tree li li {font-size: 100%;}
  10. 
                                
  11. 	div.k-tree li.jstree-last {background: none;}
  12. 	div.k-tree li ins {background: transparent url(../img/k-theme0/tree_sprite.gif) -90px 0 repeat-y;}
  13. 
                                
  14. 	div.k-tree li.jstree-leaf > ins {background-position: -36px 0;}
  15. 	div.k-tree li.jstree-closed > ins {background-position: -54px 0;}
  16. 	div.k-tree li.jstree-open > ins {background-position: -72px 0;}
  17. 	div.k-tree a .jstree-icon {background-position: -56px -19px;}
  18. 
                                
  19. 	div.k-tree a, div.k-tree a:link {
  20. 		display: inline-block;
  21. 		color: #000;
  22. 		background: #FFF;
  23. 	}
  24. 	div.k-tree a:hover {
  25. 		color: #000;
  26. 		background: #ECECEC;
  27. 	}
  28. 	div.k-tree a:focus {
  29. 		color: #000;
  30. 		background: rgba(164,8,0,.3);
  31. 		border: 1px solid #A40800;
  32. 	}
  33. 	div.k-tree a.jstree-clicked {
  34. 		color: #000;
  35. 		background: rgba(164,8,0,.3);
  36. 	}
  37. 
                                

How to apply

COPY
  1. (function($){
  2. 	'use strict';
  3. 
                                
  4. 	$(document).ready(function(){
  5. 		if($.fn.jstree) {
  6. 			$('.k-tree').jstree({plugins: ['html_data', 'ui', 'hotkeys']});
  7. 			/*if you don't want keyboard navigation, use this line instead :
  8. 			jQuery('.k-tree').jstree();*/
  9. 			$('.jstree-closed > a').attr('aria-expanded', 'false');
  10. 			$('.jstree-open > a').attr('aria-expanded', 'true');
  11. 		}
  12. 	});
  13. })(jQuery);

For more information about how to apply this plug-in, its options, events and methods, see the jsTree page.

IE Backward Compatibility

In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments:

Tapestry Integration

Tapestry kawwa components comes with a simple integration of the jstree component. It is very simple to use but doesn't provide AJAX loading.

TreeView parameters
Name Required Java Type Default Prefix Default Value Description
hotkey false bollean literal false if true, the hotkey library will be included in your webpage, allowing end user to have keyboard navigation enabled

The Template

COPY
  1. <html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"
  2.       xmlns:p="tapestry:parameter">
  3. <body>
  4. <div t:type="any"  t:mixins="kawwa2/jstree"  class="k-tree">
  5. 	<ul>
  6. 		<li><a href="#">Declined</a>
  7. 			<ul>
  8. 				<li> <a href="#">John Doe</a> </li>
  9. 				<li> <a href="#">Jack Smith</a> </li>
  10. 				<li> <a href="#">Hannah Boyd</a> </li>
  11. 				<li> <a href="#">Reconsider?</a>
  12. 					<ul>
  13. 						<li> <a href="#">Sandra johnson</a> </li>
  14. 						<li> <a href="#">Dan Smith</a> </li>
  15. 						<li> <a href="#">Jason Bourne</a> </li>
  16. 						<li> <a href="#">Jason Maple</a> </li>
  17. 					</ul>
  18. 				</li>
  19. 			</ul>
  20. 		</li>
  21. 	</ul>
  22. </div>
  23. </body>
  24. </html>

Ajax Based Tree

Tapestry kawwa components also has an advanced AJAX based tree. It's actually based on the default tapestry Tree component (since 5.3). But since it's been created in tapestry-kawwa-component, you can also use it with tapestry 5.2.6. Parameters are the same, the only thing that changes is the javascript client side implementation (based on jquery) and the generated DOM (in order to be consider kawwa recommendations).

The Template

COPY
  1. <html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"
  2.       xmlns:p="tapestry:parameter">
  3. 	<body>
  4. 		<t:kawwa2.tree t:model="model" t:selectionModel="selectModel"/>
  5. 	</body>
  6. </html>

Java Implementation

COPY
  1. package net.atos.kawwaportal.components.test.pages;
  2. 
                                
  3. import net.atos.kawwaportal.components.TreeConstants;
  4. import net.atos.kawwaportal.components.test.data.User;
  5. import net.atos.kawwaportal.components.tree.DefaultTreeSelectionModel;
  6. import net.atos.kawwaportal.components.tree.TreeModel;
  7. import net.atos.kawwaportal.components.tree.TreeSelectionModel;
  8. 
                                
  9. import org.apache.tapestry5.annotations.OnEvent;
  10. 
                                
  11. public class Tree
  12. {
  13. 	
  14. 	public TreeModel getModel(){
  15. 		return User.createTreeModel();
  16. 	}
  17. 	   
  18. 	public TreeSelectionModel getSelectModel(){
  19. 		return new DefaultTreeSelectionModel();
  20. 	}
  21. 	
  22. 	@OnEvent(value=TreeConstants.NODE_SELECTED)
  23. 	public void nodeSelected(String uuid){
  24. 		System.out.println("############## The node with the uid " + uuid + " has been selected");
  25. 	}
  26. 	
  27. 	@OnEvent(value=TreeConstants.NODE_UNSELECTED)
  28. 	public void nodeUnSelected(String uuid){
  29. 		System.out.println("############## The node with the uid " + uuid + " has been selected");
  30. 	}
  31. }
  32. 
                                
  33. /*
  34.  * And here is the user class:
  35.  */
  36. package net.atos.kawwaportal.components.test.data;
  37. 
                                
  38. import java.util.List;
  39. import java.util.UUID;
  40. 
                                
  41. import net.atos.kawwaportal.components.tree.DefaultTreeModel;
  42. import net.atos.kawwaportal.components.tree.TreeModel;
  43. import net.atos.kawwaportal.components.tree.TreeModelAdapter;
  44. 
                                
  45. import org.apache.tapestry5.ValueEncoder;
  46. import org.apache.tapestry5.ioc.internal.util.CollectionFactory;
  47. 
                                
  48. public class User {
  49. 
                                
  50. 	public final String uuid = UUID.randomUUID().toString();
  51. 	
  52. 	private String nom;
  53. 	
  54. 	public final List<User> children = CollectionFactory.newList();
  55. 	
  56. 	public User(String nom) {
  57. 		super();
  58. 		this.nom = nom;
  59. 	}
  60. 	
  61. 	public String getNom() {
  62. 		return nom;
  63. 	}
  64. 
                                
  65. 	public void setNom(String nom) {
  66. 		this.nom = nom;
  67. 	}
  68. 
                                
  69. 	public static final User ROOT = new User("<root>");
  70. 	
  71. 	public User addChildrenNamed(String... names){
  72. 		
  73. 		for(String name : names){
  74. 			children.add(new User(name));
  75. 		}
  76. 		return this;
  77. 	}
  78. 	
  79. 	public User addChild(User user){
  80. 		
  81. 		children.add(user);
  82. 		
  83. 		return this;
  84. 	}
  85. 	
  86. 	public User seek(String uuid){
  87. 		
  88. 		if(this.uuid.equals(uuid)) return this;
  89. 		
  90. 		for(User child : children){
  91. 			User match = child.seek(uuid);
  92. 			
  93. 			if(match != null) return match;
  94. 		}
  95. 		
  96. 		return null;
  97. 	}
  98. 	
  99. 	static {
  100. 		
  101. 		ROOT.addChild(new User("Renault")
  102. 						.addChild(new User("Mégane"))
  103. 						.addChild(new User("Clio")
  104. 							.addChildrenNamed("Clio Campus", "Clio Sport")
  105. 						)
  106. 					 )
  107. 			.addChild(new User("Ferarri").addChildrenNamed("F430", "California"));
  108. 		
  109. 	}
  110. 	
  111. 	public static TreeModel<User> createTreeModel(){
  112. 		
  113. 		ValueEncoder encoder = new ValueEncoder<User>() {
  114. 
                                
  115. 			public String toClient(User arg0) {
  116. 				return arg0.uuid;
  117. 			}
  118. 
                                
  119. 			public User toValue(String arg0) {
  120. 				return User.ROOT.seek(arg0);
  121. 			}
  122. 		};
  123. 		
  124. 		TreeModelAdapter<User> adapter = new TreeModelAdapter<User>() {
  125. 
                                
  126. 			public List<User> getChildren(User arg0) {
  127. 				return arg0.children;
  128. 			}
  129. 
                                
  130. 			public String getLabel(User arg0) {
  131. 				return arg0.getNom();
  132. 			}
  133. 
                                
  134. 			public boolean hasChildren(User arg0) {
  135. 				return !arg0.children.isEmpty();
  136. 			}
  137. 
                                
  138. 			public boolean isLeaf(User arg0) {
  139. 				return arg0.children.isEmpty();
  140. 			}
  141. 			
  142. 		};
  143. 		
  144. 		return new DefaultTreeModel<User>(encoder, adapter, User.ROOT.children);
  145. 			
  146. 	}
  147. }

Top


List of Components

Top

jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce