StringbeansTM Cookbook

Table of Contents

How do I change portal login page?
How do I configure the portal view shown to new users?
How do I create a portal that provides a fixed view to all portal users ?
How do I re-brand a Stringbeans Portal?
How do I create a new Stringbeans theme?
How do I modify/add portal page layouts?
How do I access Stringbeans portal on mobile devices (cellphones, PDAs, etc) ?
How do I change my password?

How do I change portal login page ?

Log in as user login-template. Configure the page layout, content, and theme using Stringbeans personalization interface ("preferences" link at the top for theme, preferred language and default home, and page editing icons on the icon-bar for create and edit page). Make sure that you include "LoginPortlet" on the home page. This page will be shown to all users when they access Stringbeans portal URL.
Password for "login-template" is pre-set to "login". You should change it once you log in to prevent unauthorized users from changing portal settings.

back to the top

How do I configure the portal view shown to new users?

Log in to Stringbeans portal as user default-template. Configure the page layout, content, and theme using Stringbeans personalization interface ("preferences" link at the top and page editing icons on the icon-bar). All new users, upon logging in, will see the view that you created for "default-template" users.
Password for "default-template" user is pre-set to "default". You should change it as soon as possible to prevent unauthorized users from changing portal settings.

back to the top

How do I create a portal that provides a fixed view to all portal users ?

By default, a Stringbeans portal is configured to be customizable by end users. Some sites may want to show a fixed view to the end users. To do this, log in as "admin" and click on "Portal Configuration" tab. Select "Default View" menu option and click on "Default" rule. Uncheck "Personalizable" checkbox and click save. Once you do this, you will be able to modify the templates and personalize your content as an administrator, but the end users will not be allowed to change the default view you set up through "default-template" user.

back to the top

How do I re-brand a Stringbeans Portal ?

Quick Re-Branding

  1. Replace banner.gif in each theme image directory ( {stringbeans-webapp-root}/themes/{theme-name}/images ) with your banner image.
  2. Edit portal_footer.jsp located in {stringbeans-webapp-root}/my directory. This file defines the footer row for all portal pages. Simply replace the original row with custom HTML.

Advanced Re-branding

Stringbeans portal display is generated by "portal.jsp" file located in {stringbeans-webapp-root}/my directory. This file includes several other JSP files located in the same directory. Each of the included files corresponds to a separate visual area on your portal page such as the top level menu bar, header, footer, etc. The list of the included files is given below. You should change one or more of these JSP files depending on your branding requirements. We recommend that you do not change files marked with (*) unless you really know what you are doing.
  1. portal_vars.jsp - Defines common variables used in subsequent JSP files. You should always include this file and make use of variables defined here.
  2. portal_header.jsp - Displays portal header.
  3. portal_menu.jsp - Top level menu bar showing page tabs.
  4. portal_spacer.jsp - Renders a spacer row.
  5. portal_icon_bar.jsp - Defines an icon bar that shows icons for page creation and edits.
  6. portal_body.jsp (*) - Lays out a portal page based on the layout information.
  7. portal_footer.jsp - Displays portal footer.
In addition, the following files are included in portal display:
  1. portlet_narrow.jsp - Renders portlets in narrow column.
  2. portlet_wide.jsp - Renders portlets in wide columns (width > 250)
  3. portlet_menu.jsp - Renders portlets in the menu columns (applicable to menu layout).
  4. action_links.jsp (*) - Displays portlet icons that allow changing portlet mode and window state.
  5. column_layout.jsp (*) - Renders column layout. (included in normal.jsp)
  6. single_layout.jsp (*) - Renders single portlet layout. (included in normal.jsp)
  7. menu_layout.jsp (*) - Renders menu layout. (included in normal.jsp)
  8. detached.jsp (*)- Renders a detached portlet window.
  9. maximized.jsp (*) - Renders a maximized portlet.
  10. normal.jsp (*) - Renders a portal page in normal mode.
  11. portal_banner.jsp - Renders portal banner (included in portal_header.jsp)
  12. portal_date.jsp - Displays current date (included in portal_header.jsp)

back to the top

How do I create a new Stringbeans theme ?

Quick theme creation

To create a new Stringbeans theme, create a theme folder under /themes directory. Create an "images" subfolder and place icons listed in the table below.

Image NameSizeDescription
admin.gif 14x14 Currently unused. Reserved for changing portlet mode to "admin" when we add support for it.
ascending.gif 10x10 Used in TablePortlet to indicate ascending sort order.
banner.gif 960x67 Portal banner image.
bottom_left.gif 18x18 Footer bar, left corner.
bottom_right.gif 18x18 Footer bar, right corner.
delete.gif 14x14 Icon displayed on portlet header to delete the portlet window from the page.
delete_page.gif 16x16 Delete page button displayed in the icon bar at the top.
delete_page_gray.gif 16x16 Disabled delete page button displayed in the icon bar at the top for the default page.
descending.gif 10x10 Used in TablePortlet to indicate descending sort order.
detach.gif 14x14 Detach button displayed on a portlet header.
edit.gif 14x14 Edit button displayed on a portlet header.
edit_page.gif 16x16 Icon on the top icon bar for editing contents of the current page.
edit_page_gray.gif 16x16 Disabled icon on the top icon bar for editing contents of the current page.
help.gif 14x14 Help button displayed on a portlet header.
hideborder.gif 14x14 Icon on page content editor for hiding portlet border.
hidetitle.gif 14x14 Icon on page content editor for hiding portlet title.
max.gif 14x14 Icon on portlet header for maximizing the portlet.
movedown.gif 14x14 Icon on page content editor for moving the portlet down.
movedown.gif 14x14 Icon on page content editor for moving down a portlet.
moveleft.gif 14x14 Icon on page content editor for moving a portlet to left.
moveright.gif 14x14 Icon on page content editor for moving the portlet to right.
moveup.gif 14x14 Icon on page content editor for moving a portlet up.
new_page.gif 14x14 Icon on the icon bar to create a new portal tab.
non_secure.gif 14x14 Icon on the icon bar to access portal pages in non-secure (http) mode.
pixel.gif 1x1 Transparent image used in maintaining banner width and creating spacer elements.
restore.gif 14x14 Icon on a maximized portlet window to put it in normal display state.
secure.gif 14x14 Icon on the icon bar to access portal pages in secure (https) mode.
showborder.gif 14x14 Icon on page content editor for unhiding portlet border.
showtitle.gif 14x14 Icon on page content editor for unhiding portlet title.
view.gif 14x14 Icon displayed on portlet header to change portlet mode to "view".

Also create a stylesheet file named portal.css. The CSS file must have a special style class named "ThemeInfo". It should define the property "NAME". The value of this property provides the label for your theme in the dropdown shown in the personalization interface. Following are the style's classes used in rendering portal pages:.

Style Class Name Description
.ThemeInfo The name of the theme's name. Requires NAME property. The value of the name property is used for the dropdown label in preferences interface.
.Body The viewable body
.Page The area inside the body defined by page width.
.PortalDate Date shown on the top of the page.
.TopLinkLinks on top of the page, i.e. Preferences, Edit Profile and Logout. In addtion, define also .TopLink:hover to give effect when hovering the links.
.Banner Banner placeholder.
.MenuBar Menu bar, including the menu item that not linkable (for active page)
.MenuBarLink Linkable menu bar item. In addition, define also: MenuBarLink:hover
.IconBar Icon bar below the menu bar where create, edit and delete icons are placed.
.Spacer Gap fill in between portlets.
.WideColumn Column with width wider than 250 px.
.WidePortlet Wide Portlet includes portlet header/title and content
.WidePortletHeader Wide portlet header/title
.WideContent Wide portlet content
.NarrowColumn Column with width smaller or equal 250 px.
.NarrowPortlet Narrow portlet includes portlet header/title and content.
.NarrowPortletHeader Narrow portlet header/title
.NarrowContent Narrow portlet content
.MenuPanel Left menu navigation panel
.UnselectedOption Menu unselected option
.SelectedOption Menu selected option
.Footer Footer bar
.Copyright Copyright statement below the footer.
.GroupHeader0 Group header used in ReportPortlet's header.
.GroupHeader1 Group header used in ReportPortlet's header. Smaller font than GroupHeader0.
.Tooltip Requires: visibility:hidden;position:absolute properties. For hidden tooltip that will show up when hovering over the label.
.portlet-font Use interchangeable with portlet-section-body.
.portlet-section-body Used mostly in portlet's table's row. Use alternately with portlet-section-alternate.
.portlet-section-alternate Used mostly in portlet's table's row. Use alternately with portlet-section-body.
.portlet-section-header Portlet's table header.
.portlet-msg-error Portlet's error message.
.portlet-msg-alert Portlet's warning message.
.button Form buttons: submit, cancel, done, reset, apply, continue, OK
.text, .password, .checkbox, .radio Form inputs

In addition to the above classes, define also style for these HTML's tags:

  • a (anchor link, including a:hover and a:visited)
  • textarea and select (for Form)
  • h1, h2, h3, h4, h5, h6 (headers).

Advanced theme creation

In addition to changing images and style, you can also define a completely custom layout by creating a portal.jsp file in your theme folder. Stringbeans will use this file instead of the default file in "my" directory. We recommend that you keep the same file structure as portal.jsp file in my directory and rewrite only those parts that need modified look and feel. You can use "softblue" theme as an example of creating a completely different look and feel specific to a theme.

back to the top

How do I modify/add portal page layouts?

Stringbeans supports 3 types of layouts: single, menu and column. Single layout shows one portlet on the page. Menu layout has a menu column and a main column. The menu column shows a menu and portlets on top and bottom of the menu as per user selection. The main column displays the currently selected portlet. Column layout organizes portlets in multiple columns. Columns with fixed width less than 250 pixels is considered a narrow column. Other columns are considered as wide columns. In general, you can define multiple layouts based on each column type. Each layout is characterized by width of each column and the page width. A column layout can have any number of columns, a menu layout has two columns (the menu column and the main column), and single layout has only one column. The layouts are defined within "page-layouts" configuration element in portal.xml file located in WEB-INF directory. An example layout configuration is shown below. Note that each defines a unique name, a label (used in layout selection box on personalization page), column widths (for single layout this is ignored), and type (single, column, or menu). If the layout has a page width different than the default portal page width, you can specify it via "page-width" element. Modify portal configuration file, portal.xml, located under {stringbeans-webapp-root}/WEB-INF/. 
    <page-layouts>
        <layout>
            <name>grid1</name>
            <label>Two Columns (W-N)</label>
            <column-widths>100%,165</column-widths>
            <type>column</type>
            <page-width>100%</page-width>
        </layout>
        <layout>
            <name>grid2</name>
            <label>Two Columns (N-W)</label>
            <column-widths>165,100%</column-widths>
            <type>column</type>
            <page-width>700</page-width>
        </layout>
        <layout>
            <name>grid3</name>
            <label>Three Columns</label>
            <column-widths>165,100%,165</column-widths>
            <type>column</type>
            <page-width>100%</page-width>
        </layout>
        <layout>
            <name>menu</name>
            <label>Menu</label>
            <column-widths>165,100%</column-widths>
            <type>menu</type>
            <page-width>700</page-width>
        </layout>
        <layout>
            <name>single-portlet</name>
            <label>Single Portlet</label>
            <column-widths>100%</column-widths>
            <type>single</type>
            <page-width>700</page-width>
        </layout>
    </page-layouts>

back to the top

How do I access Stringbeans portal on mobile devices (cellphones, PDAs, etc) ?

You will need Internet connection via your mobile device and the device supports WML 1.1+ or XHTML Mobile Profile 1.0. Load URL in the same manner manner you access Stringbeans over a standard Web browser. Stringbeans is able to detect clients understanding WML/XHTML MP and displays a hierachical set of links corresponding to portal tabs and portlets on each page. Note that some portlets may not be displayed if they do not support WML/XHTML MP mime types..

back to the top

How do I change my password ?

Log in using your current password. Click Edit Profile top link (at the upper right corner by default) which will display edit profile portlet page. Click Change Password link in the portlet. It requires you to type in your old password and new password (twice for confirmation). Click Save.

back to the top