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

33

Je suis en train de développer 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, un menu de message et une notification, couchdb, etc.?

    
posée mhall119 28.08.2011 - 18:00
la source

7 réponses

24

Vous trouverez un bon point de départ pour les liaisons et les API sur Ubuntu à l'adresse developer.ubuntu.com . Je n'ai aucune expérience de ce logiciel, mais vous voudrez probablement également vous pencher sur Gjs, la liaison Javascript pour GNOME.

Selon ce que vous essayez de faire, vous pouvez simplement créer l’application comme n'importe quelle application HTML + JS, puis la lancer 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()
    
réponse donnée andrewsomething 28.08.2011 - 19:32
la source
17

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 illustrant la communication entre Python et Javascript. Dans l'exemple, HTML / Javascript affiche un bouton qui envoie un tableau ["hello", "world"] à Python lorsque ce dernier est cliqué, ce qui le relie à 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 auquel vous devez vraiment faire attention ici est le code de def output(data): à la fin du fichier, ce qui devrait être assez facile à comprendre.

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

python example.py

    
réponse donnée dv3500ea 28.08.2011 - 22:30
la source
5

J'ai développé la BAT , un outil minuscule permettant de créer des applications de bureau avec HTML, JS et CSS.

>/a>

J'aiécritun article sur mon blog .

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:

    
réponse donnée Ionică Bizău 17.01.2015 - 22:00
la source
4

En ce qui concerne l'accès direct à la plate-forme, vous devez consulter Seed .

Vous pouvez également consulter UserWebKit , la bibliothèque Python3 qui fournit les fonctionnalités clés utilisées par Novacut et Dmedia UI atop UserCouch et Microfibre ,

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. La architecture Novacut utilise CouchDB pour préserver la transparence du réseau de l'interface utilisateur et des serveurs dorsaux. Dans le cas normal d'un 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.

    
réponse donnée jderose 17.05.2012 - 21:00
la source
3

Eh bien, vous pouvez inclure un langage capable d’exécuter des commandes shell comme php, ce qui vous permet de tirer parti de tâches 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 CSS à utiliser en fonction du thème système ). Par exemple, vous avez deux questions qui pourraient vous aider:

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

Exécuter une commande de ligne à partir de 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 code CSS du site afin de refléter le nouveau thème.

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

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

thème Desktop forgets?

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

Tout cela (et plus encore si vous utilisez la recherche) vous permet de 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, puis.

    
réponse donnée Luis Alvarado 28.08.2011 - 18:43
la source
2

Oui, vous pouvez écrire des applications au format html / css / js et des liaisons sont disponibles pour JS en utilisant l'introspection GObject. Consultez le lien de GnomeSeed

.

SeedKit: lien

Didacticiel: lien

    
réponse donnée Owais Lone 28.08.2011 - 21:38
la source
0

Nous avons maintenant AppJS - link !

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

    
réponse donnée superqwerty 13.03.2014 - 00:18
la source

Lire d'autres questions sur les étiquettes