Tell me more ×
Ask Ubuntu is a question and answer site for Ubuntu users and developers. It's 100% free, no registration required.
up vote 2 down vote favorite

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.

share|improve this question
Unfortunately, Ubuntu Phones is in development. Here at Ask Ubuntu we do not support Alpa/Development versions. – nerof61 Mar 10 at 16:43
There are other Ubuntu for Phones development related questions why is this different?. Also, that rule is for Ubuntu Desktop development versions. – Uri Herrera Mar 10 at 23:07
@nerof61, this is an absolutely valid question, we do use and recommend Ask Ubuntu for Ubuntu Touch Developer Preview questions – David Planella Mar 11 at 13:06

1 Answer

up vote 2 down vote

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.

share|improve this answer
Thanks, Salem.I was wondering When I click on the button in the app that has a HTML5 UI, if this would be able to perform the (C + +) – user1793335 Mar 12 at 4:39

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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