• 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.


  • 2 comments:

    1. “The main cause for halting the on line casino project is that it 바카라사이트 has been deemed that the project is a major hindrance to acquiring investment from other nations, particularly China,” RFA quoted the supply as saying. Incheon is presently setting up a second passenger terminal with plans to to increase capability to a projected sixty two million annual passengers by 2017. These are the only methods to understand personal freedom and social justice. In addition, we are attempting not only to beat the language barrier with American workers, but in addition trying to comprise what US customers actually need within the sport. All our graphic works are management of|in cost of|in command of} the artwork director who has numerous experiences working in American firms corresponding to Disney. In addition, Korea is a homeland of high-tech cellular device manufacturers corresponding to Samsung and LG.

      ReplyDelete