<ui:createLink 
		ui:format="json" 
		ui:sendQueryGraph="true" 
		ui:snippet="true" 
		ui:view="{= ?dataProvider }"
		arg:root="{= ?root }">

	<div id="{= ?id }" treedataprovider="{= ?dataProvider }" treeroot="{= ?root }"/>

	<script type="text/javascript">
	$(function () {
		$("#{= ?id }").jstree({
			
			"plugins" : [ 
					"themes", 
					"json_data", 
					"ui" ],

			"json_data" : { 
				"ajax" : {
					"url" : '{= ?link }',
					"async" : true,
					"data" : function (n) { 
						return { 
							"id" : n.attr ? n.attr("id").replace("node_","") : 1 
						}; 
					}
				}
			},
		
			"core" : {
				"animation" : 0
			},
			
			"themes" : {
				"theme" : "classic"
			},
			
			"ui": {
				"select_limit": 1
			}
		});
	});
	
	<ui:if ui:condition="{= bound(?onSelect) }">
		$("#{= ?id }").bind("select_node.jstree", function(event, data) {
			var node = data.rslt.obj.attr("id");
			var resource = data.rslt.obj.attr("resource");
			{= ?onSelect }
		});
	</ui:if>
	
	<ui:if ui:condition="{= bound(?onLoaded) }">
		$("#{= ?id }").bind("loaded.jstree", function(event, data) {
			{= ?onLoaded }
		});
	</ui:if>
	
	</script>
</ui:createLink>