ADF Tree Strange display Issues / Possible Bug ?
I'm using JDeveloper 11g Production just released to develop a sample application. I have a ADF Tree component which simply shows data from an EJB object, however, some strange issues are showing as follows:
1) When I expand / collapse the nodes, instead of it occurring quickly, the new nodes or disappearing nodes sort of slide in and out which looks odd. I've also noticed this in the ADF Skin demo when I compile it, however, I didn't see it in the online example (which appears to not be available now). Image uploaded here ([http://img522.imageshack.us/my.php?image=slidingwf5.gif])
2) When I double click on the + or - icons, it'll cause the tree to show a circle icon (looks like a bug), clicking again will duplicate the children such that there are two sets and the duplicate set will go away once refreshed or tree is repainted. I uploaded a picture here ([http://img522.imageshack.us/my.php?image=doubleclickerrorgx7.gif]).
3) My context menu appears to the right and bottom (about 2 inches each way) from where it should (the node that I right clicked). I uploaded a picture here ([http://img399.imageshack.us/my.php?image=menuerrorld2.gif])
All of the code is listed below, does any see any issues as to why 1-3 are occurring as it appears to be a bug in my opinion.
Thanks,
Kris
Below is the code for my JSF Tree (included in the ApplicationTemplate below using a jsp:include)
========================================
{color:#ff0000}<af:form inlineStyle="height:100%;">
<af:tree id="nodeTr" var="node"
value="#{nodebrowserhandler.treemodel}"
selectionListener="#{nodebrowserhandler.nodeAction}"
rowSelection="single" fetchSize="25"
inlineStyle="width:100%; height:100%;">
<f:facet name="nodeStamp">
<af:panelGroupLayout rendered="true">
<af:image id="folderNodeStampImg" source="#{node.nodeSmallIcon}"
inlineStyle="vertical-align:middle; margin-right:3px;" shortDesc="#{node.nodetype.description}"/>
<af:outputText id="folderNodeStampText" value="#{node.nodename}"
inlineStyle="font-size:small;"/>
</af:panelGroupLayout>
</f:facet>
<f:facet name="contextMenu">
<af:popup id="NodePopup">
<af:menu id="RemoteTreeMenu">
<af:commandMenuItem id="refresh" text="*Refresh*"/>
<af:commandMenuItem id="viewFile" text="*Delete*"/>
<af:commandMenuItem id="downloadFile" text="*Edit*"/>
</af:menu>
</af:popup>
</f:facet>
</af:tree>
</af:form>
{color}{color:#000000}==========================================
Here is the TreeModel code behind (which sets the parent node and then gets the children through childrenNodeList for each node where childrenNodeList is a relationship reference to the Node table through EJB loaded using a join fetch query.
==========================================
{color:#ff0000}package com.iti.pv.site.view.nodebrowser;{color}
{color:#ff0000}import com.iti.pv.model.site.Node;{color}
{color:#ff0000}import com.iti.pv.model.site.NodeFacade;{color}
{color:#ff0000}import com.iti.pv.site.config.ConfigProperties;{color}
{color:#ff0000}import java.util.ArrayList;
import java.util.List;{color}
{color:#ff0000}import javax.naming.Context;
import javax.naming.InitialContext;
import javax.naming.NamingException;{color}
{color:#ff0000}import org.apache.myfaces.trinidad.model.TreeModel;
import org.apache.myfaces.trinidad.model.ChildPropertyTreeModel;
import org.apache.myfaces.trinidad.event.SelectionEvent;{color}
{color:#ff0000}public class NodeBrowserHandler {
private Node root;
private TreeModel treemodel;
private Node selectedNode;
private NodeFacade busNodeBean;
public NodeBrowserHandler() throws NamingException {
final Context context;
context = ConfigProperties.getInitialContext();
busNodeBean = (NodeFacade)context.lookup("NodeFacadeSession#com.iti.pv.model.site.NodeFacade");
setRoot();
}
public void setTreemodel(TreeModel treemodel) {
this.treemodel = treemodel;
}{color}
{color:#ff0000}public TreeModel getTreemodel() {
List nodes = new ArrayList();
nodes.add(root);
treemodel = new ChildPropertyTreeModel(nodes, "childrenNodeList") {
public boolean isContainer() {
return ((Node)getRowData()).getChildrenNodeList().size() > 0;
}
};
return treemodel;
}{color}
{color:#ff0000}private void setRoot() {
root = busNodeBean.queryNodeFindTopParent();
}{color}
{color:#ff0000}public void nodeAction(SelectionEvent selectionEvent) {
// Add event code here...
}
}{color}
==========================================
The JSP code is wrapped within two template files. The first one is similar to the Explorer template of the ADF Rich Demo while the 2nd one implements the several facets of the explorer template and provides a facet ref to define the content area.
First Template -> LayoutDesignTemplate.jspx
===========================================
{color:#ff0000}<?xml version='1.0' encoding='utf-8'?>
<jsp:root xmlns:jsp="{color}[http://java.sun.com/JSP/Page]{color:#ff0000}"
xmlns:f="[http://java.sun.com/jsf/core]{color:#ff0000}"
xmlns:af="[http://xmlns.oracle.com/adf/faces/rich]{color:#ff0000}"
xmlns:afh="[http://myfaces.apache.org/trinidad/html]{color:#ff0000}"
version="1.2">
<jsp:directive.page contentType="text/html;charset=utf-8"/>
<af:pageTemplateDef var="attrs">
<af:xmlContent>
<component xmlns="[http://xmlns.oracle.com/adf/faces/rich/component]{color:#ff0000}">
<description>
This component lays out an entire page.
</description>
<facet>
<description><![CDATA[http://The auxiliary content for the secondary layer.]|http://the%20auxiliary%20content%20for%20the%20secondary%20layer.]/]></description>
<facet-name>auxiliary2</facet-name>
</facet>
<facet>
<description><![CDATA[The branding region of the page. This section typically
contains a horizontal panelGroupLayout for an image of a logo and an
outputText for a title.]]>
</description>
<facet-name>branding</facet-name>
</facet>
<facet>
<description><![CDATA[http://Content for the top of the secondary layer.]|http://content%20for%20the%20top%20of%20the%20secondary%20layer.]/]>
</description>
<facet-name>header2</facet-name>
</facet>
<facet>
<description><![CDATA></description>
<facet-name>navigationGlobal</facet-name>
</facet>
<facet>
<facet-name>
welcomeheader
</facet-name>
</facet>
<facet>
<description><![CDATA[http://The center content.]|http://the%20center%20content.]/]></description>
<facet-name>center</facet-name>
</facet>
<attribute>
<description>Specifies the number of pixels that the auxiliary2 content should consume (this is a width if the orientationis "start" or "end" or a height if the orientation is "bottom").
</description>
<attribute-name>auxiliary2Size</attribute-name>
<attribute-class>int</attribute-class>
<default-value>200</default-value>
</attribute>
<attribute>
<description>Specifies the number of pixels tall that the global content should consume.
</description>
<attribute-name>headerGlobalSize</attribute-name>
<attribute-class>int</attribute-class>
<default-value>140</default-value>
</attribute>
<attribute>
<description>Specifies the number of pixels tall that the secondary header content should consume.
</description>
<attribute-name>header2Size</attribute-name>
<attribute-class>int</attribute-class>
<default-value>20</default-value>
</attribute>
</component>
</af:xmlContent>
<![CDATA[
<style type="text/css">
.FileExplorerNavigationGlobal {
text-align: right;
padding-left: 90px;
padding-right: 20px;
white-space: normal;
}
</style>
]]>
{color:#ff0000}<af:panelStretchLayout styleClass="AFDarkTone AFVisualRoot">
<f:facet name="center">
<af:panelSplitter styleClass="PVBackground"
orientation="vertical" splitterPosition="#{attrs.headerGlobalSize}">
<f:facet name="first">
<af:panelGroupLayout layout="vertical" inlineStyle="background: rgb(200,200,200);">
<afh:tableLayout width="100%">
<afh:rowLayout>
<afh:cellFormat styleClass="">
<af:facetRef facetName="branding"/>
</afh:cellFormat>
<afh:cellFormat>
<af:outputText value=" "/>
</afh:cellFormat>
<afh:cellFormat styleClass="FileExplorerNavigationGlobal" halign="right">
<af:facetRef facetName="welcomeheader"/>
</afh:cellFormat>
</afh:rowLayout>
</afh:tableLayout>
</af:panelGroupLayout>
</f:facet>
<f:facet name="second">
<!-- start of secondary decoration -->
<af:panelStretchLayout
styleClass="AFMediumTone"
topHeight="0"
startWidth="5"
endWidth="1"
bottomHeight="0px">
<f:facet name="top">
<af:panelStretchLayout
startWidth="9"
endWidth="5">
<f:facet name="start">
<af:panelGroupLayout styleClass="AFDecorativeBoxTopStart2">
<af:spacer/>
</af:panelGroupLayout>
</f:facet>
<f:facet name="center">
<af:panelGroupLayout styleClass="AFDecorativeBoxTop2">
<af:spacer/>
</af:panelGroupLayout>
</f:facet>
<f:facet name="end">
<af:panelGroupLayout styleClass="AFDecorativeBoxTopEnd2">
<af:spacer/>
</af:panelGroupLayout>
</f:facet>
</af:panelStretchLayout>
</f:facet>
<f:facet name="start">
<af:spacer styleClass="AFDecorativeBoxCenterStart"/>
</f:facet>
<f:facet name="center">
<af:panelStretchLayout styleClass="AFDecorativeBoxCenter2 AFLightTone">
<f:facet name="center">
<af:panelStretchLayout
topHeight="#{attrs.header2Size}">
<f:facet name="top">
<af:panelGroupLayout layout="vertical">
<afh:tableLayout width="100%" cellPadding="3"
cellSpacing="4">
<afh:rowLayout>
<afh:cellFormat halign="left" width="#{attrs.auxiliary2Size}">
<af:facetRef facetName="header2"/>
</afh:cellFormat>
<afh:cellFormat halign="left">
<af:facetRef facetName="navigationGlobal"/>
</afh:cellFormat>
</afh:rowLayout>
</afh:tableLayout>
</af:panelGroupLayout>
</f:facet>
<f:facet name="center">
<af:panelSplitter orientation="horizontal"
splitterPosition="#{attrs.auxiliary2Size}">
<f:facet name="first">
<af:facetRef facetName="auxiliary2"/>
</f:facet>
<f:facet name="second">
<!-- start of main decoration -->
<af:panelStretchLayout
topHeight="5"
startWidth="5"
endWidth="5"
bottomHeight="5">
<f:facet name="top">
<af:panelStretchLayout
startWidth="5"
endWidth="1">
<f:facet name="start">
<af:panelGroupLayout styleClass="AFDecorativeBoxTopStart">
<af:spacer/>
</af:panelGroupLayout>
</f:facet>
<f:facet name="center">
<af:panelGroupLayout styleClass="AFDecorativeBoxTop">
<af:spacer/>
</af:panelGroupLayout>
</f:facet>
<f:facet name="end">
<af:panelGroupLayout styleClass="AFDecorativeBoxTopEnd">
<af:spacer/>
</af:panelGroupLayout>
</f:facet>
</af:panelStretchLayout>
</f:facet>
<f:facet name="start">
<af:spacer styleClass="AFDecorativeBoxCenterStart"/>
</f:facet>
<f:facet name="center">
<af:panelStretchLayout styleClass="AFDecorativeBoxCenter AFDefaultTone">
<f:facet name="center">
<af:facetRef facetName="center"/>
</f:facet>
</af:panelStretchLayout>
</f:facet>
<f:facet name="end">
<af:spacer styleClass="AFDecorativeBoxCenterEnd"/>
</f:facet>
<f:facet name="bottom">
<af:panelStretchLayout
startWidth="5"
endWidth="5">
<f:facet name="start">
<af:spacer styleClass="AFDecorativeBoxBottomStart"/>
</f:facet>
<f:facet name="center">
<af:spacer styleClass="AFDecorativeBoxBottom"/>
</f:facet>
<f:facet name="end">
<af:spacer styleClass="AFDecorativeBoxBottomEnd"/>
</f:facet>
</af:panelStretchLayout>
</f:facet>
</af:panelStretchLayout>
<!-- end of main decoration -->
</f:facet>
</af:panelSplitter><!-- end of secondary auxiliary splitter -->
</f:facet>
</af:panelStretchLayout><!-- end of secondary header/footer layout -->
</f:facet>
</af:panelStretchLayout>
</f:facet>
<f:facet name="end">
<af:spacer styleClass="AFDecorativeBoxCenterEnd"/>
</f:facet>
<f:facet name="bottom">
<af:panelStretchLayout
startWidth="5"
endWidth="5">
<f:facet name="start">
<af:spacer styleClass="AFDecorativeBoxBottomStart"/>
</f:facet>
<f:facet name="center">
<af:spacer styleClass="AFDecorativeBoxBottom"/>
</f:facet>
<f:facet name="end">
<af:spacer styleClass="AFDecorativeBoxBottomEnd"/>
</f:facet>
</af:panelStretchLayout>
</f:facet>
</af:panelStretchLayout>
<!-- end of secondary decoration -->
</f:facet>
</af:panelSplitter><!-- end of global top splitter -->
</f:facet>
</af:panelStretchLayout>
</af:pageTemplateDef>
</jsp:root>
{color}{color:#000000}====================================================================
Application Template -> ApplicationTemplate.jspx (this includes the tree code from above)
=====================================================================
{color:#ff0000}<?xml version='1.0' encoding='windows-1252'?>
<jsp:root xmlns:jsp="{color}[http://java.sun.com/JSP/Page]{color:#ff0000}" version="2.0"
xmlns:f="[http://java.sun.com/jsf/core]{color:#ff0000}"
xmlns:h="[http://java.sun.com/jsf/html]{color:#ff0000}"
xmlns:af="[http://xmlns.oracle.com/adf/faces/rich]{color:#ff0000}">
<jsp:directive.page contentType="text/html;charset=utf-8"/>
<f:loadBundle basename="pvwebsite" var="pvwebbundle"/>
<af:pageTemplateDef var="attrs">
<af:xmlContent>
<component xmlns="[http://xmlns.oracle.com/adf/faces/rich/component]{color:#ff0000}">
<display-name>ITIProjectviewTemplate</display-name>
<facet>
<description>The contents of the page will go here</description>
<facet-name>pagecontent</facet-name>
</facet>
</component>
</af:xmlContent>
<af:pageTemplate
id="pvtemp"
viewId="/template/LayoutDesignTemplate.jspx">
<f:attribute name="headerGlobalSize" value="45"/>
<f:attribute name="auxiliary2Size" value="210"/>
<f:attribute name="header2Size" value="30"/>
<f:facet name="branding">
<af:panelGroupLayout layout="horizontal" shortDesc="ITI Projectview">
<af:image source="/skins/images/logo.png" shortDesc="ITI Projectview"/>
<af:spacer width="40px"/>
<af:outputText styleClass="PVSiteTitle" value="SiteTitle"
inlineStyle="vertical-align:text-bottom;"/>
</af:panelGroupLayout>
</f:facet>
<f:facet name="welcomeheader">
<af:panelGroupLayout layout="horizontal" halign="start">
<h:outputFormat value="#{pvwebbundle.pvweb_home_welcome}" styleClass="PVWelcomeUser"
style="vertical-align:middle;">
<f:param value="#{userstate.currentUser.userDisplayName}" />
</h:outputFormat>
<af:spacer width="10px"/>
<af:navigationPane hint="buttons" styleClass="PVNavigationUser">
<af:commandNavigationItem partialSubmit="true" icon="/skins/images/guy.gif" text="#{pvwebbundle.pvweb_home_prof}"
id="pveditprof"
inlineStyle="vertical-align:middle;"/>
<af:commandNavigationItem text="#{pvwebbundle.pvweb_home_logout}"
action="#{navigationcontroller.Logout}"
id="pvlogout"
partialSubmit="true"
inlineStyle="vertical-align:middle;"/>
</af:navigationPane>
</af:panelGroupLayout>
</f:facet>
<f:facet name="header2">
<af:group>
<af:spacer width="6"/>
<!--
<af:outputText styleClass="PVSiteTitle" value="Site Title"
inlineStyle="text-align:left;"/>
<af:spacer width="10"/>
-->
</af:group>
</f:facet>
<f:facet name="navigationGlobal">
<af:navigationPane shortDesc="" hint="buttons" styleClass="PVNavigation">
<af:commandNavigationItem partialSubmit="true" text="#{pvwebbundle.pvweb_home_admin}"
actionListener="#{demoCommandNavigationItem.navigationItemAction}"/>
<af:commandNavigationItem partialSubmit="true" text="#{pvwebbundle.pvweb_home_edit}"
actionListener="#{demoCommandNavigationItem.navigationItemAction}"/>
<af:commandNavigationItem partialSubmit="true" text="#{pvwebbundle.pvweb_home_search}"
actionListener="#{demoCommandNavigationItem.navigationItemAction}"/>
<af:commandNavigationItem partialSubmit="true" text="#{pvwebbundle.pvweb_home_about}"
actionListener="#{demoCommandNavigationItem.navigationItemAction}"/>
<af:commandNavigationItem partialSubmit="true" text="#{pvwebbundle.pvweb_home_help}"
actionListener="#{demoCommandNavigationItem.navigationItemAction}"/>
</af:navigationPane>
</f:facet>
<f:facet name="auxiliary2">
<af:panelStretchLayout startWidth="0px" topHeight="0px" endWidth="0px"
bottomHeight="0px" inlineStyle="height:100%;">
<f:facet name="center">
<af:group>
<jsp:include page="/library/nodebrowsertree.jspx"/>
</af:group>
</f:facet>
</af:panelStretchLayout>
</f:facet>
<f:facet name="center">
<af:facetRef facetName="pagecontent"/>
</f:facet>
</af:pageTemplate>
</af:pageTemplateDef>
</jsp:root>
{color}{color:#000000}========================================================================================
Final Page -> index.jsp
========================================================================================
{color:#ff0000}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"{color}[http://www.w3.org/TR/html4/loose.dtd]{color:#ff0000}">
<%@ page contentType="text/html;charset=windows-1252"%>
<%@ taglib uri="[http://java.sun.com/jsf/html]{color:#ff0000}" prefix="h"%>
<%@ taglib uri="[http://java.sun.com/jsf/core]{color:#ff0000}" prefix="f"%>
<%@ taglib uri="[http://xmlns.oracle.com/adf/faces/rich]{color:#ff0000}" prefix="af"%>
<f:view>
<af:document title="App Title">
<af:pageTemplate viewId="/template/ApplicationTemplate.jspx">
<f:facet name="pagecontent">
<af:inlineFrame id="pvcontent" source="/library/blank.html"
inlineStyle="width:100%; height:100%;"/>
</f:facet>
</af:pageTemplate>
</af:document>
</f:view>{color}
{color}