Posso desenvolver um aplicativo híbrido nativo / HTML5 para o Ubuntu Phone?

8

Posso desenvolver um aplicativo híbrido usado em conjunto com a API nativa e o HTML5 no telefone Ubuntu?

Eu sei que é possível desenvolver aplicativos nativos ou HTML5.

No entanto, quero saber como desenvolver um aplicativo nativo que tenha uma interface HTML5 (híbrida) no Ubuntu Phone.

application-development ubuntu-touch html5 ubuntu-sdk user1793335
fonte
Se você está se referindo a mais do que simplesmente a interface do usuário baseada em QML, abordada pela resposta de Salem, há ganchos no código nativo via Apache Cordova. Ainda estou estudando Cordova, então não tenho uma resposta completa para você, mas é fonte para ler / baixar aqui: git-wip-us.apache.org/repos/asf?p=cordova-ubuntu.git;a=tree
OYRM

Respostas:

10

Não sei o que você quer dizer com "híbrido" (um aplicativo C ++ que exibe um webapp? Distribui código de aplicativo entre C ++ / QML / javascript?), Mas você pode usar o componente WebView para exibir uma página da web / webapp em um aplicativo qml . Isso deve funcionar no Ubuntu Phone também.

Pegue este aplicativo simples composto por: "app.qml", "app.html" e "app.js" (sim, eu sei, esse "aplicativo" é muito ruim ...). Isso foi testado apenas qmlviewer, portanto, se você tentar executá-lo por meio de um IDE, provavelmente precisará modificar algo em relação aos caminhos relativos usados.

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 que ajude.

Salem
fonte