QtComplexComponentsShortcut

[toc align_right="yes" depth="3"]

Qt-Complex components shortcut

(return to the main "Qt-Complex wiki page":http://developer.qt.nokia.com/wiki/category:Tools::QtComplex or go to the "main project page":https://projects.developer.nokia.com/Qt_Complex)

For a detailed documentation on the framework copmonents, usage and sample code go to the project wiki "Framework Components":https://projects.developer.nokia.com/Qt_Complex/wiki/FrameworkComponents

Components and component loaders

Components

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.

Button

This is the standard framework button.

ButtonIcon

Iconic button with custom image and optional text.

HorBtnText

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

Info

The Standard info page.

MapView

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

MessageBox

Messagebox with confirmation button.

Splash

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

StaticBanner

Standard banner shown on top of the screen.

Switch

Switch object with label, info button and popup.

ToolBar

The Qt-Complex Standard toolbar.

VerBtnText

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