2010/09/28

[筆記] android WebView 遇到網頁重導後開新視窗的問題

塞個 WebViewClient 給他。

WebView web = (WebView)findViewById(R.id.WebPages);
web.setWebViewClient(new WebViewClient());

最近會筆記些零碎的 android 問題。

2010/09/19

吃了蘑菇的 gnome-shell




會變大~

上面這個影片主要是 demo 目前 gnome-shell 的 extension 可以控制 gnome-shell 裡面的任意元件,所以才可以做出讓 calendar 放大的外掛。有興趣可以看一下源碼

這是在 ICOS 的講題 Javascript in Linux Desktop,雖然跟 COSCUP 講的題目一樣,不過經過了一個月當然是要升級一下啦。

這次不一樣的地方還有加入了 seedkit 的部份。不過瞄準的是略有開發經驗的聽眾,所以技術細節其實並沒有提很多。這次 seedkit 的範例用了 seedkit 原本就內附的 dbus, libnotify 範例外,也加了使用 wnck, 用 javascript 控制視窗的範例。

下面這個影片依據 demo 用 dbus 控制 Ubuntu music player - rhythmbox 的上下首變更、libnotify 跳出通知訊息、以及用 wnck 取得視窗標題以及最後的操作所有視窗最小化。



而操作這些動作的全部都是使用 html 與 javascript, 範例源碼如下:
HTML 部份
<html>
    <head>
    <link rel="stylesheet" href="./ui.css" type="text/css" media="all" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="./ui.js"></script>

    </head>
    <body>
    <div class="demo">
        <img id="cover-art"></img>
        <div id="prev-button" class="button">Prev</div>
        <div id="next-button" class="button">Next</div>
        <div id="notify-button" class="button">notify</div>
        <div id="wins-button" class="button">get wins</div>
        <div id="min-button" class="button">minimize</div>
        <div id="file-uri"></div>
    </div>
    <ul id="windows-list"></ul>
</body>
</html>

Javascript 部份:
Seed.include("./dbus-rhythmbox.js");

function sendNotification(summary, body, timeOut) {
 var notification = new Notify.Notification({summary:summary, body:body});
 notification.set_timeout(timeOut);
 notification.show();
}

function getWindows () {
        Wnck = imports.gi.Wnck;
        Gtk = imports.gi.Gtk
        Gtk.init(Seed.argv);

        var screen = Wnck.Screen.get_default();
        while (Gtk.events_pending())
            Gtk.main_iteration();
        return screen.get_windows();
}

$(document).ready(function(){
 var shell = new RhythmboxShell();
 var player = new RhythmboxPlayer();

 Notify = imports.gi.Notify;

 $("#wins-button").click( function() {
        var wins = getWindows();
        Seed.print (wins.length);
        for (var i = 0; i < wins.length; i++) {
            Seed.print (wins[i].get_name());
            $("#windows-list").append("<li>" + wins[i].get_name() + "</li>");
        }
    });

 $("#min-button").click( function() {
        var wins = getWindows();
        for (var i = 0; i < wins.length; i++) {
            wins[i].minimize();
        }
    });
 
    Notify.init("Webview");
 $("#notify-button").click( function() {
  sendNotification("Raised from a WebView","Raised from a WebView", 500); 
  Seed.print("clicked");
 });

 //playeplayer.getVolumeRemote(function (volume) {print("oi")});
 $("#next-button").click(function(){
  player.nextRemote();
 });

 $("#prev-button").click(function(){
  player.previousRemote();
 });

 player.connect("playingUriChanged", 
         function(emitter, uri){
   //var song = shell.getSongPropertiesRemoteSync(uri);
   //print(song); 
         });

 player.connect("playingSongPropertyChanged", 
         function(emitter, title, property_name, old_value, new_value){
   if (property_name == "rb:coverArt-uri")
    $("#cover-art").attr('src', new_value);
 });
});

dbus 的操作一樣的是比較複雜,你可以參考上一篇。不過相對起來 wnck, libnotify 就簡單許多。而這整個操作,全部都可以使用 jquery 的方式操作,撰寫起桌面應用程式就跟網頁一樣。


最後是 slide。謝謝昨天大家的聆聽

2010/09/07

seedkit - 用 web technology 撰寫 desktop application

繼上次 COSCUP 講了 Javascript in linux desktop 後,最近又在看之前 penk 跟我介紹的 seedkit,還有會後 sleepnova 跟我提到一些 java 上有些 javascript implementation 的實做,去慶功宴的時候阿修又提了好幾個 javascript 寫 desktop application 的 framework,才知道這個部份已經蠻多人在做了。

不過這次會議也有另外一個感想,就是 web developer 還是比較希望維持原有的開發模式,而不僅只是使用 javascript 語言來撰寫程式。翻開 seed/gjs 寫的 javascript 源碼,開發的思維其實跟 python 差不多,幾乎都可以從 python 無痛轉換了。

而 seedkit 就是打算維持原本 web application 的開發模式而設計的工具。在 seedkit-viewer 的 example 裡面提供了一些有趣的範例。比如說 dbus-rhythmbox  這個範例,他透過 dbus 的方式控制歌曲的上、下首切換。



右邊的 seedkit-viewer 視窗裡面的 next/previous 可以操作 rhythmbox 上、下首。這個程式與 rhythmbox 是兩個獨立的程式,而不是 rhythmbox 的外掛。

這個功能可以在各種語言用 dbus 實做出來。不過在 Seedkit 的實做方式則是比較近乎 web application 的開發方式。首先我們看源碼中的 ui.html (沒錯是 HTML 檔案)。

<html>
    <head>
    <link rel="stylesheet" href="./ui.css" type="text/css" media="all" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script src="./ui.js"></script>

    </head>
    <body>
    <div class="demo">
        <img id="cover-art"></img>
        <div id="prev-button" class="button">Prev</div>
        <div id="next-button" class="button">Next</div>
        <div id="file-uri"></div>
    </div>
</body>
</html>

基本上就是使用 jquery 函式庫,並引入了 ui.js 這個 javascript。接下來是 ui.js。
Seed.include("./dbus-rhythmbox.js");

$(document).ready(function(){

var shell = new RhythmboxShell();
var player = new RhythmboxPlayer();

//playeplayer.getVolumeRemote(function (volume) {print("oi")});

$("#next-button").click(function(){
 player.nextRemote();
});

$("#prev-button").click(function(){
 player.previousRemote();
});


player.connect("playingUriChanged", 
        function(emitter, uri){
  //var song = shell.getSongPropertiesRemoteSync(uri);
  //print(song); 
        });

player.connect("playingSongPropertyChanged", 
        function(emitter, title, property_name, old_value, new_value){
  if (property_name == "rb:coverArt-uri")
   $("#cover-art").attr('src', new_value);
});

});

這段也相當簡單,就是按下 next 或 previous 之後去呼叫 player.nextRemote/previousRemote,並且使用了 jquery 的語法。至於 player 則定義於 dbus-rhythmbox.js 裡面。

另外,這個範例為了方便的操作 dbus,所以做了一個 wrapper 在 dbus-local.js,有興趣的話可以翻一下,特別是把 next mapping 到 nextRemote 可以翻一下 proxifyPrototype 這個函式。

基本上 seedkit 讓開發桌面程式的方式盡可能的接近網頁應用程式,並且還是可以使用系統的 API 去作檔案 IO、網路存取、dbus、notification 之類的系統 API,感覺起來是 GTK 裡面比較完整的解決方案。

而更棒的是 seedkit 也可以當作一個 Gtk Widget,你可以將這些程式片段嵌入在 UI 的一部分,這也保持了開發彈性,開發者還是可以選用其他的 UI 函式庫如 Clutter 或是 GTK,而不是只能使用 Web Application 的 View。