《如何在senchatouch2中自定义icon》由会员分享，可在线阅读，更多相关《如何在senchatouch2中自定义icon（15页珍藏版）》请在金锄头文库上搜索。
1、Styling the user interface of a Sencha Touch application翻译者：郭玉潮（为了方便书写，本文中约定sencha touch 2简写为ST2。）本片文章主要讲述如何定制我们应用的样式，如何使用Sencha touch的主题机制中的SASS和Compass 。主要解决一下问题：1. 我们将深入研究toolbars和buttons中layout，style和icons的使用方法来提高我们的用户视觉效果。2. 扩展我们以前工程中的icons，主要包括定制我们自己的icons和使用base64的图标，而不使用一个真实的图片。3. 讨论在不同设备屏幕上
2、的一些注意事项和开发的快捷方式。4. 深入讨论Sencha强大的主题机制，包括SASS和Compass，使用简单的CSS命令来创建复杂的视觉皮肤效果。Styling components versus themes在我们深入讨论细节之前，我们应该先弄明白创建主题和定义单个组件样式的区别。我们在ST2中，每一个组件都有一个选项来设置自己的样式的，例如，一个panel可以通过以下的方式来改变样式：1. 2. xtype: panel,3. style: border: none; font: 12px Arial black,4. html: Hello World5. 我们同样也可以使用一个外部
3、的样式文件来改变组件的样式，代码如下：1. 2. xtype: panel,3. cls: myStyle,4. html: Hello World5. 有很多有用的选项来控制一个组件的显示效果。我们也可以在configuration中直接设置特定的样式元素例如border，padding和margin。1. 2. xtype: panel,3. bodyMargin: 10 5 5 5,4. bodyBorder: 1px solid black,5. bodyPadding: 5,6. html: Hello World7. 需要注意的是如果是数字值的话，不需使用引号的，但是如果是CSS字
4、符串值的话，就需要使用引号括起来了。这些只能简单的改变一个组件的样式的，但是如果我们需要改变我们应用程序的样式的话，我们就应该好好的研究一下主题和UI样式风格了。UI styling for toolbars and buttons我们就以下面的例子来深入探讨toolbars和buttons的样式。我们现在我们上面的例子中添加两个toolbar，代码我就省略了。1. 2. dock: top,3. xtype: toolbar,4. height: 25,5. items: 6. text: My Button7. 8. 我们可以通过设置height值来设置我们toolbar的高度。我们可是使
5、用ui来设置toolbar的样式的，主要有light和dark，看下面的截图吧：上面的toolbar的ui是dark，下面的toolbar 的ui是light。Styling buttonsbuttons同样有ui的配置，主要有normal，back，round，small，action，和forward。同样也有颜色的定义的，可以通过使用简单的连接符使他们链接到一起，例如：confirm-small或者decline-round。我们看截图吧，这些代码实在是简单，我就不粘了：像width值这样的设置，你可以自己查阅API文档，如果不设置的话，会占满整个panel的。Sencha Touch
6、themesST中，Themes是一个非常有用的方法来快速改变我们应用程序的外观的。那么什么是themes呢？SASS + Compass = themes如果我们真的决定要改变我们的主题的话，我们就不得不安装SASS和Compass了，这些并不包含在ST的库文件中。首先我们要安装Ruby。Installing RubyMac中不需安装了，因为在OSX中已经安装好了，但是Windows中，需要用户自己下载并安装Ruby。并设置好PATH。我们可以在命令行中验证我们的安装的。1. C:Ruby192ruby-v2. ruby 1.9.2p180(2011-02-18)i386-mingw32In
7、stalling SASS and Compass对于Mac和Windows用户来说，安装略有不同的。我们可以在Mac中通过终端来安装的：1. sudo gem install haml2. sudo gem install compassWindows用户可以在命令行中安装：1. gem install haml2. gem install compass如果你觉得这种安装方法并不适合你的话，你可以在网上搜寻捆绑了Ruby，SASS，Compass的包，直接集成安装在自己的电脑上：Scout，Compass.app。Creating a custom theme接下来就是如何来创建我们自己的
8、主题SCSS文件了。首先我们先复制文档中的sencha-touch.scss到一个文件夹中，再重命名为myTheme.scss，然后我们在index.html中引用我们自己的样式文件：SCSS and CSS其实很简单的，SCSS是Sassy Css的简写。我们的SCSS文件夹中的SCSS文件在编译之后，会在CSS文件夹中生成对应的CSS文件。在把这些文件的路径安置好之后，我们先打开看看myTheme.scss文件中的内容吧：1. import sencha-touch/default/all;2. 3. include sencha-panel;4. include sencha-butto
9、ns;5. include sencha-sheet;6. include sencha-picker;7. include sencha-tabs;8. include sencha-toolbar;9. include sencha-toolbar-forms;10. include sencha-carousel;11. include sencha-indexbar;12. include sencha-list;13. include sencha-list-paging;14. include sencha-list-pullrefresh;15. include sencha-l
10、ayout;16. include sencha-form;17. include sencha-msgbox;18. include sencha-loading-spinner;这些代码抓取了ST中所有的默认主题文件，并把他们编译成一个新的css文件，存放到css文件夹中。我们先来看看如何改变我们应用的颜色。Base color这些中一个很关键的变量就是$base_color，我们改变一下这个变量就会明白是什么意思了。$base_color:#546346;然后我们将我们修改的文件编译。在命令行进入我们的scss文件所在的文件夹中，然后输入命令来编译：compass compile这将更新
11、我们的myTheme.css文件。我们看看我们的程序发生了什么变化：如果我们改变base color，将改变我们的底部tab bar的颜色。因为我们改变的是整个应用程序的基色。但是这并不是我们需要的，因为我们可能只想改变某个组件的样式，通过mixins和ui configuration。compass compile versus compass watchCompass使用compile来编译我们创建的样式文件。我们同样可以设置Compass来针对特定文件的改变来自动编译：compass watch filename只要你的终端开着，这个命令就会一直激活。一旦关闭了，就需要从新输入命令来检查
12、改变。Mixins and the UI configuration每一个组件都有自己的mixins和变量来控制自己的样式的。我们可以改变这些来控制单个组件的样式的。我们上面看到了ui中的配置项中有light和dark，但是我们可以自己定义一个样式，在我们的sass文件中。我们需要先定位到一下代码：import sencha-touch/default/all;然后在它后面添加我们自己定义的ui：include sencha-toolbar-ui(subnav, #625546, matte);这样我们将创建一个叫做subnav的ui，并且有一个base color属性#625546，最后一项
13、是设置倾斜的，主要有如下参数可设置： flat: No gradient. matte: A subtle gradient. bevel: A medium gradient. glossy: A glassy style gradient. recessed: A reversed gradient.我们就可以保持编译了。我们将上面例子中的light变成我们的subnav，你就会看见变化：Adding new icon masks我们利用pictos-iconmaskmixin同样可以改变我们底部tab bar的图标遮罩。有两点需要注意的：第一，这些图标是作为按钮的遮罩使用的。这就意味着，
14、这些图标是使用简单色的透明PNG。我们看看下面的图片就是就明白了：虽然我们源文件比我们的图标大，但是它会自动缩放的。第二点需要考虑的就是，我们的这些图标在一个特定的文件夹中：/lib/resources/themes/images/default/pictos。你可以打开看看，在这个文件夹中，已经存放了框架自己定义好的一些图标。我们来看一个例子吧：假如我们有一个叫做bolt的图标文件，并且你想再touchStart.js中使用它，如果我们不对它进行处理的话，框架就会用一个空的方块来代替它，因为框架找不到它，那我们怎么处理他呢？我们需要在我们的myTheme.scss中地位到：import se
15、ncha-touch/default/all;然后在它后面添加：include pictos-iconmask(bolt);这样我们就告诉我们的框架来添加一个bolt.png的图标文件作为一个新的图标遮罩。我们并不需要文件的扩展名的，我们在使用的时候同样不需要文件的扩展名的，只需要这样使用的：iconCls: bolt,在使用的时候记得以上两点注意就OK了。VariablesVariables并不像mixnis那样作用全局，它可以对一个组件单独制定样式。例如我们可以为一个button制定样式： $button-gradient: The default gradient for all buttons. $button-height: The default height fo
