Experimenting with QML a bit more

diff --git a/application/resources/harmattan/qml/StationListPage.qml b/application/resources/harmattan/qml/StationListPage.qml
index 8270bb2..d76efe9 100644 (file)
--- a/application/resources/harmattan/qml/StationListPage.qml
+++ b/application/resources/harmattan/qml/StationListPage.qml
@@ -3,6 +3,7 @@ import com.nokia.meego 1.0
 import "/usr/lib/qt4/imports/com/nokia/meego/UIConstants.js" as UiConstants
 
 Page {
+    property variant stationView
     id: stationListPage
     anchors.margins: UiConstants.DEFAULT_MARGIN
     tools: ToolBarLayout {
@@ -16,25 +17,61 @@ Page {
     {
         var component = Qt.createComponent("StationPage.qml");
         if (component.status == Component.Ready) {
-            pageStack.push(component)
-            component.html = "<p>Hello World</p>"
+            var view = component.createObject(stationListPage)
+            stationListPage.stationView = view
+            pageStack.push(view)
+            view.html = "<h1>Hello World</h1><p>Lorem ipsum</p>"
         }
         else
-            console.log("Cannot load component: " + component.errorString());
+            console.log('Cannot load component: ' + component.errorString());
+    }
+
+    function highlightSearch(s)
+    {
+        return s.replace(searchField.text,
+                         '<span style="text-decoration:underline">' +
+                         searchField.text + '</span>')
     }
 
     Column {
         width: parent.width
         height: parent.height
         TextField {
+            id: searchField
             width: parent.width
             placeholderText: "Search..."
+            platformStyle: TextFieldStyle { paddingRight: clearButton.width }
+            onTextChanged: {
+                listView.model = null
+                listView.model = model
+            }
+            Image {
+                id: clearButton
+                anchors.right: parent.right
+                anchors.verticalCenter: parent.verticalCenter
+                source: "image://theme/icon-m-input-clear"
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: {
+                        inputContext.reset()
+                        searchField.text = ""
+                    }
+                }
+            }
+        }
+        Rectangle {
+            height: 16
         }
         ListView {
             id: stationListView
+            clip: true
             width: parent.width
             height: parent.height
             model: ListModel {
+                id: model
+                ListElement {
+                    name: "Genova Voltri"
+                }
                 ListElement {
                     name: "Genova Sestri Ponente"
                 }
@@ -45,6 +82,9 @@ Page {
                     name: "Genova Sampierdarena"
                 }
                 ListElement {
+                    name: "Genova Via di Francia"
+                }
+                ListElement {
                     name: "Genova Piazza Principe"
                 }
                 ListElement {
@@ -62,7 +102,7 @@ Page {
             }
             delegate: Item {
                 id: listItem
-                height: 88
+                height: 48
                 width: parent.width
                 BorderImage {
                     id: background
@@ -79,7 +119,7 @@ Page {
 
                         Label {
                             id: mainText
-                            text: model.name
+                            text: highlightSearch(model.name)
                             font.bold: true
                             //font.family: UiConstants.FONT_FAMILY
                             //font.pixelSize: UiConstants.FONT_DEFAULT

diff --git a/application/resources/harmattan/qml/StationPage.qml b/application/resources/harmattan/qml/StationPage.qml
index 51f1fcf..238fbfa 100644 (file)
--- a/application/resources/harmattan/qml/StationPage.qml
+++ b/application/resources/harmattan/qml/StationPage.qml
@@ -3,7 +3,7 @@ import com.nokia.meego 1.0
 import QtWebKit 1.0
 
 Page {
-    property string html: "<p>Hello</p>"
+    property alias html: view.html
     anchors.fill: parent
 
     tools: ToolBarLayout {
@@ -11,8 +11,14 @@ Page {
         ToolIcon { iconId: "icon-m-toolbar-back"; onClicked: pageStack.pop(); }
         ToolIcon { iconId: "icon-m-toolbar-view-menu"; }
     }
+    LabelStyle {
+        id: labelStyle
+    }
     WebView {
         id: view
         anchors.fill: parent
+        settings.defaultFontSize: labelStyle.fontPixelSize
+        settings.defaultFixedFontSize: labelStyle.fontPixelSize
+        settings.standardFontFamily: labelStyle.fontFamily
     }
 }