壞蛋的部落格

由於手頭上有正在開發手機程式 , 但不想因為改版上架時間的問題 , 所以採用了一種做法 , 就是把 web 的內容用手機上的原生程式讀進 webView 顯示 , 除非原生程式有問題才會有改版並重新上架

目前是採用 Titanium 這套開發套件撰寫 ios 及 android 雙平台的程式 , 而畫面的部分採用遠端的 web 呈現 , web 和手機的原生程式透過某種機制溝通做到 web 也可以存取行事曆的功能

說白一點 , 用 Titanium 開發的程式主要就是讀取遠端的 HTML , 而遠端的 HTML 就是 mobile app的介面 , 所以設計介面所採用的 framework 就很重要 , 我試過了好多套目前常看到的 , 分別講一下

JQuery Mobile

這是以 jquery 為 base 開發的 , 設計方式要符合 jQuery Mobile 所定好的 HTML Code 及 CSS 規範 , 個人感覺 jQuery mobile 很容易開發 , 但也有不足之處 , 由於手機上的介面常常會用到觸控滑動 , 目前 jQuery Mobile 無法做到一點 , 就是當我需要做一個上下方都有一個固定的 BAR , 中間需要滑動 , 就很難做到 , 這可能要歸罪 iphone 4 或 android 的 webkit 尚未支援這種方式 , 據說 ios 5.0 的 webkit 就會有這原生功能 ,但目前有實驗性質的 scroller 可以測試 , 這算模擬的 , 個人覺得不夠順就是了 , 於是我放棄這套 framework , 因為觸控滑動實在太重要 , 目前 Drameweaver CS 5.5 有將 jQuery Mobile 和 PhoneGap 整合進來 , 我想有些美工人員應該會對這套有興趣

jQtouch

這和 jQuery mobile 一樣 , 開發的方式其實差不多也是 jquery base , 但一樣沒有好用的 scroller , 而且比起 JQuery Mobile 來說 UI 項目比較少 , 不過有一套 DataZombies 的套件是把 jQTouch fork 出來家上了 iScroll 這個 plugin 進去可以達成上下方有固定bar 可以當選單的功能 , 但是一樣不順 , 我測試過在 iphone 3GS 下挺順的 , 但 Android 2.3.3 的系統則很 lag , 個人感覺 jQtouch 其實和 jQuery Mobile 都有相同的特性就是好設計 , 但一樣 scroll 功能沒有很完善 , 所以在求完美的情況下 , 也放棄了

Dojo Mobile

這是以 dojo 為基礎而開發的 mobile framework , 功能強大 , 幾乎所有用原生手機的 framework 提供的內建 UI 方式 , 這套都有實做出來 , 但常常有些時候會發生畫面跑不出來的情形 , 看官網的 demo 有時候也要重整才出的來 , 雖然功能強大 , 但這種不穩定的狀況下, 我也放棄採用了

Wink Toolkit

這套算是著重在小巧 , 效能的 framework , 該有的 UI 功能都有 , 但由於太過簡化 , 按鈕也沒有按下的效果 , 反而要自己花腦筋 , 其實不算好設計 , 而它有一點令我眼睛發亮的原因是  , 她可以做到在有上下固定 bar 的選單時 , 還可以用到原生 scoll bar , 順到不行 , 啊這就奇了 , 怎麼只有 Wink 做的到 >< , 而我目前沒有採用它仍是因為很多 UI  元件都做半套的 , 按鈕沒有按下的效果 , 選單沒有點選的效果 ..... 但我很期待這套 framework 若有對 UI 做加強後 , 應該會是一個好設計 , 效能又好的 framework

Sencha touch

這是以 ExtJS 4.0 為基礎所開發的 , 我可以這麼說 , 它是最難上手 , 開發時 , 應該用不上 HTML 了 , 因為完全都是物件導向 API 的開發 , 但我為何要提它 ? 因為我目前就是用這套來開發介面 , 因為玩過後 , 感覺起來他應該是目前功能上和 Dojo Mobile 不相上下的一套 , 且不會有 Dojo 一堆奇怪問題 , 而且也有上下固定 bar 中間可以 scroll 的設計方式  , 而在目前萬元以上的智慧手機上執行起來也很順暢 , 雖然其 scroll 效果在 android 上仍然有點小 lag , 但還可以忍受 , 至少不會比 jQTouch 或 jQuery Mobile 在畫面複雜時 , 滑動起來變成是一種折磨 , 而用這套開發最大的缺點 , 我想就是他已經無法做網頁最佳化 , 如果說要拿這套開發一個手機版的網站 , 我認為不適合 , 但若拿來開發一個類手機程式的 UI , 我覺得挺適合的 , 目前已經有用到其 MVC 的概念 , 感覺有點類似 PHP YII 或 Ruby On Rails 了 , 他的 ORM 資料的定義方式很類似我們使用 PHP MVC Framework 的方式 , 也有做到關聯性 , 並且可以將資料從遠端相對應的 json 讀到 ORM , 或存到本機的 WebStorage , 做離線資料存取的使用非常棒 , 應該這套是用到 HTML5 功能最多的一套 Framework 了

總結

其實每套 framework 都有他的優缺點 , 並非我喜歡的就是適合大部分的場合 , 但有些時候總要取捨 , 碰那麼多套也有好處 , 就是知道甚麼場合用那套 , 如果是要作一個入口網站 , 是需要有搜尋引擎的索引增加排名的 , Sencha touch 會被我丟了 , 而若想要快速建立一個手機網站 , 那麼 jqtouch or jquery mobile 是首選 , 而我本人最期待 wink toolkit , 因為他真的所有 UI 功能都有了而且效能最好  , 但就是做半套 >< 我真的很希望那天他的所有 UI 都已經擬真到和一般 mobile app 一樣 , 未來兩三年在智慧型手機的效能越來越好的同時以及瀏覽器的硬體加速做的越來越好時 , 手機程式設計應該會有越來越多人用 html + javascript 方式來做了

需求是這樣 , 以下 HTML CODE 要以 input 欄位內的值重新排序為一個新的 table

<form id="form1" name="form1" method="post" action="">
  <table width="200" border="1">
  <tbody>
    <tr>
      <td><input name="textfield[]" type="text" id="textfield_99" value="99" /></td>
      <td>99</td>
    </tr>
    <tr>
      <td><input name="textfield[]" type="text" id="textfield_6" value="6" /></td>
      <td>6</td>
    </tr>
    <tr>
      <td><input name="textfield[]" type="text" id="textfield_9" value="9" /></td>
      <td>9</td>
    </tr>
    <tr>
      <td><input name="textfield[]" type="text" id="textfield_10" value="10" /></td>
      <td>10</td>
    </tr>
    <tr>
      <td><input name="textfield[]" type="text" id="textfield_4" value="4" /></td>
      <td>4</td>
    </tr>
    <tr>
      <td>
        <input name="textfield[]" type="text" id="textfield_1" value="1" /></td>
      <td>1</td>
    </tr>
    </tbody>
  </table>
</form>

這個問題從今早搞到晚上 , 看過了很多 jquery 範例 , 還有朋友建議用甚麼 jquery 的一個 plugin tablesorter …, 甚至自己想寫個泡沫排序法 >< … 搞老半天都不得我意

後來才發現 , 原來 javascript 本身就有個很好的 sort 可以用 , sort 可以用自定 function 的方式來寫 , 搭配簡單 jquery 就可以重新排序了

範例如下

<script>
 
$(function() {
	var mylist = $("table tbody tr").clone(true).get();
	mylist.sort(function(a,b){
		var compA = parseInt($(a).find('input[type="text"]').val());
		var compB = parseInt($(b).find('input[type="text"]').val());
		return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
	});
 
	$("table tbody tr").remove();
	$("table tbody").append($(mylist));
});
 
</script>

這原理也很簡單 , 先用 jquery 去 clone 所有 tr 節點為 mylist  , 然後 mylist. 為 DOM Elements , 並且可用 javascript 原生的排序含數 , 裡面的寫法就是自定函數 , 用 jqeury 去抓出 input 的值為 compA/compB 並且比對 compA/compB 的大小返回給 sort 就好了 …. 超簡單的

介紹一個以中文影音的網站開發教學網站 , 我是不小心從 Visual Studio 開始頁看到的

這網站叫做邊學邊做系列影片 ,  ,網站目前的教學內容還不多但以後應該會越來越多 ,雖然教學文鍵還不多 , 但我看到裡面關於 JQuery 的教學挺不錯的 , 也有 Silverlight  , 有興趣的人可以到下面的網址去參觀參觀

http://msdn.microsoft.com/zh-tw/asp.net/dd310332.aspx

如果無法正常觀看的朋友們 , 可能是沒有安裝 Silverlight , 因為所有影音教學都是透過 Silverlight 這個元件來播放的

網址 : http://code.google.com/p/jquery-api-zh-cn/downloads/list

原來有熱心的人翻譯了 JQUERY 的 API

真是太棒了 , 上面還有 DreamWeaver CS3/CS4 的外掛檔喔

dojo 要做 AJAX 方式的檔案上傳其實是透過 iframe 來實做才有辦法實做 , 因此 dojo 特別提供一組指令 dojo.io.iframe 方法很簡單 , 網頁範例如下

閱讀全文…

是這樣的 , 我最近用 dojo 來輔助設計版面布局有使用到 dijit.layout 下的很多元件可以做很炫的排版 ,  當然使用這些元件的時候 ,瀏覽器會花比較多的時間來處理畫面 在 IE7要開始執行包含有 dijit.layout的網頁時候 , 一開始就會先顯示尚未編排好的版面 , 要等到 dojo 都解析完整個頁面重新排版的時候才會正常 , 因此Client 端會感受到畫面一開始是錯的,然後變正確,另一種說法是 , 畫面在瞬間內會跳 ….

而這些狀況 , FireFox ,Google瀏覽器都不會出現 , 這更讓我應證了 IE7 是個 … 嘿嘿嘿 …

好了 , 不管 IE7 效能怎樣 , 龜毛的我總是要求要更完美些 , 於是找一找 Google , 有人做出一種頁面一開始會顯示 progress bar 的動畫 , 然後用 fade in out 的方式再把頁面呈現出來 , 看一看人家實作的方式 , 其實正好解決我的問題 , 其實我的問題很簡單用下面的方式就可以解決畫面跳動的問題了

首先我們要建立一個長寬都是 100% 的絕對定位的 layer , 將這個 layer 設定 index 在很高層以覆蓋所有頁面 , 因此一開始畫面就是空的 , 最後再使用 dojo.addOnLoad 去執行關閉這個 layer, 於是 dojo 所重新排版的頁面就出現了

例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<style>
#overlay {
	background-color: #ffffff;
	width: 100%;
	height: 100%;
	index: 9999999;
	position:absolute;
	top:0;
	left:0;
} 
</style>
<script>
	function init_layout() {
		//設定 <div id="overlay"> 的 style 屬性以關閉這層 layer
		dojo.style( dojo.byId("overlay") , "display" , "none" );
	}
	dojo.addOnLoad(init_layout);
</script>
<body>
<div dojoType .... >
	<!-- 這是網頁原始內容 -->
</div>
<div id="overlay"></div> <!-- 這是用來覆蓋原網頁的 layer -->
</body>

其實很簡單吧 ^^ 雖然 IE7 還是要等差不 0.2 秒的白畫面才顯示出全部頁面 , 但至少比畫面跳動好了 , 而 FireFox 2.0 卻連白畫面都沒看到就直接顯示排版好的畫面了 , 真的是 ….

我們做好的折疊式選單是不是點選Tag(標籤)的時候會產生虛線 , 是不是很難看 ? (個人主觀)

所以我從 Google 找了一些消除虛線的 css 語法

只要修改 SpryAccordion.css 的 .Accordion 內容加上兩行即可

原始內容應該是

 .Accordion {
 overflow: hidden;
}

閱讀全文…