Wednesday, October 21, 2015

How to create a HTML like table using ADF Faces components

Supposing  your requirement demands to show a table just like an HTML table, the best would be use the panelGridLayout
 something like:

marginStart="0px" is variable which will give no gaps between the cells

<af:toolbar id="dc_t1"
                  inlineStyle="border-color:ActiveCaption; border-style:solid; border-width:1.0px;">
        <af:panelGridLayout id="pov_pgl1">
          <af:gridRow marginTop="0px" height="auto" id="gr1">
            <af:gridCell marginStart="0px" width="auto" id="gc3" halign="center"
                         valign="middle"
                         inlineStyle="border: 1px ActiveCaption solid;">
              <af:panelGroupLayout id="pov_pgl2" layout="vertical"
                                   inlineStyle="padding:5.0px;">
                <af:panelGroupLayout id="dc_pgl4" layout="horizontal" >
                  <af:outputText value="Row1" id="ot1"
                                 inlineStyle="font-size:smaller;"/>
                </af:panelGroupLayout>
                <af:panelGroupLayout id="dc_pgl10"
                                     layout="horizontal">
                  <af:outputText id="dc_ot1" />
                </af:panelGroupLayout>
                <af:panelGroupLayout id="dc_pgl5" layout="horizontal">
                  <af:outputText value="Row2" id="ot3"/>
                </af:panelGroupLayout>
              </af:panelGroupLayout>
            </af:gridCell>
            <af:gridCell marginStart="0px" width="auto" id="gc2"
                         inlineStyle="border: 1px ActiveCaption solid;"
                         halign="center" valign="middle">
              <af:panelGroupLayout id="pov_pgl3" layout="vertical"
                                   inlineStyle="padding:5.0px;">
                <af:panelGroupLayout id="dc_pgl6" layout="horizontal" rendered="true">
                  <af:commandLink text="Row1" id="dc_cl1"
                                  actionListener="#{backingBeanScope.POVBarComponentBean.openMemSelector}"
                                  inlineStyle="font-size:smaller;"/>
                </af:panelGroupLayout>
                <af:panelGroupLayout id="dc_pgl9" layout="horizontal">
                  <af:outputText id="dc_ot2" />
                </af:panelGroupLayout>
                <af:panelGroupLayout id="dc_pgl7" layout="horizontal">
                  <af:commandLink id="ot4" text="Row2"
                                  actionListener="#{backingBeanScope.POVBarComponentBean.openMemSelector}"/>
                </af:panelGroupLayout>
              </af:panelGroupLayout>
            </af:gridCell>
            <af:gridCell marginStart="0px" marginEnd="5px" width="auto" id="gc5"
                         inlineStyle="border: 1px ActiveCaption solid;"/>
          </af:gridRow>
        </af:panelGridLayout>
      </af:toolbar>