×
Namespaces

Variants
Actions
(Difference between revisions)

Archived:Dynamic use Qt StyleSheets

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Addition to article of: Category:MeeGo Category:Symbian. (Add platform categories))
hamishwillee (Talk | contribs)
m (Text replace - "<code cpp>" to "<code cpp-qt>")
 
(4 intermediate revisions by one user not shown)
Line 1: Line 1:
[[Category:Qt]]
+
{{Archived|timestamp=20120306052655|user=[[User:Hamishwillee|&lt;br /&gt;----]]|[[:Category:Qt Quick|Qt Quick]] should be used for all UI development on mobile devices. The approach described in this article (using C++ for the Qt app UI) is deprecated.}}
{{ArticleMetaData
+
[[Category:Qt C++ UI]]
|id=
+
{{ArticleMetaData <!-- v1.2 -->
|platform= All Qt Supported
+
|sourcecode= <!-- Link to example source code (e.g. [[Media:The Code Example ZIP.zip]]) -->
 +
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|devices= Emulator / desktop / device
 
|devices= Emulator / desktop / device
|category=Qt
+
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
 +
|platform= All Qt Supported
 +
|devicecompatability= <!-- Compatible devices (e.g.: All* (must have GPS) ) -->
 +
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Empty or one of Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= Style Sheet
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20101121
 +
|author= [[User:Skumar rao]]
 +
<!-- The following are not in current metadata -->
 
|subcategory= Qt GUI
 
|subcategory= Qt GUI
|creationdate=21 November 2010
 
|keywords= Style Sheet
 
 
|sourcecode= <!-- Link to example source code (e.g. [[Media:The Code Example ZIP.zip]]) -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|sdk=<!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
 
|devicecompatability=<!-- Compatible devices (e.g.: All* (must have GPS) ) -->
 
|signing=<!-- Empty or one of Self-Signed, DevCert, Manufacturer -->
 
|capabilities=<!-- Capabilities required (e.g. Location, NetworkServices.) -->
 
|author=[[User:Skumar rao]]
 
 
}}
 
}}
 
==Overview==
 
==Overview==
Line 23: Line 31:
 
When using stylesheets, styles are applied using selectors. For instance, the snippet below gives all [http://doc.qt.nokia.com/4.7/qlineedit.html QLineEdit] widgets a yellow background color. Here, the selector is the word [http://doc.qt.nokia.com/4.7/qlineedit.html QLineEdit].
 
When using stylesheets, styles are applied using selectors. For instance, the snippet below gives all [http://doc.qt.nokia.com/4.7/qlineedit.html QLineEdit] widgets a yellow background color. Here, the selector is the word [http://doc.qt.nokia.com/4.7/qlineedit.html QLineEdit].
  
<code cpp>
+
<code cpp-qt>
 
QLineEdit
 
QLineEdit
 
{
 
{
Line 35: Line 43:
 
Creating a stylesheet selector relying on a dynamic property, e.g. urgent, makes it possible to highlight parts of the user interface in a very dynamic manner. For instance, adding the following rule to the stylesheet above will given any QLineEdit with the urgent property set to true red text on a yellow background.
 
Creating a stylesheet selector relying on a dynamic property, e.g. urgent, makes it possible to highlight parts of the user interface in a very dynamic manner. For instance, adding the following rule to the stylesheet above will given any QLineEdit with the urgent property set to true red text on a yellow background.
  
<code cpp>
+
<code cpp-qt>
 
[urgent=true]
 
[urgent=true]
 
{
 
{
Line 43: Line 51:
 
This does not have to be limited to [http://doc.qt.nokia.com/4.7/qlineedit.html QLineEdits] though. Setting the urgent property to true on a [http://doc.qt.nokia.com/4.7/qcheckbox.html QCheckBox] or [http://doc.qt.nokia.com/4.7/qpushbutton.html QPushButton] will make their texts red as well. Basically, any stylesheet aware widget can be turned red using this simple trick.
 
This does not have to be limited to [http://doc.qt.nokia.com/4.7/qlineedit.html QLineEdits] though. Setting the urgent property to true on a [http://doc.qt.nokia.com/4.7/qcheckbox.html QCheckBox] or [http://doc.qt.nokia.com/4.7/qpushbutton.html QPushButton] will make their texts red as well. Basically, any stylesheet aware widget can be turned red using this simple trick.
  
--[[User:Skumar rao|Skumar rao]] 15:11, 21 November 2010 (UTC)[[Category:MeeGo]] [[Category:Symbian]]
+
--[[User:Skumar rao|Skumar rao]] 15:11, 21 November 2010 (UTC)[[Category:MeeGo Harmattan]] [[Category:Symbian]]

Latest revision as of 04:14, 11 October 2012

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

Qt Quick should be used for all UI development on mobile devices. The approach described in this article (using C++ for the Qt app UI) is deprecated.

Article Metadata
Tested with
Devices(s): Emulator / desktop / device
Compatibility
Platform(s): All Qt Supported
Symbian
Article
Keywords: Style Sheet
Created: skumar_rao (21 Nov 2010)
Last edited: hamishwillee (11 Oct 2012)

[edit] Overview

This article shows how to use StyleSheets Dynamically. The easiest way to customize the look of Qt applications with CSS without having to do by Painter function which might be relatively hard to do. Style sheets are very light weight and faster way to improve the look and feel of Qt controls. For the real unique user experience, QtQuick and QGraphicsView is a better choice.

When using stylesheets, styles are applied using selectors. For instance, the snippet below gives all QLineEdit widgets a yellow background color. Here, the selector is the word QLineEdit.

QLineEdit
{
background: red;
}

There are numerous selectors based on object names, sub-controls, pseudo-states and more. These can be used to change the look of a user interface and also make all QPushButton widgets named okButton have green text, and so on.

For dynamic changes in the user interface look, the property value selector can be used in combination with dynamic properties. Dynamic properties was introduced in Qt 4.2 and allows your to assign property values to QObjects for properties that do not exist at compile time. I.e., if you choose to set the a property called urgent to true for a QObject, that property will stick even tough the class does not contain a Q_PROPERTY macro for the property urgent.

Creating a stylesheet selector relying on a dynamic property, e.g. urgent, makes it possible to highlight parts of the user interface in a very dynamic manner. For instance, adding the following rule to the stylesheet above will given any QLineEdit with the urgent property set to true red text on a yellow background.

[urgent=true]
{
color: red;
}

This does not have to be limited to QLineEdits though. Setting the urgent property to true on a QCheckBox or QPushButton will make their texts red as well. Basically, any stylesheet aware widget can be turned red using this simple trick.

--skumar_rao 15:11, 21 November 2010 (UTC)

This page was last modified on 11 October 2012, at 04:14.
125 page views in the last 30 days.
×