From Qt Wiki
Jump to: navigation, search
IMPORTANT: The content of this page is outdated. Reason: Qt Quick 1
If you have checked or updated this page and found the content to be suitable, please remove this notice.

Qt-Complex components shortcut

Components and component loaders


The framework components are most of the QML files you find in the Qt-Complex main folder. Every QML document define a framework component: these documents contains the code that will be loaded in your UI at runtime accordingly with the device geometry and the loader parameters. Components should not used as they are. If you try to manage one of these QML documents in your source files you get errors. This is because the framework components are created to be managed eclusively by a reduced set of special components: the loaders.

Component loaders

For the same reason the framework loaders are components that can be used freely in your QML source code without problems. When a loader is instantiated it should be initialized assigning the desired values to its properties. As the same loader should manage many different components the properties set in a loader when it is instantiated depends by the kind of component that is should load.

Framework components in your code

To manage the framework components in your QML source code you should first import the Qt-Complex elements. The following code snippet shows a typical set of imports for Harmattan platforms.

// Qt Quick standard import
import QtQuick 1.1
// Qt Quick components
import com.meego 1.0
// Framework definition
import "QtComplex" as Framework
// Theme management methods
import "QtComplex/Theme.js" as Theme
// Geometry methods
import "QtComplex/Geometry.js" as Geometry

At this point you can instantiate the loader to create the desired component. The following example loads the top banner in your application as you can see in the Test Application provided with the Qt-Complex framework.

 Framework.Loader {
 id: topbannerLoader;
 width: parent.width;
 height: parent.height
 obj_color: "blue";
 theme: "default";
 obj: "StaticBanner"

As you can see in the next example the same Loader is instantiated to load the framework toolbar

 Framework.Loader {
 id: toolbarLoader
 width: parent.width;
 height: parent.height
 fontPoints: Geometry.getFontPoints();
 fieldHeight: Geometry.getFieldHeight() + Geometry.getFieldSpacing();
 fieldSpacing: Geometry.getFieldSpacing();
 theme: "default";
 obj: "ToolBar"
 onBtn1click: Test.toolbarButtonHome();
 onBtn2click: Test.toolbarButtonMap();
 onBtn3click: Test.toolbarButtonInfo();

Loadable components

The following list of loadable components is limited to those components that can be loaded in the application source code. There other loadable components e.g. the ButtonToolbar internally subloaded by by the framework builder creating compound objects.


This is the standard framework button.


Iconic button with custom image and optional text.


The Qt-Complex button + text label object with horizontal disposition.


The Standard info page.


Object to display Ovi Map and navigation controls in the viewver application.


Messagebox with confirmation button.


Example of custom splash screen. Can be found in the themes/default framework subfolder.


Standard banner shown on top of the screen.


Switch object with label, info button and popup.


The Qt-Complex Standard toolbar.


The Qt-Complex button + text label. Vertical orientation.