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 __== "__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 la forme de Python fonctions, mais cela est assez facile à faire.
Voici un exemple simple montrant la communication entre Python et Javascript. Dans l'exemple, HTML/Javascript affiche un bouton qui envoie un tableau ["hello", "world"] à Python qui, une fois cliqué dessus, relie le tableau à 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 __== "__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
J'ai développé BAT , un outil minuscule permettant de créer des applications de bureau avec HTML, JS et CSS.
J'ai écrit un article à ce sujet 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:
En ce qui concerne l'accès direct à la plate-forme, vous devriez vérifier Seed .
Vous pouvez également jeter un oeil à UserWebKit , la bibliothèque Python3 qui fournit la fonctionnalité de clé utilisée par Novacut et Dmedia UI (construite sur le dessus ) UserCouch et Microfibre , BTW).
Après beaucoup de 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 environnement standard. navigateur si vous voulez. L'architecture de Novacut utilise CouchDB pour que l'interface utilisateur et les serveurs dorsaux restent transparents sur le réseau. 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.
Vous pouvez également inclure un langage capable d’exécuter des commandes Shell telles que php. Vous pouvez ainsi tirer parti de choses comme installer des applications à partir d’une page Web et exécuter certaines commandes (comme détecter le thème à utiliser et le CSS à utiliser en fonction du thème du système). Par exemple, vous avez deux questions qui pourraient vous aider:
n serveur peut-il gérer des commandes Shell simultanées? (Ce qui parle d'exécuter plusieurs commandes)
Exécuter une commande de ligne à partir d'un site Web (en cliquant sur un lien de page Web) (qui consiste à cliquer sur un lien et à 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 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?
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 en tant que noyau (pour que les dernières API HTML5 soient prises en charge) et Node.js en tant que réseau fédérateur. "