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:

六.注意事項
  1. 更新
    要做任何檔案異動,除了檔案本身更動外,一定要讓manifest有所變化,否則系統只會一直讀取到Cache的資料,通常可以在manifest內加入一個版號宣告,只要有更動,客戶端即會自動更新Cache
  2. 不使用cache
    Application Cache與Browser一般的Cache暫存並不相同,並無法透過Browse的F5來清除, 要讓網頁不使用cache,必須透過刪除manifest內CACHE清單來達到
  3. 刪除manifest檔案
    直接刪除Server上的manifest檔案,也會讓Client不使用Cache
  4. 不要使用舊有的防檔案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'
    }
]);

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