Como desenvolvo uma aplicação Ubuntu em HTML e JS?

34

Estou desenvolvendo um aplicativo e acho que HTML e JavaScript são melhores para o futuro, mas não consigo encontrar nenhum tutorial (preciso que o aplicativo use o tema do sistema).

Existem ligações para o Unity, o menu de mensagens e notificações, o couchdb e assim por diante?

    
por mhall119 28.08.2011 / 18:00

7 respostas

24

Um bom ponto de partida para ligações e APIs no Ubuntu pode ser encontrado em developer.ubuntu.com . Eu não tenho nenhuma experiência com isso, mas você provavelmente também vai querer olhar para Gjs, as ligações do Javascript para o GNOME.

Dependendo do que você está tentando fazer, você pode simplesmente criar o aplicativo como qualquer aplicativo HTML + JS e depois lançá-lo em uma visualização do Webkit. É extremamente simples de fazer em 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()
    
por andrewsomething 28.08.2011 / 19:32
17

Você pode desenvolver usando HTML + Javascript para a interface usando um quadro incorporado do WebKit em uma janela Gtk (isso é mais fácil de fazer em Python). A parte mais difícil é comunicar com o sistema a partir da sua aplicação HTML / Javascript.

Você pode fazer isso passando mensagens entre o Javascript e o Python. Você terá, no entanto, que escrever a lógica do sistema como funções do Python, mas isso é muito fácil de fazer.

Aqui está um exemplo simples mostrando a comunicação entre Python e Javascript. No exemplo, o HTML / Javascript exibe um botão que, quando clicado, envia uma matriz ["hello", "world"] para o Python, que une a matriz em uma string "hello world" e a envia de volta para o Javascript. O código Python imprime uma representação da matriz no console e o código JavaScript exibe uma caixa de alerta que exibe a string.

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

O único código python que você realmente precisa prestar atenção aqui é o código de def output(data): até o final do arquivo, que deve ser bem fácil de entender.

Para executar isso, certifique-se de que python-webkit e python-gtk2 estejam instalados, salve os arquivos na mesma pasta e execute:

python example.py

    
por dv3500ea 28.08.2011 / 22:30
5

Desenvolvi o BAT , que é uma pequena ferramenta para criar aplicativos de desktop com HTML, JS e CSS.

Euescreviumartigosobre sobre isso no meu blog .

Exemplo

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>

E corremos desta forma:

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

O resultado é:

    
por Ionică Bizău 17.01.2015 / 22:00
4

No que diz respeito ao acesso direto à plataforma, verifique a Semente .

Você também pode dar uma olhada em UserWebKit , a biblioteca Python3 que fornece a funcionalidade principal usada pela UI do Novacut e do Dmedia (ela é construída no topo UserCouch e Microfiber , BTW).

Depois de pensar muito, decidi que era mais interessante não acessar a plataforma diretamente do JavaScript, porque você pode, opcionalmente, executar a interface do usuário em um navegador padrão, se quiser. A arquitetura Novacut usa o CouchDB para manter a interface do usuário e os servidores de back-end transparentes. No caso normal de um único computador, os servidores são executados localmente nesse computador. Mas você também pode executar os servidores (e o CouchDB) em outros sistemas, sem que a interface do usuário perceba a diferença.

    
por jderose 17.05.2012 / 21:00
3

Bem, você poderia incluir uma linguagem que pode executar comandos shell como php e desta forma tirar proveito de coisas como instalar aplicativos de uma página da Web e executar alguns comandos (Como detectar qual tema usar e qual CSS usar dependendo do tema do sistema ). Por exemplo, você tem essas duas perguntas que podem ajudar:

Um servidor pode manipular comandos shell simultâneos? (Que fala sobre a execução de vários comandos)

Execute um comando de linha a partir de uma web (clicando em um link de página da web) (que fala sobre clicar em um link e instalar um aplicativo do centro de software)

Para uma maneira de aprender qual tema é usado, você pode analisar o arquivo ubuntu onde ele tem o valor para o tema padrão e, dependendo dele, modificar o CSS do site para refletir o novo tema.

Perguntas sobre o tema e onde encontrá-lo podem ser encontradas aqui:

O que arquivo que eu preciso editar para alterar a cor do texto em um tema?

O Desktop esquece o tema?

Editando o tema GTK (adicionando uma borda)

Tudo isso (e mais, se você usar a pesquisa) ajuda a saber onde procurar ao analisar e quais arquivos você pode verificar para ver qual tema o sistema está usando e o que usar na página da web.

    
por Luis Alvarado 28.08.2011 / 18:43
2

Sim, você pode escrever aplicativos em html / css / js puro e sim vincular estão disponíveis para JS usando a introspecção do GObject. Dê uma olhada no link do GnomeSeed

SeedKit: link

Tutorial: link

    
por Owais Lone 28.08.2011 / 21:38
0

Agora temos o AppJS - link !

Como eles disseram, " Ele usa o Chromium como o núcleo (para que as APIs HTML5 mais recentes sejam suportadas) e o Node.js como o backbone. "

    
por superqwerty 13.03.2014 / 00:18