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

[Zygmunt Krynicki]

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 (zyga)]

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

[Tim Peeters (tpeeters)]

tutorials need to be updated to reflect the header changes

[Tim Peeters (tpeeters)]

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)]

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)]

Thanks Tim, that's fixed it for me.

[razor (razorxpress)]

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

[Tom Schillemans (t-schillemans)]

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)]

#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)]

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()
     ...

[Pat McGowan (pat-mcgowan)]

michael can you take a look at this

[Cole Jennings (colejennings)]

#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

[Lonnie Lee Best (launchpad-startport)]

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

[Kai Hendrik Behrends (kbehren)]

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.