1. Create a Layout Plugin in Eclipse
2. Open
3. Add the following code to the
Explanation of the snippets
The page looks like as follows
1. Firstly create a main
Creating a Row
2.Now create rows in the main
Create a three
Each row
Creating a Column in a Row
3. Each child
Rendering portlets in the respective columns
4. Include a Velocity template directive to render each column’s portlets. User drops a different portlets in different columns so add the following function in each column of the row
It takes two areguments the first is the CSS Column ID and Second is list of CSS Classes.These classes we must pass as arguments.And also has to pass
2. Open
1_2_3.tpl under docroot3. Add the following code to the
1_2_3.tplI am going to explain the above code as snippets.If you are well aware then see the comments and get easily$processor.processColumn("column-1", "portlet-column-content portlet-column-content-only")$processor.processColumn("column-2", "portlet-column-content portlet-column-content-first")$processor.processColumn("column-3", "portlet-column-content portlet-column-content-last")$processor.processColumn("column-4", "portlet-column-content portlet-column-content-first")$processor.processColumn("column-5", "portlet-column-content ")$processor.processColumn("column-6", "portlet-column-content portlet-column-content-last")
Explanation of the snippets
Our requirement is to create a 1-2-3 Layout which means that i am going to take three rows respects to
First row contains one Column
Second row contains Two Columns
Third row contains Three Columns
First row contains one Column
Second row contains Two Columns
Third row contains Three Columns
The page looks like as follows
<div> in the 1_2_3.tpl which it specifies the whole template... ...
Must specify the values for the attributes
class,id,role for the <div> and also must specify the id="main-content" and role="main".We can give any value for classCreating a Row
2.Now create rows in the main
<div>.Each child <div> element of main <div> acts as a one row.As per our requirement we need three rows so lets create three rows by creating three <div> as a child elements of main <div> as follows......... .........
Create a three
<div> elements as like aboveEach row
<div> must specify the portlet-layout row-fluid CSS class as a class attribute value.Creating a Column in a Row
3. Each child
<div> element of row <div> acts as a one column in a row.As per our requirement we need different columns in different rows so lets take second row where i need to create three columns by creating three <div> as a child elements of row <div> as follows......... ................. ...........
Each column
portlet-column : Specifies that the respective
portlet-column-first : It represents first column of row
span[] : It represents width of the column in a row.The value should be in between 1 to 12 because it follows 12 cells grid system.
<div> has a class attribute values as portlet-column,portlet-column-first span6portlet-column : Specifies that the respective
<div> acts as a Columnportlet-column-first : It represents first column of row
span[] : It represents width of the column in a row.The value should be in between 1 to 12 because it follows 12 cells grid system.
Each column
column-3 : It specifies that the respective column is Third column.
<div> has a id attribute as well.You can identify the column as column-[number]column-3 : It specifies that the respective column is Third column.
Rendering portlets in the respective columns
4. Include a Velocity template directive to render each column’s portlets. User drops a different portlets in different columns so add the following function in each column of the row
$processor.processColumn("column-2", "portlet-column-content portlet-column-content-first")
It takes two areguments the first is the CSS Column ID and Second is list of CSS Classes.These classes we must pass as arguments.And also has to pass
portlet-column-content-[first | last | only as second argument.
No comments:
Post a Comment