5 Developing Layouts

Create or modify page layouts and publish them to WebCenter Portal as a shared or portal-specific asset.

Topics:

5.1 About Developing Layouts

When you create a new page, you select a page style for that page. Every page style includes a default layout, which is inherited by the new page. WebCenter Portal provides several built-in layouts that you can select on the Shared Assets or Assets pages.

If you want to change the layout for a page or page style, you can select a new existing layout for any page, or you can create a custom layout, and publish it as a shared or portal-specific asset. You can do this by either making a copy of a built-in layout and editing it in WebCenter Portal, or you can create a WebCenter Portal asset application, copy and paste the built-in layout and modify it in JDeveloper.

This chapter describes how to create or modify page layouts in a WebCenter Portal asset application, and publish them to WebCenter Portal as a shared or portal-specific asset. For information about modifying layouts in WebCenter Portal, see Working with Layouts in Oracle Fusion Middleware Building Portals with Oracle WebCenter Portal.

5.2 Creating a Layout

This section describes how to create a WebCenter Portal asset application for a page layout, and the artifacts that are created along with it.

This section includes the following topics:

5.2.1 How to Create a Layout

This section describes how to create a WebCenter Portal Asset application for a new layout. Once the asset application with its associated artifacts has been created, you can continue by modifying the layout as described in Editing a Layout.

Note:

Oracle recommends that you store asset-related artifacts, such as images and icons, on your content server and that you create a folder structure on your content server specifically for asset artifacts so that content is easy to identify and move, if required.

To create a custom layout:

Create an asset application for the asset specifying Layout as the Asset Type.

For more information about creating WebCenter Portal asset applications, see Creating a WebCenter Portal Asset Application. For information about the artifacts that are created when you create an asset application for a layout, see What You May Need to Know About Layout Artifacts.
In the Application Navigator, right-click the newly created layout's CSS and JSPX files, and choose Open. If you are using an existing WebCenter Portal layout as a starting point, copy and paste the source into the corresponding file in JDeveloper (for more information about using an existing asset as a starting point, see Copying an Asset in Oracle Fusion Middleware Building Portals with Oracle WebCenter Portal).
Continue by adding or modifying the layout as described in Editing a Layout.

5.2.2 What You May Need to Know About Layout Artifacts

Creating a layout asset application produces a default layout, with the following artifacts:

A CSS file (for example, Layout1.css)
A JSF file (for example, Layout1.jspx)

Both of these files appear in the Navigation bar as shown in Figure 5-1.

Figure 5-1 Layout Asset Application Artifacts

Description of "Figure 5-1 Layout Asset Application Artifacts"

The following examples show the JSPX file and corresponding CSS file for the built-in three column (Three Columns) layout from the Shared Assets page in WebCenter Portal.

Example Three-Column JSPX File

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
   <jsp:directive.page contentType="text/html;charset=UTF-8"/>
   <af:componentDef var="attrs" componentVar="comp">
      <af:xmlContent>
         <component xmlns="http://xmlns.oracle.com/adf/faces/rich/component">
            <display-name>ThreeColumnFlow</display-name>
            <facet>
               <facet-name>area1</facet-name>
            </facet>
            <facet>
               <facet-name>area2</facet-name>
            </facet>
            <facet>
               <facet-name>area3</facet-name>
            </facet>
         </component>
      </af:xmlContent>
      <af:group id="threeColumnFlow">
         <af:resource type="css" source="${pageDocBean.layoutCssPath}"/>
         <div xmlns="http://www.w3.org/1999/xhtml" class="area1">
            <af:facetRef facetName="area1"/>
         </div>
         <div xmlns="http://www.w3.org/1999/xhtml" class="area2">
            <af:facetRef facetName="area2"/>
         </div>
         <div xmlns="http://www.w3.org/1999/xhtml" class="area3">
            <af:facetRef facetName="area3"/>
         </div>
      </af:group>
   </af:componentDef>
</jsp:root>

Example Three-Column Layout CSS File

/* one column */
.area1 {
}
 
.area2 {
}
 
.area3 {
}
 
 
/* two column with area3 under area2 */
@media only screen and (min-width : 481px) { 
  .area1 {
    position:absolute;
    left: 0px;        
    width:50%;
  }
  .area2 {
    position:relative;
    left:50%;         
    width:50%;
  }
  .area3 { 
    position: relative;
    left: 50%;        
    width:50%;
  }
}
 
/* three column */
@media only screen and (min-width: 769px) {
  .area1 {
    position: static;
    left: auto;
    float:left;
    width:33%;
  }
 
  .area2 {
    position: static;
    left: auto;
    float:left;
    width:34%;
  }
 
  .area3 {
    position: static;
    left: auto;
    float:left;
    width:33%;
  }
}

5.3 Editing a Layout

After creating the asset application for the layout, as described in Creating a Layout, continue by modifying the CSS and JSPX files.

Note:

To edit a layout:

In the Application Navigator, right-click the layout's CSS and JSPX files and choose Open.
If you are using an existing WebCenter Portal layout (that is, other than the one created by default when you create the asset application) as a starting point, copy and paste the source for the CSS and JSPX files into the corresponding file in JDeveloper (see Copying an Asset in Oracle Fusion Middleware Building Portals with Oracle WebCenter Portal).
In the source code for the layout, make the appropriate changes. .
Save the CSS and JSPX files.
Publish and test the layout as shown in Publishing a Layout.

5.4 Publishing a Layout

After creating a WebCenter Portal asset application and making the changes you want to the layout, the next step is to publish it and test it in WebCenter Portal. For instructions on how to publish a layout to WebCenter Portal as a shared or portal-specific asset, see Publishing WebCenter Portal Assets.