Home · All Classes · Main Classes · Deprecated |
The application developer adds the style to the system (for instance, for a widget) and a set of attributes are defined for the style. These attributes are defined by UI designers, and they can be customised with style sheets. Style sheets provide an easier way to customise the look and feel of the system, without a need to re-compile the system all over again if something needs to be changed. Style sheets are also intuitive and simple to use. When the system starts up, style sheets are loaded and the styles are automatically initialised according to the values defined in the style sheets.
This section describes the syntax for style sheet files. The following sections describe the building blocks for the style sheet definition from top to bottom. Most of the syntax follows the basic CSS rules, but there are also some MeeGo-specific additions.
Syntax: @import ""; or @import url("");
Description: Imports additional style sheet files and, in this way, combines multiple style sheets into one.
Details: All the import statements must reside at the top of the CSS file, before any selectors are defined.
@import "commonstylesheet.css"; @import "otherstylesheet.css"; // .. write other selectors here MySelector#MySelectorName { // write attributes here... }
Syntax: styleclassname { }
Full syntax: styleclassname[type]#name.orientation:mode (all the parameters are optional but their order needs to be correct)
Description: Groups attributes for a defined style
Details: Selectors group attributes of the same category together. In MeeGo Touch style sheets, it basically means that there is one selector for each style class. Selector attributes follow the general inheritance rules, so if you declare base class selectors, their contents inherit to the subclasses by default. If you want to break this inheritance chain, you can add a dot character (.) in front of the class name, meaning that those attributes are not derived to the subclasses but used only for that class. As a general rule, most of the attributes should derive. Therefore, you should consider before using the dot in front of the class name.
// these attributes will inherit to all subclasses of MyMWidgetStyle MyMWidgetStyle { // my own font definition and text color my-font: "sans" 15; my-text-color: \#FFFFFF; } // these attributes won't inherit to subclasses because of the dot in front of the styleclassname .MyMWidgetStyle { attribute-that-does-not-derive: "this does not derive"; }
Syntax: attributename: <attribute value>;
Description: Sets value to attribute
Details: Attributes and their values can be considered the actual data of the stylesheet. Application developers define them in the style header file, according to instructions from the UI designer.
The attribute naming between C++ code and style sheets follows the pattern where camelcase names are converted into lower-case strings with hyphens. See the example below.
C++ name | Attribute name in stylesheet |
---|---|
backgroundColor | background-color |
underlineTextColor | underline-text-color |
Datatype | Syntax | Example |
---|---|---|
bool | true, false | visible: false; |
int | numeric value | age: 42; |
QColor | Color name. See QColor::setNamedColor for possible parameters | color: #ffffff; |
qreal | decimal value | distance: 31.5; |
const QPixmap* | image-id [width height] | background: image_id; background: image_id 128 128; |
const MScalableImage* | image-id [left right top bottom] | background: image_id; background: image_id 0 128 0 128; |
QSize | width height | size: 25 25; |
QSizeF | width height | size: 25.2 25.6; |
QPoint | x y | position: 10 10; |
QPointF | x y | position: 10.6 10.6; |
QFont | family [weight] [italic] [capitalization] size [weight] = light | normal | demibold | bold | black [capitalization] = mixedcase | uppercase | lowercase | smallcaps | capitalize | font: arial 20; font: arial italic 20; font: arial bold 20; font: arial uppercase 20; font: arial bold uppercase 20; font: arial italic uppercase 20; |
QString | text | name: "john"; |
Qt::Alignment | left, right, hcenter, justify, top, bottom, vcenter, center, absolute | align: center; |
Qt::Orientation | vertical, horizontal | orientation: vertical; |
QTextCharFormat::UnderlineStyle | nounderline, singleunderline, dashunderline, dotline, dashdotline, dashdotdotline, waveunderline | underlinetype: nounderline; |
Qt::PenStyle | nopen, solidline, dashline, dotline, dashdotline, dashdotdotline | pen-type: solidline; |
Qt::Axis | x, y, z | rotation-axis: x; |
const MFeedback* | feedback-effect-name | press-feedback: press; |
QEasingCurve | type [amplitude] [overshoot] [period] | easing-curve: linear; |
QFont::Weight | light, normal, demibold, bold, black | weight: demibold; |
QFont::Capitalization | mixedcase, uppercase, lowercase, smallcaps, capitalize | capitalization: uppercase; |
Dimension type | Suffix | Example |
---|---|---|
Relative | % | size: 25% 25%; |
Absolute (pixels) | size: 25 25; | |
Pixels | px | size: 25px 25px; |
Millimeters | mm | size: 25mm 25mm; |
Syntax: @const constant-name: constant-value;
Description: Defines constant values in a style sheet, so you do not need to maintain duplicated data that is spread around the style sheet.
Details: Constant variables are defined using a syntax similar to attributes. Constant definitions support the same types and suffixes as attributes. Constants are assigned to attributes using the '$' character as prefix.
@const DEFAULT_FONT: "arial" 12; @const DEFAULT_FONT_COLOR: #ff0000; . . . Object { font: $DEFAULT_FONT; color: $DEFAULT_FONT_COLOR; }
Syntax: parentclassname styleclassname { }
Description: Defines a set of attributes for a widget that has a certain widget as a parent.
Details: The parent is defined using the name of the widget class, not a style class. This is because the look and feel of the parent is not important. It is not possible to add any other parameters to the parent. Note that when styling from libraries, specifying a custom parent class is the only way to affect the styling of widgets external to the library, in other words, common widgets. See Providing view configuration & stylesheets for the widgets for details.
MyParentWidget MyWidgetStyle { font: "sans" 10; } // the selector can also contain other parameters MyParentWidget MyWidgetStyle#Name.Orientation:selected { font: "sans" 20; }
Syntax: styleclassname:mode { }
Description: Defines a set of attributes for a certain mode.
Details: The mode parameter is separated by a colon and it must be the last one in the selector definition.
MyWidgetStyle:selected { font: "sans" 10; whatever-overridden-attribute: "overridden value"; } // the selector can also contain other parameters MyWidgetStyle#Name.Orientation:selected { font: "sans" 20; }
Syntax: styleclassname::name { }
Description: Defines a set of attributes for a named object.
Details: The name parameter is separated by the '#' character, and it must follow the class name and type when defining the selector. The software developer binds the actual name to the widget at the source-code level according to the instructions from the UI designer. This allows the person who creates the style sheet to assign a custom style for the named widget. Consult your UI designer for the object names in the application you are developing.
The system assigns named attributes as follows:
MyWidgetStyle#fancynamedwidget { // place the overriding attributes here font: "courier" 30; }
Syntax: styleclassname.orientation { }
Description: Defines a set of attributes depending on the device orientation.
Details: The orientation parameter is separated by a dot character, and it must follow the object name when defining the selector. Two orientations can be defined, "Portrait" and "Landscape".
// style attribute where orientation doesn't matter MyWidgetStyle { attribute: 0; } // style attribute in landscape orientation MyWidgetStyle.Landscape { attribute: 1; } // style attributes in portrait orientation MyWidgetStyle.Portrait { attribute: 2; }
The orientation parameter affects styling as follows:
Copyright © 2010 Nokia Corporation | MeeGo Touch |