Come posso sviluppare un'applicazione Ubuntu in HTML e JS?

34

Sto sviluppando un'app e penso che HTML e JavaScript siano migliori per il futuro, ma non riesco a trovare alcun tutorial (ho bisogno dell'app per usare il tema del sistema).

Ci sono associazioni per Unity, menu messaggi e notifiche, couchdb e così via?

application-development  webapps  html5  webapp-development 
— mhall119
fonte
Potresti anche trovare interessante questa domanda simile: askubuntu.com/questions/97430/…
— David Planella,

Risposte:

24

Un buon punto di partenza per associazioni e API su Ubuntu è disponibile su developer.ubuntu.com . Non ho alcuna esperienza con esso, ma probabilmente vorrai anche esaminare Gjs, i collegamenti Javascript per GNOME.

A seconda di ciò che stai cercando di fare, potresti semplicemente creare l'app come qualsiasi app HTML + JS e poi lanciarla in una vista Webkit. È estremamente semplice da fare in 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
fonte
7
Anche JS è una vera programmazione.
— Owais Lone,
17

Puoi sviluppare usando HTML + Javascript per l'interfaccia usando un frame WebKit incorporato in una finestra Gtk (questo è più facile da fare in Python). La parte più difficile è comunicare con il sistema dall'applicazione HTML / Javascript.

Puoi farlo passando messaggi tra Javascript e Python. Dovrai, comunque, scrivere la logica di sistema come funziona Python ma questo è abbastanza facile da fare.

Ecco un semplice esempio che mostra la comunicazione tra Python e Javascript. Nell'esempio, HTML / Javascript visualizza un pulsante che, quando viene cliccato, invia un array ["hello", "world"]a Python che unisce l'array in una stringa "ciao mondo" e lo restituisce a Javascript. Il codice Python stampa una rappresentazione dell'array sulla console e il codice Javascript apre una finestra di avviso che visualizza la stringa.

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>

L'unico codice Python a cui devi davvero prestare attenzione qui è il codice dalla def output(data):fine del file che dovrebbe essere abbastanza facile da capire.

Per eseguire questo assicurarsi python-webkite python-gtk2sono installati quindi salvare i file nella stessa cartella ed eseguire:

python example.py

programma in azione

— dv3500ea
fonte
1
È fantastico
— Francisco Presencia,
5

Ho sviluppato BAT , che è un piccolo strumento per la creazione di applicazioni desktop con HTML, JS e CSS.

Ho scritto un articolo a riguardo sul mio blog .

Esempio

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>

E lo eseguiamo in questo modo:

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

Il risultato è:

— Ionică Bizău
fonte
4

Per quanto riguarda l'accesso diretto alla piattaforma, dovresti dare un'occhiata a Seed .

Potresti anche dare un'occhiata a UserWebKit , la libreria Python3 che fornisce le funzionalità chiave utilizzate dall'interfaccia utente di Novacut e Dmedia (costruita sopra UserCouch e Microfiber , BTW).

Dopo molte riflessioni, ho deciso che era più interessante non accedere alla piattaforma direttamente da JavaScript, perché se lo desideri puoi eventualmente eseguire l'interfaccia utente in un browser standard. L' architettura Novacut utilizza CouchDB per mantenere trasparenti l'interfaccia utente e i server back-end. Nel normale caso di un singolo computer, i server vengono eseguiti localmente su quel computer. Ma puoi anche eseguire i server (e CouchDB) su altri sistemi, senza che l'interfaccia utente noti la differenza.

— jderose
fonte
3

Bene, potresti includere un linguaggio in grado di eseguire comandi shell come php e in questo modo trarre vantaggio da cose come l'installazione di app da una pagina Web e l'esecuzione di alcuni comandi (come rilevare quale tema usare e quale CSS usare a seconda del tema del sistema). Ad esempio hai queste due domande che potrebbero aiutare:

Un server può gestire comandi shell simultanei? (Che parla dell'esecuzione di più comandi)

Esegui un comando di linea da un Web (facendo clic su un collegamento di una pagina Web) (che parla di fare clic su un collegamento e installare un'app dal centro software)

Per un modo per imparare quale tema viene utilizzato è possibile analizzare il file ubuntu in cui ha il valore per il tema predefinito e, a seconda di esso, modificare il CSS del sito per riflettere il nuovo tema.

Domande sul tema e su dove trovarlo sono disponibili qui:

Quale file devo modificare per cambiare il colore del testo in un tema?

Il desktop dimentica il tema?

Modifica tema GTK (aggiunta di un bordo)

Tutto questo (e altro se usi la ricerca) ti aiuta a sapere dove cercare durante l'analisi e quali file puoi controllare per vedere quale tema sta usando il sistema e cosa usare nella pagina web.

— Luis Alvarado
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.