• 12591阅读
  • 3回复

[转载]Nokia MeeGo 1.2 Harmattan Qt Quick components [复制链接]

上一主题 下一主题
离线XChinux
 

只看楼主 倒序阅读 楼主  发表于: 2011-07-08
原文见:http://www.developer.nokia.com/Community/Blogs/blog/kate-alholas-forum-nokia-blog/2011/06/23/nokia-meego-1.2-harmattan-qt-quick-components



Nokia 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 Components

This 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-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 linkingto new PageStack pages.

QmlComponentsGallery Main Page


Buttons

Menu

Sliders

TextFields

Dialog

QueryDialog

DatePicker

Using MeeGo 1.2 Harmattan components

To 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 Components

There 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 Components

By 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.


二笔 openSUSE Vim N9 BB10 XChinux@163.com 网易博客 腾讯微博
承接C++/Qt、Qt UI界面、PHP及预算报销系统开发业务
离线XChinux

只看该作者 1楼 发表于: 2011-07-08
要学的东西这么多???就希望尽快稳定下来,以供开发者使用。
二笔 openSUSE Vim N9 BB10 XChinux@163.com 网易博客 腾讯微博
承接C++/Qt、Qt UI界面、PHP及预算报销系统开发业务
离线XChinux

只看该作者 2楼 发表于: 2011-07-08
Qt Quick components 1.0 for MeeGo 1.2 Harmattan与MeeGo UX Components有些许不同,不过之后会出它们两个的移植说明。
二笔 openSUSE Vim N9 BB10 XChinux@163.com 网易博客 腾讯微博
承接C++/Qt、Qt UI界面、PHP及预算报销系统开发业务
离线nannan
只看该作者 3楼 发表于: 2011-07-14
QML 一出,程序员能吃上的饭将越来越少,这些东西交给美工,他们就可以完成程序的大半部分了。
快速回复
限100 字节
 
上一个 下一个