【翻譯】Ext JS 5的平板支持

原文：Ext JS 5 Tablet Support

Ext JS已被公認(rèn)為桌面Web應(yīng)用程序的領(lǐng)先框架。自從平板開始在全球挑戰(zhàn)PC的銷售，無論是個(gè)人還是企業(yè)，電腦橫向的應(yīng)用已經(jīng)產(chǎn)生急劇的變化。Sencha意識(shí)到了這種變化，并推出了包含新功能和進(jìn)行優(yōu)化了的Ext JS 5。

Ext JS從Sencha Touch 2學(xué)到了一些新把戲。多年最好的移動(dòng)Web應(yīng)用程序框架經(jīng)驗(yàn)的沉淀要應(yīng)對(duì)現(xiàn)代平板電腦上的桌面顯示，那是卓卓有余的。通過類系統(tǒng)、事件管理、窗口小部件和新的部署選項(xiàng)就可以了解到這些更新。

除了能在平板上展示富應(yīng)用程序外，Ext JS 5還完全支持所有為觸屏設(shè)備量身定做的交互模式。

類系統(tǒng)

在最新的類系統(tǒng)中，針對(duì)平板所需的新功能做了更新。在Ext JS 4引入了配置（config）系統(tǒng)，但直到Sencha Touch 2，它才被確切的被強(qiáng)制執(zhí)行。開發(fā)人員現(xiàn)在可以在Ext JS 5充分利用起配置對(duì)象、訪問方法（getter）、修改方法（setter）、更新方法（updater）和強(qiáng)大的Ext.factory。

要知道的是，新的Ext JS配置系統(tǒng)并不要求使用配置對(duì)象，這是為了向下兼容版本4。不過，它能自動(dòng)將配置對(duì)象的屬性轉(zhuǎn)化為對(duì)應(yīng)的根屬性。

為了更好的解釋這一概念，請(qǐng)觀察以下Ext JS代碼片段：

通常情況下，html屬性在早期的Ext JS應(yīng)該定義在config塊外，因?yàn)镋xt.Component已經(jīng)包含了一個(gè)名為setHtml的成員函數(shù)，類系統(tǒng)會(huì)將值傳送到訪問方法。


這個(gè)重要的方式有助于Ext JS 5重用為Sencha Touch 2編寫的代碼，而反之亦然。這并不僅僅限于在兩個(gè)框架中共享代碼，它還能將許多Sencha的重要功能從Sencha Touch納入到Ext JS 5中。

事件

Touch的核心輸入方式是基于觸屏的，而這也是為什么Sencha將touch事件和手勢(shì)交互支持捆綁到Ext JS 5的原因。這次升級(jí)的關(guān)鍵一點(diǎn)就是為新的事件統(tǒng)一模式，把公共事件轉(zhuǎn)換為各種不同平臺(tái)的事件。

在該示例中，mousedown事件會(huì)被應(yīng)用在大多數(shù)的桌面客戶端上。然而，事件管理系統(tǒng)會(huì)自動(dòng)識(shí)別觸屏設(shè)備，并根據(jù)瀏覽器將它切換為touchstart或pointerdown。要能正確的與平板交互，事件轉(zhuǎn)換是必需的。

事件更新是雙向的，既添加新功能到移動(dòng)應(yīng)用程序，也添加新功能到桌面應(yīng)用程序。Ext JS的小部件，現(xiàn)在即使運(yùn)行在桌面瀏覽器，也能響應(yīng)為移動(dòng)應(yīng)用程序設(shè)計(jì)的滑動(dòng)、長(zhǎng)按或其他手勢(shì)。當(dāng)然，涉及多點(diǎn)觸碰（例如夾、旋轉(zhuǎn)等）的事件并不能移植到桌面的鼠標(biāo)操作環(huán)境中。這樣，并不是鼓勵(lì)開發(fā)人員去將移動(dòng)體驗(yàn)應(yīng)用到桌面上，而是要確保展示的一致性。

啟用觸碰事件后，動(dòng)量卷動(dòng) (momentum scrolling)就可將它的方式應(yīng)用到框架。Touch Scroller現(xiàn)在是Ext JS 5的一個(gè)組成部分，可以自動(dòng)應(yīng)用在觸屏設(shè)備，且不需要做任何配置。

無論是類系統(tǒng)更新還是事件管理更新，都顯著添加了對(duì)平板的支持。最終用戶可通過與視圖和小部件的交互來體驗(yàn)到這些新功能。下面我們來看看小部件是如何通過布局來獲得最佳的平板的支持的。

小部件

尋求最優(yōu)的觸屏展示已超越了觸碰事件。某些基于鼠標(biāo)的交互模式（如mouserover/hover，右擊）不能用在平板上。在桌面瀏覽器上支持這些事件的小部件現(xiàn)在可采用其他手段來進(jìn)行界面操作。

網(wǎng)格面板是這樣的小部件的完美示例。如果觀察一下標(biāo)題菜單，會(huì)發(fā)現(xiàn)它需要大量的交互來打開他們。

首先，要激活菜單，鼠標(biāo)要移動(dòng)到列標(biāo)題上。然后UI顯示一個(gè)箭頭按鈕在右邊。最后，按下按鈕彈出菜單。

這個(gè)特定的流程不可能完全復(fù)制在觸屏上。盡管這樣，網(wǎng)格面板還是有觸屏感知的，并能將本地桌面模式替換為觸屏模式。當(dāng)網(wǎng)格顯示在一臺(tái)平板設(shè)備的時(shí)候，它可通過長(zhǎng)按事件來顯示標(biāo)題菜單，而這只需要用戶觸屏列標(biāo)題比平時(shí)更長(zhǎng)一段時(shí)間。

另一個(gè)有趣的示例是行的突出顯示。它很有趣，因?yàn)樵谄桨迳犀F(xiàn)在也有了替代品。突出顯示的主要目的是便于識(shí)別鼠標(biāo)指針位置。由于觸屏沒有這個(gè)問題，行突出顯示顯得有點(diǎn)過時(shí)。

Ext JS 5的小部件不單優(yōu)化了平板上的顯示，還包含了來自于Sencha Touch 2的新功能。例如，啟用了圖標(biāo)的按鈕讓用戶界面變得更美了。

屬性iconCls現(xiàn)在在Ext JS工作得很好，因?yàn)榘粹o被融入到了其他小部件，如標(biāo)簽面板，我們會(huì)看到整個(gè)堆棧都已經(jīng)被更新了。

新的Sencha圖像包是另一個(gè)展示兩個(gè)框架如何美妙的實(shí)現(xiàn)整合的例子。圖表證明了新的類系統(tǒng)更新和事件管理更新讓用戶接口真正實(shí)現(xiàn)了設(shè)備無關(guān)性，同時(shí)保持了API和性能的持久性。無論是使用Ext JS 5還是Sencha Touch 2進(jìn)行開發(fā)，一定要試一下圖表。

除了這些特定的更新，任何小部件都具有專為移動(dòng)設(shè)計(jì)準(zhǔn)則而引入的 responsive配置項(xiàng)。任何基于方向或經(jīng)過精心策劃的可視區(qū)域的尺寸規(guī)則的具有訪問方法的配置屬性都可以被更新。Phil Guerrant為此寫了一篇詳細(xì)的博客文章《Designing Responsive Applications with Ext JS》，還可以在示例程序中看到這些新功能。

如果在這一小節(jié)有任何遺漏的，那就是Ext JS 5為開發(fā)人員提供了足夠的工具來讓小部件實(shí)現(xiàn)設(shè)備無關(guān)性。在開發(fā)mouseover或右擊時(shí)，要為觸屏考慮和計(jì)劃所需的替代事件監(jiān)聽。框架提供了一些使用內(nèi)置的小部件的解決方案。這需要觀察、學(xué)習(xí)和重用他們來創(chuàng)建成功的應(yīng)用程序。

最后，一個(gè)完美的精心編制的平板應(yīng)用程序就會(huì)為用戶設(shè)備找到它合適的方式。

部署

在完成制作完美的桌面和平板應(yīng)用程序的所有艱苦工作后，接下來要做的就是部署。幸運(yùn)的是，有多個(gè)可用的選項(xiàng)：

1. 瀏覽器：最簡(jiǎn)單和最直接的解決辦法就是通過HTTP協(xié)議來將Web應(yīng)用程序交付到客戶端瀏覽器。別忘了使用Sencha Cmd的“sencha app build production”命令來縮小、壓縮和優(yōu)化源代碼。

2. Sencha Space：企業(yè)應(yīng)用程序需要企業(yè)級(jí)的節(jié)方案。Space有助于在BYOD環(huán)境中交付和管理安全的Web應(yīng)用程序，并能完美的運(yùn)行Ext JS 5的應(yīng)用程序。

3. Cordova：混合應(yīng)用程序的開發(fā)人員會(huì)喜歡上將Ext JS 5和Sencha Cmd 5集成在一起的改進(jìn)。新的構(gòu)建功能能讓開發(fā)人員輕松的使用“sencha app buildnative”命令來基于Cordova封裝應(yīng)用程序。

小結(jié)

Ext JS 5不僅僅讓應(yīng)用程序可以在平板上顯示，還包含了從0到發(fā)布這整個(gè)工作流程，還捆綁了強(qiáng)大的交互功能，甚至協(xié)助你部署應(yīng)用程序。更重要的是，它很簡(jiǎn)單，使學(xué)習(xí)曲線更適合于初學(xué)者。當(dāng)你開始構(gòu)建下一個(gè)Ext JS 5的應(yīng)用程序的時(shí)候，千萬要記得可能某些人可能會(huì)在平板上使用它，并且會(huì)愛上它。

作者： Grgur Grisogono
                                   Grgur is a Principal at Modus Create and is the co-author of Ext JS in Action SE. Grgur has experience in JavaScript, CSS, HTML5, Sencha Touch, Ext JS, web apps and hybrid mobile. He is active in the European Sencha community.