X

Shay Shmeltzer's Oracle Development Tools Tips

Introducing the Masonry Layout in Oracle ADF 12.2.1

Shay Shmeltzer
Director of Product Management - Oracle

One of the focus areas for Oracle ADF 12.2.1 was simplifying the creation of responsive UIs, and one of the new components that supports this is the af:masonryLayout component. It allows you to define areas on your page that act as tiles and automatically re-arrange themselves to match the browser's window size.

This layout is very useful for dashboard type of pages where you are showing all sorts of information. 

In the video below I show you the very basic way to use this out of the box.

As mentioned in the video there are built in styleClasses in ADF for the size of masonry tiles.

They are in the format of AFMasonryTileSize1x1 with support for 1x2,1x3,2x1,2x2,3x1,3x2

The Masonry Layout can contain any component you want (not just group layout as shown in the page), as long as you give that component the right AFMasonryTileSize style. 

You can further control the sizing and coloring of the tiles using styleClasses that you define in a skin file.

For example in the video I used the following style to make sure you can actually see the panelGroupLayout tiles on the page. 

.tileStyle{
background-color:gray;
border: black;
border-width: 2px; 

The actual code in the JSF page is:

<af:masonryLayout id="ml1">
<af:panelGroupLayout id="pgl1" styleClass="AFMasonryTileSize2x1 tileStyle"/>
<af:panelGroupLayout id="pgl2" styleClass="AFMasonryTileSize2x1 tileStyle"/>
<af:panelGroupLayout id="pgl3" styleClass="AFMasonryTileSize1x1 tileStyle"/>
<af:panelGroupLayout id="pgl4" styleClass="AFMasonryTileSize3x1 tileStyle"/>
</af:masonryLayout>

Join the discussion

Comments ( 5 )
  • guest Monday, October 26, 2015

    Hi Shay,

    just saw you're using dev on Mac. I installed 12.2.1 on my mac and as soon as i want to create the integrated WLS domain as part of my first deployment, the create default domain popup opens but it's empty and nothing happens.

    any idea ?


  • Julien Schneider Monday, October 26, 2015

    Hi Shay,

    masonry component doesn't seem to work (to dynamic placement) when thery're placed in a region.

    is there something specific to make it work ?

    thanks

    J.


  • guest Wednesday, October 28, 2015

    Hi Shay,

    I am trying to implement this feature but its not working. I am using the same 12.2.1 JDev version and Mozilla 41.0.2 release. In Jdeveloper, I can see the page looks fine in design view. But don't see anything in browser. Only Oracle logo. Following is the jsf page code.

    <af:form id="f1">

    <af:pageTemplate viewId="/oracle/templates/responsiveTemplate.jspx" id="pt1">

    <f:facet name="header"/>

    <f:facet name="footer"/>

    <f:facet name="center">

    <af:masonryLayout id="ml1">

    <af:panelGroupLayout id="pgl1" styleClass="AFMasonryTileSize2x1 tileStyle"/>

    <af:panelGroupLayout id="pgl2" styleClass="AFMasonryTileSize2x1 tileStyle"/>

    <af:panelGroupLayout id="pgl3" styleClass="AFMasonryTileSize1x1 tileStyle"/>

    <af:panelGroupLayout id="pgl4" styleClass="AFMasonryTileSize3x1 tileStyle"/>

    </af:masonryLayout>

    </f:facet>

    </af:pageTemplate>

    </af:form>

    Also created the skin file as you mentioned. Can you please help to find what is the issue.

    Thanks


  • Shay Wednesday, October 28, 2015

    guest - verify which Java you used on the mac when installing JDev - should be 8 for 12.2.1 and 7 for 12.1.3


  • guest Wednesday, October 28, 2015

    guest - try putting something in the panel groups (buttons for example) to make sure they are rendering - it might be that your coloring skin is not working.


Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.