Yuren's Info Area

Fedora 16 下換 GNOME3 Theme

2012-01-21T17:16:00.000+08:00

一時無聊看到 ICS GNOME3 的 Theme 覺得很有趣想換一下，沒想到還有點麻煩。主要在於 Fedora 上面的 GNOME3 Theme Selector extension 有相容性問題沒辦法安裝。

解決的方法是只安裝 GNOME3 User Theme extension，然後再用 command line 修改 theme。

下載 GNOME3 的 Theme，並且放到 .themes 裡面，如果沒這個目錄就創建一個
安裝 user theme extension:
# yum install gnome-shell-extension-user-theme.noarch
重開 gnome-shell，按下 alt + F2 輸入 r 按 enter
使用指令指定要使用的 theme:
$ gsettings set org.gnome.shell.extensions.user-theme name "Ice Cream Sandwich"

這樣就可以切換到所指定的 theme 了。

這樣跟我的手機剛好搭成一套 :)

客製化 ListView 產生 ScrollRunnable 互搶的問題解法

2011-12-30T15:18:00.000+08:00

最近用了一個朋友寫的客製化的 ListView，主要的用途是作類似 iOS 上可以作 Pull down refresh 的功能。

但遇到了一個小問題困擾我很久。

因為 pull down 的 scrolling back to first item 的工作是由一個 ScrollRunnable 搭配 Scroller 實作的，這東西基本上平常運作都沒有問題，但是如果在 Scroll Fling 到最頂端的時候就會有 scroll 亂跳的問題。

深究 ListView/AbsListView 之後，發現其實 AbsListView 內有一個 mFlingRunnable 負責控制 Fling 動作發生時的捲動動作，而當使用另外一個 ScrollRunnable 去控制捲動的時候，會跟原本的 mFlingRunnable 的捲動互搶，造成捲動亂跳的問題。

知道原因了，要解決就很簡單吧？

錯了。

AbsListView 並沒有預留讓開發者存取 mFlingRunnable 的介面，拿不到 Runnable 就無法取消它。難道我要把整個 AbsListView, ListView 搬出來嗎 XDD

還好找到了一個不太好的 workaround。但是鑑於要把整個 AbsListView 移出來的成本太大，就將就著用了。答案是當使用 smoothScrollBy 系列的 method 的時候，AbsListView 將會自己移除 mFlingRunnable 的操作：

    public void smoothScrollBy(int distance, int duration) {
        if (mFlingRunnable == null) {
            mFlingRunnable = new FlingRunnable();
        } else {
            mFlingRunnable.endFling();
        }
        mFlingRunnable.startScroll(distance, duration);
    }

所以當你要操作自己的 ScrollRunnable 的時候，先執行 smoothScrollBy(0, 0) 就行了。因為參數都是 0 所以基本上 Fling 的動作就會取消了。

如果哪位看官有更好的解法請務必跟我說 :D

特別感謝 David Wu 跟我一起看了這個問題！

Android 自製元件 - PrismFlipper

2011-12-14T19:28:00.000+08:00

這幾天公司的 app 要作訂製的 notification bar，花了一點時間做出來，把他整理出來成一個小 view widget，這個 widget 主要是一個客製化的 notification bar，主要是想模擬三角稜柱翻動的樣子。跑起來大概像下面這樣：

使用方法也很簡單，用 flipper.showNext(text, reverse) 就可以使用了，下面附上比較完整的範例

final PrismFlipper flipper = (PrismFlipper)findViewById(R.id.viewFlipper1);
final String[] texts = new String[] { "Refresh", "go to last read position", "last read post" };
flipper.setFrontText(texts[0]);
flipper.setBackground(new ColorDrawable(0xff3465a4));
flipper.setTextColor(Color.WHITE);
Button btn = (Button)findViewById(R.id.button1);
btn.setOnClickListener(new OnClickListener() {
   
 @Override
 public void onClick(View arg0) {
  flipper.showNext(texts[mPosition], false);
  mPosition = (mPosition + 1) % texts.length;
 }
});
        
btn = (Button)findViewById(R.id.button2);
btn.setOnClickListener(new OnClickListener() {
   
 @Override
 public void onClick(View arg0) {
  flipper.showNext(texts[mPosition], true);
  mPosition = (mPosition + 1) % texts.length;
 }
});

完整的範例可以在 github 上找到，授權是 BSD license。

Android 小技巧：找出未用的 Resource

2011-10-17T17:34:00.000+08:00

記得好像有其他 Android 內建的方法可以哪些 resource 沒有被使用。一時找不到，Google 一下發現另外一套：Android Resource Tracker。

使用方法也很簡單，在 project 目錄底下執行：

$ java -jar <PATH_TO_JAR>/AndroidUnusedResources1.4.jar

接著就會列出未被使用的資源：

Running in: /Users/yurenju/git/YOUR_PROJECT
242 resources found

44 unused resources were found:
array     : upload_photo_options
    /Users/yurenju/git/YOUR_PROJECT/res/values/arrays.xml
...

Eclipse 小技巧 - 同時設定多個 method breakpoint

2011-10-11T15:05:00.000+08:00

有時候正在除錯剛寫好的 class 時，會需要針對 class 底下的所有 method 設定中斷點。不過一個一個設定實在太麻煩了，Eclipse 提供一個很貼心的功能，可以直接將多個 method 設定中斷點。

打開 Eclipse 找到列出所有 Method 的 Outline，用 Ctrl/Cmd 多選 Method 後，按右鍵選取 Toggle Method Breakpoint 即可。

Javascript client library 之 TDD

2011-09-22T23:58:00.001+08:00

最近因緣際會在寫 web service 的 javascript client library，就趁著這個機會試試看 TDD (Test-Driven Development) 的方式來開發看看。

這次撰寫的 client library 因為是 javascript，所以就利用了 Javascript 常見的 event driven 的呼叫方式。原本打算用 jsunit 作為 unit test 的框架，但因為沒看到可以測試 callback 的 method，最後改用了 jquery 所使用的 qunit。

qunit 在測試 callback 的方式大略如下：

test(
  'Login success test',

  function() {
    expect(1);
    stop();

    var service = new WebService();
    service.login(
      {
        username: 'user1@example.com',
        password: 'password'
      },
      function(res) {
        equal(res.response.status, "OK", 'expected login success');
        start();
      }
    );
  }
);

qunit 可以利用 stop() 停止整個 unit test 的進行，等到呼叫 start() 的時候再繼續執行。在這個測試中，qunit 會在 stop() 之後開始等待，等到呼叫到 callback method 裡面的 start() 之後才會繼續執行，這個時候就可以擷取到 equal() 所測試的結果。另外 expect() 可以指定預期會跑到的 assert 總共有幾個，在這個例子裡面只跑了一次 equal()，所以是 expect(1)。當所有 test case 完成後，跑 qunit 的結果大略如下：

因為根本就還沒開始寫 client library，當然所有測試結果都是 failed。但在這個時候就已經得知 javascript client library 要如何使用以及有哪些回傳值了。這樣其實可以在早期的時候就可以看到整個 client library 的面貌。

而且看著 test case 一個一個的通過心中真是有莫名的快感阿。寫完之後就變成這樣：

使用 TDD 方法開發確實讓整個開發的過程踏實不少。不過這種開發方式還是比較適合實作函式庫，如果撰寫 UI 的話就沒有那麼適合了。

不過大家還是可以玩一下，蠻有收穫的 :)

Jenkins 系列 (1): 在終端機下設定 Android 模擬器

2011-09-10T12:12:00.000+08:00

命題的有點怪，不過基本上這是篇為了在 Jenkins 進行 unit test 以及 daily build 的前置動作。當在建立 Continuous Integration 的測試系統時，我希望可以在一台獨立的機器進行測試。而在遠端的伺服器不一定有 X Window 的狀況，這個時候就會需要在終端機上設定 Android Eumlator 環境。

首先是下載並且解壓縮 Android SDK

$ wget http://dl.google.com/android/android-sdk_r12-linux_x86.tgz
$ tar zxvf android-sdk_r12-linux_x86.tgz

切換到 android-sdk-linux_x86/tools，並且用 --no-ui 選項來安裝 Android 3.2/2.3 或其他平台相關的 Platform SDK

$ cd android-sdk-linux_x86/tool
$ ./android update sdk --no-ui

這個時候會從最新的平台（如 Android 3.2）開始下載安裝，一路從最新的下載到最舊的 SDK。我是在下載完 Android 2.2 的 Platform SDK 就按 Ctrl + C 終止安裝。

編輯家目錄的 ~/.bash_profile，加入執行路徑：

PATH="$PATH:~/android-sdk-linux_x86/tools:~/android-sdk-linux_x86/platform-tools

安裝完 platform SDK 之後，可以利用下面的指令看到安裝了哪些 platform SDK:

$ android list target

輸出大略如下：

id: 4 or "android-8"
     Name: Android 2.2
     Type: Platform
     API level: 8
     Revision: 3
     Skins: QVGA, WVGA854, WQVGA432, HVGA, WVGA800 (default), WQVGA400
id: 5 or "android-9"
     Name: Android 2.3.1
     Type: Platform
     API level: 9
     Revision: 2
     Skins: QVGA, WVGA854, WQVGA432, HVGA, WVGA800 (default), WQVGA400
id: 6 or "android-10"
     Name: Android 2.3.3
     Type: Platform
     API level: 10
     Revision: 2
     Skins: QVGA, WVGA854, WQVGA432, HVGA, WVGA800 (default), WQVGA400

用下面的指令就可以建立新的 Android 2.3.3 模擬器環境

$ android create avd --name android-2.3 --target android-10

這個時候就可以用不跑模擬器畫面的方式啟動 Android 模擬環境：

$ emulator-arm -avd android-2.3 -no-window

想知道運行狀況，可以利用 adb logcat 瞭解。

jsmodem - 讓 jslinux 使用網路功能

2011-08-27T13:03:00.000+08:00

前陣子有個很有趣的 project - jslinux，這個專案主要是在瀏覽器上面模擬 x86 電腦，再將 Linux 跑在瀏覽器上面。等於說這個專案簡單實作了 PC 模擬器，就如同 VMWare, VirtualBox 一樣，但是在瀏覽器上就可以跑模擬器上面的 OS 了。甚至在上面還包含了一個 C compiler，可以在上面編譯程式。

這個 project 非常的酷，不過看完之後也只是覺得有趣，沒繼續追之後的消息。而這個禮拜在 Hacking Thursday 遇到 Ben, 他提到了這個專案的後續發展 - 有人利用 ppp 實作的 modem device，所以這個在瀏覽器上面運作的 Linux 現在可以上網了 XD

這個延伸的專案是 jsmodem，主要的功能是在 jslinux 這個 javascript emulator 上加上一個 modem，讓瀏覽器裡面的 Linux 可以上網，我看了一下 source code，推敲的架構如下：

說是推敲的意思，其實我看了一下沒看到在 browser 怎麼從 ppp 轉到 websocket 的地方。如果有好心的朋友知道可以告訴我一聲 :p

這個 linux 會利用 pppd 的方式開啟一個網路介面，並且接到 jsmodem。而 jsmodem 利用 websocket 的方式向 server 通訊。所以要讓 jslinux 可以上網，必須要在本機端跑一個 websocket server，並且用 iptable forward 封包。

架設步驟

我測試的環境是 Ubuntu 11.04，理論上用什麼 Linux 作法應該都一樣。首先當然是下載 jsmodem

git clone https://github.com/ewiger/jsmodem.git

接著理論上進去 emulator 目錄，打 make all 就可以了。不過不知道為什麼 http://bellard.org/ 會檔掉 wget，就算我換 user-agent 也沒辦法。懶得處理，就把四個檔案 cpux86.js cpux86-ta.js jslinux.js term.js 載下來放在原本的目錄裡面，再打 make all 就行了。

另外在 jslinux.js 裡面所指示的 binary 路徑是 vmlinux.bin, 而非 vmlinux26.bin，所以必須要將 vmlinux26.bin rename 成 vmlinux.bin 完成之後，就可以用以下指令開啟 websocket server，並且開啟一個 ppp interface 準備接收 websocket 封包。

sudo ./serve.sh

這個時候用 Google Chrome 打開 0.0.0.0:2080，應該就可以看到 Linux 開機。用 root 登入後，打 ./ppp_up 這樣就可以建立 ppp 連線。

這個時候回到本機端的 Linux 建立 package forward

# echo 1 > /proc/sys/net/ipv4/ip_forward
# /sbin/iptables -t nat -A POSTROUTING -o eth0 -j MASQUERADE

這樣就大功告成了 :)

Mocking Bird - node.js REST API simulation (1)

2011-08-06T14:32:00.000+08:00

當團隊決定開發一個使用 web service 的 mobile app 時，我們遇到了一個小問題：mobile app 跟 web service 是同時開發的，當 web service 還沒實作完畢前，mobile app developer 只能暫時先從規格中 implement 跟 web service 銜接的介面。

這聽起來有點瞎子摸象。

不過 Jamie Sa 提供了個有趣的點子：如果我們可以寫個模擬的 REST API service，並且透過 YAML 定義簡單的規格的話，我們就可以利用這個模擬 REST API 比較真實的跟 web service 銜接了 :)

正巧手邊大家正在研究 node.js，不免俗的我們就用了它來實作了初版的 API Simulator，Jamie 把它叫做 mockingBird。這個時候 YAML spec 看起來像這樣：

# APIs in V1
meta:
  version: draft
v1_articles:
  timestamp: '2011-07-19T08:54Z'
  is_end: true
  articles:
    - { article: 1 }
    - { article: 2 }
    - { article: 3 }
  article_count: 3

而用瀏覽器開啟 http://127.0.0.1:8080/v1/articles 則會輸出以下結果：

初版的時候我們用 underline "_" 來分割版本，並且將假資料直接放在 YAML 裡面。而當我們需要模擬取得多筆資料的時候還可以處理，但如果需要類似 http://HOST/article/ARTICLE_ID 這樣的 API 就無法模擬了，目前這樣的寫法也無法模擬 POST method。

做了一連串的 hacking 後，終於完成了一個較有彈性的架構，不過當然還是沒辦法模擬太過於複雜的狀況 :P

MockingBird 會將 JSON 格式的假資料讀取進來，而可以在 YAML 裡面調用 dummy data 以及使用簡單的 Javascript 做計算。

比如說我要模擬 Social network 的 API，

首先要先產生 dummy.json 假資料檔，這邊我用一個 python script 產生 dummy.json。

import uuid
import json
from random import randint, choice
from datetime import datetime, timedelta

firstnames = ['Ericka', 'Amie', 'Annabelle', 'Hugh', 'Carmella']
lastnames = ['Hilts', 'Kowalsky', 'Cincotta', 'Gerken', 'Stults']
devicenames = ['iPad', 'Android', 'Web']
basetime = datetime.today()
lipsum='Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sollicitudin elementum tristique. Nullam gravida bibendum magna viverra gravida. Cras nec mi a est malesuada dictum.'

def gen_id():
    return uuid.uuid1().hex[:24]

def gen_users(num=10):
    users = []
    for i in range(num):
        user = {}
        user['id'] = gen_id()
        user['email'] = 'a%s@example.com' % randint(0,1000000)
        user['nickname'] = "%s %s" % \
                           (choice(firstnames), \
                           choice(lastnames))
        users.append(user)
    return users

def gen_comment(users, article_id, timestamp):
    c = {}
    c['id'] = gen_id()
    c['creator_id'] = choice(users)['id']
    c['creation_device_name'] = choice(devicenames)
    c['article_id'] = article_id
    c['timestamp'] = timestamp
    c['text'] = lipsum
    return c

def gen_articles(users, num=20):
    articles = []
    for i in range(num):
        user = choice(users)
        timestamp = basetime+timedelta(0,i*10)
        article = {}
        article['id'] = gen_id()
        article['creator_id'] = user['id']
        article['creation_device_name'] = choice(devicenames)
        article['timestamp'] = timestamp.isoformat()
        article['text'] = lipsum
        article['comment_count'] = randint(0,5)
        article['comments'] = []
        for j in range(article['comment_count']):
            c = gen_comment(users, article['id'], \
                            (timestamp+timedelta(0,j*10)).isoformat())
            article['comments'].append(c)

        articles.append(article)
    return articles

if __name__ == '__main__':
    data = {}
    data['users'] = gen_users()
    data['articles'] = gen_articles(data['users'])
    print json.dumps(data, indent=2)

這個 dummy json 會 load 進去 node.js 的主程式裡面，可以由程式或者是 YAML 裡面使用。現在的 YAML 檔案則是長成這樣：

version: 0
api:
  articles:
    prefix: api
    url: "articles.*"
    http_method: GET
    response:
      timestamp: "timestamp"
      is_end: "true"
      article_count: "dummy['articles'].length"
      articles: "params['limit'] ? dummy['articles'].slice(0,params['limit']) : dummy['articles']"
  article:
    prefix: api
    url: "article/(\w+)$"
    http_method: GET
    response:
      article: "findById(dummy['articles'], match)"
  users:
    prefix: api
    url: "users"
    http_method: GET
    response:
      users: "dummy['users']"
  
  post_article:
    prefix: api
    url: article
    http_method: POST
    response:
      creator_id: "params.creator_id"
      creation_device_name: "params.creation_device_name"
      text: "params.text"
      timestamp: "timestamp"
      comment_count: "0"
      comments: "[]"
      id: "generateId()"
  
  post_comment:
    prefix: api
    url: comment
    http_method: POST
    response:
      creator_id: "params.creator_id"
      creation_device_name: "params.creation_device_name"
      article_id: "params.article_id"
      text: "params.text"
      id: "generateId()"

裡面有些關鍵字解釋一下：

version: 最後 mockingBird 的網址會是 http://HOST/PREFIX/VERSION/method，如 http://localhost/api/0/articles，用來區分 API 版本用的變數
prefix: 可以針對 API 的用途使用不同的 prefix，在這邊我們只用了 "api" 這個 prefix。
url: url 的 match pattern
http_method: 可以指定要用 POST 或是 GET 的 HTTP Method
response: 要回應的 JSON 訊息。
dummy: 在 YAML 裡面可以利用 dummy 取得假資料，比如說 dummy['articles'] 就是所有的 articles。
params: 使用 GET/POST 的時候丟進來的參數。比如下達了 http://localhost/api/0/articles?limit=2 時，YAML 可以使用參數 params.limit 取得這個 limit 數值，可以參考下面的片段
findById: 用 id 來搜尋物件的 method

articles:
    prefix: api
    url: "articles.*"
    http_method: GET
    response:
      timestamp: "timestamp"
      is_end: "true"
      article_count: "dummy['articles'].length"
      articles: "params['limit'] ? dummy['articles'].slice(0,params['limit']) : dummy['articles']"

當用瀏覽器開啟 http://localhost:8080/api/0/articles?limit=1 的時候，就可以獲得以下結果：

如此一來，你的 mobile app 就可以開幹了，而有了這個實體的 SPEC，web service 的 developer 也可以依此為目標，最終做成跟這個相同的 API。

下一篇再來詳細講解怎麼使用這個工具還有 node.js 裡面是怎麼實作的。但重點是：有人有興趣嗎？出個聲吧 :P

Python and GObject-Introspection 簡報

2011-06-25T17:31:00.000+08:00

2011/6/25 在 PycTW 2011 講了 Python and GObject-Introspection，主要講 GObject-Introspection 的原理還有簡單的介紹 python-gobject 如何實作 GObject-Introspection。投影片如下：

Python and GObject Introspection

View more presentations from Yuren Ju

h4addicted - 聚會主題搜集器

2011-05-31T18:03:00.001+08:00

上次聚會的時候, Rex 講了一個小問題。通常我們在聚會之前，其實就會有一些覺得有趣的主題想要帶到 Hacking Thursday 討論。所以希望有一個地方可以搜集這些主題。不過大家都有各自用的服務如 plurk, twitter 或是 facebook，通常有不太想要只是因為要搜集主題就需要額外使用一個 service (如 friendfeed)。

於是大家就討論想要寫一個 web app 來解決這個問題。基本上的概念就是希望在發言的時候如果加了 #h4 時，就會把這個發言丟到 web app 上，條件是至少要在 twitter 與 plurk 都可以使用 (Facebook 會比較麻煩，所以就先跳過了)。然後我們就在 David 的筆電上蓋看到 addicted 這個字，所以這個專案就叫做 h4addicted 啦。

今天我研究了一下，發現這個服務很容易就可以使用 Yahoo Pipes 兜出來！基於懶惰的原則，我就沒有自己去寫程式了 :P

Yahoo Pipe 基本上是一個可以從網路上撈資料進行後處理的 web app。所以我們要做的就是搜集大家的 feed，對各個 service 做一些後處理後產生新的 RSS/JSON 就完成了。你可以到下面這個網址：

http://pipes.yahoo.com/yurenju/h4addicted

功能其實是非常簡易的，原本製作也很簡單，只要把大家的 RSS feed 拉進來就結束了。不過事情沒有這麼簡單！我們把 twitter, plurk, facebook (對，後來 David 又透過 JSON 撈到了 Facebook 的資料，但是前提是你的 post 是公開的。)都弄出來之後發現有幾個問題要解決：

Plurk 的 RSS link 欄位填寫的是相對網址，需要對字串作後處理
Facebook 也有相同的問題，因為是從 JSON 轉過來的，所以也沒有 link 欄位。
Facebook 因為根本沒有與 link 對應的欄位，所以要從 post id 那邊分析後取得 post id，然後再跟 user id 合併後產生 link 欄位
Facebook 的 message 欄位沒有 author，所以要額外把 name 加入 message 欄位

所以比想象中的複雜一點，不過還是搞定了 XD

首先看概觀

Plurk 的部分其實就是把 link 拿出來加上 http://www.plurk.com/ 的前綴後再塞回去就完成了。右邊的 facebook 我則是把它獨立成另外一個模組處理。

Rename 模組負責把 JSON 的格式改成與 RSS 類似，讓訊息可以正確的的解譯出來。
Loop - String Builder 的部分是為了作讓 user name 加在 message 前面，才知道是誰的發言。
Loop - String Regex 的部分則是用來把 item.id 裡面類似 724235041_10150262195320042 的結構取出後者（也就是 post-id）並且儲存
取出 post-id 後再利用一次 String Builder 把 facebook 前綴、 user-id 與 post-id 連接在一起，就完成了。

Yahoo Pipes 真是非常方便的工具，利用它其實可以做到非常多事情了 :)

也歡迎 clone 拿去使用。

GNOME3 延伸套件開發

2011-05-30T16:21:00.018+08:00

這幾天到 KaLUG 講了一場『GNOME3 延伸套件開發教學』，其實也幫我自己上了一堂課。在這邊寫下一些心得讓大家參考一下。

3D 加速後的 GNOME3 桌面

在 GNOME3 裡面多了一個 gnome-shell 的軟體，主要負責提供 GNOME3 新一代的使用者體驗，包含更容易使用的 workspace，新的 application 管理機制等等。比如說下面的影片講解了 workspace 系統：

而這些絢麗的使用者體驗歸功於新的 UI Toolkit - Clutter 以及 Shell-Toolkit (ST)。Clutter 是一套利用 OpenGL/OpenGL ES 加速的 UI Toolkit，可以簡單的創作出許多絢麗的特效。比如說我們要撰寫一個小程式，當使用者點擊圖像之後，做出淡出、放大並且位移的特效。若使用 GTK+ 或其他 UI Toolkit 亦然可撰寫出來，但採用 Clutter 撰寫時就會格外簡單許多。

(因為使用桌面錄影的關係，感覺有些遲鈍，不過實際上跑的時候還蠻順暢的。)

這個 Demo 程式源碼如下：

const Clutter = imports.gi.Clutter;
const Tweener = imports.tweener.tweener;

function click(actor, ev) {
    let properties = {  time: 2.0,
                        x: texture.x+100,
                        y: texture.y+100,
                        scale_x: 1.5,
                        scale_y: 1.5,
                        opacity: 0
                    };
    Tweener.addTween(texture, properties);
    print('Clicked!');
    return true;
}

function quit(actor) {
    Clutter.main_quit();
}

Clutter.init(0, null);
let stage = new Clutter.Stage();
let texture = new Clutter.Texture({ filename: 'test.jpg',
                                    reactive: true });
texture.connect('button-press-event', click);
stage.connect('destroy', quit);
stage.add_actor(texture);
stage.show();

Clutter.main();

上面這個範例可以在 Debian 安裝 gir1.0-clutter-1.0, gjs 之後即可執行。

GNOME3 extension 採用 Javascript 撰寫

其實在 gnome-shell 的 UI 部分幾乎都是採用 Javascript 撰寫而成。而理所當然的開發 extension 時當然也是採用 Javascript 開發。然而最好的地方在於開發 extension 的時候，就像是 firefox extension 一樣，你可以任意的存取原本 gnome-shell 的所有元件。比如說，你可以存取 panel 的日曆元件，並且加入或修改這些元件。

Looking glass - 幾近作弊的 console

在 GNOME3 extension 開發的時候有個非常好用的工具叫做 Looking glass，這個東西就像是雷神之錘按下 "~" 就可以叫出來的 console (然後可以在裡面輸入作弊指令)。在 GNOME3 的環境下，按 alt + F2 並且輸入 lg 你就會看到這個 console 緩緩地從上面降下來。

這東西有什麼用途呢？最好用的工具是左上角那隻筆。它的作用是可以拿來點 GNOME3 桌面元件的任何東西，接着你就可以取得那個元件，然後做些什麼事情。

選取元件之後會跳回 looking glass，這個時候系統就會給他一個存取他的變數 r(NUM)，接下來你可以在 console 使用這個代號調用它。

當你點擊這個物件的時候，他就會把這個物件的 method 全部列出來，馬上就可以知道有什麼 method 可以調用。然後！這個東西當然不是只有看的，你甚至可以在 looking glass 裡面使用 r(NUM).method() 直接在 runtime 執行特定 method。比如說我執行了 r(13).set_text("I don't care")

系統的日期馬上就任性了起來！當然你也可以做些旋轉或什麼之類的事情，而且由於 clutter 的特性，作了修改後的元件依然可以操作。

最後附上 Tutorial 簡報，請多多指教 :)

GNOME3 延伸套件教學

View more presentations from Yuren Ju

Linkedin 連結

2011-05-16T23:00:00.000+08:00

Hi 各位讀者大家好，下面是小弟的 Linkedin 連結：

http://tw.linkedin.com/in/yurenju

歡迎寄信給我索取詳細資料 :)

yurenju -AT- gmail -DOT- com

[簡報] 手把手教你寫 gnome-shell 擴充套件

2011-04-16T23:35:00.000+08:00

前幾週在 GNOME 3 Release Party 給了這個 Talk 『手把手教你寫 gnome-shell 擴充套件』，分享一下探索下一代 GNOME3 的桌面環境擴充套件，並且簡單的示範如何使用 Javascript 寫出下面這個 Screenshot 的擴充套件

GNOME3 的桌面可是充滿著絢麗動畫的 framework 呢 :)

簡報在下面，歡迎參觀。不過提醒一下 GNOME3 這次發佈並沒有提到 extension 系統的部份，想必是 API 目前也還沒有穩定。歡迎敢死隊現在就開始寫 gnome-shell extension!

step by step to write a gnome-shell extension

View more presentations from Yuren Ju

Python-GTK 簡報與勘誤

2011-02-24T14:47:00.001+08:00

感謝 Study-Area 與 GNOME Taiwan 的邀請，一月份下旬給了一份 talk，投影片在此。

Python-GTK

View more presentations from Yuren Ju

另外也感謝 Mosky 以及 Hychen 的指正，部分演講內容作出修改。

第 35 頁的奇技淫巧其中的回傳多個變數的能力，實際上內部是透過 tuple 實做，並不是真的可以回傳多個變數。
__init__ 並不是建構子，而是物件的初始化 method
範例裡面的 gtk-gtr2.py 使用了 except 但卻沒有指定例外種類，這也是不建議的寫法。

ibus 無調注音支援空白鍵作為一聲

2010-10-28T11:40:00.000+08:00

最近都在修改 ibus 的注音輸入法，這次新增的功能是把原本空白鍵的導引鍵功能，改成支援陰平聲調（也就是注音聲調中的一聲）。之前的無調注音雖然好用，不過許多人還是習慣在輸入的時候鍵入聲調。而 ibus 注音輸入法遇到聲調目前會自動忽略，所以就算你輸入聲調也不會有什麼問題，不過令人困擾的是平常繁體中文使用者使用空白鍵作為聲調中的一聲，正巧跟 ibus 注音輸入法的導引鍵衝突。所以我花了一些時間加入空白鍵作為一聲的支援。

相同的源碼我都放在 github 上，現在要使用新增的功能都需要編譯源碼。晚點我測試的差不多後就會推到官方 ibus 的 repository 中。

新的 ibus 注音輸入法在設定的地方會多一個空白鍵功能的選項。

現在預設會使用陰平聲調，所以新的使用者不需要調整。之前有使用 ibus 注音輸入法的使用者只需要切換這個選項就可以讓空白鍵變成陰平聲調。

ibus-pinyin-bopomofo 無調注音輸入法新增 enter 直接輸出第一個候選字

2010-10-20T19:12:00.001+08:00

最近正在參與 ibus 中的無調注音輸入法 (pinyin-bopomofo) 的開發。希望能夠讓這個輸入法更好用，並且也同時考慮到對岸以及台灣使用者的使用習慣。

這次修改的是加入 enter 鍵的功能選項。原本的輸入法按下 enter 後會輸出原本的英文字串。比如說輸入 yurenju 雖然剛開始會變成好像是亂打的字如下圖：

不過當你按下 Enter 之後就會變成 yurenju。不過台灣的中文使用者有些比較習慣按下 Enter 後輸出的是第一個候選詞。所以小弟新增了一個小功能，讓使用者可以在設定裡面調整 Enter 鍵的功能。源碼在 github 上，現在要使用必須直接編譯源碼。新的版本預設會讓按下 Enter 後輸出第一個候選字，不過也可以在設定裡面調整。

另外在我 github 的版本也有把 shift + , 與 shift + . 重新 mapping 到全形的逗點跟句點了。接下來會看一些 issues 有哪些要幫忙解。

[筆記] gdb C++ 小技巧

2010-10-19T17:05:00.000+08:00

以前自己用 gdb 都是拿來 debug C 語言的程式，這次拿來對 C++ 除錯發現有些小地方要注意的。

第一個是 C++ 字串。平常印出 C 語言的字串只需要用 print str_var 就可以了，不過要印出 C++ 的字串則是要用 print str_var.c_str()。

另外一個要注意的是 breakpoint 的設定方式。breakpoint 的設定可以用行號或者是 function name，不過如果在 C++ 除錯時如果有 namespace 必須要打出完整的 name + class + method name。比如說 ibus 的 PYBopomofoEditor.cc 裡面有 BopomofoEditor::processBopomofo method，要設定中斷點就必須打

b PY::BopomofoEditor::processBopomofo(unsigned int, unsigned int, unsigned int)

我想你也會跟我一樣覺得打這串也太長了吧，不過 gdb 支援自動補齊，只要打 PY::Bo 之後按下 Tab 鍵就可以用自動補齊的方式快速的打完整串了。

printf debug 大法？改用 gdb 取代 printf debug 方式

2010-10-12T16:55:00.000+08:00

這個東西 jserv 在好久以前的演講就提過，不過今天要用又找了一會才找到，筆記與此。

很多時候在 debug 的時候只是要確定程式跑到那段時，大概有很大的機率會加入 printf 到程式碼裡面來進行這樣的 debug 動作。不過使用 printf 每次都要重新編譯源碼實在是有點麻煩，而使用 gdb print 資訊可以在不更動源碼也不會有每次都因為設定中斷點就停下來的問題。

比如說有以下程式：

switch (m_punct_mode) {
    case MODE_DISABLE:
        {
            g_assert (ch == IBUS_grave);
            ...
            update ();
        }
        break;
    case MODE_INIT:
        {
            m_text.clear ();
            ...
            m_cursor = 0;
        }
    case MODE_NORMAL:
        {
            m_text.insert (m_cursor, ch);
            ...
            update ();
        }
        break;
    default:
        g_assert_not_reached ();
    }

我們想在程式運行時知道到底跑到那個 switch case, 就可以用 gdb 來 print。其中的原理是利用中斷之後執行一小段 gdb 命令來達成。gdb 有個指令叫做 commands 可以在中斷後自動執行一小段 gdb 指令，所以如果我們使用 command 指令再配合 print 以及 continue 就可以做出類似 printf 的除錯功能。比如說第一個中斷點的設定方式則為：

b editor.cc:4
commands
print "MODE_DISABLE"
continue
end

這樣執行時就可以讓 gdb 印出資訊達到 printf 的效果，但卻不用重新編譯源碼。

Linux 無調注音輸入法 - ibus-pinyin-bopomofo

2010-10-06T15:04:00.002+08:00

前幾天，Pingooo、Hychen 在 TOSSUG 討論最近 Ubuntu 10.04 的 ibus 輸入法有很多 issues，然後又聊到對岸的拼音輸入法比起注音輸入法少打了聲調速度好像快很多之後，我們三個就想說是不是自己來修一下 ibus 的問題，順便看有沒有可能寫出無調的注音輸入法。

無調注音輸入法的概念也很簡單，基本上跟使用新酷音用法差不多，但是不需要輸入一二三四聲，所以才稱爲無調注音。基本上拼音輸入法原本就不需要輸入聲調，理論上我們可以基於拼音輸入法把英文拼音轉換成注音這樣的基礎原理來創造無調注音輸入法。

沒想到前幾天 hychen 丟出了一個對岸同胞作出以拼音爲基礎的注音輸入法，正巧是我們想要的無調注音輸入法！

這個注音輸入法是基於 ibus-pinyin 所作的注音輸入法，雖然說目前正在研發還不是很穩定，不過基本上方向是與我們心目中的無調注音輸入法是相同的。要在 Ubuntu 10.04 安裝也是相當容易，輸入以下指令即可安裝：

sudo add-apt-repository ppa:shawn-p-huang/ppa
sudo apt-get update
sudo apt-get install ibus-gtk ibus-qt ibus-pinyin ibus-pinyin-db-open-phrase

這兩天試用了一下發現有些問題先筆記起來，或許有機會可以提交到原作者的『注音模式用戶交互設計方案』，這些發現是基於一個新酷音使用者的意見回饋，或許拼音輸入法的使用者有更好的使用方式，只是我只試用兩天還沒發現罷了

輸入完畢後，如果輸入法候選字都正確時，不能直接按下 enter 鍵直接輸出，需要先按空白鍵再選擇第一組正確的候選字組纔可以輸入（或者是連按兩下空白鍵）。
輸入完畢後直接按 enter 會直接出現剛剛敲過的所有按鍵，看起來像這樣：d0fux9vu;5ku;。這個似乎不是使用者預期的輸出
以上兩點如果將 enter 鍵改成直接輸出正確的候選字會比較快速。
按着 shift + , 或者 shift + . 出現的並不是全形的逗號以及句號，而是『《』以及『》』，感覺不符合使用者預期
使用 ` 鍵叫出符號表的時候，如果已經設定選字鍵爲 asdfghjkl;，但是符號表的選字鍵依然是 1234567890
輸入了一個句子後，可以用左右鍵移動到注音符號的任意位置，但不清除功能爲何。看起來似乎可以用來決定切字點，但是移到要切字的位置後按下空白選字，接下來的字會變成注音符號。例如要輸入：十全路十五號，需要切字在『十五』之間。如果移到十五中間按下空白鍵選字，整串字會變成『十全路十ㄨㄏㄠ』
按下空白鍵選字後，必須要按下 page up/down 跳頁選字。此時方向鍵之中的上下鍵並沒有功能，建議可以用來取代 page up/down
如果第一次選詞的時候沒有正確選擇，下次就算正確選詞也沒辦法更正。比如說我第一次選擇注音輸入法的時候選錯成『註音』，接下來就算我多選幾次注音也沒辦法讓註音慢慢消失。

接下來希望可以跟開發者有些聯絡，來協助改善這個無調注音輸入法 :-)

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

2010-09-28T15:35:00.000+08:00

塞個 WebViewClient 給他。

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

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

吃了蘑菇的 gnome-shell

2010-09-19T07:42:00.003+08:00

會變大～

上面這個影片主要是 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。謝謝昨天大家的聆聽

Javascript in linux desktop (ICOS ver.)

View more presentations from yurenju.

seedkit - 用 web technology 撰寫 desktop application

2010-09-07T15:12:00.000+08:00

繼上次 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。

Javascript in Linux Desktop 簡報

2010-08-16T13:32:00.000+08:00

COSCUP 結束了，感謝各位支持！簡報檔在此，授權為 CC 姓名標示 3.0 Unported。

Javascript in Linux Desktop

View more presentations from yurenju.

範例檔在此：

[talk] Javascript in Linux Desktop

2010-08-03T10:33:00.000+08:00

最近在這邊發了幾篇 Javascript 跟 GNOME Desktop 相關的文章，其實是為了 COSCUP 的分享『Javascript in Linux Desktop』作準備。如果你也對 Javascript 撰寫桌面應用程式有興趣，歡迎在 COSCUP 第二天 (8/15) 下午 4:00-4:30 到第二會議室來聽我的分享。(喔，我知道同一個時段也有很精彩的 Jserv 演講啦 XD)