Kate Alhola's Blog

In my previous blog I had introduction to MeeGo 1.2 Harmattan Qt Quick components, in this blog I  wrote about porting components to other platforms than MeeGo 1.2 Harmattan and in next one about porting applications to different Qt Quick Components like MeeGo-Ux, Symbian or desktop.

Nokia N9 device will be largest volume MeeGo device in near future and most interesting platform for MeeGo application developers.  Portability of  Harmattan components is interesting issue for many reasons. N950 developer devices are produced only limited quantity and N900 provides excellent developer platform that is more easily available. Many MeeGo developers would like to see their application to run other MeeGo devices and would like distribute their application for all of them. Harmattan components are licensed as BSD license, so they are free to distribute any platform.

MeeGo 1.2 Qt Quick components are portable code but there is some issues need to taken care when porting them.First one is that components use Qt Quick 1.1 and most platforms like Ubuntu Natty or MeeGo 1.2 still have Qt Quick 1.0. I have made patch set allowing components to run in Qt Quick 1.0. This is problem is just temporary, and vanish  soon when MeeGo and Ubuntu upgrade  up to date Qt version in next release.  

Second issue is theming. MeeGo 1.2 Harmattan SDK comes with Nokia MeeGo 1.2 Harmattan product theme that is same theme used in production device, N9. This theme is Nokia proprietary. It may be used in software development but it can't be redistributed. When you make applications for N9, this is no problem because theme is factory installed in N9. If you would like distribute your applications to other MeeGo or even non MeeGo devices, you need to use theme that allows redistribution.  Standard MeeGo 1.2 uses MeeGoTouch theming that is based on .svg files having multiple graphics elements in one file. Qt Quick uses .png BorderImages. To use components, I have exported graphics elements as .png files and made separate add on package. Now developers have two choices, if they would like just develop for N9, it is recommend to use Nokia “blanco” theme, if intention is to distribute application to other platforms, you should use open theme based on MeeGoTouch “base” theme or other compatible theme.

Third issue is different UX. The UX between MeeGo 1.2 handset, MeeGo 1.2 tablet and MeeGo 1.2  Harmattan. There is a big difference to end user, MeeGo 1.2 Harmattan has magnificent swipe UI where task switching is done by swipe gesture. MeeGo 1.2 handset uses traditional way to have close button in application toolbar and MeeGo 1.2 Tablet uses hardware home key. The great advantage of Harmattan Swipe gesture is that no valuable screen space is wasted for home button and toolbar and there is no device front surface wasted for home button and larger amount of device front surface can be used for display and actual application. My experience of MeeGo tablet is still based on keeping one tablet in my hand 5 minutes. For application code difference is small. In MeeGo 1.2 handset application should initiate itself task switching but minimizing it's window. In MeeGo 1.2 Harmattan and MeeGo 1.2 tablet, task switching activity is initiated by external process as result of swipe gesture or pressing home button. If we compare to typical desktop applications, application switching, minimizing and closing window is initiated by external window manager application. Close and minimize buttons are in desktop in window frame that is owned by window manager, not by application. Maemo Hildon used same method, tittle bar was owned by system process. In MeeGo, all screen is owned by application and if there are home and close buttons, application should respond to them and initiate action. Other small difference is that in MeeGo 1.2 Handset and MeeGo tablet, toolbar is at top of the window when in Harmattan it is at bottom. At summary differences:

• MeeGo 1.2 Harmattan: Toolbar at bottom, no close or home buttons needed
• MeeGo 1.2 Handset:Toolbar at top, Home and Close buttons needed
• MeeGo 1.2 tablet:Toolbar at top, no Home or Close buttons needed

What that means in practice to application developer ?

You can use Harmattan components to develop applications to all MeeGo devices. With small effort you could adapt your application UI to MeeGo 1.2 handset or MeeGo 1.2 Tablet. At minimum, you need only to add Close and Home buttons to MeeGo 1.2 Handset applications. Your applications would look like more consistent to other system applications when you move toolbar to top of the screen and to redistribute your code for non N9 environment you should use free “base” style.

ToolBar location

In Harmattan UX, the toolbar is located on bottom of screen, in MeeGo handset or MeeGo Tablet, Toolbar is located on top of screen. By default toolbar location is hardwired to bottom in Harmattan components PageStack.qml , I made small experimental patch, adding property toolBarOnTop that defaults as false. Setting this property true, you will have toolbar on familiar place in MeeGo 1.2 handset or tablet. Remember, that property, toolbarOnTop is not standard, do not try use it in Harmattan.
 

Home and Close buttons

In Qml To have Home and close buttons in your toolbar, you should add them to toolBarLayout. In front page you should have home button in left corner and close button in right corner. In other pages there should be back button in right corner.  Qml does not directly support minimize or close, you need to have hooks in your C++ code to server slots. Add following lines to your main QdeclarativeView

 

   QDeclarativeView window(QUrl("qrc:/main.qml"));
    window.rootContext()->setContextProperty("mainWindow",window.window());
    QObject::connect((QObject*)window.engine(), SIGNAL(quit()), &app, SLOT(quit()));  

Your Main page  .qml file could look something like this. In harmattan, you don't need toolbar in main page at all unless you have menus or some other need for it and you can omit tools: from mainpageComponent. Commontools is commont toolbar definition that is used in all subpages.

PageStackWindow {
    id: rootWindow
    initialPage: mainpageComponent
    toolBarOnTop:true // Experimental non standard property

    ToolBarLayout {
       id: commonTools
       visible: false
       ToolItem { iconId: "icon-m-toolbar-home"; onClicked: mainWindow.showMinimized();}
             ToolIcon { iconId: "toolbar-back"; onClicked: pageStack.pop(); }
        }

 Component {
  id: mainpageComponent
  Page {
    id:mainPage
    tools:
     ToolBarLayout {
      ToolItem { iconId: "icon-m-toolbar-home"; onClicked: mainWindow.showMinimized();}
      ToolItem { iconId: "icon-m-toolbar-close"; onClicked: Qt.quit(); }
     }

Equivalent version for Harmattan is

PageStackWindow {
    id: rootWindow
    initialPage: mainpageComponent

    ToolBarLayout {
       id: commonTools
       visible: false
             ToolIcon { iconId: "toolbar-back"; onClicked: pageStack.pop(); }
        }

 Component {
  id: mainpageComponent
  Page {
    id:mainPage

 

Some desktop/mobile related porting issues

Most of developers develop applications in desktop first and them move to real device or emulator. Harmattan Qt components work without problems on desktop. It defaults window size as 854x480. To render window correctly in MeeGo 1.2 or Harmattan environment, window must be created as full screen with window.showFullScreen(); in desktop this is annoying of your test application window pops upp full screen 2560x1600 size with small patch of content in middle. In Harmattan components this was resolved just easy way

#ifdef __arm__
    window.showFullScreen();
#else
    window.show();
#endif

This works in Nokia devices but is not so nice for x86 based touch screen devices. Some little bit more clever way is needed. I made code so that that it just takes size of screen and it it is smaller or equal 1024x800, assume touch device and use full screen, if it is larger, render into window. I made also patch in mdeclativescreen.cpp so that it uses screen size as default size if running smaller screen than 1024x800.
Here is full main program with handling close and minimize and setting full screen in small displays.

int main(int argc, char **argv)
{
    QApplication app(argc, argv);

    QDeclarativeView window(QUrl("qrc:/main.qml"));
    window.rootContext()->setContextProperty("mainWindow",window.window());
    QObject::connect((QObject*)window.engine(), SIGNAL(quit()), &app, SLOT(quit()));

    QRect screenGeometry=QApplication::desktop()->screenGeometry();
    if((screenGeometry.height()<800) && (screenGeometry.width()<1024))
         window.window()->showFullScreen();
    else window.window()->show();

    return app.exec();
}

Release Notes for MeeGo 1.2 Harmattan Qt Quick Components ports

The current base package is qt-components – 1.0~git20110620-7-1fn, it is available now for Ubuntu Natty and MeeGo 1.2 arm and x86 targets.  If you would like to use experimental version of MeeGo 1.2 graphics and not Nokia Harmattan product graphics you can down load extra theme graphics  , qt-components-base-icons-0.3 . If you are running in non-MeeGo environment you need also to install meegotouchtheme package. If you would like develop for N9 with product graphics, I recommend to use graphics delivered with MeeGo 1.2 Harmattan SDK (QtSDK) or Platform SDK (Scratchbox)

You can get MeeGo 1.2 Harmattan Qt Components port for Ubuntu from Forum Nokia PPA qt-components - 1.0~git20110620-7-1fn

sudo add-apt-repository ppa:forumnokia/fn-ppa

sudo apt-get update
sudo 
apt-get install qt-components qt-components-base-icons meegotouch-theme

For MeeGo 1.2 , arm and x86 components are located in: http://repo.pub.meego.com/home:/kate/DE/  .


MeeGo arm version is tested on N900 Community Edition, x86 version for tablet is mostly untested, may be just my bad luck setting environment. Qemu image just freezes after few minutes and chroot Image Xephyr died in few seconds.....

At teh moment, code is only in my personal repository but i hope that we get them soon some more convinient repository. At the moment, download files and install them with rpm comman. When we get files to repository, use zypper

zypper install qt-components qt-components-base-icons

Maemo5 packages will be soon in maemo extras-devel repository.

Chanegs to original git version 

•     Works witn Qt Quick 1.0
•     Autodetect “base” and “blanco” themes
•     environment M_THEME_NAME specifies used theme when multiple themes are present
•     Use full screen size when unde 1024x800 , original was fixed 854x480
•     toolBarOnTop property to PageStackWindow
•     qt-components-base-icons extra icons for base theme