QtComplexTestApplication

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

Qt-Complex test application dissection

(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 components, usage and sample code go to the project wiki "Framework Components":https://projects.developer.nokia.com/Qt_Complex/wiki/FrameworkComponents

Qt-Complex repository and "downoadable package":https://projects.developer.nokia.com/Qt_Complex/downloads/4 is provided with a test application aiming to give and essential example of how the framework works, how it can be integrated in your project and how it can co-exist with a typical stacked page navigation.

Test application modules

The test application is built with the following modules plust the main.cpp source:

• main.qml file that implement the PageStackWindow component with the common toolbar and a custom menu.
• MainPage.qml file that demonstrate the use of multiple framework components managed with the loader all in one document.
• MainUrl.qml, WikiPage.qml and SourcePage.qml These are three pages that differs only for the opened url. Was used three different pages to demonstrate te page stack navigation based on the common tools menu.
• SamplePage.qml another stacked page showing a demo form with some framework components.

Top imports

On top of every module there is the import group for Qt Quick components and Qt-Complex framework

 import QtQuick 1.1
 import com.meego 1.0
 import "QtComplex" as Framework
 import "QtComplex/Theme.js" as Theme
 import "QtComplex/Geometry.js" as Geometry
 import "QtComplex/TestApplication.js" as Test

As you can see TestApplication.js is imported as part of the application. This javascript defines all the methods to manage some properties and signals that are part of the test applicaiton, not of the framework itself.

The web pages

The MainUrl.qml, WikiPage.qml and SourcePage.qml sources showing the embedded browser also import the WebKit 1.0 module.

main.qml

The main.qml instantiates the global elements and the PageStackWindow. The navigation mechanism of the application is based on the page stack push/pop. The application starts from main.qml launching the MainPage.qml then the user can navigate to the other pages from the toolbar menu.

As the main.qml is the PageStackWindow the methods and instances defined here will be managed by the other loaded pages. main.qml defines the toolbar and the menu, the initial page - MainPage.qml - and the simple openFile() method.

 // Open a page and push it in the stack
 function openFile(file) {
 // Create the Qt component based on the file/qml page to load.
 var component = Qt.createComponent(file)
 // If the page is ready to be managed it is pushed onto the stack
 if (component.status == Component.Ready)
 pageStack.push(component);
 else
 console.log("Error loading: " + component.errorString());
 }

As main.qml defines the ToolBarLayout it is possible to include other Qt-Complex elements that should always be present. This document is on top of the tree architecture so the components defined here are accessible and visible on all the application pages.

TestApplication architecture

The architecture of the test application shows the two different navigation methods, tests the Mobility libraries and location component and shows some of the Qt-Complex components in action.

Entry point

The main.qml PageStackWindow decides what is the first loaded page (MainPage.qml). Instantiates the ToolBarLayout and menu. You can also try changing the first page using the SamplePage.qml instead of mainPage.qml changing the main.qml source as shown in the following code snippet:

 PageStackWindow {
 id: appWindow
 initialPage: SamplePage

MainPage{id: mainPage}

[… the main.qml code …]

MenuItem {
 text: "Sample page"
 onClicked: openFile("MainPage.qml");
 }

[… the main.qml code …]

The other QML documents

• MainPage.qml Shows the splash page than opens the Qt-Complex toolbar alternatively showing a home, a Ovi map area with the navigation buttons, the info screen.
• Toolbar Implements the Back button to move across the pages using the page stack and the menu to load the other pages
• Menu Implements three embedded web pages showing repectively:

' Access to the main project page' (MainUrl.qml) ' Access to the wiki documentaton pages' (WikiPage.qml) ' Access to the framework sources' (SourcePage.qml) ' A simple form' with Qt-Complex components (SamplePage.qml)