Comment puis-je développer une application Ubuntu en HTML et JS ?

Un bon point de départ pour les bindings et les APIs sur Ubuntu peut être trouvé sur developer.ubuntu.com. Je n'ai aucune expérience avec cela, mais vous voudrez probablement également examiner Gjs, les bindings Javascript pour GNOME.

En fonction de ce que vous essayez de faire, vous pourriez simplement construire l'application comme n'importe quelle application HTML + JS, puis la jeter dans une vue Webkit. C'est extrêmement simple à faire en 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("Hello World!", "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()

Vous pouvez développer en utilisant HTML + Javascript pour l'interface en utilisant un cadre WebKit intégré dans une fenêtre Gtk (c'est le plus simple à faire en Python). La partie la plus difficile est de communiquer avec le système depuis votre application HTML/Javascript.

Vous pouvez le faire en envoyant des messages entre Javascript et Python. Vous devrez cependant écrire la logique du système en tant que fonctions Python mais c'est assez facile à faire.

Voici un exemple simple montrant la communication entre Python et Javascript. Dans l'exemple, le HTML/Javascript affiche un bouton qui, lorsqu'il est cliqué, envoie un tableau ["hello", "world"] à Python qui joint le tableau en une chaîne "hello world" et l'envoie de nouveau à Javascript. Le code Python affiche une représentation du tableau dans la console et le code Javascript affiche une boîte d'alerte avec la chaîne.

exemple.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("Application Python Gtk + WebKit")
    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

document.getElementById("button").onclick = function () {
    send("button-clicked", ["hello", "world"]);
};
listen("alert", function (data) {alert(data);});

Le seul code Python sur lequel vous devez vraiment vous concentrer ici est le code de def output(data): jusqu'à la fin du fichier, ce qui devrait être assez facile à comprendre.

Pour exécuter ceci, assurez-vous que python-webkit et python-gtk2 sont installés, puis enregistrez les fichiers dans le même dossier et exécutez :

python exemple.py

J'ai développé BAT, qui est un petit outil pour créer des applications de bureau avec HTML, JS et CSS.

J'ai écrit un article à ce sujet sur mon blog.

• Installation
• BAT JavaScript API
• Exemples

Exemple

index.html

            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%;
            }

        Bonjour le monde
         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?  
         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?  
         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.  
         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!  
        Fermer

Et, nous l'exécutons de cette manière :

bat -d index.html -t "BAT Bonjour le monde" -s 800x500

Le résultat est :

En ce qui concerne l'accès direct à la plateforme, vous devriez consulter Seed.

Vous pouvez également jeter un coup d'œil à UserWebKit, la bibliothèque Python3 qui fournit les fonctionnalités clés utilisées par Novacut et l'interface utilisateur Dmedia (elle est construite au-dessus de UserCouch et Microfiber, au fait).

Après avoir beaucoup réfléchi, j'ai décidé qu'il était plus intéressant de ne pas accéder directement à la plateforme depuis JavaScript, car vous pouvez ensuite exécuter facultativement l'interface utilisateur dans un navigateur standard si vous le souhaitez. L'architecture Novacut utilise CouchDB pour rendre l'interface utilisateur et les serveurs backend transparents au réseau. Dans le cas normal d'un seul ordinateur, les serveurs s'exécutent localement sur cet ordinateur. Mais vous pouvez également exécuter les serveurs (et CouchDB) sur d'autres systèmes, sans que l'interface utilisateur ne remarque la différence.

Eh bien, vous pourriez inclure un langage capable d'exécuter des commandes shell comme php et ainsi profiter de choses comme installer des applications à partir d'une page web et exécuter certaines commandes (comme détecter quel thème utiliser et quel CSS utiliser en fonction du thème du système). Par exemple, ces deux questions pourraient vous aider :

Un serveur peut-il gérer des commandes shell simultanées? (qui parle de l'exécution de plusieurs commandes)

Exécuter une commande en ligne à partir d'un site web (en cliquant sur un lien) (qui parle du clic sur un lien et de l'installation d'une application depuis le centre de logiciels)

Pour apprendre quel thème est utilisé, vous pourriez analyser le fichier ubuntu où se trouve la valeur du thème par défaut et, en fonction de cela, modifier le CSS du site pour refléter le nouveau thème.

Des questions sur les thèmes et où les trouver peuvent être trouvées ici :

Quel fichier dois-je modifier pour changer la couleur du texte dans un thème?

Le bureau oublie le thème?

Modification du thème GTK (ajout d'une bordure)

Tout cela (et plus si vous utilisez la recherche) vous aide à savoir où chercher lors de l'analyse et quels fichiers vous pouvez vérifier pour voir le thème utilisé par le système et quoi utiliser ensuite dans la page web.