Ubuntu – How to call Qt or local function from Ubuntu HTML5 App

application-developmenthtml5ubuntu-sdk

I have create a HTML5 App from Ubuntu SDK. It contains a index.html and js directory.
Next I add "X" label on the html file like this:

  <head>
    ...
    <style type="text/css">
       #quit { background-color: gray; color: white; font-weight: bold; display: block; text-align: right; }
    </style>
  </head>

  <body>
   <a id="quit">X</a>
   ...
  </body>

The wanted effect is when “X” label is clicked, the Qt.quit() will be called and the app window be closed. Unfortunately, it won't. The app is launched by "ubuntu-html5-app-launcher" (contained in package "ubuntu-html5-theme"). So, how to modify ubuntu-html5-app-launcher to let the html5 app do something as well as native apps, for example, just close the window when we click the item defined in the html file?

FYI: I found if I choose "Applications >> HTML5 Application" template from "New file or project" menu in the SDK, Qt.quit() can be called by html file (thru addToJavaScript function):

void Html5ApplicationViewerPrivate::addToJavaScript()
{
    m_webView->page()->mainFrame()->addToJavaScriptWindowObject("Qt", this);
}

However "Applications >> HTML5 Application" type app cannot transfer some events such as mouse over and mouse move to the built-in WebView, as a result, when user move mouse on and over the elements of the html, nothing will happen unless you click the elements.

So my questions are:

  • How to make html5 apps launched by ubuntu-html5-app-launcher to call
    qt functions within html file. Namely how to modify
    ubuntu-html5-app-launcher

    OR

  • How to make "Applications >> HTML5 Application" type apps to transfer
    specified events, such as mouse move and over, to the built-in html
    file loaded by C++ class (in my demo is Html5ApplicationViewer
    inherit form QWidget)

Best Answer

The Applications templates are not Ubuntu Touch templates, those are actually just Qt Creator templates, you can't use them for Ubuntu Apps.

When you make an Ubuntu HTML5 app you can use standard JavaScript mouse event handlers like onmousemove, onmouseover and onmouseout although right now those don't work very well. Ubuntu Touch is in rapid development though so keep an eye out for updates.

EDIT: Use touch event handlers as specified in the W3C Specification

You can't really quit a HTML5 app from the app itself. It's not really a problem since if you had a chance to play with other apps for Ubuntu Touch you might have noticed that none of them have an exit button. On Ubuntu the idea is that you just slide apps into the background.

If you want to make a C++ application with a HTML5 UI you should read the answer to this question.

Related Question