# Creating Layouts

Layouts provide the placeholders (table structure) for a page in which books, pages, and portlets can be placed. For example, a layout that uses three table cells provides three placeholders in which portlets can be placed on a page.

The WebLogic Workshop Portal Extensions provide the following three layout styles you can use to create your own layouts:

Grid Layout The grid layout automatically positions the number of placeholders you specify into the number of columns and rows you specify. This example sets columns="3" to position 8 placeholders. | Flow Layout The flow layout automatically positions the number of placeholders used either vertically or horizontally with no wrapping. | Border Layout The border layout lets you use up to five placeholders. You can position the placeholders with the attributes "north," "south," "east," "west," and "center."

For the purposes of creating layouts, a layout includes two files:

- An XML file with a .layout extension - The actual layout that is rendered on a page.
- An HTML file with a .html.txt extension - Used simply to simulate the layout in the WebLogic Workshop Portal Extensions Portal Designer and in the WebLogic Administration Portal.

There are also skeleton JSPs that are used to render each style of layout: gridlayout.jsp, flowlayout.jsp, and borderlayout.jsp. Since these skeleton files govern the behavior of each style, you do not have to modify the skeletons.

The following topics provide instructions on creating a layout, including specific instructions for creating each type of layout.

To create a standard layout

1. With your portal application open in WebLogic Workshop Platform Edition, duplicate an existing layout file in your Portal Web Project. For example, right-click <project>\framework\markup\layout\fourcolumn.layout and choose Duplicate.
   The new layout file appears with a number appended to the end of the name.
2. Rename the new layout file. Be sure to retain the .layout extension.
3. Duplicate an existing .html.txt file to use for the new layout. Rename it for easy association with the .layout file. Be sure to retain the .html.txt extension. Structure the HTML table in the .html.txt file so that it looks like what you expect the rendered layout to look like.
4. Inside the <netuix:markup> tag, insert opening and closing <netuix:gridLayout>, <netuix:flowLayout>, or <netuix:borderLayout> tags, depending on the type of layout you want to create. (Replace the existing opening and closing <netuix:*Layout> tag.)
5. Inside the opening <netuix:*Layout> tag, add (or modify) the following attributes:
   title - Provides the name for selecting the layout in a drop-down menu.
   description - Provides a description for the selected layout.

   Grid Layout attributes | columns - Determines the number of columns in the layout. The number of rows are determined automatically. Do not use the "rows" attribute if you use the "columns" attribute. rows - Determines the number of rows in the layout. The number of columns is determined automatically. Do not use the "columns" attribute if you use the "rows" attribute.
   Flow Layout attributes | orientation - Enter "vertical" or "horizontal" to determine the direction in which the placeholders are positioned.
   Border Layout attributes | layoutStrategy - Enter "order" or "title". If you enter "order," the placeholders are ordered according to the value you put in the <netuix:placeholder> tag (covered in the following steps). For example: <netuix:placeholder>North</netuix:placeholder> makes the placeholder the north placeholder. If you enter "title," the placeholders are ordered according to the <netuix:placeholder> "title" attribute value. For example: <netuix:placeholder title="south" ...></netuix:placeholder> makes the placeholder the south placeholder.

   For example, if you are modifying a copy of the fourcolumn.layout to create a border layout, replace the columns attribute with the layoutStrategy attribute and change its value.
   htmlLayoutUri - Provides the path (relative to the project) to the .html.txt file you created. For example, "/framework/markup/layout/yourNewLayout.html.txt".
   iconUri - For compatibility domain administration only. When administering a portal running in a compatibility domain, this provides a path (relative to the project) to an icon that graphically represents the layout. For example, "/framework/markup/layout/yourNewLayout.gif".
   markupName - The markupName must be unique among the other layouts.
6. Inside the <netuix:*Layout> tag, add opening <netuix:placeholder> and closing </netuix:placeholder> tags for each placeholder you want in the layout.
   If you are creating a border layout, use no more than five placeholders.
7. In the opening <netuix:placeholder> tag of each placeholder, add the following attributes:
   title - Enter a title for the placeholder. If you are using a border layout with the layoutStrategy attribute set to "title," enter "north," "south," "east," "west," or "center" for the title to determine which position of the placeholder in the border layout.
   description - Enter a description for the placeholder.
   flow - Optional. If you want to control the positioning of books and portlets in the placeholder, enter "true."
   usingFlow - Optional. If you set the "flow" attribute to "true," enter "vertical" or "horizontal" for this attribute value. This value determines whether books and portlets are positioned on top of each other in the placeholder (vertical) or side by side (horizontal).
   width - Optional. Set a width for the placeholder.
   markupType - Required. Enter "Placeholder".
   markupName - Required. Used as an ID for the placeholder. Each placeholder must have a unique markupName across all layouts.
8. If you are creating a border layout and the layoutStrategy attribute is set to "order," enter "North," "South," "East," "West," or "Center" as the content between the opening and closing <netuix:placeholder> tag to determine each placeholder's position in the layout. For example, <netuix:placeholder>North</netuix:placeholder> makes a placeholder the north placeholder.
9. Save the layout file.
10. Modify the layout's *.html.txt file to create an HTML table that simulates the layout of the .layout file. This file is used to display the layout in the Portal Designer.
11. To use the layout, in the Portal Designer select a page in the Document Structure window. In the Property Editor window, select the new layout in the Layout Type field. (The server must be running for the new layout to appear in the Layout Type drop-down list.)

## Samples

The WebLogic Workshop Portal Extensions have sample portals that contain layouts you can view in WebLogic Workshop Platform Edition. For instructions on viewing the sample portals, see Portal Samples. In particular, the Tutorial Portal provides sample implementations of each layout style.

Also, when you create a Portal Web Project, a predefined set of layouts is added to your project in <project>\framework\markup\layout.

Related Topics

The Portal User Interface Framework

Creating a Portal File

Adding Books and Pages to a Portal

Changing a Page Layout

Setting up Navigation

Building Portlets

Changing the Header and Footer