Qt Reference Documentation

Application Style

Overview

When you are defining the measurements within an application or component layout, there are a number aspects to consider:

  • The layout structure, the high level relationship between items. Which item is the parent? How are the items arranged relatively on the screen? Are they in a grid or column, or is it easier to use anchors?
  • The layout measurements. How big is an item, or a margin inside the edge of an item, or an anchor between items?
  • The constraints imposed by the container. This might be ApplicationWindow contents in the case of a Page, or it may be a different container in the case of a Button.
  • The implicit size of contained items. Some child items will require a certain amount of space, such as a button containing a text. That may also depend on the current platform and style. How do you ensure that you leave enough space, and what happens if your children change size?

These aspects combine together to resolve the final application layout, referred to as the "Application Style", for a given Device Profile. However, although there are dependencies between the different aspects, it is important to manage and control them independently within the application code base.

It is strongly recommended that Layout measurements should be stored in Application Style files, separate from the component layout structure definition files. The reason for this is that layout structure, for a given form factor, can be re-used for different Device Profiles. However, measurements will almost always vary between Device Profiles or Device Categories.

Example

For example, in the ScaleFM example application, there are a colection of Application Style files for the application specific measurements, arranged in a folder tree structure:

 resources/layouts/480_320/180/AppStyle.qml
 resources/layouts/640_360/185/AppStyle.qml
 resources/layouts/640_360/210/AppStyle.qml
 resources/layouts/640_480/325/AppStyle.qml
 resources/layouts/864_480/245/AppStyle.qml
 resources/layouts/1024_600/170/AppStyle.qml
 resources/layouts/1024_768/130/AppStyle.qml
 resources/layouts/Normal/High/AppStyle.qml

Note that there are files for each Device profile, and the folder names are generated using the following formats for Device Profiles and Device Categories respectively:

 /<folder>/<longest-edge>_<shortest-edge>/<dpi-rounded-to-nearest-5>/<filename>.qml
 /<folder>/<size>/<resolution>/<filename>.qml

The contents of each file is exactly the same, except for the actual values. For example:

 Item {
     ...
 property int starIconSize: 45
 property int toneIconSize: 45
 property int starTouchSize: 54
 property int frequencyStripHeight: 58
 property int frequencyButtonSize: 62
     ...
 }

The correct file can be loaded using a straightforward implementation. See Loading Separate Layout Configurations Based on Screen Configuration for more information.

If the opposite approach (complete duplication of entire QML files) was taken, then all of the layout states and structure definitions would be duplicated between the copied QML files, and only the measurement values would change.

Conclusion

The main benefit of using separate Application Style are:

  • To reduce the amount of duplication, and hence increase maintainability.
  • It becomes much easier to change the layout structure, perhaps due to subsequent specification changes. In that case, the layout structure can be modified once, and many or all of the layout measurements would remain unchanged.
  • It becomes much easier to add support for additional Device Profiles, simply by adding another measurement definition file.