web-dev-qa-db-fra.com

Puis-je développer une application hybride native / HTML5 pour le téléphone Ubuntu?

Puis-je développer une application hybride utilisée conjointement avec l'API native et HTML5 sur un téléphone Ubuntu?

Je sais qu'il est possible de développer une application native ou une application HTML5.

Cependant, je souhaite savoir comment développer une application native dotée d'une interface utilisateur HTML5 (hybride) dans Ubuntu Phone.

application-developmentubuntu-touchhtml5ubuntu-sdk
8
user1793335

Je ne suis pas sûr de comprendre ce que vous entendez par "hybride" (une application C++ qui affiche une application Web? Distribuez le code d'application entre C++/QML/javascript?), Mais vous pouvez utiliser le composant WebView pour afficher une page Web/une application Web sur une application qml . Cela devrait également fonctionner sur le téléphone Ubuntu.

Prenez cette application simple composée de: "app.qml", "app.html" et "app.js" (ouais je sais, cette "application" est assez boiteuse ...). Ceci n'a été testé qu'avec qmlviewer, donc si vous essayez de l'exécuter avec un IDE, vous devrez probablement modifier quelque chose en ce qui concerne les chemins relatifs utilisés.

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

J'espère que ça aide.

10
Salem