Як розробити додаток Ubuntu в HTML та JS?

Я розробляю додаток, і я думаю, що HTML і JavaScript краще для майбутнього, але я не можу знайти жодних навчальних посібників (мені потрібен додаток, щоб використовувати тему системи).

Чи є прив'язки для Unity, меню повідомлень та сповіщень, couchdb тощо?

Хороший вихідний пункт для прив’язки та API на Ubuntu можна знайти на developer.ubuntu.com . Я не маю жодного досвіду з цим, але ви, ймовірно, також захочете заглянути в Gjs, прив'язки Javascript для GNOME.

Залежно від того, що ви намагаєтеся зробити, ви можете просто створити додаток, як будь-який додаток HTML + JS, а потім перекинути його у подання Webkit. Це зробити надзвичайно просто в 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()

Ви можете розвиватись за допомогою HTML + Javascript для інтерфейсу, використовуючи вбудований кадр WebKit у вікні Gtk (це найпростіше зробити в Python). Найважче - це спілкування з системою з вашого додатку HTML / Javascript.

Це можна зробити, передаючи повідомлення між Javascript та Python. Однак вам доведеться записати системну логіку як функції Python, але це зробити досить просто.

Ось простий приклад показує зв'язок між Python та Javascript. У прикладі HTML / Javascript відображає кнопку, яка при натисканні на неї надсилає масив ["hello", "world"]Python, який приєднує масив до рядка "привіт світ" і повертає його назад у Javascript. Код Python друкує представлення масиву на консолі, і в коді Javascript з'являється вікно попередження, яке відображає рядок.

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

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>     

Єдиний код python, на який вам дійсно потрібно звернути увагу, - це код з def output(data):кінця файлу, який повинен бути досить зрозумілим.

Для запуску цього переконайтеся , що python-webkitі python-gtk2встановлені потім збережіть файли в тій же папці і запустити:

python example.py

Я розробив BAT , який є крихітним інструментом для створення настільних додатків з HTML, JS та CSS.

Я написав статтю про це у своєму блозі .

• Установка
• API BAT JavaScript
• Приклади

Приклад

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>

І ми виконуємо це так:

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

Результат:

Що стосується прямого доступу до платформи, вам слід перевірити насіння .

Ви також можете поглянути на UserWebKit , бібліотеку Python3, яка забезпечує ключові функціональні можливості, що використовуються інтерфейсом Novacut та Dmedia (він побудований поверх UserCouch та Microfiber , BTW).

Подумавши, я вирішив, що цікавіше не отримувати доступ до платформи безпосередньо з JavaScript, тому що тоді ви можете за бажанням запустити інтерфейс користувача у звичайному браузері. Архітектура Novacut використовує CouchDB для забезпечення прозорості мережевого інтерфейсу та сервера сервера. У звичайному випадку для одного комп'ютера сервери працюють локально на цьому комп’ютері. Але ви також можете запускати сервери (і CouchDB) в інших системах, не помічаючи різниці в інтерфейсі.

Добре, ви можете включити мову, яка може запускати команди оболонки, такі як php, і таким чином скористайтеся такими можливостями, як встановлення програм із веб-сторінки та виконання деяких команд (як виявлення, яку тему використовувати та який CSS використовувати в залежності від теми системи). Наприклад, у вас є ці два питання, які можуть допомогти:

Чи може сервер обробляти одночасно команди оболонки? (Що говорить про виконання декількох команд)

Запустіть лінійну команду з Інтернету (Клацання посилання на веб-сторінці) (В якому йдеться про натискання на посилання та встановлення програми з програмного центру)

Щоб дізнатися, яка тема використовується, ви можете проаналізувати файл ubuntu, де він має значення для теми за замовчуванням, і залежно від нього змінити CSS сайту, щоб відобразити нову тему.

Питання щодо теми та де її можна знайти тут:

Який файл потрібно редагувати, щоб змінити колір тексту в темі?

Тема робочого столу забуває?

Редагування теми GTK (додавання рамки)

Все це (і більше, якщо ви користуєтесь пошуком) допоможе вам знати, де шукати під час розбору та які файли ви можете перевірити, щоб побачити, яку тему використовує система і що потім використовувати на веб-сторінці.

Так, ви можете писати програми в чистому html / css / js, і так, прив'язка доступна для JS за допомогою інтроспекції GObject. Погляньте на GnomeSeed https://live.gnome.org/Seed

SeedKit: https://live.gnome.org/SeedKit

Підручник: https://live.gnome.org/Seed/Tutorial

Тепер у нас є AppJS - https://github.com/milani/appjs !

Як вони сказали, " Він використовує Chromium в якості основного (так що підтримуються найновіші API API HTML5) і Node.js як основу ".