程式搖滾: 8月 2012

2012年8月30日星期四

Backbone.js and RequireJS Slide

Backbone js and requirejs from Chi-wen Sun

2012年8月16日星期四

HTML5 Application Cache

一.說明
HTML5提供了Application Cache機制，可以讓靜態檔案Cache在Client端
減少對Server的Request,加速頁面載入，當網站上資料有異動，需要客戶端
更新Cache資料，也可以很簡易的做到，進一步還可以達到離線閱讀的目的

二.原理
要使用了Application Cache，必須在網站上加上一個manifest檔案
manifest檔案內設定了要cache的檔案清單,當Client連線後會儲存保留
menifest檔案在Client端，每次連線一定會去比對Client端的manifest檔案與
Server端上的manifest檔案是否有異，若有異動，則會重新由Server讀取檔案儲存到Client的Cache，否則就會去直接讀取Client端的Cache顯示頁面資料

三.Web Server上需要的設定
在Web Server上需要對manifest的檔案類型做MIME Type設定
副檔名可以自訂
通常會是用.manifest 或 .appcache
例在Apache Web Server設定加上

AddType text/cache-manifest .manifest

四.網頁上使用

 <html manifest='cache.manifest'>

在所有會成為進入點的網頁，都需要加入設定指向manifest檔案

五.manifest檔案設定內容

CACHE MANIFEST 必要的第一行
CACHE:
區塊設定要cache的檔案清單  
NETWORK:
區塊設定一定要由網路讀取的清單  
FALLBACK:
區塊設定當讀取失敗，要轉向使用哪個替代內容顯示

例

CACHE MANIFEST
#ver 0.0.1
CACHE:
index.htm
/js/main.min.js
/css/app.css
/img/btn_img.png
NETWORK:
*
FALLBACK:

六.注意事項

更新
要做任何檔案異動，除了檔案本身更動外，一定要讓manifest有所變化，否則系統只會一直讀取到Cache的資料，通常可以在manifest內加入一個版號宣告，只要有更動，客戶端即會自動更新Cache
不使用cache
Application Cache與Browser一般的Cache暫存並不相同，並無法透過Browse的F5來清除，要讓網頁不使用cache，必須透過刪除manifest內CACHE清單來達到
刪除manifest檔案
直接刪除Server上的manifest檔案，也會讓Client不使用Cache
不要使用舊有的防檔案cache機制
通常會在讀取如js檔案會加上一個版號來控制檔案cache
例
```
 <script scr="xx.js?ver=1.0"></script>  
```
使用Application Cache請不要再使用這樣的手法，把Cache的管理都交給manifest處理即可

2012年8月6日星期一

Sencha Touch 2 : 在View內使用html,tpl與itemTpl

在View裡除了使用內建的Compontent外，若需要產生html來當作View的內容
可能會在View的Config內用到以下幾個3種Tag
一.html
直接將html內容放到view內，若有需要被操作的物件是以html產生，建議以此方式放入可使用
1.String
例字串array會自動使用join串接

html:[            
    "this html block..........",
    "kkman"
].join('')

2.HTMLElement
例 array需以join('')串接,否則會被當成整個字串顯示

html:[
    "<div>this html block..........</div>",
    "<hr/>",
    "<div>hello</div>"
].join('')

3.Ext.Element ？？

二.tpl
當為動態資料產生的內容，利用setData傳入資料與tpl產生view的html內容,通常會在一般的view內使用
一定要有執行setData(),tpl才會被render產生html
1.String

tpl:"<div><div>Hello me</div><div>{name}</div><div>{rock}</div></div>"

tpl:[
    "<div>",
    "<div>Hello me</div>",
    "<div>{name}</div>",
    "<div>{rock}</div>",
    "</div>"
].join('')

3.Ext.Template[]
設定tpl的動作一定要在執行setData前完成，也就是說可以設定在config的tpl
或是在initial程序內執行設定(在setData前設定好)
例在config內設定

tpl:new Ext.Template("<div>Hello {name}.</div>")

例在initial程序中使用

this.setTpl(new Ext.Template("<div>Hello me {name}.</div>"))

4.Ext.XTemplate[]
例
在initial內執行

this.setData([
    {
        name:'ozzy',
        type:'metal'
    },
    {
        name:'linda',
        type:'Rock'
    }
]);

在config內設定

tpl:new Ext.XTemplate(
   '<tpl for=".">',
        '<p>{name}</p>',
        '<p>{type}</p>',
        '<hr>',
    '</tpl>'
)

三.itemTpl
只有在List View可以使用，會將List View所關聯的store或以setData設定array data
每筆資料套用到itemTpl上,注意這裡接受的是XTemplate
1.String
例

itemTpl:'<p> {name}</p><p> {type}</p>'

2.String[]
例

itemTpl:[          
    '<p>{name}</p>',
    '<p>{type}</p>',
    '<hr>'            
].join('')

3.Ext.XTemplate
例

itemTpl:new Ext.XTemplate(          
    '<p>{name}</p>',
    '<p>{type}</p>',
    '<hr>'            
)

4.使用setData
例

var list={
    xtype:'list',
    itemId:'mylist',            
    itemTpl:new Ext.XTemplate(          
        '<p>{name}</p>',
        '<p>{type}</p>',
        '<hr>'            
    )
}
this.getComponent('mylist').setData([
    {
        name:'ozzy',
        type:'metal'
    },
    {
        name:'linda',
        type:'Rock'
    }
]);

四.使用注意事項

不要同時將html與tpl並用，否則html部份資料不會顯示
使用html,內容會被包覆在多層次的innerHtml class node內使用tpl則是將內容直接append進去不做任何節點包裝
若設定的資料為array資料，在tpl內使用for來處理迴圈，list一定要用itemTpl不可使用tpl

2012年8月30日 星期四