ADF Panelformlayout issues

0
votes

I am developing a screen using ADF (Jdeveloper). As shown in the image the red dotted line must be aligned well, meaning the start of all the fields should be in the same line. Please let me know how can I attain this using Oracle ADF.

  1. Image Screenshot

I need my screen to look like this:

  1. Image Screenshot

I am currently using panelHeader for the heading and panelGroupLayout for the horizontal and vertical alignment and PanelFormLayout for the aligned form blocks. I also tried using PanelGridLayout which also did not give me desired results.

<af:panelHeader text="#{TESTviewcontrollerBundle.REPLENISHMENT}" id="ph10"
                              size="3" styleClass="AFStretchWidth">
                <f:facet name="context"/>
                <f:facet name="menuBar"/>
                <f:facet name="toolbar"/>
                <f:facet name="legend"/>
                <f:facet name="info"/>
                <af:panelGroupLayout id="pgl20" layout="vertical">
                  <af:panelGroupLayout id="pgl18" layout="horizontal"
                                       styleClass="AFStretchWidth"
                                       valign="top">
                    <af:panelFormLayout id="pfl5" maxColumns="1"
                                        inlineStyle="border-color:Lime; border-width:3px; border-style:dotted;"
                                        styleClass="AFStretchWidth">
                      <f:facet name="footer"/>
                      <af:selectBooleanCheckbox value="#{bindings.DefaultSizeProfile.inputValue}"
                                                shortDesc="#{bindings.DefaultSizeProfile.hints.tooltip}"
                                                id="sbc1"
                                                label="#{bindings.DefaultSizeProfile.label}"/>
                      <af:selectBooleanCheckbox value="#{bindings.ApplyProfPresStock.inputValue}"
                                                shortDesc="#{bindings.ApplyProfPresStock.hints.tooltip}"
                                                id="sbc2"
                                                label="#{bindings.ApplyProfPresStock.label}"/>
                      <af:selectBooleanCheckbox value="#{bindings.WhCrossLinkInd.inputValue}"
                                                shortDesc="#{bindings.WhCrossLinkInd.hints.tooltip}"
                                                id="sbc3"
                                                label="#{bindings.WhCrossLinkInd.label}"/>
                      <af:selectBooleanCheckbox value="#{bindings.LocActivityInd.inputValue}"
                                                shortDesc="#{bindings.LocActivityInd.hints.tooltip}"
                                                id="sbc4"
                                                label="#{bindings.LocActivityInd.label}"/>
                      <af:selectBooleanCheckbox value="#{bindings.LocDlvryInd.inputValue}"
                                                shortDesc="#{bindings.LocDlvryInd.hints.tooltip}"
                                                id="sbc5"
                                                label="#{bindings.LocDlvryInd.label}"/>
                      <af:selectBooleanCheckbox value="#{bindings.RejectStoreOrdInd.inputValue}"
                                                shortDesc="#{bindings.RejectStoreOrdInd.hints.tooltip}"
                                                id="sbc6"
                                                label="#{bindings.RejectStoreOrdInd.label}"/>
                    </af:panelFormLayout>
                    <af:panelFormLayout id="pfl7" maxColumns="1"
                                        inlineStyle="border-color:Gray; border-width:3px; border-style:groove;"
                                        styleClass="AFStretchWidth">
                      <f:facet name="footer"/>
                      <af:selectOneChoice value="#{bindings.DistributionRule.inputValue}"
                                          label="#{bindings.DistributionRule.label}"
                                          required="#{bindings.DistributionRule.hints.mandatory}"
                                          shortDesc="#{bindings.DistributionRule.hints.tooltip}"
                                          id="soc15">
                        <f:selectItems value="#{bindings.DistributionRule.items}"
                                       id="si15"/>
                      </af:selectOneChoice>
                      <af:selectOneChoice value="#{bindings.StorageType.inputValue}"
                                          label="#{bindings.StorageType.label}"
                                          required="#{bindings.StorageType.hints.mandatory}"
                                          shortDesc="#{bindings.StorageType.hints.tooltip}"
                                          id="soc16">
                        <f:selectItems value="#{bindings.StorageType.items}"
                                       id="si16"/>
                      </af:selectOneChoice>
                      <af:inputText value="#{bindings.ReplOrderDays.inputValue}"
                                    label="#{bindings.ReplOrderDays.hints.label}"
                                    required="#{bindings.ReplOrderDays.hints.mandatory}"
                                    columns="#{bindings.ReplOrderDays.hints.displayWidth}"
                                    maximumLength="#{bindings.ReplOrderDays.hints.precision}"
                                    shortDesc="#{bindings.ReplOrderDays.hints.tooltip}"
                                    id="it1">
                        <f:validator binding="#{bindings.ReplOrderDays.validator}"/>
                      </af:inputText>
                      <af:inputText value="#{bindings.OrdWorksheetCleanUpDelay.inputValue}"
                                    label="#{bindings.OrdWorksheetCleanUpDelay.hints.label}"
                                    required="#{bindings.OrdWorksheetCleanUpDelay.hints.mandatory}"
                                    columns="#{bindings.OrdWorksheetCleanUpDelay.hints.displayWidth}"
                                    maximumLength="#{bindings.OrdWorksheetCleanUpDelay.hints.precision}"
                                    shortDesc="#{bindings.OrdWorksheetCleanUpDelay.hints.tooltip}"
                                    id="it2">
                        <f:validator binding="#{bindings.OrdWorksheetCleanUpDelay.validator}"/>
                      </af:inputText>
                      <af:inputText value="#{bindings.WfOrderLeadDays.inputValue}"
                                    label="#{bindings.WfOrderLeadDays.hints.label}"
                                    required="#{bindings.WfOrderLeadDays.hints.mandatory}"
                                    columns="#{bindings.WfOrderLeadDays.hints.displayWidth}"
                                    maximumLength="#{bindings.WfOrderLeadDays.hints.precision}"
                                    shortDesc="#{bindings.WfOrderLeadDays.hints.tooltip}"
                                    id="it3">
                        <f:validator binding="#{bindings.WfOrderLeadDays.validator}"/>
                      </af:inputText>
                      <af:inputText value="#{bindings.LookAheadDays.inputValue}"
                                    label="#{bindings.LookAheadDays.hints.label}"
                                    required="#{bindings.LookAheadDays.hints.mandatory}"
                                    columns="#{bindings.LookAheadDays.hints.displayWidth}"
                                    maximumLength="#{bindings.LookAheadDays.hints.precision}"
                                    shortDesc="#{bindings.LookAheadDays.hints.tooltip}"
                                    id="it4">
                        <f:validator binding="#{bindings.LookAheadDays.validator}"/>
                      </af:inputText>
                      <af:panelLabelAndMessage label="#{bindings.CostMoney.hints.label}"
                                               id="plam13">
                        <af:panelGroupLayout id="pgl22" layout="horizontal">
                          <af:inputText value="#{bindings.CostMoney.inputValue}"
                                        required="#{bindings.CostMoney.hints.mandatory}"
                                        columns="#{bindings.CostMoney.hints.displayWidth}"
                                        maximumLength="#{bindings.CostMoney.hints.precision}"
                                        shortDesc="#{bindings.CostMoney.hints.tooltip}"
                                        id="it5" simple="true">
                            <f:validator binding="#{bindings.CostMoney.validator}"/>
                          </af:inputText>
                          <af:spacer width="5" height="10" id="s8"/>
                          <af:outputText id="ot12"
                                         value="#{TESTviewcontrollerBundle.PERCENT}"
                                         styleClass="RetailInputOutputFormFieldText"/>
                        </af:panelGroupLayout>
                      </af:panelLabelAndMessage>
                      <af:panelLabelAndMessage id="plam14"
                                               label="#{bindings.TargetRoi.hints.label}">
                        <af:panelGroupLayout id="pgl26" layout="horizontal">
                          <af:inputText value="#{bindings.TargetRoi.inputValue}"
                                        required="#{bindings.TargetRoi.hints.mandatory}"
                                        columns="#{bindings.TargetRoi.hints.displayWidth}"
                                        maximumLength="#{bindings.TargetRoi.hints.precision}"
                                        shortDesc="#{bindings.TargetRoi.hints.tooltip}"
                                        id="it6" simple="true">
                            <f:validator binding="#{bindings.TargetRoi.validator}"/>
                          </af:inputText>
                          <af:spacer width="5" height="10" id="s9"/>
                          <af:outputText value="#{TESTviewcontrollerBundle.PERCENT}"
                                         id="ot13"
                                         styleClass="RetailInputOutputFormFieldText"/>
                        </af:panelGroupLayout>
                      </af:panelLabelAndMessage>
                      <af:inputText value="#{bindings.MaxWeeksSupply.inputValue}"
                                    label="#{bindings.MaxWeeksSupply.hints.label}"
                                    required="#{bindings.MaxWeeksSupply.hints.mandatory}"
                                    columns="#{bindings.MaxWeeksSupply.hints.displayWidth}"
                                    maximumLength="#{bindings.MaxWeeksSupply.hints.precision}"
                                    shortDesc="#{bindings.MaxWeeksSupply.hints.tooltip}"
                                    id="it7">
                        <f:validator binding="#{bindings.MaxWeeksSupply.validator}"/>
                      </af:inputText>
                      <af:inputText value="#{bindings.MaxScalingIterations.inputValue}"
                                    label="#{bindings.MaxScalingIterations.hints.label}"
                                    required="#{bindings.MaxScalingIterations.hints.mandatory}"
                                    columns="#{bindings.MaxScalingIterations.hints.displayWidth}"
                                    maximumLength="#{bindings.MaxScalingIterations.hints.precision}"
                                    shortDesc="#{bindings.MaxScalingIterations.hints.tooltip}"
                                    id="it8">
                        <f:validator binding="#{bindings.MaxScalingIterations.validator}"/>
                      </af:inputText>
                    </af:panelFormLayout>
                  </af:panelGroupLayout>
                  <af:panelGroupLayout id="pgl19" layout="horizontal"
                                       valign="top">
                    <af:panelHeader text="#{TESTviewcontrollerBundle.WAREHOUSE_STORAGE}"
                                    id="ph1" size="3"
                                    inlineStyle="border-color:Black; border-style:solid; border-width:2.0px;"
                                    styleClass="AFStretchWidth">
                      <f:facet name="context"/>
                      <f:facet name="menuBar"/>
                      <f:facet name="toolbar"/>
                      <f:facet name="legend"/>
                      <f:facet name="info"/>
                      <af:panelFormLayout id="pfl9"
                                          styleClass="AFStretchWidth"
                                          inlineStyle="border-color:Gray; border-style:dotted; border-width:2px;">
                        <f:facet name="footer"/>
                        <af:selectOneChoice value="#{bindings.CostWhStorageMeas.inputValue}"
                                            label="#{bindings.CostWhStorageMeas.label}"
                                            required="#{bindings.CostWhStorageMeas.hints.mandatory}"
                                            shortDesc="#{bindings.CostWhStorageMeas.hints.tooltip}"
                                            id="soc17" autoSubmit="true">
                          <f:selectItems value="#{bindings.CostWhStorageMeas.items}"
                                         id="si17"/>
                        </af:selectOneChoice>
                        <af:panelLabelAndMessage label="#{bindings.CostWhStorageUom.hints.label}"
                                                 id="plam10">
                          <af:panelGroupLayout id="pgl16"
                                               layout="horizontal">
                            <af:inputComboboxListOfValues id="inputComboboxListOfValues1"
                                                          popupTitle="Search and Select: #{bindings.CostWhStorageUom.hints.label}"
                                                          value="#{bindings.CostWhStorageUom.inputValue}"
                                                          model="#{bindings.CostWhStorageUom.listOfValuesModel}"
                                                          required="#{bindings.CostWhStorageUom.hints.mandatory}"
                                                          columns="#{bindings.CostWhStorageUom.hints.displayWidth}"
                                                          shortDesc="#{bindings.CostWhStorageUom.hints.tooltip}"
                                                          simple="true"
                                                          partialTriggers="soc17"
                                                          autoSubmit="true">
                              <f:validator binding="#{bindings.CostWhStorageUom.validator}"/>
                            </af:inputComboboxListOfValues>
                            <af:outputText value="#{bindings.CostWhStorageUomDesc.inputValue}"
                                           id="ot9"
                                           partialTriggers="soc17 inputComboboxListOfValues1"
                                           styleClass="RetailInputOutputFormFieldText"/>
                          </af:panelGroupLayout>
                        </af:panelLabelAndMessage>
                        <af:panelLabelAndMessage label="#{bindings.CostWhStorage.hints.label}"
                                                 id="plam18">
                          <af:panelGroupLayout id="pgl27"
                                               layout="horizontal">
                            <af:inputText value="#{bindings.CostWhStorage.inputValue}"
                                          required="#{bindings.CostWhStorage.hints.mandatory}"
                                          columns="#{bindings.CostWhStorage.hints.displayWidth}"
                                          maximumLength="#{bindings.CostWhStorage.hints.precision}"
                                          shortDesc="#{bindings.CostWhStorage.hints.tooltip}"
                                          id="it9" partialTriggers="soc17"
                                          simple="true">
                              <f:validator binding="#{bindings.CostWhStorage.validator}"/>
                            </af:inputText>
                            <af:spacer width="5" height="10" id="s10"/>
                            <af:outputText value="#{bindings.DiCurrencyCode1.inputValue}"
                                           id="ot17"
                                           styleClass="RetailInputOutputFormFieldText"/>
                          </af:panelGroupLayout>
                        </af:panelLabelAndMessage>
                      </af:panelFormLayout>
                    </af:panelHeader>
                    <af:panelHeader text="#{TESTviewcontrollerBundle.OUTSIDE_STORAGE}"
                                    id="ph2" size="3"
                                    inlineStyle="border-color:Lime; border-style:solid; border-width:2.0px;"
                                    styleClass="AFStretchWidth">
                      <f:facet name="context"/>
                      <f:facet name="menuBar"/>
                      <f:facet name="toolbar"/>
                      <f:facet name="legend"/>
                      <f:facet name="info"/>
                      <af:panelFormLayout id="pfl10"
                                          styleClass="AFStretchWidth"
                                          inlineStyle="border-color:Gray; border-style:dotted; border-width:2px;">
                        <f:facet name="footer"/>
                        <af:selectOneChoice value="#{bindings.CostOutStorageMeas.inputValue}"
                                            label="#{bindings.CostOutStorageMeas.label}"
                                            required="#{bindings.CostOutStorageMeas.hints.mandatory}"
                                            shortDesc="#{bindings.CostOutStorageMeas.hints.tooltip}"
                                            id="soc18" autoSubmit="true">
                          <f:selectItems value="#{bindings.CostOutStorageMeas.items}"
                                         id="si18"/>
                        </af:selectOneChoice>
                        <af:panelLabelAndMessage label="#{bindings.CostOutStorageUom.hints.label}"
                                                 id="plam11">
                          <af:panelGroupLayout id="pgl17"
                                               layout="horizontal">
                            <af:inputComboboxListOfValues id="inputComboboxListOfValues10"
                                                          popupTitle="Search and Select: #{bindings.CostOutStorageUom.hints.label}"
                                                          value="#{bindings.CostOutStorageUom.inputValue}"
                                                          model="#{bindings.CostOutStorageUom.listOfValuesModel}"
                                                          required="#{bindings.CostOutStorageUom.hints.mandatory}"
                                                          columns="#{bindings.CostOutStorageUom.hints.displayWidth}"
                                                          shortDesc="#{bindings.CostOutStorageUom.hints.tooltip}"
                                                          simple="true"
                                                          partialTriggers="soc18"
                                                          autoSubmit="true">
                              <f:validator binding="#{bindings.CostOutStorageUom.validator}"/>
                            </af:inputComboboxListOfValues>
                            <af:outputText value="#{bindings.CostOutStorageUomDesc.inputValue}"
                                           id="ot10"
                                           partialTriggers="soc18 inputComboboxListOfValues10"/>
                          </af:panelGroupLayout>
                        </af:panelLabelAndMessage>
                        <af:panelLabelAndMessage label="#{bindings.CostOutStorage.hints.label}"
                                                 id="plam19">
                          <af:panelGroupLayout id="pgl28"
                                               layout="horizontal">
                            <af:inputText value="#{bindings.CostOutStorage.inputValue}"
                                          required="#{bindings.CostOutStorage.hints.mandatory}"
                                          columns="#{bindings.CostOutStorage.hints.displayWidth}"
                                          maximumLength="#{bindings.CostOutStorage.hints.precision}"
                                          shortDesc="#{bindings.CostOutStorage.hints.tooltip}"
                                          id="it26" partialTriggers="soc18"
                                          simple="true">
                              <f:validator binding="#{bindings.CostOutStorage.validator}"/>
                            </af:inputText>
                            <af:spacer width="5" height="10" id="s11"/>
                            <af:outputText value="#{bindings.DiCurrencyCode2.inputValue}"
                                           id="ot18"
                                           styleClass="RetailInputOutputFormFieldText"/>
                          </af:panelGroupLayout>
                        </af:panelLabelAndMessage>
                      </af:panelFormLayout>
                    </af:panelHeader>
                  </af:panelGroupLayout>
                </af:panelGroupLayout>
              </af:panelHeader>
3
oracle-adfjdeveloper

3 Answers

0
votes

I am pretty sure that you can achieve the layout that you desire by using af:panelSplitter

Here is a snippet with the code that should help with your layout:

<af:panelHeader text="#{TESTviewcontrollerBundle.REPLENISHMENT}" id="ph10"
                          size="3" styleClass="AFStretchWidth">
    <af:panelSplitter id="ps1" orientation="vertical" styleClass="AFStretchWidth" inlineStyle="height:543px;"
                      splitterPosition="347">
      <f:facet name="first">
        <af:panelSplitter id="ps2" styleClass="AFStretchWidth" splitterPosition="624">
          <f:facet name="first">
            <af:panelHeader text="panelHeader 2" id="ph4">
              <af:panelFormLayout id="pfl5" maxColumns="1"
                                  inlineStyle="border-color:Lime; border-width:3px; border-style:dotted;"
                                  styleClass="AFStretchWidth">
                <af:selectBooleanCheckbox value="#{bindings.DefaultSizeProfile.inputValue}"
                                          shortDesc="#{bindings.DefaultSizeProfile.hints.tooltip}" id="sbc1"
                                          label="#{bindings.DefaultSizeProfile.label}"/>
              </af:panelFormLayout>
            </af:panelHeader>
          </f:facet>
          <f:facet name="second">
            <af:panelHeader text="panelHeader 1" id="ph3">
              <af:panelFormLayout id="pfl7" maxColumns="1"
                                  inlineStyle="border-color:Gray; border-width:3px; border-style:groove;"
                                  styleClass="AFStretchWidth">
                <af:selectOneChoice value="#{bindings.DistributionRule.inputValue}"
                                    label="#{bindings.DistributionRule.label}"
                                    required="#{bindings.DistributionRule.hints.mandatory}"
                                    shortDesc="#{bindings.DistributionRule.hints.tooltip}" id="soc15">
                  <f:selectItems value="#{bindings.DistributionRule.items}" id="si15"/>
                </af:selectOneChoice>
              </af:panelFormLayout>
            </af:panelHeader>
          </f:facet>
        </af:panelSplitter>
      </f:facet>
      <f:facet name="second">
        <af:panelSplitter id="ps3" styleClass="AFStretchWidth" splitterPosition="624">
          <f:facet name="first">
            <af:panelHeader text="#{TESTviewcontrollerBundle.WAREHOUSE_STORAGE}" id="ph1" size="3"
                            inlineStyle="border-color:Black; border-style:solid; border-width:2.0px;"
                            styleClass="AFStretchWidth">
              <af:panelFormLayout id="pfl9" styleClass="AFStretchWidth"
                                  inlineStyle="border-color:Gray; border-style:dotted; border-width:2px;">
                <af:selectOneChoice value="#{bindings.CostWhStorageMeas.inputValue}"
                                    label="#{bindings.CostWhStorageMeas.label}"
                                    required="#{bindings.CostWhStorageMeas.hints.mandatory}"
                                    shortDesc="#{bindings.CostWhStorageMeas.hints.tooltip}" id="soc17"
                                    autoSubmit="true">
                  <f:selectItems value="#{bindings.CostWhStorageMeas.items}" id="si17"/>
                </af:selectOneChoice>
              </af:panelFormLayout>
            </af:panelHeader>
          </f:facet>
          <f:facet name="second">
            <af:panelHeader text="#{TESTviewcontrollerBundle.OUTSIDE_STORAGE}" id="ph2" size="3"
                            inlineStyle="border-color:Lime; border-style:solid; border-width:2.0px;"
                            styleClass="AFStretchWidth">
              <af:panelFormLayout id="pfl10" styleClass="AFStretchWidth"
                                  inlineStyle="border-color:Gray; border-style:dotted; border-width:2px;">
                <af:selectOneChoice value="#{bindings.CostOutStorageMeas.inputValue}"
                                    label="#{bindings.CostOutStorageMeas.label}"
                                    required="#{bindings.CostOutStorageMeas.hints.mandatory}"
                                    shortDesc="#{bindings.CostOutStorageMeas.hints.tooltip}" id="soc18"
                                    autoSubmit="true">
                  <f:selectItems value="#{bindings.CostOutStorageMeas.items}" id="si18"/>
                </af:selectOneChoice>
              </af:panelFormLayout>
            </af:panelHeader>
          </f:facet>
        </af:panelSplitter>
      </f:facet>
    </af:panelSplitter>
  </af:panelHeader>

Have a look at where all of the <af:panelSplitter> blocks are.

Hope this helps!

0
votes

Use panelFormLayouts and set the width for labels to be the same. This is shown in this demo - https://blogs.oracle.com/shay/entry/controlling_tab_order_in_an_ad

-1
votes

add --> label style="width:100px" on every component of your project. set "px" width according to your requirement to make all of them appear in the design you want.