All,
I am trying to get a tree control to display on a page. I am using Facelets, along with JSF 1.2, so my extension is .xhtml.
The same exact page, that I will show below, if viewed as HTML, loads and displays a tree. I view it as xhtml (thus having it processed by JSF and the facelets view handler), the control will not render. I just get a blank screen.
I'm hoping someone here on this list has tried to do something similar and can tell me what I need to do. Here is the page:
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sample Tree Control</title>
<link rel="stylesheet" href="/js/dojo-0.9.0/dijit/themes/tundra/tundra.css" type="text/css"/>
<link rel="stylesheet" href="/js/dojo-0.9.0/dojo/resources/dojo.css" type="text/css"/>
<script type="text/javascript" src="/js/dojo-0.9.0/dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: true">
</script>
<script type="text/javascript">
dojo.require( "dojo.data.ItemFileWriteStore" );
dojo.require( "dijit.Tree" );
</script>
</head>
<body class="tundra">
<div dojoType="dojo.data.ItemFileWriteStore" jsId="mailStore" url="mail/mail.json"></div>
<div dojoType="dijit.Tree" id="mailTree" store="mailStore" labelAttr="label" childrenAttr="folders" query="{type:'folder'}">
</div>
</body>
</html>
And here is the json data found in mail.json (which I know is being found and loaded).
{
identifier: 'id',
label: 'label',
items: [
// Hierarchy of folders
{ type: 'folder', id: 'mailbox', label:'Mail Folders', folders: [
{ type: 'folder', id: 'inbox', label:'Inbox', icon:'mailIconFolderInbox' },
{ type: 'folder', id: 'deleted', label:'Trash Can', icon:'mailIconTrashcanFull' },
{ type: 'folder', id: 'save', label:'Save', folders:[
{ id: 'work', label:'stuff for work'},
{ id: 'fun', label:'stuff for fun'}
]}
]}
]
}
Again, the same page not preprocessed by JSF and facelets displays a tree. What is going on?