myfaces-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Madhav Bhargava" <Madhav_Bharg...@infosys.com>
Subject RE: panelNavigationMenu2> does not work properly when added programmatically - Any help
Date Wed, 03 Jan 2007 13:40:45 GMT
Here are the CSS classes:

 

#subnavigation li{

margin: 0px;

padding: 0px;

display: inline;

}

 

#subnavigation ul li a {

display: block;

background-color: #F8F6F7;

color: #000000;

font-size: 11px;

text-decoration: none;

border-bottom: 1px solid #FFFFFF;

padding: 1px 20px;

margin: 0px;

}

 

 

#subnavigation ul li a.navSelected {

font-weight: bold;

color:#FFFFFF;

background-color: #618FC3;

}

 

#subnavigation ul li ul li a.navSelected {

font-weight: bold;

color:#000000;

background-color: #B0D6ED;

}

 

#subnavigation ul li a.navOpen {

font-weight: bold;            

color:#FFFFFF;

background-color: #618FC3;

}

#subnavigation ul li ul li a.navNormal {

padding: 2px 20px 2px 25px;

margin: 0px;

background-color: #B0D6ED;

}

#subnavigation ul li a img {

border: none;

}

 

Sorry about posting a lot of code, but I really cannot understand the
reason for it not working.

 

Rgds,

Madhav

 

________________________________

From: Madhav Bhargava [mailto:Madhav_Bhargava@infosys.com] 
Sent: Wednesday, January 03, 2007 6:48 PM
To: MyFaces Discussion
Subject: <t:panelNavigationMenu2> does not work properly when added
programmatically - Any help

 

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>&nbsp;</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***
	

Mime
View raw message