• Layout In Liferay 7 DXP



    Layout in Liferay Lets us define the Grids into the Liferay Page, Which allows us to systematical arrange the portlet applications and contents into the page, To Create a layout in Liferay 7 DXP, I have already created a Liferay Gradle Workspace in my machine.

    Environment
    Liferay Developer Studio/ IDE 3.1.2 GA3
    Liferay 7 CE/DXP Portal Tomcat 7 GA4
    JDK 8
    MySql 5.7

    Step 1 : Create New Liferay Module Project

     


    Step 2 : Select layout-template and click next




    Step 3 : Give Component Class Name and package name and click finish

     


    A Layout Module will be created with following directory structure



    my-layout.tpl
    This is the main file in Liferay's Layout, I am going to customize this layout into my required layout as shown below.
    Lets See how we can create the Layout s shown above, below is the simple code snippet for my layout

    my-layout.tpl

    <div class="my-layout" id="main-content" role="main">
     
     <div class="portlet-layout row" style="background-color: red;">
     
      <div class="col-md-6 portlet-column portlet-column-first" id="column-1" style="background-color: pink;">
       $processor.processColumn("column-1", "portlet-column-content portlet-column-content-first")
      </div>
    
      <div class="col-md-6 portlet-column portlet-column-last" id="column-2" style="background-color: green;">
       $processor.processColumn("column-2", "portlet-column-content portlet-column-content-last")
      </div>
      
     </div>
     
     <div class="portlet-layout row" >
      
      <div class="col-md-6 portlet-column portlet-column-first" id="column-3" style="background-color: yellow;">
       $processor.processColumn("column-3", "portlet-column-content portlet-column-content-first")
      </div>
    
      <div class="col-md-6 portlet-column portlet-column-last" id="column-4" style="background-color:aqua;">
       $processor.processColumn("column-4", "portlet-column-content portlet-column-content-last")
      </div>
      
     </div>
     
    </div>
    

    Components and Classes In Layout


    portlet-layout row : This class indicates each row container in the Layout Grid System.

    $processor.processColumn : It have 2 arguments, id and Classes
    Id : It Must be an unique identifier for each column

    col-md-6 : We can use different Boostrap Grid Classes in our layout, in our case this class indicates 50% of the available parent DIV size.

    portlet-column : Its the container which holds the Portlet column.

    portlet-column-first : use this class if you have multiple columns in the layout, it indicates first column of the layout.

    portlet-column-last : use this class if you have multiple columns in the layout, it indicates Last column of the layout.

    portlet-column-only : use this class if you have only one column in the layout.

    portlet-column-content : this class is used to indicate the portlet content in the column.

    my-layout.png :  image for the layout, we can define this image indicating layout grid.

    liferay-layout-templates.xml 
    we can define the layout template file path, layout image file path, layout id, layout name and etc

    <?xml version="1.0"?>
    <!DOCTYPE layout-templates PUBLIC "-//Liferay//DTD Layout Templates 7.0.0//EN" "http://www.liferay.com/dtd/liferay-layout-templates_7_0_0.dtd">
    
    <layout-templates>
     <custom>
      <layout-template id="my-layout" name="my-layout">
       <template-path>/my-layout.tpl</template-path>
       <thumbnail-path>/my-layout.png</thumbnail-path>
      </layout-template>
     </custom>
    </layout-templates>
    

    After applying the my-layout to an empty page, The final layout outcome must look like this.

    Note : Every Column DIV must have $processor.processColumn, If you don't provide the $processor.processColumn then that DIV will not be considered as portlet container and the DIV cannot hold any portlet.

    Just to identify the rows and columns, i have used the different colors, make sure you remove them.


  • 1 comment: