MeeGo wiki - User contributions [en]

QML/Sample App Using CPP Models

2011-05-22T14:55:22Z

Dlawlor: /* Follow these steps on a chroot / Xephyr system */

== Overview ==

This tutorial will demonstrate a simple (but non-trivial) app which uses
* Meego UX Component widgets
* C++ models
* QML List Views
* QML Components

This tutorial assumes you have the MeeGo SDK installed on Linux 
See: http://wiki.meego.com/SDK/Docs/1.2/MeeGo_SDK_1.2_Preview

Also assumed: you have a a chroot / Xephyr environment set up. 
* http://wiki.meego.com/MeeGo_UX_Components_Chroot_Tutorial
* http://wiki.meego.com/Developing_in_a_MeeGo_Environment

This tutorial will use meego-ux-components objects like:
* Book Menus -
* Buttons
* AppPage
For other uses of Meego UX Components, and another tutorial of Book Menus, See:
* http://wiki.meego.com/MeeGo_UX_Components
* http://wiki.meego.com/MeeGo_UX_Tutorials

Other QML Tutorials:
* http://wiki.meego.com/QML_tutorials

== Follow these steps on a chroot / Xephyr system ==
Note: These steps will also work for QEMU emulator and devices connected to the MeeGo SDK

=== Start Qt Creator ===

<pre>
qtcreator &>/dev/null &
</pre>

=== Create a new project ===
... screen shots ...

==== The auto-generated QML File looks like this: ====

<pre>
import QtQuick 1.0

Rectangle {
width: 360
height: 360
Text {
text: "Hello World"
anchors.centerIn: parent
}
MouseArea {
anchors.fill: parent
onClicked: {
Qt.quit();
}
}
}
</pre>

==== Turn off Shadow Build====

==== Build->Build All ====

=== Run ===
(CTRL-R or Green "Play" Button)

==== The running app looks like this: ====
<screen shot>

Clicking it closes the app (Qt.quit())

=== Add code to main.qml ===

==== Replace the contents of main.qml with this: ====
The last 2 Component statements are commented out so the app will run as is before creating more files.
<pre>
import Qt 4.7
import MeeGo.Components 0.1

Window {
id: window

bookMenuModel: [ qsTr("Button Demo"), qsTr("Book 2") ]
bookMenuPayload: [ gallery, book2 ]
bookMenuTitle: qsTr("Book Menu")

Component.onCompleted: switchBook( gallery )

//Component { id: gallery; MainPage {} }
//Component { id: book2; Book2 {} }
}
</pre>

==== Test / Run ====
Run the app and see the Book Menu. If you click on one of the menu items, you'll notice an error because of the commented out Component statements.

=== Add code for the Book Page example ===
==== Adding the Book2 Component ====
(from the meego-ux-widgetgallery example)
* (right click on the QML folder in the Projects view and Add New... / QML File / "Book2.qml")

* Replace the generated file Book2.qml with this:

<pre>

/*
* Copyright 2011 Intel Corporation.
*
* This program is licensed under the terms and conditions of the
* LGPL, version 2.1. The full text of the LGPL Licence is at
* http://www.gnu.org/licenses/lgpl.html
*/

/* This file contains relativy empty pages and is meant to demonstrate the
book/page concept */

import Qt 4.7

PageDummy {
id: pageDummy

innerText: qsTr("book 2, page 1")
rectColor: "lightblue"
showButton: true
buttonLabel: qsTr("Page 2")
pageTitle: qsTr("Dummy book 2")

onClicked: { addPage( page2 ) }

Component{
id: page2;

PageDummy {
id: pageDummy2

innerText: qsTr("book 2, page 2")
rectColor: "lightgreen"
showButton: true
buttonLabel: qsTr("Page 3")
pageTitle: qsTr("Dummy book 2")

onClicked: { addPage( page3 )
}
}
}

Component{
id: page3;

PageDummy {
id: pageDummy3

innerText: qsTr("book 2, page 3")
rectColor: "orange"
showButton: true
buttonLabel: qsTr("Page 4")
pageTitle: qsTr("Dummy book 2")

onClicked: { addPage( page4 )
}
}
}

Component{
id: page4;

PageDummy {
id: pageDummy4

innerText: qsTr("book 2, page 4")
rectColor: "darkgrey"
pageTitle: qsTr("Dummy book 2")
}
}
}
</pre>

==== Add PageDummy.qml ====
The file Book2.qml references PageDummy.qml, so create it the same way as Book2.qml

<pre>
/*
* Copyright 2011 Intel Corporation.
*
* This program is licensed under the terms and conditions of the
* LGPL, version 2.1. The full text of the LGPL Licence is at
* http://www.gnu.org/licenses/lgpl.html
*/

/* This file is just meant as a dummy to quickly create pages for
demonstrating the book/page concept. */
import Qt 4.7
import MeeGo.Components 0.1

AppPage {
id: pageDummy

property alias innerText: rectText.text //text shown in the rect
property alias rectColor: innerRect.color //color of the rect in the middle
property alias showButton: nextButton.visible //nextButton visible?
property alias buttonLabel: nextButton.text //nextButton label
property string bookTitle: "book title" //shown in the title bar

signal clicked()

anchors.fill: parent

Rectangle { z: -1; anchors.fill: parent; color: "grey" } //background

Rectangle {
id: innerRect

anchors.fill: parent
anchors.margins: 50
color: "lightgreen"

Text {
id: rectText

text: "dummy page"
anchors.centerIn: parent
font.pixelSize: 40
color: "black"
}
}

Button {
id: nextButton

visible: false
text: "next page >"
anchors.right: innerRect.right
anchors.bottom: innerRect.bottom
anchors.margins: 10
onClicked: { pageDummy.clicked() }
}
}
</pre>

You will see the use of the meego-ux-components "Button" and "AppPage" components in PageDummy.qml

==== Now, replace the two commented out Component statements in main.qml with:====

<pre>
Component {
id: gallery;
AppPage {id: dummy2}
}

// Dummy page until MainPage.qml is defined
AppPage { id: gallery; }
//Component { id: gallery; MainPage {} }

Component { id: book2; Book2 {} }
</pre>

Since the MainPage.qml file isn't created yet, we use a dummy AppPage placeholder temporarily to prevent a run-time error when invoking the menu.

=== Run ===
You can now click on the Book2 menu and see a new page.

=== Add code for seeing Custom List Views in the MainPage ===

We will use a C++ QAbstractListModel to repersent out list.

==== mymodel.h ====
Create the file mymodel.h by right-clicking on the simple-app project name and "Add New..." a C++ Header File

Paste this into mymodel.h
<pre>
#ifndef MYMODEL_H
#define MYMODEL_H

#include <QAbstractListModel>
#include <QColor>

struct Data {
Data( const char* name, const QString& flag, double population )
: name(name), flag(flag), population(population) {}
QString name;
QString flag;
double population;
};

const int FlagRole = Qt::UserRole + 1;
const int PopulationRole = Qt::UserRole + 2;
class MyModel : public QAbstractListModel
{
public:
MyModel();
int rowCount( const QModelIndex& ) const;
QVariant data( const QModelIndex& index, int role = Qt::DisplayRole ) const;

QList< Data > m_data;
};

#endif // MYMODEL_H

</pre>

==== Create the mymodel.cpp file with this content:====

<pre>

#include "mymodel.h"
#include <QByteArray>
MyModel::MyModel()
{
m_data
<< Data("Denmark", "qrc:images/denmark.jpg", 5.4)
<< Data("Sweden", "qrc:images/sweden.jpg", 9.3)
<< Data("Iceland", "qrc:images/iceland.jpg", 3.2)
<< Data("Norway", "qrc:images/norway.jpg", 4.8)
<< Data("Finland", "qrc:images/finland.jpg", 5.3);

// By default the DisplayRole is mapped to the propery "display"
QHash<int, QByteArray> mapping =roleNames();
mapping.insert( FlagRole, "flag");
mapping.insert( PopulationRole, "population");
setRoleNames( mapping );
}

int MyModel::rowCount( const QModelIndex& ) const
{
return m_data.count();
}

QVariant MyModel::data(const QModelIndex &index, int role) const
{
if ( !index.isValid() )
return QVariant();

Data data = m_data[index.row()];
if ( role == Qt::DisplayRole )
return data.name;
else if ( role == FlagRole )
return data.flag;
else if ( role == PopulationRole )
return data.population;
else
return QVariant();
}

</pre>

==== Modify main.cpp ====
Modify main.cpp by replacing its contents with this:
<pre>
#include <QtGui/QApplication>
#include <QDeclarativeEngine>
#include <QDeclarativeContext>
#include "qmlapplicationviewer.h"
#include "mymodel.h"

int main(int argc, char *argv[])
{
QApplication app(argc, argv);

MyModel model;

QmlApplicationViewer viewer;
viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
viewer.setMainQmlFile(QLatin1String("qml/simple-app/main.qml"));
viewer.showExpanded();

// Register the model "myModel" with QML
QDeclarativeContext *context = viewer.engine()->rootContext();
context->setContextProperty("myModel", &model);

return app.exec();
}

</pre>

==== Add the file MainPage.qml ====

A Component called MainPage.qml which will display row of Buttons that act like Tabs in a QTabView.

The area below the buttons are filled with one of two mini-apps (List View sample, and mini file browser)
<pre>
/*
* Copyright 2011 Intel Corporation.
*
* This program is licensed under the terms and conditions of the
* LGPL, version 2.1. The full text of the LGPL Licence is at
* http://www.gnu.org/licenses/lgpl.html
*/

/* The MainPage lets the user switch between different contents which
show the widgets available in these components. */

//import Qt 4.7
import QtQuick 1.0
import MeeGo.Components 0.1

AppPage {
id: mainPage

// This will be the first app / content displayed in the Button Demo page
state: "flags"

pageTitle: qsTr("Button Demo")

// Demo an Action Menu......
// Comment the block below to see a new Action Menu

// actionMenuModel: [ qsTr("Landscape"),
// qsTr("Portrait"),
// qsTr("Inv. Landscape"),
// qsTr("Inv. Portrait") ]
// actionMenuPayload: [ 1, 2, 3, 4 ]
// actionMenuTitle: qsTr("Action Menu")

// onActionMenuTriggered: {

// if( selectedItem == 1) {
// window.orientation = 1
// } else if( selectedItem == 2) {
// window.orientation = 2
// } else if( selectedItem == 3) {
// window.orientation = 3
// } else if( selectedItem == 4) {
// window.orientation = 0
// }
// }

Item {
id: contentButtons

// Some Debug output to stderr ...
onVisibleChanged: {
console.log("xxxxxxxxxxxxxx 1 Parent wid ", parent.width);
console.log("xxxxxxxxxxxxxx 2 Wid ", width);
}
onWidthChanged: {
console.log("wwwwwwwwwwwwww 1 Parent wid ", parent.width);
console.log("wwwwwwwwwwwwww 2 Wid ", width);
}

property int buttonWidth: parent.width * 0.2;
property int buttonHeight: 60;
property int buttonMargins: 2;

property string activeButtonImage: "image://themedimage/widgets/common/button/button-default"
property string buttonImage: "image://themedimage/widgets/common/button/button"
property string buttonImagePressed: "image://themedimage/widgets/common/button/button-default-pressed"

//width: 2 * buttonWidth + 3 * buttonMargins
height: buttonHeight
anchors.top: parent.top
anchors.topMargin: 10
anchors.horizontalCenter: parent.horizontalCenter

Button {
id: flagsButton
active: true
width: parent.buttonWidth; height: parent.buttonHeight

// Since there are only two buttons, the right of this button is near the center.
anchors { margins: parent.buttonMargins; right: parent.horizontalCenter;}
text: qsTr("Flags")

onClicked: {
mainPage.state = "flags"
active = true
browserButton.active = false
}
}

Button {
id: browserButton

width: parent.buttonWidth; height: parent.buttonHeight

// This button is to the right of the flags button
anchors { margins: parent.buttonMargins; left: flagsButton.right }
text: qsTr("File Browser")

onClicked: {
mainPage.state = "browser"
active = true
flagsButton.active = false
}
}
}

// This item holds the contents of the selected button and fills the rest of the window
Item {
id: contentSpace

anchors { top: contentButtons.bottom; bottom: parent.bottom; left: parent.left; right: parent.right }
}

// One of these two components will fill the contentSpace Item above.
FlagContent { id: flagContent; anchors.fill: contentSpace; anchors.top: contentButtons.bottom }

//Placeholder until BrowserContent.qml is present
Rectangle { id: browserContent; anchors.fill: contentSpace; anchors.top: contentButtons.bottom; color: "red"; }
//BrowserContent { id: browserContent; anchors.fill: contentSpace }

Rectangle { z: -1; anchors.fill: parent; color: "grey" } //background

states: [
State {
name: "flags"
PropertyChanges { target: flagContent; visible: true }
PropertyChanges { target: browserContent; visible: false }
},
State {
name: "browser"
PropertyChanges { target: flagContent; visible: false }
PropertyChanges { target: browserContent; visible: true }
}
]
}

</pre>

==== Add the File FlagContent.qml ====

This shows an example of using a QML ListView - which uses a delegate for a row to be displayed

The model statement references a C++ model called "myModel" defined in mymodel.{h,cpp}

<pre>
import QtQuick 1.0

ListView {
clip: true
model: myModel
anchors.top: parent.bottom
anchors.fill: parent
delegate: Rectangle {
color: Qt.rgba(0.9,0.9,0.9)
height: childrenRect.height
width: parent.width
Image {
id: image
source: flag
width: 64
height: 64
fillMode: Image.PreserveAspectFit

anchors { left:parent.left; leftMargin:30}
}
Text {
text: display + "\n" +"population: " + population + " mill."
anchors { left:image.right; verticalCenter: image.verticalCenter; leftMargin: 5 }
}
}
}

</pre>

==== Modify main.qml ====
Remove this:
<pre>
AppPage { id: gallery; }
</pre>

Uncomment this line:
<pre>
Component { id: gallery; MainPage {} }
</pre>

==== Copy Resource Files ====
Copy the images and .qrc file from the solution directory:

* Please rename this file to remove the .jpg due to a problem uploading to wiki.meego.com

[[Media:Qml-button-ex-rename-to-tgz.jpg]]

Add this to your simple-app.pro
RESOURCES += resources.qrc

==== Rebuild and Run ====
Since we added new .cpp and .h files, it would be a good idea to Build->Run Qmake; Build->Rebuild All

Run...

=== Adding code for the File Browser ===
To see another mini-app for the "Browser" button, copy these files to your project from the solution directory:
* Please rename this file to remove the .jpg due to a problem uploading to wiki.meego.com

[[Media:Qml-button-ex-rename-to-tgz.jpg]]

<pre>
Move these files to your project's qml directory (sub directory of project)
BrowserContent.qml
FileSystemView.qml
ImageViewer.qml
PathDisplay.qml

Move these files to your project's top-level directory
dirmodel.cpp
dirmodel.h
main.cpp (new code added to register a Directory Model with QML named "_model"

</pre>

Modify your project's .pro file by adding
*dirmodel.h to HEADERS
*dirmodel.cpp to SOURCES

==== Replace these two lines in MainPage.qml:====

We were using a generic red rectangle to hold a space for the BrowserContent Component, we can now use it.
<pre>
Rectangle { id: browserContent; anchors.fill: contentSpace; anchors.top: contentButtons.bottom; color: "red"; }
//BrowserContent { id: browserContent; anchors.fill: contentSpace }
</pre>

With...

<pre>
BrowserContent { id: browserContent; anchors.fill: contentSpace }
</pre>

==== Rebuild All ====

==== Run ====
Clicking on the Browser button should allow you to browse the file system. If you click on a jpg or png, the image will be previewed.

Main Page

2011-05-22T14:52:59Z

Dlawlor: /* Developer Guide */

== MeeGo Project Functions ==
* [[Community Office]]
* [[Localization team|Localization]]
* [http://meego.com/about/governance/program-office Program Office]
* [[Core_OS_Program | Core OS Program]]
* [[Handset_Program | Handset UX Program]]
* [[In-vehicle | In Vehicle Infotainment - IVI]]
* [[Product Management]]
* [[Quality]]
** [[Error Management]]
* [[Release_Engineering|Release Engineering]]
* [http://meego.com/about/governance/ui-design User Interface Design]
* [[SDK]]
* [[Architecture]]
* [[Meego IT]]

= User =

* [[MeeGo Netbook FAQ]]
* [http://meego.com/devices/netbook/installing-meego-your-netbook Install MeeGo on your netbook]
* [[Devices|Supported devices]]
* [[Install MeeGo from Hard Disk]]

= Developer =
== Developer Guide ==

* [[SDK/Docs/1.1|Developer Guide for MeeGo 1.1]]
* [[SDK/Docs/1.0|Developer Guide for MeeGo 1.0]]
* [[Build_Infrastructure | Build Infrastructure]]
* [[MeeGo Porting Guide]]
* [[QML tutorials]] - Some tutorials to help get started with QML, the Qt Modelling Language.
* [[QML/Sample_App_Using_CPP_Models | Sample App using C++ models with QML]] Build a sample QML app which uses C++ models
* [http://mxr.meego.com/ MeeGo cross reference] - Index of MeeGo source code

Other documents:
{| border="1"
! Document
! Variety (Version)
! Architectures
|-
|Instructions for [[ARM|ARM based devices (N900, BeagleBoard, PandaBoard, Snowball)]]
|All
|ARM
|-
|Instructions for [[MeeGo_1.0_Netbook_VirtualBox|VirtualBox]]
|Netbook (1.0)
|Intel
|-
|Instructions for [[MeeGo SDK on Windows with VirtualBox]]
|All
|All
|-
|Tips for [[Developing With The Aava]]
|Handset/Aava
|Intel
|}

== Release Process ==
The MeeGo Release Process includes:
* [[Release_Engineering/Process|Release process and work flow]]
* [[Release_Engineering/Release_Timeline|MeeGo releases every 6 months]]
* [[Release_Engineering/Process|Nightly builds for developers and weekly releases will be available]]

== MeeGo Components ==
* [[MeeGo_UX_Components|MeeGo Components]] - Supported common QML components
** [[Components_Migration|Migration to Components]] - Guides and roadmap for migrating from MeeGo.Labs.Components to MeeGo.Components
* [[MeeGoLabs_UX_Components|MeeGo Labs Components]] - Unsupported, experimental QML components

= Community =

== Contributing to MeeGo ==
* Read our [[Community guidelines]]: [[Wiki contribution guidelines|Wiki]], [[Mailing list guidelines|mailing list]], [[Forum/Guidelines|forum]], and [[Community guidelines|more]].
* [[Community communication|Participate in our forums, mailing lists, and more]].
* [http://meego.com/about/contribution-guidelines Contribute to MeeGo].
* [[Build_Infrastructure/Community_Builder|Building applications]] for MeeGo

See also [[Who's who]].

== Meetings ==

[[MeeGo-Meeting IRC Schedule]]

The following groups have regular meetings, see their respective pages for details.

* [[Technical Steering Group meetings]]
* [[Community Office/Meetings|Community Office meetings]]
* [[Localization team]]

Regional Activities.
* [[Local MeeGo Networks]]

== Bi-Annual MeeGo Conference ==

'''Upcoming Conferences'''
* [[MeeGo Conference Spring 2011|Spring 2011: May 23 - 25 at the Hyatt Regency, San Francisco]]
* [[MeeGo Conference Fall 2011|Fall 2011: November Date TBD in Europe]]

'''Past Conference Wrap-Up Information'''
* [[MeeGo_Conference_2010|Fall 2010: November 15 - 17 in Dublin]]

== Structure and Governance ==

MeeGo is an open source project led by the MeeGo Technical Steering Group (TSG). The governance model is based on meritocracy and the best practices and values of the Open Source culture. The MeeGo project lives under the auspices of the Linux Foundation.

* [http://meego.com/about/governance MeeGo Project Structure and Governance Overview]
* Bi-weekly [[Technical Steering Group meetings]]
* [[Working Group Process]]

== Resources ==
* [[MeeGo FAQ]]
* [[Glossary|Glossary and Acronyms]]
* [[Community guidelines]]
* [[Special:PopularPages|Popular Wiki Pages]]
* [[Special:MostLinkedPages|Most Linked-to Pages]]

[[Category:Top level]]

QML/Sample App Using CPP Models

2011-05-20T21:57:09Z

Dlawlor:

== Overview ==

This tutorial will demonstrate a simple (but non-trivial) app which uses
* Meego UX Component widgets
* C++ models
* QML List Views
* QML Components

This tutorial assumes you have the MeeGo SDK installed on Linux 
See: http://wiki.meego.com/SDK/Docs/1.2/MeeGo_SDK_1.2_Preview

Also assumed: you have a a chroot / Xephyr environment set up. 
* http://wiki.meego.com/MeeGo_UX_Components_Chroot_Tutorial
* http://wiki.meego.com/Developing_in_a_MeeGo_Environment

This tutorial will use meego-ux-components objects like:
* Book Menus -
* Buttons
* AppPage
For other uses of Meego UX Components, and another tutorial of Book Menus, See:
* http://wiki.meego.com/MeeGo_UX_Components
* http://wiki.meego.com/MeeGo_UX_Tutorials

Other QML Tutorials:
* http://wiki.meego.com/QML_tutorials

== Follow these steps on a chroot / Xephyr system ==

=== Start Qt Creator ===

<pre>
qtcreator &>/dev/null &
</pre>

=== Create a new project ===
... screen shots ...

==== The auto-generated QML File looks like this: ====

<pre>
import QtQuick 1.0

Rectangle {
width: 360
height: 360
Text {
text: "Hello World"
anchors.centerIn: parent
}
MouseArea {
anchors.fill: parent
onClicked: {
Qt.quit();
}
}
}
</pre>

==== Turn off Shadow Build====

==== Build->Build All ====

=== Run ===
(CTRL-R or Green "Play" Button)

==== The running app looks like this: ====
<screen shot>

Clicking it closes the app (Qt.quit())

=== Add code to main.qml ===

==== Replace the contents of main.qml with this: ====
The last 2 Component statements are commented out so the app will run as is before creating more files.
<pre>
import Qt 4.7
import MeeGo.Components 0.1

Window {
id: window

bookMenuModel: [ qsTr("Button Demo"), qsTr("Book 2") ]
bookMenuPayload: [ gallery, book2 ]
bookMenuTitle: qsTr("Book Menu")

Component.onCompleted: switchBook( gallery )

//Component { id: gallery; MainPage {} }
//Component { id: book2; Book2 {} }
}
</pre>

==== Test / Run ====
Run the app and see the Book Menu. If you click on one of the menu items, you'll notice an error because of the commented out Component statements.

=== Add code for the Book Page example ===
==== Adding the Book2 Component ====
(from the meego-ux-widgetgallery example)
* (right click on the QML folder in the Projects view and Add New... / QML File / "Book2.qml")

* Replace the generated file Book2.qml with this:

<pre>

/*
* Copyright 2011 Intel Corporation.
*
* This program is licensed under the terms and conditions of the
* LGPL, version 2.1. The full text of the LGPL Licence is at
* http://www.gnu.org/licenses/lgpl.html
*/

/* This file contains relativy empty pages and is meant to demonstrate the
book/page concept */

import Qt 4.7

PageDummy {
id: pageDummy

innerText: qsTr("book 2, page 1")
rectColor: "lightblue"
showButton: true
buttonLabel: qsTr("Page 2")
pageTitle: qsTr("Dummy book 2")

onClicked: { addPage( page2 ) }

Component{
id: page2;

PageDummy {
id: pageDummy2

innerText: qsTr("book 2, page 2")
rectColor: "lightgreen"
showButton: true
buttonLabel: qsTr("Page 3")
pageTitle: qsTr("Dummy book 2")

onClicked: { addPage( page3 )
}
}
}

Component{
id: page3;

PageDummy {
id: pageDummy3

innerText: qsTr("book 2, page 3")
rectColor: "orange"
showButton: true
buttonLabel: qsTr("Page 4")
pageTitle: qsTr("Dummy book 2")

onClicked: { addPage( page4 )
}
}
}

Component{
id: page4;

PageDummy {
id: pageDummy4

innerText: qsTr("book 2, page 4")
rectColor: "darkgrey"
pageTitle: qsTr("Dummy book 2")
}
}
}
</pre>

==== Add PageDummy.qml ====
The file Book2.qml references PageDummy.qml, so create it the same way as Book2.qml

<pre>
/*
* Copyright 2011 Intel Corporation.
*
* This program is licensed under the terms and conditions of the
* LGPL, version 2.1. The full text of the LGPL Licence is at
* http://www.gnu.org/licenses/lgpl.html
*/

/* This file is just meant as a dummy to quickly create pages for
demonstrating the book/page concept. */
import Qt 4.7
import MeeGo.Components 0.1

AppPage {
id: pageDummy

property alias innerText: rectText.text //text shown in the rect
property alias rectColor: innerRect.color //color of the rect in the middle
property alias showButton: nextButton.visible //nextButton visible?
property alias buttonLabel: nextButton.text //nextButton label
property string bookTitle: "book title" //shown in the title bar

signal clicked()

anchors.fill: parent

Rectangle { z: -1; anchors.fill: parent; color: "grey" } //background

Rectangle {
id: innerRect

anchors.fill: parent
anchors.margins: 50
color: "lightgreen"

Text {
id: rectText

text: "dummy page"
anchors.centerIn: parent
font.pixelSize: 40
color: "black"
}
}

Button {
id: nextButton

visible: false
text: "next page >"
anchors.right: innerRect.right
anchors.bottom: innerRect.bottom
anchors.margins: 10
onClicked: { pageDummy.clicked() }
}
}
</pre>

You will see the use of the meego-ux-components "Button" and "AppPage" components in PageDummy.qml

==== Now, replace the two commented out Component statements in main.qml with:====

<pre>
Component {
id: gallery;
AppPage {id: dummy2}
}

// Dummy page until MainPage.qml is defined
AppPage { id: gallery; }
//Component { id: gallery; MainPage {} }

Component { id: book2; Book2 {} }
</pre>

Since the MainPage.qml file isn't created yet, we use a dummy AppPage placeholder temporarily to prevent a run-time error when invoking the menu.

=== Run ===
You can now click on the Book2 menu and see a new page.

=== Add code for seeing Custom List Views in the MainPage ===

We will use a C++ QAbstractListModel to repersent out list.

==== mymodel.h ====
Create the file mymodel.h by right-clicking on the simple-app project name and "Add New..." a C++ Header File

Paste this into mymodel.h
<pre>
#ifndef MYMODEL_H
#define MYMODEL_H

#include <QAbstractListModel>
#include <QColor>

struct Data {
Data( const char* name, const QString& flag, double population )
: name(name), flag(flag), population(population) {}
QString name;
QString flag;
double population;
};

const int FlagRole = Qt::UserRole + 1;
const int PopulationRole = Qt::UserRole + 2;
class MyModel : public QAbstractListModel
{
public:
MyModel();
int rowCount( const QModelIndex& ) const;
QVariant data( const QModelIndex& index, int role = Qt::DisplayRole ) const;

QList< Data > m_data;
};

#endif // MYMODEL_H

</pre>

==== Create the mymodel.cpp file with this content:====

<pre>

#include "mymodel.h"
#include <QByteArray>
MyModel::MyModel()
{
m_data
<< Data("Denmark", "qrc:images/denmark.jpg", 5.4)
<< Data("Sweden", "qrc:images/sweden.jpg", 9.3)
<< Data("Iceland", "qrc:images/iceland.jpg", 3.2)
<< Data("Norway", "qrc:images/norway.jpg", 4.8)
<< Data("Finland", "qrc:images/finland.jpg", 5.3);

// By default the DisplayRole is mapped to the propery "display"
QHash<int, QByteArray> mapping =roleNames();
mapping.insert( FlagRole, "flag");
mapping.insert( PopulationRole, "population");
setRoleNames( mapping );
}

int MyModel::rowCount( const QModelIndex& ) const
{
return m_data.count();
}

QVariant MyModel::data(const QModelIndex &index, int role) const
{
if ( !index.isValid() )
return QVariant();

Data data = m_data[index.row()];
if ( role == Qt::DisplayRole )
return data.name;
else if ( role == FlagRole )
return data.flag;
else if ( role == PopulationRole )
return data.population;
else
return QVariant();
}

</pre>

==== Modify main.cpp ====
Modify main.cpp by replacing its contents with this:
<pre>
#include <QtGui/QApplication>
#include <QDeclarativeEngine>
#include <QDeclarativeContext>
#include "qmlapplicationviewer.h"
#include "mymodel.h"

int main(int argc, char *argv[])
{
QApplication app(argc, argv);

MyModel model;

QmlApplicationViewer viewer;
viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
viewer.setMainQmlFile(QLatin1String("qml/simple-app/main.qml"));
viewer.showExpanded();

// Register the model "myModel" with QML
QDeclarativeContext *context = viewer.engine()->rootContext();
context->setContextProperty("myModel", &model);

return app.exec();
}

</pre>

==== Add the file MainPage.qml ====

A Component called MainPage.qml which will display row of Buttons that act like Tabs in a QTabView.

The area below the buttons are filled with one of two mini-apps (List View sample, and mini file browser)
<pre>
/*
* Copyright 2011 Intel Corporation.
*
* This program is licensed under the terms and conditions of the
* LGPL, version 2.1. The full text of the LGPL Licence is at
* http://www.gnu.org/licenses/lgpl.html
*/

/* The MainPage lets the user switch between different contents which
show the widgets available in these components. */

//import Qt 4.7
import QtQuick 1.0
import MeeGo.Components 0.1

AppPage {
id: mainPage

// This will be the first app / content displayed in the Button Demo page
state: "flags"

pageTitle: qsTr("Button Demo")

// Demo an Action Menu......
// Comment the block below to see a new Action Menu

// actionMenuModel: [ qsTr("Landscape"),
// qsTr("Portrait"),
// qsTr("Inv. Landscape"),
// qsTr("Inv. Portrait") ]
// actionMenuPayload: [ 1, 2, 3, 4 ]
// actionMenuTitle: qsTr("Action Menu")

// onActionMenuTriggered: {

// if( selectedItem == 1) {
// window.orientation = 1
// } else if( selectedItem == 2) {
// window.orientation = 2
// } else if( selectedItem == 3) {
// window.orientation = 3
// } else if( selectedItem == 4) {
// window.orientation = 0
// }
// }

Item {
id: contentButtons

// Some Debug output to stderr ...
onVisibleChanged: {
console.log("xxxxxxxxxxxxxx 1 Parent wid ", parent.width);
console.log("xxxxxxxxxxxxxx 2 Wid ", width);
}
onWidthChanged: {
console.log("wwwwwwwwwwwwww 1 Parent wid ", parent.width);
console.log("wwwwwwwwwwwwww 2 Wid ", width);
}

property int buttonWidth: parent.width * 0.2;
property int buttonHeight: 60;
property int buttonMargins: 2;

property string activeButtonImage: "image://themedimage/widgets/common/button/button-default"
property string buttonImage: "image://themedimage/widgets/common/button/button"
property string buttonImagePressed: "image://themedimage/widgets/common/button/button-default-pressed"

//width: 2 * buttonWidth + 3 * buttonMargins
height: buttonHeight
anchors.top: parent.top
anchors.topMargin: 10
anchors.horizontalCenter: parent.horizontalCenter

Button {
id: flagsButton
active: true
width: parent.buttonWidth; height: parent.buttonHeight

// Since there are only two buttons, the right of this button is near the center.
anchors { margins: parent.buttonMargins; right: parent.horizontalCenter;}
text: qsTr("Flags")

onClicked: {
mainPage.state = "flags"
active = true
browserButton.active = false
}
}

Button {
id: browserButton

width: parent.buttonWidth; height: parent.buttonHeight

// This button is to the right of the flags button
anchors { margins: parent.buttonMargins; left: flagsButton.right }
text: qsTr("File Browser")

onClicked: {
mainPage.state = "browser"
active = true
flagsButton.active = false
}
}
}

// This item holds the contents of the selected button and fills the rest of the window
Item {
id: contentSpace

anchors { top: contentButtons.bottom; bottom: parent.bottom; left: parent.left; right: parent.right }
}

// One of these two components will fill the contentSpace Item above.
FlagContent { id: flagContent; anchors.fill: contentSpace; anchors.top: contentButtons.bottom }

//Placeholder until BrowserContent.qml is present
Rectangle { id: browserContent; anchors.fill: contentSpace; anchors.top: contentButtons.bottom; color: "red"; }
//BrowserContent { id: browserContent; anchors.fill: contentSpace }

Rectangle { z: -1; anchors.fill: parent; color: "grey" } //background

states: [
State {
name: "flags"
PropertyChanges { target: flagContent; visible: true }
PropertyChanges { target: browserContent; visible: false }
},
State {
name: "browser"
PropertyChanges { target: flagContent; visible: false }
PropertyChanges { target: browserContent; visible: true }
}
]
}

</pre>

==== Add the File FlagContent.qml ====

This shows an example of using a QML ListView - which uses a delegate for a row to be displayed

The model statement references a C++ model called "myModel" defined in mymodel.{h,cpp}

<pre>
import QtQuick 1.0

ListView {
clip: true
model: myModel
anchors.top: parent.bottom
anchors.fill: parent
delegate: Rectangle {
color: Qt.rgba(0.9,0.9,0.9)
height: childrenRect.height
width: parent.width
Image {
id: image
source: flag
width: 64
height: 64
fillMode: Image.PreserveAspectFit

anchors { left:parent.left; leftMargin:30}
}
Text {
text: display + "\n" +"population: " + population + " mill."
anchors { left:image.right; verticalCenter: image.verticalCenter; leftMargin: 5 }
}
}
}

</pre>

==== Modify main.qml ====
Remove this:
<pre>
AppPage { id: gallery; }
</pre>

Uncomment this line:
<pre>
Component { id: gallery; MainPage {} }
</pre>

==== Copy Resource Files ====
Copy the images and .qrc file from the solution directory:

Add this to your simple-app.pro
RESOURCES += resources.qrc

==== Rebuild and Run ====
Since we added new .cpp and .h files, it would be a good idea to Build->Run Qmake; Build->Rebuild All

Run...

=== Adding code for the File Browser ===
To see another mini-app for the "Browser" button, copy these files to your project from the solution directory:
[[Media:Qml-button-ex-rename-to-tgz.jpg]]

<pre>
Move these files to your project's qml directory (sub directory of project)
BrowserContent.qml
FileSystemView.qml
ImageViewer.qml
PathDisplay.qml

Move these files to your project's top-level directory
dirmodel.cpp
dirmodel.h
main.cpp (new code added to register a Directory Model with QML named "_model"

</pre>

Modify your project's .pro file by adding
*dirmodel.h to HEADERS
*dirmodel.cpp to SOURCES

==== Replace these two lines in MainPage.qml:====

We were using a generic red rectangle to hold a space for the BrowserContent Component, we can now use it.
<pre>
Rectangle { id: browserContent; anchors.fill: contentSpace; anchors.top: contentButtons.bottom; color: "red"; }
//BrowserContent { id: browserContent; anchors.fill: contentSpace }
</pre>

With...

<pre>
BrowserContent { id: browserContent; anchors.fill: contentSpace }
</pre>

==== Rebuild All ====

==== Run ====
Clicking on the Browser button should allow you to browse the file system. If you click on a jpg or png, the image will be previewed.

QML/Sample App Using CPP Models

2011-05-09T23:28:31Z

Dlawlor: /* Adding code for the File Browser */

== Overview ==

This tutorial will demonstrate a simple (but non-trivial) app which uses
* Meego UX Component widgets
* C++ models
* QML List Views
* QML Components

This tutorial assumes you have the MeeGo SDK installed on Linux 
See: http://wiki.meego.com/SDK/Docs/1.2/MeeGo_SDK_1.2_Preview

Also assumed: you have a a chroot / Xephyr environment set up. 
* http://wiki.meego.com/MeeGo_UX_Components_Chroot_Tutorial
* http://wiki.meego.com/Developing_in_a_MeeGo_Environment

This tutorial will use meego-ux-components objects like:
* Book Menus -
* Buttons
* AppPage
For other uses of Meego UX Components, and another tutorial of Book Menus, See:
* http://wiki.meego.com/MeeGo_UX_Components
* http://wiki.meego.com/MeeGo_UX_Tutorials

Other QML Tutorials:
* http://wiki.meego.com/QML_tutorials

== Follow these steps on a chroot / Xephyr system ==

=== Start Qt Creator ===

<pre>
qtcreator &>/dev/null &
</pre>

=== Create a new project ===
... screen shots ...

==== The auto-generated QML File looks like this: ====

<pre>
import QtQuick 1.0

Rectangle {
width: 360
height: 360
Text {
text: "Hello World"
anchors.centerIn: parent
}
MouseArea {
anchors.fill: parent
onClicked: {
Qt.quit();
}
}
}
</pre>

==== Turn off Shadow Build====

==== Build->Build All ====

=== Run ===
(CTRL-R or Green "Play" Button)

==== The running app looks like this: ====
<screen shot>

Clicking it closes the app (Qt.quit())

=== Add code to main.qml ===

==== Replace the contents of main.qml with this: ====
The last 2 Component statements are commented out so the app will run as is before creating more files.
<pre>
import Qt 4.7
import MeeGo.Components 0.1

Window {
id: window

bookMenuModel: [ qsTr("Button Demo"), qsTr("Book 2") ]
bookMenuPayload: [ gallery, book2 ]
bookMenuTitle: qsTr("Book Menu")

Component.onCompleted: switchBook( gallery )

//Component { id: gallery; MainPage {} }
//Component { id: book2; Book2 {} }
}
</pre>

==== Test / Run ====
Run the app and see the Book Menu. If you click on one of the menu items, you'll notice an error because of the commented out Component statements.

=== Add code for the Book Page example ===
==== Adding the Book2 Component ====
(from the meego-ux-widgetgallery example)
* (right click on the QML folder in the Projects view and Add New... / QML File / "Book2.qml")

* Replace the generated file Book2.qml with this:

<pre>

/*
* Copyright 2011 Intel Corporation.
*
* This program is licensed under the terms and conditions of the
* LGPL, version 2.1. The full text of the LGPL Licence is at
* http://www.gnu.org/licenses/lgpl.html
*/

/* This file contains relativy empty pages and is meant to demonstrate the
book/page concept */

import Qt 4.7

PageDummy {
id: pageDummy

innerText: qsTr("book 2, page 1")
rectColor: "lightblue"
showButton: true
buttonLabel: qsTr("Page 2")
pageTitle: qsTr("Dummy book 2")

onClicked: { addPage( page2 ) }

Component{
id: page2;

PageDummy {
id: pageDummy2

innerText: qsTr("book 2, page 2")
rectColor: "lightgreen"
showButton: true
buttonLabel: qsTr("Page 3")
pageTitle: qsTr("Dummy book 2")

onClicked: { addPage( page3 )
}
}
}

Component{
id: page3;

PageDummy {
id: pageDummy3

innerText: qsTr("book 2, page 3")
rectColor: "orange"
showButton: true
buttonLabel: qsTr("Page 4")
pageTitle: qsTr("Dummy book 2")

onClicked: { addPage( page4 )
}
}
}

Component{
id: page4;

PageDummy {
id: pageDummy4

innerText: qsTr("book 2, page 4")
rectColor: "darkgrey"
pageTitle: qsTr("Dummy book 2")
}
}
}
</pre>

==== Add PageDummy.qml ====
The file Book2.qml references PageDummy.qml, so create it the same way as Book2.qml

<pre>
/*
* Copyright 2011 Intel Corporation.
*
* This program is licensed under the terms and conditions of the
* LGPL, version 2.1. The full text of the LGPL Licence is at
* http://www.gnu.org/licenses/lgpl.html
*/

/* This file is just meant as a dummy to quickly create pages for
demonstrating the book/page concept. */
import Qt 4.7
import MeeGo.Components 0.1

AppPage {
id: pageDummy

property alias innerText: rectText.text //text shown in the rect
property alias rectColor: innerRect.color //color of the rect in the middle
property alias showButton: nextButton.visible //nextButton visible?
property alias buttonLabel: nextButton.text //nextButton label
property string bookTitle: "book title" //shown in the title bar

signal clicked()

anchors.fill: parent

Rectangle { z: -1; anchors.fill: parent; color: "grey" } //background

Rectangle {
id: innerRect

anchors.fill: parent
anchors.margins: 50
color: "lightgreen"

Text {
id: rectText

text: "dummy page"
anchors.centerIn: parent
font.pixelSize: 40
color: "black"
}
}

Button {
id: nextButton

visible: false
text: "next page >"
anchors.right: innerRect.right
anchors.bottom: innerRect.bottom
anchors.margins: 10
onClicked: { pageDummy.clicked() }
}
}
</pre>

You will see the use of the meego-ux-components "Button" and "AppPage" components in PageDummy.qml

==== Now, replace the two commented out Component statements in main.qml with:====

<pre>
Component {
id: gallery;
AppPage {id: dummy2}
}

// Dummy page until MainPage.qml is defined
AppPage { id: gallery; }
//Component { id: gallery; MainPage {} }

Component { id: book2; Book2 {} }
</pre>

Since the MainPage.qml file isn't created yet, we use a dummy AppPage placeholder temporarily to prevent a run-time error when invoking the menu.

=== Run ===
You can now click on the Book2 menu and see a new page.

=== Add code for seeing Custom List Views in the MainPage ===

We will use a C++ QAbstractListModel to repersent out list.

==== mymodel.h ====
Create the file mymodel.h by right-clicking on the simple-app project name and "Add New..." a C++ Header File

Paste this into mymodel.h
<pre>
#ifndef MYMODEL_H
#define MYMODEL_H

#include <QAbstractListModel>
#include <QColor>

struct Data {
Data( const char* name, const QString& flag, double population )
: name(name), flag(flag), population(population) {}
QString name;
QString flag;
double population;
};

const int FlagRole = Qt::UserRole + 1;
const int PopulationRole = Qt::UserRole + 2;
class MyModel : public QAbstractListModel
{
public:
MyModel();
int rowCount( const QModelIndex& ) const;
QVariant data( const QModelIndex& index, int role = Qt::DisplayRole ) const;

QList< Data > m_data;
};

#endif // MYMODEL_H

</pre>

==== Create the mymodel.cpp file with this content:====

<pre>

#include "mymodel.h"
#include <QByteArray>
MyModel::MyModel()
{
m_data
<< Data("Denmark", "qrc:images/denmark.jpg", 5.4)
<< Data("Sweden", "qrc:images/sweden.jpg", 9.3)
<< Data("Iceland", "qrc:images/iceland.jpg", 3.2)
<< Data("Norway", "qrc:images/norway.jpg", 4.8)
<< Data("Finland", "qrc:images/finland.jpg", 5.3);

// By default the DisplayRole is mapped to the propery "display"
QHash<int, QByteArray> mapping =roleNames();
mapping.insert( FlagRole, "flag");
mapping.insert( PopulationRole, "population");
setRoleNames( mapping );
}

int MyModel::rowCount( const QModelIndex& ) const
{
return m_data.count();
}

QVariant MyModel::data(const QModelIndex &index, int role) const
{
if ( !index.isValid() )
return QVariant();

Data data = m_data[index.row()];
if ( role == Qt::DisplayRole )
return data.name;
else if ( role == FlagRole )
return data.flag;
else if ( role == PopulationRole )
return data.population;
else
return QVariant();
}

</pre>

==== Modify main.cpp ====
Modify main.cpp by replacing its contents with this:
<pre>
#include <QtGui/QApplication>
#include <QDeclarativeEngine>
#include <QDeclarativeContext>
#include "qmlapplicationviewer.h"
#include "mymodel.h"

int main(int argc, char *argv[])
{
QApplication app(argc, argv);

MyModel model;

QmlApplicationViewer viewer;
viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
viewer.setMainQmlFile(QLatin1String("qml/simple-app/main.qml"));
viewer.showExpanded();

// Register the model "myModel" with QML
QDeclarativeContext *context = viewer.engine()->rootContext();
context->setContextProperty("myModel", &model);

return app.exec();
}

</pre>

==== Add the file MainPage.qml ====

A Component called MainPage.qml which will display row of Buttons that act like Tabs in a QTabView.

The area below the buttons are filled with one of two mini-apps (List View sample, and mini file browser)
<pre>
/*
* Copyright 2011 Intel Corporation.
*
* This program is licensed under the terms and conditions of the
* LGPL, version 2.1. The full text of the LGPL Licence is at
* http://www.gnu.org/licenses/lgpl.html
*/

/* The MainPage lets the user switch between different contents which
show the widgets available in these components. */

//import Qt 4.7
import QtQuick 1.0
import MeeGo.Components 0.1

AppPage {
id: mainPage

// This will be the first app / content displayed in the Button Demo page
state: "flags"

pageTitle: qsTr("Button Demo")

// Demo an Action Menu......
// Comment the block below to see a new Action Menu

// actionMenuModel: [ qsTr("Landscape"),
// qsTr("Portrait"),
// qsTr("Inv. Landscape"),
// qsTr("Inv. Portrait") ]
// actionMenuPayload: [ 1, 2, 3, 4 ]
// actionMenuTitle: qsTr("Action Menu")

// onActionMenuTriggered: {

// if( selectedItem == 1) {
// window.orientation = 1
// } else if( selectedItem == 2) {
// window.orientation = 2
// } else if( selectedItem == 3) {
// window.orientation = 3
// } else if( selectedItem == 4) {
// window.orientation = 0
// }
// }

Item {
id: contentButtons

// Some Debug output to stderr ...
onVisibleChanged: {
console.log("xxxxxxxxxxxxxx 1 Parent wid ", parent.width);
console.log("xxxxxxxxxxxxxx 2 Wid ", width);
}
onWidthChanged: {
console.log("wwwwwwwwwwwwww 1 Parent wid ", parent.width);
console.log("wwwwwwwwwwwwww 2 Wid ", width);
}

property int buttonWidth: parent.width * 0.2;
property int buttonHeight: 60;
property int buttonMargins: 2;

property string activeButtonImage: "image://themedimage/widgets/common/button/button-default"
property string buttonImage: "image://themedimage/widgets/common/button/button"
property string buttonImagePressed: "image://themedimage/widgets/common/button/button-default-pressed"

//width: 2 * buttonWidth + 3 * buttonMargins
height: buttonHeight
anchors.top: parent.top
anchors.topMargin: 10
anchors.horizontalCenter: parent.horizontalCenter

Button {
id: flagsButton
active: true
width: parent.buttonWidth; height: parent.buttonHeight

// Since there are only two buttons, the right of this button is near the center.
anchors { margins: parent.buttonMargins; right: parent.horizontalCenter;}
text: qsTr("Flags")

onClicked: {
mainPage.state = "flags"
active = true
browserButton.active = false
}
}

Button {
id: browserButton

width: parent.buttonWidth; height: parent.buttonHeight

// This button is to the right of the flags button
anchors { margins: parent.buttonMargins; left: flagsButton.right }
text: qsTr("File Browser")

onClicked: {
mainPage.state = "browser"
active = true
flagsButton.active = false
}
}
}

// This item holds the contents of the selected button and fills the rest of the window
Item {
id: contentSpace

anchors { top: contentButtons.bottom; bottom: parent.bottom; left: parent.left; right: parent.right }
}

// One of these two components will fill the contentSpace Item above.
FlagContent { id: flagContent; anchors.fill: contentSpace; anchors.top: contentButtons.bottom }

//Placeholder until BrowserContent.qml is present
Rectangle { id: browserContent; anchors.fill: contentSpace; anchors.top: contentButtons.bottom; color: "red"; }
//BrowserContent { id: browserContent; anchors.fill: contentSpace }

Rectangle { z: -1; anchors.fill: parent; color: "grey" } //background

states: [
State {
name: "flags"
PropertyChanges { target: flagContent; visible: true }
PropertyChanges { target: browserContent; visible: false }
},
State {
name: "browser"
PropertyChanges { target: flagContent; visible: false }
PropertyChanges { target: browserContent; visible: true }
}
]
}

</pre>

==== Add the File FlagContent.qml ====

This shows an example of using a QML ListView - which uses a delegate for a row to be displayed

The model statement references a C++ model called "myModel" defined in mymodel.{h,cpp}

<pre>
import QtQuick 1.0

ListView {
clip: true
model: myModel
anchors.top: parent.bottom
anchors.fill: parent
delegate: Rectangle {
color: Qt.rgba(0.9,0.9,0.9)
height: childrenRect.height
width: parent.width
Image {
id: image
source: flag
width: 64
height: 64
fillMode: Image.PreserveAspectFit

anchors { left:parent.left; leftMargin:30}
}
Text {
text: display + "\n" +"population: " + population + " mill."
anchors { left:image.right; verticalCenter: image.verticalCenter; leftMargin: 5 }
}
}
}

</pre>

==== Modify main.qml ====
Remove this:
<pre>
AppPage { id: gallery; }
</pre>

Uncomment this line:
<pre>
Component { id: gallery; MainPage {} }
</pre>

==== Copy Resource Files ====
Copy the images and .qrc file from the solution directory:

Add this to your simple-app.pro
RESOURCES += resources.qrc

==== Rebuild and Run ====
Since we added new .cpp and .h files, it would be a good idea to Build->Run Qmake; Build->Rebuild All

Run...

=== Adding code for the File Browser ===
To see another mini-app for the "Browser" button, copy these files to your project from the solution directory:

<pre>
Move these files to your project's qml directory (sub directory of project)
BrowserContent.qml
FileSystemView.qml
ImageViewer.qml
PathDisplay.qml

Move these files to your project's top-level directory
dirmodel.cpp
dirmodel.h
main.cpp (new code added to register a Directory Model with QML named "_model"

</pre>

Modify your project's .pro file by adding
*dirmodel.h to HEADERS
*dirmodel.cpp to SOURCES

==== Replace these two lines in MainPage.qml:====

We were using a generic red rectangle to hold a space for the BrowserContent Component, we can now use it.
<pre>
Rectangle { id: browserContent; anchors.fill: contentSpace; anchors.top: contentButtons.bottom; color: "red"; }
//BrowserContent { id: browserContent; anchors.fill: contentSpace }
</pre>

With...

<pre>
BrowserContent { id: browserContent; anchors.fill: contentSpace }
</pre>

==== Rebuild All ====

==== Run ====
Clicking on the Browser button should allow you to browse the file system. If you click on a jpg or png, the image will be previewed.

File:Qml-button-ex-rename-to-tgz.jpg

2011-05-06T23:56:23Z

Dlawlor: This is a .tgz file renamed to .jpg so it will upload. Please rename to qml-button-ex.tgz QML / C++ Project for completed project associated with http://wiki.meego.com/QML/Sample_App_Using_CPP_Models This is the "solution" project referenced there

This is a .tgz file renamed to .jpg so it will upload.

Please rename to qml-button-ex.tgz

QML / C++ Project for completed project associated with http://wiki.meego.com/QML/Sample_App_Using_CPP_Models

This is the "solution" project referenced there

QML/Sample App Using CPP Models

2011-05-06T23:39:27Z

Dlawlor: /* Replace these two lines in MainPage.qml: */

== Overview ==

This tutorial will demonstrate a simple (but non-trivial) app which uses
* Meego UX Component widgets
* C++ models
* QML List Views
* QML Components

This tutorial assumes you have the MeeGo SDK installed on Linux 
See: http://wiki.meego.com/SDK/Docs/1.2/MeeGo_SDK_1.2_Preview

Also assumed: you have a a chroot / Xephyr environment set up. 
* http://wiki.meego.com/MeeGo_UX_Components_Chroot_Tutorial
* http://wiki.meego.com/Developing_in_a_MeeGo_Environment

This tutorial will use meego-ux-components objects like:
* Book Menus -
* Buttons
* AppPage
For other uses of Meego UX Components, and another tutorial of Book Menus, See:
* http://wiki.meego.com/MeeGo_UX_Components
* http://wiki.meego.com/MeeGo_UX_Tutorials

Other QML Tutorials:
* http://wiki.meego.com/QML_tutorials

== Follow these steps on a chroot / Xephyr system ==

=== Start Qt Creator ===

<pre>
qtcreator &>/dev/null &
</pre>

=== Create a new project ===
... screen shots ...

==== The auto-generated QML File looks like this: ====

<pre>
import QtQuick 1.0

Rectangle {
width: 360
height: 360
Text {
text: "Hello World"
anchors.centerIn: parent
}
MouseArea {
anchors.fill: parent
onClicked: {
Qt.quit();
}
}
}
</pre>

==== Turn off Shadow Build====

==== Build->Build All ====

=== Run ===
(CTRL-R or Green "Play" Button)

==== The running app looks like this: ====
<screen shot>

Clicking it closes the app (Qt.quit())

=== Add code to main.qml ===

==== Replace the contents of main.qml with this: ====
The last 2 Component statements are commented out so the app will run as is before creating more files.
<pre>
import Qt 4.7
import MeeGo.Components 0.1

Window {
id: window

bookMenuModel: [ qsTr("Button Demo"), qsTr("Book 2") ]
bookMenuPayload: [ gallery, book2 ]
bookMenuTitle: qsTr("Book Menu")

Component.onCompleted: switchBook( gallery )

//Component { id: gallery; MainPage {} }
//Component { id: book2; Book2 {} }
}
</pre>

==== Test / Run ====
Run the app and see the Book Menu. If you click on one of the menu items, you'll notice an error because of the commented out Component statements.

=== Add code for the Book Page example ===
==== Adding the Book2 Component ====
(from the meego-ux-widgetgallery example)
* (right click on the QML folder in the Projects view and Add New... / QML File / "Book2.qml")

* Replace the generated file Book2.qml with this:

<pre>

/*
* Copyright 2011 Intel Corporation.
*
* This program is licensed under the terms and conditions of the
* LGPL, version 2.1. The full text of the LGPL Licence is at
* http://www.gnu.org/licenses/lgpl.html
*/

/* This file contains relativy empty pages and is meant to demonstrate the
book/page concept */

import Qt 4.7

PageDummy {
id: pageDummy

innerText: qsTr("book 2, page 1")
rectColor: "lightblue"
showButton: true
buttonLabel: qsTr("Page 2")
pageTitle: qsTr("Dummy book 2")

onClicked: { addPage( page2 ) }

Component{
id: page2;

PageDummy {
id: pageDummy2

innerText: qsTr("book 2, page 2")
rectColor: "lightgreen"
showButton: true
buttonLabel: qsTr("Page 3")
pageTitle: qsTr("Dummy book 2")

onClicked: { addPage( page3 )
}
}
}

Component{
id: page3;

PageDummy {
id: pageDummy3

innerText: qsTr("book 2, page 3")
rectColor: "orange"
showButton: true
buttonLabel: qsTr("Page 4")
pageTitle: qsTr("Dummy book 2")

onClicked: { addPage( page4 )
}
}
}

Component{
id: page4;

PageDummy {
id: pageDummy4

innerText: qsTr("book 2, page 4")
rectColor: "darkgrey"
pageTitle: qsTr("Dummy book 2")
}
}
}
</pre>

==== Add PageDummy.qml ====
The file Book2.qml references PageDummy.qml, so create it the same way as Book2.qml

<pre>
/*
* Copyright 2011 Intel Corporation.
*
* This program is licensed under the terms and conditions of the
* LGPL, version 2.1. The full text of the LGPL Licence is at
* http://www.gnu.org/licenses/lgpl.html
*/

/* This file is just meant as a dummy to quickly create pages for
demonstrating the book/page concept. */
import Qt 4.7
import MeeGo.Components 0.1

AppPage {
id: pageDummy

property alias innerText: rectText.text //text shown in the rect
property alias rectColor: innerRect.color //color of the rect in the middle
property alias showButton: nextButton.visible //nextButton visible?
property alias buttonLabel: nextButton.text //nextButton label
property string bookTitle: "book title" //shown in the title bar

signal clicked()

anchors.fill: parent

Rectangle { z: -1; anchors.fill: parent; color: "grey" } //background

Rectangle {
id: innerRect

anchors.fill: parent
anchors.margins: 50
color: "lightgreen"

Text {
id: rectText

text: "dummy page"
anchors.centerIn: parent
font.pixelSize: 40
color: "black"
}
}

Button {
id: nextButton

visible: false
text: "next page >"
anchors.right: innerRect.right
anchors.bottom: innerRect.bottom
anchors.margins: 10
onClicked: { pageDummy.clicked() }
}
}
</pre>

You will see the use of the meego-ux-components "Button" and "AppPage" components in PageDummy.qml

==== Now, replace the two commented out Component statements in main.qml with:====

<pre>
Component {
id: gallery;
AppPage {id: dummy2}
}

// Dummy page until MainPage.qml is defined
AppPage { id: gallery; }
//Component { id: gallery; MainPage {} }

Component { id: book2; Book2 {} }
</pre>

Since the MainPage.qml file isn't created yet, we use a dummy AppPage placeholder temporarily to prevent a run-time error when invoking the menu.

=== Run ===
You can now click on the Book2 menu and see a new page.

=== Add code for seeing Custom List Views in the MainPage ===

We will use a C++ QAbstractListModel to repersent out list.

==== mymodel.h ====
Create the file mymodel.h by right-clicking on the simple-app project name and "Add New..." a C++ Header File

Paste this into mymodel.h
<pre>
#ifndef MYMODEL_H
#define MYMODEL_H

#include <QAbstractListModel>
#include <QColor>

struct Data {
Data( const char* name, const QString& flag, double population )
: name(name), flag(flag), population(population) {}
QString name;
QString flag;
double population;
};

const int FlagRole = Qt::UserRole + 1;
const int PopulationRole = Qt::UserRole + 2;
class MyModel : public QAbstractListModel
{
public:
MyModel();
int rowCount( const QModelIndex& ) const;
QVariant data( const QModelIndex& index, int role = Qt::DisplayRole ) const;

QList< Data > m_data;
};

#endif // MYMODEL_H

</pre>

==== Create the mymodel.cpp file with this content:====

<pre>

#include "mymodel.h"
#include <QByteArray>
MyModel::MyModel()
{
m_data
<< Data("Denmark", "qrc:images/denmark.jpg", 5.4)
<< Data("Sweden", "qrc:images/sweden.jpg", 9.3)
<< Data("Iceland", "qrc:images/iceland.jpg", 3.2)
<< Data("Norway", "qrc:images/norway.jpg", 4.8)
<< Data("Finland", "qrc:images/finland.jpg", 5.3);

// By default the DisplayRole is mapped to the propery "display"
QHash<int, QByteArray> mapping =roleNames();
mapping.insert( FlagRole, "flag");
mapping.insert( PopulationRole, "population");
setRoleNames( mapping );
}

int MyModel::rowCount( const QModelIndex& ) const
{
return m_data.count();
}

QVariant MyModel::data(const QModelIndex &index, int role) const
{
if ( !index.isValid() )
return QVariant();

Data data = m_data[index.row()];
if ( role == Qt::DisplayRole )
return data.name;
else if ( role == FlagRole )
return data.flag;
else if ( role == PopulationRole )
return data.population;
else
return QVariant();
}

</pre>

==== Modify main.cpp ====
Modify main.cpp by replacing its contents with this:
<pre>
#include <QtGui/QApplication>
#include <QDeclarativeEngine>
#include <QDeclarativeContext>
#include "qmlapplicationviewer.h"
#include "mymodel.h"

int main(int argc, char *argv[])
{
QApplication app(argc, argv);

MyModel model;

QmlApplicationViewer viewer;
viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
viewer.setMainQmlFile(QLatin1String("qml/simple-app/main.qml"));
viewer.showExpanded();

// Register the model "myModel" with QML
QDeclarativeContext *context = viewer.engine()->rootContext();
context->setContextProperty("myModel", &model);

return app.exec();
}

</pre>

==== Add the file MainPage.qml ====

A Component called MainPage.qml which will display row of Buttons that act like Tabs in a QTabView.

The area below the buttons are filled with one of two mini-apps (List View sample, and mini file browser)
<pre>
/*
* Copyright 2011 Intel Corporation.
*
* This program is licensed under the terms and conditions of the
* LGPL, version 2.1. The full text of the LGPL Licence is at
* http://www.gnu.org/licenses/lgpl.html
*/

/* The MainPage lets the user switch between different contents which
show the widgets available in these components. */

//import Qt 4.7
import QtQuick 1.0
import MeeGo.Components 0.1

AppPage {
id: mainPage

// This will be the first app / content displayed in the Button Demo page
state: "flags"

pageTitle: qsTr("Button Demo")

// Demo an Action Menu......
// Comment the block below to see a new Action Menu

// actionMenuModel: [ qsTr("Landscape"),
// qsTr("Portrait"),
// qsTr("Inv. Landscape"),
// qsTr("Inv. Portrait") ]
// actionMenuPayload: [ 1, 2, 3, 4 ]
// actionMenuTitle: qsTr("Action Menu")

// onActionMenuTriggered: {

// if( selectedItem == 1) {
// window.orientation = 1
// } else if( selectedItem == 2) {
// window.orientation = 2
// } else if( selectedItem == 3) {
// window.orientation = 3
// } else if( selectedItem == 4) {
// window.orientation = 0
// }
// }

Item {
id: contentButtons

// Some Debug output to stderr ...
onVisibleChanged: {
console.log("xxxxxxxxxxxxxx 1 Parent wid ", parent.width);
console.log("xxxxxxxxxxxxxx 2 Wid ", width);
}
onWidthChanged: {
console.log("wwwwwwwwwwwwww 1 Parent wid ", parent.width);
console.log("wwwwwwwwwwwwww 2 Wid ", width);
}

property int buttonWidth: parent.width * 0.2;
property int buttonHeight: 60;
property int buttonMargins: 2;

property string activeButtonImage: "image://themedimage/widgets/common/button/button-default"
property string buttonImage: "image://themedimage/widgets/common/button/button"
property string buttonImagePressed: "image://themedimage/widgets/common/button/button-default-pressed"

//width: 2 * buttonWidth + 3 * buttonMargins
height: buttonHeight
anchors.top: parent.top
anchors.topMargin: 10
anchors.horizontalCenter: parent.horizontalCenter

Button {
id: flagsButton
active: true
width: parent.buttonWidth; height: parent.buttonHeight

// Since there are only two buttons, the right of this button is near the center.
anchors { margins: parent.buttonMargins; right: parent.horizontalCenter;}
text: qsTr("Flags")

onClicked: {
mainPage.state = "flags"
active = true
browserButton.active = false
}
}

Button {
id: browserButton

width: parent.buttonWidth; height: parent.buttonHeight

// This button is to the right of the flags button
anchors { margins: parent.buttonMargins; left: flagsButton.right }
text: qsTr("File Browser")

onClicked: {
mainPage.state = "browser"
active = true
flagsButton.active = false
}
}
}

// This item holds the contents of the selected button and fills the rest of the window
Item {
id: contentSpace

anchors { top: contentButtons.bottom; bottom: parent.bottom; left: parent.left; right: parent.right }
}

// One of these two components will fill the contentSpace Item above.
FlagContent { id: flagContent; anchors.fill: contentSpace; anchors.top: contentButtons.bottom }

//Placeholder until BrowserContent.qml is present
Rectangle { id: browserContent; anchors.fill: contentSpace; anchors.top: contentButtons.bottom; color: "red"; }
//BrowserContent { id: browserContent; anchors.fill: contentSpace }

Rectangle { z: -1; anchors.fill: parent; color: "grey" } //background

states: [
State {
name: "flags"
PropertyChanges { target: flagContent; visible: true }
PropertyChanges { target: browserContent; visible: false }
},
State {
name: "browser"
PropertyChanges { target: flagContent; visible: false }
PropertyChanges { target: browserContent; visible: true }
}
]
}

</pre>

==== Add the File FlagContent.qml ====

This shows an example of using a QML ListView - which uses a delegate for a row to be displayed

The model statement references a C++ model called "myModel" defined in mymodel.{h,cpp}

<pre>
import QtQuick 1.0

ListView {
clip: true
model: myModel
anchors.top: parent.bottom
anchors.fill: parent
delegate: Rectangle {
color: Qt.rgba(0.9,0.9,0.9)
height: childrenRect.height
width: parent.width
Image {
id: image
source: flag
width: 64
height: 64
fillMode: Image.PreserveAspectFit

anchors { left:parent.left; leftMargin:30}
}
Text {
text: display + "\n" +"population: " + population + " mill."
anchors { left:image.right; verticalCenter: image.verticalCenter; leftMargin: 5 }
}
}
}

</pre>

==== Modify main.qml ====
Remove this:
<pre>
AppPage { id: gallery; }
</pre>

Uncomment this line:
<pre>
Component { id: gallery; MainPage {} }
</pre>

==== Copy Resource Files ====
Copy the images and .qrc file from the solution directory:

Add this to your simple-app.pro
RESOURCES += resources.qrc

==== Rebuild and Run ====
Since we added new .cpp and .h files, it would be a good idea to Build->Run Qmake; Build->Rebuild All

Run...

=== Adding code for the File Browser ===
To see another mini-app for the "Browser" button, copy these files to your project from the solution directory:

<pre>
BrowserContent.qml
FileSystemView.qml
ImageViewer.qml
PathDisplay.qml

dirmodel.cpp
dirmodel.h

main.cpp (new code added to register a Directory Model with QML named "_model"

</pre>

==== Replace these two lines in MainPage.qml:====

We were using a generic red rectangle to hold a space for the BrowserContent Component, we can now use it.
<pre>
Rectangle { id: browserContent; anchors.fill: contentSpace; anchors.top: contentButtons.bottom; color: "red"; }
//BrowserContent { id: browserContent; anchors.fill: contentSpace }
</pre>

With...

<pre>
BrowserContent { id: browserContent; anchors.fill: contentSpace }
</pre>

==== Rebuild All ====

==== Run ====
Clicking on the Browser button should allow you to browse the file system. If you click on a jpg or png, the image will be previewed.

QML/Sample App Using CPP Models

2011-05-06T23:38:09Z

Dlawlor: /* Add the File FlagContent.qml */

== Overview ==

This tutorial will demonstrate a simple (but non-trivial) app which uses
* Meego UX Component widgets
* C++ models
* QML List Views
* QML Components

This tutorial assumes you have the MeeGo SDK installed on Linux 
See: http://wiki.meego.com/SDK/Docs/1.2/MeeGo_SDK_1.2_Preview

Also assumed: you have a a chroot / Xephyr environment set up. 
* http://wiki.meego.com/MeeGo_UX_Components_Chroot_Tutorial
* http://wiki.meego.com/Developing_in_a_MeeGo_Environment

This tutorial will use meego-ux-components objects like:
* Book Menus -
* Buttons
* AppPage
For other uses of Meego UX Components, and another tutorial of Book Menus, See:
* http://wiki.meego.com/MeeGo_UX_Components
* http://wiki.meego.com/MeeGo_UX_Tutorials

Other QML Tutorials:
* http://wiki.meego.com/QML_tutorials

== Follow these steps on a chroot / Xephyr system ==

=== Start Qt Creator ===

<pre>
qtcreator &>/dev/null &
</pre>

=== Create a new project ===
... screen shots ...

==== The auto-generated QML File looks like this: ====

<pre>
import QtQuick 1.0

Rectangle {
width: 360
height: 360
Text {
text: "Hello World"
anchors.centerIn: parent
}
MouseArea {
anchors.fill: parent
onClicked: {
Qt.quit();
}
}
}
</pre>

==== Turn off Shadow Build====

==== Build->Build All ====

=== Run ===
(CTRL-R or Green "Play" Button)

==== The running app looks like this: ====
<screen shot>

Clicking it closes the app (Qt.quit())

=== Add code to main.qml ===

==== Replace the contents of main.qml with this: ====
The last 2 Component statements are commented out so the app will run as is before creating more files.
<pre>
import Qt 4.7
import MeeGo.Components 0.1

Window {
id: window

bookMenuModel: [ qsTr("Button Demo"), qsTr("Book 2") ]
bookMenuPayload: [ gallery, book2 ]
bookMenuTitle: qsTr("Book Menu")

Component.onCompleted: switchBook( gallery )

//Component { id: gallery; MainPage {} }
//Component { id: book2; Book2 {} }
}
</pre>

==== Test / Run ====
Run the app and see the Book Menu. If you click on one of the menu items, you'll notice an error because of the commented out Component statements.

=== Add code for the Book Page example ===
==== Adding the Book2 Component ====
(from the meego-ux-widgetgallery example)
* (right click on the QML folder in the Projects view and Add New... / QML File / "Book2.qml")

* Replace the generated file Book2.qml with this:

<pre>

/*
* Copyright 2011 Intel Corporation.
*
* This program is licensed under the terms and conditions of the
* LGPL, version 2.1. The full text of the LGPL Licence is at
* http://www.gnu.org/licenses/lgpl.html
*/

/* This file contains relativy empty pages and is meant to demonstrate the
book/page concept */

import Qt 4.7

PageDummy {
id: pageDummy

innerText: qsTr("book 2, page 1")
rectColor: "lightblue"
showButton: true
buttonLabel: qsTr("Page 2")
pageTitle: qsTr("Dummy book 2")

onClicked: { addPage( page2 ) }

Component{
id: page2;

PageDummy {
id: pageDummy2

innerText: qsTr("book 2, page 2")
rectColor: "lightgreen"
showButton: true
buttonLabel: qsTr("Page 3")
pageTitle: qsTr("Dummy book 2")

onClicked: { addPage( page3 )
}
}
}

Component{
id: page3;

PageDummy {
id: pageDummy3

innerText: qsTr("book 2, page 3")
rectColor: "orange"
showButton: true
buttonLabel: qsTr("Page 4")
pageTitle: qsTr("Dummy book 2")

onClicked: { addPage( page4 )
}
}
}

Component{
id: page4;

PageDummy {
id: pageDummy4

innerText: qsTr("book 2, page 4")
rectColor: "darkgrey"
pageTitle: qsTr("Dummy book 2")
}
}
}
</pre>

==== Add PageDummy.qml ====
The file Book2.qml references PageDummy.qml, so create it the same way as Book2.qml

<pre>
/*
* Copyright 2011 Intel Corporation.
*
* This program is licensed under the terms and conditions of the
* LGPL, version 2.1. The full text of the LGPL Licence is at
* http://www.gnu.org/licenses/lgpl.html
*/

/* This file is just meant as a dummy to quickly create pages for
demonstrating the book/page concept. */
import Qt 4.7
import MeeGo.Components 0.1

AppPage {
id: pageDummy

property alias innerText: rectText.text //text shown in the rect
property alias rectColor: innerRect.color //color of the rect in the middle
property alias showButton: nextButton.visible //nextButton visible?
property alias buttonLabel: nextButton.text //nextButton label
property string bookTitle: "book title" //shown in the title bar

signal clicked()

anchors.fill: parent

Rectangle { z: -1; anchors.fill: parent; color: "grey" } //background

Rectangle {
id: innerRect

anchors.fill: parent
anchors.margins: 50
color: "lightgreen"

Text {
id: rectText

text: "dummy page"
anchors.centerIn: parent
font.pixelSize: 40
color: "black"
}
}

Button {
id: nextButton

visible: false
text: "next page >"
anchors.right: innerRect.right
anchors.bottom: innerRect.bottom
anchors.margins: 10
onClicked: { pageDummy.clicked() }
}
}
</pre>

You will see the use of the meego-ux-components "Button" and "AppPage" components in PageDummy.qml

==== Now, replace the two commented out Component statements in main.qml with:====

<pre>
Component {
id: gallery;
AppPage {id: dummy2}
}

// Dummy page until MainPage.qml is defined
AppPage { id: gallery; }
//Component { id: gallery; MainPage {} }

Component { id: book2; Book2 {} }
</pre>

Since the MainPage.qml file isn't created yet, we use a dummy AppPage placeholder temporarily to prevent a run-time error when invoking the menu.

=== Run ===
You can now click on the Book2 menu and see a new page.

=== Add code for seeing Custom List Views in the MainPage ===

We will use a C++ QAbstractListModel to repersent out list.

==== mymodel.h ====
Create the file mymodel.h by right-clicking on the simple-app project name and "Add New..." a C++ Header File

Paste this into mymodel.h
<pre>
#ifndef MYMODEL_H
#define MYMODEL_H

#include <QAbstractListModel>
#include <QColor>

struct Data {
Data( const char* name, const QString& flag, double population )
: name(name), flag(flag), population(population) {}
QString name;
QString flag;
double population;
};

const int FlagRole = Qt::UserRole + 1;
const int PopulationRole = Qt::UserRole + 2;
class MyModel : public QAbstractListModel
{
public:
MyModel();
int rowCount( const QModelIndex& ) const;
QVariant data( const QModelIndex& index, int role = Qt::DisplayRole ) const;

QList< Data > m_data;
};

#endif // MYMODEL_H

</pre>

==== Create the mymodel.cpp file with this content:====

<pre>

#include "mymodel.h"
#include <QByteArray>
MyModel::MyModel()
{
m_data
<< Data("Denmark", "qrc:images/denmark.jpg", 5.4)
<< Data("Sweden", "qrc:images/sweden.jpg", 9.3)
<< Data("Iceland", "qrc:images/iceland.jpg", 3.2)
<< Data("Norway", "qrc:images/norway.jpg", 4.8)
<< Data("Finland", "qrc:images/finland.jpg", 5.3);

// By default the DisplayRole is mapped to the propery "display"
QHash<int, QByteArray> mapping =roleNames();
mapping.insert( FlagRole, "flag");
mapping.insert( PopulationRole, "population");
setRoleNames( mapping );
}

int MyModel::rowCount( const QModelIndex& ) const
{
return m_data.count();
}

QVariant MyModel::data(const QModelIndex &index, int role) const
{
if ( !index.isValid() )
return QVariant();

Data data = m_data[index.row()];
if ( role == Qt::DisplayRole )
return data.name;
else if ( role == FlagRole )
return data.flag;
else if ( role == PopulationRole )
return data.population;
else
return QVariant();
}

</pre>

==== Modify main.cpp ====
Modify main.cpp by replacing its contents with this:
<pre>
#include <QtGui/QApplication>
#include <QDeclarativeEngine>
#include <QDeclarativeContext>
#include "qmlapplicationviewer.h"
#include "mymodel.h"

int main(int argc, char *argv[])
{
QApplication app(argc, argv);

MyModel model;

QmlApplicationViewer viewer;
viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
viewer.setMainQmlFile(QLatin1String("qml/simple-app/main.qml"));
viewer.showExpanded();

// Register the model "myModel" with QML
QDeclarativeContext *context = viewer.engine()->rootContext();
context->setContextProperty("myModel", &model);

return app.exec();
}

</pre>

==== Add the file MainPage.qml ====

A Component called MainPage.qml which will display row of Buttons that act like Tabs in a QTabView.

The area below the buttons are filled with one of two mini-apps (List View sample, and mini file browser)
<pre>
/*
* Copyright 2011 Intel Corporation.
*
* This program is licensed under the terms and conditions of the
* LGPL, version 2.1. The full text of the LGPL Licence is at
* http://www.gnu.org/licenses/lgpl.html
*/

/* The MainPage lets the user switch between different contents which
show the widgets available in these components. */

//import Qt 4.7
import QtQuick 1.0
import MeeGo.Components 0.1

AppPage {
id: mainPage

// This will be the first app / content displayed in the Button Demo page
state: "flags"

pageTitle: qsTr("Button Demo")

// Demo an Action Menu......
// Comment the block below to see a new Action Menu

// actionMenuModel: [ qsTr("Landscape"),
// qsTr("Portrait"),
// qsTr("Inv. Landscape"),
// qsTr("Inv. Portrait") ]
// actionMenuPayload: [ 1, 2, 3, 4 ]
// actionMenuTitle: qsTr("Action Menu")

// onActionMenuTriggered: {

// if( selectedItem == 1) {
// window.orientation = 1
// } else if( selectedItem == 2) {
// window.orientation = 2
// } else if( selectedItem == 3) {
// window.orientation = 3
// } else if( selectedItem == 4) {
// window.orientation = 0
// }
// }

Item {
id: contentButtons

// Some Debug output to stderr ...
onVisibleChanged: {
console.log("xxxxxxxxxxxxxx 1 Parent wid ", parent.width);
console.log("xxxxxxxxxxxxxx 2 Wid ", width);
}
onWidthChanged: {
console.log("wwwwwwwwwwwwww 1 Parent wid ", parent.width);
console.log("wwwwwwwwwwwwww 2 Wid ", width);
}

property int buttonWidth: parent.width * 0.2;
property int buttonHeight: 60;
property int buttonMargins: 2;

property string activeButtonImage: "image://themedimage/widgets/common/button/button-default"
property string buttonImage: "image://themedimage/widgets/common/button/button"
property string buttonImagePressed: "image://themedimage/widgets/common/button/button-default-pressed"

//width: 2 * buttonWidth + 3 * buttonMargins
height: buttonHeight
anchors.top: parent.top
anchors.topMargin: 10
anchors.horizontalCenter: parent.horizontalCenter

Button {
id: flagsButton
active: true
width: parent.buttonWidth; height: parent.buttonHeight

// Since there are only two buttons, the right of this button is near the center.
anchors { margins: parent.buttonMargins; right: parent.horizontalCenter;}
text: qsTr("Flags")

onClicked: {
mainPage.state = "flags"
active = true
browserButton.active = false
}
}

Button {
id: browserButton

width: parent.buttonWidth; height: parent.buttonHeight

// This button is to the right of the flags button
anchors { margins: parent.buttonMargins; left: flagsButton.right }
text: qsTr("File Browser")

onClicked: {
mainPage.state = "browser"
active = true
flagsButton.active = false
}
}
}

// This item holds the contents of the selected button and fills the rest of the window
Item {
id: contentSpace

anchors { top: contentButtons.bottom; bottom: parent.bottom; left: parent.left; right: parent.right }
}

// One of these two components will fill the contentSpace Item above.
FlagContent { id: flagContent; anchors.fill: contentSpace; anchors.top: contentButtons.bottom }

//Placeholder until BrowserContent.qml is present
Rectangle { id: browserContent; anchors.fill: contentSpace; anchors.top: contentButtons.bottom; color: "red"; }
//BrowserContent { id: browserContent; anchors.fill: contentSpace }

Rectangle { z: -1; anchors.fill: parent; color: "grey" } //background

states: [
State {
name: "flags"
PropertyChanges { target: flagContent; visible: true }
PropertyChanges { target: browserContent; visible: false }
},
State {
name: "browser"
PropertyChanges { target: flagContent; visible: false }
PropertyChanges { target: browserContent; visible: true }
}
]
}

</pre>

==== Add the File FlagContent.qml ====

This shows an example of using a QML ListView - which uses a delegate for a row to be displayed

The model statement references a C++ model called "myModel" defined in mymodel.{h,cpp}

<pre>
import QtQuick 1.0

ListView {
clip: true
model: myModel
anchors.top: parent.bottom
anchors.fill: parent
delegate: Rectangle {
color: Qt.rgba(0.9,0.9,0.9)
height: childrenRect.height
width: parent.width
Image {
id: image
source: flag
width: 64
height: 64
fillMode: Image.PreserveAspectFit

anchors { left:parent.left; leftMargin:30}
}
Text {
text: display + "\n" +"population: " + population + " mill."
anchors { left:image.right; verticalCenter: image.verticalCenter; leftMargin: 5 }
}
}
}

</pre>

==== Modify main.qml ====
Remove this:
<pre>
AppPage { id: gallery; }
</pre>

Uncomment this line:
<pre>
Component { id: gallery; MainPage {} }
</pre>

==== Copy Resource Files ====
Copy the images and .qrc file from the solution directory:

Add this to your simple-app.pro
RESOURCES += resources.qrc

==== Rebuild and Run ====
Since we added new .cpp and .h files, it would be a good idea to Build->Run Qmake; Build->Rebuild All

Run...

=== Adding code for the File Browser ===
To see another mini-app for the "Browser" button, copy these files to your project from the solution directory:

<pre>
BrowserContent.qml
FileSystemView.qml
ImageViewer.qml
PathDisplay.qml

dirmodel.cpp
dirmodel.h

main.cpp (new code added to register a Directory Model with QML named "_model"

</pre>

==== Replace these two lines in MainPage.qml:====

<pre>
Rectangle { id: browserContent; anchors.fill: contentSpace; anchors.top: contentButtons.bottom; color: "red"; }
//BrowserContent { id: browserContent; anchors.fill: contentSpace }
</pre>

With...

<pre>
BrowserContent { id: browserContent; anchors.fill: contentSpace }
</pre>

==== Rebuild All ====

==== Run ====
Clicking on the Browser button should allow you to browse the file system. If you click on a jpg or png, the image will be previewed.

QML/Sample App Using CPP Models

2011-05-06T23:36:25Z

Dlawlor: /* Add the file MainPage.qml */

== Overview ==

This tutorial will demonstrate a simple (but non-trivial) app which uses
* Meego UX Component widgets
* C++ models
* QML List Views
* QML Components

This tutorial assumes you have the MeeGo SDK installed on Linux 
See: http://wiki.meego.com/SDK/Docs/1.2/MeeGo_SDK_1.2_Preview

Also assumed: you have a a chroot / Xephyr environment set up. 
* http://wiki.meego.com/MeeGo_UX_Components_Chroot_Tutorial
* http://wiki.meego.com/Developing_in_a_MeeGo_Environment

This tutorial will use meego-ux-components objects like:
* Book Menus -
* Buttons
* AppPage
For other uses of Meego UX Components, and another tutorial of Book Menus, See:
* http://wiki.meego.com/MeeGo_UX_Components
* http://wiki.meego.com/MeeGo_UX_Tutorials

Other QML Tutorials:
* http://wiki.meego.com/QML_tutorials

== Follow these steps on a chroot / Xephyr system ==

=== Start Qt Creator ===

<pre>
qtcreator &>/dev/null &
</pre>

=== Create a new project ===
... screen shots ...

==== The auto-generated QML File looks like this: ====

<pre>
import QtQuick 1.0

Rectangle {
width: 360
height: 360
Text {
text: "Hello World"
anchors.centerIn: parent
}
MouseArea {
anchors.fill: parent
onClicked: {
Qt.quit();
}
}
}
</pre>

==== Turn off Shadow Build====

==== Build->Build All ====

=== Run ===
(CTRL-R or Green "Play" Button)

==== The running app looks like this: ====
<screen shot>

Clicking it closes the app (Qt.quit())

=== Add code to main.qml ===

==== Replace the contents of main.qml with this: ====
The last 2 Component statements are commented out so the app will run as is before creating more files.
<pre>
import Qt 4.7
import MeeGo.Components 0.1

Window {
id: window

bookMenuModel: [ qsTr("Button Demo"), qsTr("Book 2") ]
bookMenuPayload: [ gallery, book2 ]
bookMenuTitle: qsTr("Book Menu")

Component.onCompleted: switchBook( gallery )

//Component { id: gallery; MainPage {} }
//Component { id: book2; Book2 {} }
}
</pre>

==== Test / Run ====
Run the app and see the Book Menu. If you click on one of the menu items, you'll notice an error because of the commented out Component statements.

=== Add code for the Book Page example ===
==== Adding the Book2 Component ====
(from the meego-ux-widgetgallery example)
* (right click on the QML folder in the Projects view and Add New... / QML File / "Book2.qml")

* Replace the generated file Book2.qml with this:

<pre>

/*
* Copyright 2011 Intel Corporation.
*
* This program is licensed under the terms and conditions of the
* LGPL, version 2.1. The full text of the LGPL Licence is at
* http://www.gnu.org/licenses/lgpl.html
*/

/* This file contains relativy empty pages and is meant to demonstrate the
book/page concept */

import Qt 4.7

PageDummy {
id: pageDummy

innerText: qsTr("book 2, page 1")
rectColor: "lightblue"
showButton: true
buttonLabel: qsTr("Page 2")
pageTitle: qsTr("Dummy book 2")

onClicked: { addPage( page2 ) }

Component{
id: page2;

PageDummy {
id: pageDummy2

innerText: qsTr("book 2, page 2")
rectColor: "lightgreen"
showButton: true
buttonLabel: qsTr("Page 3")
pageTitle: qsTr("Dummy book 2")

onClicked: { addPage( page3 )
}
}
}

Component{
id: page3;

PageDummy {
id: pageDummy3

innerText: qsTr("book 2, page 3")
rectColor: "orange"
showButton: true
buttonLabel: qsTr("Page 4")
pageTitle: qsTr("Dummy book 2")

onClicked: { addPage( page4 )
}
}
}

Component{
id: page4;

PageDummy {
id: pageDummy4

innerText: qsTr("book 2, page 4")
rectColor: "darkgrey"
pageTitle: qsTr("Dummy book 2")
}
}
}
</pre>

==== Add PageDummy.qml ====
The file Book2.qml references PageDummy.qml, so create it the same way as Book2.qml

<pre>
/*
* Copyright 2011 Intel Corporation.
*
* This program is licensed under the terms and conditions of the
* LGPL, version 2.1. The full text of the LGPL Licence is at
* http://www.gnu.org/licenses/lgpl.html
*/

/* This file is just meant as a dummy to quickly create pages for
demonstrating the book/page concept. */
import Qt 4.7
import MeeGo.Components 0.1

AppPage {
id: pageDummy

property alias innerText: rectText.text //text shown in the rect
property alias rectColor: innerRect.color //color of the rect in the middle
property alias showButton: nextButton.visible //nextButton visible?
property alias buttonLabel: nextButton.text //nextButton label
property string bookTitle: "book title" //shown in the title bar

signal clicked()

anchors.fill: parent

Rectangle { z: -1; anchors.fill: parent; color: "grey" } //background

Rectangle {
id: innerRect

anchors.fill: parent
anchors.margins: 50
color: "lightgreen"

Text {
id: rectText

text: "dummy page"
anchors.centerIn: parent
font.pixelSize: 40
color: "black"
}
}

Button {
id: nextButton

visible: false
text: "next page >"
anchors.right: innerRect.right
anchors.bottom: innerRect.bottom
anchors.margins: 10
onClicked: { pageDummy.clicked() }
}
}
</pre>

You will see the use of the meego-ux-components "Button" and "AppPage" components in PageDummy.qml

==== Now, replace the two commented out Component statements in main.qml with:====

<pre>
Component {
id: gallery;
AppPage {id: dummy2}
}

// Dummy page until MainPage.qml is defined
AppPage { id: gallery; }
//Component { id: gallery; MainPage {} }

Component { id: book2; Book2 {} }
</pre>

Since the MainPage.qml file isn't created yet, we use a dummy AppPage placeholder temporarily to prevent a run-time error when invoking the menu.

=== Run ===
You can now click on the Book2 menu and see a new page.

=== Add code for seeing Custom List Views in the MainPage ===

We will use a C++ QAbstractListModel to repersent out list.

==== mymodel.h ====
Create the file mymodel.h by right-clicking on the simple-app project name and "Add New..." a C++ Header File

Paste this into mymodel.h
<pre>
#ifndef MYMODEL_H
#define MYMODEL_H

#include <QAbstractListModel>
#include <QColor>

struct Data {
Data( const char* name, const QString& flag, double population )
: name(name), flag(flag), population(population) {}
QString name;
QString flag;
double population;
};

const int FlagRole = Qt::UserRole + 1;
const int PopulationRole = Qt::UserRole + 2;
class MyModel : public QAbstractListModel
{
public:
MyModel();
int rowCount( const QModelIndex& ) const;
QVariant data( const QModelIndex& index, int role = Qt::DisplayRole ) const;

QList< Data > m_data;
};

#endif // MYMODEL_H

</pre>

==== Create the mymodel.cpp file with this content:====

<pre>

#include "mymodel.h"
#include <QByteArray>
MyModel::MyModel()
{
m_data
<< Data("Denmark", "qrc:images/denmark.jpg", 5.4)
<< Data("Sweden", "qrc:images/sweden.jpg", 9.3)
<< Data("Iceland", "qrc:images/iceland.jpg", 3.2)
<< Data("Norway", "qrc:images/norway.jpg", 4.8)
<< Data("Finland", "qrc:images/finland.jpg", 5.3);

// By default the DisplayRole is mapped to the propery "display"
QHash<int, QByteArray> mapping =roleNames();
mapping.insert( FlagRole, "flag");
mapping.insert( PopulationRole, "population");
setRoleNames( mapping );
}

int MyModel::rowCount( const QModelIndex& ) const
{
return m_data.count();
}

QVariant MyModel::data(const QModelIndex &index, int role) const
{
if ( !index.isValid() )
return QVariant();

Data data = m_data[index.row()];
if ( role == Qt::DisplayRole )
return data.name;
else if ( role == FlagRole )
return data.flag;
else if ( role == PopulationRole )
return data.population;
else
return QVariant();
}

</pre>

==== Modify main.cpp ====
Modify main.cpp by replacing its contents with this:
<pre>
#include <QtGui/QApplication>
#include <QDeclarativeEngine>
#include <QDeclarativeContext>
#include "qmlapplicationviewer.h"
#include "mymodel.h"

int main(int argc, char *argv[])
{
QApplication app(argc, argv);

MyModel model;

QmlApplicationViewer viewer;
viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
viewer.setMainQmlFile(QLatin1String("qml/simple-app/main.qml"));
viewer.showExpanded();

// Register the model "myModel" with QML
QDeclarativeContext *context = viewer.engine()->rootContext();
context->setContextProperty("myModel", &model);

return app.exec();
}

</pre>

==== Add the file MainPage.qml ====

A Component called MainPage.qml which will display row of Buttons that act like Tabs in a QTabView.

The area below the buttons are filled with one of two mini-apps (List View sample, and mini file browser)
<pre>
/*
* Copyright 2011 Intel Corporation.
*
* This program is licensed under the terms and conditions of the
* LGPL, version 2.1. The full text of the LGPL Licence is at
* http://www.gnu.org/licenses/lgpl.html
*/

/* The MainPage lets the user switch between different contents which
show the widgets available in these components. */

//import Qt 4.7
import QtQuick 1.0
import MeeGo.Components 0.1

AppPage {
id: mainPage

// This will be the first app / content displayed in the Button Demo page
state: "flags"

pageTitle: qsTr("Button Demo")

// Demo an Action Menu......
// Comment the block below to see a new Action Menu

// actionMenuModel: [ qsTr("Landscape"),
// qsTr("Portrait"),
// qsTr("Inv. Landscape"),
// qsTr("Inv. Portrait") ]
// actionMenuPayload: [ 1, 2, 3, 4 ]
// actionMenuTitle: qsTr("Action Menu")

// onActionMenuTriggered: {

// if( selectedItem == 1) {
// window.orientation = 1
// } else if( selectedItem == 2) {
// window.orientation = 2
// } else if( selectedItem == 3) {
// window.orientation = 3
// } else if( selectedItem == 4) {
// window.orientation = 0
// }
// }

Item {
id: contentButtons

// Some Debug output to stderr ...
onVisibleChanged: {
console.log("xxxxxxxxxxxxxx 1 Parent wid ", parent.width);
console.log("xxxxxxxxxxxxxx 2 Wid ", width);
}
onWidthChanged: {
console.log("wwwwwwwwwwwwww 1 Parent wid ", parent.width);
console.log("wwwwwwwwwwwwww 2 Wid ", width);
}

property int buttonWidth: parent.width * 0.2;
property int buttonHeight: 60;
property int buttonMargins: 2;

property string activeButtonImage: "image://themedimage/widgets/common/button/button-default"
property string buttonImage: "image://themedimage/widgets/common/button/button"
property string buttonImagePressed: "image://themedimage/widgets/common/button/button-default-pressed"

//width: 2 * buttonWidth + 3 * buttonMargins
height: buttonHeight
anchors.top: parent.top
anchors.topMargin: 10
anchors.horizontalCenter: parent.horizontalCenter

Button {
id: flagsButton
active: true
width: parent.buttonWidth; height: parent.buttonHeight

// Since there are only two buttons, the right of this button is near the center.
anchors { margins: parent.buttonMargins; right: parent.horizontalCenter;}
text: qsTr("Flags")

onClicked: {
mainPage.state = "flags"
active = true
browserButton.active = false
}
}

Button {
id: browserButton

width: parent.buttonWidth; height: parent.buttonHeight

// This button is to the right of the flags button
anchors { margins: parent.buttonMargins; left: flagsButton.right }
text: qsTr("File Browser")

onClicked: {
mainPage.state = "browser"
active = true
flagsButton.active = false
}
}
}

// This item holds the contents of the selected button and fills the rest of the window
Item {
id: contentSpace

anchors { top: contentButtons.bottom; bottom: parent.bottom; left: parent.left; right: parent.right }
}

// One of these two components will fill the contentSpace Item above.
FlagContent { id: flagContent; anchors.fill: contentSpace; anchors.top: contentButtons.bottom }

//Placeholder until BrowserContent.qml is present
Rectangle { id: browserContent; anchors.fill: contentSpace; anchors.top: contentButtons.bottom; color: "red"; }
//BrowserContent { id: browserContent; anchors.fill: contentSpace }

Rectangle { z: -1; anchors.fill: parent; color: "grey" } //background

states: [
State {
name: "flags"
PropertyChanges { target: flagContent; visible: true }
PropertyChanges { target: browserContent; visible: false }
},
State {
name: "browser"
PropertyChanges { target: flagContent; visible: false }
PropertyChanges { target: browserContent; visible: true }
}
]
}

</pre>

==== Add the File FlagContent.qml ====

This shows an example of using a QML ListView - which uses a delegate for a row to be displayed
<pre>
import QtQuick 1.0

ListView {
clip: true
model: myModel
anchors.top: parent.bottom
anchors.fill: parent
delegate: Rectangle {
color: Qt.rgba(0.9,0.9,0.9)
height: childrenRect.height
width: parent.width
Image {
id: image
source: flag
width: 64
height: 64
fillMode: Image.PreserveAspectFit

anchors { left:parent.left; leftMargin:30}
}
Text {
text: display + "\n" +"population: " + population + " mill."
anchors { left:image.right; verticalCenter: image.verticalCenter; leftMargin: 5 }
}
}
}

</pre>

==== Modify main.qml ====
Remove this:
<pre>
AppPage { id: gallery; }
</pre>

Uncomment this line:
<pre>
Component { id: gallery; MainPage {} }
</pre>

==== Copy Resource Files ====
Copy the images and .qrc file from the solution directory:

Add this to your simple-app.pro
RESOURCES += resources.qrc

==== Rebuild and Run ====
Since we added new .cpp and .h files, it would be a good idea to Build->Run Qmake; Build->Rebuild All

Run...

=== Adding code for the File Browser ===
To see another mini-app for the "Browser" button, copy these files to your project from the solution directory:

<pre>
BrowserContent.qml
FileSystemView.qml
ImageViewer.qml
PathDisplay.qml

dirmodel.cpp
dirmodel.h

main.cpp (new code added to register a Directory Model with QML named "_model"

</pre>

==== Replace these two lines in MainPage.qml:====

<pre>
Rectangle { id: browserContent; anchors.fill: contentSpace; anchors.top: contentButtons.bottom; color: "red"; }
//BrowserContent { id: browserContent; anchors.fill: contentSpace }
</pre>

With...

<pre>
BrowserContent { id: browserContent; anchors.fill: contentSpace }
</pre>

==== Rebuild All ====

==== Run ====
Clicking on the Browser button should allow you to browse the file system. If you click on a jpg or png, the image will be previewed.

QML/Sample App Using CPP Models

2011-05-06T23:33:31Z

Dlawlor:

== Overview ==

This tutorial will demonstrate a simple (but non-trivial) app which uses
* Meego UX Component widgets
* C++ models
* QML List Views
* QML Components

This tutorial assumes you have the MeeGo SDK installed on Linux 
See: http://wiki.meego.com/SDK/Docs/1.2/MeeGo_SDK_1.2_Preview

Also assumed: you have a a chroot / Xephyr environment set up. 
* http://wiki.meego.com/MeeGo_UX_Components_Chroot_Tutorial
* http://wiki.meego.com/Developing_in_a_MeeGo_Environment

This tutorial will use meego-ux-components objects like:
* Book Menus -
* Buttons
* AppPage
For other uses of Meego UX Components, and another tutorial of Book Menus, See:
* http://wiki.meego.com/MeeGo_UX_Components
* http://wiki.meego.com/MeeGo_UX_Tutorials

Other QML Tutorials:
* http://wiki.meego.com/QML_tutorials

== Follow these steps on a chroot / Xephyr system ==

=== Start Qt Creator ===

<pre>
qtcreator &>/dev/null &
</pre>

=== Create a new project ===
... screen shots ...

==== The auto-generated QML File looks like this: ====

<pre>
import QtQuick 1.0

Rectangle {
width: 360
height: 360
Text {
text: "Hello World"
anchors.centerIn: parent
}
MouseArea {
anchors.fill: parent
onClicked: {
Qt.quit();
}
}
}
</pre>

==== Turn off Shadow Build====

==== Build->Build All ====

=== Run ===
(CTRL-R or Green "Play" Button)

==== The running app looks like this: ====
<screen shot>

Clicking it closes the app (Qt.quit())

=== Add code to main.qml ===

==== Replace the contents of main.qml with this: ====
The last 2 Component statements are commented out so the app will run as is before creating more files.
<pre>
import Qt 4.7
import MeeGo.Components 0.1

Window {
id: window

bookMenuModel: [ qsTr("Button Demo"), qsTr("Book 2") ]
bookMenuPayload: [ gallery, book2 ]
bookMenuTitle: qsTr("Book Menu")

Component.onCompleted: switchBook( gallery )

//Component { id: gallery; MainPage {} }
//Component { id: book2; Book2 {} }
}
</pre>

==== Test / Run ====
Run the app and see the Book Menu. If you click on one of the menu items, you'll notice an error because of the commented out Component statements.

=== Add code for the Book Page example ===
==== Adding the Book2 Component ====
(from the meego-ux-widgetgallery example)
* (right click on the QML folder in the Projects view and Add New... / QML File / "Book2.qml")

* Replace the generated file Book2.qml with this:

<pre>

/*
* Copyright 2011 Intel Corporation.
*
* This program is licensed under the terms and conditions of the
* LGPL, version 2.1. The full text of the LGPL Licence is at
* http://www.gnu.org/licenses/lgpl.html
*/

/* This file contains relativy empty pages and is meant to demonstrate the
book/page concept */

import Qt 4.7

PageDummy {
id: pageDummy

innerText: qsTr("book 2, page 1")
rectColor: "lightblue"
showButton: true
buttonLabel: qsTr("Page 2")
pageTitle: qsTr("Dummy book 2")

onClicked: { addPage( page2 ) }

Component{
id: page2;

PageDummy {
id: pageDummy2

innerText: qsTr("book 2, page 2")
rectColor: "lightgreen"
showButton: true
buttonLabel: qsTr("Page 3")
pageTitle: qsTr("Dummy book 2")

onClicked: { addPage( page3 )
}
}
}

Component{
id: page3;

PageDummy {
id: pageDummy3

innerText: qsTr("book 2, page 3")
rectColor: "orange"
showButton: true
buttonLabel: qsTr("Page 4")
pageTitle: qsTr("Dummy book 2")

onClicked: { addPage( page4 )
}
}
}

Component{
id: page4;

PageDummy {
id: pageDummy4

innerText: qsTr("book 2, page 4")
rectColor: "darkgrey"
pageTitle: qsTr("Dummy book 2")
}
}
}
</pre>

==== Add PageDummy.qml ====
The file Book2.qml references PageDummy.qml, so create it the same way as Book2.qml

<pre>
/*
* Copyright 2011 Intel Corporation.
*
* This program is licensed under the terms and conditions of the
* LGPL, version 2.1. The full text of the LGPL Licence is at
* http://www.gnu.org/licenses/lgpl.html
*/

/* This file is just meant as a dummy to quickly create pages for
demonstrating the book/page concept. */
import Qt 4.7
import MeeGo.Components 0.1

AppPage {
id: pageDummy

property alias innerText: rectText.text //text shown in the rect
property alias rectColor: innerRect.color //color of the rect in the middle
property alias showButton: nextButton.visible //nextButton visible?
property alias buttonLabel: nextButton.text //nextButton label
property string bookTitle: "book title" //shown in the title bar

signal clicked()

anchors.fill: parent

Rectangle { z: -1; anchors.fill: parent; color: "grey" } //background

Rectangle {
id: innerRect

anchors.fill: parent
anchors.margins: 50
color: "lightgreen"

Text {
id: rectText

text: "dummy page"
anchors.centerIn: parent
font.pixelSize: 40
color: "black"
}
}

Button {
id: nextButton

visible: false
text: "next page >"
anchors.right: innerRect.right
anchors.bottom: innerRect.bottom
anchors.margins: 10
onClicked: { pageDummy.clicked() }
}
}
</pre>

You will see the use of the meego-ux-components "Button" and "AppPage" components in PageDummy.qml

==== Now, replace the two commented out Component statements in main.qml with:====

<pre>
Component {
id: gallery;
AppPage {id: dummy2}
}

// Dummy page until MainPage.qml is defined
AppPage { id: gallery; }
//Component { id: gallery; MainPage {} }

Component { id: book2; Book2 {} }
</pre>

Since the MainPage.qml file isn't created yet, we use a dummy AppPage placeholder temporarily to prevent a run-time error when invoking the menu.

=== Run ===
You can now click on the Book2 menu and see a new page.

=== Add code for seeing Custom List Views in the MainPage ===

We will use a C++ QAbstractListModel to repersent out list.

==== mymodel.h ====
Create the file mymodel.h by right-clicking on the simple-app project name and "Add New..." a C++ Header File

Paste this into mymodel.h
<pre>
#ifndef MYMODEL_H
#define MYMODEL_H

#include <QAbstractListModel>
#include <QColor>

struct Data {
Data( const char* name, const QString& flag, double population )
: name(name), flag(flag), population(population) {}
QString name;
QString flag;
double population;
};

const int FlagRole = Qt::UserRole + 1;
const int PopulationRole = Qt::UserRole + 2;
class MyModel : public QAbstractListModel
{
public:
MyModel();
int rowCount( const QModelIndex& ) const;
QVariant data( const QModelIndex& index, int role = Qt::DisplayRole ) const;

QList< Data > m_data;
};

#endif // MYMODEL_H

</pre>

==== Create the mymodel.cpp file with this content:====

<pre>

#include "mymodel.h"
#include <QByteArray>
MyModel::MyModel()
{
m_data
<< Data("Denmark", "qrc:images/denmark.jpg", 5.4)
<< Data("Sweden", "qrc:images/sweden.jpg", 9.3)
<< Data("Iceland", "qrc:images/iceland.jpg", 3.2)
<< Data("Norway", "qrc:images/norway.jpg", 4.8)
<< Data("Finland", "qrc:images/finland.jpg", 5.3);

// By default the DisplayRole is mapped to the propery "display"
QHash<int, QByteArray> mapping =roleNames();
mapping.insert( FlagRole, "flag");
mapping.insert( PopulationRole, "population");
setRoleNames( mapping );
}

int MyModel::rowCount( const QModelIndex& ) const
{
return m_data.count();
}

QVariant MyModel::data(const QModelIndex &index, int role) const
{
if ( !index.isValid() )
return QVariant();

Data data = m_data[index.row()];
if ( role == Qt::DisplayRole )
return data.name;
else if ( role == FlagRole )
return data.flag;
else if ( role == PopulationRole )
return data.population;
else
return QVariant();
}

</pre>

==== Modify main.cpp ====
Modify main.cpp by replacing its contents with this:
<pre>
#include <QtGui/QApplication>
#include <QDeclarativeEngine>
#include <QDeclarativeContext>
#include "qmlapplicationviewer.h"
#include "mymodel.h"

int main(int argc, char *argv[])
{
QApplication app(argc, argv);

MyModel model;

QmlApplicationViewer viewer;
viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
viewer.setMainQmlFile(QLatin1String("qml/simple-app/main.qml"));
viewer.showExpanded();

// Register the model "myModel" with QML
QDeclarativeContext *context = viewer.engine()->rootContext();
context->setContextProperty("myModel", &model);

return app.exec();
}

</pre>

==== Add the file MainPage.qml ====

A Component called MainPage.qml which will display a custom ListView:
<pre>
/*
* Copyright 2011 Intel Corporation.
*
* This program is licensed under the terms and conditions of the
* LGPL, version 2.1. The full text of the LGPL Licence is at
* http://www.gnu.org/licenses/lgpl.html
*/

/* The MainPage lets the user switch between different contents which
show the widgets available in these components. */

//import Qt 4.7
import QtQuick 1.0
import MeeGo.Components 0.1

AppPage {
id: mainPage

// This will be the first app / content displayed in the Button Demo page
state: "flags"

pageTitle: qsTr("Button Demo")

// Demo an Action Menu......
// Comment the block below to see a new Action Menu

// actionMenuModel: [ qsTr("Landscape"),
// qsTr("Portrait"),
// qsTr("Inv. Landscape"),
// qsTr("Inv. Portrait") ]
// actionMenuPayload: [ 1, 2, 3, 4 ]
// actionMenuTitle: qsTr("Action Menu")

// onActionMenuTriggered: {

// if( selectedItem == 1) {
// window.orientation = 1
// } else if( selectedItem == 2) {
// window.orientation = 2
// } else if( selectedItem == 3) {
// window.orientation = 3
// } else if( selectedItem == 4) {
// window.orientation = 0
// }
// }

Item {
id: contentButtons

// Some Debug output to stderr ...
onVisibleChanged: {
console.log("xxxxxxxxxxxxxx 1 Parent wid ", parent.width);
console.log("xxxxxxxxxxxxxx 2 Wid ", width);
}
onWidthChanged: {
console.log("wwwwwwwwwwwwww 1 Parent wid ", parent.width);
console.log("wwwwwwwwwwwwww 2 Wid ", width);
}

property int buttonWidth: parent.width * 0.2;
property int buttonHeight: 60;
property int buttonMargins: 2;

property string activeButtonImage: "image://themedimage/widgets/common/button/button-default"
property string buttonImage: "image://themedimage/widgets/common/button/button"
property string buttonImagePressed: "image://themedimage/widgets/common/button/button-default-pressed"

//width: 2 * buttonWidth + 3 * buttonMargins
height: buttonHeight
anchors.top: parent.top
anchors.topMargin: 10
anchors.horizontalCenter: parent.horizontalCenter

Button {
id: flagsButton
active: true
width: parent.buttonWidth; height: parent.buttonHeight

// Since there are only two buttons, the right of this button is near the center.
anchors { margins: parent.buttonMargins; right: parent.horizontalCenter;}
text: qsTr("Flags")

onClicked: {
mainPage.state = "flags"
active = true
browserButton.active = false
}
}

Button {
id: browserButton

width: parent.buttonWidth; height: parent.buttonHeight

// This button is to the right of the flags button
anchors { margins: parent.buttonMargins; left: flagsButton.right }
text: qsTr("File Browser")

onClicked: {
mainPage.state = "browser"
active = true
flagsButton.active = false
}
}
}

// This item holds the contents of the selected button and fills the rest of the window
Item {
id: contentSpace

anchors { top: contentButtons.bottom; bottom: parent.bottom; left: parent.left; right: parent.right }
}

// One of these two components will fill the contentSpace Item above.
FlagContent { id: flagContent; anchors.fill: contentSpace; anchors.top: contentButtons.bottom }

//Placeholder until BrowserContent.qml is present
Rectangle { id: browserContent; anchors.fill: contentSpace; anchors.top: contentButtons.bottom; color: "red"; }
//BrowserContent { id: browserContent; anchors.fill: contentSpace }

Rectangle { z: -1; anchors.fill: parent; color: "grey" } //background

states: [
State {
name: "flags"
PropertyChanges { target: flagContent; visible: true }
PropertyChanges { target: browserContent; visible: false }
},
State {
name: "browser"
PropertyChanges { target: flagContent; visible: false }
PropertyChanges { target: browserContent; visible: true }
}
]
}

</pre>

==== Add the File FlagContent.qml ====

This shows an example of using a QML ListView - which uses a delegate for a row to be displayed
<pre>
import QtQuick 1.0

ListView {
clip: true
model: myModel
anchors.top: parent.bottom
anchors.fill: parent
delegate: Rectangle {
color: Qt.rgba(0.9,0.9,0.9)
height: childrenRect.height
width: parent.width
Image {
id: image
source: flag
width: 64
height: 64
fillMode: Image.PreserveAspectFit

anchors { left:parent.left; leftMargin:30}
}
Text {
text: display + "\n" +"population: " + population + " mill."
anchors { left:image.right; verticalCenter: image.verticalCenter; leftMargin: 5 }
}
}
}

</pre>

==== Modify main.qml ====
Remove this:
<pre>
AppPage { id: gallery; }
</pre>

Uncomment this line:
<pre>
Component { id: gallery; MainPage {} }
</pre>

==== Copy Resource Files ====
Copy the images and .qrc file from the solution directory:

Add this to your simple-app.pro
RESOURCES += resources.qrc

==== Rebuild and Run ====
Since we added new .cpp and .h files, it would be a good idea to Build->Run Qmake; Build->Rebuild All

Run...

=== Adding code for the File Browser ===
To see another mini-app for the "Browser" button, copy these files to your project from the solution directory:

<pre>
BrowserContent.qml
FileSystemView.qml
ImageViewer.qml
PathDisplay.qml

dirmodel.cpp
dirmodel.h

main.cpp (new code added to register a Directory Model with QML named "_model"

</pre>

==== Replace these two lines in MainPage.qml:====

<pre>
Rectangle { id: browserContent; anchors.fill: contentSpace; anchors.top: contentButtons.bottom; color: "red"; }
//BrowserContent { id: browserContent; anchors.fill: contentSpace }
</pre>

With...

<pre>
BrowserContent { id: browserContent; anchors.fill: contentSpace }
</pre>

==== Rebuild All ====

==== Run ====
Clicking on the Browser button should allow you to browse the file system. If you click on a jpg or png, the image will be previewed.

QML/Sample App Using CPP Models

2011-05-06T23:10:02Z

Dlawlor: Initial Edit of QML / C++ / Meego UX Components Tutorial

== Overview ==

This tutorial will demonstrate a simple (but non-trivial) app which uses
* Meego UX Component widgets
* C++ models
* QML List Views
* QML Components

This tutorial assumes you have the MeeGo SDK installed on Linux 
See: http://wiki.meego.com/SDK/Docs/1.2/MeeGo_SDK_1.2_Preview

Also assumed: you have a a chroot / Xephyr environment set up. 
* http://wiki.meego.com/MeeGo_UX_Components_Chroot_Tutorial
* http://wiki.meego.com/Developing_in_a_MeeGo_Environment

This tutorial will use meego-ux-components objects like:
* Book Menus -
* Buttons
* AppPage
For other uses of Meego UX Components, and another tutorial of Book Menus, See:
* http://wiki.meego.com/MeeGo_UX_Components
* http://wiki.meego.com/MeeGo_UX_Tutorials

Other QML Tutorials:
* http://wiki.meego.com/QML_tutorials

== Follow these steps on a chroot / Xephyr system ==

=== Start Qt Creator ===

<pre>
qtcreator &>/dev/null &
</pre>

=== Create a new project ===
... screen shots ...

==== The auto-generated QML File looks like this: ====

<pre>
import QtQuick 1.0

Rectangle {
width: 360
height: 360
Text {
text: "Hello World"
anchors.centerIn: parent
}
MouseArea {
anchors.fill: parent
onClicked: {
Qt.quit();
}
}
}
</pre>

==== Turn off Shadow Build====

==== Build->Build All ====

=== Run ===
(CTRL-R or Green "Play" Button) ====

==== The running app looks like this: ====
<screen shot>

Clicking it closes the app (Qt.quit())

=== Add code to main.qml ===

==== Replace the contents of main.qml with this: ====

<pre>
import Qt 4.7
import MeeGo.Components 0.1

Window {
id: window

bookMenuModel: [ qsTr("Button Demo"), qsTr("Book 2") ]
bookMenuPayload: [ gallery, book2 ]
bookMenuTitle: qsTr("Book Menu")

Component.onCompleted: switchBook( gallery )

//Component { id: gallery; MainPage {} }
//Component { id: book2; Book2 {} }
}
</pre>

==== Test / Run ====
Run the app and see the Book Menu. If you click on one of the menu items, you'll notice an error because of the commented out Component statements.

Adding the Book2 Component (from the meego-ux-widgetgallery example)
(right click on the QML folder in the Projects view and Add New... / QML File / "Book2.qml")

Replace the generated file Book2.qml with this:

<pre>

/*
* Copyright 2011 Intel Corporation.
*
* This program is licensed under the terms and conditions of the
* LGPL, version 2.1. The full text of the LGPL Licence is at
* http://www.gnu.org/licenses/lgpl.html
*/

/* This file contains relativy empty pages and is meant to demonstrate the
book/page concept */

import Qt 4.7

PageDummy {
id: pageDummy

innerText: qsTr("book 2, page 1")
rectColor: "lightblue"
showButton: true
buttonLabel: qsTr("Page 2")
pageTitle: qsTr("Dummy book 2")

onClicked: { addPage( page2 ) }

Component{
id: page2;

PageDummy {
id: pageDummy2

innerText: qsTr("book 2, page 2")
rectColor: "lightgreen"
showButton: true
buttonLabel: qsTr("Page 3")
pageTitle: qsTr("Dummy book 2")

onClicked: { addPage( page3 )
}
}
}

Component{
id: page3;

PageDummy {
id: pageDummy3

innerText: qsTr("book 2, page 3")
rectColor: "orange"
showButton: true
buttonLabel: qsTr("Page 4")
pageTitle: qsTr("Dummy book 2")

onClicked: { addPage( page4 )
}
}
}

Component{
id: page4;

PageDummy {
id: pageDummy4

innerText: qsTr("book 2, page 4")
rectColor: "darkgrey"
pageTitle: qsTr("Dummy book 2")
}
}
}
</pre>

The file Book2.qml references PageDummy.qml, so create it:
<pre>
/*
* Copyright 2011 Intel Corporation.
*
* This program is licensed under the terms and conditions of the
* LGPL, version 2.1. The full text of the LGPL Licence is at
* http://www.gnu.org/licenses/lgpl.html
*/

/* This file is just meant as a dummy to quickly create pages for
demonstrating the book/page concept. */
import Qt 4.7
import MeeGo.Components 0.1

AppPage {
id: pageDummy

property alias innerText: rectText.text //text shown in the rect
property alias rectColor: innerRect.color //color of the rect in the middle
property alias showButton: nextButton.visible //nextButton visible?
property alias buttonLabel: nextButton.text //nextButton label
property string bookTitle: "book title" //shown in the title bar

signal clicked()

anchors.fill: parent

Rectangle { z: -1; anchors.fill: parent; color: "grey" } //background

Rectangle {
id: innerRect

anchors.fill: parent
anchors.margins: 50
color: "lightgreen"

Text {
id: rectText

text: "dummy page"
anchors.centerIn: parent
font.pixelSize: 40
color: "black"
}
}

Button {
id: nextButton

visible: false
text: "next page >"
anchors.right: innerRect.right
anchors.bottom: innerRect.bottom
anchors.margins: 10
onClicked: { pageDummy.clicked() }
}
}

</pre>

You will see the use of the meego-ux-components "Button" and "AppPage" components in PageDummy.qml

Now, replace the two commented out Component statements in main.qml with:

<pre>
Component {
id: gallery;
AppPage {id: dummy2}
}

// Dummy page until MainPage.qml is defined
AppPage { id: gallery; }
//Component { id: gallery; MainPage {} }

Component { id: book2; Book2 {} }
</pre>

Since the MainPage.qml file isn't created yet, use a dummy AppPage placeholder temprarily to prevent a run-time error when invoking the menu.

You can now click on the Book2 menu and see a new page.

Continue with the Tutorial for seeing custom List Views in the MainPage...

Now, we're going to create a Component called MainPage.qml which will display a custom ListView:

We will use a C++ QAbstractListModel to repersent out list.

Create the file mymodel.h by right-clicking on the simple-app project name and "Add New..." a C++ Header File

Paste this into mymodel.h
<pre>
#ifndef MYMODEL_H
#define MYMODEL_H

#include <QAbstractListModel>
#include <QColor>

struct Data {
Data( const char* name, const QString& flag, double population )
: name(name), flag(flag), population(population) {}
QString name;
QString flag;
double population;
};

const int FlagRole = Qt::UserRole + 1;
const int PopulationRole = Qt::UserRole + 2;
class MyModel : public QAbstractListModel
{
public:
MyModel();
int rowCount( const QModelIndex& ) const;
QVariant data( const QModelIndex& index, int role = Qt::DisplayRole ) const;

QList< Data > m_data;
};

#endif // MYMODEL_H

</pre>

Create the mymodel.cpp file with this content:

<pre>

#include "mymodel.h"
#include <QByteArray>
MyModel::MyModel()
{
m_data
<< Data("Denmark", "qrc:images/denmark.jpg", 5.4)
<< Data("Sweden", "qrc:images/sweden.jpg", 9.3)
<< Data("Iceland", "qrc:images/iceland.jpg", 3.2)
<< Data("Norway", "qrc:images/norway.jpg", 4.8)
<< Data("Finland", "qrc:images/finland.jpg", 5.3);

// By default the DisplayRole is mapped to the propery "display"
QHash<int, QByteArray> mapping =roleNames();
mapping.insert( FlagRole, "flag");
mapping.insert( PopulationRole, "population");
setRoleNames( mapping );
}

int MyModel::rowCount( const QModelIndex& ) const
{
return m_data.count();
}

QVariant MyModel::data(const QModelIndex &index, int role) const
{
if ( !index.isValid() )
return QVariant();

Data data = m_data[index.row()];
if ( role == Qt::DisplayRole )
return data.name;
else if ( role == FlagRole )
return data.flag;
else if ( role == PopulationRole )
return data.population;
else
return QVariant();
}

</pre>

Modify main.cpp by replacing its contents with this:
<pre>
#include <QtGui/QApplication>
#include <QDeclarativeEngine>
#include <QDeclarativeContext>
#include "qmlapplicationviewer.h"
#include "mymodel.h"

int main(int argc, char *argv[])
{
QApplication app(argc, argv);

MyModel model;

QmlApplicationViewer viewer;
viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
viewer.setMainQmlFile(QLatin1String("qml/simple-app/main.qml"));
viewer.showExpanded();

// Register the model "myModel" with QML
QDeclarativeContext *context = viewer.engine()->rootContext();
context->setContextProperty("myModel", &model);

return app.exec();
}

</pre>

Now, add the file MainPage.qml
<pre>
/*
* Copyright 2011 Intel Corporation.
*
* This program is licensed under the terms and conditions of the
* LGPL, version 2.1. The full text of the LGPL Licence is at
* http://www.gnu.org/licenses/lgpl.html
*/

/* The MainPage lets the user switch between different contents which
show the widgets available in these components. */

//import Qt 4.7
import QtQuick 1.0
import MeeGo.Components 0.1

AppPage {
id: mainPage

// This will be the first app / content displayed in the Button Demo page
state: "flags"

pageTitle: qsTr("Button Demo")

// Demo an Action Menu......
// Comment the block below to see a new Action Menu

// actionMenuModel: [ qsTr("Landscape"),
// qsTr("Portrait"),
// qsTr("Inv. Landscape"),
// qsTr("Inv. Portrait") ]
// actionMenuPayload: [ 1, 2, 3, 4 ]
// actionMenuTitle: qsTr("Action Menu")

// onActionMenuTriggered: {

// if( selectedItem == 1) {
// window.orientation = 1
// } else if( selectedItem == 2) {
// window.orientation = 2
// } else if( selectedItem == 3) {
// window.orientation = 3
// } else if( selectedItem == 4) {
// window.orientation = 0
// }
// }

Item {
id: contentButtons

// Some Debug output to stderr ...
onVisibleChanged: {
console.log("xxxxxxxxxxxxxx 1 Parent wid ", parent.width);
console.log("xxxxxxxxxxxxxx 2 Wid ", width);
}
onWidthChanged: {
console.log("wwwwwwwwwwwwww 1 Parent wid ", parent.width);
console.log("wwwwwwwwwwwwww 2 Wid ", width);
}

property int buttonWidth: parent.width * 0.2;
property int buttonHeight: 60;
property int buttonMargins: 2;

property string activeButtonImage: "image://themedimage/widgets/common/button/button-default"
property string buttonImage: "image://themedimage/widgets/common/button/button"
property string buttonImagePressed: "image://themedimage/widgets/common/button/button-default-pressed"

//width: 2 * buttonWidth + 3 * buttonMargins
height: buttonHeight
anchors.top: parent.top
anchors.topMargin: 10
anchors.horizontalCenter: parent.horizontalCenter

Button {
id: flagsButton
active: true
width: parent.buttonWidth; height: parent.buttonHeight

// Since there are only two buttons, the right of this button is near the center.
anchors { margins: parent.buttonMargins; right: parent.horizontalCenter;}
text: qsTr("Flags")

onClicked: {
mainPage.state = "flags"
active = true
browserButton.active = false
}
}

Button {
id: browserButton

width: parent.buttonWidth; height: parent.buttonHeight

// This button is to the right of the flags button
anchors { margins: parent.buttonMargins; left: flagsButton.right }
text: qsTr("File Browser")

onClicked: {
mainPage.state = "browser"
active = true
flagsButton.active = false
}
}
}

// This item holds the contents of the selected button and fills the rest of the window
Item {
id: contentSpace

anchors { top: contentButtons.bottom; bottom: parent.bottom; left: parent.left; right: parent.right }
}

// One of these two components will fill the contentSpace Item above.
FlagContent { id: flagContent; anchors.fill: contentSpace; anchors.top: contentButtons.bottom }

//Placeholder until BrowserContent.qml is present
Rectangle { id: browserContent; anchors.fill: contentSpace; anchors.top: contentButtons.bottom; color: "red"; }
//BrowserContent { id: browserContent; anchors.fill: contentSpace }

Rectangle { z: -1; anchors.fill: parent; color: "grey" } //background

states: [
State {
name: "flags"
PropertyChanges { target: flagContent; visible: true }
PropertyChanges { target: browserContent; visible: false }
},
State {
name: "browser"
PropertyChanges { target: flagContent; visible: false }
PropertyChanges { target: browserContent; visible: true }
}
]
}

</pre>

Add the File FlagContent.qml...

This shows an example of using a QML ListView - which uses a delegate for a row to be displayed
<pre>
import QtQuick 1.0

ListView {
clip: true
model: myModel
anchors.top: parent.bottom
anchors.fill: parent
delegate: Rectangle {
color: Qt.rgba(0.9,0.9,0.9)
height: childrenRect.height
width: parent.width
Image {
id: image
source: flag
width: 64
height: 64
fillMode: Image.PreserveAspectFit

anchors { left:parent.left; leftMargin:30}
}
Text {
text: display + "\n" +"population: " + population + " mill."
anchors { left:image.right; verticalCenter: image.verticalCenter; leftMargin: 5 }
}
}
}

</pre>

Modify main.qml to remove this:
<pre>
AppPage { id: gallery; }
</pre>

Uncomment this line:
<pre>
Component { id: gallery; MainPage {} }
</pre>

Since we added new .cpp and .h files, it would be a good idea to Build->Run Qmake; Build->Rebuild All

Copy the images and .qrc file from the solution directory:

Add this to your simple-app.pro
RESOURCES += resources.qrc

Rebuild...

Run...

To see another mini-app for the "Browser" button, copy these files to your project from the solution directory:

<pre>
BrowserContent.qml
FileSystemView.qml
ImageViewer.qml
PathDisplay.qml

dirmodel.cpp
dirmodel.h

main.cpp (new code added to register a Directory Model with QML named "_model"

</pre>

Replace these two lines in MainPage.qml:

<pre>
Rectangle { id: browserContent; anchors.fill: contentSpace; anchors.top: contentButtons.bottom; color: "red"; }
//BrowserContent { id: browserContent; anchors.fill: contentSpace }
</pre>

With...

<pre>
BrowserContent { id: browserContent; anchors.fill: contentSpace }
</pre>

Rebuild All

Run

MeeGo UX Components Chroot Tutorial

2011-04-28T23:03:42Z

Dlawlor: /* Steps */

== Overview ==
This tutorial will take the developer through the process of building from source the [[SDK/Docs/1.2/MeeGo_SDK_1.2_Preview|meego-ux-components package]] in a chroot development environment on Linux.

This tutorial is based on the [[SDK/Docs/1.2/MeeGo_SDK_1.2_Preview|MeeGo SDK 1.2 Preview (with Tablet)]] release.

This tutorial was created with a specific Tablet Build (04-01-2011) and has specific instructions related to that build. Specifically, a git checkout of a tag is required.

== Prerequisites ==
* Linux Only
* [[SDK/Docs/1.2/MeeGo_SDK_1.2_Preview_for_Linux| MeeGo SDK 1.2]] installed
* [[Developing_in_a_Meego_Environment|Install / Setup mic-chroot]]

== Steps ==

Step 1. Get the latest source of the meego-ux-components
<pre>
cd ~/meego.gitorious
git clone http://git.gitorious.org/meego-ux/meego-ux-components.git
</pre>

Step 2. Download the 4/1 version of the QEMU image:
<pre>
http://download.meego.com/trunk-daily/builds/1.1.90/1.1.99.1.20110401.1/images/meego-tablet-ia32-qemu/
</pre>

Step 3. Un-tar to get the .raw image

Step 4. Make a fs copy of the image:
<pre>
sudo mic-chroot -s ./chroot0405 -v
Downloads/meego-tablet-ia32-qemu-1.1.99.1.20110405.3.img
<exit the chroot>
</pre>

Step 5. mount --bind your source directory to a directory in the fs chroot
<pre>
# once, after creating the chroot0405 directory
sudo mkdir chroot0405/home/meego-ux-components

#repeat after each reboot, or add to system .profile
sudo mount -B ~/meego.gitorious/meego-ux-components ~/chroot0405/home/meego-ux-components

</pre>

Step 5. start the chroot
<pre>
sudo mic-chroot ./chroot0401
</pre>

Step 6. Before building the sources, you need to git checkout a version
that will work with the 4/1 tablet image:
<pre>
git checkout 0.2.1
</pre>

Step 7. startmeego to get all the MeeGO services started:
<pre>
# You may have to allow connections to your X server
# you can test this by running xclock in the chroot
xhost +

startmeego &
## Note - it will be helpful to edit the script
/usr/bin/startmeego-debug-tablet
## Change: Xephyr $DISP -screen 1024x600
## To: Xephyr $DISP -screen 1280x800
</pre>

Step 8. Start Qt Creator (in the mic-chroot terminal)
<pre>
qtcreator &
</pre>

Step 9: Install packages needed to build meego-ux-components
<pre>
zypper in libXdamage-devel
zypper in libXcomposite-devel
zypper in libX11-devel
zypper in kcalcore-devel
zypper in qt-mobility-devel
zypper in libqtopengl-devel
zypper in libcontentaction-devel
zypper in contextkit-devel
zypper in mlite
zypper in libexif-devel
</pre>

Step 10. Build and Install
<pre>
# In Qt Creator: Build->Build All

# from the chroot terminal (Until install / deploy step in Qt Creator is tested)
cd ../meego-ux-components-build-desktop #If shadow build was checked
make install
</pre>

Step 11. Run meego-ux-widgetgallery in a separate window
<pre>
qmlviewer /usr/share/meego-ux-widgetgallery/main.qml
</pre>

Step 12. Run meego-ux-widgetgallery in the Xephyr startmeego window
<pre>
export DISPLAY=:2
qmlviewer /usr/share/meego-ux-widgetgallery/main.qml

Step 13. Run meego-ux-widgetgallery directly from the MeeGo environment
# in the Xephyr Window, hit the Home (Windows) key
# Choose the App Viewer
# Click on Terminal
# run this command in the terminal window:
qmlviewer /usr/share/meego-ux-widgetgallery/main.qml
</pre>

Step 14. You can also copy an existing .desktop file and change the exec
statement to meego-ux-widgetgallery if you want to click on an icon to
start it.

== Todo ==
* Automate the creation / startup of the chroot - in the the above steps, design a script which can perform steps 2 - 5, 7, 9, 14
* Also document how to set up the SDK to run this application on a device.

[[Category:Tutorial]]

MeeGo UX Components Chroot Tutorial

2011-04-28T22:40:44Z

Dlawlor: /* Steps */

== Overview ==
This tutorial will take the developer through the process of building from source the [[SDK/Docs/1.2/MeeGo_SDK_1.2_Preview|meego-ux-components package]] in a chroot development environment on Linux.

This tutorial is based on the [[SDK/Docs/1.2/MeeGo_SDK_1.2_Preview|MeeGo SDK 1.2 Preview (with Tablet)]] release.

This tutorial was created with a specific Tablet Build (04-01-2011) and has specific instructions related to that build. Specifically, a git checkout of a tag is required.

== Prerequisites ==
* Linux Only
* [[SDK/Docs/1.2/MeeGo_SDK_1.2_Preview_for_Linux| MeeGo SDK 1.2]] installed
* [[Developing_in_a_Meego_Environment|Install / Setup mic-chroot]]

== Steps ==

Step 1. Get the latest source of the meego-ux-components
<pre>
cd ~/meego.gitorious
git clone http://git.gitorious.org/meego-ux/meego-ux-components.git
</pre>

Step 2. Download the 4/1 version of the QEMU image:
<pre>
http://download.meego.com/trunk-daily/builds/1.1.90/1.1.99.1.20110401.1/images/meego-tablet-ia32-qemu/
</pre>

Step 3. Un-tar to get the .raw image

Step 4. Make a fs copy of the image:
<pre>
sudo mic-chroot -s ./chroot0405 -v
Downloads/meego-tablet-ia32-qemu-1.1.99.1.20110405.3.img
<exit the chroot>
</pre>

Step 5. mount --bind your source directory to a directory in the fs chroot
<pre>
# once, after creating the chroot0405 directory
sudo mkdir chroot0405/home/meego-ux-components

#repeat after each reboot, or add to system .profile
sudo mount -B ~/meego.gitorious/meego-ux-components ~/chroot0405/home/meego-ux-components

</pre>

Step 5. start the chroot
<pre>
sudo mic-chroot ./chroot0401
</pre>

Step 6. Before building the sources, you need to git checkout a version
that will work with the 4/1 tablet image:
<pre>
git checkout 0.2.1
</pre>

Step 7. startmeego to get all the MeeGO services started:
<pre>
startmeego &
## Note - it will be helpful to edit the script
/usr/bin/startmeego-debug-tablet
## Change: Xephyr $DISP -screen 1024x600
## To: Xephyr $DISP -screen 1280x800
</pre>

Step 8. Start Qt Creator (in the mic-chroot terminal)
<pre>
qtcreator &
</pre>

Step 9: Install packages needed to build meego-ux-components
<pre>
zypper in libXdamage-devel
zypper in libXcomposite-devel
zypper in libX11-devel
zypper in kcalcore-devel
zypper in qt-mobility-devel
zypper in libqtopengl-devel
zypper in libcontentaction-devel
zypper in contextkit-devel
zypper in mlite
zypper in libexif-devel
</pre>

Step 10. Build and Install
<pre>
# In Qt Creator: Build->Build All

# from the chroot terminal (Until install / deploy step in Qt Creator is tested)
cd ../meego-ux-components-build-desktop #If shadow build was checked
make install
</pre>

Step 11. Run meego-ux-widgetgallery in a separate window
<pre>
qmlviewer /usr/share/meego-ux-widgetgallery/main.qml
</pre>

Step 12. Run meego-ux-widgetgallery in the Xephyr startmeego window
<pre>
export DISPLAY=:2
qmlviewer /usr/share/meego-ux-widgetgallery/main.qml

Step 13. Run meego-ux-widgetgallery directly from the MeeGo environment
# in the Xephyr Window, hit the Home (Windows) key
# Choose the App Viewer
# Click on Terminal
# run this command in the terminal window:
qmlviewer /usr/share/meego-ux-widgetgallery/main.qml
</pre>

Step 14. You can also copy an existing .desktop file and change the exec
statement to meego-ux-widgetgallery if you want to click on an icon to
start it.

== Todo ==
* Automate the creation / startup of the chroot - in the the above steps, design a script which can perform steps 2 - 5, 7, 9, 14
* Also document how to set up the SDK to run this application on a device.

[[Category:Tutorial]]

SDK/Docs/1.2/Using Qt Simulator

2011-04-18T19:30:28Z

Dlawlor:

== Using the Qt Simulator for MeeGo Development ==

There are a number of ways to develop applications for MeeGo devices

* On Windows or Linux desktop with a hardware device attached to the MeeGo SDK
* On Windows or Linux desktop (32 bit only) running the QEMU emulator
* On a Linux desktop runing in a chroot / Xephyr environment
* Directly on a device - the MeeGo SDK and development toolchain are installed on a tablet (with keyboard / mouse attached) or netbook.
* On a Windows or Linux desktop running in the Qt Simulator

This post will describe the advantages and disadvantages of using the Qt Simulator for MeeGo development.

There is a limited set of applications that could take advantage of the Qt Simulator - especially on Windows platforms.

After reading the two sections below on which MeeGo apps can and can't be developed with the Qt Simulator, you can make a decision on wether to use it. If so, there is a tutorial on how to use it.

=== When to Use the Qt Simulator ===

* When you are developing the User Experience (UX) of an application and want to test it on various devices.

* You do NOT need to use meegolabs.ux.components or meego.ux.components (see disadvantages below)

* You are developing a QML component to be used in other MeeGo applications (like a file browser component)

* If your application under development needs to read or write data to the MeeGo infrastructure, you can create a temporary model for you application to isolate it

=== When NOT to Use the Qt Simulator ===
==== When you are debugging your applications's interactions with other MeeGo applications that communicate through various middleware components ====
such as:
* libsocialweb
* sensors
* pulseaudio
* messaging framework
* MeeGo touch framework

* When you are debugging your applications's interaction with the application launcher (appgrid)

==== When you are developing an OpenGL application ====

==== Most MeeGo apps use can't be built in the Qt Simulator environment, because they use MeeGo.Labs.Components: ====

Since this component hasn't been ported to the Qt Simulator environment, it can't be simulated by the Qt Simulator.

Application developers will need a work-around to this if they are going to use either meegolabs-ux-components or meego-ux-components.

It's a known issue that dbus doesn't work on Qt Simulator.
<pre>
http://bugreports.qt.nokia.com/browse/QTSIM-12
</pre>

==== A quick attempt to build the email app. ====

One look at the .pro file for MeeGo.Labs.Components reveals that this app must be developed on a Linux platform, Emulated with QEMU or directly.
<pre>
TEMPLATE = lib
TARGET = Components
QT += declarative \
network \
dbus \
sql
CONFIG += qt \
plugin \
dbus \
link_pkgconfig \
mobility
PKGCONFIG += gconf-2.0 \
qmfmessageserver \
qmfclient \
libpulse \
libpulse-mainloop-glib \
libexif \
libkcalcoren \
mlite \
xdamage \
QtPublishSubscribe \
contextsubscriber-1.0
</pre>

=== Installing the Qt Simulator / Resources needed. ===

One advantage of using the Qt Simulator is that it will run on Windows and Linux 64 bit platforms.

To install, simply check the appropriate Simulator Qt 4.7.2 checkbox in the "Select Components" screen of the SDK installer.

[[file: install-sim.png]]

The Simulator will require an additional 1.2 Gig on your development workstation. Less (550 Meg) if you install on Windows and already have Visual Studio 2008 installed.

Note: On Windows, the MeeGo SDK with one target installed, QEMU, Qt Simulator and the Mingw development environment (Microsoft Visual Studio not installed) takes approx 6.5 Gig of disk space.

=== Using the Simulator ===

In your Project tool in Qt Creator, you would click the '+' in the Project Chooser (top) to add a Qt Simulator target. If the Qt Simulator wasn't installed, it won't be an option when clicking the '+'

[[file: build-sim.png|800px]]

You may also create or open a new project and choose your targets:

[[file: sim-open-project.png|800px]]

=== Running the Simulator ===

Choose the Simulator target in the Projects tool, or in the Target Chooser (above the Green Run button)

Run...

A sample app running in the Qt Simulator. This app uses a very small C++ model and QML:

[[file: sim-meego-control.png]]
[[file: sim-meego-skin.png|800px]]

File:Sim-open-project.png

2011-04-18T19:27:08Z

Dlawlor:

SDK/Docs/1.2/Using Qt Simulator

2011-04-18T19:22:08Z

Dlawlor:

== Using the Qt Simulator for MeeGo Development ==

There are a number of ways to develop applications for MeeGo devices

* On Windows or Linux desktop with a hardware device attached to the MeeGo SDK
* On Windows or Linux desktop (32 bit only) running the QEMU emulator
* On a Linux desktop runing in a chroot / Xephyr environment
* Directly on a device - the MeeGo SDK and development toolchain are installed on a tablet (with keyboard / mouse attached) or netbook.
* On a Windows or Linux desktop running in the Qt Simulator

This post will describe the advantages and disadvantages of using the Qt Simulator for MeeGo development.

There is a limited set of applications that could take advantage of the Qt Simulator - especially on Windows platforms.

After reading the two sections below on which MeeGo apps can and can't be developed with the Qt Simulator, you can make a decision on wether to use it. If so, there is a tutorial on how to use it.

=== When to Use the Qt Simulator ===

* When you are developing the User Experience (UX) of an application and want to test it on various devices.

* You do NOT need to use meegolabs.ux.components or meego.ux.components (see disadvantages below)

* You are developing a QML component to be used in other MeeGo applications (like a file browser component)

* If your application under development needs to read or write data to the MeeGo infrastructure, you can create a temporary model for you application to isolate it

=== When NOT to Use the Qt Simulator ===
==== When you are debugging your applications's interactions with other MeeGo applications that communicate through various middleware components ====
such as:
* libsocialweb
* sensors
* pulseaudio
* messaging framework
* MeeGo touch framework

* When you are debugging your applications's interaction with the application launcher (appgrid)

==== When you are developing an OpenGL application ====

==== Most MeeGo apps use can't be built in the Qt Simulator environment, because they use MeeGo.Labs.Components: ====

Since this component hasn't been ported to the Qt Simulator environment, it can't be simulated by the Qt Simulator.

Application developers will need a work-around to this if they are going to use either meegolabs-ux-components or meego-ux-components.

It's a known issue that dbus doesn't work on Qt Simulator.
<pre>
http://bugreports.qt.nokia.com/browse/QTSIM-12
</pre>

==== A quick attempt to build the email app. ====

One look at the .pro file for MeeGo.Labs.Components reveals that this app must be developed on a Linux platform, Emulated with QEMU or directly.
<pre>
TEMPLATE = lib
TARGET = Components
QT += declarative \
network \
dbus \
sql
CONFIG += qt \
plugin \
dbus \
link_pkgconfig \
mobility
PKGCONFIG += gconf-2.0 \
qmfmessageserver \
qmfclient \
libpulse \
libpulse-mainloop-glib \
libexif \
libkcalcoren \
mlite \
xdamage \
QtPublishSubscribe \
contextsubscriber-1.0
</pre>

=== Installing the Qt Simulator / Resources needed. ===

One advantage of using the Qt Simulator is that it will run on Windows and Linux 64 bit platforms.

To install, simply check the appropriate Simulator Qt 4.7.2 checkbox in the "Select Components" screen of the SDK installer.

[[file: install-sim.png]]

The Simulator will require an additional 1.2 Gig on your development workstation. Less (550 Meg) if you install on Windows and already have Visual Studio 2008 installed.

Note: On Windows, the MeeGo SDK with one target installed, QEMU, Qt Simulator and the Mingw development environment (Microsoft Visual Studio not installed) takes approx 6.5 Gig of disk space.

=== Using the Simulator ===

In your Project tool in Qt Creator, you would click the '+' in the Project Chooser (top) to add a Qt Simulator target. If the Qt Simulator wasn't installed, it won't be an option when clicking the '+'

[[file: build-sim.png|800px]]

A sample app running in the Qt Simulator. This app uses a very small C++ model and QML:

[[file: sim-meego-control.png]]
[[file: sim-meego-skin.png|800px]]

SDK/Docs/1.2/Using Qt Simulator

2011-04-18T19:19:53Z

Dlawlor:

== Using the Qt Simulator for MeeGo Development ==

There are a number of ways to develop applications for MeeGo devices

* On Windows or Linux desktop with a hardware device attached to the MeeGo SDK
* On Windows or Linux desktop (32 bit only) running the QEMU emulator
* On a Linux desktop runing in a chroot / Xephyr environment
* Directly on a device - the MeeGo SDK and development toolchain are installed on a tablet (with keyboard / mouse attached) or netbook.
* On a Windows or Linux desktop running in the Qt Simulator

This post will describe the advantages and disadvantages of using the Qt Simulator for MeeGo development.

There is a very limited set of applications that could take advantage of the Qt Simulator - especially on Windows platforms.

After reading the two sections below on which MeeGo apps can and can't be developed with the Qt Simulator, you can make a decision on wether to use it. If so, there is a tutorial on how to use it.

=== When to Use the Qt Simulator ===

* When you are developing the User Experience (UX) of an application and want to test it on various devices.

* You do NOT need to use meegolabs.ux.components or meego.ux.components (see disadvantages below)

* If your application under development needs to read or write data to the MeeGo infrastructure, you can create a temporary model for you application to isolate it

=== When NOT to Use the Qt Simulator ===
==== When you are debugging your applications's interactions with other MeeGo applications that communicate through various middleware components ====
such as:
* libsocialweb
* sensors
* pulseaudio
* messaging framework
* MeeGo touch framework

* When you are debugging your applications's interaction with the application launcher (appgrid)

==== When you are developing an OpenGL application ====

==== Most MeeGo apps use can't be built in the Qt Simulator environment, because they use MeeGo.Labs.Components: ====

Since this component hasn't been ported to the Qt Simulator environment, it can't be simulated by the Qt Simulator.

Application developers will need a work-around to this if they are going to use either meegolabs-ux-components or meego-ux-components.

It's a known issue that dbus doesn't work on Qt Simulator.
<pre>
http://bugreports.qt.nokia.com/browse/QTSIM-12
</pre>

==== A quick attempt to build the email app. ====

One look at the .pro file for MeeGo.Labs.Components reveals that this app must be developed on a Linux platform, Emulated with QEMU or directly.
<pre>
TEMPLATE = lib
TARGET = Components
QT += declarative \
network \
dbus \
sql
CONFIG += qt \
plugin \
dbus \
link_pkgconfig \
mobility
PKGCONFIG += gconf-2.0 \
qmfmessageserver \
qmfclient \
libpulse \
libpulse-mainloop-glib \
libexif \
libkcalcoren \
mlite \
xdamage \
QtPublishSubscribe \
contextsubscriber-1.0
</pre>

=== Installing the Qt Simulator / Resources needed. ===

One advantage of using the Qt Simulator is that it will run on Windows and Linux 64 bit platforms.

To install, simply check the appropriate Simulator Qt 4.7.2 checkbox in the "Select Components" screen of the SDK installer.

[[file: install-sim.png]]

The Simulator will require an additional 1.2 Gig on your development workstation. Less (550 Meg) if you install on Windows and already have Visual Studio 2008 installed.

Note: On Windows, the MeeGo SDK with one target installed, QEMU, Qt Simulator and the Mingw development environment (Microsoft Visual Studio not installed) takes approx 6.5 Gig of disk space.

=== Using the Simulator ===

In your Project tool in Qt Creator, you would click the '+' in the Project Chooser (top) to add a Qt Simulator target. If the Qt Simulator wasn't installed, it won't be an option when clicking the '+'

[[file: build-sim.png|800px]]

A sample app running in the Qt Simulator. This app uses a very small C++ model and QML:

[[file: sim-meego-control.png]]
[[file: sim-meego-skin.png|800px]]

SDK/Docs/1.2/Using Qt Simulator

2011-04-18T19:19:08Z

Dlawlor:

== Using the Qt Simulator for MeeGo Development ==

There are a number of ways to develop applications for MeeGo devices

* On Windows or Linux desktop with a hardware device attached to the MeeGo SDK
* On Windows or Linux desktop (32 bit only) running the QEMU emulator
* On a Linux desktop runing in a chroot / Xephyr environment
* Directly on a device - the MeeGo SDK and development toolchain are installed on a tablet (with keyboard / mouse attached) or netbook.
* On a Windows or Linux desktop running in the Qt Simulator

This post will describe the advantages and disadvantages of using the Qt Simulator for MeeGo development.

There is a very limited set of applications that could take advantage of the Qt Simulator - especially on Windows platforms.

After reading the two sections below on which MeeGo apps can and can't be developed with the Qt Simulator, you can make a decision on wether to use it. If so, there is a tutorial on how to use it.

=== When to Use the Qt Simulator ===

* When you are developing the User Experience (UX) of an application and want to test it on various devices.

* You do NOT need to use meegolabs.ux.components or meego.ux.components (see disadvantages below)

* If your application under development needs to read or write data to the MeeGo infrastructure, you can create a temporary model for you application to isolate it

=== When NOT to Use the Qt Simulator ===
==== When you are debugging your applications's interactions with other MeeGo applications that communicate through various middleware components ====
such as:
* libsocialweb
* sensors
* pulseaudio
* messaging framework
* MeeGo touch framework

* When you are debugging your applications's interaction with the application launcher (appgrid)

==== When you are developing an OpenGL application ====

==== Most MeeGo apps use can't be built in the Qt Simulator environment, because they use MeeGo.Labs.Components: ====

Since this component hasn't been ported to the Qt Simulator environment, it can't be simulated by the Qt Simulator.

Application developers will need a work-around to this if they are going to use either meegolabs-ux-components or meego-ux-components.

It's a known issue that dbus doesn't work on Qt Simulator.
<pre>
http://bugreports.qt.nokia.com/browse/QTSIM-12
</pre>

==== A quick attempt to build the email app. ====

One look at the .pro file for MeeGo.Labs.Components reveals that this app must be developed on a Linux platform, Emulated with QEMU or directly.
<pre>
TEMPLATE = lib
TARGET = Components
QT += declarative \
network \
dbus \
sql
CONFIG += qt \
plugin \
dbus \
link_pkgconfig \
mobility
PKGCONFIG += gconf-2.0 \
qmfmessageserver \
qmfclient \
libpulse \
libpulse-mainloop-glib \
libexif \
libkcalcoren \
mlite \
xdamage \
QtPublishSubscribe \
contextsubscriber-1.0
</pre>

=== Installing the Qt Simulator / Resources needed. ===

One advantage of using the Qt Simulator is that it will run on Windows and Linux 64 bit platforms.

To install, simply check the appropriate Simulator Qt 4.7.2 checkbox in the "Select Components" screen of the SDK installer.

[[file: install-sim.png]]

The Simulator will require an additional 1.2 Gig on your development workstation. Less (550 Meg) if you install on Windows and already have Visual Studio 2008 installed.

Note: On Windows, the MeeGo SDK with one target installed, QEMU, Qt Simulator and the Mingw development environment (Microsoft Visual Studio not installed) takes approx 6.5 Gig of disk space.

=== Using the Simulator ===

In your Project tool in Qt Creator, you would click the '+' in the Project Chooser (top) to add a Qt Simulator target. If the Qt Simulator wasn't installed, it won't be an option when clicking the '+'

[[file: build-sim.png|800px]]

A sample app running in the Qt Simulator. This app uses a very small C++ model and QML:

[[file: sim-meego-control.png]]
[[file: sim-meego-skin.png]]

File:Sim-meego-control.png

2011-04-18T19:18:18Z

Dlawlor: Qt Simulator Control Panel with MeeGo Skin

Qt Simulator Control Panel with MeeGo Skin

File:Sim-meego-skin.png

2011-04-18T19:16:43Z

Dlawlor: Simple App in MeeGo Simulator Skin

Simple App in MeeGo Simulator Skin

SDK/Docs/1.2/Using Qt Simulator

2011-04-18T19:14:36Z

Dlawlor: Created page with "== Using the Qt Simulator for MeeGo Development == There are a number of ways to develop applications for MeeGo devices * On Windows or Linux desktop with a hardware device att..."

== Using the Qt Simulator for MeeGo Development ==

There are a number of ways to develop applications for MeeGo devices

* On Windows or Linux desktop with a hardware device attached to the MeeGo SDK
* On Windows or Linux desktop (32 bit only) running the QEMU emulator
* On a Linux desktop runing in a chroot / Xephyr environment
* Directly on a device - the MeeGo SDK and development toolchain are installed on a tablet (with keyboard / mouse attached) or netbook.
* On a Windows or Linux desktop running in the Qt Simulator

This post will describe the advantages and disadvantages of using the Qt Simulator for MeeGo development.

There is a very limited set of applications that could take advantage of the Qt Simulator - especially on Windows platforms.

After reading the two sections below on which MeeGo apps can and can't be developed with the Qt Simulator, you can make a decision on wether to use it. If so, there is a tutorial on how to use it.

=== When to Use the Qt Simulator ===

* When you are developing the User Experience (UX) of an application and want to test it on various devices.

* You do NOT need to use meegolabs.ux.components or meego.ux.components (see disadvantages below)

* If your application under development needs to read or write data to the MeeGo infrastructure, you can create a temporary model for you application to isolate it

=== When NOT to Use the Qt Simulator ===
==== When you are debugging your applications's interactions with other MeeGo applications that communicate through various middleware components ====
such as:
* libsocialweb
* sensors
* pulseaudio
* messaging framework
* MeeGo touch framework

* When you are debugging your applications's interaction with the application launcher (appgrid)

==== When you are developing an OpenGL application ====

==== Most MeeGo apps use can't be built in the Qt Simulator environment, because they use MeeGo.Labs.Components: ====

Since this component hasn't been ported to the Qt Simulator environment, it can't be simulated by the Qt Simulator.

Application developers will need a work-around to this if they are going to use either meegolabs-ux-components or meego-ux-components.

It's a known issue that dbus doesn't work on Qt Simulator.
<pre>
http://bugreports.qt.nokia.com/browse/QTSIM-12
</pre>

==== A quick attempt to build the email app. ====

One look at the .pro file for MeeGo.Labs.Components reveals that this app must be developed on a Linux platform, Emulated with QEMU or directly.
<pre>
TEMPLATE = lib
TARGET = Components
QT += declarative \
network \
dbus \
sql
CONFIG += qt \
plugin \
dbus \
link_pkgconfig \
mobility
PKGCONFIG += gconf-2.0 \
qmfmessageserver \
qmfclient \
libpulse \
libpulse-mainloop-glib \
libexif \
libkcalcoren \
mlite \
xdamage \
QtPublishSubscribe \
contextsubscriber-1.0
</pre>

=== Installing the Qt Simulator / Resources needed. ===

One advantage of using the Qt Simulator is that it will run on Windows and Linux 64 bit platforms.

To install, simply check the appropriate Simulator Qt 4.7.2 checkbox in the "Select Components" screen of the SDK installer.

[[file: install-sim.png]]

The Simulator will require an additional 1.2 Gig on your development workstation. Less (550 Meg) if you install on Windows and already have Visual Studio 2008 installed.

Note: On Windows, the MeeGo SDK with one target installed, QEMU, Qt Simulator and the Mingw development environment (Microsoft Visual Studio not installed) takes approx 6.5 Gig of disk space.

=== Using the Simulator ===

In your Project tool in Qt Creator, you would click the '+' in the Project Chooser (top) to add a Qt Simulator target. If the Qt Simulator wasn't installed, it won't be an option when clicking the '+'

[[file: build-sim.png|800px]]

A sample app

File:Build-sim.png

2011-04-18T19:06:55Z

Dlawlor: Choosing a Qt Simulator Build

Choosing a Qt Simulator Build

File:Install-sim.png

2011-04-18T19:03:47Z

Dlawlor: Installing Qt Simulator

Installing Qt Simulator

MeeGo UX Components Chroot Tutorial

2011-04-11T22:31:05Z

Dlawlor:

== Overview ==
This tutorial will take the developer through the process of building from source the [[SDK/Docs/1.2/MeeGo_SDK_1.2_Preview|meego-ux-components package]] in a chroot development environment on Linux.

This tutorial is based on the [[SDK/Docs/1.2/MeeGo_SDK_1.2_Preview|MeeGo SDK 1.2 Preview (with Tablet)]] release.

This tutorial was created with a specific Tablet Build (04-01-2011) and has specific instructions related to that build. Specifically, a git checkout of a tag is required.

== Prerequisites ==
* Linux Only
* [[SDK/Docs/1.2/MeeGo_SDK_1.2_Preview_for_Linux| MeeGo SDK 1.2]] installed
* [[Developing_in_a_Meego_Environment|Install / Setup mic-chroot]]

== Steps ==

Step 1. Get the latest source of the meego-ux-components
<pre>
cd ~/meego.gitorious
git clone http://git.gitorious.org/meego-ux/meego-qml-launcher.git
</pre>

Step 2. Download the 4/1 version of the QEMU image:
<pre>
http://download.meego.com/trunk-daily/builds/1.1.90/1.1.99.1.20110401.1/images/meego-tablet-ia32-qemu/
</pre>

Step 3. Un-tar to get the .raw image

Step 4. Make a fs copy of the image:
<pre>
sudo mic-chroot -s ./chroot0405 -v
Downloads/meego-tablet-ia32-qemu-1.1.99.1.20110405.3.img
<exit the chroot>
</pre>

Step 5. mount --bind your source directory to a directory in the fs chroot
<pre>
sudo mount -B /home/dlawlor/meego.gitorious/meego-ux-components
meego-ux-components
</pre>

Step 5. start the chroot
<pre>
sudo mic-chroot ./chroot0401
</pre>

Step 6. Before building the sources, you need to git checkout a version
that will work with the 4/1 tablet image:
<pre>
git checkout 0.2.1
</pre>

Step 7. startmeego to get all the MeeGO services started:
<pre>
startmeego &
## Note - it will be helpful to edit the script
/usr/bin/startmeego-debug-tablet
## Change: Xephyr $DISP -screen 1024x600
## To: Xephyr $DISP -screen 1280x800
</pre>

Step 8. Start Qt Creator (in the mic-chroot terminal)
<pre>
qtcreator &
</pre>

Step 9: Install packages needed to build meego-ux-components
<pre>
zypper in libXdamage-devel
zypper in libXcomposite-devel
zypper in libX11-devel
zypper in kcalcore-devel
zypper in qt-mobility-devel
zypper in libqtopengl-devel
zypper in libcontentaction-devel
zypper in contextkit-devel
zypper in mlite
zypper in libexif-devel
</pre>

Step 10. Build and Install
<pre>
# In Qt Creator: Build->Build All

# from the chroot terminal (Until install / deploy step in Qt Creator is tested)
cd ../meego-ux-components-build-desktop #If shadow build was checked
make install
</pre>

Step 11. Run meego-ux-widgetgallery in a separate window
<pre>
qmlviewer /usr/share/meego-ux-widgetgallery/main.qml
</pre>

Step 12. Run meego-ux-widgetgallery in the Xephyr startmeego window
<pre>
export DISPLAY=:2
qmlviewer /usr/share/meego-ux-widgetgallery/main.qml

Step 13. Run meego-ux-widgetgallery directly from the MeeGo environment
# in the Xephyr Window, hit the Home (Windows) key
# Choose the App Viewer
# Click on Terminal
# run this command in the terminal window:
qmlviewer /usr/share/meego-ux-widgetgallery/main.qml
</pre>

Step 14. You can also copy an existing .desktop file and change the exec
statement to meego-ux-widgetgallery if you want to click on an icon to
start it.

== Todo ==
* Automate the creation / startup of the chroot - in the the above steps, design a script which can perform steps 2 - 5, 7, 9, 14
* Also document how to set up the SDK to run this application on a device.

MeeGo UX Components Chroot Tutorial

2011-04-11T22:06:42Z

Dlawlor:

== Overview ==
This tutorial will take the developer through the process of building from source the [[SDK/Docs/1.2/MeeGo_SDK_1.2_Preview|meego-ux-components package]] in a chroot development environment on Linux.

This tutorial is based on the [[SDK/Docs/1.2/MeeGo_SDK_1.2_Preview|MeeGo SDK 1.2 Preview (with Tablet)]] release.

This tutorial was created with a specific Tablet Build (04-01-2011) and has specific instructions related to that build. Specifically, a git checkout of a tag is required.

== Prerequisites ==
* Linux Only
* [[SDK/Docs/1.2/MeeGo_SDK_1.2_Preview_for_Linux| MeeGo SDK 1.2]] installed
* [[Developing_in_a_Meego_Environment|Install / Setup mic-chroot]]

== Steps ==

Step 1. Get the latest source of the meego-ux-components
<pre>
cd ~/meego.gitorious
git clone http://git.gitorious.org/meego-ux/meego-qml-launcher.git
</pre>

Step 2. Download the 4/1 version of the QEMU image:
<pre>
http://download.meego.com/trunk-daily/builds/1.1.90/1.1.99.1.20110401.1/images/meego-tablet-ia32-qemu/
</pre>

Step 3. Un-tar to get the .raw image

Step 4. Make a fs copy of the image:
<pre>
sudo mic-chroot -s ./chroot0405 -v
Downloads/meego-tablet-ia32-qemu-1.1.99.1.20110405.3.img
<exit the chroot>
</pre>

Step 5. mount --bind your source directory to a directory in the fs chroot
<pre>
sudo mount -B /home/dlawlor/meego.gitorious/meego-ux-components
meego-ux-components
</pre>

Step 5. start the chroot
<pre>
sudo mic-chroot ./chroot0401
</pre>

Step 6. Before building the sources, you need to git checkout a version
that will work with the 4/1 tablet image:
<pre>
git checkout 0.2.1
</pre>

Step 7. startmeego to get all the MeeGO services started:
<pre>
startmeego &
## Note - it will be helpful to edit the script
/usr/bin/startmeego-debug-tablet
## Change: Xephyr $DISP -screen 1024x600
## To: Xephyr $DISP -screen 1280x800
</pre>

Step 8. Start Qt Creator (in the mic-chroot terminal)
<pre>
qtcreator &
</pre>

Step 9: Install packages needed to build meego-ux-components
<pre>
zypper in libXdamage-devel
zypper in libXcomposite-devel
zypper in libX11-devel
zypper in kcalcore-devel
zypper in qt-mobility-devel
zypper in libqtopengl-devel
zypper in libcontentaction-devel
zypper in contextkit-devel
zypper in mlite
zypper in libexif-devel
</pre>

Step 10. Install
<pre>
cd ../meego-ux-components-build-desktop #If shadow build was checked
make install
</pre>

Step 11. Run meego-ux-widgetgallery in a separate window
<pre>
qmlviewer /usr/share/meego-ux-widgetgallery/main.qml
</pre>

Step 12. Run meego-ux-widgetgallery in the Xephyr startmeego window
<pre>
export DISPLAY=:2
qmlviewer /usr/share/meego-ux-widgetgallery/main.qml

#. Run meego-ux-widgetgallery directly from the MeeGo environment
# in the Xephyr Window, hit the Home (Windows) key
# Choose the App Viewer
# Click on Terminal
# run this command in the terminal window:
qmlviewer /usr/share/meego-ux-widgetgallery/main.qml

# you can also copy an existing .desktop file and change the exec
statement to meego-ux-widgetgallery if you want to click on an icon to
start it.
</pre>

MeeGo UX Components Chroot Tutorial

2011-04-11T21:27:29Z

Dlawlor:

== Overview ==
This tutorial will take the developer through the process of building from source the [[SDK/Docs/1.2/MeeGo_SDK_1.2_Preview|meego-ux-components package]] in a chroot development environment on Linux.

This tutorial is based on the [[SDK/Docs/1.2/MeeGo_SDK_1.2_Preview|MeeGo SDK 1.2 Preview (with Tablet)]] release.

This tutorial was created with a specific Tablet Build (04-01-2011) and has specific instructions related to that build. Specifically, a git checkout of a tag is required.

== Prerequisites ==
* Linux Only
* [[SDK/Docs/1.2/MeeGo_SDK_1.2_Preview_for_Linux| MeeGo SDK 1.2]] installed
* [[Developing_in_a_Meego_Environment|Install / Setup mic-chroot]]

== Steps ==

Step 1. Get the latest source of the meego-ux-components
cd ~/meego.gitorious
git clone http://git.gitorious.org/meego-ux/meego-qml-launcher.git

Step 2. Download the 4/1 version of the QEMU image:
http://download.meego.com/trunk-daily/builds/1.1.90/1.1.99.1.20110401.1/images/meego-tablet-ia32-qemu/

Step 3. Un-tar to get the .raw image

Step 4. Make a fs copy of the image:
sudo mic-chroot -s ./chroot0405 -v
Downloads/meego-tablet-ia32-qemu-1.1.99.1.20110405.3.img
<exit the chroot>

Step 5. mount --bind your source directory to a directory in the fs chroot
sudo mount -B /home/dlawlor/meego.gitorious/meego-ux-components
meego-ux-components

Step 5. start the chroot
sudo mic-chroot ./chroot0401

Step 6. Before building the sources, you need to git checkout a version
that will work with the 4/1 tablet image:
git checkout 0.2.1

Step 7. startmeego to get all the MeeGO services started:
startmeego &
## Note - it will be helpful to edit the script
/usr/bin/startmeego-debug-tablet
## Change: Xephyr $DISP -screen 1024x600
## To: Xephyr $DISP -screen 1280x800

Step 8. Start Qt Creator (in the mic-chroot terminal)
qtcreator &

Step 9: Install packages needed to build meego-ux-components
zypper in libXdamage-devel
zypper in libXcomposite-devel
zypper in libX11-devel
zypper in kcalcore-devel
zypper in qt-mobility-devel
zypper in libqtopengl-devel
zypper in libcontentaction-devel
zypper in contextkit-devel
zypper in mlite
zypper in libexif-devel

#. Install
cd ../meego-ux-components-build-desktop #If shadow build was checked
make install

#. Run meego-ux-widgetgallery in a separate window
qmlviewer /usr/share/meego-ux-widgetgallery/main.qml

#. Run meego-ux-widgetgallery in the Xephyr startmeego window
export DISPLAY=:2
qmlviewer /usr/share/meego-ux-widgetgallery/main.qml

#. Run meego-ux-widgetgallery directly from the MeeGo environment
# in the Xephyr Window, hit the Home (Windows) key
# Choose the App Viewer
# Click on Terminal
# run this command in the terminal window:
qmlviewer /usr/share/meego-ux-widgetgallery/main.qml

# you can also copy an existing .desktop file and change the exec
statement to meego-ux-widgetgallery if you want to click on an icon to
start it.

MeeGo UX Components Chroot Tutorial

2011-04-11T21:14:23Z

Dlawlor: Building and Running MeeGo UX Components in a Linux chroot environment

MeeGo UX Components

2011-03-31T21:37:10Z

Dlawlor: /* Install the MeeGo UX Components */

=Overview=
This page will walk you through the process of creating an application with the QML based MeeGo UX Components. The MeeGo UX Components provide a set UI elements allowing you to quickly build applications which tightly integrate with the MeeGo user experience.

=Install the MeeGo UX Components=
You can install the MeeGo UX components either from the zypper (recommended) or directly form the latest version of the source code. This code assumes you are working either on a MeeGo system [[SDK/Docs/1.2/MeeGo_SDK_1.2_Preview_for_Windows|(Windows]] | [[SDK/Docs/1.2/MeeGo_SDK_1.2_Preview_for_Linux|Linux)]], within the [[SDK/Qemu|MeeGo SDK QEMU environment]], or within a [[Developing_in_a_Meego_Environment#Step_1:_Chrooting_into_the_development_image|MeeGo chroot configuration]].

==Zypper==
To install the MeeGo UX Components via zypper:
zypper install meego-ux-components-devel

==From Source==
We'll first clone the source from the upstream repository location on Gitorious:
git clone git://meego.gitorious.org/meego-ux/meego-ux-components
cd meego-ux-components
qmake
make
sudo make install
NOTE: If you haven't been doing active development from sources, you may need several development dependency packages. The easiest way to get those dependencies installed is to use zypper to install the sources for meego-u-components first. You can then pull from GIT for the tip of development. This command tells zypper to install the source for meego-ux-components, which will install any build dependencies as well:
zypper si meego-ux-components

=Seeing the MeeGo UX Components=

Next lets test the install and verify that the widgets are installed. The default location for the sample applications using the components are:
/usr/share/meego-ux-app-photos
/usr/share/meego-ux-tutorial
/usr/share/meego-ux-widgetgallery

We will run the widget gallery using the qmlviewer:
$ qmlviewer /usr/share/meego-ux-widgetgallery/main.qml

=Building your first application=
Now that the MeeGo UX Components are installed on your system, you can begin developing a new application using the components.

# Launch Qt Creator.
# Select 'Create Project'
# Under Projects select 'Qt Quick Project'
# 'QML Application' will be selected for the template type.
# Click 'Choose...'
# Give the project a name, for example "thatwaseasy". Click 'Next'
# Click 'Finish' Qt Creator will now create the project and provide an initial QML file

Let's run it to see what it does. Click the green arrow in the lower left corner of Qt Creator. This will run the application. After a few moments a new window will appear with the text 'Hello world' Now let's add a MeeGo UX button and when it is pressed, we will change the text to say "That was easy!"

=Adding MeeGo UX Components=
Installed with the MeeGo UX Components are a set of QML files provided as a tutorial. You can find the contents of the first file in:
/usr/share/meego-ux-tutorial/step1/main.qml.

Open that file in Qt Creator, copy its contents, and replace the contents of the QML file that Qt Creator generated for you.

You can now run that first step by clicking on the green arrow (or pressing CTRL-R on the keyboard) Save your changes when prompted.

You can explore the other tutorial steps and see what they each do. Experiment with the various components you see in the widgets gallery.

=Screen Shots of the Meego UX Components=

[[File:Meego-ux-widgetgallery-1.png|800px]]
::(Initial view - showing the list of widgets)

[[File:Meego-ux-widgetgallery-Buttons.png|800px]]
::(Showing Button Widgets)

[[File:Meego-ux-widgetgallery-ModalDialogs.png|800px]]
::(Showing Modal Dialog Widgets)

[[File:Meego-ux-widgetgallery-date-picker.png|800px]]
::(Showing Date Picker Widget in action)

[[File:Meego-ux-widgetgallery-messagebox.png|800px]]
::(Showing ModalMessageBox in action)

[[File:Meego-ux-widgetgallery-progressbar.png|800px]]
::(Showing ProgressBar widget in action after clicking the Start button)

MeeGo UX Components

2011-03-30T22:44:52Z

Dlawlor: /* Install the MeeGo UX Components */

=Overview=
This page will walk you through the process of creating an application with the QML based MeeGo UX Components. The MeeGo UX Components provide a set UI elements allowing you to quickly build applications which tightly integrate with the MeeGo user experience.

=Install the MeeGo UX Components=
You can install the MeeGo UX components either from the zypper (recommended) or directly form the latest version of the source code. This code assumes you are working either on a [http://wiki.meego.com/SDK/Docs/1.2/MeeGo_SDK_1.2_Preview_for_Windows MeeGo system], within the [http://wiki.meego.com/SDK/Qemu MeeGo SDK QEMU environment], or within a [http://wiki.meego.com/Developing_in_a_Meego_Environment#Step_1:_Chrooting_into_the_development_image MeeGo chroot configuration].

==Zypper==
To install the MeeGo UX Components via zypper:
zypper install meego-ux-components-devel

==From Source==
We'll first clone the source from the upstream repository location on Gitorious:
git clone git://meego.gitorious.org/meego-ux/meego-ux-components
cd meego-ux-components
qmake
make
sudo make install
NOTE: If you haven't been doing active development from sources, you may need several development dependency packages. The easiest way to get those dependencies installed is to use zypper to install the sources for meego-u-components first. You can then pull from GIT for the tip of development. This command tells zypper to install the source for meego-ux-components, which will install any build dependencies as well:
zypper si meego-ux-components

=Seeing the MeeGo UX Components=

Next lets test the install and verify that the widgets are installed. The default location for the sample applications using the components are:
/usr/share/meego-ux-app-photos
/usr/share/meego-ux-tutorial
/usr/share/meego-ux-widgetgallery

We will run the widget gallery using the qmlviewer:
$ qmlviewer /usr/share/meego-ux-widgetgallery/main.qml

=Building your first application=
Now that the MeeGo UX Components are installed on your system, you can begin developing a new application using the components.

# Launch Qt Creator.
# Select 'Create Project'
# Under Projects select 'Qt Quick Project'
# 'QML Application' will be selected for the template type.
# Click 'Choose...'
# Give the project a name, for example "thatwaseasy". Click 'Next'
# Click 'Finish' Qt Creator will now create the project and provide an initial QML file

Let's run it to see what it does. Click the green arrow in the lower left corner of Qt Creator. This will run the application. After a few moments a new window will appear with the text 'Hello world' Now let's add a MeeGo UX button and when it is pressed, we will change the text to say "That was easy!"

=Adding MeeGo UX Components=
Installed with the MeeGo UX Components are a set of QML files provided as a tutorial. You can find the contents of the first file in:
/usr/share/meego-ux-tutorial/step1/main.qml.

Open that file in Qt Creator, copy its contents, and replace the contents of the QML file that Qt Creator generated for you.

You can now run that first step by clicking on the green arrow (or pressing CTRL-R on the keyboard) Save your changes when prompted.

You can explore the other tutorial steps and see what they each do. Experiment with the various components you see in the widgets gallery.

=Screen Shots of the Meego UX Components=

[[File:Meego-ux-widgetgallery-1.png|800px]]
::(Initial view - showing the list of widgets)

[[File:Meego-ux-widgetgallery-Buttons.png|800px]]
::(Showing Button Widgets)

[[File:Meego-ux-widgetgallery-ModalDialogs.png|800px]]
::(Showing Modal Dialog Widgets)

[[File:Meego-ux-widgetgallery-date-picker.png|800px]]
::(Showing Date Picker Widget in action)

[[File:Meego-ux-widgetgallery-messagebox.png|800px]]
::(Showing ModalMessageBox in action)

[[File:Meego-ux-widgetgallery-progressbar.png|800px]]
::(Showing ProgressBar widget in action after clicking the Start button)

MeeGo UX Components

2011-03-30T22:26:28Z

Dlawlor: /* Install the MeeGo UX Components */

=Overview=
This page will walk you through the process of creating an application with the QML based MeeGo UX Components. The MeeGo UX Components provide a set UI elements allowing you to quickly build applications which tightly integrate with the MeeGo user experience.

=Install the MeeGo UX Components=
You can install the MeeGo UX components either from the zypper (recommended) or directly form the latest version of the source code. This code assumes you are working either on a [http://wiki.meego.com/SDK/Docs/1.2/MeeGo_SDK_1.2_Preview_for_Windows MeeGo system], within the [http://link-to-sdk-qemu-info.com MeeGo SDK QEMU environment], or within a [http://link-to-meego-chroot-info.com MeeGo chroot configuration].

==Zypper==
To install the MeeGo UX Components via zypper:
zypper install meego-ux-components-devel

==From Source==
We'll first clone the source from the upstream repository location on Gitorious:
git clone git://meego.gitorious.org/meego-ux/meego-ux-components
cd meego-ux-components
qmake
make
sudo make install
NOTE: If you haven't been doing active development from sources, you may need several development dependency packages. The easiest way to get those dependencies installed is to use zypper to install the sources for meego-u-components first. You can then pull from GIT for the tip of development. This command tells zypper to install the source for meego-ux-components, which will install any build dependencies as well:
zypper si meego-ux-components

=Seeing the MeeGo UX Components=

Next lets test the install and verify that the widgets are installed. The default location for the sample applications using the components are:
/usr/share/meego-ux-app-photos
/usr/share/meego-ux-tutorial
/usr/share/meego-ux-widgetgallery

We will run the widget gallery using the qmlviewer:
$ qmlviewer /usr/share/meego-ux-widgetgallery/main.qml

=Building your first application=
Now that the MeeGo UX Components are installed on your system, you can begin developing a new application using the components.

# Launch Qt Creator.
# Select 'Create Project'
# Under Projects select 'Qt Quick Project'
# 'QML Application' will be selected for the template type.
# Click 'Choose...'
# Give the project a name, for example "thatwaseasy". Click 'Next'
# Click 'Finish' Qt Creator will now create the project and provide an initial QML file

Let's run it to see what it does. Click the green arrow in the lower left corner of Qt Creator. This will run the application. After a few moments a new window will appear with the text 'Hello world' Now let's add a MeeGo UX button and when it is pressed, we will change the text to say "That was easy!"

=Adding MeeGo UX Components=
Installed with the MeeGo UX Components are a set of QML files provided as a tutorial. You can find the contents of the first file in:
/usr/share/meego-ux-tutorial/step1/main.qml.

Open that file in Qt Creator, copy its contents, and replace the contents of the QML file that Qt Creator generated for you.

You can now run that first step by clicking on the green arrow (or pressing CTRL-R on the keyboard) Save your changes when prompted.

You can explore the other tutorial steps and see what they each do. Experiment with the various components you see in the widgets gallery.

=Screen Shots of the Meego UX Components=

[[File:Meego-ux-widgetgallery-1.png|800px]]
::(Initial view - showing the list of widgets)

[[File:Meego-ux-widgetgallery-Buttons.png|800px]]
::(Showing Button Widgets)

[[File:Meego-ux-widgetgallery-ModalDialogs.png|800px]]
::(Showing Modal Dialog Widgets)

[[File:Meego-ux-widgetgallery-date-picker.png|800px]]
::(Showing Date Picker Widget in action)

[[File:Meego-ux-widgetgallery-messagebox.png|800px]]
::(Showing ModalMessageBox in action)

[[File:Meego-ux-widgetgallery-progressbar.png|800px]]
::(Showing ProgressBar widget in action after clicking the Start button)

File:Meego-ux-widgetgallery-progressbar.png

2011-03-30T18:55:03Z

Dlawlor: Showing ProgressBar widget in action after clicking the Start button

Showing ProgressBar widget in action after clicking the Start button

File:Meego-ux-widgetgallery-messagebox.png

2011-03-30T18:54:13Z

Dlawlor: Showing ModalMessageBox in action

Showing ModalMessageBox in action

File:Meego-ux-widgetgallery-date-picker.png

2011-03-30T18:53:16Z

Dlawlor: Showing Date Picker Widget in action

Showing Date Picker Widget in action

File:Meego-ux-widgetgallery-ModalDialogs.png

2011-03-30T18:52:26Z

Dlawlor: Showing Modal Dialog Widgets

Showing Modal Dialog Widgets

File:Meego-ux-widgetgallery-Buttons.png

2011-03-30T18:51:23Z

Dlawlor: Showing Button Widgets

Showing Button Widgets

File:Meego-ux-widgetgallery-1.png

2011-03-30T18:49:44Z

Dlawlor: Initial view - showing the list of widgets

Initial view - showing the list of widgets

MeeGo UX Components

2011-03-30T01:11:41Z

Dlawlor: How to build otc-components (using as much of the MeeGo SDK as possible)

== Build the application in Qt Creator ==
Build only. No deployment as of yet.

==== Get the source code to the otc-components ====
<pre> git clone ssh://git@git.meego.com/otc-components </pre>

==== Patch for examples/meego-ux-widgetgallery/meego-ux-widgetgallery.pro ====
<pre>
diff --git a/examples/meego-ux-widgetgallery/meego-ux-widgetgallery.pro b/examples/meego-ux-widgetgallery/meego-ux-widgetgallery.pro
index cf05e7d..7c4a5ef 100644
--- a/examples/meego-ux-widgetgallery/meego-ux-widgetgallery.pro
+++ b/examples/meego-ux-widgetgallery/meego-ux-widgetgallery.pro
@@ -3,7 +3,10 @@ TEMPLATE = subdirs
TARGET = meego-ux-widgetgallery

qmlfiles.files += *.qml images/
-qmlfiles.path += $$INSTALL_ROOT/usr/share/$$TARGET
+#qmlfiles.path += $$INSTALL_ROOT/usr/share/$$TARGET
+
+# workaround for INSTALL_ROOT not finding my sysroot
+qmlfiles.path += $$[QT_INSTALL_IMPORTS]/../../../../usr/share/$$TARGET

INSTALLS += qmlfiles
</pre>

==== Patch for src/src.pro ====
<pre>
diff --git a/src/src.pro b/src/src.pro
index 45b3e33..550402f 100644
--- a/src/src.pro
+++ b/src/src.pro
@@ -57,4 +57,8 @@ HEADERS += \

qmldir.files += $$QML_SOURCES
qmldir.path += $$[QT_INSTALL_IMPORTS]/MeeGo/Components
-INSTALLS += target qmldir
+
+debug_source.files += $$SOURCES $$HEADERS
+debug_source.path += $$[QT_INSTALL_IMPORTS]/MeeGo/Components/src
+
+INSTALLS += target qmldir debug_source
</pre>

==== Open this project with Qt Creator and choose the Tablet build from 3/26/11 for the build environment ====
Please un-check shadow build

Build -> Build All

Screenshot showing the current sysroot in Qt Creator
[[File:qt-tablet-components-settings.png]]

== Now you have to drop out of the SDK to complete the task... ==

==== In the otc-components source directory ====
<pre>sudo make install</pre>
this copies the files that need to be on your device or emulator to the sysroot

==== Now you have to get these files to your device. ====
(Here are the non-network instructions)
mic-chroot to the Tablet 3/25 sysroot
<pre> Ex. sudo mic-chroot -v /usr/lib/madde/linux-i686/sysroots/meego-tablet-ia32-oss-madde-sysroot-1.1.90.8.20110323.1-fs
</pre>

cd to root of the sysroot
<pre>
cd /
tar cvfz widget-gallerly.tgz usr/lib/qt4/imports/MeeGo/Components/ usr/share/meego-ux-widgetgallery
</pre>

==== Copy this tar file to your device and cd to / on your device and untar ====
<pre>
cd /
tar xvfz <some-dir-on-device>/widget-gallerly.tgz
</pre>

==== Now run the widget gallery ====
<pre>
make sure you're logged in as user meego, NOT root

meego-qml-launcher --opengl --fullscreen --app meego-ux-widgetgallery
</pre>

File:Qt-tablet-components-settings.png

2011-03-30T01:08:06Z

Dlawlor: qt-tablet-components-settings.png

qt-tablet-components-settings.png

MeeGo UX Components

2011-03-30T01:06:22Z

Dlawlor: Created page with "== Build the application in Qt Creator == Build only. No deployment as of yet. ==== Get the source code to the otc-components ==== <pre> git clone ssh://git@git.meego.com/otc-co…"

== Build the application in Qt Creator ==
Build only. No deployment as of yet.

==== Get the source code to the otc-components ====
<pre> git clone ssh://git@git.meego.com/otc-components </pre>

==== Patch for examples/meego-ux-widgetgallery/meego-ux-widgetgallery.pro ====
<pre>
diff --git a/examples/meego-ux-widgetgallery/meego-ux-widgetgallery.pro b/examples/meego-ux-widgetgallery/meego-ux-widgetgallery.pro
index cf05e7d..7c4a5ef 100644
--- a/examples/meego-ux-widgetgallery/meego-ux-widgetgallery.pro
+++ b/examples/meego-ux-widgetgallery/meego-ux-widgetgallery.pro
@@ -3,7 +3,10 @@ TEMPLATE = subdirs
TARGET = meego-ux-widgetgallery

qmlfiles.files += *.qml images/
-qmlfiles.path += $$INSTALL_ROOT/usr/share/$$TARGET
+#qmlfiles.path += $$INSTALL_ROOT/usr/share/$$TARGET
+
+# workaround for INSTALL_ROOT not finding my sysroot
+qmlfiles.path += $$[QT_INSTALL_IMPORTS]/../../../../usr/share/$$TARGET

INSTALLS += qmlfiles
</pre>

==== Patch for src/src.pro ====
<pre>
diff --git a/src/src.pro b/src/src.pro
index 45b3e33..550402f 100644
--- a/src/src.pro
+++ b/src/src.pro
@@ -57,4 +57,8 @@ HEADERS += \

qmldir.files += $$QML_SOURCES
qmldir.path += $$[QT_INSTALL_IMPORTS]/MeeGo/Components
-INSTALLS += target qmldir
+
+debug_source.files += $$SOURCES $$HEADERS
+debug_source.path += $$[QT_INSTALL_IMPORTS]/MeeGo/Components/src
+
+INSTALLS += target qmldir debug_source
</pre>

==== Open this project with Qt Creator and choose the Tablet build from 3/26/11 for the build environment ====
Please un-check shadow build

Build -> Build All

== Now you have to drop out of the SDK to complete the task... ==

==== In the otc-components source directory ====
<pre>sudo make install</pre>
this copies the files that need to be on your device or emulator to the sysroot

==== Now you have to get these files to your device. ====
(Here are the non-network instructions)
mic-chroot to the Tablet 3/25 sysroot
<pre> Ex. sudo mic-chroot -v /usr/lib/madde/linux-i686/sysroots/meego-tablet-ia32-oss-madde-sysroot-1.1.90.8.20110323.1-fs
</pre>

cd to root of the sysroot
<pre>
cd /
tar cvfz widget-gallerly.tgz usr/lib/qt4/imports/MeeGo/Components/ usr/share/meego-ux-widgetgallery
</pre>

==== Copy this tar file to your device and cd to / on your device and untar ====
<pre>
cd /
tar xvfz <some-dir-on-device>/widget-gallerly.tgz
</pre>

==== Now run the widget gallery ====
<pre>
make sure you're logged in as user meego, NOT root

meego-qml-launcher --opengl --fullscreen --app meego-ux-widgetgallery
</pre>