PageStackWindow in MeeGo 1.2 Harmattan for Orientation and Transitions

on August 1st, 2011 by Wade Shull in Development - Mobile App - QML - Qt
| Share

When I first received my N950 from the Qt Ambassadors program I was super excited to get my apps running on it that I had written in QML in Qt Creator. Because of the multi-platform functionality of Qt Creator it only took a day to download the new SDK and compile my apps for MeeGo 1.2 Harmattan. It installed without a hitch, but there were two small problems. There was an annoying toolbar at the bottom of the app that was empty and also they were locked in landscape mode. This needed to be fixed. The fix I learned is a simple, yet not highly documented, fix in PageStackWindow.

When Nokia came out with MeeGo 1.2 Harmattan they released some Nokia specific APIs so that all applications that run on their phones could have the same outer look and feel. The way they pulled this off was introduce Page, PageStack, PageStackWindow and PageStackWindowStyle elements.

Let’s start with PageStackWindow. The PageStackWindow is at the heart of the all these new elements. Here is Nokia’s documentation about it. I started a new main.qml file and input this.

import QtQuick 1.1
import com.nokia.meego 1.0
PageStackWindow {
id: rootWindow
initialPage: Splash { }
showStatusBar: false
showToolBar: false
}

This is pretty straight forward. The imports at the start of the file are for the new components introduced in MeeGo 1.2 Harmattan. I didn’t want to show the StatusBar at the top or the ToolBar which is at the bottom. Screen orientation isn’t defined here yet. That will come later. The last part of that was to tell the Page to show first. I had it call my Splash first.

You can put everything into one page. If you put everything into one page all your transitions will work just like they used to. I saw the opportunity to use the built in transitions in PageStackWindow. I had make a Splash.qml file and put everything in it around

Page {
id: splash
...
}

If you wanted to define a screen orientation this is where it would be done. You call your screen orientation inside each Page like shown in this documentation. Just like before, you can have it auto rotate or lock it in landscape or in portrait. Something that is new to me with this option is that within QML you can now lock one page in portrait and have the rest of the program auto rotate. That is something I never easily figured out how to do while writing QML apps for my N900. Now in this Page I have a timer. I used to have this timer change the State of a different Rectangle with Transitions written for when the State of the Rectangles changed. With the new code all I have to do is

onTriggered: { pageStack.push(Qt.resolvedUrl("GallerySelected.qml")) }

I have a separate qml file name GallerySelected.qml that has another page it in. The pageStack.push adds this Page into the stack and automatically does a transition to it. No more the need to write States and Transitions for those States. All you have to do is add pages to the Stack and go to them. You can even go backwards. So at some point in time if I wanted to go back to my splash screen all I would have to do is call pageStack.pop() and it goes back a page and does an already written transition. I found this very nice. It eliminates a lot of code.

I hope that you found this little blog posting informative. If you have any questions you can always find me through @wadeshull on twitter. Have a good one folks.

UPDATE –

I was recently working on my next app that I had been testing with my N900 but needed to get it on my N950. I had some trouble with the code trying to call the initial page. It was a file that only had one page just like I showed above, but just calling the name wasn’t working this time. I am not sure why this was taking place but I did find a correction. I just used the Qt.resolvedUrl like this.

initialPage: Qt.resolvedUrl("PageFile.qml")

Just wanted to share that with everyone while it was fresh in my mind just in case it was holding someone else up as well. Take care!

Comments: 0 Tags:

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>