Portal Look and Feel
| < Day Day Up > |
| Look and feel determines how portals and their content are rendered in the browser. Look and feel consists of shells , layouts, menus , skins, and skeletons. Each of these components represents a subset of a portal, specifying behavior such as where content is displayed or what font should be used for content. ShellsThe shell is the outermost layer when rendering a portal. Shells control the content areas that exist above and below the books and pages in the portlet. The shell is commonly used to define header and footer pages. Figure 12.8 shows which areas a shell controls in Workshop. Figure 12.8. The content areas a shell renders . Shells are represented as XML files and are stored in the framework\markup\shell directory within a portal Web project. Listing 12.3 shows the headerfooter.shell file that is the default for a portal Web project. Listing 12.3. An Example of a Shell File<?xml version="1.0" encoding="UTF-8"?> <netuix:markupDefinition xmlns:netuix="http://www.bea.com/servers/netuix/xsd/controls/netuix/1.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.bea.com/servers/netuix/xsd/controls/netuix/ 1.0.0 markup-netuix-1_0_0.xsd"> <netuix:locale language="en"/> <netuix:markup> <netuix:shell title="Header-Footer Shell" description="A header and footer is included in this shell." markupType="Shell" markupName="headerFooter"> <netuix:head/> <netuix:body> <netuix:header> <netuix:jspContent contentUri="/resources/jsp/header.jsp" /> </netuix:header> <netuix:break/> <netuix:footer/> </netuix:body> </netuix:shell> </netuix:markup> </netuix:markupDefinition> There are three tags to note here. First, the < netui :header> tag is used to define what elements are in a portal's header section. Second, the <netuix:jspContent> tag within the header's start and end tag is used to specify what should be displayed. You can use three attributes in this tag: contentUri , errorUri , and backingFile . The contentUri attribute specifies a JSP or HTML file that represents the header file. Like portlets, the JSP or HTML file doesn't require the beginning HTML tags, such as <html> or <body> ; you code what you want the header to look like. The errorUri attribute enables you to enter an error page that the portal should display in case there is an exception. The backingFile tag enables you to specify a class that performs preprocessing logic before the portal is rendered. Be careful when using a backing file (discussed in Chapter 13, "Creating Advanced Portlets"; remember that this class is executed every time the portal is displayed. Third, the <netuix:footer> tag defines what's displayed in the portal's footer section. This area encompasses what is displayed below the books and pages of your portal. Within the <netuix:footer> tag, the <netuix:jspContent> tag specifies what page is displayed as the footer. LayoutsWhen adding portlets, so far you have seen that pages have designated sections called placeholders where you can drag a portlet. The placeholders appear because they are defined in a layout , which specifies where content can be displayed. Layouts are defined by two files: an XML file (with a .layout extension) to describe how the layout appears in the browser, and an HTML file (with a .html.txt extension) used to render the layout in Workshop. Listing 12.4 shows the two-column layout you have worked with in this chapter. Listing 12.4. A Two-Column Layout<?xml version="1.0" encoding="UTF-8"?> <netuix:markupDefinition xmlns:netuix=http://www.bea.com/servers/netuix/xsd/controls/netuix/1.0.0 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.bea.com/servers/netuix/xsd/ controls/netuix/1.0.0 markup-netuix-1_0_0.xsd"> <netuix:locale language="en"/> <netuix:markup> <netuix:gridLayout title="Two Column Layout" description="This layout has two columns (left, right) and the portlets flow vertically in the columns." columns="2" htmlLayoutUri="/framework/markup/layout/twocolumn.html.txt" iconUri="/framework/markup/layout/twocolumn.gif" markupType="Layout" markupName="twoColumnLayout"> <netuix:placeholder title="left" description="The leftmost placeholder in this layout." flow="vertical" usingFlow="true" width="30%" markupType="Placeholder" markupName="twoColumn_left"> </netuix:placeholder> <netuix:placeholder title="right" description="The rightmost placeholder in this layout." flow="vertical" usingFlow="true" width="70%" markupType="Placeholder" markupName="twoColumn_right"> </netuix:placeholder> </netuix:gridLayout> </netuix:markup> </netuix:markupDefinition> The two-column layout uses the <netuix:gridLayout> tag to define which type of layout is to be used ”grid, flow, or border. A grid layout places the defined placeholders based on the order in which they are defined between the start and end tags. The columns attribute is used to determine how many placeholders should be placed in one row; for example, if you want three placeholders instead of one, you would set the columns attribute to 3 and use four <netuix:placeholder> tags. A <netuix:placeholder> tag defines where content can be displayed. Notice that the width attribute in Listing 12.4 is used to determine how much of the row the placeholder takes up. You can see all these properties in Workshop when the placeholder is selected; however, you can't edit them in Workshop. There are two other types of layouts: flow layouts and border layouts. A flow layout places the placeholders vertically or horizontally with no wrapping. This type of layout is best used for simple layouts, such as one to three rows or one to three columns. Border layouts allow a maximum of five placeholders that go in different regions. The five regions are north , south , east , west , and center . In this layout, west , center , and east compose the middle, with north above and south below. As you can see, you have a lot of flexibility when building layouts for portal pages. Figure 12.9 shows a layout displayed in Workshop. Figure 12.9. A two-column layout in Workshop. Skins and ThemesSkins are used to describe what content should look like in a browser. Skins are responsible for fonts, icons, colors, and other rendering options. A big advantage of skins is that portlet developers don't have to worry about what the content will look like in a browser. The content developer can simply display the information and then rely on the skin to use the appropriate fonts and colors. A skin consists of cascading style sheets, a properties file, and associated images for the skin. A style sheet defines the behavior for components that are rendered with it. For example, a skin can specify that the background color is blue and the main font is 12-point Courier. A skin also defines the icons used for minimize and maximize buttons ; the URL to the minimized and maximized version of the portlet is in the style sheet, and the actual icon is in the images directory. Themes can be thought of as localized skins, used to differentiate a portlet or page. They are defined within a skin and contain a subset of skin properties that are different from the values of the skin. A good example of this is an alert theme; you could specify that all colors used on this page are shades of red to attract users' attention. SkeletonsIf skins are the "look" in look and feel, skeletons represent the "feel." Skeletons are used to translate how different portal components, such as books, pages, portlets, and title bars, are rendered in HTML. Skeletons are a series of JSP pages that define the rendering of different aspects of the application. For example, title bars are rendered via titlebar.jsp . It's within these JSP files that the different style sheet elements are applied. The <render:writeAttribute> tag is used to display elements of the cascading style sheet. The following code is a sample from header.jsp : <render:writeAttribute name="class" value="<%= header.getPresentationClass() %>" defaultValue="bea-portal-body-header"/> The defaultValue attribute refers to the style sheet element bea-portal-body-header , which is defined in body.css . As mentioned, skins and skeletons compose an application's look and feel. To use them, you must create an .laf file and place it in the \framework\markup\lookandfeel directory. The .laf file defines the name, skin, and skeleton of a particular field. It also indicates where to find the different files and supplies a unique markup name for the look and feel. Listing 12.5 is an example of a look and feel ( .laf ) file. Listing 12.5. The Classic Look and Feel<?xml version="1.0" encoding="UTF-8"?> <netuix:markupDefinition xmlns:netuix="http://www.bea.com/servers/netuix/xsd/controls/netuix/1.0.0" xmlns:xsi=http://www.w3.org/2001/XMLSchema-instance xsi:schemaLocation="http://www.bea.com/servers/netuix/xsd/controls/netuix/ 1.0.0 markup-netuix-1_0_0.xsd"> <netuix:locale language="en"/> <netuix:markup> <netuix:lookAndFeel title="Classic" description="A cool look and feel using the classic skin and skeleton" definitionLabel="classicLookAndFeel" skin="classic" markupType="LookAndFeel" markupName="classicLookAndFeel"/> </netuix:markup> </netuix:markupDefinition> |
| < Day Day Up > |
EAN: 2147483647
Pages: 138