How to create a floating layout using adf

Question

Hi ,
I am using Jdeveloper 11g to develop an application.
I am coming across problems when i am trying to build the look and feel.
Basically i want to develop as per the following link.
http://webfusion.kcmo.org/coldfusionapps/ActionCenterRequest/getstatus.cfm
I have been able to create the layout using adf layouts and components(af:panelStechlayout, af:panelgrouplayout), but the problem i am facing is that i want the entire page to scroll and have a floating layout.
But in my case, the panels are scrolling, so when i resize the browser or change the resolution, everything appears to be broken in parts.
Besides to recreate the above layout i have to include everything under the "center" facet, hence using templates is creating issues.
following is the code i am using(just the structure code), this looks preety simple but i am not able to figure this one out.
<?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"/>
  <f:view>
    <af:document title="findcase" id="d1">
      <af:form id="f1">
        <af:panelStretchLayout startWidth="100px" endWidth="100px" id="psl2">
          <f:facet name="center">
            <af:panelStretchLayout endWidth="63px" id="psl1"  topHeight="120px" bottomHeight="50px"
            inlineStyle="font: 100% Arial, Helvetica, sans-serif;background: #2A3644;font-size: 13px;margin: 0;padding: 0;text-align: center;color: #000000;"
                                   startWidth="44px">
              <f:facet name="center">
               <!-- Header -->
               <af:panelGroupLayout layout="scroll"
                                     xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
                                     id="pgl3">
                  <af:image source="http://cfdev.kcmo.org/coldfusionapps/templates/images/kcmo_banner.jpg"
                            shortDesc="header" id="i1"
                            inlineStyle="width:960px; height:77.0px;"/>
                  <af:panelGroupLayout id="pgl2" inlineStyle="height:33.0px;">
                    <af:image source="http://webfusion.kcmo.org/coldfusionapps/templates/images/home.jpg"
                              shortDesc="menu1" id="i2"/>
                    <af:image source="http://webfusion.kcmo.org/coldfusionapps/templates/images/services.jpg"
                              shortDesc="menu2" id="i3"/>
                    <af:image source="http://webfusion.kcmo.org/coldfusionapps/templates/images/residents.jpg"
                              shortDesc="menu3" id="i4"/>
                    <af:image source="http://webfusion.kcmo.org/coldfusionapps/templates/images/business.jpg"
                              shortDesc="menu4" id="i5"/>
                    <af:image source="http://webfusion.kcmo.org/coldfusionapps/templates/images/visitors2.jpg"
                              shortDesc="menu5" id="i6"/>
                    <af:image source="http://webfusion.kcmo.org/coldfusionapps/templates/images/officials2.jpg"
                              shortDesc="menu6" id="i7"/>
                    <!--af:panelGroupLayout id="pgl4"-->
                      <af:image source="http://webfusion.kcmo.org/coldfusionapps/templates/images/kcmo_banner_slice.jpg"
                                shortDesc="searcharea" id="i8"
                                inlineStyle="background-repeat:repeat; width:355px; height:35.0px;"/>
                    <!--/af:panelGroupLayout-->
                    <af:image source="http://webfusion.kcmo.org/coldfusionapps/templates/images/kcmo_banner_lower.jpg"
                              shortDesc="banner" id="i9"
                              inlineStyle="width:960px; height:7.0px;"/>
                  </af:panelGroupLayout>
                 <!-- starting the center section -->
                  <af:panelStretchLayout id="psl3" inlineStyle="width:960px; margin:auto; background-color:White;"
                                         startWidth="232px">
                    <f:facet name="center">
                     <!-- your page content goes here -->
                      <af:outputText value="outputText1" id="ot3"/>
                    </f:facet>
                   <!-- side navigation panel -->
                    <f:facet name="start">
                      <af:panelGroupLayout id="pgl1" inlineStyle="float:left; margin:5px; width:236.0px;background-color:#edf0f5;text-align: center;">
                       <af:goLink text="City Government" id="gl1"
                               destination="http://www.kcmo.org/CKCMO/Depts/CityManagersOffice/InternshipsandfellowshipswiththeCity/KansasCityGovernment/index.htm"
                               inlineStyle="font-family:Arial, Helvetica, sans-serif; font-size:10px;     color:#395F76;     font-weight:bold;"/>
                      <br/>
                        <af:goLink text="Codes and Ordinances" id="gl2"
                                   destination="http://cityclerk.kcmo.org/liveweb/common/"
                                   targetFrame="_blank"/>
                      </af:panelGroupLayout>
                    </f:facet>
                    <f:facet name="end"/>
                  </af:panelStretchLayout>
                </af:panelGroupLayout>
              </f:facet>
              <f:facet name="end">
                <af:outputText value="" id="ot2"/>
              </f:facet>
               <f:facet name="start">
            <af:outputText value="" id="ot1"/>
          </f:facet>
            </af:panelStretchLayout>
          </f:facet>
        </af:panelStretchLayout>
      </af:form>
    </af:document>
  </f:view>
</jsp:root>Any help will be highly appreciated.
Thanks in advance
Ash

Answer 1

Try creating a layout that uses a panelGroup scroll as the top container and use panelBorders inside it.
Something like this:
<?xml version='1.0' encoding='windows-1252'?>
<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=windows-1252"/>
  <f:view>
    <af:document id="d1">
      <af:form id="f1">
        <af:panelGroupLayout layout="scroll" id="pgl1">
          <af:panelBorderLayout id="pbl1">
            <f:facet name="start"/>
            <f:facet name="bottom"/>
            <f:facet name="end"/>
            <f:facet name="top">
              <af:panelGroupLayout layout="scroll"
                                   xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
                                   id="pgl3">
                <af:image source="http://cfdev.kcmo.org/coldfusionapps/templates/images/kcmo_banner.jpg"
                          shortDesc="header" id="i1"
                          inlineStyle="width:960px; height:77.0px;"/>
                <af:panelGroupLayout id="pgl2" inlineStyle="height:33.0px;">
                  <af:image source="http://webfusion.kcmo.org/coldfusionapps/templates/images/home.jpg"
                            shortDesc="menu1" id="i2"/>
                  <af:image source="http://webfusion.kcmo.org/coldfusionapps/templates/images/services.jpg"
                            shortDesc="menu2" id="i3"/>
                  <af:image source="http://webfusion.kcmo.org/coldfusionapps/templates/images/residents.jpg"
                            shortDesc="menu3" id="i4"/>
                  <af:image source="http://webfusion.kcmo.org/coldfusionapps/templates/images/business.jpg"
                            shortDesc="menu4" id="i5"/>
                  <af:image source="http://webfusion.kcmo.org/coldfusionapps/templates/images/visitors2.jpg"
                            shortDesc="menu5" id="i6"/>
                  <af:image source="http://webfusion.kcmo.org/coldfusionapps/templates/images/officials2.jpg"
                            shortDesc="menu6" id="i7"/>
                  <!--af:panelGroupLayout id="pgl4"-->
                  <af:image source="http://webfusion.kcmo.org/coldfusionapps/templates/images/kcmo_banner_slice.jpg"
                            shortDesc="searcharea" id="i8"
                            inlineStyle="background-repeat:repeat; width:355px; height:35.0px;"/>
                  <!--/af:panelGroupLayout-->
                  <af:image source="http://webfusion.kcmo.org/coldfusionapps/templates/images/kcmo_banner_lower.jpg"
                            shortDesc="banner" id="i9"
                            inlineStyle="width:960px; height:7.0px;"/>
                </af:panelGroupLayout>
              </af:panelGroupLayout>
            </f:facet>
            <af:panelBorderLayout id="pbl2">
              <f:facet name="start">
                <af:panelGroupLayout id="pgl4" layout="scroll">
                  <af:commandLink text="menu1" id="cl1"/>
                  <af:commandLink text="menu2" id="cl2"/>
                </af:panelGroupLayout>
              </f:facet>
              <f:facet name="bottom"/>
              <f:facet name="end"/>
              <f:facet name="top"/>
              <af:panelFormLayout id="pfl1">
                <f:facet name="footer"/>
                <af:inputText label="Label 2" id="it2"/>
                <af:inputText label="Label 1" id="it1"/>
              </af:panelFormLayout>
            </af:panelBorderLayout>
          </af:panelBorderLayout>
        </af:panelGroupLayout>
      </af:form>
    </af:document>
  </f:view>
</jsp:root>