Bagaimana cara mengembangkan aplikasi Ubuntu dalam HTML dan JS?

34

Saya mengembangkan aplikasi dan saya pikir HTML dan JavaScript lebih baik untuk masa depan, tetapi saya tidak dapat menemukan tutorial apa pun (saya perlu aplikasi untuk menggunakan tema sistem).

Apakah ada binding untuk Unity, menu pesan dan notifikasi, couchdb dan sebagainya?

application-development webapps html5 webapp-development mhall119
sumber
Anda mungkin juga menemukan pertanyaan serupa ini menarik: askubuntu.com/questions/97430/…
David Planella

Jawaban:

24

Titik awal yang baik untuk binding dan API di Ubuntu dapat ditemukan di developer.ubuntu.com . Saya tidak punya pengalaman dengan itu, tetapi Anda mungkin juga ingin melihat ke dalam Gjs, binding Javascript untuk GNOME.

Bergantung pada apa yang Anda coba lakukan, Anda bisa membangun aplikasi seperti aplikasi HTML + JS dan kemudian membuangnya ke tampilan Webkit. Ini sangat sederhana untuk dilakukan dengan python:

#!/usr/bin/env python

from gi.repository import Gtk, WebKit
import os, sys

class Browser:
    def __init__(self):
        self.window = Gtk.Window()
        self.window.set_default_size(800, 600)
        view = WebKit.WebView()
        view.load_html_string("<strong>Hello World!</strong>", "file:///")  
        self.window.add(view)

        self.window.show_all()
        self.window.connect('destroy', lambda w: Gtk.main_quit())

def main():
    app = Browser()
    Gtk.main()

if __name__ == "__main__":
    main()
andrewsomething
sumber
7
JS juga pemrograman nyata.
Owais Lone
17

Anda dapat mengembangkan menggunakan HTML + Javascript untuk antarmuka dengan menggunakan bingkai WebKit yang tertanam di jendela Gtk (ini paling mudah dilakukan dengan Python). Bagian tersulit adalah berkomunikasi dengan sistem dari aplikasi HTML / Javascript Anda.

Anda dapat melakukan ini dengan mengirimkan pesan antara Javascript dan Python. Anda harus, bagaimanapun, harus menulis logika sistem sebagai fungsi Python tetapi ini cukup mudah dilakukan.

Berikut adalah contoh sederhana yang menunjukkan komunikasi antara Python dan Javascript. Dalam contoh tersebut, HTML / Javascript menampilkan tombol, yang ketika diklik mengirim array ["hello", "world"]ke Python yang menggabungkan array ke string "hello world" dan mengirimkannya kembali ke Javascript. Kode Python mencetak representasi array ke konsol dan kode Javascript memunculkan kotak peringatan yang menampilkan string.

contoh.py

import gtk
import webkit
import json
import os

JAVASCRIPT = """
var _callbacks = {};
function trigger (message, data) {
    if (typeof(_callbacks[message]) !== "undefined") {
        var i = 0;
        while (i < _callbacks[message].length) {
            _callbacks[message][i](data);
            i += 1;
        }
    }
}
function send (message, data) {
    document.title = ":";
    document.title = message + ":" + JSON.stringify(data);
}
function listen (message, callback) {
    if (typeof(_callbacks[message]) === "undefined") {
        _callbacks[message] = [callback];
    } else {
        _callbacks[message].push(callback);
    }
}
"""

class HTMLFrame(gtk.ScrolledWindow):
    def __init__(self):
        super(HTMLFrame, self).__init__()
        self._callbacks = {}
        self.show()
        self.webview = webkit.WebView()
        self.webview.show()
        self.add(self.webview)
        self.webview.connect('title-changed', self.on_title_changed)

    def open_url(self, url):
        self.webview.open(url);
        self.webview.execute_script(JAVASCRIPT)

    def open_path(self, path):
        self.open_url("file://" + os.path.abspath(path))

    def send(self, message, data):
        self.webview.execute_script(
            "trigger(%s, %s);" % (
                json.dumps(message),
                json.dumps(data)
            )
        )

    def listen(self, message, callback):
        if self._callbacks.has_key(message):
            self._callbacks[message].append(callback)
        else:
            self._callbacks[message] = [callback]

    def trigger(self, message, data, *a):
        if self._callbacks.has_key(message):
            for callback in self._callbacks[message]:
                callback(data)

    def on_title_changed(self, w, f, title):
        t = title.split(":")
        message = t[0]
        if not message == "":
            data = json.loads(":".join(t[1:]))
            self.trigger(message, data)

def output(data):
    print(repr(data))    

if __name__ == "__main__":
    window = gtk.Window()
    window.resize(800, 600)
    window.set_title("Python Gtk + WebKit App")
    frame = HTMLFrame()
    frame.open_path("page.html")
    def reply(data):
        frame.send("alert", " ".join(data))
    frame.listen("button-clicked", output)
    frame.listen("button-clicked", reply)
    window.add(frame)
    window.show_all()
    window.connect("destroy", gtk.main_quit)
    gtk.main()

page.html

<html>
<body>
<input type="button" value="button" id="button" />
<script>
document.getElementById("button").onclick = function () {
    send("button-clicked", ["hello", "world"]);
};
listen("alert", function (data) {alert(data);});
</script>
</body>
</html>

Satu-satunya kode python yang benar-benar perlu Anda perhatikan di sini adalah kode dari def output(data):hingga akhir file yang seharusnya cukup mudah dimengerti.

Untuk menjalankan ini pastikan python-webkitdan python-gtk2diinstal kemudian simpan file dalam folder yang sama dan jalankan:

python example.py

program dalam aksi

dv3500ea
sumber
1
Ini luar biasa
Francisco Presencia
5

Saya mengembangkan BAT , yang merupakan alat kecil untuk membangun aplikasi desktop dengan HTML, JS dan CSS.

Saya menulis artikel tentang itu di blog saya .

Contoh

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <style>
            body {
                font-family: Monaco, monospace;
                color: white;
                background: #3C3B38;
            }
            h1 { text-align: center; }
            p { text-align: justify; }
            button {
                padding: 10px 20px;
                -moz-border-radius: 4px 4px 4px 4px;
                -webkit-border-radius: 4px 4px 4px 4px;
                border-radius: 4px 4px 4px 4px;
                display: block;
                font-size: 14px;
                text-decoration: none;
                border: 1px solid #c0b7b0;
                cursor: pointer;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <h1>Hello World</h1>
        <p> Ipsum deserunt architecto necessitatibus quasi rerum dolorum obcaecati aut, doloremque laudantium nisi vel sint officia nobis. Nobis ad nemo voluptatum molestiae ad. Nisi ipsum deserunt a illo labore similique ad?  </p>
        <p> Ipsum veniam laborum libero animi quo dignissimos. Possimus quidem consequatur temporibus consequatur odio, quidem deleniti! Similique totam placeat sint assumenda nulla dolor. Voluptatibus quasi veritatis distinctio consectetur nobis. Nemo reprehenderit?  </p>
        <p> Ipsum molestiae nesciunt commodi sint et assumenda recusandae! Earum necessitatibus sequi nulla fugit architecto omnis. Maiores omnis repellat cupiditate iure corporis dolorem sed amet nesciunt. Mollitia sapiente sit repellendus ratione.  </p>
        <p> Consectetur architecto ratione voluptate provident quis. At maiores aliquam corporis sit nisi. Consectetur ab rem unde a corporis reiciendis ut dolorum, tempora, aut, minus. Sit adipisci recusandae doloremque quia vel!  </p>
        <button onclick="BAT.closeWindow()">Close</button>
    </body>
</html>

Dan kami menjalankannya seperti ini:

bat -d index.html -t "BAT Hello World" -s 800x500

Hasilnya adalah:

Ionică Bizău
sumber
4

Sejauh mengakses platform secara langsung, Anda harus memeriksa Seed .

Anda juga dapat melihat UserWebKit , pustaka Python3 yang menyediakan fungsionalitas utama yang digunakan oleh Novacut dan Dmedia UI (itu dibangun di atas UserCouch dan Microfiber , BTW).

Setelah banyak berpikir, saya memutuskan lebih menarik untuk tidak mengakses platform langsung dari JavaScript, karena dengan begitu Anda dapat secara opsional menjalankan UI di browser standar jika Anda mau. The arsitektur Novacut menggunakan CouchDB untuk menjaga UI dan backend server jaringan-transparan. Dalam kasus normal, satu komputer, server berjalan secara lokal di komputer itu. Tetapi Anda juga dapat menjalankan server (dan CouchDB) pada sistem lain, tanpa UI memperhatikan perbedaannya.

Jderose
sumber
3

Yah Anda bisa memasukkan bahasa yang dapat menjalankan perintah shell seperti php dan dengan cara ini mengambil keuntungan dari hal-hal seperti menginstal aplikasi dari halaman web dan menjalankan beberapa perintah (Seperti mendeteksi tema mana yang akan digunakan dan CSS apa yang akan digunakan tergantung pada tema sistem). Misalnya, Anda memiliki dua pertanyaan ini yang mungkin membantu:

Bisakah server menangani perintah shell secara simultan? (Yang berbicara tentang mengeksekusi banyak perintah)

Jalankan perintah baris dari web (Mengklik tautan halaman web) (Yang berbicara tentang mengklik tautan dan menginstal aplikasi dari pusat perangkat lunak)

Untuk cara mempelajari tema apa yang digunakan, Anda dapat mem-parsing file ubuntu di mana ia memiliki nilai untuk tema default dan tergantung padanya memodifikasi CSS situs untuk mencerminkan tema baru.

Pertanyaan tentang tema dan di mana menemukannya dapat ditemukan di sini:

File apa yang perlu saya edit untuk mengubah warna teks dalam suatu tema?

Desktop lupa tema?

Mengedit tema GTK (menambahkan perbatasan)

Semua ini (dan lebih banyak lagi jika Anda menggunakan pencarian) membantu Anda tahu di mana mencarinya ketika parsing dan file apa yang dapat Anda periksa untuk melihat tema apa yang digunakan sistem dan apa yang harus digunakan di halaman web.

Luis Alvarado
sumber
0

Sekarang kami memiliki AppJS - https://github.com/milani/appjs !

Seperti yang mereka katakan, " Menggunakan Chromium sebagai inti (sehingga API HTML5 terbaru didukung) dan Node.js sebagai tulang punggung. "

superqwerty
sumber