Can I develop a hybrid native/HTML5 app for the Ubuntu Phone?

application-development ubuntu-touch html5 ubuntu-sdk

6,567

I'm not sure what you mean with "hybrid" (a C++ app which displays an webapp? distribute app code between C++/QML/javascript? ), but you can use the WebView component to display a webpage/webapp on a qml application. This should work on Ubuntu Phone also.

Take this simple application composed by: "app.qml", "app.html" and "app.js" (yeah I know, this "application" is pretty lame...). This was only tested with qmlviewer, so if you try to run it through an IDE you probably will have to modify something in regard the relative paths used.

app.qml

import QtQuick 1.0
import QtWebKit 1.0

Rectangle {
        width: 800
        height: 600
        WebView {
                url: "app.html"
                anchors.fill: parent
                preferredWidth: 800
                preferredHeight: 600
                smooth: false
                settings.developerExtrasEnabled : true 
                settings.javascriptEnabled: true
        }
}

app.html

<!doctype html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Hi</title>
        <style>
        body {
                margin: 20px;
        }
        </style>
</head>
<body>
        <a href="#" id="test_me">Click me!</a>
</body>
<script src="app.js"></script>
</html>

app.js

var x = document.getElementById("test_me");
x.onclick = function(){
        console.log("Hi there");
        new_elem = document.createElement("h2");
        new_elem.textContent = "Hi there!";
        document.getElementsByTagName("body")[0].appendChild(new_elem);
};

Hope it helps.

6,567

user1793335

Updated on September 18, 2022

Comments

user1793335 over 1 year

Can I develop a hybrid app that was used in conjunction with the native API and HTML5 in Ubuntu phone?

I know that it is possible to develop either native app or HTML5 app.

However, I want to know to develop a native app that has a HTML5 UI (hybrid) in Ubuntu Phone.
- OYRM over 10 years
  
  If you are referring to more than simply the QML based user interface, which Salem's answer addressed, there are hooks into native code via Apache Cordova I'm still studying Cordova, so I don't have a complete answer for you, but, there is source to read/download here : git-wip-us.apache.org/repos/asf?p=cordova-ubuntu.git;a=tree