ubuntu sdk html5 applicaitons miss some basic effcts of normal html in web browsers!

Question

I download and install the newest ubuntu sdk (1.097~sdkppa~saucy1~test9) in Ubuntu 13.10.

I just create a native app with Ubuntu HTML5 APIs, but find that it miss some basic effects/behaviors of normal html in web browsers!

Here are what I have done:

Step 1: Create a Html5 Applications from "New file or project..." menu. In the dialog, choose "Applications" form Projects bar and Select "HTML5 Applications"

Step 2: Edit the built-in html file of the project. Just copy the html and js files from another demo project which is also created from "New file or project..." menu. In the dialog, choose "Ubuntu" from Projects bar and Select "HTML5 App". One index.html file and js directory will be created. Then copy them to the first project.

Step 3: Edit index.html file to add onMouseOver and onMouseOut event to the test button

Test normal behaviors of html!

function change(){
  document.getElementById("text1").style.background="red";
}

function change2(){
  document.getElementById("text1").style.background="yellow";
}

Step 4: Run the app and move the mouse on the test button. However nothing happens! But when I click the test button, the color of the button changed.

I think some events must be intercepted by the wrapper of the app. And I wonder how could I get the excepted effects? I need this function to give a float hint to the users.

The whole codes can be download from here: http://yunpan.cn/Q4fp9PeRiCPBW

Answer 1

When creating new HTML5 Apps, make sure you have a recent version of the ubuntu-html5-container and ubuntu-html5-ui-toolkit. I recommend you take the version 0.1.2+14.04.20140219-0ubuntu1~ubuntu13.10.1~ppa1 or newer.

In particular, please ensure that your app files are located in the www directory (both index.html files and JS files) as we recently had to shift things over to this directory, to accommodate the optional cordova runtime.

The Ubuntu HTML5 skeleton app and container have been synced to work this way. To migrate from a previous template, just move files over to www. You can leave the configuration files like manifest and json files at the root of the directory.

Last, the hover events may not be available right now due to the webview we are using (QtWebkit, with an admitted bias towards touch apps). This is a bug for the convergence case, so please file one on launchpad.net/ubuntu-htm5-theme (that's still the source package for our main HTML5 toolkit). Thanks