0

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)

3

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.

1

If you create your HTML5 app with the default Qt template, then you're essentially developing a Qml app with a Webview. You have access to all of the Qml APIs but have to bind them with your webview manually.

What the Ubuntu HTML5 App template provides is a container that does it for you. We currently support the following APIs in the ubuntu-html5-container: - W3C APIs exposed by the Webview (geolocation for example) - Unity APIs - Ubuntu Platform APIs: Alarm, Online Accounts and Content Hub currently - Cordova APIs: they let you access the Camera, microphone or get the battery status for example.

Of course, you can also access online APIs as well, as this application type has the 'network' access privilege by default.

You can find a very good overview at: http://developer.ubuntu.com/apps/html-5/

For details about the Platform APIs available to HTML5 Apps, see: http://developer.ubuntu.com/api/html5/sdk-14.04/

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.