Dapatkah saya mengembangkan aplikasi hybrid asli / HTML5 untuk Telepon Ubuntu?

8

Bisakah saya mengembangkan aplikasi hybrid yang digunakan bersama dengan API asli dan HTML5 di ponsel Ubuntu?

Saya tahu bahwa adalah mungkin untuk mengembangkan aplikasi asli atau aplikasi HTML5.

Namun, saya ingin tahu untuk mengembangkan aplikasi asli yang memiliki UI HTML5 (hybrid) di Ponsel Ubuntu.

application-development ubuntu-touch html5 ubuntu-sdk pengguna1793335
sumber
Jika Anda merujuk lebih dari sekadar antarmuka pengguna berbasis QML, yang dijawab oleh Salem, ada kaitan ke kode asli melalui Apache Cordova. Saya masih mempelajari Cordova, jadi saya tidak punya jawaban lengkap untuk Anda, tapi, di sana adalah sumber untuk membaca / mengunduh di sini: git-wip-us.apache.org/repos/asf?p=cordova-ubuntu.git;a=tree
OYRM

Jawaban:

10

Saya tidak yakin apa yang Anda maksud dengan "hybrid" (aplikasi C ++ yang menampilkan webapp? Mendistribusikan kode aplikasi antara C ++ / QML / javascript?), Tetapi Anda dapat menggunakan komponen WebView untuk menampilkan halaman web / webapp pada aplikasi qml . Ini harus bekerja di Ponsel Ubuntu juga.

Ambil aplikasi sederhana ini yang disusun oleh: "app.qml", "app.html" dan "app.js" (ya saya tahu, "aplikasi" ini cukup lemah ...). Ini hanya diuji dengan qmlviewer, jadi jika Anda mencoba menjalankannya melalui IDE Anda mungkin harus memodifikasi sesuatu sehubungan dengan jalur relatif yang digunakan.

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

Semoga ini bisa membantu.

Salem
sumber