Làm cách nào để phát triển ứng dụng Ubuntu trong HTML và JS?


34

Tôi đang phát triển một ứng dụng và tôi nghĩ rằng HTML và JavaScript sẽ tốt hơn cho tương lai, nhưng tôi không thể tìm thấy bất kỳ hướng dẫn nào (tôi cần ứng dụng này để sử dụng chủ đề hệ thống).

Có các ràng buộc cho Unity, menu thông báo và thông báo, couchdb và như vậy không?


Bạn cũng có thể thấy câu hỏi tương tự này rất thú vị: Askubfox.com/questions/97430/ Khăn
David Planella

Câu trả lời:


24

Một điểm khởi đầu tốt cho các ràng buộc và API trên Ubuntu có thể được tìm thấy trên developer.ubfox.com . Tôi không có bất kỳ kinh nghiệm nào với nó, nhưng có lẽ bạn cũng sẽ muốn xem xét Gjs, các ràng buộc Javascript cho Gnome.

Tùy thuộc vào những gì bạn đang cố gắng thực hiện, bạn có thể xây dựng ứng dụng như bất kỳ ứng dụng HTML + JS nào và sau đó ném nó vào chế độ xem Webkit. Cách thực hiện cực kỳ đơn giản với trăn:

#!/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()

7
JS cũng là lập trình thực sự.
Owais Lone

17

Bạn có thể phát triển bằng HTML + Javascript cho giao diện bằng cách sử dụng khung WebKit được nhúng trong cửa sổ Gtk (điều này dễ thực hiện nhất trong Python). Phần khó nhất là giao tiếp với hệ thống từ ứng dụng HTML / Javascript của bạn.

Bạn có thể làm điều này bằng cách chuyển tin nhắn giữa Javascript và Python. Tuy nhiên, bạn sẽ phải viết logic hệ thống dưới dạng các hàm Python nhưng điều này khá dễ thực hiện.

Đây là một ví dụ đơn giản cho thấy giao tiếp giữa Python và Javascript. Trong ví dụ, HTML / Javascript hiển thị một nút, khi được nhấp sẽ gửi một mảng ["hello", "world"]tới Python nối chuỗi đó thành một chuỗi "hello world" và gửi lại cho Javascript. Mã Python in một đại diện của mảng cho bàn điều khiển và mã Javascript bật lên một hộp cảnh báo hiển thị chuỗi.

example.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()

trang.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>     

Mã python duy nhất bạn thực sự cần chú ý ở đây là mã từ def output(data):đến cuối tệp nên khá dễ hiểu.

Để chạy, đảm bảo python-webkitpython-gtk2được cài đặt, sau đó lưu các tệp trong cùng một thư mục và chạy:

python example.py

chương trình đang hoạt động


1
Điều này thật tuyệt vời
Francisco Presencia

5

Tôi đã phát triển BAT , một công cụ nhỏ để xây dựng các ứng dụng máy tính để bàn với HTML, JS và CSS.


Tôi đã viết một bài viết về nó trên blog của tôi .

Thí dụ

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>

Và, chúng tôi chạy nó theo cách này:

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

Kết quả là:


4

Khi truy cập trực tiếp vào nền tảng, bạn nên kiểm tra Seed .

Bạn cũng có thể xem UserWebKit , thư viện Python3 cung cấp chức năng chính được sử dụng bởi Novacut và Dmedia UI (được xây dựng trên đỉnh UserCouchMicrofiber , BTW).

Sau rất nhiều suy nghĩ, tôi quyết định sẽ thú vị hơn khi không truy cập trực tiếp vào nền tảng từ JavaScript, vì sau đó bạn có thể tùy chọn chạy UI trong trình duyệt tiêu chuẩn nếu muốn. Các kiến trúc Novacut sử dụng CouchDB để giữ cho giao diện người dùng và backend server mạng trong suốt. Trong trường hợp máy tính đơn, bình thường, các máy chủ chạy cục bộ trên máy tính đó. Nhưng bạn cũng có thể chạy các máy chủ (và CouchDB) trên các hệ thống khác mà không cần UI nhận thấy sự khác biệt.


3

Vâng, bạn có thể bao gồm một ngôn ngữ có thể chạy các lệnh shell như php và cách này tận dụng các công cụ như cài đặt ứng dụng từ trang web và thực thi một số lệnh (Giống như phát hiện chủ đề nào sẽ sử dụng và sử dụng CSS nào tùy thuộc vào chủ đề hệ thống). Ví dụ: bạn có hai câu hỏi này có thể giúp:

Một máy chủ có thể xử lý các lệnh shell đồng thời? (Nói về việc thực thi nhiều lệnh)

Chạy lệnh dòng từ web (Nhấp vào liên kết trang web) (Nói về nhấp vào liên kết và cài đặt ứng dụng từ trung tâm phần mềm)

Để tìm hiểu chủ đề nào được sử dụng, bạn có thể phân tích tệp ubfox nơi nó có giá trị cho chủ đề mặc định và tùy thuộc vào nó sửa đổi CSS của trang web để phản ánh chủ đề mới.

Các câu hỏi về chủ đề và nơi để tìm thấy nó có thể được tìm thấy ở đây:

Tập tin nào tôi cần chỉnh sửa để thay đổi màu văn bản trong một chủ đề?

Máy tính để bàn quên chủ đề?

Chỉnh sửa chủ đề GTK (thêm đường viền)

Tất cả điều này (và hơn thế nữa nếu bạn sử dụng tìm kiếm) giúp bạn biết nơi cần tìm khi phân tích cú pháp và những tập tin nào bạn có thể kiểm tra để xem hệ thống đang sử dụng chủ đề gì và sử dụng cái gì trong trang web.



Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.