×
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 (Hamishwillee - Bot update - Fix ArticleMetaData and other issues)
Line 1: Line 1:
[[Category:Qt]]
+
{{Archived|timestamp=20120306052655|user=[[User:Hamishwillee|<br />----]]|[[: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
+
|devices= Emulator / desktop / device
+
|category=Qt
+
|subcategory= Qt GUI
+
|creationdate=21 November 2010
+
|keywords= Style Sheet
+
 
+
 
|sourcecode= <!-- Link to example source code (e.g. [[Media:The Code Example ZIP.zip]]) -->
 
|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]]) -->
 
|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]) -->
+
|devices= Emulator / desktop / device
|devicecompatability=<!-- Compatible devices (e.g.: All* (must have GPS) ) -->
+
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
|signing=<!-- Empty or one of Self-Signed, DevCert, Manufacturer -->
+
|platform= All Qt Supported
|capabilities=<!-- Capabilities required (e.g. Location, NetworkServices.) -->
+
|devicecompatability= <!-- Compatible devices (e.g.: All* (must have GPS) ) -->
|author=[[User:Skumar rao]]
+
|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
 
}}
 
}}
 
==Overview==
 
==Overview==

Revision as of 08:26, 6 March 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 (06 Mar 2012)

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)

127 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×