Nokia MeeGo 1.2 Harmattan Qt Quick components
From http://www.developer.nokia.com/Community/Blogs/blo
Posted on 2011-06-23 17:40:23 UTC.
Nokia has just released our new great MeeGo 1.2 Harmattan device, N9, it is a developer device N950 and Harmattan SDK beta release. New Qt Quick components library is now part of Harmattan SDK for N9 and N950 devices. When I had my previous blog about Qt Quick components in November 2010, components were just at very early development stage. Nokia moved development as closed in January 2011 because we started to develop them for new great UI concept that you can now see in our N9 and N950 devices.
The new UI concept has only very minor effect to actual application code. Task switching is now done by swipe gesture and no home button is needed any more. Swipe gesture handling is provided by framework and it does not need anything from application side, you just does not need implement “Home” button to return task switcher any more. Because home and close buttons are not needed, you don't need have toolbar in your page unless it is needed by menus or back button in stacked pages. Toolbar is also moved to lower side of the screen that is more natural place for it when used by finger.
This release of components implements rich set of UI elements and the required part of our N9 UX. Compared to November 2010 release, there is for example full support for dialogs. API has also evolved a lot better since. The good thing is also that now components do not need to be linked into application Qt Code, just use standard QDeclarativeView or you can test your components UI with QmlViewer. New components comes also with new product quality graphics and they are no longer depending in MeeGoTouch framework to serve graphics and styles. Technically, any environment that Run Qt 4.7.4 or newer should be able to run Harmattan Qt Quick Components. Nokia Developer former Forum Nokia will provides a community port of components to Ubuntu Natty, Maemo5, and MeeGo 1.2. New components could be easily adapted for example to MeeGo 1.2 style with just small hack in application.
Our Qt Components are licensed with Open Source license, so you are free to use them in any system. Out product theme that comes with MeeGo 1.2 Harmattan SDK is proprietary but I have made version of MeeGo 1.2 theme that works with MeeGo Harmattan Qt Components. I will provide more information about porting to different platforms and community theme in my upcoming blogs.
Because Nokia was developing new Harmattan UI, we kept development of components closed several months. At same time Intel also did their MeeGo-UX components development closed. For that reason, API's of these two MeeGo Qt Quick Components are not fully compatible. Situation is still not so bad at all, I will handle more about this UX differences and porting between these different Qt Quick Components and between different UX in my next blog that will be published soon. the porting between toolkits is simple and straightforward, it took just under hour to port my AR-Drone application to use also MeeGo-UX component.
Short introduction to Nokia MeeGo Qt Components
This does not try to be any comprehensive programming guide for MeeGt Qt Components.
At first, set of screenshots from QlmComponentsGallery demonstrating available UI elements. Application works automatically in Portrait and Landscape orientations. You can find general Qt Quick Components API definition from http://bugreports.qt.nokia.com/browse/QTCOMPONENTS-200
Let's first look our our demo application .
QmlComponentsGallery main page is PageSatckWindow with ToolBarLayout. The Page content is standard Qml LisView element with Elements linking to new PageStack pages.
QmlComponentsGallery Main Page
Menu
Sliders
TextFields
Dialog
QueryDialog
DatePicker
Using MeeGo 1.2 Harmattan components
To use components in your application, you need import com.nokia.meego 1.0 and then use PageStackWindow as your main level element. Under Page Stack window you should define your ToolBarLayout what tools you have visible in default toolbar and then put your main page to initialPage. If you don't have menus in your application, you could omit “toolbar-view-menu” and menu related form toolbar. Notice that in Harmattan you don't need close or home buttons because they are handled by swipe gesture by window manager. You can either have MainPage as separate Qml file that is then loaded as component or you could just have it included in same main.qml with “component” definition.
import QtQuick 1.0
import com.nokia.meego 1.0
PageStackWindow {
id: rootWindow
property int pageMargin: 16
initialPage: MainPage { }
ToolBarLayout {
id: commonTools
visible: false
ToolIcon { iconId: "toolbar-back"; onClicked: { myMenu.close(); pageStack.pop(); } }
ToolIcon { iconId: "toolbar-view-menu"; onClicked: (myMenu.status == DialogStatus.Closed) ? myMenu.open() : myMenu.close() }
}
}
As example main as in file compoent
Component {
id: mainPage
Page {
tools: commonTools
…. Put Flickable, ListView etc here as body …..
}
}
When you would like to open new page, just use pageSatck.push() like here we open from button press new page that is inline component catComponent. Button is standard button component from MeeGo Harmattan Qt Components.
Button {
height: 50
width: 600
text: "Show a cat"
onClicked:(pageStack.push(catComponent))
}
Dialogs are now also supported in components library. You have either standard general purpose Dialog component or specialized variants QueryDialog, SelectionDialog and MultiSelectionDialog. Standard Dialog has three fields: title, content and buttons.
Dialog {
id:myDialog2
title:Label { color:"blue" ;text:"myDialog"}
content:Label { color:"white" ;text:"Content Comes Here"}
buttons:Button {id: bOk; text: "OK"; onClicked: myDialog2.accept()}
}
To display this dialog, use myDialog2.open() . Technically you could populate dialog content with Flickable element with a long list of components and use it as same way as dialogs are used in desktop. In Handset environment, if you have a long content, it may be better to use Stacked pages than dialogs and use Dialogs only for shorter content.
Porting to MeeGo 1.2 Harmattan Qt Quick Components
There are not many applications done with November 2010 pre-release of components but many things about porting affect also applications done with other toolkiits like MeeGoTouch.
In my blog How to make modern Mobile applications with Qt Quick components I had an example application skeleton, catapp . I made this application with both Qt Quick components and MeeGoTouch. Application itself is just UI elements demo but I used about same structure in my AR-Drone application.
Main screen has toolbar on top of screen and it had Home and Close buttons. These buttons were required by framework to be able to close application or return to tack switcher.
Same main screen with new components does not need toolbar at all because task switching is done by swiping gesture and also closing is managed by task switcher.
As a small detail, buttons are not in the middle but aligned to top because content pane is a Flickable element. There you could add any amount of content and scroll it by finger.
There is also two buttons to display dialogs. One shows same dialog than originall application as sliding window. Even we have now also support for Dialog objects, least as my opinion this method is better when your dialog has a lot of content. This sliding window has a toolbar because “back” button is needed to return main page. Toolbar is located to bottom of screen as required by MeeGo 1.2 Harmattan style.
There are now native dialogs and they are excellent when you have less content than this application.
Developing with MeeGo 1.2 Harmattan Qt Quick Components
By default, after you have installed QtSDK 1.1.2 with MeeGo 1.2 Harmmattan plugin, you can develop for Harmattan Qt Components either with real N950 developer device or with Qemu Harmattan device emulator. N950 devices are manufactured only very limited quantities and very few developers would have one. If you don't have actual device, you should use Harmattan System QEMU image. Good thing in Qemu is that it runs same software as device, bad thing is that it does not match in performance with native execution.
For experienced Linux developers we have also Scratchbox based Harmattan platform SDK. With Platform SDK you can compile and run your code in Harmattan software environment compiled as native x86 or ARM code, bad thing in scratchbox is that it is more complicated than Qt SDK and intended only for experienced Linux developers.
After you have installed Qt SDK, If it does not yet have Harmattan target. You should install it using updater. Chose from “Help” menu “Start Updater”. In updater, chose “Package Manager” tab and ten enable “Harmattan” target under “experimental”
Nokia developer, former Forum Nokia is offering three other alternatives. Ubuntu native Harmattan Qt Quick components, MeeGo 1.2 N900DE version of components and Maemo 5 version of components are coming soon. We are also looking MeeGo 1.2 tablet and Macintosh native components. Using development system native components is fastest and easiest way to develop and debug application but it has limitations that there many handset specific API's are not available. Development system native components is also easiest way to study and evaluate MeeGo 1.2 Harmattan Qt Quick components.
Installing Nokia Developers Community port MeeGo 1.2 Harmattan Qt Quick Components
Harmattan components require Qt Quick 1.1 but MeeGo1.2, Ubuntu and Maemo5 has support only Qt Quick1.0 . For Qt Quick 1.0 Components sources needs some patches to make work, I made patched set that would be available for Ubuntu from our FN PPA. For N900DE you will have qt-components.rpm package that will be released soon.
FN PPA will have soon ready made debian package for Ubuntu Natty, just ad ppa
sudo apt-add-repository ppa:forumnokia/fn-ppa
sudo apt-get update
sudo apt-get install qt-components-dev qt-components-examples
sudo dpkg -i meegotouchtheme.nokia-graphics.deb meegotouchtheme-nokia-icons.deb
In your QtSDK they are located at QtSDK/Madde/sysroots/harmattan-arm-sysroot/usr/share/themes/
cp -r ./QtSDK/Madde/sysroots/harmattan-arm-sysroot/usr/share/themes/blanco /usr/share/themes/