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")
HTML5 Plain Code
-
<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
-
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
-
(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.
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
-
<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
-
<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
-
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("Mégane"))
-
.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);
-
-
}
-
}