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.
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.
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.
You can download the sample workspace from here. You can get more details on Configuring the custom Springboard and Navigation Bar Behavior.
Nice post Deepak....
ReplyDeleteI 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
Hi Abhinav,
DeleteIf possible can you send me your application to my email id and also the JDeveloper version.
- Deepak
Hi Deepak,
ReplyDeleteThanks 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
What if I want to extend the rows according to the width of the device screen?
ReplyDeletePlease provide that scenario. Thanks!
Thank you for this post Deepak. Helped me create a springboard similar to this one for an iOS app.
ReplyDeleteis there any way to add a login screen before showing these features in a custom sprinboard
ReplyDeleteyurtdışı kargo
ReplyDeleteresimli magnet
instagram takipçi satın al
yurtdışı kargo
sms onay
dijital kartvizit
dijital kartvizit
https://nobetci-eczane.org/
SEC0
تسليك مجاري بالاحساء cWMCwzkqIE
ReplyDelete