在HTML和JS中,我如何开发Ubuntu应用程序?

分享于 

5分钟阅读

ubuntu

  繁體

developer.ubuntu.com的Ubuntu上绑定和API的一个很好的起点。

你可以像构建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()




您可以通过在Gtk窗口中使用嵌入式WebKit框架来使用HTML Javascript进行界面开发(这在Python中最容易做到)。最困难的部分是从HTML/Javascript应用程序与系统通信。

可以通过在Javascript和python之间传递消息来实现这个,但是,您将必须将系统逻辑编写为Python函数,但这非常容易做到。

下面是一个简单的示例,展示了python和Javascript之间的通信,在该示例中,HTML/Javascript显示一个按钮,当单击时将一个数组["hello","world"]发送到python,它将数组连接回字符串,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-webkitpython-gtk2,然后将这些文件保存在同一个文件夹中,并运行:

 
python example.py



program in action



WEB  Ubuntu  webapp  webapps