Tuesday, March 26, 2013

ADF Mobile : Display Custom Springboard layout with 3 * 3 matrix

Scenario here is to display 3 * 3 matrix dynamic table in custom springboard amx page using ApplicationFeatures data control with Features data collection.

Using amx:tableLayout only we might not be able to get the required structure. We need to use amx:panelGroupLayout with inlineStyle to achieve the above scenario. Credit goes to Matt Cooper, I have extracted the idea based on one of his forum reply. Here is the code below.
<amx:tableLayout id="tl1" shortDesc="features-table" inlineStyle="width:100%;">
  <amx:rowLayout id="rl1">
 <amx:cellFormat id="cf1" shortDesc="features-column" inlineStyle="width:100%;">
   <amx:panelGroupLayout id="pgl1" layout="wrap">
  <amx:iterator var="row" value="#{bindings.features.collectionModel}" id="i1">
    <amx:panelGroupLayout id="plam2" inlineStyle="width:33%;display:inline-block;" halign="center"
        valign="middle">
   <amx:tableLayout id="tl2">
     <amx:rowLayout id="rl2">
    <amx:cellFormat id="cf2" halign="center" valign="middle">
      <amx:commandLink id="cl1" actionListener="#{bindings.gotoFeature.execute}">
     <amx:image id="i2" source="/images/#{row.name}-springboard.png"
          inlineStyle="width:36px;height:36px"/>
     <amx:setPropertyListener from="#{row.id}" to="#{pageFlowScope.FeatureId}" type="action"/>
      </amx:commandLink>
    </amx:cellFormat>
     </amx:rowLayout>
     <amx:rowLayout id="rl3">
    <amx:cellFormat id="cf3" halign="center" valign="middle">
      <amx:commandLink id="cl2" actionListener="#{bindings.gotoFeature.execute}">
     <amx:outputText value="#{row.name}" id="ot2"/>
     <amx:setPropertyListener from="#{row.id}" to="#{pageFlowScope.FeatureId}" type="action"/>
      </amx:commandLink>
    </amx:cellFormat>
     </amx:rowLayout>
   </amx:tableLayout>
   <amx:spacer id="s2" height="25"/>
    </amx:panelGroupLayout>
  </amx:iterator>
   </amx:panelGroupLayout>
 </amx:cellFormat>
  </amx:rowLayout>
</amx:tableLayout>
Notice: - In panelGroupLayout, I have set the width to 33%, since I need 3 columns per row.  Adjust the width as desired to fit the number of features Items per row based on our requirements.

Application screen looks like below when it deployed and run on Android Device/Emulator. Click on any image/link will take you to the respective feature tab.

7 comments:

  1. Nice post Deepak....
    I tried implementing the same in my application. I am getting the springboard but I am also getting the error on click of menu button " in onDeviceReady() Error: ReferenceError: adfmf is not defined

    ReplyDelete
    Replies
    1. Hi Abhinav,

      If possible can you send me your application to my email id and also the JDeveloper version.

      - Deepak

      Delete
  2. Hi Deepak,
    Thanks for your posts, They helped me a lot.
    Actually we need to flush out app(means need to stop the running app) when ever user clicks on "home button" in the middle of app running, The app should be reloaded from starting as user trying to re-open it).

    Can you please suggest me with an example, how we can do it.

    Regards,
    Nani

    ReplyDelete
  3. What if I want to extend the rows according to the width of the device screen?
    Please provide that scenario. Thanks!

    ReplyDelete
  4. Thank you for this post Deepak. Helped me create a springboard similar to this one for an iOS app.

    ReplyDelete
  5. is there any way to add a login screen before showing these features in a custom sprinboard

    ReplyDelete