Passing state between screens in a Symbian/QML app

Question

I'm trying to use a Loader to load full screen components to changing screens in a Symbian/QML project. This doesn't feel like the correct way to do it, so I'm probably missing something obvious.

The example I'll use is a button on one screen which should open a full screen WebView (a.k.a ChildBrowser). I'd like to make the ChildBrowser a re-usable component, so need to pass the URL to it.

I've tried building a Javascript file with a pragma library:

.pragma library
var map = {};
function put(key, value) {
      map[key] = value;
}
function get(key) {
      return map[key];
}

For want of a better title, we call this intent.js.

The screen holding the button:

import "intent.js" as Intent

Button {
    onButtonClicked: {
        Intent.put("url", "http://example.com");
        console.log("Going to " + Intent.get("url"));
    }
}

Later on, in ChildBrowser.qml, I'm importing "intent.js" and then getting the Intent.get("url"). This is undefined.

My questions are:

• is using a Loader the intended way to build and transition between screens?
• how do you pass parameters between screens?
• how do you maintain state across the lifetime of the app? I'm especially interested in building controllers and models in Javascript.

I'm sure these are newbie questions, so a set of links to the relevant documentation is probably all that is needed; I suspect not however.

Answer 1

Loader is a good way to avoid creating items until you need them.

Assuming ChildBrowser has a "url" property, you could do something like this:

Button {
    onButtonClicked: browser.load("http://example.com")
}
Loader {
    id: browser
    property string url
    function load(u) {
        url = u
        if (status == Loader.Null)
            source = "ChildBrowser.qml"
        else if (status == Loader.Ready)
            item.url = url
    }
    onLoaded: item.url = url
}

Adding a "url" property to your ChildBrowser is simply a matter of having a property on the root item, e.g.

Rectangle {
    property alias url: webview.url

    WebView {
        id: webview
    }
}