[ KAWWA PORTAL ] Components : Treeview

Navigation

Treeview

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

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")

Demo
Snippets
Tapestry Integration

To navigate through the tree, use up/down arrows to jump nodes and left/right arrows to close/open them

Declined

HTML5 Plain Code

COPY

<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>

```
<div class="k-tree">
```
```
	<ul>
```
```
		<li><a href="#">Declined</a>
```
```
			<ul>
```
```
				<li> <a href="#">John Doe</a> </li>
```

				<li> <a href="#">Jack Smith</a> </li>

				<li> <a href="#">Hannah Boyd</a> </li>

```
				<li> <a href="#">Reconsider?</a>
```
```
					<ul>
```

						<li> <a href="#">Sandra johnson</a> </li>

						<li> <a href="#">Dan Smith</a> </li>

						<li> <a href="#">Jason Bourne</a> </li>

						<li> <a href="#">Jason Maple</a> </li>

```
					</ul>
```
```
				</li>
```
```
			</ul>
```
```
		</li>
```
```
	</ul>
```
```
</div>
```

CSS Code

COPY

```
div.k-tree {}
```
```
	div.k-tree li {
```
```
		list-style-type: none;
```
```
		font-size: 0.85em;
```

		background: #FFF url(../img/k-theme0/tree_sprite.gif) -90px 0 repeat-y;

```
	}
```
```
	div.k-tree li li {font-size: 100%;}
```

	div.k-tree li.jstree-last {background: none;}

	div.k-tree li ins {background: transparent url(../img/k-theme0/tree_sprite.gif) -90px 0 repeat-y;}

	div.k-tree li.jstree-leaf > ins {background-position: -36px 0;}

	div.k-tree li.jstree-closed > ins {background-position: -54px 0;}

	div.k-tree li.jstree-open > ins {background-position: -72px 0;}

	div.k-tree a .jstree-icon {background-position: -56px -19px;}

```
	div.k-tree a, div.k-tree a:link {
```
```
		display: inline-block;
```
```
		color: #000;
```
```
		background: #FFF;
```
```
	}
```
```
	div.k-tree a:hover {
```
```
		color: #000;
```
```
		background: #ECECEC;
```
```
	}
```
```
	div.k-tree a:focus {
```
```
		color: #000;
```
```
		background: rgba(164,8,0,.3);
```
```
		border: 1px solid #A40800;
```
```
	}
```
```
	div.k-tree a.jstree-clicked {
```
```
		color: #000;
```
```
		background: rgba(164,8,0,.3);
```
```
	}
```

How to apply

COPY

```
(function($){
```
```
	'use strict';
```
```
	$(document).ready(function(){
```
```
		if($.fn.jstree) {
```

			$('.k-tree').jstree({plugins: ['html_data', 'ui', 'hotkeys']});

			/*if you don't want keyboard navigation, use this line instead :

```
			jQuery('.k-tree').jstree();*/
```

			$('.jstree-closed > a').attr('aria-expanded', 'false');

			$('.jstree-open > a').attr('aria-expanded', 'true');

```
		}
```
```
	});
```
```
})(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

<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"

```
      xmlns:p="tapestry:parameter">
```
```
<body>
```

<div t:type="any"  t:mixins="kawwa2/jstree"  class="k-tree">

```
	<ul>
```
```
		<li><a href="#">Declined</a>
```
```
			<ul>
```
```
				<li> <a href="#">John Doe</a> </li>
```

				<li> <a href="#">Jack Smith</a> </li>

				<li> <a href="#">Hannah Boyd</a> </li>

```
				<li> <a href="#">Reconsider?</a>
```
```
					<ul>
```

						<li> <a href="#">Sandra johnson</a> </li>

						<li> <a href="#">Dan Smith</a> </li>

						<li> <a href="#">Jason Bourne</a> </li>

						<li> <a href="#">Jason Maple</a> </li>

```
					</ul>
```
```
				</li>
```
```
			</ul>
```
```
		</li>
```
```
	</ul>
```
```
</div>
```
```
</body>
```
```
</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

<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"

```
      xmlns:p="tapestry:parameter">
```
```
	<body>
```

		<t:kawwa2.tree t:model="model" t:selectionModel="selectModel"/>

```
	</body>
```
```
</html>
```

Java Implementation

COPY

package net.atos.kawwaportal.components.test.pages;

import net.atos.kawwaportal.components.TreeConstants;

import net.atos.kawwaportal.components.test.data.User;

import net.atos.kawwaportal.components.tree.DefaultTreeSelectionModel;

import net.atos.kawwaportal.components.tree.TreeModel;

import net.atos.kawwaportal.components.tree.TreeSelectionModel;

import org.apache.tapestry5.annotations.OnEvent;

```
public class Tree
```
```
{
```
```
	
```
```
	public TreeModel getModel(){
```
```
		return User.createTreeModel();
```
```
	}
```
```
	   
```

	public TreeSelectionModel getSelectModel(){

		return new DefaultTreeSelectionModel();

```
	}
```
```
	
```

	@OnEvent(value=TreeConstants.NODE_SELECTED)

```
	public void nodeSelected(String uuid){
```

		System.out.println("############## The node with the uid " + uuid + " has been selected");

```
	}
```
```
	
```

	@OnEvent(value=TreeConstants.NODE_UNSELECTED)

	public void nodeUnSelected(String uuid){

		System.out.println("############## The node with the uid " + uuid + " has been selected");

```
	}
```
```
}
```
```
/*
```
```
 * And here is the user class:
```
```
 */
```

package net.atos.kawwaportal.components.test.data;

```
import java.util.List;
```
```
import java.util.UUID;
```

import net.atos.kawwaportal.components.tree.DefaultTreeModel;

import net.atos.kawwaportal.components.tree.TreeModel;

import net.atos.kawwaportal.components.tree.TreeModelAdapter;

import org.apache.tapestry5.ValueEncoder;

import org.apache.tapestry5.ioc.internal.util.CollectionFactory;

```
public class User {
```

	public final String uuid = UUID.randomUUID().toString();

```
	
```
```
	private String nom;
```
```
	
```

	public final List<User> children = CollectionFactory.newList();

```
	
```
```
	public User(String nom) {
```
```
		super();
```
```
		this.nom = nom;
```
```
	}
```
```
	
```
```
	public String getNom() {
```
```
		return nom;
```
```
	}
```
```
	public void setNom(String nom) {
```
```
		this.nom = nom;
```
```
	}
```

	public static final User ROOT = new User("<root>");

```
	
```

	public User addChildrenNamed(String... names){

```
		
```
```
		for(String name : names){
```
```
			children.add(new User(name));
```
```
		}
```
```
		return this;
```
```
	}
```
```
	
```
```
	public User addChild(User user){
```
```
		
```
```
		children.add(user);
```
```
		
```
```
		return this;
```
```
	}
```
```
	
```
```
	public User seek(String uuid){
```
```
		
```

		if(this.uuid.equals(uuid)) return this;

```
		
```
```
		for(User child : children){
```
```
			User match = child.seek(uuid);
```
```
			
```
```
			if(match != null) return match;
```
```
		}
```
```
		
```
```
		return null;
```
```
	}
```
```
	
```
```
	static {
```
```
		
```
```
		ROOT.addChild(new User("Renault")
```
```
						.addChild(new User("Clio")
```

							.addChildrenNamed("Clio Campus", "Clio Sport")

```
						)
```
```
					 )
```

			.addChild(new User("Ferarri").addChildrenNamed("F430", "California"));

```
		
```
```
	}
```
```
	
```

	public static TreeModel<User> createTreeModel(){

```
		
```

		ValueEncoder encoder = new ValueEncoder<User>() {

```
			public String toClient(User arg0) {
```
```
				return arg0.uuid;
```
```
			}
```
```
			public User toValue(String arg0) {
```
```
				return User.ROOT.seek(arg0);
```
```
			}
```
```
		};
```
```
		
```

		TreeModelAdapter<User> adapter = new TreeModelAdapter<User>() {

			public List<User> getChildren(User arg0) {

```
				return arg0.children;
```
```
			}
```
```
			public String getLabel(User arg0) {
```
```
				return arg0.getNom();
```
```
			}
```

			public boolean hasChildren(User arg0) {

```
				return !arg0.children.isEmpty();
```
```
			}
```
```
			public boolean isLeaf(User arg0) {
```
```
				return arg0.children.isEmpty();
```
```
			}
```
```
			
```
```
		};
```
```
		
```

		return new DefaultTreeModel<User>(encoder, adapter, User.ROOT.children);

```
			
```
```
	}
```
```
}
```

Top

KAWWA Markup Pattern Library

Navigation

Treeview

HTML5 Plain Code

CSS Code

How to apply

IE Backward Compatibility

Tapestry Integration

The Template

Ajax Based Tree

The Template

Java Implementation

Download List (0)

Dependencies:

List of Components

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce