JSF and Dojo integration

View: New views
1 Messages — Rating Filter: Alert me
JSF and Dojo integration

by Scott-181 :: Rate this Message:
Reply to Author | View Threaded | Show Only this Message
Some parts of this message have been removed. Learn more about Nabble's security policy.
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>
LightInTheBox - Buy quality products at wholesale price