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

Je développe une application et je pense que HTML et JavaScript sont meilleurs pour l'avenir, mais je ne trouve aucun tutoriel (j'ai besoin de l'application pour utiliser le thème du système).

Existe-t-il des liaisons pour Unity, menu de message et notification, couchdb, etc.?

Un bon point de départ pour les liaisons et les API sur Ubuntu se trouve sur developer.ubuntu.com . Je n'ai aucune expérience avec cela, mais vous voudrez probablement aussi vous pencher sur Gjs, les liaisons Javascript pour GNOME.

Selon ce que vous essayez de faire, vous pouvez 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("<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()

Vous pouvez développer en utilisant HTML + Javascript pour l'interface en utilisant un cadre WebKit incorporé dans une fenêtre Gtk (c'est plus facile à faire en Python). Le plus difficile est de communiquer avec le système à partir de votre application HTML / Javascript.

Vous pouvez le faire en passant des messages entre Javascript et Python. Cependant, vous devrez écrire la logique système sous forme de fonctions Python, mais cela est assez facile à faire.

Voici un exemple simple montrant la communication entre Python et Javascript. Dans l'exemple, le code HTML / Javascript affiche un bouton qui envoie un tableau ["hello", "world"]à Python, qui le joint au sein d'une chaîne "hello world" et le renvoie à Javascript. Le code Python imprime une représentation du tableau sur la console et le code Javascript ouvre une boîte d’alerte qui affiche 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("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>     

Le seul code python def output(data):auquel vous devez vraiment faire attention ici est le code de la fin du fichier qui devrait être assez facile à comprendre.

Pour l'exécuter, assurez-vous que python-webkitet python-gtk2sont installés, puis enregistrez les fichiers dans le même dossier et exécutez:

python example.py

J'ai développé BAT , qui est un outil minuscule pour la création d'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

<!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>

Et nous le courons de cette façon:

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

Le résultat est:

En ce qui concerne l'accès à la plate-forme directement, vous devriez vérifier Seed .

Vous pouvez également jeter un œil à UserWebKit , la bibliothèque Python3 qui fournit les fonctionnalités clés utilisées par Novacut et Dmedia UI (construite sur UserCouch et Microfiber , BTW).

Après mûre réflexion, j'ai décidé qu'il était plus intéressant de ne pas accéder à la plate-forme directement à partir de JavaScript, car vous pouvez éventuellement exécuter l'interface utilisateur dans un navigateur standard si vous le souhaitez. L' architecture Novacut utilise CouchDB pour que l'interface utilisateur et les serveurs principaux soient transparents. Dans le cas normal d'ordinateur unique, 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.

Vous pouvez également inclure un langage capable d’exécuter des commandes shell telles que php, ce qui vous permet d’utiliser des applications telles que l’installation d’applications à partir d’une page Web et l’exécution de certaines commandes (comme détecter le thème à utiliser et le code CSS à utiliser en fonction du thème du système). Par exemple, vous avez deux questions qui pourraient vous aider:

Un serveur peut-il gérer des commandes shell simultanées? (Ce qui parle d'exécuter plusieurs commandes)

Exécutez une commande de ligne à partir d'un site Web (en cliquant sur un lien de page Web) (qui parle de cliquer sur un lien et d'installer une application à partir du centre de logiciel)

Pour savoir quel thème est utilisé, vous pouvez analyser le fichier ubuntu où il a la valeur du thème par défaut et, en fonction de celui-ci, modifier le CSS du site pour refléter le nouveau thème.

Les questions sur le thème et où le trouver peuvent être trouvées ici:

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

Desktop oublie le thème?

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

Tout cela (et plus encore si vous utilisez la recherche) vous aide à savoir où chercher lors de l'analyse syntaxique et quels fichiers vous pouvez vérifier pour voir quel thème le système utilise et ce qu'il faut utiliser dans la page Web.

Oui, vous pouvez écrire des applications en html / css / js et des liaisons sont disponibles pour JS en utilisant l'introspection GObject. Jetez un coup d’œil à GnomeSeed https://live.gnome.org/Seed

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

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

Nous avons maintenant AppJS - https://github.com/milani/appjs !

Comme ils l'ont dit, " Il utilise Chromium comme base (pour que les dernières API HTML5 soient prises en charge) et Node.js comme colonne vertébrale. "