Generic vertical menu-list in ADF application

Question

Hi All,
I am trying to create a generic vertical menu for my application. I follow the best practices given in Oracle docs and don't seem to get it right. I have a panelAccordion and several child showDetailItem components in it. Within each showDetailItem I have several commandlinks (I could not find a suitable component to replace the commandlink). I have attached the jspx template code for review. I have several issues
1) I want to display all the showDetailItems and child commandlinks taking geometry and screen resolution into account. I tried playing around with the flex and InflexibleHeight attribute without much success. Is there way I can force the framework to do the geometry space allocation for each showDetailItem for me. The problem seems to be the showDetailItem on monitors with different resolution flows out of the page even if sufficient space is available to display everything. How to handle this?
2) Is there a substitute component for the commandlink component. I want the user to click on that component to take them to specific screens. I don't want the underline of the commandlink. It should looks like neat tiles one under the other.
To achieve this I even tried playing around with the skinning.css. I am using simple skin and want to extend on it.
Is there a sample example out somewhere which will help?
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<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">
<display-name>VacarTemplate</display-name>
<facet>
<facet-name>center</facet-name>
</facet>
</component>
</af:xmlContent>
<af:panelStretchLayout topHeight="107px" bottomHeight="50px" id="pt_psl1">
<f:facet name="top">
<af:image source="/images/vacarhead.JPG" id="pt_i2"/>
</f:facet>
<f:facet name="center">
<af:decorativeBox theme="dark" id="pt_db1">
<f:facet name="center">
<af:panelSplitter splitterPosition="190" id="pt_ps1">
<f:facet name="first">
<af:panelAccordion id="pt_pa1" discloseMany="true"
dimensionsFrom="parent">
<af:showDetailItem text="Main Menu" id="pt_sdi1"
inlineStyle="font-family:Arial, Helvetica, sans-serif; background-color:White;"
disclosed="true" inflexibleHeight="10"
flex="1">
<af:group id="pt_g2">
<af:commandLink text="Home" id="pt_cl13"
inlineStyle="font-weight:bold; font-size:small;"/>
<af:separator id="pt_s13"/>
<af:commandLink text="Case Search" id="pt_cl14"
inlineStyle="font-size:small; font-weight:bold;"/>
<af:separator id="pt_s14"/>
<af:commandLink text="Import Cases" id="pt_cl16"
inlineStyle="font-size:small; font-weight:bold;"/>
<af:separator id="pt_s16"/>
</af:group>
</af:showDetailItem>
<af:showDetailItem text="Data Maintenance" id="pt_sdi5"
inlineStyle="background-color:White;"
disclosed="true" inflexibleHeight="10"
flex="3">
<af:group id="pt_g3">
<af:commandLink text="Questionnaires" id="commandLink1"
inlineStyle="font-weight:bold; font-size:small;"/>
<af:separator id="separator1"/>
<af:commandLink text="Reference Codes" id="commandLink2"
inlineStyle="font-size:small; font-weight:bold;"/>
<af:separator id="separator2"/>
<af:commandLink text="Employees" id="commandLink3"
inlineStyle="font-size:small; font-weight:bold;"/>
<af:separator id="separator3"/>
<af:commandLink text="Error Messages" id="commandLink4"
inlineStyle="font-size:small; font-weight:bold;"/>
<af:separator id="separator4"/>
</af:group>
</af:showDetailItem>
<af:showDetailItem text="Cases" id="pt_sdi6"
inlineStyle="background-color:White;"
disclosed="true" inflexibleHeight="10"
flex="1">
<af:group id="pt_g4">
<af:commandLink text="Cases" id="commandLink5"
inlineStyle="font-weight:bold; font-size:small;"/>
<af:separator id="separator5"/>
<af:commandLink text="Teams" id="commandLink6"
inlineStyle="font-size:small; font-weight:bold;"/>
<af:separator id="separator6"/>
<af:commandLink text="Case Audit" id="commandLink7"
inlineStyle="font-size:small; font-weight:bold;"/>
<af:separator id="separator7"/>
</af:group>
</af:showDetailItem>
<af:showDetailItem text="Patient" id="pt_sdi2"
inlineStyle="font-family:Arial, Helvetica, sans-serif; background-color:White;"
disclosed="true" inflexibleHeight="10"
flex="5">
<af:group id="pt_g5">
<af:commandLink text="Patient" id="pt_cl1"
inlineStyle="font-weight:bold; text-align:right; font-size:small;"/>
<af:separator id="pt_s3"/>
<af:commandLink text="Contacts" id="pt_cl2"
inlineStyle="font-weight:bold; font-size:small;"/>
<af:separator id="pt_s1"/>
<af:commandLink text="Arrest" id="pt_cl3"
inlineStyle="font-weight:bold; font-size:small;"/>
<af:separator id="pt_s2"/>
<af:commandLink text="Trauma" id="pt_cl4"
inlineStyle="font-weight:bold; font-size:small;"/>
<af:separator id="pt_s4"/>
<af:commandLink text="Mx" id="pt_cl5"
inlineStyle="font-weight:bold; font-size:small;"/>
<af:separator id="pt_s5"/>
<af:commandLink text="VSS" id="pt_cl6"
inlineStyle="font-weight:bold; font-size:small;"/>
<af:separator id="pt_s6"/>
<af:commandLink text="Destination" id="pt_cl7"
inlineStyle="font-weight:bold; font-size:small;"/>
<af:separator id="pt_s7"/>
<af:commandLink text="Hospital" id="pt_cl8"
inlineStyle="font-weight:bold; font-size:small;"/>
<af:separator id="pt_s8"/>
<af:commandLink text="Clinical Trial" id="pt_cl9"
inlineStyle="font-weight:bold; font-size:small;"/>
<af:separator id="pt_s9"/>
<af:commandLink text="QOL Survey" id="pt_cl10"
inlineStyle="font-weight:bold; font-size:small;"/>
<af:separator id="pt_s10"/>
</af:group>
</af:showDetailItem>
<af:showDetailItem text="Reporting" id="pt_sdi3"
inlineStyle="font-family:Arial, Helvetica, sans-serif; background-color:White;"
disclosed="true" inflexibleHeight="10"
flex="1">
<af:group id="pt_g6">
<af:commandLink text="Standard Reports" id="pt_cl11"
inlineStyle="font-size:small; font-weight:bold;"/>
<af:separator id="pt_s11"/>
<af:commandLink text="Ad-Hoc Reporting" id="pt_cl12"
inlineStyle="font-size:small; font-weight:bold;"/>
<af:separator id="pt_s12"/>
</af:group>
</af:showDetailItem>
<af:showDetailItem text="Documentation" id="pt_sdi7"
inlineStyle="background-color:White;"
disclosed="true" inflexibleHeight="10"
flex="1">
<af:group id="pt_g7">
<af:commandLink text="User Guide" id="commandLink8"
inlineStyle="font-weight:bold; font-size:small;"/>
<af:separator id="separator8"/>
</af:group>
</af:showDetailItem>
<af:showDetailItem text="Search" disclosed="true" id="pt_sdi4"
inflexibleHeight="10" flex="1">
<af:panelGroupLayout
id="pt_pgl1">
<af:panelFormLayout maxColumns="1" id="pt_pfl1">
<af:inputText id="pt_it1"/>
<af:commandButton partialSubmit="true" text="Find Case"
id="pt_cb3"/>
</af:panelFormLayout>
</af:panelGroupLayout>
</af:showDetailItem>
</af:panelAccordion>
</f:facet>
<f:facet name="second">
<af:decorativeBox theme="medium" id="pt_db2" topHeight="30px">
<f:facet name="center">
<af:facetRef facetName="center"/>
</f:facet>
<f:facet name="top">
<af:panelGroupLayout id="pt_pgl2" halign="end"
layout="horizontal">
<af:outputText value=" Currently Logged In: #{sessionScope.user}" id="pt_ot1"
noWrap="true"
visible="#{not empty sessionScope.user}"/>
<af:spacer width="10" height="10" id="pt_s17"/>
<af:commandLink text="Login?" id="pt_cl15"
visible="#{empty sessionScope.user}"/>
<af:commandLink text="Logout"
id="commandLink9"
visible="#{not empty sessionScope.user}"
action="#{Main.onLogoutButtonPressed}"/>
</af:panelGroupLayout>
</f:facet>
</af:decorativeBox>
</f:facet>
</af:panelSplitter>
</f:facet>
</af:decorativeBox>
</f:facet>
<f:facet name="bottom">
<af:panelFormLayout id="pt_pfl2" maxColumns="4" rows="1">
<f:facet name="footer">
<af:group id="pt_g1">
<af:outputFormatted value="Copyright &amp;copy; 2010 VACAR" id="pt_of1"
styleUsage="pageStamp"/>
</af:group>
</f:facet>
</af:panelFormLayout>
</f:facet>
</af:panelStretchLayout>
</af:pageTemplateDef>
</jsp:root>
Thanks
Edited by: user5108636 on Feb 8, 2011 6:51 PM

Answer 1

I want to remove the '+' and the '-' from the showDetailItem. Should I tweak the css file.
Thanks