Sencha Touch 2入门：创建一个实用的天气应用程序之二

雨点打透心脏的1/2处 2022-08-05 00:37 170阅读 0赞

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

作者：**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.

在这三个部分的Sencha Touch教程中，将会创建一个简单的我是否需要带伞的实用应用程序，它会从worldweatheronline.com提供的Web服务中加载天气信息。基于天气代码，该应用程序可以预测需要不需要带伞。

在本教程的第二部分，将开始创建应用程序的主题。这需要使用到第一部分教程的代码，可以在[这里][Link 1]下载。

以下是一些附加资源：  
最终的应用程序代码——完整的[解决方案][Link 2]和[样式表][Link 3]。  
一些[教程好点子][Link 4]。  
要查看应用程序自定义主题的效果，可单击[这里][Link 5]。

本教程有以下要求：

*  Sencha Touch 2.3或者更高版本
 *  Sencha Cmd 4.x
 *  Ruby的Compass & Sass
 *  一个现代浏览器
 *  编辑器

## 扩展默认主题 ##

这选哦使用默认主题生产一个自定义主题。从默认主题扩展是一个好主意，因为它包含了许多Sencha Sass变量和混入（mixins），这个可以在API文档中找到。

![weather-app-1.png][]

默认情况下，在使用Sencha Cmd创建应用程序的时候，已经创建了一个resources（资源）文件夹。在文件夹里，包含了空的Sass样式表app.scss。现在请打开app.scss。

**\[ruby\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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

在顶部（1）的位置，是用来定义自己的（Sencha）变量的，在这个位置之后可直接定义自己的混入。保持这样的顺序非常重要，否则变量将没有任何效果。导入的文件会使用到这些变量。  
  
  
在导入（2），可以编写自己的样式规则和混入。  
  
下面的代码就可以轻松的改变基本颜色：

**\[ruby\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **$base**\-color: \#42282E;

通过修改基本颜色，就可以设置所使用的大部分Sencha Touch组件的主配色方案。  
  
下面来试验一下。在命令行使用Sencha Cmd运行以下命令：

**\[plain\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  sencha app watch

只有在Sencha Cmd4或更高版本才有sencha app watch命令。你可以对比一下它与Compass命令compass watch之间的区别。每次点击保存后，Sencha Cmd都会查看应用程序，当检测到变化时，只会执行最低限度的所需工作，以便重新生成Sass让应用程序及它的CSS保持是最新的。  
  
在现代浏览器中打开http://localhost/dinmu就可预览应用程序了。  
  
现在可以尽情来体验一下了。Sencha Touch包含了许多很好的Sass变量和混入，可以使用这些变量和混入来轻松定义自己的主题。Adobe Kuler是一个获取正确颜色组合的伟大工具。可以去以下地址来找寻一些配色方案： https://kuler.adobe.com/explore/most-popular/?time=month。下面将使用这些配色方案作为我是否需要带伞的应用程序的颜色变量。  
  
下面是按钮、告警窗口和屏幕背景颜色的颜色：

**\[ruby\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **$alert**\-color: \#D6665A;  
2.  **$confirm**\-color: \#75A48B;  
3.  **$page**\-bg-color: lighten(\#D9CFB0,15%);  
4.  **$form**\-bg-color: **$page**\-bg-color;

另外，需要去掉所有渐变效果：

**\[ruby\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **$base**\-gradient: 'none';

底部工具栏的ui是light。下面来创建一个混入来改变底部工具栏light皮肤的样式。这需要使用sencha-toolbar-ui，这个要在插入点（2）实现：

**\[ruby\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **@include** sencha-toolbar-ui('light', \#DC9B74, 'none');

![weather-app-2.png][]

## 创建自定义CSS    ##

下面来实现自定义CSS规则  
  
首先来修改工具栏的标题文体：

**\[css\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  .title \{  
2.      .x-title \{  
3.          **line-height**: 2.5em;  
4.          **text-shadow**: none;  
5.          **letter-spacing**: \-1px;  
6.      \}  
7.  \}

接着，是页脚文本的位置：

**\[css\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  .footer \{  
2.      **font-size**: 0.6em;  
3.      **padding**: 12px;  
4.      **text-align**: right;  
5.      **letter-spacing**: 0;  
6.      a \{  
7.          color :\#000;  
8.      \}  
9.  \}

此外，还要为自定义模板定义样式。下面先来修改字体和字体颜色：

**\[css\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  .textview \{  
2.      **color**: black;  
3.      **line-height**: 1.2em;  
4.      **letter-spacing**: \-1px;  
5.      **padding**: 0.8em;  
6.      **text-transform**: uppercase;  
7.    
8.    
9.      .yes \{  
10.         **color**: $alert-color;  
11.     \}  
12.     .no \{  
13.         **color**: $confirm-color;  
14.     \}  
15.     .temp \{  
16.         **color**: $confirm-color;  
17.     \}  
18. \}

接下来要编辑的是设置表单。在Sass样式表中，创建以下样式来调整设置表单的样式：

**\[css\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  .x-form-fieldset \{  
2.      .x-form-fieldset-inner \{  
3.          **border**: none;  
4.          **background**: $page-bg-color;  
5.      \}  
6.      .x-form-fieldset-instructions .x-innerhtml \{  
7.          **color**: \#000;  
8.      \}  
9.  \}  
10.   
11. .x-form-label \{  
12.     **background-color**: lighten(\#DC9B74, 32%);  
13. \}  
14. .x-toggle-field .x-form-label \{  
15.     **background**: none;  
16.     **border**: none;  
17.     **margin-bottom**: 20px;  
18. \}  
19. .x-toggle \{  
20.     **position**: absolute;  
21.     right: 0;  
22. \}

## 实现自定义字体 ##

在Sencha的导入代码上，添加字体的导入代码。这里将使用Google的字体服务。有了这个字体服务，就从大量的托管字体系列内浏览并选择字体实现：

**\[ruby\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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

现在来设置字体。

对于工具栏标题，天以下规则到CSS类x-title：

**\[css\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **font**: \{  
2.      family: "Lobster";  
3.      **size**: 1.2em;  
4.  \}

对于模板视图，添加以下规则到CSS类.textview：

**\[css\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **font**: \{  
2.      family: "Oswald";  
3.      **size**: 2em;  
4.  \}

## 调整性能 ##

如果希望优化Sencha Touch应用程序的性能，优化样式表可能是所需要做的最简单的事情，而且非常有效。下面来减少一下编译后的样式表的文件大小。

在使用Sencha Cmd创建应用程序时候，自动会将样式表编译为压缩文件。这是因为在resources/sass/config.rb文件中output\_style的设置就是这样的。如果希望可读的样式，可以设置output\_style的值为expanded，不过要注意，这时候，文件会比较大。

打开resources/sass/config.rb文件，可以看到以下语句：

**\[ruby\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  output\_style = :compressed

作为导入所有Sencha Touch框架混入的替代，可以只导入那些绝对必要的。这将会减少样式表的大小，从而实现更快的下载。  
  
我通常会对所有导入混入的@import行进行注释。然后，列出所有自己所需的Sencha Touch混入，并确保Sencha Cmd能查看和编译我的Sass文件。  
  
然后，我就开始一行行根据不需要的类进行注释。这其实很棘手，因为类可以能没有被直接使用，但来自于其他类的他们的子类，如+Class+或者+Panel+会使用到。而这正是我需要一行行移除的原因，以便在终端上检查到是否有编译错误。所有可用的Sencha Touch混入列表可以在touch/resources/themes/\[theme-to-extend-from\]/all.scss文件中找到。  
使用以下导入来替换"@import 'sencha-touch/default/all';":

**\[ruby\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **@import** 'sencha-touch/default/src/\_Class.scss';  
2.  **@import** 'sencha-touch/default/src/\_Button.scss';  
3.  **@import** 'sencha-touch/default/src/\_Panel.scss';  
4.  **@import** 'sencha-touch/default/src/\_MessageBox.scss';  
5.  **@import** 'sencha-touch/default/src/\_Toolbar.scss';  
6.  **@import** 'sencha-touch/default/src/carousel/\_Carousel.scss';  
7.  **@import** 'sencha-touch/default/src/form/\_Panel.scss';  
8.  **@import** 'sencha-touch/default/src/form/\_FieldSet.scss';  
9.  **@import** 'sencha-touch/default/src/field/\_Field';  
10. **@import** 'sencha-touch/default/src/field/\_Checkbox.scss';  
11. **@import** 'sencha-touch/default/src/field/\_Select.scss';  
12. **@import** 'sencha-touch/default/src/field/\_Slider.scss';  
13. **@import** 'sencha-touch/default/src/field/\_Spinner.scss';  
14. **@import** 'sencha-touch/default/src/picker/\_Picker.scss';  
15. **@import** 'sencha-touch/default/src/slider/\_Slider.scss';  
16. **@import** 'sencha-touch/default/src/slider/\_Toggle.scss';

由于不需要使用太多图标，索引不需要实现Pictos图标字体。在这种情况下，可以是自己的图标字体，这样可以节省一些额外的字节。  
  
在Sass样式表顶部导入Sencha混入之前添加以下变量：

**\[ruby\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **$include**\-pictos-font: **false**;  
2.  **$include**\-default-icons: **false**;

现在，需要包含自定义图标字体。我是通过网站IcoMoon（http://www.icomoon.io）来创建图标字体的。它在教程的goodies-tutorial文件夹内。把字体文件夹dinmu复制到resources/sass/stylesheets/fonts/。  
  
下面的语句可在google字体中导入dinmyu图标字体：

**\[ruby\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **@font**\-face \{  
2.      font-family: 'Dinmu';  
3.      src:url('stylesheets/fonts/dinmu/Dinmu.eot');  
4.      src:url('stylesheets/fonts/dinmu/Dinmu.eot?\#iefix') format('embedded-opentype'),  
5.          url('stylesheets/fonts/dinmu/Dinmu.ttf') format('truetype'),  
6.          url('stylesheets/fonts/dinmu/Dinmu.woff') format('woff'),  
7.          url('stylesheets/fonts/dinmu/Dinmu.svg\#Dinmu') format('svg');  
8.      font-weight: normal;  
9.      font-style: normal;  
10. \}

在所有导入的下面，创建一个图标混入来显示设置按钮：

**\[ruby\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **@include** icon('settings', 's', 'Dinmu');

在这之后，可以编写代码来为模板视图添加一些有趣的图标：

**\[ruby\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  .rain:before,  
2.  .norain:before \{  
3.      font-family: 'Dinmu';  
4.      speak: none;  
5.      font-style: normal;  
6.      font-weight: normal;  
7.      font-variant: normal;  
8.      text-transform: none;  
9.      line-height: 1;  
10.   
11.     padding-right: 10px;  
12.     font-size: 60px;  
13.   
14.     -webkit-font-smoothing: antialiased;  
15.     -moz-osx-font-smoothing: grayscale;  
16. \}  
17.   
18. .norain:before \{  
19.     content: "\\53";  
20.     color: **$confirm**\-color;  
21. \}  
22. .rain:before \{  
23.     content: "\\52";  
24.     color: **$alert**\-color;  
25. \}

这样，需要带伞吗主题就已经完成了！打开浏览器并运行http://localhost/dinmu。

![weather-app-3.png][]

为了改进应用程序，下一步将床一个生产生产并将该应用程序发布为一个原生PhoneGap应用程序。该主题将 在教程的第3部分讲述。

[http_www.sencha.com_blog_getting-started-with-sencha-touch-2-build-a-weather-utility-app-part-2]: http://www.sencha.com/blog/getting-started-with-sencha-touch-2-build-a-weather-utility-app-part-2/
[Link 1]: http://www.sencha.com/blog/getting-started-with-sencha-touch-2-build-a-weather-utility-app-part-1/
[Link 2]: https://training.sencha.com/sencha-blog/tutorial-dec-2013-lee/goodies-tutorial/fullsolution-download.zip
[Link 3]: https://training.sencha.com/sencha-blog/tutorial-dec-2013-lee/goodies-tutorial/stylesheet-download.zip
[Link 4]: https://training.sencha.com/sencha-blog/tutorial-dec-2013-lee/goodies-tutorial/fonts-download.zip
[Link 5]: https://training.sencha.com/sencha-blog/tutorial-dec-2013-lee/dinmu/
[weather-app-1.png]: /images/20220805/ee5bfc13cf2a4039b2071bac327d1730.png
[view plain]: http://blog.csdn.net/tianxiaode/article/details/17094159#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/94199
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/94199/fork
[weather-app-2.png]: /images/20220805/a078668ac0804ed3beccd9fa2e3f75bb.png
[weather-app-3.png]: /images/20220805/c22f7275b3904484addfbf6f5cc0259b.png