2012年2月24日 星期五

[拉麵食記] 台北 山小屋 - 黑魔拉麵

Img_2553
Img_2551

這家離上次去的屯京不遠, 但卻不像屯京一樣大排長龍, 其實店內還坐不到一半, 不過上次吃屯京是吃沾麵, 所以無法比較拉麵, 不過這家山小屋也是蠻好吃的

我點的是 黑魔拉麵 , 跟我上次去大阪吃的黑河童是同類型的, 豚骨湯頭加上黑麻油, 一整碗像墨汁一樣, 豚骨湯頭還蠻鮮甜的, 應該有用心到, 配上黑麻油的香氣, 這碗湯頭是挺不錯的, 麵是細麵, 我要求要略硬, 口感還不錯, 叉燒則是一般

餃子皮有煎脆, 內餡有燙口, 蠻好吃的

最後....好久沒拍的空碗照:

Img_2557

2012年2月20日 星期一

早餐


Taken at 挪威森林

2012年2月19日 星期日

[拉麵食記] 竹北 大海拉麵 - 地獄拉麵

今天又跑去吃拉麵

因為想到說我還沒吃過大海的地獄拉麵, 就跑去吃了一碗, 大海吃過了好幾次, 竹北這家, 我是認為不是很穩定, 有時吃的湯頭太淡, 有時卻又非常濃厚, 不過這附近也沒好吃的拉麵就是了

這碗地獄拉麵是在原先的湯頭上加上辣醬而成的, 本想說感覺沒太大特色, 但吃起來還頗搭的, 辣味襯托出原本湯頭的甜味...

我最喜歡的吃法就是加點一碗蔥, 倒進去豪邁的吃.... 

2012年2月18日 星期六

[拉麵食記] 台北 屯京拉麵

這家是衝著雜誌介紹去吃的, Friday Night, 單槍匹馬去, 居然還要排到快40分鐘, 比平常這時候在台北車站吃花月嵐排更久, 它座位還比較多

雜誌上介紹的是魚豚拉麵, 不過吃過一些魚貝系的湯頭, 我對這種湯頭並不是特別喜歡, 又想吃つけ麵(沾麵), 所以就點了這碗辣的沾麵來吃...(也有不辣的湯頭)

加麵是不加價的, 我又多花了70元加料, 端來就是這麼滿滿的一大碗, 份量還很夠

麵條是捲曲狀的, 還蠻好吸收湯汁的, 只是過軟, 個人偏好硬一點的麵條, 起初沾個兩三下就入口, 感覺湯頭不夠濃, 加上沾麵的溫度比拉麵低一點, 也不覺有多辣, 鹹度是還蠻夠的, 後來把麵料浸入一段時間再撈起吃(等於當拉麵來吃了), 就覺得還不錯了

除了排隊久了點外, 這家還算不錯吃, 下次有機會再去試它的拉麵好了...

2012年2月17日 星期五

[Android][筆記] JavaScript injection in ICS

看來script injection也不算是啥旁門左道了, 在Android 4.0 ICS上的WebView也使用了同樣的技巧了(在Gingerbread上並未看到這樣的codes)

Device-2012-02-17-171716

在ICS的Setting裡面"Accessiblity"裡有個設定叫"Install web script", 其實這東西應該沒使用者看的懂, 其實蠻怪的, 不過既然放了就有它的作用

ICS的WebView裡面有這樣一段codes:

int axsParameterValue = getAxsUrlParameterValue(url);

        if (axsParameterValue == ACCESSIBILITY_SCRIPT_INJECTION_UNDEFINED) {

            boolean onDeviceScriptInjectionEnabled = (Settings.Secure.getInt(mContext

                    .getContentResolver(), Settings.Secure.ACCESSIBILITY_SCRIPT_INJECTION, 0) == 1);

            if (onDeviceScriptInjectionEnabled) {

                ensureAccessibilityScriptInjectorInstance(false);

                // neither script injected nor script injection opted out => we inject

                loadUrl(ACCESSIBILITY_SCRIPT_CHOOSER_JAVASCRIPT);

                // TODO: Set this flag after successfull script injection. Maybe upon injection

                // the chooser should update the meta tag and we check it to declare success

                mAccessibilityScriptInjected = true;

            } else {

                // injection disabled so we fallback to the basic built-in support

                ensureAccessibilityScriptInjectorInstance(true);

            }

        } else if (axsParameterValue == ACCESSIBILITY_SCRIPT_INJECTION_OPTED_OUT) {

            // injection opted out so we fallback to the basic buil-in support

            ensureAccessibilityScriptInjectorInstance(true);

        } else if (axsParameterValue == ACCESSIBILITY_SCRIPT_INJECTION_PROVIDED) {

            ensureAccessibilityScriptInjectorInstance(false);

            // the URL provides accessibility but we still need to add our generic script

            loadUrl(ACCESSIBILITY_SCRIPT_CHOOSER_JAVASCRIPT);

        } else {

            Log.e(LOGTAG, "Unknown URL value for the \"axs\" URL parameter: " + axsParameterValue);

        }

這功能啟動的條件是url裡有"axs=1"或是剛講的那個設定是enabled, 而這一整段code是在onPageFinished最後被呼叫到的, 也就是頁面載入完成之後

它主要做的只有:

 loadUrl(ACCESSIBILITY_SCRIPT_CHOOSER_JAVASCRIPT);

這邊並不是強制去載入一個新的URL, 其實他做的就是script injection, ACCESSIBILITY_SCRIPT_CHOOSER_JAVASCRIPT的內容就是:

    // JavaScript to inject the script chooser which will

    // pick the right script for the current URL

    private static final String ACCESSIBILITY_SCRIPT_CHOOSER_JAVASCRIPT =

        "javascript:(function() {" +

        "    var chooser = document.createElement('script');" +

        "    chooser.type = 'text/javascript';" +

        "    chooser.src = 'https://ssl.gstatic.com/accessibility/javascript/android/AndroidScriptChooser.user.js';" +

        "    document.getElementsByTagName('head')[0].appendChild(chooser);" +

        "  })();";

它就是在最後把https://ssl.gstatic.com/accessibility/javascript/android/AndroidScriptChooser.user.js給inject到page

還沒去仔細看js裡面的內容, 似乎都是一些基本的東西的樣子, 還不太知道他的用意, 不過應該跟加速(?) Google本身的頁面有關係, 不然其他web site應該也沒用到這些東西

2012年2月5日 星期日

[Kindle] 使用Calibre來建立中文的分類 - Kindle Collections plugin

雖然Kindle keyboard有鍵盤, 但也只能輸入英文, 因此也沒辦法建立中文的分類, 有時候還蠻頭痛分類的命名

自從買了Kindle後, 還蠻常用Calibre的, 不過很慚愧的是, 常用它來轉文件卻很多功能都沒去發現到, 今天為了想改個Kindle的字型, 才發現它很多好用的plugin可以用, 其中一個就是Kindle Collections plugin

安裝的方法:

_2012-02-06_12
---->

_2012-02-06_12

----> Get a new plugin

然後找到Kindle Collections安裝即可

裝好後可能會沒看到任何東西, 所以必須要去Preferences -> Toolbar設定

選擇"The main toolbar when a device is connected", 從左邊找到Kindle Collections把它放到右邊去, 這時候當你Kindle連上電腦後就可以看到這樣的按鈕在toolbar上:

_2012-02-06_12

它提供的功能包含讓你從Calibre同步分類過去, 也可以手動編輯分類, 我不想同步, 所以我用到的只有手動編輯

另外值得一提的是它有一個"Modify Kindle Settings"的功能, 可以讓你在不用Jailbreak下換字型 (這也是我今天最主要的目的):

_2012-02-06_12

在做這件事之前, 必須先在你Kindle的根目錄開一個"fonts"的目錄並把你的ttf字型檔放進去(檔名格式是xxx-Regular.ttf, xxx-Bold.ttf)

我還蠻喜歡Android ICS的蘿蔔頭(Roboto)字型的, 不過早上弄了半天一直不成功, 後來才發現, Roboto只有英文字型, 如果在中文書內改變字型, 就會跑回預設設定, 也就是原先預設的字型

解決的方法就是要合併中文字型進去, 在Android中, 中文字型是放到DroidSansFallback.ttf去了, 這時候可以用fontforge來合併字型

這邊有提到怎做:

  1. http://7thgen.info/blog/2008/07/merging-font-with-fontforge/
  2. http://fontforge.sourceforge.net/scripting.html

 

Open($1 + ".ttf")

SelectAll()

ScaleToEm(1024)

Generate("temp.ttf", "", 0x14)

Close()

Open($2 + ".ttf")

SelectAll()

ScaleToEm(1024)

MergeFonts("temp.ttf")

Generate("new_" + $2 + ".ttf", "", 0x14)

Close()

 

 

因為Roboto除了正常字體外還有粗體, 斜體, 粗斜體等等字型檔, 我不太確定只合併一個夠不夠, 所以小改了 1 裡面提的script, 假設把上面的script存成merge.pe , 執行的方法如下:

fontforge -script merge.pe DroidSansFallback Roboto-Regular

依序再把其他字型合併

這是正常改成Roboto的結果:

Screen_shot-57283

按"Aa"鍵可以挑字型, 這時候你可以看到字型設定在"alt", 這方法的缺點是, 千萬別改成其他字型, 要不然設定又會跑回預設, 也會找不到"alt"

中文字型也有比原先好看點, 但我還不是很滿意, 之後再來試試其他字型:

Screen_shot-57285

但選單的字型是不會跟著改的, 還是原來的:

Screen_shot-57286

 

 

最後....上面Kindle的screenshot是怎抓的? "Alt + ↑ + G"

2012年1月28日 星期六

[筆記] 用SSH X11 forwarding連結Mac & Linux

兩台電腦沒兩台螢幕還挺不方便的, 用ssh連到另一台Linux用command line的缺點是一些X11 apps都沒辦法用, 不過好像ssh也不是只有文字可用

ssh -X my_host

用上面的方式就可以用X11 forwarding的模式連到Linux的那台, 這時候執行任何一個X11程式, 視窗就會在你的電腦顯示而非遠端那台Linux, 舉個例, 我從mac mini連到一台遠端的Linux執行banshee, 這就是mac mini上得到的結果(這screenshot有兩個視窗, 上頭是banshee run on X11, 下頭是terminal, 用ssh -X連到Linux並執行banshee):

_2012-01-29_1

"男人"(man)的說明是這樣寫的:

 

-X      Enables X11 forwarding.  This can also be specified on a per-host basis in a configuration file.

             X11 forwarding should be enabled with caution.  Users with the ability to bypass file permissions on the remote host (for the user's X authorization database) can access the local X11 display through the forwarded connection.  An attacker may then be able to perform activities such as keystroke monitoring.

             For this reason, X11 forwarding is subjected to X11 SECURITY extension restrictions by default.  Please refer to the ssh -Y option and the ForwardX11Trusted directive in ssh_config(5) for more information.

 

 

 

 

2012年1月23日 星期一

[拉麵食記] 東京駅一番街 江戶甘(麵や七彩)

DSC00879

這是這次去東京吃的最後一碗拉麵了, 也是唯一一家有排隊等的, 這家店白天叫麵や七彩, 晚上叫江戶甘, 似乎連菜單也會不同

我點的是看板上寫的夜晚人氣No. 1的, 這湯頭是味噌系的, 不過這一碗也是這次我吃的三碗中的唯一稱的上災難的, 並非我不喜歡味噌拉麵, 我在台灣的誠屋吃也常點他的味噌拉麵, 但這碗, 我實在無法喜歡, 湯頭厚重, 我喜歡厚重湯頭, 不過這湯, 不是厚重而已, 而是過於雜亂....剛端上來的時候, 上面還有看到一沱cheese粉, 本覺得蠻特別的, 但一喝湯, 完全混亂了我的味覺

麵是粗的扁麵, 口感還好而已, 叉燒過乾, 沒啥油脂(湯頭裡倒不少油脂), 半熟卵是還不錯

店裡的服務人員的名牌, 看上去好像都是中國姓(吳, 鄭, 鐘), 在店內沒講中文批評, 要不搞不好還真聽懂.. :P

2012年1月22日 星期日

[拉麵食記] 吉祥寺 麵屋武藏 虎洞 - 超有料的虎麵

DSC00282

這家位於吉祥寺車站附近, 這次是去三鷹美術館(離這走路約二十分鐘)回程去吃的

_2012-01-22_9

店面不大, 只有兩排座位, 很巧的是, 我們買了食券進去後, 第一個碰到的就是我們在三鷹美術館碰到的台灣人(在三鷹時還幫他們照過相)

這家店, 如果是喜歡重口味以及大份量的, 絕對會感動到流淚, 一進去, 來跟我們服務的店員居然是講中文, 可能是打工的留學生吧....他跟我們說不管是大碗還是特大碗, 都是一樣價錢, 看來麵是夠吃到飽吧...還好我沒點最大的, 份量已經是很多了, 再大應該會撐死

點了招牌的虎麵

DSC00289DSC00294

麵一送來, 第一個映入眼簾的絕對是那三塊令人垂涎三尺的叉燒.....三塊叉燒但卻是兩種不同的, 一種是常在拉麵上看到的那種形式, 另一種像是我們吃的焢肉

這叉燒絕對是極品, 肉大又實在, 又入味, 還有兩種不同的口感

湯頭, 很鹹也非常非常之濃郁, 一入口, 滿嘴都是那個湯頭的味道

麵條....超級彈牙, 非常的好吃, 個人認為, 以麵條自豪的一蘭都沒它好吃, 整碗麵以麵條為最高, 應該是手工的, 所有的麵條都存放在這:

DSC00286

店內蠻昏暗的, 但裝潢還頗有點味道, 煮麵的師傅一直相當的忙碌:

DSC00302DSC00288

本來當天我還打算回到東京車站到一番街再吃一碗拉麵, 但中午吃過這碗後, 到了東京站, 我跑到了拉麵街晃了好幾圈, 滿腦袋都是中午吃過的味道, 事實上嘴裡也殘留了這碗麵的味道, 以致於到了拉麵街看了好幾家, 即使是排滿長龍的六厘舍, 我都提不起任何食慾, 結果當晚就改吃了別的

這家是值得大推的店...

[拉麵食記] 東京駅一番街 斑鳩

整理照片還真是累人...從日本回來那麼多天, 八百多張照片還沒整理完.. :( 只好先來寫寫食記

這次總共吃了三家, 斑鳩是第一家...傳說東京駅一番街網羅了一堆拉麵名店, 斑鳩就是其中一家

DSC00118

從東京駅八重洲南口往地下走, 很容易找到這一堆拉麵店, 觀察了兩天, 六厘舍是排隊最常的, 不過我沒吃那家, 一來也沒吃過沾麵怕不習慣, 二來真的排很長

斑鳩就還好

本來是想點碗比較正常的吃, 不小心就點到辛口, 不過也不怎辣

DSC00121DSC00122

湯頭不是一般豚骨的湯頭, 而是豚骨混合魚介類...印象中在台灣好像就花月嵐的銀次郎是這種湯頭, 但他湯頭比銀次郎濃厚許多, 上次去大阪吃的黑潮也是這種湯頭

不過, 老實說, 我不喜歡他的湯頭, 濃郁歸濃郁, 似乎膠質也頗多, 但總覺得有點點的..膩..

半熟蛋倒是相當的好吃, 麵條也不錯, 叉燒則是中上

整體說來, 總覺沒傳說中的好吃, 也不是我喜歡的類型.....

2011年12月27日 星期二

[筆記] Connect java client to a node.js server with Thrift

Thrift是由Facebook開發的一套RPC system, 廣泛的被很多軟體應用, 像是HBase, Hadoop, Cassandra... 也支援了許多語言 , 可以跨語言做RPC
但....Thrift的document真是么壽的少...少的實在有夠可憐....本來想說實作一個java client連到node.js寫的server, 搞半天東挖挖西挖挖後才搞定.....
首先是安裝到我的mac就把我搞暈了(加上感冒本來就暈), 一開始我用macport裝, 但裝完後, 找不到libthrift.jar, 所以只好上網站抓source來build, 所幸可以只build java library的部份, 不用整個thrift都build, 這部份倒不難, 用ant就搞定了
裝完thrift後, 寫好程式, build java版本時就出了問題了, javac說TClient不是個interface, 追進code才發現, 我自己build的jar是最新版的 (0.8), 但port幫我裝的是0.6, 產生的codes完全不相容, 後來改用brew裝(就是不想從頭從Source build), 終於是0.8版的了(port上的也太舊了吧)
這邊實作一個簡單的加法器, Server side是跑node.js, Client是java, 有空在來試試別的組合, 建一個新檔"computer.thrift", 內容如下:


這邊定義一個簡單的Service - "Computer", 只含有一個方法"add", 內容很簡單, 就是用來回傳a+b的值, "namespace java com.thrift.gen"的用途就是指定產生的java code的package, 如果沒指定就是沒package, i64指得就是64bit integer
接下來就是要用thrift產生對應的程式碼:
thrift --gen js:node --gen java computer.thrift
這行指令同時產生for node.js的版本(在gen-nodejs目錄), 跟java版本
Server implementation
先安裝thrift module (for node.js)
npm install thrift
實作server.js:


在Server裡面實作add, 由於是asynchronous的, 所以結果由callback回傳
至於Client端的部份也蠻簡單的:


在網路上找到的sample, 都使用TSocket, 但用TSocket在這範例, client/server都會掛掉, 追了server code發現, node.js server default應該是用Framed transport, 所以在Client端加上TFramedTransport就OK了

2011年12月8日 星期四

[開箱] 送自己的遲來的生日禮物 - 來自奧地利的耳機 AKG K-701 (非Beats喔.. XD)

想買個生日禮物給自己想半天終於決定是這個了, 只是今天收到已經早過生日很久了.. :P

剛收到, 聲音雖然還沒開, 不過已經很不錯了, 不過現在評論還太早, 所以先來寫寫開箱文吧..

P1060973

耳機大, 盒子大是很正常的, 不過這包裝的設計不錯, 有種開箱的驚喜感...

一打開箱子看到第一個字是:

P1060974

"Expect".....的確...還蠻期待裡面的東西...

再來的是

P1060976

"and discover".....這層開下去就真的會發現耳機了.....

P1060977

喔耶..我買K-701而非K-702就是因為這個"白"....而且這又多一個底座(雖然這也沒很好)....整個就有高尚感(我不要潮Beats.. :P)

P1060979

耳機拿出來之後又有這個字: "Perfection"

Expect...and discover...Perfection!

P1060980
全身照
P1060981
白色大耳罩...挺舒服的
P1060982
上頭這應該是皮的吧

 

剛剛聽了一整個小時, 有流行樂, 古典, 爵士....有層次每種樂器分離感不錯, 鋼琴聲好清脆喔.. :P

2011年12月3日 星期六

[開箱] Electrolux伊萊克斯ZUS3960超靜音塵蟎吸塵器

今天家裡多了部 Electrolux UltraSliencer, 這是我們家第二部Electrolux的吸塵器, 前一支是手持立式的

本來先是去大遠百的專櫃看, 不過價錢比起老婆在網路上看到的還貴很多, 也沒附塵蟎吸頭, 加上專櫃小姐解釋半天, 我還是搞不懂, 三萬多的吸塵器跟一萬多的到底差哪裡, 買東西還是要買實用, 總不能說貴的就好

後來跑去老婆在網路上看到的, 竹北簡單生活館(在經國路上), 價位跟百貨公司的還差真多, 多了一支價值五千的塵蟎吸頭的價錢還跟百貨公司沒附的一樣價錢, 贈品還一堆, 老闆親切, 而且解說詳細, 讓我們覺得買這隻就很夠用了, 不過買到三萬多那麼頂級的, 加上這個是為了容易過敏的小遠, 這台就已經滿足該有的功能了(靜音, 吸力強, HEPA 12濾網)

先看看贈品:

P1060927

塵蟎吸頭, 多送的HEPA 13濾網, 膳魔師保溫瓶, 集塵袋...還頗夠誠意的

外包裝盒

P1060928
P1060930

第一層

P1060931

第二層, 本體出現

P1060933

外觀 & 集塵袋

P1060941
P1060944
P1060945

HEPA濾網

P1060950

塵蟎吸頭

P1060957

來張全身照

P1060968

跟iRobot Roomba合拍一張吧!

P1060970
最後...靜音測試:

聲音似乎好像還蠻小的, 跟一般吸塵器比起來, 比起Roomba似乎還安靜一點

2011年11月5日 星期六

[筆記] Sencha Touch + Facebook Graph API

Sencha Touch 2.0在OO的包裝上做的還算不錯, 把MVC的角色切分的還蠻清楚的, 以List為例, 大概就像這樣:

_2011-11-05_5
但它的document實在很糟糕, 光看他的document大概僅知道, Proxy可分為兩類Client(Memory, Local Storage ... )與Server (AJAX, JSONP ...)

但如果是要用Facebook Java script SDK去存取Facebook Graph API這類, 似乎就不知道怎歸類了, 如果直接用JSONP去存取Graph API, 則碰到Authentication error.. orz

那...就只好寫一個Proxy了, 像這樣:

https://gist.github.com/1341345.js?file=gistfile1

以下是一個使用這範例存取使用者自己的Facebook Group的範例:

https://gist.github.com/1341348.js?file=gistfile1

2011年10月21日 星期五

[Android] javascript injection in WebView

上次寫了一篇"startActivityForResult and callback in WebView", 本篇則是上次這篇的延伸應用, 這是有人問我如何inject一整個javascript file到一個web page內(剛剛回顧了一下自己這篇, 發現我把它叫做javascript injection)

其實原理是一樣的, 在載入完原本的web page之後, 一樣透過URL來插入script:

mWebView.loadUrl("javascript:var js = document.createElement('script');js.type = 'text/javascript';js.src = 'http://my_host/1.js';document.getElementsByTagName('head')[0].appendChild(js);");

一樣是透過"javascript:"來inject, 不一樣的只是, 這次我要插入的是一整個js檔, 所以這串javascript的目的就是要建立一個新的script element, 並將它插入head裡, 這樣任務就達成了

但這方法的缺點是, 來源必須是一個url, 也就是要把script file放在server才可以, 如果script是來自應用程式本身, 比如說放在應用程式apk裡面, 或是放在data partition就不行了

在Honeycomb之前的版本, 我還沒想到一個比較好的解法, 但Honeycomb (API level 11, 含11)之後就有一個比較簡單的解法了

作法就是overwrite WebViewClient的shouldInterceptRequest,這似乎就是為了類似的用途而生的呀~~

這邊我將來自於apk asset目錄裡的檔案的url定義成"asset://", 因此, 想當然耳, 要導向的url就是這種, 作法也很簡單, 將asset的input stream包裝成WebResourceResponse就可以了, 這樣只要"js.src="後面的url是"asset://xxx.js", 這js的來源就是apk裡的asset

缺點是, 這方法只適用API level 11之後

延伸應用? 其實應該可以利用這個API做出一個lightweight版本的client side serlvet (這樣叫好像也不是很貼切, 反正就是不需要透過http去存取), 不過因為資訊只有url可以使用, 因此不能implement "POST"...

 

題外話, 這個我是在Ice cream sandwich的emulator上測試的, 不過真的要小抱怨一下, 開個emulator要開很久, 看篇漫畫結束後還沒跑完, 如果叫developer完全用emulator開發, 真的會抓狂吧....這樣開發者的開發意願也會降低吧.... = ="

[Android] If you can't remove it, at least you can still "disable" it

Android 4.0 Ice Cream Sandwich 有一個新功能是, 使用者可以停用(Disable)系統上預載的應用程式, 以往系統預載的應用程式是不能被刪除的, 現在, 新的版本多了一個按鈕讓你可以停用它:

Device-2011-10-22-001443
當你把預載應用程式的icon拖到App Info就可以看到一個Disable的按鈕, 按下去後, 你就不會在程式啟動介面上看到他了

這是中國人所謂的..."眼不見為淨"嗎?

被Disable掉的應用程式基本上並沒被移除, 它還是在你手機裡面, 並不會因此多出一些可使用空間, 只是你看他不爽, 以後就可以不用再看到他了....(呃, 不爽用就不要用不就好了)

這是新功能嗎? 對這介面上來說...這按鈕...是新的

PackageManager裡面有個叫做setApplicationEnabledSetting , 這用途就是用來作這種事的, 所以做這樣一個功能到底多複雜呢?

PackageManager pm = getPackageManager(); pm.setApplicationEnabledSetting("com.geekyouup.paug.awesomepager", PackageManager.COMPONENT_ENABLED_STATE_DISABLED, 0);

就差不多上面那樣

當然啦, 是沒辦法隨便寫一個軟體去disable人家的應用程式的, 如果可以, 不就天下大亂了, 這API只能用在跟你的應用程式相同的uid的package

不過對於系統應用程式來說, 就沒這限制了吧

至於這API啥時有的?        Since API level "1"

 

Ok, So.....

 

We got a new feature..........

 

2011年10月20日 星期四

[筆記] Tabs on JQuery Mobile and Sencha touch

JQuery mobile跟Sencha touch都是蠻完整的mobile web framework, 兩者各有擅長, 比較起來以開發的角度我比較喜歡JQuery所標榜的"Write less, Do more"的哲學下的架構, 而不喜歡Sencha touch把一堆html寫到code裡面去, 但Sencha touch又有比較好的UI look and feel

以tab panel為例,

Sencha touch:

Photo_11-10-21_1_33_28
jQuery mobile:
Photo_11-10-21_12_25_52

這兩個作法大異其趣 

Sencha 的HTML 內容

裡面除了script以外根本就是空的, UI的創建放在app.js(以這範例而言)裡如下:

https://gist.github.com/1301828.js?file=gistfile1

Tabs的內容在哪? items裡分別就是兩個tab, html直接以字串的形態寫在裡面, 老實說, 我覺得這很醜, 也容易出問題, 如果頁面的內容是相當複雜的, 這樣並不是很好

 

再看看jQuery Mobile的作法:

這份source code有點偷懶, 剪剪貼貼過來的, 不過其實就這麼一個html, 並不需要寫額外的javascript code, 乾淨多了  

如果也可以用類似的寫法寫Sencha touch的UI似乎應該會比較好一點, 像是這樣寫:

做了個實驗, 剛寫下這段code把上面那段轉成跟第一個範例一樣的畫面:

https://gist.github.com/1301855.js?file=gistfile1

看來如果再多層包裝其實也不用醜醜的通通把UI hard code到js codes裡面去