tag:blogger.com,1999:blog-74542662726263093772024-03-12T23:42:04.138-07:00Ubuntu TutorialAnonymoushttp://www.blogger.com/profile/10095674864375349580noreply@blogger.comBlogger7125tag:blogger.com,1999:blog-7454266272626309377.post-13897215173040725922014-04-06T22:01:00.002-07:002014-04-06T22:01:36.686-07:00Weather Forecast (First Ubuntu Touch app tutorial)<div dir="ltr" style="text-align: left;" trbidi="on">
Welcome to the fifth part of the tutorial. This tutorial will be wrap-up of what we have done so far.<br />
<br />
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><!--StartFragment--><span style="background-color: red;"><span style="color: white;">import QtQuick 2.0</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;">import Ubuntu.Components 0.1</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;">import "components"</span></span></pre>
<pre style="-qt-block-indent: 0; -qt-paragraph-type: empty; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;">
</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;">/*!</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> \brief MainView with a Label and Button elements.</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;">*/</span></span></pre>
<pre style="-qt-block-indent: 0; -qt-paragraph-type: empty; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;">
</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;">MainView {</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> id: <span style="font-style: italic;">root</span></span></span></pre>
<pre style="-qt-block-indent: 0; -qt-paragraph-type: empty; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;">
</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> // objectName for functional testing purposes (autopilot-qt5)</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> objectName: "mainView"</span></span></pre>
<pre style="-qt-block-indent: 0; -qt-paragraph-type: empty; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;">
</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> // Note! applicationName needs to match the "name" field of the click manifest</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> applicationName: "com.ubuntu.developer.karthik.upadya1.wrapup"</span></span></pre>
<pre style="-qt-block-indent: 0; -qt-paragraph-type: empty; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;">
</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> /*</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> This property enables the application to change orientation</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> when the device is rotated. The default is false.</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> */</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> //automaticOrientation: true</span></span></pre>
<pre style="-qt-block-indent: 0; -qt-paragraph-type: empty; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;">
</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> property string currentTime: ""</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> property string currentDate: ""</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> property int intervalIndex: 0</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> property int languageIndex: 0</span></span></pre>
<pre style="-qt-block-indent: 0; -qt-paragraph-type: empty; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;">
</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> function <span style="font-style: italic;">updateTime</span> () {</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> var <span style="font-style: italic;">date</span> = new <span style="font-style: italic;">Date</span></span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> <span style="font-style: italic;">root</span>.currentDate = <span style="font-style: italic;">Qt</span>.formatDateTime(<span style="font-style: italic;">date</span>, "dd - MM - yyyy");</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> <span style="font-style: italic;">root</span>.currentTime = <span style="font-style: italic;">Qt</span>.formatDateTime(<span style="font-style: italic;">date</span>, "hh : mm : ss");</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> }</span></span></pre>
<pre style="-qt-block-indent: 0; -qt-paragraph-type: empty; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;">
</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> width: units.gu(45)</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> height: units.gu(75)</span></span></pre>
<pre style="-qt-block-indent: 0; -qt-paragraph-type: empty; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;">
</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> Page {</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> title: i18n.tr("Weather Forecast")</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> Timer {</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> id: <span style="font-style: italic;">timer</span></span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> running: <span style="font-style: italic;">Qt</span>.application.active && <span style="font-style: italic;">visible</span> == true</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> repeat: true</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> triggeredOnStart: true</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> onTriggered: {</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> <span style="font-style: italic;">root</span>.updateTime()</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> interval: 1000</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> }</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> }</span></span></pre>
<pre style="-qt-block-indent: 0; -qt-paragraph-type: empty; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;">
</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> Column {</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> spacing: units.gu(1)</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> anchors {</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> margins: units.gu(2)</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> fill: <span style="font-style: italic;">parent</span></span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> }</span></span></pre>
<pre style="-qt-block-indent: 0; -qt-paragraph-type: empty; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;">
</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> Row {</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> id: <span style="font-style: italic;">line1</span></span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> spacing: units.gu(2)</span></span></pre>
<pre style="-qt-block-indent: 0; -qt-paragraph-type: empty; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;">
</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> Label {</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> id: <span style="font-style: italic;">clockText</span></span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> fontSize: "large"</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> color: "lightgreen"</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> text: i18n.tr(<span style="font-style: italic;">currentDate</span> + "\t" + <span style="font-style: italic;">currentTime</span>)</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> }</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> }</span></span></pre>
<pre style="-qt-block-indent: 0; -qt-paragraph-type: empty; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;">
</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> Row {</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> id: <span style="font-style: italic;">line2</span></span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> spacing: units.gu(2)</span></span></pre>
<pre style="-qt-block-indent: 0; -qt-paragraph-type: empty; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;">
</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> OptionSelector {</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> id: <span style="font-style: italic;">intervalTime</span></span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> width: <span style="font-style: italic;">root</span>.width * 0.4</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> selectedIndex: <span style="font-style: italic;">root</span>.intervalIndex</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> highlightWhenPressed: true</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> model: [i18n.tr("Interval"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Every 3 hour"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Today"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Tomorrow"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Two days"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Three days"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Four days"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Five days"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Six days"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("One week"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Eight days"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Nine days"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Ten days"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Eleven days"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Twelve days"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Thirteen days"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Two weeks"),]</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> containerHeight: <span style="font-style: italic;">itemHeight</span> * 3</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> onSelectedIndexChanged: {</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> <span style="font-style: italic;">intervalIndex</span> = <span style="font-style: italic;">selectedIndex</span></span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> }</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> }</span></span></pre>
<pre style="-qt-block-indent: 0; -qt-paragraph-type: empty; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;">
</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> OptionSelector {</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> id: <span style="font-style: italic;">languageSelect</span></span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> width: <span style="font-style: italic;">root</span>.width * 0.5</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> selectedIndex: <span style="font-style: italic;">root</span>.languageIndex</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> model: [i18n.tr("Language"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("English"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Russian"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Italian"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Spanish"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Ukranian"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("German"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Portuguese"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Romanian"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Polish"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Finnish"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Dutch"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("French"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Bulgarian"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Swedish"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Chinese Traditional"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Chinese Simplified"),</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> i18n.tr("Turkish")]</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> containerHeight: <span style="font-style: italic;">itemHeight</span> * 3</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> onSelectedIndexChanged: {</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> <span style="font-style: italic;">languageIndex</span> = <span style="font-style: italic;">selectedIndex</span></span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> }</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> }</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> }</span></span></pre>
<pre style="-qt-block-indent: 0; -qt-paragraph-type: empty; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;">
</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> Row {</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> id: <span style="font-style: italic;">line3</span></span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> spacing: units.gu(2)</span></span></pre>
<pre style="-qt-block-indent: 0; -qt-paragraph-type: empty; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;">
</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> TextField {</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> id: <span style="font-style: italic;">cityName</span></span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> width: <span style="font-style: italic;">root</span>.width * 0.6</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> placeholderText: i18n.tr("Enter city name")</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> }</span></span></pre>
<pre style="-qt-block-indent: 0; -qt-paragraph-type: empty; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;">
</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> Button {</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> id: <span style="font-style: italic;">searchButton</span></span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> text: i18n.tr("Search")</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> onClicked: {</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> print(<span style="font-style: italic;">cityName</span>.text)</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> print("Add the logic for getting and displaying weather data here")</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> }</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> }</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> }</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> }</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;"> }</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="background-color: red;"><span style="color: white;">}</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;">
</pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="font-family: 'Times New Roman'; white-space: normal;">When you execute the project the output will be like this:</span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="font-family: 'Times New Roman'; white-space: normal;">
</span></pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJPiyxohj7WNMW-nRp5bKOtIC7Zu1705CG77q1054GDOieTOAJAyPeLOptvRVt0F8o-q39Uh0m2VLhE725xLGLE8tBKDn_lnCQXoxvwPhrD7N-1PL6Pd_H9lKLUZypsN_F1iXU55fnMITJ/s1600/Screenshot+-+Monday+07+April+2014+-+09:56:23++IST.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJPiyxohj7WNMW-nRp5bKOtIC7Zu1705CG77q1054GDOieTOAJAyPeLOptvRVt0F8o-q39Uh0m2VLhE725xLGLE8tBKDn_lnCQXoxvwPhrD7N-1PL6Pd_H9lKLUZypsN_F1iXU55fnMITJ/s1600/Screenshot+-+Monday+07+April+2014+-+09:56:23++IST.png" height="320" width="185" /></a></div>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="font-family: 'Times New Roman'; white-space: normal;">
</span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="font-family: 'Times New Roman'; white-space: normal;">On clicking the button you will get some message in standard output.</span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="font-family: 'Times New Roman'; white-space: normal;">
</span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="font-family: 'Times New Roman'; white-space: normal;">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 <span style="background-color: white; color: blue;">applicationName</span> property. You can see it above.</span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="font-family: 'Times New Roman'; white-space: normal;">
</span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="font-family: 'Times New Roman'; white-space: normal;">When you are registering for publishing your app in Ubuntu store it asks for this information in <span style="color: blue;">Package namespace</span>. By default it will be "<span style="color: blue;">com.ubuntu.developer.<your-name></span>". If you have a domain you can use it too.</span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="font-family: 'Times New Roman'; white-space: normal;">The same package namespace must be used in <span style="color: blue;">applicationName</span> property along with name of your main qml file in your project.</span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="font-family: 'Times New Roman'; white-space: normal;">
</span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="font-family: 'Times New Roman'; white-space: normal;">For Example:</span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="font-family: Times New Roman;"><span style="white-space: normal;">I named above project as wrapup. So my qml filename is wrapup.qml</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="font-family: Times New Roman;"><span style="white-space: normal;">My package namespace is "<span style="color: blue;">com.ubuntu.developer.karthik.upadya1</span>"</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="font-family: Times New Roman;"><span style="white-space: normal;">So I have set <span style="color: blue;">applicationName</span> property as </span></span><span style="font-family: 'Times New Roman'; white-space: normal;"><span style="color: blue;">com.ubuntu.developer.karthik.upadya1.wrapup</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="font-family: 'Times New Roman'; white-space: normal;"><span style="color: blue;">
</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="font-family: 'Times New Roman'; white-space: normal;">And there is more hing you have to check for, in your Ubuntu-SDK IDE click on "<span style="color: blue;">Publish</span>" in left panel. In <span style="color: blue;">General</span> tab there are 5 text fields.</span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="font-family: 'Times New Roman'; white-space: normal;">You have to make sure that value of <span style="color: blue;">Name</span> field and <span style="color: blue;">applicationName</span> property are same. If they are not just copy paste the <span style="color: blue;">appliactionName</span> value in <span style="color: blue;">Name</span> field.</span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="font-family: 'Times New Roman'; white-space: normal;">You can put your name in <span style="color: blue;">Maintainer</span> field.</span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="font-family: 'Times New Roman'; white-space: normal;">Leave the <span style="color: blue;">Title</span> field as it is.</span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="font-family: 'Times New Roman'; white-space: normal;">Next you can give one line description about your app in <span style="color: blue;">Description</span> field.</span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="font-family: 'Times New Roman'; white-space: normal;"><span style="color: blue;">Version</span> 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.</span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="font-family: 'Times New Roman'; white-space: normal;">
</span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="font-family: Times New Roman;"><span style="white-space: normal;">If you have any doubts or problems you can mail me at karthik.upadya1@gmail.com or comment below.</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="font-family: Times New Roman;"><span style="white-space: normal;">In next tutorial we will see how to fetch the weather data.</span></span></pre>
<pre style="-qt-block-indent: 0; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><span style="font-family: Times New Roman;"><span style="white-space: normal;">Happy developing :)</span></span></pre>
</div>
Anonymoushttp://www.blogger.com/profile/10095674864375349580noreply@blogger.com0tag:blogger.com,1999:blog-7454266272626309377.post-47394727668138444272014-04-05T22:31:00.001-07:002014-04-05T22:31:21.117-07:00Weather Forecast (First Ubuntu Touch app tutorial)<div dir="ltr" style="text-align: left;" trbidi="on">
Welcome to the fourth part of creating Ubuntu touch app tutorial. In this tutorial we are going to learn something about taking Text inputs, Buttons and debugging.<br />
<br />
Create a Row element as described in the <a href="http://learnubuntutouchqml.blogspot.in/2014/04/weather-forecast-first-ubuntu-touch-app_9716.html">previous post</a>. Open the gallery application. Now click on <span style="color: blue;">Text Field</span> option. You will see different ways to implement text input in Ubuntu. Right now we are going to use the <span style="color: blue;">Standard</span> text field. Open <span style="color: blue;">TextInputs.qml</span> file in <span style="color: blue;">ubuntu-ui-toolkit-gallery</span> folder and copy the code for <span style="color: blue;">Standard</span> text field. It might look like this:<br />
<br />
<span style="background-color: yellow; color: blue;"> TextField {</span><br />
<span style="background-color: yellow; color: blue;"> objectName: "textfield_standard"</span><br />
<span style="background-color: yellow; color: blue;"> placeholderText: i18n.tr("Type me in...")</span><br />
<span style="background-color: yellow; color: blue;"> width: parent.width</span><br />
<span style="background-color: yellow; color: blue;"> }</span><br />
<br />
In your projects qml file paste the following code within the Row element that you just created. Remove the <span style="color: blue;">objectName</span> property and add <span style="color: blue;">id</span> property.<br />
Change <span style="color: blue;">placeholderText</span> value to something like Enter city name.<br />
Change the width property to root.width * 0.6<br />
<br />
Now in gallery application click the <span style="color: blue;">Buttons</span> option. This will display the different ways to implement a <span style="color: blue;">Button</span> in Ubuntu. Now we are going to use the <span style="color: blue;">Standard</span> button. Next step is to copy the code for it <span style="color: blue;">Buttons.qml</span> file and paste it in your project's qml file. The code for Standard button might look like this:<br />
<br />
<span style="background-color: yellow; color: blue;"> Button {</span><br />
<span style="background-color: yellow; color: blue;"> objectName: "button_text"</span><br />
<span style="background-color: yellow; color: blue;"> text: i18n.tr("Call")</span><br />
<span style="background-color: yellow; color: blue;"> }</span><br />
<br />
In your project's qml file remove the <span style="color: blue;">objectName</span> property and add <span style="color: blue;">id</span> property.<br />
Change the <span style="color: blue;">text</span> property value to something like Search.<br />
After the <span style="color: blue;">text</span> property add <span style="color: blue;">onClicked</span> property. <span style="color: blue;">onClicked</span> is something like a trigger which is called every time the <span style="color: blue;">Button</span> is clicked. So we can add all the logic inside <span style="color: blue;">onClicked</span> property.<br />
<br />
Coming to <span style="color: blue;">debugging</span> part. Debugging means finding and removing errors or bugs in your program. You can easily debug your program if you find order of execution. For example when a Button is clicked we will never know what happened after it is clicked unless we write the complete logic of our program. But when our program becomes sufficiently large it becomes more difficult to debug the program. So it's a good idea to find and remove errors as soon as possible.<br />
So I use <span style="color: blue;">print</span> statement to debug my program. The <span style="color: blue;">print</span> statement is same as printf statement in 'C'. It sends whatever written inside it to the standard output.<br />
For print statements to work you must run the project. To do this in your terminal type <span style="color: blue;">qmlscene</span> then browse to your qml file and double click it. The program executes and statements written inside the print statements are displayed in terminal.<br />
<br />
Example: In previous Button statement add onClicked property like this.<br />
<br />
<span style="background-color: yellow; color: blue;"> Button {</span><br />
<span style="background-color: yellow; color: blue;"> id: button1</span><br />
<span style="background-color: yellow; color: blue;"> text: i18n.tr("Search")</span><br />
<span style="background-color: yellow; color: blue;"> onClicked: print("Search button is clicked")</span><br />
<span style="background-color: yellow; color: blue;"> }</span><br />
<br />
So whenever you press the Search button the statement "Search button is clicked" is printed on terminal.<br />
<br />
That's it for today's part. Hopefully you learned something. In next tutorial I will give the full code up-to what we have done so far.<br />
<br />
For any queries or problem mail me at <span style="color: blue;">karthik.upadya1@gmail.com</span> or you can comment below.<br />
Happy developing :)</div>
Anonymoushttp://www.blogger.com/profile/10095674864375349580noreply@blogger.com0tag:blogger.com,1999:blog-7454266272626309377.post-13064539817634535612014-04-04T20:52:00.002-07:002014-04-04T20:52:52.274-07:00Weather Forecast (First Ubuntu Touch app tutorial)<div dir="ltr" style="text-align: left;" trbidi="on">
This post takes off exactly from <a href="http://learnubuntutouchqml.blogspot.in/2014/04/weather-forecast-first-ubuntu-touch-app_4.html">previous post</a>. For this part of tutorial you must open the gallery application described <a href="http://learnubuntutouchqml.blogspot.in/2014/04/designing-help.html">Introduction</a> tutorial.<br />
<br />
In this app I will be using <a href="http://openweathermap.org/">openweathermap</a> api to display weather data.<br />
<br />
If you examine the openweathermap api you will find the different intervals supported by it. This api generally supports following intervals<br />
<br />
1. Every 3 hour<br />
2. Daily weather updates for a span of two weeks.<br />
<br />
In our app we can display the interval as <span style="color: blue;">OptionSelector</span>. This is used to select one option from whole bunch of options. In <span style="color: blue;">ubuntu-ui-toolkit-gallery</span> folder open the file <span style="color: blue;">OptionSelectors.qml</span><br />
In gallery app select the <span style="color: blue;">Option Selector</span>. It will show different ways of using option selector.<br />
<br />
In this app we will be using Collapsed one.<br />
Goto <span style="color: blue;">OptionSelectors.qml</span> and copy the code for collapsed option selector.<br />
<br />
<span style="background-color: yellow; color: blue;">OptionSelector {</span><br />
<span style="background-color: yellow; color: blue;"> objectName: "optionselector_collapsed"</span><br />
<span style="background-color: yellow; color: blue;"> text: i18n.tr("Collapsed")</span><br />
<span style="background-color: yellow; color: blue;"> model: [i18n.tr("Value 1"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Value 2"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Value 3"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Value 4")]</span><br />
<span style="background-color: yellow; color: blue;">}</span><br />
<br />
In our project create one more Row element after the Row element for time.<br />
<br />
<span style="background-color: yellow; color: blue;">Column {</span><br />
<span style="background-color: yellow; color: blue;"> ...</span><br />
<span style="background-color: yellow; color: blue;"> Row {</span><br />
<span style="background-color: yellow; color: blue;"> //This is time</span><br />
<span style="background-color: yellow; color: blue;"> }</span><br />
<span style="background-color: yellow; color: blue;"><br /></span>
<span style="background-color: yellow; color: blue;"> Row {</span><br />
<span style="background-color: yellow; color: blue;"> id: line2</span><br />
<span style="background-color: yellow; color: blue;"> spacing: units.gu(2)</span><br />
<span style="background-color: yellow; color: blue;"> //Here we have to add OptionSelector</span><br />
<span style="background-color: yellow; color: blue;"> }</span><br />
<span style="background-color: yellow; color: blue;">}</span><br />
<br />
Paste the <span style="color: blue;">OptionSelector</span> where I mentioned. Create an <span style="color: blue;">id</span> for it and name it. You can remove the <span style="color: blue;">objectName</span> property, it's used for debugging. You can remove the <span style="color: blue;">text</span> property as it will eat some space.<br />
<br />
This is OptionSelector<br />
<br />
<span style="background-color: yellow; color: blue;"> OptionSelector {</span><br />
<span style="background-color: yellow; color: blue;"> id: intervalTime</span><br />
<span style="background-color: yellow; color: blue;"> width: root.width * 0.4</span><br />
<span style="background-color: yellow; color: blue;"> selectedIndex: root.intervalIndex</span><br />
<span style="background-color: yellow; color: blue;"> highlightWhenPressed: true</span><br />
<span style="background-color: yellow; color: blue;"> model: [i18n.tr("Interval"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Every 3 hour"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Today"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Tomorrow"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Two days"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Three days"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Four days"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Five days"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Six days"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("One week"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Eight days"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Nine days"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Ten days"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Eleven days"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Twelve days"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Thirteen days"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Two weeks"),]</span><br />
<span style="background-color: yellow; color: blue;"> containerHeight: itemHeight * 3</span><br />
<span style="background-color: yellow; color: blue;"> onSelectedIndexChanged: {</span><br />
<span style="background-color: yellow; color: blue;"> root.intervalIndex = selectedIndex</span><br />
<span style="background-color: yellow; color: blue;"> }</span><br />
<span style="background-color: yellow; color: blue;"> }</span><br />
<br />
<span style="color: blue;">width</span> property specify the total size of OptionSelector. We must specify it relative to the size of root. This allows scaling of app across different devices.<br />
<br />
<span style="color: blue;">selectedIndex</span> property holds the index of currently selected item in OptionSelector. Here I have set it to a variable intervalIndex. You must define it as specified in previous post. Note this variable is of int type. You can consider OptionSelector as an array and selectedIndex as array index pointing to current selected item.<br />
<br />
<span style="color: blue;">model</span> can be thought as array items.<br />
<br />
<span style="color: blue;">containerHeight</span> property indicates the size of OptionSelector when expanded. This is set to <span style="color: blue;">itemHeight</span> * 3. This means when OptionSelector is fully revealed it's height will be thrice the height of one item. Simply it will display 3 options when expanded.<br />
<br />
<span style="color: blue;">onSelectedIndexChanged</span> is a signal of <span style="color: blue;">OptionSelector</span>. Whenever the <span style="color: blue;">selectedIndex</span> changed that is user selects a different option this signal is created and code within this signal is executed. Here we will save the <span style="color: blue;">selectedIndex</span> in <span style="color: blue;">intervalIndex</span> variable. The intervalIndex must be defined as int type<br />
<br />
<span style="background-color: yellow; color: blue;">property int intervalIndex: 0</span><br />
<br />
By default 0th item i.e. first item of OptionSelector is selected.<br />
<br />
After closing the above OptionSelector add the following statements. This is for selecting the langauage.<br />
<br />
<span style="background-color: yellow; color: blue;"> OptionSelector {</span><br />
<span style="background-color: yellow; color: blue;"> id: languageSelect</span><br />
<span style="background-color: yellow; color: blue;"> width: root.width * 0.5</span><br />
<span style="background-color: yellow; color: blue;"> selectedIndex: root.languageIndex</span><br />
<span style="background-color: yellow; color: blue;"> model: [i18n.tr("Language"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("English"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Russian"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Italian"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Spanish"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Ukranian"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("German"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Portuguese"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Romanian"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Polish"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Finnish"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Dutch"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("French"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Bulgarian"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Swedish"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Chinese Traditional"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Chinese Simplified"),</span><br />
<span style="background-color: yellow; color: blue;"> i18n.tr("Turkish")]</span><br />
<span style="background-color: yellow; color: blue;"> containerHeight: itemHeight * 3</span><br />
<span style="background-color: yellow; color: blue;"> onSelectedIndexChanged: {</span><br />
<span style="background-color: yellow; color: blue;"> root.languageIndex = selectedIndex</span><br />
<span style="background-color: yellow; color: blue;"> }</span><br />
<span style="background-color: yellow; color: blue;"> }</span><br />
<br />
Define the <span style="color: blue;">languageIndex</span> as int variable and its value as zero.<br />
<br />
Now add another <span style="color: blue;">Row</span> element.<br />
<br />
<span style="background-color: yellow; color: blue;">Column {</span><br />
<span style="background-color: yellow; color: blue;"> ...</span><br />
<span style="background-color: yellow; color: blue;"> Row {</span><br />
<span style="background-color: yellow; color: blue;"> id: line1</span><br />
<span style="background-color: yellow; color: blue;"> ...</span><br />
<span style="background-color: yellow; color: blue;"> }</span><br />
<span style="background-color: yellow; color: blue;"> Row {</span><br />
<span style="background-color: yellow; color: blue;"> id: line2</span><br />
<span style="background-color: yellow; color: blue;"> ...</span><br />
<span style="background-color: yellow; color: blue;"> }</span><br />
<span style="background-color: yellow; color: blue;"> //Add this</span><br />
<span style="background-color: yellow; color: blue;"> Row {</span><br />
<span style="background-color: yellow; color: blue;"> id: line3</span><br />
<span style="background-color: yellow; color: blue;"> spacing: units.gu(2)</span><br />
<span style="background-color: yellow; color: blue;"> ...</span><br />
<span style="background-color: yellow; color: blue;"> }</span><br />
<span style="background-color: yellow; color: blue;">}</span><br />
<br />
This Row element includes the Text field for entering city name and a Search button.<br />
<br />
In <span style="color: blue;">ubuntu-ui-toolkit-gallery</span> folder to search for <span style="color: blue;">TextInputs.qml</span> and <span style="color: blue;">Buttons.qml</span> file. Copy paste the respective code within the third Row. Give those items an id.<br />
<br />
We have reached at end of this tutorial. Hopefully you learned something. In next tutorial I will give the code for Text field and button, share a method to easily debug your program.<br />
<br />
If you have any problem or queries you can mail me at karthik.upadya1@gmail.com or leave comment below.<br />
Happy developing :)</div>
Anonymoushttp://www.blogger.com/profile/10095674864375349580noreply@blogger.com0tag:blogger.com,1999:blog-7454266272626309377.post-63305108560501428832014-04-04T02:44:00.004-07:002014-04-04T02:44:59.675-07:00Weather Forecast (First Ubuntu Touch app tutorial)<div dir="ltr" style="text-align: left;" trbidi="on">
Welcome to the second part of creating the Weather Forecast app. This post continues from <a href="http://learnubuntutouchqml.blogspot.in/2014/04/weather-forecast-first-ubuntu-touch-app.html">previous post</a>.<br />
<br />
Next thing we want to add is display current date and time. We can use <span style="color: blue;">Timer</span> declarative statement to trigger events when time changes.<br />
attribute shows<br />
<span style="background-color: yellow; color: blue;"> Timer {</span><br />
<span style="background-color: yellow; color: blue;"> id: updateTimer</span><br />
<span style="background-color: yellow; color: blue;"> running: Qt.application.active && visible == true</span><br />
<span style="background-color: yellow; color: blue;"> repeat: true</span><br />
<span style="background-color: yellow; color: blue;"> triggeredOnStart: true</span><br />
<span style="background-color: yellow; color: blue;"> onTriggered: {</span><br />
<span style="background-color: yellow; color: blue;"> root.updateTime()</span><br />
<span style="background-color: yellow; color: blue;"> interval: 1000</span><br />
<span style="background-color: yellow; color: blue;"> }</span><br />
<span style="background-color: yellow; color: blue;"> }</span><br />
<br />
Above snippet shows how I used the Timer declarative statement.<br />
The <span style="color: blue;">id </span>attribute is used to reference this Timer statement from any part of the code.<br />
The <span style="color: blue;">running</span> attribute determines whether Timer needs to run or not. If the application is in background or not visible on screen then we don't want to update the timer so we can save the battery.<br />
The repeat attribute indicates whether the Timer statement must be kept in loop or not.<br />
The <span style="color: blue;">triggeredOnStart</span> statement is used to specify the Timer statements must be executed as you launch the application.<br />
<span style="color: blue;">onTriggered</span> statement is called every time the Timer is triggered.<br />
When the Timer is triggered we call a javascript function updateTime() for an interval of every 1000ms or 1 second.<br />
<br />
Now you might be wondering from where root came. I have referenced my MainView as root.<br />
<br />
<span style="background-color: yellow; color: blue;">MainView {</span><br />
<span style="background-color: yellow; color: blue;"> id: root</span><br />
<span style="background-color: yellow; color: blue;">....</span><br />
<span style="background-color: yellow; color: blue;">}</span><br />
<br />
Within this mainview we are defining our javascript functions and variables.<br />
<br />
After the statement <span style="color: blue;">height: units.gu(75)</span> add the <span style="color: blue;">updateTime()</span> function.<br />
<br />
<span style="background-color: yellow; color: blue;">function updateTime() {</span><br />
<span style="background-color: yellow; color: blue;"> var date = new Date;</span><br />
<span style="background-color: yellow; color: blue;"> root.currentDate = Qt.formatDateTime(date, "dd : MM : yyyy");</span><br />
<span style="background-color: yellow; color: blue;"> root.currentTime = Qt.formatDateTime(date, "hh : mm : ss");</span><br />
<span style="background-color: yellow; color: blue;">}</span><br />
<br />
The first line gets the current date and time.<br />
Then we use Qt.formatDateTime() function to format the date and time as required. The date and time are stored in currentDate and currentTime variable.<br />
These variables must be declared.<br />
<br />
Above the function updateTime() add following statements.<br />
<br />
<span style="background-color: yellow; color: blue;">property string currentDate: ""</span><br />
<span style="background-color: yellow; color: blue;">property string currentTime: ""</span><br />
<br />
Every variable is used as property in qml. Then specify the type of property. Then specify the variable name. Then specify the initial value of variable. Unlike other languages a : separates the variable name and value, there is no need to end with the ;<br />
<br />
Now we have the date and time variable stored in some variables we can easily use them to display on application.<br />
<br />
Next within the Column statement add following statements.<br />
<br />
Column {<br />
...<br />
//Add below lines<br />
<span style="background-color: yellow; color: blue;"> Row {</span><br />
<span style="background-color: yellow; color: blue;"> id: line1</span><br />
<span style="background-color: yellow; color: blue;"> spacing: units.gu(2)</span><br />
<span style="background-color: yellow; color: blue;"> Label {</span><br />
<span style="background-color: yellow; color: blue;"> id: clockText</span><br />
<span style="background-color: yellow; color: blue;"> fontSize: "large"</span><br />
<span style="background-color: yellow; color: blue;"> color: "lightgreen"</span><br />
<span style="background-color: yellow; color: blue;"> text: i18n.tr(currentDate + "\t" + currentTime)</span><br />
<span style="background-color: yellow; color: blue;"> }</span><br />
<span style="background-color: yellow; color: blue;"> }</span><br />
}<br />
<br />
Within <span style="color: blue;">Row</span> we specify the <span style="color: blue;">spacing</span> attribute. It indicates how much space must be left between each item within the row.<br />
A <span style="color: blue;">Row</span> is something which places the item horizontally.<br />
A <span style="color: blue;">Column</span> is something which places the item vertically. Basically our app is divided as one column which has multiple rows.<br />
The statement <span style="color: blue;">units.gu(2)</span> specify the amount of spacing. It specify the spacing in grid units. Grid units is something Ubuntu has designed wonderfully to make your application scale across different device width and height. To specify the dimension of an item one must always use units.gu()<br />
<br />
A <span style="color: blue;">Label</span> is used to display some text. This text is uneditable. Using this we display the current date and time.<br />
<br />
This is it for this post. In the next post I will be covering the <span style="color: blue;">OptionSelector</span> for interval time and Language, <span style="color: blue;">TextField</span>, <span style="color: blue;">Buttons</span>. Stay tuned.<br />
<br />
If you have any problem mail me at <span style="color: blue;">karthik.upadya1@gmail.com</span> or you can comment below.<br />
Happy developing :)</div>
Anonymoushttp://www.blogger.com/profile/10095674864375349580noreply@blogger.com0tag:blogger.com,1999:blog-7454266272626309377.post-11723054328363638022014-04-03T23:04:00.000-07:002014-04-03T23:06:44.741-07:00Weather Forecast. (First Ubuntu touch app tutorial)<div dir="ltr" style="text-align: left;" trbidi="on">
Hello, today I am going to share how I created my first Ubuntu touch app. As I started with developing the app I wondered how easy it is to develop apps for Ubuntu touch app. This tutorial could be divided into multiple post.<br />
<br />
OK lets start with designing the app.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm8ySR1Rr3UL5GlbC0tMjrA7mhZ6rAvToUJTsCajMyuTpRMDIYRgfRHTgF4SQELZAtwOcx9Ywv-U2gF7SjMUHDMByFuSn20XNybq_8bbt4R3t4565BZH29FG7v7ao-_TJYPnx5HWfdvxuT/s1600/WeatherForecastPlan.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm8ySR1Rr3UL5GlbC0tMjrA7mhZ6rAvToUJTsCajMyuTpRMDIYRgfRHTgF4SQELZAtwOcx9Ywv-U2gF7SjMUHDMByFuSn20XNybq_8bbt4R3t4565BZH29FG7v7ao-_TJYPnx5HWfdvxuT/s1600/WeatherForecastPlan.jpg" height="240" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
OK the image look bad, but I promise final app will be wonderful.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Open the Ubuntu-SDK IDE and create new project. You can keep all default settings in the first screen.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIXSSBnuAg6aOf78NP0D4xqfUFJVKfYbdr3ejEaBa35vg1_Ww7bhV8Bg0_dBbfshA7D6J1kW-oxrJR4syMO2bkEwWL2GSSxzGy7r1UxMHZ1WqJJSKC2cTl9lbGkEvVbfcrlcTCMOJsI5N9/s1600/Screenshot+-+Friday+04+April+2014+-+10:53:13++IST.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIXSSBnuAg6aOf78NP0D4xqfUFJVKfYbdr3ejEaBa35vg1_Ww7bhV8Bg0_dBbfshA7D6J1kW-oxrJR4syMO2bkEwWL2GSSxzGy7r1UxMHZ1WqJJSKC2cTl9lbGkEvVbfcrlcTCMOJsI5N9/s1600/Screenshot+-+Friday+04+April+2014+-+10:53:13++IST.png" height="198" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Hit the choose button. Give the project a name and hit Next. (You can give any name).</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-5qWyBDum3yuOESkNNNAgdASDjYm3HhAUlrC4hYJaTXq4QIvDAgiEQDHnV92s271g9O0BEh12DhvuyRnaFza3zlp_fT26iMUk56T-BtI89_VauU76RlhVP9q8uc50YPqwfWi5DZBfMLDj/s1600/Screenshot+-+Friday+04+April+2014+-+10:56:24++IST.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-5qWyBDum3yuOESkNNNAgdASDjYm3HhAUlrC4hYJaTXq4QIvDAgiEQDHnV92s271g9O0BEh12DhvuyRnaFza3zlp_fT26iMUk56T-BtI89_VauU76RlhVP9q8uc50YPqwfWi5DZBfMLDj/s1600/Screenshot+-+Friday+04+April+2014+-+10:56:24++IST.png" height="230" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Now hit Finish button.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Congrats you have created your first project.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Now open the MyProject01.qml file. Remove the following selected lines.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf5rlcYeSGIrSyzmI2M4jjip7lFQI1rn-QbDIB23D3gMNpH-WP_IYbgdcLo545E29ahGQZU7pWsWwmYe7eanKLbRBtP_9DK61-Z4wWdI_7rpafC_wq4kFpQaVvqQGXzx8ZC_ifDZQBfOaJ/s1600/Screenshot+-+Friday+04+April+2014+-+11:02:27++IST.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf5rlcYeSGIrSyzmI2M4jjip7lFQI1rn-QbDIB23D3gMNpH-WP_IYbgdcLo545E29ahGQZU7pWsWwmYe7eanKLbRBtP_9DK61-Z4wWdI_7rpafC_wq4kFpQaVvqQGXzx8ZC_ifDZQBfOaJ/s1600/Screenshot+-+Friday+04+April+2014+-+11:02:27++IST.png" height="173" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
These lines are not required for our project.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Referring the design we see that first we must display app name at top. This can be done as follows:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
In the "Page" statement you will see the following line</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
title: i18n.tr("Simple")</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Above line state that <span style="color: blue;">Simple</span> is your app name or title.</div>
<div class="separator" style="clear: both; text-align: left;">
So change the <span style="color: blue;">Simple</span> to any other name you like. Here i18n.tr() is the method used for internationalization. If you want your app to support multiple language then put the string elements within i18n.tr() method. It will do the job for you.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
You can run the application at any time. Just hit the big green Play button at left to run the app. If the big green button is disabled then open your terminal and type the following command:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<span style="color: blue;">qmlscene</span></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Then hit enter. Now browse to the qml file and double click it. You will see the app running if there are no errors.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
This tutorial is now quite long, I will break up now. And continue in the next post. Until then play around with code, read the documentation mentioned in <a href="http://learnubuntutouchqml.blogspot.in/search/label/Introduction%20to%20Ubuntu%20Touch">Getting Started</a> posts.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
If you have any queries or problem you can comment below or mail to karthik.upadya1@gmail.com</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Happy developing :)</div>
</div>
Anonymoushttp://www.blogger.com/profile/10095674864375349580noreply@blogger.com0tag:blogger.com,1999:blog-7454266272626309377.post-6825181758365804392014-04-03T21:33:00.002-07:002014-04-03T23:06:12.793-07:00Designing help.<div dir="ltr" style="text-align: left;" trbidi="on">
If you have seen a native Ubuntu touch app it basically has a Ubuntu feel. What I am trying to say is the buttons, shapes etc trying to say that they are designed for Ubuntu.<br />
<br />
You might think that it is very difficult create a button of that style or a list view of that feel.<br />
<br />
Well, at first even I thought the same. But it is as easy as copy pasting the code.<br />
<br />
Ubuntu has developed a template which has all the User Interface elements with the Ubuntu feel. If you want a button just find the code for it and copy paste it in your project.<br />
<br />
You can find this template in your computer. Goto your file system then usr folder then lib folder then ubuntu-ui-toolkit folder then examples folder then unutnu-ui-toolkit-gallery folder. Here you will find design templates of all UI elements in Ubuntu. To view how each item looks like run the gallery file by double clicking it.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQgtI1L8jqHfPjulaMGZSBuEUcgdnNJEBABG5kKX7QJkalygTfHcmoZCFoUeKaQsdDVIUrvyPlvNQu1AgkZlJpJS2rigCgMAID8RRs79GDsCUG4-ncMqqmSn-j1dbGU6cq0JYfbt-mMPNx/s1600/Screenshot+-+Friday+04+April+2014+-+09:52:42++IST.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQgtI1L8jqHfPjulaMGZSBuEUcgdnNJEBABG5kKX7QJkalygTfHcmoZCFoUeKaQsdDVIUrvyPlvNQu1AgkZlJpJS2rigCgMAID8RRs79GDsCUG4-ncMqqmSn-j1dbGU6cq0JYfbt-mMPNx/s1600/Screenshot+-+Friday+04+April+2014+-+09:52:42++IST.png" height="208" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
For example if you want a Text Input in your app then click on Text Field entry. This will show all the different types of Text Input in Ubuntu.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3pvurn7u2Th-E4rJo-eo0aYVtfodjteaAixQX1hOR531SyS8P2tufO73o3Xl-nY1PMWEMiAxMUqJmFzHZn7GUBdbRI6qv1184IV16hyphenhyphen2lz0C-OWjDQpP_tnEDRzyBUEdiMFeY7Xc5srCG/s1600/Screenshot+-+Friday+04+April+2014+-+09:56:09++IST.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3pvurn7u2Th-E4rJo-eo0aYVtfodjteaAixQX1hOR531SyS8P2tufO73o3Xl-nY1PMWEMiAxMUqJmFzHZn7GUBdbRI6qv1184IV16hyphenhyphen2lz0C-OWjDQpP_tnEDRzyBUEdiMFeY7Xc5srCG/s1600/Screenshot+-+Friday+04+April+2014+-+09:56:09++IST.png" height="208" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
To get the code in the same folder search for the file TextInputs.qml and open it.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7lQYdaoDGjTquS-xRvpBeXqp87YI-sXANH_LJNZpRjd20ZTxh2bIxFwZN8eP8Lgrj9O10o5NrZ8Cw7GGTC4yCmCN1LdvbMYEjRiLUr4Nrz8DyJlMsZmiX6-Jp4A1QgNmdSY5pmPGO4zhyphenhyphen/s1600/Screenshot+-+Friday+04+April+2014+-+09:59:11++IST.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7lQYdaoDGjTquS-xRvpBeXqp87YI-sXANH_LJNZpRjd20ZTxh2bIxFwZN8eP8Lgrj9O10o5NrZ8Cw7GGTC4yCmCN1LdvbMYEjRiLUr4Nrz8DyJlMsZmiX6-Jp4A1QgNmdSY5pmPGO4zhyphenhyphen/s1600/Screenshot+-+Friday+04+April+2014+-+09:59:11++IST.png" height="173" width="320" /></a></div>
<br />
If I want a text input of type password then select the relevant cod stating password and copy paste it into my project. (Don't copy Template or TemplateRow items).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDxTYXE71OQBBrmwwPzr9bzUzbfGeGrhEkscsgznM5HzpMI-nIDIxwrJc_wFglVuMGd_3z-uivMEkJ2KqokOAWK3j2fb_M8AYkTnT0-mt3J6I_O6V_4-QnbP-uBOMlMxLVnlehNJBwf6od/s1600/Screenshot+-+Friday+04+April+2014+-+10:01:53++IST.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDxTYXE71OQBBrmwwPzr9bzUzbfGeGrhEkscsgznM5HzpMI-nIDIxwrJc_wFglVuMGd_3z-uivMEkJ2KqokOAWK3j2fb_M8AYkTnT0-mt3J6I_O6V_4-QnbP-uBOMlMxLVnlehNJBwf6od/s1600/Screenshot+-+Friday+04+April+2014+-+10:01:53++IST.png" height="173" width="320" /></a></div>
<br />
Refer image above to know what to copy.<br />
<br />
As usual if you have any problems or queries you can comment below.<br />
Happy developing :)</div>
Anonymoushttp://www.blogger.com/profile/10095674864375349580noreply@blogger.com0tag:blogger.com,1999:blog-7454266272626309377.post-85757407546070405462014-04-03T21:02:00.000-07:002014-04-03T23:06:12.795-07:00Getting Started<div dir="ltr" style="text-align: left;" trbidi="on">
In this tutorial I will explain how to install necessary tools to start creating the Ubuntu touch apps.<br />
<br />
First you need Ubuntu OS, Because Ubuntu-sdk currently supports only Ubuntu OS. So install the latest version of it to get started.<br />
<br />
Next add SDK Release PPA by entering following command in terminal<br />
<br />
<span style="background-color: #fdf6f2; color: #333333; font-family: 'Ubuntu Mono', Consolas, Monaco, 'DejaVu Sans Mono', Courier, monospace; font-size: 13px; line-height: 18.200000762939453px; white-space: pre;">sudo add-apt-repository ppa:ubuntu-sdk-team/ppa</span><br />
<br />
After entering above command it will ask for your password, enter the password and hit Enter.<br />
<br />
Install the Ubuntu SDK by entering following command in your terminal.<br />
<br />
<span style="background-color: #fdf6f2; color: #333333; font-family: 'Ubuntu Mono', Consolas, Monaco, 'DejaVu Sans Mono', Courier, monospace; font-size: 13px; line-height: 18.200000762939453px; white-space: pre;">sudo apt-get update && sudo apt-get install ubuntu-sdk</span><br />
<br />
That's it you are good to go. In terminal type <span style="background-color: #fdf6f2; color: #333333; font-family: 'Ubuntu Mono', Consolas, Monaco, 'DejaVu Sans Mono', Courier, monospace; font-size: 13px; line-height: 18.200000762939453px; white-space: pre;">ubuntu-sdk</span><br />
This will launch the SDK where you can start developing beautiful apps.<br />
<br />
You can also launch Ubuntu-SDK IDE by searching it in Unity dash.<br />
<br />
You can develop native apps using qml.<br />
You can develop web apps using html5.<br />
Both are supported in Ubuntu touch.<br />
<br />
To learn more about designing your app visit this <a href="http://design.ubuntu.com/apps">page</a>.<br />
<br />
To learn more about Ubuntu-SDK platform visit this <a href="http://developer.ubuntu.com/apps/sdk/">page</a>.<br />
<br />
Ubuntu has published a tutorial on how to develop native app from start to end. You can check it by going to this <a href="http://developer.ubuntu.com/apps/qml/tutorial/">page</a>.<br />
The tutorial on how to develop web apps can be found on this <a href="http://developer.ubuntu.com/apps/html-5/tutorials/">page</a>.<br />
<br />
You can publish your app in this <a href="http://developer.ubuntu.com/publish/">page</a>.<br />
<br />
Here are some useful links.<br />
<a href="http://www.askubuntu.com/">http://www.askubuntu.com/</a> Here you can ask questions regarding Ubuntu and experts will answer your question.<br />
<span style="color: blue;">file:///usr/share/qt4/doc/html/qdeclarativeelements.html</span> Here you can find all information regarding qml.<br />
<span style="color: blue;">file:///usr/share/ubuntu-ui-toolkit/doc/html/overview-ubuntu-sdk.html</span> Here you can find overview of Ubuntu SDK.<br />
<a href="http://developer.ubuntu.com/api/qml/sdk-1.0/">sdk-1.0 - Ubuntu Developer</a> Complete documentation of Ubuntu-SDK 1.0<br />
<a href="http://developer.ubuntu.com/api/qml/sdk-14.04/">sdk-14.04 - Ubuntu Developer</a> Complete documentation of Ubuntu-SDK (Updated SDK).<br />
<br />
If you have any queries you can comment below.<br />
Happy developing :)</div>
Anonymoushttp://www.blogger.com/profile/10095674864375349580noreply@blogger.com0