¿Puedo desarrollar una aplicación híbrida nativa / HTML5 para el teléfono Ubuntu?

8

¿Puedo desarrollar una aplicación híbrida que se haya utilizado junto con la API nativa y HTML5 en el teléfono Ubuntu?

Sé que es posible desarrollar aplicaciones nativas o aplicaciones HTML5.

Sin embargo, quiero saber cómo desarrollar una aplicación nativa que tenga una interfaz de usuario HTML5 (híbrida) en Ubuntu Phone.

application-development ubuntu-touch html5 ubuntu-sdk usuario1793335
fuente
Si se refiere a algo más que a la interfaz de usuario basada en QML, a la que se dirigió la respuesta de Salem, hay vínculos con el código nativo a través de Apache Cordova. Todavía estoy estudiando Cordova, así que no tengo una respuesta completa para usted, pero es fuente para leer / descargar aquí: git-wip-us.apache.org/repos/asf?p=cordova-ubuntu.git;a=tree
OYRM

Respuestas:

10

No estoy seguro de qué quiere decir con "híbrido" (¿una aplicación C ++ que muestra una aplicación web? ¿Distribuir el código de la aplicación entre C ++ / QML / javascript?), Pero puede usar el componente WebView para mostrar una página web / aplicación web en una aplicación qml . Esto también debería funcionar en Ubuntu Phone.

Tome esta sencilla aplicación compuesta por: "app.qml", "app.html" y "app.js" (sí, lo sé, esta "aplicación" es bastante aburrida ...). Esto solo se probó con qmlviewer, por lo que si intenta ejecutarlo a través de un IDE, probablemente tendrá que modificar algo con respecto a las rutas relativas utilizadas.

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);
};

Espero eso ayude.

Salem
fuente