whereami/QtQuick/qml/symbian/MainPage.qml

/**
 * Copyright (c) 2012 Nokia Corporation.
 */

import QtQuick 1.1
import com.nokia.symbian 1.1
import QtWebKit 1.0 // QtWebKit QML Module

import WhereAmI 1.0 // For GeoPermissionHandler

Page {
    id: mainPage

    /*!
      Splash screen content.
    */
    Rectangle {
        id: splashScreenContent
        anchors.fill: parent
        color: "white"
        z: 10

        Behavior on opacity {
            SequentialAnimation {
                PauseAnimation { duration: 1000 }
                NumberAnimation { duration: 500 }
            }
        }

        Image {
            id: splashScreenImage
            anchors.fill: parent
            fillMode: Image.PreserveAspectFit
            smooth: true
            source: "qrc:/splash-screen-image.png"
        }
    }

    Flickable {
        id: flickable
        anchors.fill: parent
        contentWidth: webView.width
        contentHeight: webView.height

        /*!
          The web view for displaying and running the application content which
          is written with HTML5 and JavaScript.
        */
        WebView {
            id: webView
            preferredWidth: mainPage.width
            preferredHeight: mainPage.height
            smooth: false

            url: "qrc:/index.html"

            settings.javascriptEnabled: true
            settings.localContentCanAccessRemoteUrls: true

            onLoadFinished: {
                console.debug("Loaded URL: " + url);

                if (splashScreenContent.opacity > 0) {
                    // Hide the splash screen and switch to the correct set of
                    // tool bar tools.
                    splashScreenContent.opacity = 0;
                    toolBar.tools = mainToolBarLayout;
                }
            }

            onAlert: console.log("Alert: " + message);

            /*!
              QML functions which can be called from JavaScript in HTML context.

              Example:
                window.qml.qmlMethod();
                window.qml.qmlMethodWithParam(1);
            */
            javaScriptWindowObjects: QtObject {
                WebView.windowObjectName: "qml"

                function qmlMethodWithParam(param) {
                    console.log("WebView.qml: qmlMethodWithParam(): " + param);
                }

                function qmlMethod() {
                    console.log("WebView.qml: qmlMethod()");
                }
            }
        }
    }
    ScrollDecorator {
        flickableItem: flickable
    }

    /*!
      The busy indicator is shown when the web view is loading the content.
    */
    BusyIndicator {
        width: 100
        height: 100

        anchors {
            bottom: parent.bottom
            horizontalCenter: parent.horizontalCenter
            margins: 100
        }

        z: 10
        opacity: (webView.progress - 1) * -1
        running: webView.progress < 1
    }

    /*!
      GeoPermissionHandler handles the feature permission requests from web
      pages. If the permission requested is QmainPage::Geolocation the handler
      grants the permission. See src/geopermissionhandler.cpp for more
      information.
    */
    GeoPermissionHandler {
        view: webView
    }

    /*!
      The main tool bar layout.
    */
    ToolBarLayout {
        id: mainToolBarLayout

        ToolButton {
            iconSource: "toolbar-back"
            onClicked: Qt.quit();
        }
        ToolButton {
            iconSource: "toolbar-refresh"

            onClicked: {
                // Call JavaSript function in geolocation.js
                webView.evaluateJavaScript("update()");
            }
        }
        ToolButton {
            iconSource: "qrc:/info-icon.png"

            onClicked: {
                // Call JavaSript function in geolocation.js to show the info
                // page content and change the tool bar layout.
                webView.evaluateJavaScript("showInfo()");
                toolBar.tools = infoPageToolBarLayout;
            }
        }
    }

    /*!
      The info page tool bar layout.
    */
    ToolBarLayout {
        id: infoPageToolBarLayout

        ToolButton {
            iconSource: "toolbar-back"

            onClicked: {
                // Call JavaSript function in geolocation.js to hide the info
                // page content and change the tool bar layout.
                webView.evaluateJavaScript("closeInfo()");
                webView.url = "qrc:/index.html"
                toolBar.tools = mainToolBarLayout;
            }
        }
    }

    /*!
      The tool bar content shown when the splash screen is visible. Provides
      only an exit button.
    */
    ToolBarLayout {
        id: splashScreenToolBarLayout

        ToolButton {
            iconSource: "toolbar-back"
            onClicked: Qt.quit();
        }
    }

    // Set the main tool bar when the application is loaded
    Component.onCompleted: mainPage.tools = splashScreenToolBarLayout;
}