Visual Design Aspects
Central CSS-based Rendering | Portal Themes and Style Editor
This page discusses the visual aspects of iViews that are developed using the HTMLB library and the SAP portal framework. Especially, it discusses the central, CSS-based rendering mechanism, visual design options for application developers, portal themes, and the Style Editor tool for adaptations beyond the simple switching of themes.
Central CSS-based Rendering
Developers using the HTMLB library for creating iViews have only a very limited influence on the visual design and appearance of their iViews and the controls within. This is due to the fact that HTMLB uses a central rendering engine that handles all visual aspects of controls. The rendering engine takes a CSS-based approach, that is, most visual characteristics of the controls are defined through style sheet parameters that are beyond the access of application developers.
Application developers create iViews using the Control API provided by HTMLB. The control's attributes allow developers to change the look and behavior of controls within a certain restricted range of options. For example, an attribute design may allow developers to choose the control type, such as a certain group box or button type. Further attributes may allow to set the width or height of controls, a stripe-pattern in table views etc.
Application developers may change the look of certain controls by adding HTML code of their own. However, this approach is discouraged because it defies any changes of the overall visual design.
As the visual design is defined in style sheets, the visual design may be changed by modifying or exchanging the respective style sheets. This is supported by the fact that the current rendering engine does not use any imagery at all - apart from a few icons for tray headers etc.
Portal Themes and Style Editor
For the SAP portal framework, several ready-to-use portal designs have been defined, including a high-constrast design for visually impaired users. A new portal design can easily be created by copying and then adapting one of the preconfigured designs. This can be done using the Style Editor, a tool provided by the portal framework. In addition, the Style Editor allows to change numerous parameters for each control without requiring system administrators to do any manual changes to the style sheets. For more information on the Style Editor and the Style Editor parameters for each HTMLB control, please consult the SAP Portals HTMLB Guidelines.
For more information on the Style Editor and the Style Editor parameters for each HTMLB control, please consult the SAP Portals HTMLB Guidelines.
topSource: SAP iView Guidelines