Planet Maemo: category "feed:a55aba7f8b8bee845720e26917ca5d02" Blog entries from Maemo community http://maemo.org/news/planet-maemo/ Sat, 04 Apr 2026 00:04:44 +0000 FeedCreator 1.7.6(BH) en planet@maemo.org New release of Web Runtime for N900 http://xizhizhu.blogspot.com/2010/11/new-release-of-web-runtime-for-n900.html Web Runtime (v1.1.0) for N900 to the extras-devel repository. Please note that this release is only tested against PR 1.3. There's no new features implemented compared to the previous release back in July, but only bug fixes. Personally, this is one of the last duties for me in the WRT project, and let's see what I would play with in the future ;)
What is Web Runtime?
It's a development framework with which you can write applications in standard Web technologies, like HTML, CSS, and JavaScript. Also, a bunch of Device APIs are provided to grant you the access to native resources, e.g. file system, sensors, etc., using JavaScript.
To install WRT on N900, you should first enable the extras-devel repository.

If you have the previous release installed, you should first uninstall:
sudo gainroot
apt-get purge libwrt-experimental1

Then install the new release:
sudo gainroot
apt-get install qtwrt

Have fun and feel free to go to the public forum for more questions ;)11 Add to favourites0 Bury]]> Xizhi Zhu <xizhi.zhu@gmail.com> feed:a55aba7f8b8bee845720e26917ca5d02 Mon, 01 Nov 2010 11:34:00 +0000 http://maemo.org/midcom-permalink-5d326d72e59c11df9069d58ac4f97b9d7b9d Hybrid application using QML and Qt C++ http://xizhizhu.blogspot.com/2010/10/hybrid-application-using-qml-and-qt-c.html http://www.zionsoft.net/2010/10/hybrid-application-qml-qt/

Though QML provides a nice way to design user interfaces, and JavaScript is employed there to implement the application logic and works pretty nice in many cases, we might still need Qt C++ in some situations (well, at least JavaScript has limited access outside its sandbox).

1) integrate QML into Qt C++
Suppose we have a QML file, named "myqml.qml", like this:
// this line should be "import QtQuick 1.0" since Qt 4.7.1
import Qt 4.7

Rectangle {
  id: myRectangle
  width: 800
  height: 480
  color: "lightgray"

  Text {
    id: myText
    text: "I love hybrid application!"
    anchors.centerIn: parent
    font.pointSize: 28
    font.bold: true
  }
}

One easy way to integrate is to use the QDeclarativeView class, which provides a widget to display QML files. You just need the following three lines:
QDeclarativeView view;
view.setSource(QUrl::fromLocalFile("myqml.qml"));
view.show();

However, QDeclarativeView consumes more resources than normal widgets. Fortunately, we can integrate QML into a graphics scene. The following lines shows the basic usage:
// provides an environment for instantiating QML components
QDeclarativeEngine engine;

// encapsulates a QML component definition
QDeclarativeComponent component(&engine, QUrl::fromLocalFile("myqml.qml"));

// creates the graphics item for QML at the engine's root context
QDeclarativeItem *item = qobject_cast<QDeclarativeItem *>(component.create());

scene.addItem(item);

Then with the help of the QDeclarativeItem class, you can easily access the properties of the QML element, e.g.:
qDebug() << item->property("color").typeName();
item->setProperty("color", QColor(255, 255, 255));

2) exposing Qt C++ objects to QML
You can also expose native Qt C++ objects to QML through QDeclarativeContext:
QDeclarativeContext *context = engine->rootContext();
context->setContextProperty("textFromQt", QString("I love hybrid application!"));

Then in QML, you can have e.g. the following line to access them:
text: textFromQt

You can also use QDeclarativePropertyMap to manage the exposed properties:
QDeclarativePropertyMap map;
map.insert("key1", "value1");
map.insert("key2", "value2");
context->setContextProperty("map", &map);

In a QML engine, there could be a couple of contexts, forming a tree structure. The child contexts inherit properties in the parent context. By default, there is only one root context, but you can always add more to give finer control of the exposed data, i.e. different QDeclarativeComponent inside the same context have the same exposed data set.

To expose a self-defined object, we can use the following code:
// define a class with properties
class MyObject: public QObject
{
  Q_OBJECT

  // the NOTIFY signal is needed to inform about changes
  // all properties will be exposed to QML
  Q_PROPERTY(QString text READ text WRITE setText NOTIFY textChanged)
public:
  MyObject(QObject *parent = 0) : QObject(parent), m_text("I love hybrid application!") {}

  QString text() const { return m_text; }
  void setText(QString &text)
  {
    m_text = text;
    emit textChanged();
  }

signals:
  void textChanged();

private:
  QString m_text;
};

// then just expose it so QML can access it through name "myObject"
engine->rootContext()->setContextProperty("myObject", new MyObject());

Moreover, we can create new QML types:
// define the new type
class MyType : public QDeclarativeItem
{
  Q_OBJECT

public:
  MyType(QDeclarativeItem *parent = 0) : QDeclarativeItem(parent)
  {
    setFlag(QGraphicsItem::ItemHasNoContents, false);
  }

  void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget = 0)
  {
    QPen pen(QColor(100, 100, 100), 2);
    painter->setPen(pen);
    painter->drawLine(0, 100, 100, 100);
  }
};

// then register to expose it
qmlRegisterType<mychart>("com.blogspot.xizhizhu.mytype", 1, 0, "MyType");

In QML, you can use it like this:
import com.blogspot.xizhizhu.mytype 1.0

MyChart {
 id: myChart
 width: 100
 height: 200
}

Now let's jump to invoke a Qt C++ function from QML. Basically, QML can invoke slots and functions declared with Q_INVOKABLE. Suppose we have the following function in MyObject:
Q_INVOKABLE void showMessage()
{
  QMessageBox::information(NULL, "My Test", "Invoking a native function ;)");
}

Then you can invoke it in QML:
myObject.showMessage();

3) write plugins as QML extension
The benefits for using plugins as QML extensions are similar to using shared libraries, and it can be easily achieved with the help of QDeclarativeExtensionPlugin. Let's reuse the MyType class defined in the previous section. First, we need to create a plugin:
class MyPlugin : public QDeclarativeExtensionPlugin
{
  Q_OBJECT
public:
  void registerTypes(const char *uri)
  {
    qmlRegisterType<MyType>(uri, 1, 0, "MyType");
  }
};

Q_EXPORT_PLUGIN2(myPlugin, MyPlugin);

Then create a file named "qmldir" to define which plugin to load from where (suppose the plugin is called "myplugin):
plugin myplugin /path/to/plugin

Now we can use qmlviewer to launch the QML file:
// no need to import now
MyChart {
 id: myChart
 width: 100
 height: 200
}

4) summary
  • Use QDeclarativeView or QDeclarativeComponent to integrate a QML file into native Qt C++.
  • Qt C++ can access the properties of QML elements through QDeclarativeItem.
  • Expose native objects to QML through QDeclarativeContext.
  • New QML types can be exported through qmlRegisterType.
  • The properties of native objects are exported as properties, and the slots or functions declared with Q_INVOKABLE can be invoked in QML.
  • Create plugins for extension using QDeclarativeExtensionPlugin.
    • 9 Add to favourites0 Bury]]>     Xizhi Zhu <xizhi.zhu@gmail.com> feed:a55aba7f8b8bee845720e26917ca5d02 Thu, 28 Oct 2010 19:36:00 +0000 http://maemo.org/midcom-permalink-3b628316e2b411df964959e3dbe21c2e1c2e     Unofficial Qt Web Runtime tutorial 2: Menu API http://xizhizhu.blogspot.com/2010/09/unofficial-qt-web-runtime-tutorial-2.html here.

    As a summary, we have already supported the APIs of menus, widget object, URI schemes, web inspector, console log, some Device APIs, as well as some HTML 5 features and standard JavaScript from Qt WebKit. Let's start with the menu API.

    1 view menu
    You can create the menu items to the chrome's menu bar (we call it view menu) with the following JavaScript code:
    var menuItem = new nokia.device.MenuItem("Menu item", changeTitle);
    nokia.device.menu.addMenuItem(menuItem);
    function changeTitle()
    {
      nokia.device.menu.title = "New title";
    }

    Here, you have created a menu item named "Menu item" and added it to the menu bar. When it's triggered, the function changeTitle() will be called to set the menu's title to "New title".

    Note that since on the device the menu's title is also the same as the window's title, it actually changes the window's title too.

    2 context menu
    The context menu can be created with the following piece of code:
    var contextMenu = new nokia.device.ContextMenu("contextMenuArea");
    var changeTitleItem = new nokia.device.MenuItem("Change Title");
    changeTitleItem.onselect = changeTitle;
    contextMenu.addMenuItem(changeTitleItem);

    Here, a context menu is created and an item named "Change Title" is added to the menu. When you long tap on the HTML element with id "contextMenuArea", this context menu will pop up. Then if you select the "Change Title" item, the changeTitle() function will be called.

    Of course, only the widgets in the windowed or fullscreen mode could have context menus; and only the widgets in the windowed mode can have view menus.

    Note that there's a known bug (already fixed for the next release) that if you long tap on the area where no context menu is defined, an empty context menu is popped-up.

    3 sample
    Only the HTML file this time ;)
    <html>
    <header>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Menu sample</title>
      <script type="text/javascript">
        function changeTitle()
        {
          if (nokia.device.menu.title == "Title 1")
            nokia.device.menu.title = "Title 2";
          else
            nokia.device.menu.title = "Title 1";
        }

        function init()
        {
          var menuItem = new nokia.device.MenuItem("item", changeTitle);
          nokia.device.menu.addMenuItem(menuItem);

          var contextMenu = new nokia.device.ContextMenu("contextMenuArea");
          contextMenu.addMenuItem(menuItem);
        }
      </script>
    </header>
    <body onload="init()">
      <div id="contextMenuArea">There is a context menu.</div>
    </body>
    </html>

    As you can see, one menu item can be added to multiple menus, exactly the same as native Qt apps. Here goes some screenshots:
     
     

    The first one shows the simple sample when launched. The second and third one show the view menu and the context menu, respectively, while the last one shows that the title has been updated after you tap on the menu. More screenshots can be found here, while the sample code is available here.12 Add to favourites0 Bury]]>     Xizhi Zhu <xizhi.zhu@gmail.com> feed:a55aba7f8b8bee845720e26917ca5d02 Fri, 10 Sep 2010 22:23:00 +0000 http://maemo.org/midcom-permalink-e084175ebd1311df9690e7c4721aaae0aae0     Unofficial QtWRT tutorial 1: Hello, view modes! http://xizhizhu.blogspot.com/2010/08/unofficial-qtwrt-tutorial-1-hello-view.html announced Qt Web Runtime, and released some snapshot for N900. Basically, QtWRT is a framework, using which you can write "native" application with standard web technology, e.g. HTML, CSS, and JavaScript. As a good starting point, you should take a look at this article.

    Note that we're still working on it, and it's now just in the technology preview state ;)

    1 install QtWRT
    You should enable the extras-devel repository on your Rover and install the qtwrt-experimental package from there. Then, you can find in your Application Manager that Qt Web Runtime Technology Preview for N900 installed.


    2 config.xml
    To write your own web applications, besides the normal HTML pages, you also need a config.xml file to define e.g. the starting file, icon, features you need (i.e. access to Device APIs), as well as author's information, etc. More details and default values are defined here.

    The following piece shows a minimum sample:
    <?xml version="1.0" encoding="UTF-8"?>
    <widget xmlns = "http://www.w3.org/ns/widgets">
    </widget>

    You can also define the name and icon (only PNG files supported) of the web app in config.xml:
    <?xml version="1.0" encoding="UTF-8"?>
    <widget xmlns = "http://www.w3.org/ns/widgets">
      <name>A sample web app</name>
      <icon src="app_icon.png" />
    </widget>
    The name and icon will be appeared in the Application Grid or the Desktop menu --> Add widget based on the view mode the web app supports (see below).

    3 view modes
    View modes define the visual presentation of web applications. The W3C spec has defined five different view modes, but we only support three of them in this snapshot:
    windowed - The default view mode. You can find / launch web apps in this mode from the Application Grid. It also supports the native chromes and user-defined menus.
    fullscreen - It can also be found / launched from the Application Grid. No need to say what is full screen, right ;)
    minimized - It equals to the native widgets on the Home Screen.

    The following piece defines the view modes in config.xml:
    <?xml version="1.0" encoding="UTF-8"?>
    <widget xmlns = "http://www.w3.org/ns/widgets"
        viewmodes = "someviewmode fullscreen minimized" >
    </widget>
    The unknown view mode "someviewmode" is ignored. It supports both "fullscreen" and "minimized" mode in this case. If no supported view mode is defined, "windowed" mode is used.

    You can get the current view mode through the widget.viewMode interface in JavaScript.

    Also, the transfer among different view modes is supported, with the exception from windowed / fullscreen to minimized, e.g.:
    <a href="javascript:widget.viewMode='windowed'">Go to windowed mode</a>

    With the following code, you can handle the view mode change event in the viewModeChanged function:
    widget.onviewmodechange = viewModeChanged;
    function viewModeChanged(mode)
    {
      if (mode == "windowed") {
        // going to windowed mode
      } else if (mode == "minimized") {
        // going to minimized mode
      } else if (mode == "fullscreen") {
        // going to full screen mode
      }
    }

    4 package your application and install it
    Well, I just assume you have enough knowledge to write whatever HTML page you like, and have renamed it to index.htm (the default starting file name).

    Now just zip all your HTML files together with the config.xml file. Note that the config.xml file should be at the top level of the zip, and the name is case sensitive.

    Then please rename it to *.wgt and copy it to your Rover. To make it like a native application, you can install it from the File Manager, and you can find your installed web applications in Application Manager!

    Eh, I'm talking about some details during the installation here. You can skip this if not interested.

    When you tap on the wgt file in File Manager, widgetinstaller is launched. It does some sanity checking of it, e.g. whether it's a valid zip file, if the config.xml is valid, etc., then convert it to a Debian file, and use the Application Manager to install the generated Debian file.

    If you are interested in the generated Debian file, you can use the "--no-install" option of the widgetinstaller to have it copied to the current directory.

    5 a sample
    First, let's write the config.xml file.
    <?xml version="1.0" encoding="UTF-8"?>
    <widget xmlns="http://www.w3.org/ns/widgets"
        id="http://xizhizhu.blogspot.com/qtwrt/view-modes-sample"
        viewmodes="minimized fullscreen windowed">
      <name>View Modes Sample</name>
      <description>
        Well, it shows how the view modes work.
      </description>
      <author href="http://xizhizhu.blogspot.com/" email="xizhi.zhu@gmail.com">Xizhi Zhu</author>
      <license>In the public domain without any warranty.</license>
    </widget>

    Then the HTML file.
    <html>
    <header>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>View Modes</title>
      <script type="text/javascript">
        function init()
        {
          output = document.getElementById("viewmode");
          output.innerHTML = widget.viewMode;

          widget.onviewmodechange = changeViewMode;
        }

        function changeViewMode(mode)
        {
          output.innerHTML = widget.viewMode;
        }
      </script>
    </header>

    <body onload="init()">
      <div id="viewmode"></div><br />
      <a href="javascript:widget.viewMode='minimized'">minimized</a><br />
      <a href="javascript:widget.viewMode='windowed'">windowed</a><br />
      <a href="javascript:widget.viewMode='fullscreen'">fullscreen</a>
    </body>
    </html>

    Now let's zip the file, send it to N900 and install it from the File Manager. You can find it installed in the Application Manager and already launched in the home screen.


    You may ask, why the last line of "fullscreen" is not shown there? Well, that's due to the fixed size in the minimized mode, 312x82. Also, in the minimized mode, you can't actually interact with it, but only tap on it and open the windowed or fullscreen mode if supported. In the minimized mode, it's the same as native widgets that you can move it around, close it and add it back, as well as the transparent background by default.

    Then you can tap the links to toggle between windowed and fullscreen mode. And for sure you'll find another "limitation" that you can't go back to minimized mode from the link. The only way is to close the window. Well, that's exactly what is expected.



    Another thing is, in the fullscreen mode, it automatically shows the "go back to windowed" button if windowed mode is supported, otherwise the "close" button. Emm, the same as the browser, right?


    Updated on 19.8.2010
    Screenshots added into the posts ;)10 Add to favourites0 Bury]]>     Xizhi Zhu <xizhi.zhu@gmail.com> feed:a55aba7f8b8bee845720e26917ca5d02 Wed, 18 Aug 2010 23:07:00 +0000 http://maemo.org/midcom-permalink-2048e12aab6d11df91ae41bb542a30b130b1     JavaScript benchmarking on N900 PR1.2 http://xizhizhu.blogspot.com/2010/05/javascript-benchmarking-on-n900-pr12.html JavaScript benchmarking on N900 PR1.1, and compare it with other platforms. Now, as N900 PR1.2 got released, Opera has released a preview for Maemo, and Chrome is ported to N900 by Jacekowski, I did another round of benchmarking.

    V8SunSpiderPeacekeeper
    MicroB (default browser)21.235.12128
    FireFox21.415.84141
    Opera49.524.41119
    Qt 4.6.210512.04238
    QtWebKit 2.01049.36286
    Chrome1138.84344
    For V8 and Peacemaker, the higher the score, the better performance it has. For Sunspider, it's the lower the better.

    Chrome is really fast as a result of its excellent V8 JavaScript engine and frequent release cycle.

    Qt 4.6.2 is still quite good, especially considering the fact that the WebKit integrated is quite old. Note that QtWebKit will be released separately from Qt, meaning we could enjoy more about the latest WebKit technology then.

    However, both Opera and FireFox (MicroB uses FireFox's Gecko JavaScript engine) have quite a long way to go. Moreover, when running V8 and Peacekeeper, both MicroB and FireFox complained about unresponsive JavaScript.0 Add to favourites0 Bury]]>     Xizhi Zhu <xizhi.zhu@gmail.com> feed:a55aba7f8b8bee845720e26917ca5d02 Sun, 30 May 2010 14:40:00 +0000 http://maemo.org/midcom-permalink-1f9eb6faab6d11df91ae41bb542a30b130b1     JavaScript benchmarking on N900 and my laptop http://xizhizhu.blogspot.com/2010/03/javascript-benchmarking-on-n900-and-my.html V8 version 5, SunSpider v0.9.1 and Peacekeeper on my laptop. My laptop is HP EliteBook 6930p, which has Intel Core 2 Duo CPU P8600 @ 2.40GHz, 4 GB RAM, running KUbuntu 9.10 with kernel 2.6.31-20-generic. Also, I ran it on my N900 PR1.1 with Qt 4.6.2, and collected some results for iPhone 3GS, Droid and Nexus One, and HTC Desire.

    The following scores are from V8, the higher the better.
    FireFox for Ubuntu 3.5.8 - 248
    Qt 4.6.2 – 910
    Chrome 5.0.307.11 Beta – 4155
    QtWebKit 2.0 – 2816
    N900 - 105
    iPhone 3GS - no results
    Droid - 39.5
    Nexus One - 63.5
    HTC Desire - 66.1

    Then I found some results of iPhone 3GS for V8 version 3:
    N900 - 103
    iPhone 3GS - 53

    The following scores are from SunSpider, the lower the better.
    FireFox for Ubuntu 3.5.8 – 2484.7
    Qt 4.6.2 – 1136.0
    Chrome 5.0.307.11 Beta – 462.1
    QtWebKit 2.0 – 635.6
    N900 - 12.5
    iPhone 3GS - 16.7
    Droid - 34.2
    Nexus One - 14.7
    HTC Desire - 12.02

    The following scores are from Peacekeeper, the higher the better.
    FireFox for Ubuntu 3.5.8 – 1510
    Qt 4.6.2 – 3261
    Chrome 5.0.307.11 Beta – 4324
    QtWebKit 2.0 – 4288
    N900 - 244

    Chrome’s V8 engine is really fast, and WebKit still has a long way to go!

    Also, N900 performs much better than iPhone 3GS, Droid and Nexus. Considering HTC Desire, N900 wins easily on V8, but lost a little on SunSpider. However, if you consider MicroB, the default browser on N900, it’s a disaster due to the slow engine of Gecko and N900 even used a pretty old version.

    Then the ACID3 test.
    FireFox for Ubuntu 3.5.8 – 93
    Qt 4.6.2 – 100
    Chrome 5.0.307.11 Beta – 100
    QtWebKit 2.0 – 100


    * The test for QtWebKit 2.0 is done with the revision number of 56441.0 Add to favourites0 Bury]]>     Xizhi Zhu <xizhi.zhu@gmail.com> feed:a55aba7f8b8bee845720e26917ca5d02 Sat, 20 Mar 2010 15:11:00 +0000 http://maemo.org/midcom-permalink-1e5748acab6d11df91ae41bb542a30b130b1