Rainbow Portal

Home

Creating Rainbow Themes to customize the look 6/28/2003

Themes White Paper

This WhitePaper describes in detail the technical specifications for Themes in Rainbow Portal TM, constructed & developed from DUEMETRI.

First release: May 2002
Revised: December 2002
All document is © 2002 by DUEMETRI

For further information http://www.rainbowportal.net

Introduction

The Rainbow Portal solution allows you to easily construct web portals with advanced characteristics in a very short time.

One of the core features of the solution is the ability to easily customize the layout of the site with a few simple clicks, through the use of administrative modules.

In developing the specification of the Theme engine we have had to take account of the peculiarities of existing solutions.

The Themes developed for Rainbow, on the contrary do not comprise the definition of the layout of the page. The layout for the page comes from the database and is managed from the administrative modules.

The theme designer defines some fragments of HTML that compose the several parts that make up the modules.

All the modules that form part of a portal have a common matrix in the DesktopModule class (of which they inherit the base structure and one series of characteristics, like the permission of adding or modify data for example).

Another building block that composes the modules is the “Title”. It is encapsulated in the DesktopModuleTitle class. Although many modules need to have a title, it is contained as a separate control in the module itself (this may be changed in future).

The “Title” displays the heading for the module and also manages the visualization of several of the push-buttons for editing. These settings are set automatically and are based on the permissions and authorization of the currently logged on user.

Theme definition

A Theme for a portal is contained in a single folder and is composed from an XML file that describes the theme itself and references various image files (which are contained within the theme folder).

A CSS style sheet is also contained within the theme folder. The CSS style sheet is responsible for the choice of colors and font to employ.

The theme folder must be inside of the main “Themes” folder (Rainbow\Design\Themes) or it can optional be dropped inside the root of an individual portal (e.g. _Rainbow). Themes in an individual portal’s directory can be used as a “private” theme since they are only visible from that particular portal. Themes within the main directory (Rainbow\Design\Themes) are available to all portals.

The name of the folder is the name of the Theme (In the future this may be changed for localization purpose).

The location of the main Themes directory can be changed from within the web.config file:

XML file structure

A Theme’s XML file contains many tags.

Header

xmlns:xsd=http://www.w3.org/2001/XMLSchema

xmlns:xsi=http://www.w3.org/2001/XMLSchema-instance

. . .

Other tags that define the rest of the theme are placed between the tags.

Name of the Theme

Ms Default

CSS style sheet

msdefault.css

It is the name of the style sheet and it must correspond to the name of the theme folder.

Images

The properties of the ThemeImage tag define the button’s function, the image’s location and the height and width of the button. Drop your images into your theme folder and reference them locally (e.g. you write “add.gif” instead of “Themename/images/add.gif”).

Figure 1 - Example of Theme applied with the Add an Modify properties permissions active

The images are searched from the “Title” control and displayed as icon buttons.

Currently the Title control searches for the following images:

· Buttons_Edit

· Buttons_Add

· Buttons_Delete

· Buttons_EditCollection

Every image represents an available permission.

If one of the images is not defined it is replaced with a text link. The space available is limited and defining an image is recommended.

The text description is still available as the image’s “Tooltip”.

Parts

The parts are characterized, like the images, from a name that distinguishes them.

Every part contains HTML code that represents a fragment of the module that will be displayed.

The presence of a title influences the graphical representation of the module. We therefore have two types of part, one for the module with Title inside it and one for the modules without a Title inside. The presence of a “title” is checked automatically at runtime and the right part is used. An example of a module without a title is the Sign-in control.

Important notice: We are working with an XML file, so HTML content has to be encoded:

· ‘<’ ‘>’ chars will be represented as ‘<’ and ‘>’.

· Characters other than US-ASCII-7 are not allowed and must be encoded in UTF-8 or transformed into numeric entities.

· ‘&’ char must be converted to ‘&’. For use or  

Parts hierarchy

Modules without TITLE

1. Part: ControlNoTitleStart

2. Module content…

3. Part: ControlNoTitleEnd

Modules with TITLE

1. Part: ControlTitleStart

2. Title*

3. Part: ControlTitleBeforeControl

4. Module content…

5. Part: ControlTitleAfterControl

6. Part: ControlTitleEnd

TITLE

Is made up of several parts.

1. Part: TitleStart

2. Title content

3. Part: TitleMiddle

4. For each button:

a. Part: TitleBeforeButton

b. Button content

c. Part: TitleAfterButton

5. Part: ControlTitleEnd

Theme XML file sample

xml version="1.0" encoding="utf-8" ?>

<Theme xmlns:xsd="http://www.w3.org/2001/XMLSchema"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">

<Name>Ms DefaultName>

<Css>msdefault.cssCss>

Images>

<Parts>

<HTML>

HTML>

ThemePart>

<HTML>

</TD><TD width=50 background="ctk_gradient.gif" height=19><IMG height=19 alt="" src="ts.gif" width=50 border=0></TD>

HTML>

ThemePart>

ThemePart>

ThemePart>

ThemePart>

ThemePart>

<HTML>

HTML>

ThemePart>

<HTML>

HTML>

ThemePart>

ThemePart>

ThemePart>

ThemePart>

Parts>

Theme>

The information contained in this document represents the current view of DUEMETRI on the issues discussed as of the date of publication. Because DUEMETRI must respond to changing market conditions, it should not be interpreted to be a commitment on the part of DUEMETRI, and DUEMETRI cannot guarantee the accuracy of any information presented after the date of publication.

This document is for informational purposes only. DUEMETRI MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT.

Microsoft, ActiveX, BackOffice, MSN, Outlook, PivotChart, PivotTable PowerPoint, Visual InterDev, Visual Studio, Windows, and Windows NT are either registered trademarks or trademarks of Microsoft Corporation in the U.S.A. and/or other countries.

Other company and product names mentioned herein may be the trademarks of their respective owners.

The names of companies, products, people, characters, and/or data mentioned herein are fictitious and are in no way intended to represent any real individual, company, product, or event, unless otherwise noted.

* The Title uses its own type of parts, see the description of the title for the details.

<< Back