Tutorial code needs to be updated to use the latest UITK version

Reported by Zygmunt Krynicki on 2013-03-21
56
This bug affects 12 people
Affects Status Importance Assigned to Milestone
Ubuntu App Developer site
Undecided
Michael Hall
Ubuntu UI Toolkit
High
Michael Hall

Bug Description

The tutorial code on http://developer.ubuntu.com/resources/app-developer-cookbook/mobile/currency-converter-phone-app/ does not work correctly any more. With the latest UITK version, MainView should only contain Page/PageStack/Tabs components and it will automatically create a Header and Toolbar.

Please update the code used in the tutorial not to confuse new developers. The current code uses a Label inside the MainView to create a title, which is then hidden by the automatic header of the MainView.

Zygmunt Krynicki (zkrynicki) wrote :

In addition, qt creator shows one warning:

Starting /usr/lib/x86_64-linux-gnu/qt5/bin/qmlscene /home/zyga/example2/example2.qml
QQmlComponent: Component is not ready

summary: - tutorial applications don't render the title bar 13.04 (raring)
+ tutorial applications don't render the header 13.04 (raring)
description: updated

tutorials need to be updated to reflect the header changes

Changed in ubuntu-ui-toolkit:
assignee: nobody → David Planella (dpm)
Tim Peeters (tpeeters) wrote :

Something like this would work:

import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
    objectName: "mainView"
    applicationName: "CurrencyConverter"
    id: root

    width: units.gu(60)
    height: units.gu(80)

    property real margins: units.gu(2)
    property real buttonWidth: units.gu(9)

    Label {
       id: title
       ItemStyle.class: "title"
       text: i18n.tr("Currency Converter")
       height: contentHeight + root.margins
       anchors {
           left: parent.left
           right: parent.right
           top: parent.top
       }
    }
}

Tim Peeters (tpeeters) on 2013-03-21
summary: - tutorial applications don't render the header 13.04 (raring)
+ Tutorial code needs to be updated to use the latest UITK version
description: updated
Changed in ubuntu-ui-toolkit:
importance: Undecided → High
status: New → Confirmed
Tim Peeters (tpeeters) wrote :

Correction: the code I pasted above was the wrong code. This one works:

import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
    objectName: "mainView"
    applicationName: "CurrencyConverter"
    id: root

    width: units.gu(60)
    height: units.gu(80)

    Page {
 title: "title"

 Label {
         text: i18n.tr("Currency Converter")
         anchors.centerIn: parent
 }
    }
}

Gacrux (ewen-cumming) wrote :

Thanks Tim, that's fixed it for me.

razor (razorxpress) wrote :

@ Tim Peeters (tpeeters) Does not work in 12.04. Application opens but nothing shows up (QQmlComponent: Component is not ready).

Tom Schillemans (t-schillemans) wrote :

It does work for me allthough I still got the messege QQmlComponent: Component not ready if I run the program but it DOES show up correctly!!

FYI: I got the same error messege if I create a new application. (the hello world standard app) and that program does work correctly aswel.

Thanks Tim for your script update!!

Sayantan Das (sayantan13) wrote :

#4 didnt work for me. But the following did.

import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
    objectName: "mainView"
    applicationName: "CurrencyConverter"
    id: root

    width: units.gu(60)
    height: units.gu(80)

    property real margins: units.gu(2)
    property real buttonWidth: units.gu(9)

  Page {
  title: "title"

    Label {

       ItemStyle.class: "title"
       text: i18n.tr("Currency Converter")
       height: contentHeight + root.margins
       anchors {
           left: parent.left
           right: parent.right
           top: parent.top
       }
    }
 }
}

Bruno Girin (brunogirin) wrote :
Download full text (6.4 KiB)

Here is the updated code for the full tutorial that now works on my laptop. The changes are:
- Introduce Page as the only component inside MainView
- Set the title of the page to i18n.tr("Currency Converter")
- Remove the Label component completely
- Move all other components inside Page (except for the convert function)
- Make sure the convert function is defined outside the Page component
- Remove topMargin: title.height in the Column component

import QtQuick 2.0
import QtQuick.XmlListModel 2.0
import Ubuntu.Components 0.1
import Ubuntu.Components.ListItems 0.1
import Ubuntu.Components.Popups 0.1

MainView {
    objectName: "mainView"
    applicationName: "CurrencyConverter"
    id: root

    width: units.gu(60)
    height: units.gu(80)

    property real margins: units.gu(2)
    property real buttonWidth: units.gu(9)

    Page {
        title: i18n.tr("Currency Converter")

        ListModel {
            id: currencies
            ListElement {
                currency: "EUR"
                rate: 1.0
            }

            function getCurrency(idx) {
                return (idx >= 0 && idx < count) ? get(idx).currency: ""
            }

            function getRate(idx) {
                return (idx >= 0 && idx < count) ? get(idx).rate: 0.0
            }
        }

        XmlListModel {
            id: ratesFetcher
            source: "http://www.ecb.int/stats/eurofxref/eurofxref-daily.xml"
            namespaceDeclarations: "declare namespace gesmes='http://www.gesmes.org/xml/2002-08-01';"
                                   +"declare default element namespace 'http://www.ecb.int/vocabulary/2002-08-01/eurofxref';"
            query: "/gesmes:Envelope/Cube/Cube/Cube"

            onStatusChanged: {
                if (status === XmlListModel.Ready) {
                    for (var i = 0; i < count; i++)
                        currencies.append({"currency": get(i).currency, "rate": parseFloat(get(i).rate)})
                }
            }

            XmlRole { name: "currency"; query: "@currency/string()" }
            XmlRole { name: "rate"; query: "@rate/string()" }
        }

        ActivityIndicator {
            anchors.right: parent.right
            running: ratesFetcher.status === XmlListModel.Loading
        }

        Component {
            id: currencySelector
            Popover {
                Column {
                    anchors {
                        top: parent.top
                        left: parent.left
                        right: parent.right
                    }
                    height: pageLayout.height
                    Header {
                        id: header
                        text: i18n.tr("Select currency")
                    }
                    ListView {
                        clip: true
                        width: parent.width
                        height: parent.height - header.height
                        model: currencies
                        delegate: Standard {
                            text: currency
                            onClicked: {
                                caller.currencyIndex = index
                                caller.input.update()
     ...

Read more...

Pat McGowan (pat-mcgowan) wrote :

michael can you take a look at this

Changed in ubuntu-ui-toolkit:
assignee: David Planella (dpm) → Michael Hall (mhall119)
Cole Jennings (colejennings) wrote :

#9's suggestion seems to fix the issue with the title but still produces the following error.

Starting /usr/lib/x86_64-linux-gnu/qt5/bin/qmlscene /home/cole/CurrencyConverter/test/test.qml
QQmlComponent: Component is not ready

Michael Hall (mhall119) on 2013-04-10
Changed in ubuntu-ui-toolkit:
status: Confirmed → In Progress

Comment #9 worked for me too, but like Cole said, the application output still says:

Starting /usr/lib/x86_64-linux-gnu/qt5/bin/qmlscene -I /home/username/CurrencyConverter -I /usr/bin -I /usr/lib/x86_64-linux-gnu/qt5/qml /home/username/CurrencyConverter/CurrencyConverter.qml
QQmlComponent: Component is not ready

Michael Hall (mhall119) on 2013-05-14
Changed in ubuntudeveloperportal:
status: New → Fix Released
assignee: nobody → Michael Hall (mhall119)
Changed in ubuntu-ui-toolkit:
status: In Progress → Fix Released
Kai Hendrik Behrends (kbehren) wrote :

The released fix no longer uses the header it is just a label on the page (no separator visible). Comment #9 seems to be the better solution.

To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Other bug subscribers