Welcome to the fifth part of the tutorial. This tutorial will be wrap-up of what we have done so far.
import QtQuick 2.0
import Ubuntu.Components 0.1
import "components"
/*!
\brief MainView with a Label and Button elements.
*/
MainView {
id: root
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"
// Note! applicationName needs to match the "name" field of the click manifest
applicationName: "com.ubuntu.developer.karthik.upadya1.wrapup"
/*
This property enables the application to change orientation
when the device is rotated. The default is false.
*/
//automaticOrientation: true
property string currentTime: ""
property string currentDate: ""
property int intervalIndex: 0
property int languageIndex: 0
function updateTime () {
var date = new Date
root.currentDate = Qt.formatDateTime(date, "dd - MM - yyyy");
root.currentTime = Qt.formatDateTime(date, "hh : mm : ss");
}
width: units.gu(45)
height: units.gu(75)
Page {
title: i18n.tr("Weather Forecast")
Timer {
id: timer
running: Qt.application.active && visible == true
repeat: true
triggeredOnStart: true
onTriggered: {
root.updateTime()
interval: 1000
}
}
Column {
spacing: units.gu(1)
anchors {
margins: units.gu(2)
fill: parent
}
Row {
id: line1
spacing: units.gu(2)
Label {
id: clockText
fontSize: "large"
color: "lightgreen"
text: i18n.tr(currentDate + "\t" + currentTime)
}
}
Row {
id: line2
spacing: units.gu(2)
OptionSelector {
id: intervalTime
width: root.width * 0.4
selectedIndex: root.intervalIndex
highlightWhenPressed: true
model: [i18n.tr("Interval"),
i18n.tr("Every 3 hour"),
i18n.tr("Today"),
i18n.tr("Tomorrow"),
i18n.tr("Two days"),
i18n.tr("Three days"),
i18n.tr("Four days"),
i18n.tr("Five days"),
i18n.tr("Six days"),
i18n.tr("One week"),
i18n.tr("Eight days"),
i18n.tr("Nine days"),
i18n.tr("Ten days"),
i18n.tr("Eleven days"),
i18n.tr("Twelve days"),
i18n.tr("Thirteen days"),
i18n.tr("Two weeks"),]
containerHeight: itemHeight * 3
onSelectedIndexChanged: {
intervalIndex = selectedIndex
}
}
OptionSelector {
id: languageSelect
width: root.width * 0.5
selectedIndex: root.languageIndex
model: [i18n.tr("Language"),
i18n.tr("English"),
i18n.tr("Russian"),
i18n.tr("Italian"),
i18n.tr("Spanish"),
i18n.tr("Ukranian"),
i18n.tr("German"),
i18n.tr("Portuguese"),
i18n.tr("Romanian"),
i18n.tr("Polish"),
i18n.tr("Finnish"),
i18n.tr("Dutch"),
i18n.tr("French"),
i18n.tr("Bulgarian"),
i18n.tr("Swedish"),
i18n.tr("Chinese Traditional"),
i18n.tr("Chinese Simplified"),
i18n.tr("Turkish")]
containerHeight: itemHeight * 3
onSelectedIndexChanged: {
languageIndex = selectedIndex
}
}
}
Row {
id: line3
spacing: units.gu(2)
TextField {
id: cityName
width: root.width * 0.6
placeholderText: i18n.tr("Enter city name")
}
Button {
id: searchButton
text: i18n.tr("Search")
onClicked: {
print(cityName.text)
print("Add the logic for getting and displaying weather data here")
}
}
}
}
}
}
When you execute the project the output will be like this:
On clicking the button you will get some message in standard output.
Now to an important aspect of publishing your app, If you are from android background you know about package namespace i.e. reverse domain name to uniquely identify your application. Ubuntu also has same concept. It is set in applicationName property. You can see it above.
When you are registering for publishing your app in Ubuntu store it asks for this information in Package namespace. By default it will be "com.ubuntu.developer.<your-name>". If you have a domain you can use it too.
The same package namespace must be used in applicationName property along with name of your main qml file in your project.
For Example:
I named above project as wrapup. So my qml filename is wrapup.qml
My package namespace is "com.ubuntu.developer.karthik.upadya1"
So I have set applicationName property as com.ubuntu.developer.karthik.upadya1.wrapup
And there is more hing you have to check for, in your Ubuntu-SDK IDE click on "Publish" in left panel. In General tab there are 5 text fields.
You have to make sure that value of Name field and applicationName property are same. If they are not just copy paste the appliactionName value in Name field.
You can put your name in Maintainer field.
Leave the Title field as it is.
Next you can give one line description about your app in Description field.
Version field indicate the current version. Follow your own version method. But keep in mind that as you update the app you must increase the version number.
If you have any doubts or problems you can mail me at karthik.upadya1@gmail.com or comment below.
In next tutorial we will see how to fetch the weather data.
Happy developing :)
No comments:
Post a Comment