I have an application that is attempting to use JSF 1.2 and facelets (you've been hearing a lot from me lately). I was having trouble rendering a dojo tree control until I wrapped the section that contained the tree with <f:view contentType="text/html">. That worked, the tree renders.
My page contains a multiple tabs, one of which has the tree control among others, and another that has a group box that I use jsf-extension to handle the onchange event and update text portions of the screen from that selection, Here is the problem: I can't get both the tree control and that selection logic to work at the same time. If I put the aforementioned f:view tag with text/html as the contentType anywhere on the page, the group selection no longer works. If I take that contentType out, the group box selection logic works.
I'll post the page below. With the text/html in, the backing bean value change handler is not called, and so the server is unaware that anything has changed in the group box.
I'm hoping this is just a small problem, like the one with the non-rendering tree.
What you see below will see group selections take effect. See bolded comment where adding text/html will fix the tree and break the group selection logic.
Here is the page (I've taken out some parts to keep it brief):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml"
xmlns:f="
http://java.sun.com/jsf/core"
xmlns:h="
http://java.sun.com/jsf/html"
xmlns:jsfExt="
http://java.sun.com/jsf/extensions/dynafaces">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Pragma" content="no-cache"/>
<title>JSF and Facelets App</title>
<jsfExt:scripts/>
<style type="text/css">
@import "/js/dojo-0.9.0/dijit/themes/tundra/tundra.css";
@import "/js/dojo-0.9.0/dojo/0.9.0/dojo/dojo.css";
</style>
<script type="text/javascript"
src="/js/dojo-0.9.0/dojo/dojo.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require( "dojo.parser" );
dojo.require( "dijit.layout.ContentPane" );
dojo.require( "dijit.layout.TabContainer" );
dojo.require( "dojo.data.ItemFileWriteStore" );
dojo.require( "dijit.Tree" );
dojo.require( "dojo.parser" );
// Took out the dojo widget creation and initialization code
function updateGroupSelection()
{
var groupListBoxForm = document.forms['groupListBoxForm'];
var groupListBox = groupListBoxForm.elements['groupListBox'];
DynaFaces.fireAjaxTransaction( groupListBox,
{ execute: 'groupListBox', render: 'selectedGroupName', immediate: true } );
return false;
}
</script>
</head>
<body class="tundra">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<br/>
<!-- Dojo tab container is rendered dynamically here (see body onload) -->
<div id="tabContainer" style="width: 400px; height: 400px;">
<div id="groupTabContainer">
<table border="0">
<f:view>
<h:form id="groupListBoxForm" prependId="false">
<tr>
<!-- Item tree -->
<td valign="top">
<h:selectOneListbox id="groupListBox"
value="#{groupsBean.selectedGroup}"
style="width:275px;height:309px"
valueChangeListener="#{groupsBean.groupSelected}"
onchange="return updateGroupSelection()">
<f:selectItems value="#{groupsBean.groupItems}" />
</h:selectOneListbox>
</td>
</tr>
<tr>
<td>
Selected group name: <h:outputText id="selectedGroupName" value="#{groupsBean.selectedGroupName}"/>
</td>
</tr>
</h:form>
</f:view>
</table>
</div>
<!-- Tree container -->
<div id="treeTabContainer">
<!-- Change this below to <f:view contentType="text/html">, and the tree displays and the group selection won't -->
<f:view>
<div dojoType="dijit.Tree" id="mailTree" store="mailStore"
labelAttr="label" childrenAttr="folders" query="{type:'folder'}">
</div>
</f:view>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>