Jak opracować aplikację Ubuntu w HTML i JS?

Tworzę aplikację i myślę, że HTML i JavaScript są lepsze na przyszłość, ale nie mogę znaleźć żadnych samouczków (potrzebuję aplikacji do korzystania z motywu systemowego).

Czy istnieją powiązania dla Unity, menu wiadomości i powiadomień, couchdb i tak dalej?

Dobry punkt wyjścia dla powiązań i interfejsów API w systemie Ubuntu można znaleźć na stronie developer.ubuntu.com . Nie mam z tym żadnego doświadczenia, ale prawdopodobnie będziesz także chciał zajrzeć do Gjs, powiązań JavaScript dla GNOME.

W zależności od tego, co próbujesz zrobić, możesz po prostu zbudować aplikację jak każdą aplikację HTML + JS, a następnie wrzucić ją do widoku Webkit. W Pythonie jest to bardzo proste:

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

Możesz rozwijać przy użyciu HTML + JavaScript dla interfejsu, używając osadzonej ramki WebKit w oknie Gtk (najłatwiej to zrobić w Pythonie). Najtrudniejsza część to komunikacja z systemem z aplikacji HTML / JavaScript.

Możesz to zrobić, przesyłając wiadomości między Javascriptem a Pythonem. Będziesz jednak musiał napisać logikę systemową jako funkcje Pythona, ale jest to dość łatwe do zrobienia.

Oto prosty przykład pokazujący komunikację między Pythonem a Javascriptem. W tym przykładzie HTML / JavaScript wyświetla przycisk, który po kliknięciu wysyła tablicę ["hello", "world"]do Pythona, który łączy tablicę w ciąg „hello world” i odsyła ją z powrotem do Javascript. Kod Python drukuje reprezentację tablicy w konsoli, a kod JavaScript wyskakuje z ostrzeżeniem wyświetlającym ciąg.

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

Jedynym kodem w Pythonie, na który naprawdę należy zwrócić uwagę, jest kod od def output(data):końca pliku, który powinien być dość łatwy do zrozumienia.

Aby uruchomić to upewnij się, python-webkita python-gtk2zainstalowane są następnie zapisać pliki w tym samym folderze i uruchomić:

python example.py

Opracowałem BAT , które jest małym narzędziem do budowania aplikacji komputerowych w HTML, JS i CSS.

Napisałem o tym artykuł na moim blogu .

• Instalacja
• BAT JavaScript API
• Przykłady

Przykład

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>

I działamy w ten sposób:

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

Wynik to:

Jeśli chodzi o bezpośredni dostęp do platformy, powinieneś sprawdzić Seed .

Możesz także spojrzeć na UserWebKit , bibliotekę Python3, która zapewnia kluczowe funkcje używane przez interfejs Novacut i Dmedia (jest zbudowany na UserCouch i Microfiber , BTW).

Po wielu przemyśleniach zdecydowałem, że ciekawiej jest nie uzyskiwać dostępu do platformy bezpośrednio z JavaScript, ponieważ wtedy możesz opcjonalnie uruchomić interfejs użytkownika w standardowej przeglądarce. Novacut architektura wykorzystuje CouchDB utrzymać serwery UI i backend sieci przejrzyste. W normalnym przypadku z jednym komputerem serwery działają lokalnie na tym komputerze. Ale możesz również uruchomić serwery (i CouchDB) na innych systemach, bez zauważenia różnicy przez interfejs użytkownika.

Cóż, możesz dołączyć język, który może uruchamiać polecenia powłoki, takie jak php, i w ten sposób korzystać z takich rzeczy, jak instalowanie aplikacji ze strony internetowej i wykonywanie niektórych poleceń (np. Wykrywanie używanego motywu i używanego CSS w zależności od motywu systemowego). Na przykład masz dwa pytania, które mogą pomóc:

Czy serwer może obsługiwać jednoczesne polecenia powłoki? (Co mówi o wykonywaniu wielu poleceń)

Uruchom polecenie liniowe z Internetu (Kliknięcie linku na stronie internetowej) (Mówi o kliknięciu linku i zainstalowaniu aplikacji z centrum oprogramowania)

Aby dowiedzieć się, jaki motyw jest używany, można przeanalizować plik ubuntu, w którym ma on wartość domyślnego motywu, i w zależności od niego zmodyfikować CSS witryny, aby odzwierciedlić nowy motyw.

Pytania na temat tematu i gdzie go znaleźć można znaleźć tutaj:

Jaki plik muszę edytować, aby zmienić kolor tekstu w motywie?

Desktop zapomina motywu?

Edycja motywu GTK (dodawanie ramki)

Wszystko to (i więcej, jeśli korzystasz z wyszukiwania) pomaga Ci wiedzieć, gdzie szukać podczas analizowania i jakie pliki możesz sprawdzić, aby zobaczyć, jakiego motywu używa system i czego następnie użyć na stronie internetowej.

Tak, możesz pisać aplikacje w czystym html / css / js, a powiązanie tak jest dostępne dla JS przy użyciu introspekcji GObject. Spójrz na GnomeSeed https://live.gnome.org/Seed

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

Samouczek: https://live.gnome.org/Seed/Tutorial

Teraz mamy AppJS - https://github.com/milani/appjs !

Jak powiedzieli: „ Używa Chromium jako rdzenia (dzięki czemu obsługiwane są najnowsze interfejsy API HTML5) i Node.js jako szkielet ”.