Component styling

iPFaces components look is based on the visual style of standard iPhone or Android applications. Components are rendered with this style by default. With iPFaces from version 1.1, the components look can be modified, using styles. Styles use structure similar to the CSS styles in HTML.

Nearly all visual components’ appearance can be styled using the attribute “style” – inline styles or using the style file which can be defined in the attribute “styleFile” of the component “form”.

Inline styles

Every visual component may contain a style attribute to override the default style defined in the style file.

Syntax

style="property1:value1; property2:value2; ..."

property is a style attribute to be set to value. Property and value are separated by a colon. To specify more than one property semi-colon separator has to be used to separate the properties.

Style file

Styles can be stored in a separate text file if needed. The file contains style attributes for iPFaces elements. These styles are then applied to all elements with the same name within the form that uses the style file.

Note: Only element name based styles are supported in iPFaces from version 1.1 (no class or component id derived styles as in css).

Syntax

selector {property1:value1; property2:value2;...}

where selector is an iPFaces simple element name and property is a style attribute to be set to value. Property and value are separated by a colon. To specify more than one property semi-colon separator has to be used to separate them. All selector properties are enclosed in curly braces ( {...}). The file may contain multiple selectors. If more selectors with the same name are declared with the same property, the last declared property value will be used.

It is possible to define style attributes for multiple selectors using grouping, e.g.

label, textfield, password {background-color: green}

Style merging rules

If both the style file and inline component style are used and the same property with different value is declared for a component, the inline property value is used.

Available selectors

This section shows the components and the tyles they support.

Style property value types and units

Color

Color value can be specified by

  • Hex - a hex value, like "#ff0000" (value begins with #, rrggbb)
  • name - a color name, like "red" (case insensitive).

Color value type is used for attributes

  • color
  • styles with names ending with "-color", like background-color

Units

Lengths and sizes are represented as a numeric value. Only pixel units are supported.

Example

font-size: 20px;

Supported style attributes

Note: Not all components implement a full set of style properties (e.g., img does not use color at all etc.)

color

the color of text cell(s)

Example

color: yellow;
color: #FFFF00;

background

background-color

The color of the cell's or the screen's background.

Example

background-color: #FFFF00;

font

Font properties change the font style.

font-family

Element font type can be changed using the font-family property. The User may specify more than one font family and the client will use the first supported font. Multiword font names must be enclosed in quotes or double quotation marks. Most fonts support normal and italic characters.

Example

font-family: "Arial Rounded MT Bold";
font-family: "Georgia, Courier New";

iPhone css font names and their mapping to Android fonts
font-style

Each font can be rendered using normal or cursive style (italic or oblique). Most fonts support all styles but some of them do not. If a font with family name is found but its id does not support the font style, the default (normal) style is used.

  • normal – the text is shown normally
  • italic – the text is shown in italics
  • oblique – the text is “leaning” (oblique is very similar to italics, but less supported)
font-weight

The font-weight property defines how thick or thin characters of the font should be displayed. Only normal and bold are supported at the moment.

  • normal
  • bold
font-size

Property sets the size of a font. The size value is a number which represents the font size in pixels. No space is allowed between the number and the 'px' unit.

font-size: 16px;