AppCan開發架構

1、UI2.0與UI1.0的對比 2012年初，我們發布了AppCan行動裝置 App開發平台，在這個版本中，我們內建了基於JQMobile方案的CSS UI架構。這個架構可以協助開發人員遵循一套規則下，快速的開發應用。這套方案中主要採用了組合的概念。例如對一個按鈕的描述，可以通過多個CSS類來組合進行定義，也可以通過 視頻瞭解更多。
這樣通過不同的組合可以產生多變的效果。在實際商用應用開發過程中，它起到了協助我們加快開發進度的作用。但是在開發過程中，我們還是遇到了一些問題，JQMobile CSS架構在這些問題上，表現得比較乏力：
1、1 自動填滿寬度
上圖中同樣一個編輯框加上一個重新整理按鈕的組合。在不同解析度下，如果希望，重新整理按鈕保持一個基本寬度，編輯框自動填滿剩餘地區，在不使用JS的情況下是很難做到的，如果使用百分比控制重新整理鈕的寬度，那麼在低解析度和高解析度之間將會有非常大的偏差。
1、2 類名稱過長
JQMobile方案中，為了協助開發人員能夠更直觀的瞭解代碼，每一個功能類的名稱都比較長。例如ui-page ui-mobile-viewport等。這造成了網頁代碼大小變大，降低瞭解析速度。
1、3 類功能拆分度低
在JQMobile方案中，很多類定義，代碼重複較多，例如預製的多種色彩方案。同時由於拆分度低，經常需要重複定義類來覆蓋其他類中的屬性。
1、4 控制群組合複雜
JQMobile方案中，控制項的實現代碼量很大，一個按鈕需要多個div span嵌套配合多個類才能實現。這造成開發中，介面代碼量增大，不好控制介面。

我們綜合各個項目中的開發經驗，整理匯總了AppCan UI2.0架構，它繼承了UI1.0的優點，並很好地解決了UI1.0的問題，可以使開發能夠更加的簡單。UI2.0架構圖如下: 上圖中，我們可以看到AppCan UI2.0架構在基礎的螢幕適配(RESOLUTION ADAPTER CLASS)基礎上，對元素基本屬性進行了拆分。通過如下步驟來設定一個元素。
　　●　定位-對元素進行布局，確定元素的現實位置大小等[LAYOUT CLASS]
　　●　描邊-對元素基礎屬性進行設定，例如邊框圓角等[BASE CLASS]
　　●　添色-對元素的邊框、文字和背景進行設定[COLOR CLASS]
　　●　插圖-如果元素中需要圖片，從資源中引入圖片類[RES CLASS]

基於基礎元素之上，為了方便開發人員，我們重新定義了控制項，包含BUTTON、LIST、FOLD、INPUT、TAB、RADIO、CHECK、SWITCH。這些控制項可以認為是UI2.0架構的具體案例。通過UI2.0完成的控制項，代碼大小和複雜度，都有明顯的降低，如下例：

UI1.0架構實現的按鍵

<div class="ui-btn ui-corner-all ui-shadow ui-btn-b"> 
　　<span class="ui-btn-inner ui-corner-all">
　　<span class="ui-btn-text ">確定</span>
</span>
</div>

UI2.0架構實現的按鍵

<div class="btn btn-act ubb uc-t1 b-bla uinn c-blu2 c-m4 ">確定 </div>
從上述代碼中可以看到，同樣功能和效果的控制項可以減少三分之二的代碼，嵌套減少到一層，代碼複雜度極大降低。
接著我們詳細介紹如何使用UI2.0架構。 2、UI2.0架構的設計來源——彈性盒子模型 彈性盒子模型是CSS3.0推出的一種布局機制。這種機制與常見的流式布局有很大區別。簡單的理解為，流式布局是通過內容決定父容器大小，彈性盒子模型是，在指定大小的父容器裡來為子項目分配空間，簡單的流式布局例子。
效果： 代碼：

<div style="display:inline;border:1px solid blue">
　　<div style="display:inline;background:#E00">aaaa </div>
　　<div style="display:inline;background:#0E0">bbbb </div>
</div> 上述代碼中是一個簡單的流式布局範例，第1行的div的寬度，是由第2和第3行的div寬度相加來決定的。即如果第2行或第3行的div寬度變化，第1行的寬度也會隨之變化。 我們調整一下代碼，使用彈性盒子模型來布局。
效果： 代碼：

<div style="display:-webkit-box;width:200px;border:1px solid blue">
　　<div style="-webkit-box-flex:1;background:#E00">aaaa </div>
　　<div style="background:#0E0">bbbb </div>
</div> 上述代碼中，指定第1行的div使用BOX方式布局子項目。並指定這個div寬200px。第3行的div的寬度由內容撐開，可以認為是一個指定寬度的div，通過模擬器可以看到寬32px。第2行指定這個div為彈性，佔用1份空間,就代表這個div的寬度是總寬度200px-32px=168px。如果我們改動第1行的div寬度為320px，那麼第2行div的寬度就是 320px-32px=288px。這個機制對於適配各種解析度的螢幕無疑是一把利器。
我們再調整一下代碼。
效果： 代碼：

<div style="display:-webkit-box;width:200px;border:1px solid blue">
　　<div style="-webkit-box-flex:1;background:#E00">aaaa </div>
　　<div style="-webkit-box-flex:2;background:#0EE">bbbb </div>
　　<div style="background:#0E0">cccc </div>
</div> 我們加入了一個佔用2份空間的div。這個時候這兩個彈性DIV到底如何分配空間呢。按照規則來說，第2行應該佔用168px/3=56px，第3行佔用112px，但實際上寬度並不是如此， 通過模擬器可以看到，第34行佔用66px，第35行佔用102px。這是由於當彈性DIV中有內容時，引擎會自動進行調整。那麼如何在有內容的情況下還能夠保持1：2的比率呢。 我們再調整一下代碼。
效果: 代碼：

<div style="display:-webkit-box;width:200px;border:1px solid blue">
<div style="-webkit-box-flex:1;background:#E00;position:relative">
　 <div style="position:absolute;width:100%;height:100%;">aaaa </div>
</div>
<div style="-webkit-box-flex:2;background:#0EE;position:relative">
<div style="position:absolute;width:100%;height:100%;">bbbb </div>
</div>
<div style="background:#0E0">cccc </div>
</div> 這次修改中，我們把內容"aaaa"通過一個使用絕對位置的div進行包含，這時通過模擬器去看會發現，兩個彈性div按照1:2的比率自動分配了空間。 上面我們使用彈性盒子布局時元素都是橫向排序的，那麼怎麼才能讓元素縱向排布呢。我們接著調整一下代碼。
效果： 代碼：

<div style="display:-webkit-box;height:200px;border:1px solid blue;-webkit-box-orient:vertical;">
<div style="-webkit-box-flex:1;background:#E00;position:relative">
　 <div style="position:absolute;width:100%;height:100%;">aaaa </div>
</div>
<div style="-webkit-box-flex:2;background:#0EE;position:relative">
<div style="position:absolute;width:100%;height:100%;">bbbb </div>
</div>
<div style="background:#0E0">cccc </div>
</div> 上述代碼中，我們在第1行的div中指定了高度為200px，使用-webkit-box-orient:vertical來控制子項目為縱向排列。
彈性盒子模型還提供了其他幾個強大的屬性。
●　-webkit-box-direction:reverse;
通過在父DIV中設定這個屬性可以讓子項目反向排列。如下圖: 使用前子項目按照1 2 3 的順序進行排列顯示，當在父DIV中使用此屬性時，自動把子項目倒序排列。這個時候，我們並沒有真的重新按照3 2 1順序排布子項目。
●　-webkit-box-align:center;
通過在父元素中設定這個屬性，當子項目橫向排布時，可以使子項目間實現上邊界對齊、中線對齊和下邊界對齊的效果
如果是縱向排列時，那麼可以實現子項目左邊界對齊、中線對齊和右邊界對齊。
●　-webkit-box-pack:center;
通過在父元素中設定這個屬性，當子項目橫向排布時，可以使子項目間左邊界對齊、中線對齊和右邊界對齊
如果是縱向排列時，那麼可以實現子項目間上邊界對齊、中線對齊和下邊界對齊的效果。
如果父元素中只包含一個子項目，混合使用-webkit-box-align和 -webkit-box-pack可以使子項目實現居左上、置中上、局右上等9個方位的定位。
彈性BOX架構可以同時相容流式布局，即當所有子項目都沒有設定彈性份數時，父元素可以被子項目自動撐開。如下代碼
效果： 代碼：

<div style="display:-webkit-box;border:1px solid blue;-webkit-box-orient:vertical;">
　　<div>aaaa </div>
　　<div>bbbb </div>
　　<div>cccc </div>
</div>
在上述代碼中所有子項目都未使用box-flex定義彈動屬性，容器div也未設定高度，此時，容器div的高度為三個子項目的高度和，並且隨著子項目的高度變化而變化。
在AppCan UI2.0架構中，我們把上面遇到的情況進行了CSS類封裝
● ub 元素採用彈性BOX布局
● ub-rev 子項目反序排列
● ub-con 在子項目中加入一個容器，用於避免內容引起子項目大小變化。
　　對應CSS代碼為position:absolute;width:100%;height:100%;
● ub-ac、ub-ae 子項目垂直置中對齊和尾對齊
● ub-pc、ub-pe、ub-pj 子項目水平置中對齊、尾對齊和左右對齊
● ub-ver 子項目縱向排列
● ub-f1 ub-f2 ub-f3 ub-f4 子項目佔用地區份數
通過上述類，我們可以完成各種各樣的排版布局，極大地降低學習難度和元素排版複雜度，使代碼更加簡練。 3、2UI2.0架構開發指南 3.1 基石 (UI的解析度適配) 　　每一個手機應用，如果需要在眾多的移動終端上保持一致的效果，UI適配是工作的重中之重。UI2.0架構與UI1.0架構在螢幕適配機制這一部分依然保持一致。設計原理是為不同解析度的系統，選取最貼近於人直觀感受舒適度的一個字型大小作為參考量。例如在320x480解析度的手機上，採用16px大小字型作為參考量。在480x800解析度的終端上，採用24px大小字型作為參考量。一切元素的大小都是以參考量的相對比值來定義。在CSS裡面對應的是em。那麼在320x480解析度下 1em=16px，在480x800解析度下1em=24px。　
　　通過這種方式，我們可以保證，同樣代碼的介面，在不同解析度下都能夠保持最貼近使用者的互動效果。
　　在UI1.0中，我們在HTML檔案中引用ui-media.css，即可處理當前常見解析度的適配。但是由於各手機平台不同，和各種新解析度手機的問世，都對適配工作提出了更高的要求。
　　UI2.0中，我們在中介軟體中為不同螢幕密度(單位尺寸中可顯示的點數)，預設定義好了字型，開發人員不再需要在代碼中引入ui-media.css檔案，即使有新的解析度手機問世，也會自動適配。目前參照Andorid螢幕密度劃分為低密度、普通密度、高密度、超高密度，分別定義字型為14px 16px 24px 32px。
3.2 骨架(元素布局與定位) 在選定好的基石之上，我們需要為我們的目標介面，搭建骨架。骨架從構建上可以分為主乾和旁支。
主幹
主幹可以認為是整個頁面的整體架構布局 上圖是截取與ZAKER(原生開發)、正益無線(HTML5開發)、ZAKER微博介面(原生開發)和HTML5中國(HTML5開發)。參考上述介面我們看到大部分應用的頁面都遵循標題+內容+底部欄的布局方式。AppCan UI2.0提供了簡單的布局架構模板來適配這種布局。 Demo007範例下載
模板代碼中我們可以看到預設存在index.html和index_content.html兩個檔案。我們通過對這兩個檔案的分析來講解AppCan UI2.0推薦的應用開發模式。index.html檔案分為三部分HEAD、BODY、SCRIPT。
HEAD部分:

<head>
<title></title>6
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"<
<link rel="stylesheet" href="css/ui-base.css">
<link rel="stylesheet" href="css/ui-box.css">
<link rel="stylesheet" href="css/ui-color.css">
<link rel="stylesheet" href="css/ui-res.css">
<script src="js/zy_control.js">
</script<
<script src="js/zy_click.js">
</script>
</head>
這一部分定義了網頁引用的CSS和JS檔案。上面代碼中ui-base.css代表基礎類檔案，ui-box.css是彈性盒子封裝類檔案，ui-color是色彩基礎類檔案。zy_control.js是預設控制項和網頁需要的一些預設功能支援類。 zy_click.js是Click事件類比類，用於替代預設的onclick事件(手機中onclick響應較慢使應用體驗性差)。
BODY部分

<body class="um-vp c-wh" ontouchstart>
　<div id="page_0" class="up ub ub-ver" tabindex="0">
<!--header開始-->
　<div id="header" class="uh c-org c-m1 t-wh">
　<h1 class="ut ulev0 ut-s tx-c" tabindex="0">AppCan</h1>
</div>
<!--header結束--> <!--content開始-->
　<div id="content" class="ub-f1 tx-l t-bla ub-img6 res10">
</div>
<!--content結束--> <!--footer開始-->
　<div id="footer" class="uf c-m2 c-bla t-wh">
　<h1 class="ut ulev-2 tx-c" tabindex="0">(c) Copyright 3G2WIN and others 2011.
<br>
All rights reserved. </h1>
</div>
<!--footer結束-->
</div>
</body>
Body部分定義了一個頁面page_0，這個頁面的高度為螢幕高度(up)，使用彈性盒子布局(ub)，它的子項目縱向排列(ub-ver)。這個頁面中包含header、content和footer三個地區。
header和footer部分是一個DIV，是一個定高的地區(通過內容撐開)。content是一個彈性地區，它會佔滿page_0中除了header和footer外的地區。如果header和footer的高度變化，content的高度也會隨之變化。 但是這種布局當內容地區有內容時會引起整個content的高度撐高，由於大部分移動終端都不支援DIV的內部地區滾動，這回造成整個頁面能夠被拖動，這是與我們要求不符的。我們通過SCRIPT地區的代碼來處理這個問題。
SCRIPT部分:

<script>
zy_init();
window.uexOnload = function(type){
if (!type) {
zy_con("content", "index_content.html", 0, $$("header").offsetHeight);
}
window.onorientationchange=window.onresize=function()
{
zy_resize("content",0,$$("header").offsetHeight);
}
}
</script> 上述代碼中zy_init函數用於在模擬器中實現字型的自動適配。在手機中無作用。
window.uexOnload事件用於在AppCan中介軟體擴充項物件載入完成後調用。在這個函數裡，我們調用了封裝在 zy_control.js裡的zy_con函數建立了一個浮動VIEW。這個View與content的地區保持同樣的大小，位置也與content地區的位置保持相同。這個View顯示的內容來自於index_content.html頁面。也就是說，我們的index.html頁面中content地區其實並不包含內容，它只起到一個定位的作用，為浮動View提供定位支援。
window.onorientationchange=window.onresize這行代碼為iOS和Andorid平台的旋轉螢幕事件指定了回呼函數，當發生旋轉螢幕時，會調用這個函數，此時我們調用封裝的zy_resize介面參照content地區的新的高寬位置重新置放了浮動視窗。
更方便的是，開發人員可以為content地區開發不同的content頁面，可以根據的操作隨時使用zy_con介面變更content地區的頁面內容來實現不同的功能。例如可以配合下方的導航條控實現功能切換。 AppCan UI2.0架構推薦這種方式來編寫頁面，相對於UI1.0架構來說，處理邏輯更加簡單,適配更加方便，並且在一個視窗中，並不是只允許包含一個浮動視窗，我們可以建立多個浮動視窗來完成不同的功能，輕鬆的實現功能的拆分，減少在一個頁面中實現眾多功能引起的邏輯問題。同時這種方式可以輕鬆的實現固定的背景圖片。上述代碼中，我們看到我們為content地區指定了一張背景圖，而我們在index_content.html沒有指定背景色，這樣顯示index_content.html網頁時會顯示出蓋在在下方的content地區。由於浮動視窗是獨立的視窗，因此它的頁面滾動並不會影響下方content地區。當然這種布局我們使用iscroll等JS包也可以很方便的實現，但是在很多Android手機上，由於效能原因體驗相對於原生應用還是會有很大差距。
AppCan UI2.0架構支援浮動視窗的彈動效果，開發人員可以很方便的實現彈動效果，在index_content.html中我們已經預設提供了範例代碼。接著我們看一下實際的內容地區網頁index_content.html。這個頁面與index.html一樣同樣分為三個部分HEAD、BODY、SCRIPT。HEAD部分與index.html的HEAD部分一樣沒什麼區別。BODY部分開發人員可以根據需求添加列表、表單、地圖等功能實現。SCRIPT部分的代碼我們看一下:

<script>
zy_init();
window.uexOnload=function(type)
{
if(!type){
uexWindow.setBounce("1");
uexWindow.showBounceView("0","#FFF","0");
uexWindow.showBounceView("1","#FFF","0");
}
}
</script> 上述代碼中zy_init()用於在模擬器狀態下實現字型自適配，手機上無作用。uexOnload事件定義了浮動視窗AppCan擴充載入後的回呼函數。當載入成功後，我們會調用AppCan彈動介面為浮動視窗添加彈動效果，並設定彈動背景色。大家可以使用範例應用來體驗一下。
旁支
在完成頁面後，我們需要對頁面中的元素進行布局。使用彈性盒子，將使這個布局工作的難度降低很多。我們定一個目標,如下圖 我們可以對他進行如下地區劃分。 ●　左側定寬圖片地區
　■　圖片子領域
● 右側文字地區
　■　文字本文地區
　■　文章屬性地區
我們在index_content.html種進行布局，代碼如下
效果： 代碼：

<div onmousedown="zy_touch('btn-act')" class="ubb ub b-gra t-bla lis">
<div class="lis-th ub-img im">
<div class="ub-f1 ub ub-ver">
<div class="ulev1"><標題名>
<div class="ulev-1 umh4 t-gra">文本說明</div>
<div class="ub ub-ac t-gra ulev-2">
<div class="umh2 umw2 ub-img " style="background-image:url(css/img/icon1.png);">
<div class="ub-f1">收藏數</div>
<div class="umh2 umw2 ub-img " style="background-image:url(css/img/icon2.png);">
<div class="ub-f1"> 評論數</div>
</div>
</div>
</div>
上述代碼中，我們首先定義了一個容器，通過class="ubb ub b-gra t-bla lis"設定容器的下邊框為灰色(ubb b-gra)，文字色為黑色(t-bla)，容器採用彈性盒子布局(ub)，容器是一個list條目(lis)然後我們在容器中構建了一個縮圖元素class="lis-th ub-img im"，指定了縮圖大小(lis-th)，定義了縮圖的顯示方式(ub-img)和縮圖圖片資源(im)。由於圖片地區定寬，文字地區是彈性的，因此我們為文字地區構建了容器ub-f1 ub ub-ver，容器寬度為彈性(ub-f1)，容器也採用彈性盒子布局(ub)，容器中的元素採用縱向布局(ub-ver)。我們分別在容器中加入標題、文本說明。收藏評論欄我們認為又是一個容器，這個容器中的字元素採用橫向布局。我們在其中加入兩個小圖片和兩段文字“收藏數”和“評論數”。到此我們就完成了這個介面的布局。
這個例子只是一個簡單的布局應用範例，通過這個例子來展示，AppCan UI2.0在布局頁面時的簡便性。 3.3 皮膚-元素的美化 當我們為一個元素設定完布局和位置後，接著就是要對這個元素進行美化。使人舒服的外表是吸引使用者的重要因素。AppCan UI2.0架構中對一個元素的效果屬性分化為幾類，通過這些不同類別屬性的組合來完成對元素UI的設定。 大小位置形狀控制
　圓角類別: uc-{類型}[類型] [類別]
　uc-tl, uc-tr, uc-bl, uc-br , uc-t, uc-b, uc-r , uc-l, uc-a, uc-n, uc-tl1, uc-tr1, uc-bl1, uc-br1, uc-t1, uc-b1, uc-r1, uc-l1, uc-a1, uc-a2, uc-a3
　陰影類別: us [類別]和us-i [類別]
　us,us1,us-i
　比例類別:ulev[類別](由於元素的控制主要通過em來進行相對控制，ulev可以對預設比率進行放大縮小)
　ulev2,ulev1,ulev0,ulev-1,ulev-2 
　浮動類別: ufl和ufr
　限寬類別: ulim
　單行類別: uinl
　邊距類別: uinn[類別]
　uinn,uinn1,uinn2,uinn3,uinn4 
　最小高寬類別: um{w或h}[類別]
　umh1,umh2,umh3,umh4,umh5,umh6,umw1,umw2,umw3 
　文字對齊類別:tx-{類型}
　tx-l,tx-r,tx-c 
　文字縮減類別:ut-s
　邊框類別:ub{類型}[類別]
　ubt,ubb,ubr,ubl,uba,uba1,uba2
　隱藏類別:uhide
　間隔類別:umar-{類型}
　umar-b
色彩控制
UI2.0架構對元素的色彩劃分為邊框色、文字色、背景底色和背景遮蓋層
　背景遮蓋類別: c-m{類別}
　c-m1,c-m2,c-m3,c-m4,c-m5,c-m6,c-m7
　背景底色類別: c-{色彩}[類別]
　c-blu,c-blu1, c-blu2, c-blu3, c-blu4,c-wh, c-bla,c-gra,c-gra1,c-gra2,c-gre,c-red,c-yel
　文字色類別:t-{色彩}[類別]
　t-bla,t-wh,t-gra,t-blu
　邊框色類別:b-{色彩}[類別]
　b-bla,b-wh,b-gra,b-gra1,b-blu
資源控制
UI2.0架構一些常用圖片資源進行了定義。例如搜尋表徵圖等。
　資源類別:res{類別}
　res1,res2,res3,res4,res5,res6,res7,res8,res9,res10
AppCan UI2.0架構對一個元素的基礎屬性進行了拆分整理，通過不同的組合來定製元素效果，同時這個方案也是一種規則，開發人員可以根據具體的實際情況在對應的類別中擴充自己需要的特效。遵循這個規則可以提高代碼的可重複利用率和維護管理效率，避免團隊開發中由於各種自訂類別混亂定義引起的UI適配和維護問題。同時使用UI2.0架構構建的控制項，代碼量將會極大地減少。下面一節我們將對各種常用在應用中的控制項的實現來使大家瞭解UI2.0在UI實現上的巨大優勢。 4、UI2.0中的控制項 4.1 按鈕 上面圖片展示了一些按鈕的效果，我們通過代碼看一下IDE是如何使用基礎類來定義這些按鈕的。我們選擇index_content.html，在其Body地區添加一個按鈕。在AppCan IDE(UI2.0)中，我們選擇中標紅的按鈕，進入按鈕製作嚮導。 在上面這個介面中，我們可以選擇建立普通按鈕、帶表徵圖按鈕和特殊定義按鈕例如iOS效果按鈕等。一般情況下按鈕會佔滿整個容器，選擇內聯可以使按鈕和其他控制項在不超出容器寬度的情況下保持在同一行。如果按鈕在標題或頁尾中，可以選擇居於左側或右側。進階模式可以對按鈕的顯示效果進行配置。 上面的介面中，我們可以配置按鈕的圓角、邊框、邊框色、背景色和背景遮蓋漸層色。這些效果不光是對按鈕起效，對於其他控制項也是同樣的定義。這裡定義的效果只是我們預置的效果，開發人員如果需要定義自己的色彩時，只需要在ui-color.css中添加自己的類定義後，對代碼中的預設顏色類進行替換即可。我們添加一個深藍色的按鈕。
效果： 代碼：

<!--按鈕開始-->
<div ontouchstart="zy_touch('btn-act')" class="btn uba1 b-bla uinn5 c-blu c-m1 uc-a t-wh">確定</div>
<!--按鈕結束-->
首先使用btn來定義這個DIV是一個按鈕(我們為不同控制項類型定義了一個標識類，用於定義一些此類控制項通用的屬性)。然後使用uinn5在文字外定義了一個內邊距，這樣按鈕的高度就是內邊距+文字高度。使用uc-a定義按鈕四個圓角都為0.6em。接著我們使用c-blu指定背景色為藍色。在通過c-m1在藍色上加了一層漸層遮蓋層。使用t-wh定義文字為白色。
最後我們通過uba1指定邊框所有邊都為2px寬，並通過b-bla設定邊框色為黑色。到此就完成了一個按鈕在不點擊狀態下的效果。相對於之前UI1.0中一個普通按鈕需要一個DIV和兩個SPAN的嵌套要簡化了2/3的代碼，層次也減低到一層。現在我們為這按鈕加上點擊效果。按照標準CSS3來說，只需要使用偽類:active來設定一個類即可完成滑鼠按下彈起的效果變換， 但很遺憾，在Andorid平台，這個效果大部分手機支援的都有問題。對於iOS平台這個屬性是支援的，但是如果想使這個偽類有效，則必須在代碼中加入ontouchstart，才能夠啟用這個偽類。為瞭解決這個跨平台問題，我們提供了zy_touch介面，通過這個介面，它可以完成點擊效果的處理。
這段代碼中，我們加入了ontouchstart="zy_touch('btn-act')"，zy_touch是封裝在 zy_control.js中的擴充函數，btn-act是我們預定義的一個通用控制項點擊凹陷效果類。通過這個函數，我們構建了一個點擊監聽類zyClick(如果使用zy_touch還需要引用 zy_click.js)，他會監聽觸控螢幕事件，來控製為按鍵增加和去除點擊效果，同時可以判斷是否為點擊操作，如果判定成功，會直接調用參數中的回呼函數來達到onclick事件的效果，可以解決手機瀏覽器中onclick不靈敏的問題。同時zy_touch還支援直接調用HTML代碼中的onclick屬性實現點擊效果。我們調整代碼
代碼：

<!--按鈕開始-->
<div ontouchstart="zy_touch('btn-act')" onclick="alert(1)" class="btn uba1 b-bla uinn5 c-blu c-m1 uc-a t-wh">確定</div>
<!--按鈕結束--> 上述代碼中我們可以看到，我們註冊了onclick函數，zy_touch會直接截獲onclick事件，代替系統調用onclick代碼，而不會調用兩次onclick。這種寫法更貼近於開發人員正常應用的寫法。另外，由於目前模擬器中還不支援ontouchstart事件，因此上述代碼ontouchstart不會被執行，模擬器重看不到點擊效果，但onclick函數還是會被調用。
如果希望在模擬器上看到效果，可以替換ontouchstart為onmousedown。雖然手機中也支援onmousedown事件但是他的效果和時序和touch事件有差別，因此我們在手機中啟動並執行時候還是要替換回ontouchstart。
上面的按鈕是使用DIV實現的，而DIV預設是一個塊。因此會佔滿整個寬度。如果需要使按鈕與其他控制項在同行顯示，我們需要為齊添加uinl類。
效果： 代碼:

<!--按鈕開始-->
<div ontouchstart="zy_touch('btn-act')" onclick="alert(1)" class="btn uba1 b-bla uinn5 c-blu c-m1 uc-a t-wh uinl">確定</div>
<!--按鈕結束--> 我們可以看到按鈕的寬度已經不是整行顯示而是根據按鈕中的文字寬度、邊框寬度、內邊距寬度來展現。需要注意的是，uinl會和ub有效果衝突，在彈性盒子模型中，子項目需要處於塊模式(display:block)。剛才介紹的是一個最簡單的按鈕，好我們現在為按鈕增加一個表徵圖。在IDE中選擇按鈕嚮導，在按鈕類型中，選擇帶表徵圖按鈕。同樣配置為深藍色。
效果如下: 代碼：

<!--按鈕開始-->
<div ontouchstart="zy_touch('btn-act')"class="btn uba1 b-bla c-blu c-m1 uc-a ub t-wh uinn5 ub-ac">
<div class="ub-f1 ut-s">確定</div>
<div class="umh1 umw1 ub-img res1 c-bla uc-a"></div>
</div>
<!--按鈕結束-->
無表徵圖的按鈕中，我們直接在DIV中加入了文字。這次因為有表徵圖我們認為按鈕中分左右兩個地區，左側文字地區自動適配寬度，右側表徵圖地區寬度固定。文字和表徵圖中線對齊。首先我們定義按鈕的外部效果class="btn uba1 b-bla c-blu c-m1 uc-a ub t-wh uinn5 ub-ac"，這個與之前的按鈕無區別，唯一添加的是 ub和ub-ac分別代表子項目採用彈性盒子布局，子項目中線對齊。我們為文字地區設定了彈性寬度(ub-f1)，並指明當文字超出容器寬度時，自動縮減不換行(ut-s)。最後我們定義了一個圖片，這個圖片高(umh1)寬(umw1)，採用ub-img控制其縮放，res1代表箭頭圖片，c-bla代表圖片地區預設背景色，uc-a使其有圓角，由於圖片寬度較小，配合圓角使其象一個圓形。這就是用彈性盒子布局定義的一個帶表徵圖按鈕。那麼如何使表徵圖居於左側呢。彈性盒子模型的便利性在這裡有很好的體現。我們在容器中加入ub-rev類，它設定子項目反向排序，很簡單實現表徵圖居於左側。

<!--按鈕開始-->
<div ontouchstart="zy_touch('btn-act')" class="btn uba1 b-bla c-blu c-m1 uc-a ub t-wh uinn5 ub-ac ub-rev">
<div class="ub-f1 ut-s">確定</div>
<div class="umh1 umw1 ub-img res1 c-bla uc-a"></div>
</div>
<!--按鈕結束-->
那如何使表徵圖上下布局呢。一樣很簡單，只需要在容器中加入ub-ver，定義容器中的子項目縱向排序即可。

<!--按鈕開始-->
<div ontouchstart="zy_touch('btn-act')" class="btn uba1 b-bla c-blu c-m1 uc-a ub t-wh uinn5 ub-ac ub-ver">
<div class="ub-f1 ut-s">確定</div>
<div class="umh1 umw1 ub-img res1 c-bla uc-a"></div>
</div>
<!--按鈕結束-->
通過上面的例子可以看到其實一個按鍵就是一個容器加一些子項目進行彈性盒子布局，然後為容器和子項目加一些控制和顯示效果。而其他控制項也是這種方式，只是顯示效果定製上稍有不同罷了。
4.2 容器 在UI2.0中我們認為所有控制項其實都是容器塊配合子容器和子項目組合。因此，容器是我們最基礎的組件之一。在應用開發中，經常需要把幾個按鈕、複選框或其他控制項合并成一組進行顯示。在這種情況下一個滿足效果的容器將是必不可少的。我們接下來將講解，如何利用AppCan來構建一個容器並按照我們的想法對元素進行排列開啟AppCan IDE(UI2.0)，我們選擇 中標紅的按鈕，進入容器製作嚮導。