Wie entwickle ich eine Ubuntu-Anwendung in HTML und JS?

34

Ich entwickle eine App und denke, HTML und JavaScript sind besser für die Zukunft, aber ich kann keine Tutorials finden (ich benötige die App, um das Systemdesign zu verwenden).

Gibt es Bindungen für Unity, Nachrichtenmenü und Benachrichtigung, Couchdb und so weiter?

application-development  webapps  html5  webapp-development 
— mhall119
quelle
Diese ähnliche Frage könnte Sie auch interessieren: askubuntu.com/questions/97430/…
— David Planella

Antworten:

24

Ein guter Ausgangspunkt für Bindungen und APIs unter Ubuntu ist unter developer.ubuntu.com zu finden . Ich habe noch keine Erfahrung damit, aber Sie werden sich wahrscheinlich auch mit Gjs befassen wollen, den Javascript-Bindungen für GNOME.

Je nachdem, was Sie versuchen, können Sie die App einfach wie eine HTML + JS-App erstellen und dann in eine Webkit-Ansicht werfen. In Python ist das ganz einfach:

#!/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()
— undetwas
quelle
7
JS ist auch echte Programmierung.
— Owais Lone
17

Sie können mithilfe von HTML + Javascript für die Benutzeroberfläche mithilfe eines eingebetteten WebKit-Frames in einem Gtk-Fenster entwickeln (dies ist in Python am einfachsten). Der schwierigste Teil ist die Kommunikation mit dem System über Ihre HTML / Javascript-Anwendung.

Sie können dies tun, indem Sie Nachrichten zwischen Javascript und Python übertragen. Sie müssen jedoch die Systemlogik als Python-Funktionen schreiben, dies ist jedoch recht einfach.

Hier ist ein einfaches Beispiel für die Kommunikation zwischen Python und Javascript. In diesem Beispiel zeigt HTML / Javascript eine Schaltfläche an, die beim Klicken ein Array ["hello", "world"]an Python sendet , das das Array zu einer Zeichenfolge "Hallo Welt" zusammenfügt und es an Javascript zurücksendet. Der Python-Code gibt eine Darstellung des Arrays an die Konsole aus, und der Javascript-Code zeigt ein Warnfeld an, in dem die Zeichenfolge angezeigt wird.

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>

Der einzige Python-Code, auf den Sie hier wirklich achten müssen, ist der Code vom def output(data):Ende der Datei, der ziemlich einfach zu verstehen sein sollte.

So führen Sie sicher , dass diese Marke python-webkitund python-gtk2werden dann speichern Sie die Dateien im selben Ordner und führen Sie installiert haben :

python example.py

Programm in Aktion

— dv3500ea
quelle
1
Das ist großartig
— Francisco Presencia
5

Ich habe BAT entwickelt , ein kleines Tool zum Erstellen von Desktop-Anwendungen mit HTML, JS und CSS.

Ich habe einen Artikel darüber in meinem Blog geschrieben .

Beispiel

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>

Und wir machen es so:

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

Das Ergebnis ist:

— Ionică Bizău
quelle
4

Wenn Sie direkt auf die Plattform zugreifen möchten, sollten Sie Seed auschecken .

Sie können sich auch UserWebKit ansehen , die Python3-Bibliothek, die die wichtigsten Funktionen der Novacut- und Dmedia-Benutzeroberfläche (die auf UserCouch und Microfiber (BTW) basiert ) bereitstellt .

Nach langem Überlegen entschied ich, dass es interessanter ist, nicht direkt über JavaScript auf die Plattform zuzugreifen, da Sie die Benutzeroberfläche dann optional in einem Standardbrowser ausführen können, wenn Sie dies möchten. Die Novacut-Architektur verwendet CouchDB, um die Benutzeroberfläche und die Back-End- Server netzwerktransparent zu halten. Im normalen Fall eines einzelnen Computers werden die Server lokal auf diesem Computer ausgeführt. Sie können die Server (und CouchDB) aber auch auf anderen Systemen ausführen, ohne dass die Benutzeroberfläche den Unterschied bemerkt.

— jderose
quelle
3

Nun, Sie könnten eine Sprache einbinden, die Shell-Befehle wie PHP ausführen kann und auf diese Weise Dinge wie das Installieren von Apps von einer Webseite und das Ausführen einiger Befehle ausnutzt (wie das Ermitteln, welches Thema und welches CSS je nach Systemthema verwendet werden soll). Zum Beispiel haben Sie diese zwei Fragen, die helfen könnten:

Kann ein Server gleichzeitig Shell-Befehle verarbeiten?(Was spricht über die Ausführung mehrerer Befehle)

Führen Sie einen Zeilenbefehl aus einem Web aus (Klicken auf einen Webseitenlink) (Hier wird das Klicken auf einen Link und das Installieren einer App aus dem Software Center beschrieben).

Um zu erfahren, welches Thema verwendet wird, können Sie die Ubuntu-Datei analysieren, in der der Wert für das Standardthema angegeben ist, und das CSS der Site entsprechend dem neuen Thema ändern.

Fragen zum Thema und wo es zu finden ist, finden Sie hier:

Welche Datei muss ich bearbeiten, um die Textfarbe in einem Thema zu ändern?

Desktop vergisst Thema?

Bearbeiten des GTK-Themas (Hinzufügen eines Rahmens)

All dies (und mehr, wenn Sie die Suche verwenden) hilft Ihnen zu wissen, wo Sie beim Parsen suchen müssen und welche Dateien Sie überprüfen können, um zu sehen, welches Thema das System verwendet und was Sie dann auf der Webseite verwenden müssen.

— Luis Alvarado
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.