《如何在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