# Creating Skeletons and Skeleton Themes

A portal desktop is a collection of portal components, such as books, pages, and portlets, that have a hierarchical relationship to each another. (Books contain pages, pages, contain portlets, and so on.) Since portal components are largely XML files, rendering them in a browser requires a conversion to HTML. That rendering is the function of skeletons.

Each portal component has one or more corresponding skeleton JSP files. When a portal desktop is rendered, the skeleton JSPs for each portal component (in conjunction with any related classes) perform their logic and insert the resulting HTML into the correct hierarchical locations of the HTML file.

Skeletons can also contain themes. A skeleton theme is a subset of skeleton JSPs that can be used on books, pages, and portlets to give them a different feel than the rest of the portal desktop.

Skeletons, combined with skins, make up a portal desktop's Look & Feel. When you select a Look & Feel for a portal desktop, the Look & Feel points to the skeletons and skins to use.

This topic contains the following procedures and information:

- When should you create a skeleton?
- To create a skeleton
- To create a skeleton theme
- How portal components map to skeletons

When should you create a skeleton?

When you create a Portal Web Project in a portal application, the project includes predefined skeletons you can use. In most cases you can use the predefined skeletons to suit your needs. Changing the physical appearance and behavior of a portal desktop can be accomplished largely by creating new skins and shells rather than creating new skeletons.

Create a skeleton if you need to:

- Change the default behavior of an existing skeleton without modifying the existing skeleton.
- Create rendering behavior not provided in the default skeletons. For example, you can set an "Orientation" attribute on books and portlets that determine the physical location of Navigation Menus and titlebars. The default skins do not provide logic for changing orientation, so you could create a new book.jsp or titlebar.jsp skeleton to perform the desired behavior.
- Create skeletons to support specific classifications of mobile devices (for example, Palm).

To create a skeleton

1. With your portal application open in WebLogic Workshop Platform Edition, create a copy of an existing skeleton directory. For example, right-click the <project>\framework\skeletons\default directory and choose Duplicate. When the duplicate directory appears, rename it.
   If you are creating a skeleton to support a mobile device, move the new directory to a subdirectory of the main skeleton. Give the new directory the exact name of the device's classification name in the <project>\WEB-INF\client-classifications.xml file.
2. In the new skeleton directory, open the skeleton.properties file. (If you copied the default skeleton directory, copy skeleton.properties from another skeleton into the root of your new skeleton directory and open it.)
3. In skeleton.properties, make any necessary modifications to the skeleton search order. For example:
   jsp.search.path: ., ../default
   With this entry, a skeleton file is first searched for in the current directory (.). If not found in the current directory, the ../default directory is searched. If no skeleton is found in either directory, the entire skeleton directory is searched until a skeleton is found.
4. Save skeleton.properties.
5. Modify the skeleton JSPs to perform the rendering you want. Use tags in the Portal Rendering JSP tag library. In particular, use the <render:beginRender> and <render:endRender> tags.
   For guidance on which skeleton JSPs to modify, see the following table under How Portal Components Map to Skeletons.
   Do not rename the skeleton files. The skeleton filenames are hard-coded in their respective class files. The only exception to this is if you are creating a new rendering infrastructure that uses its own backing class files and explicitly identifies the name of the skeleton you are creating.
6. Save the skeleton JSPs.
7. Make any appropriate modifications to skeleton.properties or skeleton JSPs for any device skeletons stored in subdirectories of your skeleton.
8. To use the new skeleton, reference it in a Look & Feel file. See Creating Look & Feel Files.
   Also, when working with portals in the WebLogic Workshop Portal Extensions Portal Designer, each selected portal component has a Skeleton URI property you can set in the Property Editor. This property lets you point to a specific skeleton file you want the component to use instead of the skeleton identified in the selected Look & Feel for the portal desktop.

Do not add business logic to skeletons. Skeletons are designed for physical rendering only. Add business logic to shells (headers or footers). See Creating Shells and How Do I: Personalize a Desktop Header or Footer?

To create a skeleton theme

A theme is represented by a single .theme file that is shared between skins and skeletons. For example, if you select a theme called "alert" for a portlet, the portal framework looks for skin and skeleton subdirectories called "alert." If a theme already exists that you want to simply create a skeleton for, start with step 5 of this procedure.

1. With your portal application open in WebLogic Workshop platform edition, duplicate an existing theme file in your Portal Web Project. For example, right-click <project>\framework\markup\theme\alert.theme and choose Duplicate.
   The new theme file appears with a number appended to the end of the name.
2. Rename the new theme file. Be sure to retain the .theme extension.
3. With the new theme file open, modify the following attributes in the <netuix:theme> element: name, title, description, markupName. The title attribute provides the name for selecting the theme in a drop-down menu; the markupName must be unique among the other themes.
4. Save the theme file.
5. In a skeleton directory, create a subdirectory with the same name as the theme.
6. Copy the appropriate skeleton JSPs from an existing skeleton directory into the new theme directory. You need skeleton JSPs for only the portal components you want the theme to affect. Portal components without corresponding theme skeleton JSPs will use the parent skeleton JSPs.
7. Modify the skeleton JSP files in the skeleton theme. Do not modify filenames.
8. Copy the skeleton theme directory as a subdirectory to other skeleton directories.

All available themes (identified by the .theme files) are selectable for books, pages, and portlets regardless of whether or not a skeleton contains them. If the Look & Feel selected for the desktop references a skeleton that does not use the selected theme, no theme is used.

How portal components map to skeletons

This portal component... | uses this skeleton JSP... | to:
Desktop | desktop.jsp | Insert the HTML document declarations and insert <!-- Begin Desktop --> and <!-- End Desktop --> comments.
Shell | shell.jsp | Insert the HTML document's opening and closing <html> tag and insert <!-- Begin Shell --> and <!-- End Shell --> comments.
Shell - The <netuix:head> tag in a .shell file | head.jsp | Insert the HTML document's opening and closing <head> tag and insert <!-- Begin Head --> and <!-- End Head --> comments.
Shell - The <netuix:body> tag in a .shell file | body.jsp | Insert the HTML document's opening and closing <body> tag and provide presentation logic.
Shell - The <hetuix:header> tag in a .shell file | header.jsp | Render the desktop's header region.
Shell - The <netuix:footer> tag in a .shell file | footer.jsp | Render the desktop's footer region.
Book | book.jsp | Render the book framework and styles.
Navigation Menu | singlelevelmenu.jsp | Render the Single Level Menu provided by WebLogic Portal.
Navigation Menu | multilevelmenu.jsp | Render the Multi Level Menu provided by WebLogic Portal.
Navigation Menu | submenu.jsp | Used by multilevelmenu.jsp to create a book's navigation links. Also provides rendering for nested books and pages.
Page | page.jsp | Render a page framework and styles.
Layout - The <netuix:gridLayout> tag in a .layout file | gridlayout.jsp | Render placeholders in the layout using the Grid Layout style.
Layout - The <netuix:borderLayout> tag in a .layout file | borderlayout.jsp | Render placeholders in the layout using the Border layout style.
Layout - The <netuix:flowLayout> tag in a .layout file. | flowlayout.jsp | Render placeholders in the layout using the Flow layout style.
Layout - The <netuix:placeholder> tag in the .layout file | placeholder.jsp | Render an individual placeholder in a Layout.
Portlet titlebar | titlebar.jsp | Render a portlet titlebar.
Portlet titlebar buttons for floating windows | buttonfloat.jsp | Render a button that launches separate portlet mode windows (for example, Edit and Help).
Portlet titlebar toggle buttons | togglebutton.jsp | Render a button that toggles between portlet states (for example, Minimize/Restore and Maximize/Restore).
Portlet titlebar Delete button | togglebuttondelete.jsp | Render a button that removes a portlet from a page.
Portlet | error.jsp | Display error messages in a portlet.
Portlet | webflowportlet.jsp | Rrender a Webflow portlet created in previous versions of WebLogic Portal and running in a compatibility domain.
Book, Page, and Portlet | window.jsp | Rendering the container for the content area.
Theme | theme.jsp | Render books, pages, and portlets in the themes applied to them.

There are no skeleton files for skins. Skeletons include references to skin resources to render their components with appropriate graphics, styles, and JavaScript functionality. Though themes are related to skins, themes require a skeleton because themes are inline styles that must be inserted to override skin styles.

## Samples

See Portal Samples for instructions on viewing a sample portal file.

Related Topics

How Look and Feel Determines Rendering

Creating Look & Feel Files

Creating Skins and Skin Themes

Creating Portals for Mobile Devices