### Designing a Portal

A portal provides a user interface for Web-based applications. It is a single point of access to enterprise data and applications, presenting a unified and personalized view of that information to employees, customers, and business partners.

WebLogic Workshop makes it easy to create a portal: click the target folder and choose File —> New —> Portal. The Portal Designer opens and displays a portal with a default header, body, and footer.

The Portal Designer is a graphic tool that enables you to design portals such as the Employee portal shown in the following figure.

Portal Designer

The following table describes the portal design tools shown in the previous figure.

Tools for Designing Portals

Callout # | Use this tool... | For these tasks...
--- | --- | ---
1 | Application Window | Create, view, and edit portal files in your portal application projects. The names of portal files end in .portal. The Portlet Designer stores the portal as an XML file. You can view the portal file in XML format within WebLogic Workshop by right-clicking the portal file and selecting Open as XML from the drop-down menu when the Open as XML portal application property is enabled. To enable the Open as XML portal application property: Choose Tools —> Application Properties to open the Application Properties window. Select the Portal folder in the left-hand pane. Select the Is the Open as XML Option available? Portal option by clicking its checkbox. Select OK to apply the changes and close the Application Properties window.
2 | Design View | Design your portal in this area.
3 | Palette Window | Add books and pages to the portal by dragging components from the Palette window and dropping them onto the Design View canvas.
4 | Data Palette Window | Add portlets to the portal by dragging them from the Data Palette window and dropping them onto the Design View canvas. You can use the sample portlets provided by WebLogic Portal, or you can create your own, as described later in Designing a Portlet.
5 | Property Editor Window | Set properties for the portal component that is currently selected, such as the portal look and feel. You can select a portal component by clicking on it in the Design View canvas or by selecting its name in the Document Structure window (described below).
6 | Document Structure Window | View the components of the portal interface in a hierarchical structure (see Figure: Document Structure Window for a Portal). You can select a portal component in the Document Structure window by clicking on it. The portal component is selected in Design View and you can edit its properties in the Property Editor window.

The following figure shows the hierarchical structure of a portal.

Hierarchical Structure of a Portal

As shown in the previous figure, the following components make up the hierarchical structure of a portal:

- Desktop—User view of portal components. The desktop component is created when you add a portal to the project.
- Book—High-level content organization and navigation for the content; provides a mechanism for nesting pages and other content. A single book is added when you create a portal. Include additional books using the Palette window.
- Menu—Scheme for navigating among books and pages. To define the menu navigation for a Book component, select a navigation scheme in the Navigation field in its Property Editor window.
- Page—Organized collection of portlets and books whose position is determined by the layout. A single page is added when you create a portal. Include additional pages using the Palette window.
- Layout—Position of the portlets and books on a page. Layouts define the placeholders (rows and columns) in which portlets can be placed. They also define whether books and portlets are placed on top of or beside one another within a placeholder. Layouts use the skeleton (described later) defined by the Desktop to render its content. To define the layout for a Page component, select a layout in the Layout Type field in its Property Editor window.
- Placeholder—Individual cells in the layout used to organize the portlets on a page. Placeholders are added based on the layout type selected.
- Portlet—Window in which you present your applications, information, and business processes. Portlets are described in detail in the next section. Add portlets using the Data Palette.
- Shell—Rendered area surrounding a portal desktop's main content area (books, pages, and portlets). The shell controls the content that appears in a desktop's header and footer regions. To configure a shell to use specific JSPs or HTML files to display content—especially personalized content—in a header or footer, select a shell in the Shell field in its Property Editor window.
- Look and Feel—Stylistic aspects of the portal. A look-and-feel definition contains the following elements:

- Skeletons—JSP files that define the physical boundaries of portal components such as header, footer, book, page, portlet, and portlet title bar.
- Skins—Collections of graphics and cascading style sheets (CSS) that control the stylistic elements of a portal, such as colors and graphics, and keep these elements separate from the portal content. Using skins, you can modify the look and feel of your portal without changing any portal components.

A portal look and feel consists of a single XML file (with a .laf extension) that points to the skeleton and skin definitions. To define the look-and-feel definition for the Desktop component, select one in the Look and Feel field in its Property Editor window.

- Theme—Subset of skins designed for books, pages, and portlets. Themes provide a way of using a different set of styles for individual desktop components. Once the look and feel is defined, to define a theme for a Book Page, or Portlet, select a theme in the Theme field in its Property Editor window.

The Document Structure window shows the relationship between specific components in the current portal file.

Document Structure Window for a Portal

Note that the Header and Footer components in the Document Structure window represent areas above and below the main body that typically include personalized content, banner graphics, legal notices, and related links.

To learn more about creating and designing portals:

- View a demo, Designing a Portal, that shows how to use the portal design tools.
- See Portal Tutorials in the WebLogic Workshop Help.
- See Building Portal Applications in the WebLogic Workshop Help.
- See WebLogic Administration Portal Online Help, available on E-docs, for information about managing portal applications.