¿Cómo desarrollo una aplicación Ubuntu en HTML y JS?

34

Estoy desarrollando una aplicación y creo que HTML y JavaScript son mejores para el futuro, pero no puedo encontrar ningún tutorial (necesito que la aplicación use el tema del sistema).

¿Hay enlaces para Unity, menú de mensajes y notificaciones, couchdb, etc.?

application-development  webapps  html5  webapp-development 
— mhall119
fuente
También puede encontrar interesante esta pregunta similar: askubuntu.com/questions/97430/…
— David Planella

Respuestas:

24

Un buen punto de partida para enlaces y API en Ubuntu se puede encontrar en developer.ubuntu.com . No tengo ninguna experiencia con él, pero es probable que también desee ver Gjs, los enlaces de Javascript para GNOME.

Dependiendo de lo que esté tratando de hacer, puede compilar la aplicación como cualquier aplicación HTML + JS y luego lanzarla a una vista de Webkit. Es extremadamente simple de hacer 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()
— andrewsomething
fuente
77
JS es real la programación también.
— Owais Lone
17

Usted puede desarrollar utilizando HTML + Javascript para la interfaz mediante el uso de un marco de WebKit incrustado en una ventana GTK (esto es más fácil de hacer en Python). La parte más difícil es la comunicación con el sistema de su aplicación HTML / Javascript.

Usted puede hacer esto mediante el paso de mensajes entre Javascript y Python. Usted, sin embargo, tiene que escribir la lógica del sistema como las funciones de Python, pero esto es bastante fácil de hacer.

Aquí hay un ejemplo simple que muestra la comunicación entre Python y Javascript. En el ejemplo, HTML / Javascript muestra un botón que, cuando se hace clic, envía una matriz ["hello", "world"]a Python que une la matriz en una cadena "hello world" y la envía de vuelta a Javascript. El código Python imprime una representación de la matriz en la consola y el código Javascript muestra un cuadro de alerta que muestra la cadena.

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

El único código de Python al que realmente debe prestar atención aquí es el código desde def output(data):el final del archivo que debería ser bastante fácil de entender.

Para ejecutar esto, debe asegurarse python-webkity python-gtk2se instalan a continuación, guardar los archivos en la misma carpeta y ejecutar:

python example.py

programa en acción

— dv3500ea
fuente
1
Esto es increíble
— Francisco Presencia
5

Desarrollé BAT , que es una pequeña herramienta para crear aplicaciones de escritorio con HTML, JS y CSS.

Escribí un artículo al respecto en mi blog .

Ejemplo

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>

Y lo ejecutamos de esta manera:

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

El resultado es:

— Ionică Bizău
fuente
4

En cuanto a acceder a la plataforma directamente, debe consultar Seed .

También puede echar un vistazo a UserWebKit , la biblioteca Python3 que proporciona la funcionalidad clave utilizada por la interfaz de usuario Novacut y Dmedia (está construida sobre UserCouch y Microfiber , BTW).

Después de pensarlo mucho, decidí que era más interesante no acceder a la plataforma directamente desde JavaScript, porque si lo desea, puede ejecutar la interfaz de usuario en un navegador estándar. La arquitectura Novacut utiliza CouchDB para mantener la interfaz de usuario y los servidores de fondo transparentes en la red. En el caso normal de una sola computadora, los servidores se ejecutan localmente en esa computadora. Pero también puede ejecutar los servidores (y CouchDB) en otros sistemas, sin que la UI note la diferencia.

— jderose
fuente
3

Bueno, podría incluir un lenguaje que pueda ejecutar comandos de shell como php y de esta manera aprovechar cosas como instalar aplicaciones desde una página web y ejecutar algunos comandos (como detectar qué tema usar y qué CSS usar según el tema del sistema). Por ejemplo, tiene estas dos preguntas que podrían ayudar:

¿Puede un servidor manejar comandos de shell simultáneos? (Que habla de ejecutar múltiples comandos)

Ejecute un comando de línea desde una web ( haciendo clic en un enlace de página web) (que habla de hacer clic en un enlace e instalar una aplicación desde el centro de software)

Para saber qué tema se usa, puede analizar el archivo ubuntu donde tiene el valor para el tema predeterminado y, en función de ello, modificar el CSS del sitio para reflejar el nuevo tema.

Las preguntas sobre el tema y dónde encontrarlo se pueden encontrar aquí:

¿Qué archivo necesito editar para cambiar el color del texto en un tema?

¿El escritorio olvida el tema?

Edición del tema GTK (agregar un borde)

Todo esto (y más si usa la búsqueda) lo ayuda a saber dónde buscar al analizar y qué archivos puede verificar para ver qué tema está usando el sistema y qué usar en la página web.

— Luis Alvarado
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.