Display records as tiles on page

Question

Hi to everyone, I need you help again.
I m having a datacontrol consisting of blob column consisting of images, when query result should display only images as tiles on page, facing problem of how to display them as tiles in page (ike google image search). pls share info or sample example !
Thanks.

Answer 1

yeah now im able to display image as thumbnails but i got another problem , for every thumbnail i have included a link when clicked it will display a popup, nut im unable to dispaly the data(table record as form type) in the popup dialog .
jspx code:
<af:popup id="p1" partialTriggers="cl1" contentDelivery="lazy"
rendered="true">
<af:dialog id="d2">
<af:panelLabelAndMessage label="location" id="plam1">
<af:outputText value="#{bindings.PropertyVO2.children[stat.index].PropLocation}"
id="ot3"/>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="Address" id="plam2">
<af:outputText value="#{bindings.PropertyVO2.children[stat.index].PropAddress}"
id="ot4"/>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="type" id="plam3">
<af:outputText value="#{bindings.PropertyVO2.children[stat.index].PropType.attributeValue}"
id="ot5"/>
</af:panelLabelAndMessage>
<af:panelLabelAndMessage label="Price" id="plam4">
<af:outputText value="#{bindings.PropertyVO2.children[stat.index].PropPrice}"
id="ot6"/>
</af:panelLabelAndMessage>
</af:dialog>
</af:popup>
<h:panelGrid columns="3" cellpadding="15" cellspacing="15"
style="text-align: center;" rowClasses="bottomAlign">
<af:forEach varStatus="stat" begin="0" end="19"
items="#{bindings.PropertyVO2.allRowsInRange}">
<af:panelGroupLayout layout="horizontal" halign="center" id="pgl20"
inlineStyle="padding:5.0px;">
<af:panelBox id="pb2" background="light" showHeader="never"
type="default">
<af:image clientComponent="true"
source="/imageservlet?id=#{bindings.PropertyVO2.children[stat.index].PropId}"
id="prodimage"
inlineStyle="width:320px; height:240.0px;">
<af:clientAttribute name="PropId"
value="#{bindings.PropertyVO2.children[stat.index].PropId}"/>
<af:attributeDragSource attribute="PropId"/>
</af:image>
<af:commandLink text="View Details#{bindings.PropertyVO2.children.PropId.currentRow}" id="cl1">
<af:showPopupBehavior popupId="p1"/>
</af:commandLink>
</af:panelBox>
</af:panelGroupLayout>
</af:forEach>
</h:panelGrid>
pagedef code:
<pageDefinition xmlns="http://xmlns.oracle.com/adfm/uimodel"
version="11.1.1.60.13" id="tilePageDef" Package="view.pageDefs">
<parameters/>
<executables>
<variableIterator id="variables"/>
<iterator Binds="PropertyVO2" RangeSize="25" DataControl="TestAMDataControl"
id="PropertyVO2Iterator"/>
</executables>
<bindings>
<tree IterBinding="PropertyVO2Iterator" id="PropertyVO2">
<nodeDefinition DefName="viewvo.PropertyVO" Name="PropertyVO20">
<AttrNames>
<Item Value="PropId"/>
<Item Value="PropAddress"/>
<Item Value="PropLocation"/>
<Item Value="PropType"/>
<Item Value="PropPrice"/>
</AttrNames>
</nodeDefinition>
</tree>
</bindings>
</pageDefinition>