原文见:
http://www.developer.nokia.com/Community/Blogs/blog/kate-alholas-forum-nokia-blog/2011/06/23/nokia-meego-1.2-harmattan-qt-quick-componentsNokia MeeGo 1.2 Harmattan Qt Quick components
kate.alhola | 23 June, 2011 20:40
Nokia has just released our new great
MeeGo 1.2 Harmattan device, N9, itis a developer device N950 and Harmattan
SDK beta release. New Qt Quickcomponents library is now part of Harmattan SDK for N9 and N950devices. When I had my previous blog about
Qt Quick componentsin November 2010, components were just at very early development stage.Nokia moved development as closed in January 2011 because we started todevelop them for new great UI concept that you can now see in our N9and N950 devices.
The new UI concept has only very minor effect to actual applicationcode. Task switching is now done by swipe gesture and no home button isneeded any more. Swipe gesture handling is provided by framework and itdoes
not need anything from application side, you just does not needimplement “Home” button to return task switcher any more. Because homeand close buttons are not needed, you don't need have toolbar in yourpage 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 naturalplace for it when used by finger.
This release of components implements rich set of UI elements and therequired part of our N9 UX. Compared to November 2010 release, there isfor example full support for dialogs. API has also evolved a lot bettersince. The good thing is also that now components do not need to belinked into application Qt Code, just use standard QDeclarativeView oryou can test your components UI with QmlViewer. New components comesalso with new product quality graphics and they are no longer dependingin MeeGoTouch framework to serve graphics and styles. Technically, anyenvironment that Run Qt 4.7.4 or newer should be able to run HarmattanQt Quick Components. Nokia Developer former Forum Nokia will provides acommunity port of components to Ubuntu Natty, Maemo5, and MeeGo 1.2.New components could be easily adapted for example to MeeGo 1.2 stylewith just small hack in application.
Our Qt Components are licensed with Open Source license, so you are freeto use them in any system. Out product theme that comes with MeeGo 1.2Harmattan SDK is proprietary but I have made version of MeeGo 1.2 themethat works with MeeGo Harmattan Qt Components. I will provide moreinformation about porting to different platforms and community theme inmy upcoming blogs.
Because Nokia was developing new Harmattan UI, we kept development ofcomponents closed several months. At same time Intel also did theirMeeGo-UX components development closed. For that reason, API's of thesetwo MeeGo Qt Quick Components are not fully compatible. Situation isstill not so bad at all, I will handle more about this UX differencesand porting between these different Qt Quick Components and betweendifferent UX in my next blog that will be published soon. the portingbetween toolkits is simple and straightforward, it took just under hourto port my AR-Drone application to use also MeeGo-UX component.
Short introduction to Nokia MeeGo Qt ComponentsThis does not try to be any comprehensive programming guide for MeeGt Qt Components.
At first, set of screenshots from QlmComponentsGallery demonstratingavailable UI elements. Application works automatically in Portrait andLandscape orientations. You can find general Qt Quick Components APIdefinition from
http://bugreports.qt.nokia.com/browse/QTCOMPONENTS-200Let's first look our our demo application .
QmlComponentsGallery main page is PageSatckWindow with ToolBarLayout.The Page content is standard Qml LisView element with Elements linkingto new PageStack pages.

QmlComponentsGallery Main Page

Buttons

Menu

Sliders

TextFields

Dialog

QueryDialog

DatePicker
Using MeeGo 1.2 Harmattan componentsTo use components in your application, you need import com.nokia.meego1.0 and then use PageStackWindow as your main level element. Under PageStack
window you should define your ToolBarLayout what tools you havevisible 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 inHarmattan you don't need close or home buttons because they are handledby swipe gesture by window manager. You can either have MainPage asseparate Qml file that is then loaded as component or you could justhave 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() likehere we open from button press new page that is inline componentcatComponent. Button is standard button component from MeeGo HarmattanQt Components.
Button {
height: 50
width: 600
text: "Show a cat"
onClicked:(pageStack.push(catComponent))
}
Dialogs are now also supported in components library. You have eitherstandard general purpose Dialog component or specialized variantsQueryDialog, SelectionDialog and MultiSelectionDialog. Standard Dialoghas 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 couldpopulate dialog content with Flickable element with a long list ofcomponents and use it as same way as dialogs are used in desktop. InHandset environment, if you have a long content, it may be better to useStacked pages than dialogs and use Dialogs only for shorter content.
Porting to MeeGo 1.2 Harmattan Qt Quick ComponentsThere are not many applications done with November 2010 pre-release ofcomponents but many things about porting affect also applications donewith other toolkiits like MeeGoTouch.
In my blog
How to make modern Mobile applications with Qt Quick componentsI had an example application skeleton, catapp . I made this applicationwith both Qt Quick components and MeeGoTouch. Application itself isjust 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 Closebuttons. These buttons were required by framework to be able to closeapplication or return to tack switcher.

Same main screen with new components does not need toolbar at allbecause task switching is done by swiping gesture and also closing ismanaged by task switcher.
As a small detail, buttons are not in the middle but aligned to topbecause content pane is a Flickable element. There you could add anyamount of content and scroll it by finger.
There is also two buttons to display dialogs. One shows same dialog thanoriginall application as sliding window. Even we have now also supportfor Dialog objects, least as my opinion this method is better when yourdialog has a lot of content. This sliding window has a toolbar because“back” button is needed to return main page. Toolbar is located tobottom 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 ComponentsBy default, after you have installed
QtSDK 1.1.2 with MeeGo 1.2 Harmmattan plugin, you can develop for Harmattan QtComponents either with real N950 developer device or with Qemu Harmattandevice emulator. N950 devices are manufactured only very limitedquantities and very few developers would have one. If you don't haveactual device, you should use
Harmattan System QEMUimage. Good thing in Qemu is that it runs same software as device, badthing 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 Harmattansoftware environment compiled as native x86 or ARM code, bad thing inscratchbox is that it is more complicated than Qt SDK and intended onlyfor experienced Linux developers.
After you have installed Qt SDK, If it does not yet have Harmattantarget. 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 otheralternatives. Ubuntu native Harmattan Qt Quick components, MeeGo 1.2N900DE version of components and Maemo 5 version of components arecoming soon. We are also looking MeeGo 1.2 tablet and Macintosh nativecomponents. Using development system native components is fastest andeasiest way to develop and debug application but it has limitations thatthere many handset specific API's are not available. Developmentsystem native components is also easiest way to study and evaluateMeeGo 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 andMaemo5 has support only Qt Quick1.0 . For Qt Quick 1.0 Componentssources needs some patches to make work, I made patched set that wouldbe available for Ubuntu from our FN PPA. For N900DE you will haveqt-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
To run Harmattan components applications, you need also theme graphics.Our Harmattan SDK has graphics included. The graphics are Nokiaproprietary, so you are not allowed to redistribute them. For that thatreason, we are not including packages to our PPA or MeeGo repositories.For debian based Ubuntu or Maemo 5, you could just copymeegotouchtheme.nokia-graphics.deb and meegotouchtheme-nokia-icons.deband install them with dpkg -i command.
sudo dpkg -i meegotouchtheme.nokia-graphics.deb meegotouchtheme-nokia-icons.deb
If you can't use these debian files, you can use scp -r or cp -r to copyfiles from your SDK to your host. Files should be /usr/share/themes/meego/blanco directory tree from SDK to your targetsystem. Under scratchbox it is located in/scratchbox/users/<your_user_name>/targets/HARMATTAN_X86/usr/share/themes
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/
We are working for open freely redistributable graphics for Qt QuickCOmponents based on N900DE "base" theme. I am hoping that we could makethis available soon.