Category Archives: Qt Quick

http://sw.nokia.com/FN-1/Topic/qt_quick

New Features in Nfc Interactor 4.0

Posted on by
Reply

Nfc Interactor 4.0 is now available as download or update in the Nokia Store. It’s a big step forward and a major evolution from the previously published version 2.0. Many new features will allow you to read and write NFC tags even more comfortably, as well as push your NDEF creations directly to other NFC phones.

New features for peer to peer

  • Send NDEF messages through the standardized SNEP (Simple NDEF Exchange Protocol) to other NFC devices, including Windows 8 devices, the Nokia Lumia 610 NFC or recent Android phones (Ice Cream Sandwich+)
  • Send raw NDEF messages through a direct LLCP (Logical Link Control Protocol) socket
    • Connection-oriented or connection-less connection
    • Select service name or port for the connection
    • Connect client- and/or server-socket for connection-oriented
  • Receive SNEP messages and parse their contents + protocol information (Symbian only)

New features for tag reading / writing

  • Long-press on a read tag to directly clone a tag you have read
  • Long-press on a read tag to edit a tag you have read
  • Save composed tags for later re-use
  • Load previously saved tag compositions or tags collected from the field into the editor to change the contents or write the tag again
  • Extracts and stores images included in the tag on the phone file system
  • Select the data directory for storing tags, also allowing you to copy the raw NDEF message data to your PC for further analysis
  • New settings screen to configure saving and peer-to-peer behavior
  • Automatically format factory empty tags (-> writes empty message before writing the real contents)
  • Foursquare support added to social message template

Source Code & Download

These additions extend the full feature list, which is now already fills several pages. As usual, the full source code is released under the Nokia Example Code License and can be downloaded for free from the SVN server. The new version also demonstrates the use of the brand new Simple NDEF Exchange Push library for the Nokia N9, which allows sending SNEP messages from MeeGo applications. You need to add it to your Qt SDK to compile Nfc Interactor for MeeGo Harmattan on your local machine.

If you’d rather like to just use the app instead of digging into the source code, you can conveniently download the app from the Nokia Store. You can either go for the free, ad-supported version, or upgrade to Unlimited, which doesn’t show ads and allows writing / pushing an unlimited number of advanced messages.

Example application showcasing key Harmattan APIs

Posted on by
Reply

We have published a new example application for Harmattan developers.

The application’s source code is available on harmattan-dev. It can be built in Qt SDK using the enclosed project-file.

The application features several key elements in the Harmattan application programming interface, and thus provides a good starting point for learning about specific technologies and application development for N9 in general.

The initial version of the showcase application concentrates on Qt Mobility interfaces (ranging from maps, multimedia and messaging to visualizing the sensor data with a compass overlaid on camera input).

In the messaging area it provides insight how NFC is easily integrated into an application.

Feedback on the application are best given as comments in this blog entry.

N9 showing the compass in the showcase application.

Developer Library latest update

Posted on by
Reply

This Developer Library and API reference update includes documentation for PR 1.2 features and documentation enhancements for existing features:

As always, your feedback about the Developer Library is very welcome!

 

 

Developer Library latest update

Posted on by
Reply

This Developer Library and API reference update includes documentation for PR 1.2 features and documentation enhancements for existing features:

As always, your feedback about the Developer Library is very welcome!

 

 

Nfc Interactor: Full Access to NFC Tags!

Posted on by
Reply

Nfc Interactor composing a Geo Tag on the Nokia N9.Ever saw an NFC tag at a bus station and wanted to know what’s really stored on it? Just touch the tag with the Nfc Interactor app running on your phone, and you will instantly see low level information about the NFC tags and its contents.

If you’re lucky enough to have unlocked NFC tags, the dynamic NDEF message editor UI lets you create your own tags in the most flexible and comfortable way.

Nfc Interactor is now conveniently available in the Nokia Store for several NFC-enabled Symbian phones and the Nokia N9 with MeeGo Harmattan. The app is based on Qt and is completely open source as a code example, to inspire you and to enable re-use of its versatile and completely documented components for your own NFC apps.

NFC Tag Reading & Writing

Aimed at enthusiasts and developers, Nfc Interactor reveals low-level information about the NFC tags you touch, including their tag types, UIDs and for some tags additional information like the memory size and lock status.

Most NFC tags contain standardized NDEF messages (like Smart Posters, URIs or business cards), which are parsed and shown on-screen, nicely formatted so that you can easily read their contents.

The most powerful part of Nfc Interactor is the dynamic NDEF editor UI. Compose your own NDEF messages containing multiple NDEF records, just by adding all the records you need to a list. Many records support optional information, which you can supply if needed (e.g., the Smart Poster supports multiple titles in different languages and allows setting the recommended action for the reader). A short help text explains the basics of each record type. The top bar will always keep you updated on the size in bytes of your current creation, so that you can ensure it actually fits on your tag. Once finished, write your message to as many NFC tags as you like.

Advanced Nfc Tags

Nfc Interactor includes many ready-made templates for conveniently writing more advanced tag types. This includes Geo Tags to link to coordinates and launch the Maps application on the phone, or App Store tags to link to your app in the store corresponding to the actual mobile operating system of the user. More details about the web services working behind the scenes to enable those use-cases will be explained in upcoming blog posts.

On the social side, you can write business cards (in the common vCard format) and social network tags, which link to your favorite social service like Twitter, Facebook, LinkedIn or vKontakte. In the SMS record editor, you can directly enter the telephone number of the receiver and the body text to be sent — these records can for example also be used for payment via premium SMS (this method is used for many NFC tags that let you purchase a public transport ticket).

For low-level writing, you can also create custom records, which are needed for example to store app-specific information or to create autostart tags for apps (Nfc Interactor itself can be automatically launched through touching a tag that contains a record of the external RTD "nokia.com:nfcinteractor". Of course, a template for this is available in the editor UI as well.

Open Source Code Example

Nfc Interactor is completely open source and — like most Qt code examples — released under the open source BSD license. Many months of development went into creating the current version of the app, directly saving you development time.

While Qt Mobility already offers classes to conveniently handle Text and URI NDEF records, Nfc Interactor adds classes that manage Smart Posters, business cards, images, geo tags, app store tags, social network tags and SMS tags.

Additionally, you can see a real-life use of reading and writing NFC tags. For NFC Forum Tag Type 1 + 2 tags, the app uses tag-specific low-level commands to read their size and lock status (Symbian only). You will also see all components in place for automatically launching the app, for both MeeGo Harmattan and Symbian.

On the non-NFC side, the app also features a cross-platform UI for MeeGo Harmattan and Symbian using the respective Qt Quick Components — most parts of the QML code are similar, as a developer you only have to take account for a few UI differences!

Availability

Nfc Interactor is available for the Nokia N9 with MeeGo Harmattan (PR 1.1+ recommended), as well as the Nokia C7 / Astound / Oro with Symbian Anna, plus the Nokia 700 and Nokia 701. Support for the Nokia 603 and the C7 with Nokia Belle should be added by the Nokia Store soon.

The app can be downloaded for free. In addition to demonstrating the NFC APIs, it is also a real-life example and showcase for In-App-Advertising and In-App-Purchasing. The free version is always reads NFC tags, plus it writes an unlimited number of basic tags (e.g., URI, Text or Smart Poster) and up to 10 advanced tags. It is supported by the Qt ad-APIs provided by inneractive.

Upgrading to the Nfc Interactor Unlimited removes the ads and unlocks writing an unlimited number of advanced tags. On Symbian, you can conveniently purchase those upgrades through the Qt In-App-Purchasing APIs. For Harmattan, the Nfc Interactor Unlimited is an extra app available through the Nokia Store.

The complete source code of the application is available on the SVN server at Nokia Developer Projects.

Using QDeclarativeImageProvider for speeding up Symbian QML app installation

Posted on by
Reply

Yeah, that’s not a mistake. I’ve just faced with one special (probably rare) case where the installation time of Symbian QML application had been reduced from 8 min to 30 sec.

How much time do you think
could take an installation of 15Mb symbian sis package file without SmartInstaller wrapping? A
minute, two? Actually, the right answer depends mostly not on the sis file size
but on the number of files in sis package. In general, sis package is just a zip archive
with installation script inside. Script execution and file I/O operations
took most of the time. In my case I had a QML application with a bit more than
500 image files inside. And it tooks 8 min for my N8-00 to install it on
embedded memory card and 3,5 to uninstall. Yeah, there might be applications
that require so many graphic files, for example ebooks and card-learning
systems as well as games.

To make sure the problem is
not sis size dependent I replaced all image files (~19Mb) with only 2 files 10Mb each.
And installation proceeds 10 times faster.

So, could we put all
application resources in one big file to speed up the installation process?
Sure we can with help of The Qt resource system. But there is one big disadvantage: whole
resource file have to be loaded into process memory before you can access
anything inside it. That means if you can’t split your data between resource
files and switch between them during application execution (most probably
application logic doesn’t allow that) you have to load all files in memory when
application starts. In my case that was impossible to do because even EPOCSIZE
tweaks couldn’t help me to avoid *out of memory* crash.

Fortunately I had a deal
with image files and found out that QML architects providently took care about
overloading image providers in QML. Qt 4.7 contains a nice class called QDeclarativeImageProvider. It provides an interface for supporting
pixmaps and threaded image requests in QML. In other words you can derive from that class, create own object from the derived class and attach it to QML engine with certain key (qstring)
value. Every time QML engine try to resolve image source
"image://you_key/somefile_id.jpg" it will invoke your object’s method with
somefile_id.jpg as parameter and will expect QImage or QPixmap in return.

So, the solution is
obvious. All i need is to put all my image files in zip and implement my
QDeclarativeImageProvider-derived class that could read images from the zip. I chose
QuaZip library for reading zip’s. Some code snippets are below. Also you can
find sample project in the attachment.

Declaring our ImageReader class:

 

Its implementation:

Then it could be attached to the QML declarative engine (that should be done before you open any qml file in it):

Here images.zip is our data file and myzip – our keyword.

Now we can use any image from that zip in our qml file like that:

Normal
0
false
false
false
RU
X-NONE
X-NONE

File
01_sdk_download_v4.jpg will be retrieved from the images.zip when necessary.

Sample project: ZIPDeclarativeImageProvider.zip

NFC tags turned inside out – parse tag contents with the open source Nfc Info app

Posted on by
Reply

As a developer or interested end-user, you often want to take a closer look at the contents of NFC tags. The new Nfc Info app is here to provide the corresponding knowledge, given that you have an NFC capable Symbian (Nokia C7 [Astound], 600, 700, 701) or MeeGo phone (Nokia N9). Simply touch a tag and the app will show you plenty of data about the Nfc tag contents. You will see:

  • Generic NFC tag information (e.g., NFC Forum Tag Type 1, its UID and version)
  • The records contained in the NDEF message plus its size (e.g., a custom record + a URL record)
  • For most standardized records also a nice textual overview of the parsed contents (e.g., URI, title, action for a Smart Poster)
     

Internally, this is done using convenience classes that hide the complexity and bit/byte-encodings of the records. Luckily, Qt Mobility already provides those for the most common record type definitions (RTD): text and URI. In the Nfc Info source code, you will now find additional ready-made classes that parse Smart Poster, Mime/Image and vCard (for storing business cards) RTDs.

Best of all, you can easily plug those classes into your own project. It’s so simple that I’ve embedded them into the Nfc Corkboard example within a few minutes, so that also that app now handles Smart Posters and business cards.

Usage of the new classes is simple: first, convert the generic record class into the corresponding derived, specialized class. From now on, you have access to methods that return the individual components of the record, or you can assign components for writing.

A short example, which parses a Smart Poster and adds textual information to a string called tagContents:

QString tagContents;

    
if (record.isRecordType<NdefNfcSpRecord>())



    {



        // Convert to a Smart Poster record type class (urn:nfc:wkt:Sp)



        NdefNfcSpRecord spRecord = NdefNfcSpRecord(record);



        // Uri



        tagContents.append("Uri: " + spRecord.uri().toString() + "\n");



        // Title



        tagContents.append("Title count: " + QString::number(spRecord.titleCount()) + "\n");



        if (spRecord.titleCount() > 0) {



            foreach (QNdefNfcTextRecord curTitle, spRecord.titles()) {



                tagContents.append(curTitle.text());



            }



        }



        // Image



        if (spRecord.imageInUse()) {



            QByteArray imgFormat = spRecord.image().format();



            if (!imgFormat.isEmpty()) {



                tagContents.append("Image format: " + imgFormat + "\n");



            }



        }    



    }


The features of the new classes — including read and write support for all listed properties:

  • Smart Poster (urn:nfc:wkt:Sp): Uri, title(s) & their languages, action, size, type and image.
    (Note however that most phones currently on the market do not process the last three details listed here in their default phone tag handling UI)
  • Image (MIME, image/[png,gif,jpg,…]): en/decode all image formats supported by Qt (includes png, gif, jpg) or use raw image data. Automatically sets the correct mime type.
  • vCard (MIME, text/x-vCard): parse the versit document and get a list of all contained contacts, already provided in a convenient QContact instance. You can query all details through that class, or go ahead and add it to the phone’s address book.
     

To get started, just download the binary of the example (.sis for Symbian, .deb for MeeGo Harmattan). If you’re using the C7 [Astound], make sure that you update the device firmware to Symbian Anna in order to enable NFC support. You will also need to install Qt Quick Components, Qt 4.7.4 and the Qt Mobility 1.2 package and from the Qt SDK. See the Nfc Info release notes for more details, or read the "Start NFC Development with the Qt SDK today" blog post for full details. If you should be lucky enough to have Symbian Belle on an NFC phone, you only need to install Qt Quick Components from the Qt SDK (the Smart Installer isn’t used in the Nfc Info app at the moment). On the N9, you’re good to go with the standard firmware — everything is in place by default.

Happy tag-reading!

Nfc Info on the Nokia N9

Porting MeeGo 1.2 Harmattan Qt Quick Components

Posted on by
Reply


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 854×480. 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 2560×1600 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 1024×800, 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 1024×800.
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 1024×800 , original was fixed 854×480
  •     toolBarOnTop property to PageStackWindow
  •     qt-components-base-icons extra icons for base theme

Nokia MeeGo 1.2 Harmattan Qt Quick components

Posted on by
Reply


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

 

Buttons

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

To run Harmattan components applications, you need also theme graphics. Our Harmattan SDK has graphics included. The graphics are Nokia proprietary, so you are not allowed to redistribute them. For that that reason, we are not including packages to our PPA or MeeGo repositories. For debian based Ubuntu or Maemo 5, you could just copy meegotouchtheme.nokia-graphics.deb and meegotouchtheme-nokia-icons.deb and 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 copy files from your SDK to your host. Files should be  /usr/share/themes/meego/blanco directory tree from SDK to your target system. 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 Quick COmponents  based on N900DE "base" theme. I am hoping that we could make this available soon.