Merge lp:~nik90/ubuntu-clock-app/clock-code-restructure into lp:ubuntu-clock-app/saucy

[Nekhelesh Ramananthan]

This commit performs some code restructuring and organises elements into separate components.

- Moved world clock search box, worldcity xml model and citytimezone xml model to its own component
- Split EasterEgg.qml into EasterEggModel.qml, EasterEggStorage.js and EasterEgg.qml
- Merged WorldClock.qml and WorldPage.qml
- Removed inverse_mouse area (not required)
- Removed search button
- Added TODO, FIXME comments. Increased code clarity and made it easier for new developers to get involved (clock).

This commit should make it easier to fix any world clock related bugs and is a nice pre-runner to https://bugs.launchpad.net/bugs/1233986

In the rush to 1.0 release, the code dealing with clock alone has become messy and complexy interlinked. This MP performs some code restructuring and organises elements into separate components.

- Moved world clock search box, worldcity xml model and citytimezone xml model to its own component
- Split EasterEgg.qml into EasterEggModel.qml, EasterEggStorage.js and EasterEgg.qml
- Merged WorldClock.qml and WorldPage.qml
- Removed inverse_mouse area (not required)
- Removed search button
- Added TODO, FIXME comments. Increased code clarity and made it easier for new developers to get involved (clock).

This MP should make it easier to fix any world clock related bugs and is a nice pre-runner to https://bugs.launchpad.net/bugs/1233986

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

FAILED: Continuous integration, rev:258
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/77/
Executed test runs:
    UNSTABLE: http://91.189.93.70:8080/job/generic-mediumtests/1167
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-precise-amd64-ci/77
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-quantal-amd64-ci/77
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-raring-amd64-ci/77
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-saucy-amd64-ci/77

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/77/rebuild

review: Needs Fixing (continuous-integration)

[lp:~nik90/ubuntu-clock-app/clock-code-restructure]

259. By Nekhelesh Ramananthan on 2013-10-21

Fixed autopilot test

260. By Nekhelesh Ramananthan on 2013-10-21

removed username variable

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:259
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/78/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests/1168
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-precise-amd64-ci/78
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-quantal-amd64-ci/78
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-raring-amd64-ci/78
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-saucy-amd64-ci/78

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/78/rebuild

review: Approve (continuous-integration)

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:260
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/79/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests/1169
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-precise-amd64-ci/79
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-quantal-amd64-ci/79
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-raring-amd64-ci/79
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-saucy-amd64-ci/79

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/79/rebuild

review: Approve (continuous-integration)

[lp:~nik90/ubuntu-clock-app/clock-code-restructure]

261. By Nekhelesh Ramananthan on 2013-10-22

Merge from master

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:261
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/82/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests/1179
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-precise-amd64-ci/82
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-quantal-amd64-ci/82
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-raring-amd64-ci/82
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-clock-app-saucy-amd64-ci/82

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/ubuntu-clock-app-ci/82/rebuild

review: Approve (continuous-integration)

=== modified file 'clock/AnalogClockFace.qml'
--- clock/AnalogClockFace.qml	2013-07-14 12:33:25 +0000
+++ clock/AnalogClockFace.qml	2013-10-22 17:11:13 +0000
@@ -22,13 +22,16 @@
 import Ubuntu.Components 0.1
 import "../common"
 
+// Element which draws the clock face along with the hour, minute, second hand and the clock label
 AnalogFaceBase {
     id: clockRoot
 
     property var currDate: new Date;
     property int hours: currDate.getHours()
     property int minutes: currDate.getMinutes()
-    property int seconds: currDate.getUTCSeconds();    
+    property int seconds: currDate.getUTCSeconds();
+
+    property alias clockLabel: currentTimeLabel
 
     signal clicked(var mouse)
 
@@ -43,7 +46,7 @@
 
         z: parent.z
         handHeight: units.gu(12.5); handWidth: units.gu(1);
-        rotation: (clockRoot.hours * 30) + (clockRoot.minutes / 2);
+        rotation: (hours * 30) + (minutes / 2);
     }
 
     AnalogClockHand {
@@ -51,7 +54,7 @@
 
         z: parent.z + 1
         handHeight: units.gu(14.5); handWidth: units.gu(0.5);
-        rotation: clockRoot.minutes * 6;
+        rotation: minutes * 6;
     }
 
     AnalogClockHand {
@@ -59,9 +62,33 @@
 
         z: parent.z - 1;
         handHeight: units.gu(17); handWidth:  units.gu(0.5)
-        rotation: clockRoot.seconds * 6;
-    }    
-
+        rotation: seconds * 6;
+    }
+
+    // Label to show the current time
+    // TODO: Investigate moving this component into common/AnalogFaceBase.qml since it is required by
+    // clock, timer, stopwatch and alarm.
+    Rectangle {
+        id: labelContainer;
+
+        z: innerCircle.z + 1;
+        width: innerCircle.width; height: width;
+        anchors.centerIn: parent;
+        color: "transparent"
+
+        Label {
+            id: currentTimeLabel
+            objectName: "currentTimeLabel"
+
+            anchors.centerIn: parent
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            color: Theme.palette.normal.baseText
+            font.pixelSize: units.dp(41)
+        }
+    }
+
+    // Mouse area to reveal the clock sunrise/sunset on clicking the clock face
     MouseArea {
         anchors.fill: parent
         z: parent.z + 1;
 
=== added file 'clock/CityTimezone.qml'
--- clock/CityTimezone.qml	1970-01-01 00:00:00 +0000
+++ clock/CityTimezone.qml	2013-10-22 17:11:13 +0000
@@ -0,0 +1,53 @@
+/*
+ * Copyright (C) 2013 Canonical Ltd
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Authored by: Nekhelesh Ramananthan <[e-mail]>
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+import QtQuick.XmlListModel 2.0
+
+// XML Model to retrieve the timezone info of a city searched by the user online.
+XmlListModel {
+    id: cityTimezoneModel;
+
+    readonly property string timezone_base_url: "http://api.geonames.org/timezone?lat=";
+
+    // TODO: Change username to something along the lines of "com.ubuntu.clock"
+    readonly property string username: "krnekhelesh";
+
+    // Function to return the online url for timezone info of a city
+    function getCityTimezoneUrl (lat, lng) {
+        return (timezone_base_url + lat + "&lng=" + lng + "&username=" + username);
+    }
+
+    // Function to calculate the time difference w.r.t UTC
+    function getTimeDifference(data) {
+        var worldTime = data.split(' ')[1].split(':');
+        var hoursWT = parseInt(worldTime[0]);
+        var minutesWT = parseInt(worldTime[1]);
+        var now = new Date();
+        var UTCdiff = new Date().getTimezoneOffset()
+        now.setMinutes(now.getMinutes() + UTCdiff)
+
+        // Calculating world city time diff w.r.t UTC
+        return ((hoursWT - now.getHours()) * 60 + (minutesWT - now.getMinutes()));
+    }
+
+    query: "/geonames/timezone"
+    XmlRole { name: "time"; query: "time/string()" }
+    onSourceChanged: reload();
+}
 
=== modified file 'clock/ClockPage.qml'
--- clock/ClockPage.qml	2013-10-06 12:13:35 +0000
+++ clock/ClockPage.qml	2013-10-22 17:11:13 +0000
@@ -38,7 +38,7 @@
 
     Component.onCompleted: {
         // TODO: Query GPS for location data
-        Utils.log("ClockPage loaded");        
+        Utils.log("ClockPage loaded");
         if (worldModel.city !== "undefined") {
             currentCity = worldModel.city;
             currentLng = worldModel.longitude;
@@ -58,18 +58,20 @@
             keywords: i18n.tr("Add;Timezone;Timezones;World;City;Cities;Town;Towns;Place;Places;Location;Locations;Time;Locale;Local;Current")
             description: "Add a world city"
             iconSource: Qt.resolvedUrl("../images/add_icon.png")
-            onTriggered: pagestack.push(Qt.resolvedUrl("WorldPage.qml"), {"isWorldCity": true})
+            onTriggered: pagestack.push(Qt.resolvedUrl("WorldClock.qml"), {"isWorldCity": true})
         }
     ]
 
+    // Function which runs every second to update the clock label
     function onTimerUpdate(now) {
-        currentTimeFormatted = Qt.formatTime(new Date(), "hh:mm")        
+        currentTimeFormatted = Qt.formatTime(new Date(), "hh:mm")
         clockFace.timeChanged(now)
         if (now.getUTCSeconds() == 0) {
             updateTime();
         }
     }
 
+    // Function which runs every minute to update the world time
     function updateTime() {
         var now = new Date();
         now.setMinutes(now.getMinutes() + diff)
@@ -111,40 +113,19 @@
         contentWidth: parent.width
         contentHeight: clockFace.height + clockFace.anchors.topMargin + savedWorldClock.height + savedWorldClock.anchors.topMargin + units.gu(3)
 
-        // Label to show the current time
-        Rectangle {
-            id: labelContainer;
-
-            z: clockFace.z + 1;
-            width: clockFace.innerCircle.width; height: width;
-            anchors.centerIn: clockFace;
-            color: "transparent"
-
-            Label {
-                id: currentTimeLabel
-                objectName: "currentTimeLabel"
-
-                anchors.centerIn: parent
-                horizontalAlignment: Text.AlignHCenter
-                verticalAlignment: Text.AlignVCenter
-                color: Theme.palette.normal.baseText
-                font.pixelSize: units.dp(41)
-                text: currentTimeFormatted
-            }
-        }
-
         // Qml Element to draw the analogue clock face along with its hour, minute and second hands.
         AnalogClockFace {
             id: clockFace
 
             anchors { top: parent.top; topMargin: units.gu(10); horizontalCenter: parent.horizontalCenter }
+            clockLabel.text: currentTimeFormatted
 
             onClicked: {
-                if (easterEggCircle.isReady == XmlListModel.Ready && worldModel.city !== "undefined") {
+                if (easterEggCircle.isReady == XmlListModel.Ready && worldModel.city !== "undefined")
                     clockFace.state == "" ? clockFace.state = "easteregg" : clockFace.state = "";
-                } else {
+                else
                     Utils.error("Sunrise/Sunset times cannot be loaded without setting the current location or without a internet connection.")
-                }
+
             }
 
             EasterEgg {
@@ -158,13 +139,13 @@
                 State {
                     name: "easteregg"
                     PropertyChanges { target: easterEggCircle; opacity: 1; }
-                    PropertyChanges { target: currentTimeLabel; opacity: 0; }
+                    PropertyChanges { target: clockFace.clockLabel; opacity: 0; }
                     PropertyChanges { target: easterEggCircle; sunriseLabel: easterEggCircle.getSunTime(easterEggCircle.model.get(0).sunriseTime); }
                     PropertyChanges { target: easterEggCircle; sunsetLabel: easterEggCircle.getSunTime(easterEggCircle.model.get(0).sunsetTime); }
                 },
                 State {
                     name: ""
-                    PropertyChanges { target: currentTimeLabel; opacity: 1; }
+                    PropertyChanges { target: clockFace.clockLabel; opacity: 1; }
                     PropertyChanges { target: easterEggCircle; opacity: 0; }
                 }
             ]
 
=== modified file 'clock/EasterEgg.qml'
--- clock/EasterEgg.qml	2013-10-08 13:01:27 +0000
+++ clock/EasterEgg.qml	2013-10-22 17:11:13 +0000
@@ -21,70 +21,13 @@
 import Ubuntu.Components 0.1
 import QtQuick.XmlListModel 2.0
 import QtQuick.LocalStorage 2.0
-
+import "EasterEggStorage.js" as Storage
 import "../common/ClockUtils.js" as Utils
 
 // Qml Element to draw the easter egg (sunrise and sunset) on the analogue clock face.
 Rectangle {
     id: easterEggCircle;
 
-    property var db: null
-
-    // Opens the local db if not already open. On the first call creates the table
-    function openDB () {
-        if(db !== null) return;
-
-        db = LocalStorage.openDatabaseSync("ubuntu-clock-app", "", "Sunrise and Sunset Database", 1000);
-
-        try {
-            db.transaction(function(tx){
-                tx.executeSql('CREATE TABLE IF NOT EXISTS Easteregg(key INTEGER PRIMARY KEY, date TEXT, riseTime TEXT, setTime TEXT)');
-                var table  = tx.executeSql("SELECT * FROM Easteregg");
-                if (table.rows.length == 0) {
-                    tx.executeSql('INSERT INTO Easteregg VALUES(?, ?, ?, ?)', [1, '', '', '']);
-                };
-            });
-        } catch (err) {
-            Utils.error("Error creating table in Sunrise/Sunset database: " + err);
-        };
-    }
-
-    //Read date last checked from DB
-    function getSavedData () {
-
-        openDB();
-
-        var result = new Array();
-        try {
-            db.readTransaction(
-                function(tx){
-                    var res = tx.executeSql('SELECT * FROM Easteregg WHERE key = 1');
-                    if (res.rows.length > 0) {
-                        result[0] = new Array();
-                        result[0][0] = res.rows.item(0).key;
-                        result[0][1] = res.rows.item(0).date;
-                        result[0][2] = res.rows.item(0).riseTime;
-                        result[0][3] = res.rows.item(0).setTime;
-                    };
-                });
-        } catch (err) {
-            Utils.error("Error getting sunrise/sunset last checked date: " + err);
-        }
-        return result;
-    }
-
-    function saveSunTimes (date, sunRise, sunSet) {
-        openDB();
-        try {
-            db.transaction(function(tx){
-                var res = tx.executeSql('UPDATE Easteregg SET date = ?, riseTime = ?, setTime = ? WHERE key = 1', [date, sunRise, sunSet]);
-                Utils.log("Saving Sunrise/Sunset times to disk");
-            });
-        } catch (err) {
-            Utils.error("Error saving sunrise/sunset times: " + err);
-        };
-    }
-
     // FIXME: Replace these constant values with user's location coordinates when automatic location detection is implemented.
     property real latitude: 200;
     property real longitude: 200;
@@ -95,49 +38,32 @@
 
     // properties to get the sunRiseModel XML model.
     property alias isReady: sunRiseModel.status;
-    property alias model: sunRiseModel;
-
-    // Online API properties
-    readonly property string base_url: "http://api.geonames.org/timezone?";
-    readonly property string username: "krnekhelesh";
+    property alias model: sunRiseModel;    
 
     opacity: 0
     color: "transparent"
     z: parent.z + 100
     visible: opacity == 0 ? false : true
 
-    function reloadSunRiseModel () {
-        sunRiseModel.reload()
-    }
-
-    // Function to form the url string to make the API call
-    function getUrlString (latitude, longitude) {
-        return (base_url + "lat=" + latitude + "&lng=" + longitude + "&username=" + username);
-    }
-
     // Function to convert online data format "2013-04-20 19:40" to just "19:40"
     function getSunTime (data) {
         return data.split(' ')[1];
     }
 
+    onLatitudeChanged: sunRiseModel.source = sunRiseModel.getUrlString(latitude, longitude)
+    onLongitudeChanged: sunRiseModel.source = sunRiseModel.getUrlString(latitude, longitude)
+
     // TODO 1: Get the latitude and longitude using the platform API automatically instead of using static values.    
-    XmlListModel {
+    EasterEggModel {
         id: sunRiseModel
-
-        source: getUrlString(latitude, longitude)
-        query: "/geonames/timezone"
-
-        XmlRole { name: "sunriseTime"; query: "sunrise/string()"; isKey: true }
-        XmlRole { name: "sunsetTime"; query: "sunset/string()"; isKey: true  }
-
         onStatusChanged: {
-            var savedData = getSavedData();
+            var savedData = Storage.getSavedData();
             var checkedDate = savedData[0][1].split('T')[0]
             var date = new Date().toISOString();
             if (status == XmlListModel.Ready && checkedDate != date.split('T')[0] && longitude != 200 && latitude != 200){
                 sunriseTimeLabel.text = getSunTime(sunRiseModel.get(0).sunriseTime);
                 sunsetTimeLabel.text = getSunTime(sunRiseModel.get(0).sunsetTime);
-                saveSunTimes(date, sunriseTimeLabel.text, sunsetTimeLabel.text);
+                Storage.saveSunTimes(date, sunriseTimeLabel.text, sunsetTimeLabel.text);
             }
             else if (status == XmlListModel.Ready) {
                 Utils.log("Retrieving Sunrise/Sunset times from disk");
 
=== added file 'clock/EasterEggModel.qml'
--- clock/EasterEggModel.qml	1970-01-01 00:00:00 +0000
+++ clock/EasterEggModel.qml	2013-10-22 17:11:13 +0000
@@ -0,0 +1,41 @@
+/*
+ * Copyright (C) 2013 Canonical Ltd
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Authored by: Nekhelesh Ramananthan <[e-mail]>
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+import QtQuick.XmlListModel 2.0
+
+// Qml Element to draw the easter egg (sunrise and sunset) on the analogue clock face.
+XmlListModel {
+    id: sunRiseModel
+
+    // Online API properties
+    readonly property string base_url: "http://api.geonames.org/timezone?";
+    readonly property string username: "krnekhelesh";
+
+    // Function to form the url string to make the API call
+    function getUrlString (latitude, longitude) {
+        return (base_url + "lat=" + latitude + "&lng=" + longitude + "&username=" + username);
+    }
+    
+    query: "/geonames/timezone"
+    onSourceChanged: reload()
+    
+    XmlRole { name: "sunriseTime"; query: "sunrise/string()"; isKey: true }
+    XmlRole { name: "sunsetTime"; query: "sunset/string()"; isKey: true  }
+}
 
=== added file 'clock/EasterEggStorage.js'
--- clock/EasterEggStorage.js	1970-01-01 00:00:00 +0000
+++ clock/EasterEggStorage.js	2013-10-22 17:11:13 +0000
@@ -0,0 +1,76 @@
+/*
+ * Copyright (C) 2013 Canonical Ltd
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Authored by: Nekhelesh Ramananthan <[e-mail]>
+ */
+
+Qt.include("../common/ClockUtils.js")
+
+var db = null;
+
+// Opens the local db if not already open. On the first call creates the table
+function openDB () {
+    if(db !== null) return;
+
+    db = LocalStorage.openDatabaseSync("ubuntu-clock-app", "", "Sunrise and Sunset Database", 1000);
+
+    try {
+        db.transaction(function(tx){
+            tx.executeSql('CREATE TABLE IF NOT EXISTS Easteregg(key INTEGER PRIMARY KEY, date TEXT, riseTime TEXT, setTime TEXT)');
+            var table  = tx.executeSql("SELECT * FROM Easteregg");
+            if (table.rows.length == 0) {
+                tx.executeSql('INSERT INTO Easteregg VALUES(?, ?, ?, ?)', [1, '', '', '']);
+            };
+        });
+    } catch (err) {
+        console.error("Error creating table in Sunrise/Sunset database: " + err);
+    };
+}
+
+//Read date last checked from DB
+function getSavedData () {
+
+    openDB();
+
+    var result = new Array();
+    try {
+        db.readTransaction(
+            function(tx){
+                var res = tx.executeSql('SELECT * FROM Easteregg WHERE key = 1');
+                if (res.rows.length > 0) {
+                    result[0] = new Array();
+                    result[0][0] = res.rows.item(0).key;
+                    result[0][1] = res.rows.item(0).date;
+                    result[0][2] = res.rows.item(0).riseTime;
+                    result[0][3] = res.rows.item(0).setTime;
+                };
+            });
+    } catch (err) {
+        console.error("Error getting sunrise/sunset last checked date: " + err);
+    }
+    return result;
+}
+
+function saveSunTimes (date, sunRise, sunSet) {
+    openDB();
+    try {
+        db.transaction(function(tx){
+            var res = tx.executeSql('UPDATE Easteregg SET date = ?, riseTime = ?, setTime = ? WHERE key = 1', [date, sunRise, sunSet]);
+            console.log("Saving Sunrise/Sunset times to disk");
+        });
+    } catch (err) {
+        console.error("Error saving sunrise/sunset times: " + err);
+    };
+}
 
=== added file 'clock/SearchBox.qml'
--- clock/SearchBox.qml	1970-01-01 00:00:00 +0000
+++ clock/SearchBox.qml	2013-10-22 17:11:13 +0000
@@ -0,0 +1,65 @@
+/*
+ * Copyright (C) 2013 Canonical Ltd
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Authored by: Nekhelesh Ramananthan <[e-mail]>
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+import QtQuick.XmlListModel 2.0
+
+// Search Box element for world clock. Instant search as you type after a small pause.
+Item {
+    id: searchBox;
+
+    // Property to hold the string inputted by the user. This is required in other places such as the XML Model for initiating an online query.
+    property alias search_string: searchLabel.text
+
+    // Signal connected to the search_timer triggered signal to expose it to outside objects
+    signal searchTriggered()
+
+    Component.onCompleted: search_timer.triggered.connect(searchTriggered)
+    
+    // Search Label
+    TextField {
+        id: searchLabel
+
+        anchors { left: parent.left; leftMargin: units.gu(2); top: parent.top; bottom: parent.bottom; right: parent.right; rightMargin: units.gu(2) }
+        width: parent.width/1.5
+        hasClearButton: true
+        placeholderText: i18n.tr("Search")
+        primaryItem: Image {
+            height: parent.height/1.5;
+            fillMode: Image.PreserveAspectFit
+            source: Qt.resolvedUrl("../images/search_icon.svg")
+        }
+        
+        // Provide a small pause before going online to search
+        Timer {
+            id: search_timer
+            interval: 1100
+            repeat: false
+        }
+        
+        onTextChanged: search_timer.restart()
+    }
+    
+    // Indicator to show search activity
+    ActivityIndicator {
+        id: searchActivity
+        anchors { verticalCenter: searchLabel.verticalCenter; right: searchLabel.right; rightMargin: units.gu(1) }
+        running: searchCityModel.status === XmlListModel.Loading
+    }
+}
 
=== added file 'clock/WorldCity.qml'
--- clock/WorldCity.qml	1970-01-01 00:00:00 +0000
+++ clock/WorldCity.qml	2013-10-22 17:11:13 +0000
@@ -0,0 +1,57 @@
+/*
+ * Copyright (C) 2013 Canonical Ltd
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Authored by: Nekhelesh Ramananthan <[e-mail]>
+ */
+
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+import QtQuick.XmlListModel 2.0
+
+// XML Model to list cities provided locally by clock-app or search online (geoname.org) for more cities and return latitude and longitude information of the city
+XmlListModel {
+    id: worldCityModel;
+
+    readonly property string search_base_url: "http://api.geonames.org/search?q="
+    readonly property string local_base_url: "common-cities.xml"
+    readonly property int no_of_results: 5
+    property string search_string: ""
+
+    // TODO: Change username to something along the lines of "com.ubuntu.clock"
+    readonly property string username: "krnekhelesh";
+
+    // Function to return the online search url for city search
+    function searchCityUrl(city) {
+        return (search_base_url + search_string + "&maxRows=" + no_of_results + "&username=" + username + "&style=full&featureClass=P&name_startsWith=" + city);
+    }
+
+    // Function to return the url of the locally provided city list (xml file)
+    function localCityUrl() {
+        return Qt.resolvedUrl(local_base_url);
+    }
+    
+    // By default list the cities provided locally by clock app
+    source: localCityUrl()
+    query: "/geonames/geoname"
+    
+    XmlRole { name: "city"; query: "toponymName/string()"; isKey: true }
+    XmlRole { name: "country"; query: "countryName/string()"; isKey: true }
+    XmlRole { name: "lat"; query: "lat/string()"; isKey: true }
+    XmlRole { name: "lng"; query: "lng/string()"; isKey: true }
+    XmlRole { name: "adminName"; query: "adminName1/string()"; isKey: true}
+    XmlRole { name: "adminName2"; query: "adminName2/string()"; isKey: true}
+    
+    onSourceChanged: reload();
+}
 
=== modified file 'clock/WorldClock.qml'
--- clock/WorldClock.qml	2013-10-08 22:52:13 +0000
+++ clock/WorldClock.qml	2013-10-22 17:11:13 +0000
@@ -1,230 +1,181 @@
+/*
+ * Copyright (C) 2013 Canonical Ltd
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Authored by: Nekhelesh Ramananthan <[e-mail]>
+ */
+
 import QtQuick 2.0
 import Ubuntu.Components 0.1
 import Ubuntu.Components.ListItems 0.1 as ListItem
 import QtQuick.XmlListModel 2.0
 
-Column {
-    id: worldClocks
-
-    // Properties to store the user searched city details
-    property string city: "null";
-    property real lng: 0;
-    property real lat: 0;
-    property real rawOffSet: 0;
-
-    // Property to store the city searched by the user
-    property string search_string: "null";
-
-    // Properties to store the information related to api.geonames.org
-    readonly property string username: "krnekhelesh";
-    readonly property string search_base_url: "http://api.geonames.org/search?q=";
-    readonly property string timezone_base_url: "http://api.geonames.org/timezone?lat=";
-    readonly property string local_base_url: "common-cities.xml";
-    readonly property int no_of_results: 5;
-
-    property alias searchModel: searchCityModel;
-    property alias index: worldList.currentIndex;
-
-    signal clicked()
-
-    function searchCityUrl (city) {
-        return (search_base_url + search_string + "&maxRows=" + no_of_results + "&username=" + username + "&style=full&featureClass=P&name_startsWith=" + city);
-    }
-
-    function localCityUrl () {
-        return Qt.resolvedUrl(local_base_url);
-    }
-
-    function getCityTimezoneUrl (lat, lng) {
-        return (timezone_base_url + lat + "&lng=" + lng + "&username=" + username);
-    }
-
-    function clearUserSearch () {
-        searchCityModel.source = localCityUrl();
-        searchLabel.text = "";
-        worldList.currentIndex = -1;
-    }
-
-    height: childrenRect.height;
-    spacing: units.gu(2);
-
-    // Xml model to search city online and retrieve latitude and longitude of searched city
-    XmlListModel {
-        id: searchCityModel;
-
-        source: localCityUrl()
-        query: "/geonames/geoname"
-
-        XmlRole { name: "city"; query: "toponymName/string()"; isKey: true }
-        XmlRole { name: "country"; query: "countryName/string()"; isKey: true }
-        XmlRole { name: "lat"; query: "lat/string()"; isKey: true }
-        XmlRole { name: "lng"; query: "lng/string()"; isKey: true }
-        XmlRole { name: "adminName"; query: "adminName1/string()"; isKey: true}
-        XmlRole { name: "adminName2"; query: "adminName2/string()"; isKey: true}
-
-        onSourceChanged: reload();
-    }
-
-    Item {
-        id: searchBox;
-
-        anchors { left: parent.left; right: parent.right }
-        height: units.gu(4)
-
-        TextField {
-            id: searchLabel
-
-            anchors { left: parent.left; leftMargin: units.gu(2); top: parent.top; bottom: parent.bottom; right: searchButton.left; rightMargin: -units.gu(1) }
-            width: worldClocks.width/1.5
-            hasClearButton: true
-            placeholderText: i18n.tr("Search")
-            primaryItem: Image {
-                height: parent.height/2
-                width: parent.height/2
-                source: Qt.resolvedUrl("../images/search_icon.svg")
-            }
-
-            // Provide a small pause before going online to search
-            Timer {
-                id: search_timer
-
-                interval: 1100
-                repeat: false
-                onTriggered: {
-                    if (searchLabel.text != "") {
-                        search_string = searchLabel.text;
-                        searchCityModel.source = searchCityUrl(search_string);
-                    } else {
-                        searchCityModel.source = localCityUrl()
-                    }
-                }
-            }
-
-            onTextChanged: search_timer.restart()
-
-            InverseMouseArea {
-                visible: searchLabel.activeFocus
-                anchors.fill: parent
-                onClicked: {
-                    worldClocks.forceActiveFocus()
-                    mouse.accepted = false
-                }
-            }
-        }
-
-        Item {
-            id: searchButton;
-            anchors { right: parent.right; rightMargin: units.gu(6.5); top: parent.top; bottom: parent.bottom }
-            height: searchLabel.height
-            visible: !searchActivity.running
-            Image {
-                id: name
-                source: Qt.resolvedUrl("../images/search_item.svg")
-            }
-
-            // Make searchButton clickable
-            MouseArea {
-                id: searchArea;
-                enabled: true;
-                anchors.fill: searchButton
-                onClicked: {
-                    if (searchLabel.text != "") {
-                        search_string = searchLabel.text;
-                        searchCityModel.source = searchCityUrl(search_string);
-                    }
-                }
-            }
-        }
-
-
-        ActivityIndicator {
-            id: searchActivity
-            anchors { verticalCenter: searchButton.verticalCenter; left: searchButton.left; leftMargin: units.gu(1.5) }
-            running: searchCityModel.status === XmlListModel.Loading
-
-        }
-    }
-
-    ListView {
-        id: worldList
-        objectName: "worldList"
-
-        anchors { left: parent.left; right: parent.right }
-        height: units.gu(50)
-        model: searchCityModel
-        currentIndex: -1
-        clip: true;
-
-        Component {
-            id: sectionHeading
-            ListItem.Header {
-                Label {
-                    text: section
-                    anchors { verticalCenter: parent.verticalCenter; left: parent.left; leftMargin: units.gu(2) }
-                    color: Theme.palette.normal.baseText
-                    fontSize: "medium"
-                }
-            }
-        }
-
-        Label {
-            id: errorMessage
-            width: parent.width
-            fontSize: "large"
-            wrapMode: Text.WordWrap
-            horizontalAlignment: TextInput.AlignHCenter
-            anchors.horizontalCenter: parent.horizontalCenter
-            visible: worldList.count == 0 || searchCityModel.status == XmlListModel.Error || cityDetailsModel.status == XmlListModel.Error
-            text: searchCityModel.status == XmlListModel.Error || cityDetailsModel.status == XmlListModel.Error ? i18n.tr("Unable to search online \nPlease check your internet connection") : i18n.tr("No results found")
-        }
-
-        section.property: !errorMessage.visible ? "city" : ""
-        section.criteria: ViewSection.FirstCharacter
-        section.delegate: sectionHeading;
-        section.labelPositioning: ViewSection.InlineLabels
-
-        delegate: ListItem.Base {
-            visible: !errorMessage.visible
-            height: adminName || adminName2 ? units.gu(8) : units.gu(6)
-            Column {
-                anchors { top: parent.top; topMargin: units.gu(0.5); left: parent.left; leftMargin: units.gu(3) }
-                Label {
-                    id: cityDelegate
-                    text: city
-                    color: Theme.palette.normal.baseText
-                    fontSize: "large"
-                }
-                Label {
-                    id: stateDelegate
-                    width: worldClocks.width
-                    elide: Text.ElideRight
-                    text: {
-                        if (adminName && adminName2)
-                            return adminName2 + ", " + adminName
-                        else if(adminName)
-                            return adminName
-                        else if(adminName2)
-                            return adminName2
-                        else
-                            return ""
-                    }
-                    visible: text == "" ? false : true
-                    color: Theme.palette.normal.baseText
-                    fontSize: "small"
-                }
-                Label {
-                    id: countryDelegate
-                    text: country
-                    color: Theme.palette.normal.baseText
-                    fontSize: "small"
-                }
-            }
-
-            selected: worldList.currentIndex == index;
-
-            onClicked: {
-                worldList.currentIndex = index;
-                worldClocks.clicked()
+// Page to to search a world city and add it to the world clocks
+Page {
+    id: worldPage
+
+    property bool isWorldCity;
+
+    visible: false;
+    title: isWorldCity ? i18n.tr("Add City") : i18n.tr("Edit Current Location")
+
+    Column {
+        id: worldClocks
+
+        // Properties to store the user searched city details
+        property string city: "null";
+        property real lng: 0;
+        property real lat: 0;        
+
+        // Function to clear user search and return to original state
+        function clearUserSearch () {
+            searchCityModel.source = searchCityModel.localCityUrl();
+            searchBox.search_string = "";
+            worldList.currentIndex = -1;
+        }
+
+        anchors { fill: parent; topMargin: units.gu(2) }
+        height: childrenRect.height;
+        spacing: units.gu(2);
+
+        // XML Model to list cities provided locally with clock-app or search cities online and retrieve latitude and longitude of searched city
+        WorldCity {
+            id: searchCityModel
+            search_string: searchBox.search_string
+        }
+
+        // XML Model to retrieve timezone of searched city
+        CityTimezone {
+            id: cityDetailsModel
+            onStatusChanged: {
+                if(status == XmlListModel.Ready && worldClocks.city != "null") {
+                    if (isWorldCity)
+                        worldModel.appendPreset(worldClocks.city, getTimeDifference(cityDetailsModel.get(0).time), worldClocks.lng, worldClocks.lat);
+                    else
+                        worldModel.appendCurrentLocation(worldClocks.city, worldClocks.lng, worldClocks.lat);
+                    worldClocks.clearUserSearch();
+                    pageStack.pop()
+                }
+            }
+        }
+
+        // Search Bar to search for cities (online)
+        // TODO: Add capability to also search cities provided locally with clock-app
+        SearchBox {
+            id: searchBox
+
+            height: units.gu(4)
+            anchors { left: parent.left; right: parent.right }
+
+            onSearchTriggered: {
+                if (search_string != "")
+                    searchCityModel.source = searchCityModel.searchCityUrl(search_string);
+                else
+                    searchCityModel.source = searchCityModel.localCityUrl()
+            }
+        }
+
+        // List to display the search results
+        ListView {
+            id: worldList
+            objectName: "worldList"
+
+            anchors { left: parent.left; right: parent.right }
+            height: units.gu(50)    // TODO: Make list view dynamic rather than the fixed 50 units gu.
+            model: searchCityModel
+            currentIndex: -1
+            clip: true;
+
+            Component {
+                id: sectionHeading
+                ListItem.Header {
+                    Label {
+                        text: section
+                        anchors { verticalCenter: parent.verticalCenter; left: parent.left; leftMargin: units.gu(2) }
+                        color: Theme.palette.normal.baseText
+                        fontSize: "medium"
+                    }
+                }
+            }
+
+            Label {
+                id: errorMessage
+                width: parent.width
+                fontSize: "large"
+                wrapMode: Text.WordWrap
+                horizontalAlignment: TextInput.AlignHCenter
+                anchors.horizontalCenter: parent.horizontalCenter
+                visible: worldList.count == 0 || searchCityModel.status == XmlListModel.Error || cityDetailsModel.status == XmlListModel.Error
+                text: searchCityModel.status == XmlListModel.Error || cityDetailsModel.status == XmlListModel.Error ? i18n.tr("Unable to search online \nPlease check your internet connection") : i18n.tr("No results found")
+            }
+
+            section.property: !errorMessage.visible ? "city" : ""
+            section.criteria: ViewSection.FirstCharacter
+            section.delegate: sectionHeading;
+            section.labelPositioning: ViewSection.InlineLabels
+
+            delegate: ListItem.Base {
+                visible: !errorMessage.visible
+                height: adminName || adminName2 ? units.gu(8) : units.gu(6)
+                Column {
+                    anchors { top: parent.top; topMargin: units.gu(0.5); left: parent.left; leftMargin: units.gu(3) }
+                    Label {
+                        id: cityDelegate
+                        text: city
+                        color: Theme.palette.normal.baseText
+                        fontSize: "large"
+                    }
+                    Label {
+                        id: stateDelegate
+                        width: worldClocks.width
+                        elide: Text.ElideRight
+                        text: {
+                            if (adminName && adminName2)
+                                return adminName2 + ", " + adminName
+                            else if(adminName)
+                                return adminName
+                            else if(adminName2)
+                                return adminName2
+                            else
+                                return ""
+                        }
+                        visible: text == "" ? false : true
+                        color: Theme.palette.normal.baseText
+                        fontSize: "small"
+                    }
+                    Label {
+                        id: countryDelegate
+                        text: country
+                        color: Theme.palette.normal.baseText
+                        fontSize: "small"
+                    }
+                }
+
+                selected: worldList.currentIndex == index;
+
+                onClicked: {
+                    worldList.currentIndex = index;
+                    worldClocks.lat = searchCityModel.get(index).lat;
+                    worldClocks.lng = searchCityModel.get(index).lng;
+                    worldClocks.city = searchCityModel.get(index).city;
+                    cityDetailsModel.source = cityDetailsModel.getCityTimezoneUrl(worldClocks.lat, worldClocks.lng)
+                }
+            }
+
+            Scrollbar {
+                flickableItem: worldList;
+                align: Qt.AlignTrailing;
             }
         }
     }
 
=== removed file 'clock/WorldPage.qml'
--- clock/WorldPage.qml	2013-09-27 08:38:15 +0000
+++ clock/WorldPage.qml	1970-01-01 00:00:00 +0000
@@ -1,76 +0,0 @@
-/*
- * Copyright (C) 2013 Canonical Ltd
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License version 3 as
- * published by the Free Software Foundation.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- *
- * Authored by: Nekhelesh Ramananthan <[e-mail]>
- */
-
-import QtQuick 2.0
-import Ubuntu.Components 0.1
-import QtQuick.XmlListModel 2.0
-
-Page {
-    id: worldPage
-
-    property bool isWorldCity;
-
-    visible: false;
-    title: isWorldCity ? i18n.tr("Add City") : i18n.tr("Edit Current Location")
-
-    function getTimeDifference(data) {
-        var worldTime = data.split(' ')[1].split(':');
-        var hoursWT = parseInt(worldTime[0]);
-        var minutesWT = parseInt(worldTime[1]);
-        var now = new Date();
-        var UTCdiff = new Date().getTimezoneOffset()
-        now.setMinutes(now.getMinutes() + UTCdiff)
-
-        // Calculating world city time diff w.r.t UTC
-        return ((hoursWT - now.getHours()) * 60 + (minutesWT - now.getMinutes()));
-    }
-
-    WorldClock {
-        id: worldClockList;
-
-        anchors { fill: parent; topMargin: units.gu(2) }
-
-        // Xml model to retrieve timezone of searched city
-        XmlListModel {
-            id: cityDetailsModel;
-
-            source: worldClockList.getCityTimezoneUrl(worldClockList.lat, worldClockList.lng)
-            query: "/geonames/timezone"
-
-            onStatusChanged: {
-                if(status == XmlListModel.Ready && worldClockList.city != "null") {
-                    if (isWorldCity)
-                        worldModel.appendPreset(worldClockList.city, getTimeDifference(cityDetailsModel.get(0).time), worldClockList.lng, worldClockList.lat);
-                    else
-                        worldModel.appendCurrentLocation(worldClockList.city, worldClockList.lng, worldClockList.lat);
-                    worldClockList.clearUserSearch();
-                    pageStack.pop()
-                }
-            }
-
-            XmlRole { name: "time"; query: "time/string()" }
-        }
-
-        onClicked: {
-            lat = searchModel.get(index).lat;
-            lng = searchModel.get(index).lng;
-            city = searchModel.get(index).city;
-            cityDetailsModel.reload()
-        }
-    }
-}
 
=== modified file 'tests/autopilot/ubuntu_clock_app/emulators.py'
--- tests/autopilot/ubuntu_clock_app/emulators.py	2013-10-21 21:16:41 +0000
+++ tests/autopilot/ubuntu_clock_app/emulators.py	2013-10-22 17:11:13 +0000
@@ -294,7 +294,7 @@
 
     def get_world_cities_page(self):
         """Return the page containing the world cities."""
-        return self.select_single("WorldPage")
+        return self.select_single("WorldClock")
 
     def get_clock_page(self):
         """Return the page containing the main clock."""