【翻譯】SenchaTouch2入門：創(chuàng)建一個(gè)實(shí)用的天氣應(yīng)用程序之二-創(chuàng)新互聯(lián)

原文地址：http://www.sencha.com/blog/getting-started-with-sencha-touch-2-build-a-weather-utility-app-part-2/

創(chuàng)新互聯(lián)公司為您提適合企業(yè)的網(wǎng)站設(shè)計(jì)?讓您的網(wǎng)站在搜索引擎具有高度排名，讓您的網(wǎng)站具備超強(qiáng)的網(wǎng)絡(luò)競(jìng)爭(zhēng)力！結(jié)合企業(yè)自身，進(jìn)行網(wǎng)站設(shè)計(jì)及把握，最后結(jié)合企業(yè)文化和具體宗旨等，才能創(chuàng)作出一份性化解決方案。從網(wǎng)站策劃到網(wǎng)站建設(shè)、做網(wǎng)站， 我們的網(wǎng)頁(yè)設(shè)計(jì)師為您提供的解決方案。

作者：Lee Boonstra
Lee is a technical trainer at Sencha. She’s located in Amsterdam and has experience in both front-end and back-end development. Lee spends her spare time developing web and mobile apps. She is writing a cookbook for O'Reilly about Sencha Touch.

在這三個(gè)部分的Sencha Touch教程中，將會(huì)創(chuàng)建一個(gè)簡(jiǎn)單的我是否需要帶傘的實(shí)用應(yīng)用程序，它會(huì)從worldweatheronline.com提供的Web服務(wù)中加載天氣信息。基于天氣代碼，該應(yīng)用程序可以預(yù)測(cè)需要不需要帶傘。

在本教程的第二部分，將開(kāi)始創(chuàng)建應(yīng)用程序的主題。這需要使用到第一部分教程的代碼，可以在這里下載。

以下是一些附加資源：
最終的應(yīng)用程序代碼——完整的解決方案和樣式表。
一些教程好點(diǎn)子。
要查看應(yīng)用程序自定義主題的效果，可單擊這里。

本教程有以下要求：

  • Sencha Touch 2.3或者更高版本

  • Sencha Cmd 4.x

  • Ruby的Compass & Sass

  • 一個(gè)現(xiàn)代瀏覽器

  • 編輯器

擴(kuò)展默認(rèn)主題

這選哦使用默認(rèn)主題生產(chǎn)一個(gè)自定義主題。從默認(rèn)主題擴(kuò)展是一個(gè)好主意，因?yàn)樗嗽S多Sencha Sass變量和混入（mixins），這個(gè)可以在API文檔中找到。

【翻譯】Sencha Touch 2入門：創(chuàng)建一個(gè)實(shí)用的天氣應(yīng)用程序之二

默認(rèn)情況下，在使用Sencha Cmd創(chuàng)建應(yīng)用程序的時(shí)候，已經(jīng)創(chuàng)建了一個(gè)resources（資源）文件夾。在文件夾里，包含了空的Sass樣式表app.scss?，F(xiàn)在請(qǐng)打開(kāi)app.scss。

以下是Sass樣式表的代碼：

//(1) Define your Sencha variables here
@import 'sencha-touch/default';
@import 'sencha-touch/default/all';
//(2) Define your custom Sass/CSS code and mixins here

在頂部（1）的位置，是用來(lái)定義自己的（Sencha）變量的，在這個(gè)位置之后可直接定義自己的混入。保持這樣的順序非常重要，否則變量將沒(méi)有任何效果。輸出會(huì)使用到這些變量。

在輸出（2），就可以編寫自己的樣式規(guī)則和混入。

下面的代碼就可以輕松的改變基本顏色：

$base-color: #42282E;

通過(guò)修改基本顏色，就可以設(shè)置所使用的大部分Sencha Touch組件的主配色方案。

下面來(lái)試驗(yàn)一下。在命令行使用Sencha Cmd運(yùn)行以下命令：

sencha app watch

只有在Sencha Cmd4或更高版本才有sencha app watch命令。你可以對(duì)比一下它與Compass命令compass watch之間的區(qū)別。每次點(diǎn)擊保存后，Sencha Cmd都會(huì)查看應(yīng)用程序，當(dāng)檢測(cè)到變化時(shí)，只會(huì)執(zhí)行最低限度的所需工作，以便重新生成Sass讓應(yīng)用程序及它的CSS保持是最新的。

在現(xiàn)代瀏覽器中打開(kāi)http://localhost/dinmu就可預(yù)覽應(yīng)用程序了。

現(xiàn)在可以盡情來(lái)體驗(yàn)一下了。Sencha Touch包含了許多很好的Sass變量和混入，可以使用這些變量和混入來(lái)輕松定義自己的主題。Adobe Kuler是一個(gè)獲取正確顏色組合的偉大工具?？梢匀ヒ韵碌刂穪?lái)找尋一些配色方案： https://kuler.adobe.com/explore/most-popular/?time=month。下面將使用這些配色方案作為我是否需要帶傘的應(yīng)用程序的顏色變量。

下面是按鈕、告警窗口和屏幕背景顏色的顏色：

$alert-color: #D6665A;
$confirm-color: #75A48B;
$page-bg-color: lighten(#D9CFB0,15%);
$form-bg-color: $page-bg-color;

另外，需要去掉所有漸變效果：

$base-gradient: 'none';

底部工具欄的ui是light。下面來(lái)創(chuàng)建一個(gè)混入來(lái)改變底部工具欄light皮膚的樣式。這需要使用sencha-toolbar-ui，這個(gè)要在插入點(diǎn)（2）實(shí)現(xiàn)：

@include sencha-toolbar-ui('light', #DC9B74, 'none');

【翻譯】Sencha Touch 2入門：創(chuàng)建一個(gè)實(shí)用的天氣應(yīng)用程序之二

創(chuàng)建自定義CSS

下面來(lái)實(shí)現(xiàn)自定義CSS規(guī)則

首先來(lái)修改工具欄的標(biāo)題文體：

.title {
    .x-title {
        line-height: 2.5em;
        text-shadow: none;
        letter-spacing: -1px;
    }
}

接著，是頁(yè)腳文本的位置：

.footer {
    font-size: 0.6em;
    padding: 12px;
    text-align: right;
    letter-spacing: 0;
    a {
        color :#000;
    }
}

此外，還要為自定義模板定義樣式。下面先來(lái)修改字體和字體顏色：

.textview {
    color: black;
    line-height: 1.2em;
    letter-spacing: -1px;
    padding: 0.8em;
    text-transform: uppercase;
    .yes {
        color: $alert-color;
    }
    .no {
        color: $confirm-color;
    }
    .temp {
        color: $confirm-color;
    }
}

接下來(lái)要編輯的是設(shè)置表單。在Sass樣式表中，創(chuàng)建以下樣式來(lái)調(diào)整設(shè)置表單的樣式：

.x-form-fieldset {
    .x-form-fieldset-inner {
        border: none;
        background: $page-bg-color;
    }
    .x-form-fieldset-instructions .x-innerhtml {
        color: #000;
    }
}
.x-form-label {
    background-color: lighten(#DC9B74, 32%);
}
.x-toggle-field .x-form-label {
    background: none;
    border: none;
    margin-bottom: 20px;
}
.x-toggle {
    position: absolute;
    right: 0;
}

實(shí)現(xiàn)自定義字體

在Sencha的導(dǎo)入代碼上，添加字體的導(dǎo)入代碼。這里將使用Google的字體服務(wù)。有了這個(gè)字體服務(wù)，就從大量的托管字體系列內(nèi)瀏覽并選擇字體實(shí)現(xiàn)：

@import url(http://fonts.googleapis.com/css?family=Oswald:700);
@import url(http://fonts.googleapis.com/css?family=Lobster);

現(xiàn)在來(lái)設(shè)置字體。

對(duì)于工具欄標(biāo)題，天以下規(guī)則到CSS類x-title：

font: {
    family: "Lobster";
    size: 1.2em;
}

對(duì)于模板視圖，添加以下規(guī)則到CSS類.textview：

font: {
    family: "Oswald";
    size: 2em;
}

調(diào)整性能

如果希望優(yōu)化Sencha Touch應(yīng)用程序的性能，優(yōu)化樣式表可能是所需要做的最簡(jiǎn)單的事情，而且非常有效。下面來(lái)減少一下編譯后的樣式表的文件大小。

在使用Sencha Cmd創(chuàng)建應(yīng)用程序時(shí)候，自動(dòng)會(huì)將樣式表編譯為壓縮文件。這是因?yàn)樵趓esources/sass/config.rb文件中output_style的設(shè)置就是這樣的。如果希望可讀的樣式，可以設(shè)置output_style的值為expanded，不過(guò)要注意，這時(shí)候，文件會(huì)比較大。

打開(kāi)resources/sass/config.rb文件，可以看到以下語(yǔ)句：

output_style = :compressed

作為導(dǎo)入所有Sencha Touch框架混入的替代，可以只導(dǎo)入那些絕對(duì)必要的。這將會(huì)減少樣式表的大小，從而實(shí)現(xiàn)更快的下載。

我通常會(huì)對(duì)所有導(dǎo)入混入的@import行進(jìn)行注釋。然后，列出所有自己所需的Sencha Touch混入，并確保Sencha Cmd能查看和編譯我的Sass文件。

然后，我就開(kāi)始一行行根據(jù)不需要的類進(jìn)行注釋。這其實(shí)很棘手，因?yàn)轭惪梢阅軟](méi)有被直接使用，但來(lái)自于其他類的他們的子類，如+Class+或者+Panel+會(huì)使用到。而這正是我需要一行行移除的原因，以便在終端上檢查到是否有編譯錯(cuò)誤。所有可用的Sencha Touch混入列表可以在touch/resources/themes/[theme-to-extend-from]/all.scss文件中找到。
使用以下導(dǎo)入來(lái)替換"@import 'sencha-touch/default/all';":

@import 'sencha-touch/default/src/_Class.scss';
@import 'sencha-touch/default/src/_Button.scss';
@import 'sencha-touch/default/src/_Panel.scss';
@import 'sencha-touch/default/src/_MessageBox.scss';
@import 'sencha-touch/default/src/_Toolbar.scss';
@import 'sencha-touch/default/src/carousel/_Carousel.scss';
@import 'sencha-touch/default/src/form/_Panel.scss';
@import 'sencha-touch/default/src/form/_FieldSet.scss';
@import 'sencha-touch/default/src/field/_Field';
@import 'sencha-touch/default/src/field/_Checkbox.scss';
@import 'sencha-touch/default/src/field/_Select.scss';
@import 'sencha-touch/default/src/field/_Slider.scss';
@import 'sencha-touch/default/src/field/_Spinner.scss';
@import 'sencha-touch/default/src/picker/_Picker.scss';
@import 'sencha-touch/default/src/slider/_Slider.scss';
@import 'sencha-touch/default/src/slider/_Toggle.scss';

由于不需要使用太多圖標(biāo)，索引不需要實(shí)現(xiàn)Pictos圖標(biāo)字體。在這種情況下，可以是自己的圖標(biāo)字體，這樣可以節(jié)省一些額外的字節(jié)。

在Sass樣式表頂部導(dǎo)入Sencha混入之前添加以下變量：

$include-pictos-font: false;
$include-default-icons: false;

現(xiàn)在，需要包含自定義圖標(biāo)字體。我是通過(guò)網(wǎng)站IcoMoon（http://www.icomoon.io）來(lái)創(chuàng)建圖標(biāo)字體的。它在教程的goodies-tutorial文件夾內(nèi)。把字體文件夾dinmu復(fù)制到resources/sass/stylesheets/fonts/。

下面的語(yǔ)句可在google字體中導(dǎo)入dinmyu圖標(biāo)字體：

@font-face {
    font-family: 'Dinmu';
    src:url('stylesheets/fonts/dinmu/Dinmu.eot');
    src:url('stylesheets/fonts/dinmu/Dinmu.eot?#iefix') format('embedded-opentype'),
        url('stylesheets/fonts/dinmu/Dinmu.ttf') format('truetype'),
        url('stylesheets/fonts/dinmu/Dinmu.woff') format('woff'),
        url('stylesheets/fonts/dinmu/Dinmu.svg#Dinmu') format('svg');
    font-weight: normal;
    font-style: normal;
}

在所有導(dǎo)入的下面，創(chuàng)建一個(gè)圖標(biāo)混入來(lái)顯示設(shè)置按鈕：

@include icon('settings', 's', 'Dinmu');

在這之后，可以編寫代碼來(lái)為模板視圖添加一些有趣的圖標(biāo)：

.rain:before,
.norain:before {
    font-family: 'Dinmu';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    padding-right: 10px;
    font-size: 60px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.norain:before {
    content: "\53";
    color: $confirm-color;
}
.rain:before {
    content: "\52";
    color: $alert-color;
}

這樣，需要帶傘嗎主題就已經(jīng)完成了！打開(kāi)瀏覽器并運(yùn)行http://localhost/dinmu。

【翻譯】Sencha Touch 2入門：創(chuàng)建一個(gè)實(shí)用的天氣應(yīng)用程序之二

為了改進(jìn)應(yīng)用程序，下一步將床一個(gè)生產(chǎn)生產(chǎn)并將該應(yīng)用程序發(fā)布為一個(gè)原生PhoneGap應(yīng)用程序。該主題將 在教程的第3部分講述。

創(chuàng)建Sencha主題有趣嗎？從12月開(kāi)始，Sencha將開(kāi)始提供高級(jí)Ext JS主題課程。這可參考一下遍布世界各地的開(kāi)發(fā)課程或參加在線培訓(xùn)。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

新聞標(biāo)題：【翻譯】SenchaTouch2入門：創(chuàng)建一個(gè)實(shí)用的天氣應(yīng)用程序之二-創(chuàng)新互聯(lián)
瀏覽地址：http://bm7419.com/article36/djhcpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、關(guān)鍵詞優(yōu)化、域名注冊(cè)、網(wǎng)站建設(shè)、微信小程序、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

手機(jī)網(wǎng)站建設(shè)