Hi All,
I have a custom component which contains HtmlPanelNavigationMenu -
component class for <t:panelNavigation2>.
This in turn contains a number of <t:commandNavigation2> - component
class HtmlCommandNavigationItem
This is how I create the <t:panelNavigation2> component:
HtmlPanelNavigationMenu panelNavigationComponent =
(HtmlPanelNavigationMenu)app.createComponent(HtmlPanelNavigationMenu.COM
PONENT_TYPE);
panelNavigationComponent.setId("leftNav");
panelNavigationComponent.setLayout("list");
// Set the CSS classes for the panelNavigation2 component
panelNavigationComponent.setActiveItemClass("navSelected");
panelNavigationComponent.setOpenItemClass("navOpen");
panelNavigationComponent.setItemClass("navNormal");
//Adding child <t:commandNavigation2> components
Element rootElem = doc.getRootElement();
List children = rootElem.getChildren();
Iterator parentIter = children.iterator();
//Iterate through the children
while (parentIter.hasNext()) {
HtmlCommandNavigationItem commandNavigationItem = null;
Element node = (Element) parentIter.next();
if ("true".equals(node.getAttributeValue("visible"))) {
commandNavigationItem =
(HtmlCommandNavigationItem)
app.createComponent(HtmlCommandNavigationItem.COMPONENT_TYPE);
commandNavigationItem.setId(node.getAttributeValue("id"));
FacesUtils.setAction(commandNavigationItem,
node.getAttributeValue("action"));
commandNavigationItem.setImmediate(true);
// Create the panel grid
HtmlPanelGrid panelGrid = (HtmlPanelGrid)
app.createComponent(HtmlPanelGrid.COMPONENT_TYPE);
panelGrid.setColumns(2);
HtmlGraphicImage image = (HtmlGraphicImage)
app.createComponent(HtmlGraphicImage.COMPONENT_TYPE);
image.setUrl(node.getAttributeValue("imgurl"));
HtmlOutputText outputText = (HtmlOutputText)
app.createComponent(HtmlOutputText.COMPONENT_TYPE);
FacesUtils.setValueBinding(outputText, "value",
node.getAttributeValue("text"));
panelGrid.getChildren().add(image);
panelGrid.getChildren().add(outputText);
// Add the panel Grid component to the
commandNavigation
// component
commandNavigationItem.getChildren().add(panelGrid);
commandNavigationItem.setParent(panelNavigationComponent);
//recursively add child components to the parent
component
addChildComponents(node, commandNavigationItem);
//Add the commandNavigation2 parent component to
the panelNavigation2 component
panelNavigationComponent.getChildren().add(commandNavigationItem);
}
}
this.getChildren().add(panelNavigationComponent);
}
//Method to recursively add child <t:commandNavigation2> components to
create a multi level left navigation
FacesContext context = FacesContext.getCurrentInstance();
Application app = context.getApplication();
// Exit condition
if (null == parent.getChildren())
return;
List children = parent.getChildren();
Iterator childIter = children.iterator();
while (childIter.hasNext()) {
Element child = (Element) childIter.next();
if ("true".equals(child.getAttributeValue("visible"))) {
HtmlCommandNavigationItem childComponent =
(HtmlCommandNavigationItem)
app.createComponent(HtmlCommandNavigationItem.COMPONENT_TYPE);
childComponent.setId(child.getAttributeValue("id"));
FacesUtils.setAction(childComponent,
child.getAttributeValue("action"));
HtmlOutputText outputText = (HtmlOutputText)
app.createComponent(HtmlOutputText.COMPONENT_TYPE);
FacesUtils.setValueBinding(outputText, "value",
child.getAttributeValue("text"));
childComponent.getChildren().add(outputText);
childComponent.setParent(component);
childComponent.setImmediate(true);
// Add the child component
component.getChildren().add(childComponent);
// recursive call
addChildComponents(child, childComponent);
}
}
In the encodeBegin method of this custom component the
<t:panelNavigation2> component is constructed programmatically.
In the Renderer for this custom component encodeBegin looks like:
checkState(context, component);
super.encodeChildren(context, component);
//Call encodeChildren on all the child components of this component
List children = component.getChildren();
if (null != children) {
Iterator childIter = children.iterator();
while(childIter.hasNext()) {
UIComponent childComponent =
(UIComponent)childIter.next();
childComponent.encodeChildren(context);
}
}
Similarly encodeChildren and encodeEnd methods are coded.
The problem:
When the left navigation opens up to show child menu items the following
are the problems:
1. There is no alignment
2. In spite of setting style classes it does not show any change in
color when things are selected or open or closed.
On looking deeper the following difference was found as compared to the
scenario where the entire left navigation was hard coded in the form of
tags in the JSP:
1. CSS Classes were assigned both at <li> and <a> level in case
where the tags were directly hard coded in the JSP. Where as in the left
navigation created programmatically CSS classes were only present at
<li>
Here is the generated HTML code for the case when tags were hard coded
in the JSP:
<div id="subnavigation_outer">
<div id="subnavigation">
<ul>
<li class="navSelected"><a href="#"
onclick="if(window.clearFormHiddenParams_frmMain!=undefined)
{clearFormHiddenParams_frmMain('frmMain');}if(window.getScrolling!=undef
ined){document.forms['frmMain'].elements['autoScroll'].value=getScrollin
g();}document.forms['frmMain'].elements['frmMain:_idcl'].value='frmMain:
leftnav:nav1:id1';if(document.forms['frmMain'].onsubmit){var
result=document.forms['frmMain'].onsubmit(); if( (typeof result ==
'undefined') || result )
{document.forms['frmMain'].submit();}}else{document.forms['frmMain'].sub
mit();}return false;" id="frmMain:leftnav:nav1:id1"
class="navSelected"><table><tbody><tr><td><img
src="/ehr/images/icon/home.gif" /></td><td> </td><td>Home</td></tr>
</tbody></table></a>
<input type="hidden" name="autoScroll" />
</li>
</ul>
</div>
</div>
Here is the generated HTML code when the left navigation was generated
programmatically:
<div id="subnavigation_outer">
<div id="subnavigation">
<ul>
<li class="navNormal"><a href="#"
onclick="if(window.clearFormHiddenParams_frmMain!=undefined)
{clearFormHiddenParams_frmMain('frmMain');}if(window.getScrolling!=undef
ined){document.forms['frmMain'].elements['autoScroll'].value=getScrollin
g();}document.forms['frmMain'].elements['frmMain:_idcl'].value='frmMain:
leftnav:leftNav:docHome';if(document.forms['frmMain'].onsubmit){var
result=document.forms['frmMain'].onsubmit(); if( (typeof result ==
'undefined') || result )
{document.forms['frmMain'].submit();}}else{document.forms['frmMain'].sub
mit();}return false;"
id="frmMain:leftnav:leftNav:docHome"><table><tbody><tr><td><img
src="/ehr/images/icon/home.gif" /></td><td>Home</td></tr>
</tbody></table></a>
<input type="hidden" name="autoScroll" />
</li>
</ul>
</div>
</div>
Can anyone help me with why is this difference coming up and why is
there no indentation of any child menu item in a multi level panel
navigation menu?
Any help will be appreciated!
Rgds,
~madhav
**************** CAUTION - Disclaimer *****************
This e-mail contains PRIVILEGED AND CONFIDENTIAL INFORMATION intended solely
for the use of the addressee(s). If you are not the intended recipient, please
notify the sender by e-mail and delete the original message. Further, you are
not to copy, disclose, or distribute this e-mail or its contents to any other
person and any such actions are unlawful. This e-mail may contain viruses.
Infosys has taken every reasonable precaution to minimize this risk, but is not
liable for any damage you may sustain as a result of any virus in this e-mail.
You should carry out your own virus checks before opening the e-mail or
attachment. Infosys reserves the right to monitor and review the content of all
messages sent to or from this e-mail address. Messages sent to or from this
e-mail address may be stored on the Infosys e-mail system.
***INFOSYS******** End of Disclaimer ********INFOSYS***
