【翻譯】使用Sencha Touch創(chuàng)建基于Tizen應(yīng)用程序

原文：Building a Tizen App With Sencha Touch

作者：Gautam Agrawal                                 Gautam Agrawal is Sencha's Sr. Product Manager for Frameworks (Ext JS, Touch, and GXT). He has held various product and engineering roles at Quantros and Integral, in SaaS and BI space, utilizing Sencha technologies. He holds a PhD and MS from State University of NY (SUNY) at Buffalo and a BE from Pune University.

簡(jiǎn)介

在Sencha Touch3.3.1，添加了對(duì)Tizen平臺(tái)的支持。Tizen是一個(gè)基于Web的OS，且允許開發(fā)人員使用HTML 5技術(shù)來編寫應(yīng)用程序。與Tizen捆綁在一起的Web瀏覽器是當(dāng)前最符合標(biāo)準(zhǔn)的移動(dòng)瀏覽器之一。在本文，作為入門，將演示如何使用Sencha Touch來創(chuàng)建一個(gè)Tizen應(yīng)用程序。

一個(gè)簡(jiǎn)單的Tizen應(yīng)用程序——Tizen Tunes

我決定使用iTunes RSS源來創(chuàng)建一個(gè)簡(jiǎn)單的音樂播放應(yīng)用程序（Tizen Tunes）。開始時(shí)，需要使用到Sencha Touch3.3.1框架和一個(gè)4.x版本的Sencha Cmd來創(chuàng)建并部署應(yīng)用程序，還需要任何標(biāo)準(zhǔn)的代碼編輯器。我開始根據(jù)Lee Boonstra的《Sencha Touch 2入門》這篇分三個(gè)部分詳細(xì)介紹創(chuàng)建一個(gè)天氣工具應(yīng)用程序的文章來創(chuàng)建應(yīng)用程序。

在我的應(yīng)用程序中，需要3個(gè)簡(jiǎn)單的視圖：主視圖（包含應(yīng)用程序標(biāo)題和導(dǎo)航欄）、列表（顯示從iTunes RSS返回的前100條音樂專輯），以及一個(gè)詳細(xì)信息面板（包含歌曲預(yù)覽圖片和用來播放選擇歌曲的播放器）。此外，還需要為iTunes RSS源創(chuàng)建模型、為源代理返回的數(shù)據(jù)創(chuàng)建存儲(chǔ)（store）和一個(gè)從列表中選擇歌曲并在詳細(xì)信息面板播放他們的控制器。

下一步需要為應(yīng)用程序設(shè)置適用于Tizen平臺(tái)的主題。Sencha Touch 2.3.1提供了額外的Tizen主題，所要做的是修改app.json文件來設(shè)置適當(dāng)?shù)闹黝}資源并重新生成。

在app.json文件中，默認(rèn)的Sencha Touch主題定義如下：

"css": [{
        "path": "resources/css/sencha-touch.css",
        "platform": [ "phone", "tablet", "desktop" ],
        "theme": "Default",
        "update": "delta"
}]

需要修改為以下代碼：

"css": [{
        "path": "resources/css/tizen.css",
        "platform": [ "tizen" ],
        "theme": "Tizen",
        "update": "delta"
}]

使用新的配置重新生成應(yīng)用程序后的效果如下：

由于Sencha Touch為Tizen主題提高了暗和亮兩種變化（暗是默認(rèn)），而我想將應(yīng)用程序切換到亮主題，因而下一步要做的就是這個(gè)。要將主題切換到亮漸變的重點(diǎn)是添加/修改app.js文件中的其他配置：

Ext.application({
    views: [
        'MainView', 'DetailPanel', 'SongList'
    ],
    controllers: [
        'Songs'
    ],
    name: 'TizenTunes',
    themeVariation: 'light',
    launch: function() {
        Ext.create('TizenTunes.view.MainView', {fullscreen: true});
    }
});

還可以在launch方法內(nèi)使用以下代碼來切換主題（在某些時(shí)候可能需要?jiǎng)討B(tài)來實(shí)現(xiàn)）：

TizenTunes.app.setThemeVariation ('light');

在模擬器上運(yùn)行Tizen應(yīng)用程序

為了測(cè)試應(yīng)用程序，我想使用Web模擬器，這個(gè)可以在Tizen開發(fā)者網(wǎng)站的Tizen SDK中找到。在Mac OSX中使用安裝管理器來安裝Tizen IDE給我?guī)砹艘恍┨魬?zhàn)。如果希望了解更多信息，我建議使用這個(gè)Youtube視頻，且在Tizen開發(fā)者論壇上的帖子。

一旦解決了Tizen IDE的運(yùn)行問題，就可以訪問Tizen Web模擬器了，且可以開始測(cè)試Tizen Tunes應(yīng)用程序了。

希望本示例對(duì)創(chuàng)建你的Tizen應(yīng)用程序會(huì)有所幫助。去嘗試一下并在Sencha論壇上與我們分享一下你的感受。