如何使用HTML和JS开发Ubuntu应用程序？

Question

如何使用HTML和JS开发Ubuntu应用程序？

application-developmentwebappshtml5webapp-development

36

我正在开发一个应用程序，我认为HTML和JavaScript对未来更有优势，但是我找不到任何教程（我需要应用程序使用系统主题）。

是否有Unity的绑定、消息菜单和通知、CouchDB等等？

- user6320

你可能还会对这个相似的问题感兴趣：http://askubuntu.com/questions/97430/connect-webkit-webview-form-to-a-python-callback - David Planella

7个回答

17

你可以使用HTML + Javascript开发界面，通过在Gtk窗口中嵌入一个WebKit框架来实现（在Python中最容易实现）。最困难的部分是从你的HTML/Javascript应用程序与系统进行通信。

你可以通过在Javascript和Python之间传递消息来实现这一点。然而，你需要将系统逻辑编写为Python函数，但这很容易做到。

下面是一个简单的示例，展示了Python和Javascript之间的通信。在示例中，HTML/Javascript显示一个按钮，当点击时，将一个数组["hello", "world"]发送给Python，Python将该数组连接成字符串"hello world"并将其发送回Javascript。Python代码将数组的表示打印到控制台，而Javascript代码弹出一个显示该字符串的警告框。

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>

这里你真正需要关注的Python代码是从def output(data):到文件末尾的代码，应该很容易理解。

要运行这个程序，请确保已安装python-webkit和python-gtk2，然后将文件保存在同一个文件夹中并运行：

python example.py

program in action

- dv3500ea

1这太棒了 - Francisco Presencia

5

我开发了一个名为BAT的小工具，用于使用HTML、JS和CSS构建桌面应用程序。

我在我的博客上写了一篇关于它的文章。

示例

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

而且，我们这样运行它：

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

结果是：

- Ionică Bizău

4

就直接访问平台而言，你应该看一下 Seed。

你还可以查看一下 UserWebKit，这是一个 Python3 库，提供了 Novacut 和 Dmedia UI 使用的关键功能（它是建立在 UserCouch 和 Microfiber 之上的，顺便说一句）。

经过深思熟虑，我决定从 JavaScript 中不直接访问平台，因为这样你可以选择在标准浏览器中运行 UI。Novacut 架构使用 CouchDB 来保持 UI 和后端服务器的网络透明性。在正常情况下，单机情况下，服务器在本地计算机上运行。但是，你也可以将服务器（和 CouchDB）在其他系统上运行，而 UI 不会注意到任何差异。

- jderose

3

嗯，你可以包含一个能够运行像PHP这样的shell命令的语言，这样就可以利用一些功能，比如从网页安装应用程序并执行一些命令（例如根据系统主题检测使用哪个主题以及使用哪个CSS）。例如，你有这两个问题可能会有所帮助：服务器能处理同时的shell命令吗？（讨论执行多个命令）从网页链接中运行一条命令行（讨论点击链接并从软件中心安装应用程序）

要了解使用的主题，你可以解析Ubuntu文件，其中包含默认主题的值，并根据它修改站点的CSS以反映新主题。

关于主题和如何找到它的问题可以在这里找到：我需要编辑哪个文件来更改主题中的文本颜色？

桌面忘记主题？

编辑GTK主题（添加边框）

所有这些（如果您使用搜索，还有更多）都可以帮助您知道在解析时应该查找什么以及可以检查哪些文件来查看系统正在使用的主题以及在网页中应该使用什么。

- Luis Alvarado

2

是的，你可以使用纯HTML/CSS/JS编写应用程序，并且可以使用GObject introspection为JS提供绑定。请查看GnomeSeed https://live.gnome.org/Seed。

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

教程：https://live.gnome.org/Seed/Tutorial。

- Owais Lone

0

现在我们有了 AppJS -- https://github.com/milani/appjs！

正如他们所说的，"它使用Chromium作为核心（以支持最新的HTML5 API），并使用Node.js作为支撑。"

- superqwerty

- andrewsomething · Accepted Answer

在Ubuntu上，关于绑定和API的良好起点可以在developer.ubuntu.com找到。我对此没有任何经验，但你可能还想了解一下Gjs，GNOME的JavaScript绑定。根据你想要做什么，你可以像构建任何HTML + JS应用程序一样构建应用程序，然后将其放入Webkit视图中。在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()