2022年如何在senchaTouch中自定义icon .pdf

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. 讨论在不同设备屏幕上的一些注意事项和开发的快捷方式。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 World 5. 我们同样也可以使用一个外部的样式文件来改变组件的样式，代码如下：1. 2.xtype: panel, 3.cls: myStyle, 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 14 页 - - - - - - - - - 4.html: Hello World 5. 有很多有用的选项来控制一个组件的显示效果。我们也可以在 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 World 7. 需要注意的是如果是数字值的话，不需使用引号的，但是如果是CSS 字符串值的话，就需要使用引号括起来了。 这些只能简单的改变一个组件的样式的，但是如果我们需要改变我们应用程序的样式的话，我们就应该好好的研究一下主题和UI 样式风格了。UI styling for toolbars and buttons 我们就以下面的例子来深入探讨toolbars和 buttons的样式。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 14 页 - - - - - - - - - 我们现在我们上面的例子中添加两个toolbar ，代码我就省略了。1. 2.dock: top, 3.xtype: toolbar, 4.height: 25, 5.items: 6.text: My Button 7. 8. 我们可以通过设置height值来设置我们 toolbar的高度。我们可是使用 ui 来设置 toolbar的样式的，主要有light 和 dark ，看下面的截图吧：上面的 toolbar的 ui 是 dark ，下面的 toolbar 的 ui 是 light 。Styling buttonsbuttons同样有 ui 的配置， 主要有 normal ，back ，round ，small ，action ，和 forward 。同样也有颜色的定义的， 可以通过使用简单的连接符使他们链接到一起，例如：confirm-small或者 decline-round。我们看截图吧，这些代码实在是简单，我就不粘了：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 14 页 - - - - - - - - - 像 width值这样的设置，你可以自己查阅API 文档，如果不设置的话，会占满整个 panel 的。Sencha Touch themes ST 中，Themes 是一个非常有用的方法来快速改变我们应用程序的外观的。那么什么是 themes 呢？SASS + Compass = themes如果我们真的决定要改变我们的主题的话，我们就不得不安装SASS和Compass了，这些并不包含在ST 的库文件中。首先我们要安装Ruby 。Installing RubyMac 中不需安装了，因为在OSX 中已经安装好了，但是Windows中，需要用户自己下载并安装Ruby 。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 14 页 - - - - - - - - - 并设置好 PATH 。我们可以在命令行中验证我们的安装的。1.C:Ruby192 ruby - v 2.ruby 1.9.2p180 ( 2011 - 02 - 18 ) i386 - mingw32Installing SASS and Compass对于 Mac 和 Windows用户来说，安装略有不同的。我们可以在 Mac 中通过终端来安装的：1.sudo gem install haml 2.sudo gem install compass Windows用户可以在命令行中安装：1.gem install haml 2.gem install compass 如果你觉得这种安装方法并不适合你的话，你可以在网上搜寻捆绑了Ruby ，SASS， Compass的包， 直接集成安装在自己的电脑上： Scout ， Compass.app。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 14 页 - - - - - - - - - Creating a custom theme 接下来就是如何来创建我们自己的主题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.includesencha-panel;4.includesencha-buttons;5.includesencha-sheet;6.includesencha-picker;名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 14 页 - - - - - - - - - 7.includesencha-tabs;8.includesencha-toolbar;9.includesencha-toolbar-forms;10.includesencha-carousel;11.includesencha-indexbar;12.includesencha-list;13.includesencha-list-paging;14.includesencha-list-pullrefresh;15.includesencha-layout;16.includesencha-form;17.includesencha-msgbox;18.includesencha-loading-spinner;这些代码抓取了 ST 中所有的默认主题文件， 并把他们编译成一个新的css 文件，存放到 css 文件夹中。我们先来看看如何改变我们应用的颜色。Base color这些中一个很关键的变量就是$base_color ，我们改变一下这个变量就会明白是什么意思了。$base_color: #546346;然后我们将我们修改的文件编译。在命令行进入我们的scss 文件所在的文件夹中，然后输入命令来编译：compass compile这将更新我们的 myTheme.css文件。我们看看我们的程序发生了什么变化：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 14 页 - - - - - - - - - 如果我们改变 base color ，将改变我们的底部tab bar 的颜色。因为我们改变的是整个应用程序的基色。 但是这并不是我们需要的， 因为我们可能只想改变某个组件的样式，通过mixins和 ui configuration。compass compile versus compass watchCompass使用compile来编译我们创建的样式文件。我们同样可以设置Compass来针对特定文件的改变来自动编译：compass watch filename只要你的终端开着， 这个命令就会一直激活。 一旦关闭了， 就需要从新输入命令来检查改变。Mixins and the UI configuration每一个组件都有自己的mixins和变量来控制自己的样式的。 我们可以改变这些来控制单个组件的样式的。我们上面看到了ui 中的配置项中有light和 dark ，但是我们可以自己定义一个样式，在我们的sass 文件中。我们需要先定位到一下代码：import sencha-touch/default/all;然后在它后面添加我们自己定义的ui ：includesencha-toolbar-ui(subnav, #625546, matte);这样我们将创建一个叫做subnav 的 ui ， 并且有一个 base color属性#625546 ，最后一项是设置倾斜的，主要有如下参数可设置：flat: No gradient. matte: A subtle gradient. bevel: A medium gradient. glossy: A glassy style gradient. recessed: A reversed gradient.我们就可以保持编译了。我们将上面例子中的light变成我们的 subnav ，你就会看见变化：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 14 页 - - - - - - - - - Adding new icon masks我们利用pictos-iconmaskmixin同样可以改变我们底部tab bar的图标遮罩。有两点需要注意的：第一，这些图标是作为按钮的遮罩使用的。这就意味着， 这些图标是使用简单色的透明 PNG。我们看看下面的图片就是就明白了：虽然我们源文件比我们的图标大，但是它会自动缩放的。第二点需要考虑的就是，我们的这些图标在一个特定的文件夹中：/lib/resources/themes/images/default/pictos。 你可以打开看看， 在这个文件夹中，已经存放了框架自己定义好的一些图标。我们来看一个例子吧：假如我们有一个叫做bolt的图标文件，并且你想再touchStart.js中使用它，如果我们不对它进行处理的话，框架就会用一个空的名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 14 页 - - - - - - - - - 方块来代替它，因为框架找不到它，那我们怎么处理他呢？我们需要在我们的myTheme.scss中地位到：import sencha-touch/default/all;然后在它后面添加：includepictos-iconmask(bolt);这样我们就告诉我们的框架来添加一个bolt.png的图标文件作为一个新的图标遮罩。我们并不需要文件的扩展名的， 我们在使用的时候同样不需要文件的扩展名的，只需要这样使用的：iconCls: bolt,在使用的时候记得以上两点注意就OK 了。VariablesVariables并不像 mixnis那样作用全局，它可以对一个组件单独制定样式。例如我们可以为一个button制定样式：$button-gradient: The default gradient for all buttons. $button-height: The default height for all buttons. $button-radius: The default border radius for all buttons . $button-stroke-weight: The default border thickness for all buttons.我们可以添加在我们的样式文件中添加$button-height: 2em ，我们就会发现我们的 toolbar按钮比以前大了：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 14 页 - - - - - - - - - 你可能发现了，我们的Confirm和 Decline的高度并没有发生改变，这是因为他们的 UI 配置项从 button中分离出来了，并设定好了高度了。如果你想改变他们的高度的话，你可以移除他们的高度的设置。More SASS resources 我们可以通过改变mixins和 variables来定制我们想要的界面样式，我们可以在 开 发 文 档 中 深 入 研 究 其 他 的 选 项 来 改 变 我 们 的 样 式 for multiple devices 我们在设计程序的时候， 一般都要考虑的就是我们的应用程序在不同设备上运行之后的外观，所以我们需要为不同设备创建不同的UI 风格。 至于如何判断设备，这里就不详细讲解了，你可以参考相关的API 文档，下面看一个简单的例子，我们是如何对不同的设备提供支持的：1.if(Ext.is.Tablet | Ext.is.Desktop) 2. varfontSize = 12px; 3. vardefaultUI = normal; 4. varbuttonWidth = 100; 5. else 6. varfontSize = 16px; 7. vardefaultUI = large; 8. varbuttonWidth = 200; 9. 10.11.newExt.Application( 12.name: TouchStart, 13.launch: function() 14.var about = new Ext.Panel( 15.fullscreen: true, 16.title: Touch Start, 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页，共 14 页 - - - - - - - - - 17.html: Changing type sizes based on the device, 18.style: font-size: +fontSize+;, 19.items: 20.xtype: button, t 21.ext: My button, 22.ui: defaultUI, 23.width: buttonWidth 24. 25.); 26.this.viewport = about; 27. 28.); 显示效果如下：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页，共 14 页 - - - - - - - - - Images on multiple devices with Sencha.io Src 这个就是 Sencha 提供的一个在线的改变我们图片大小的程序，我们可以通过它来改变我们图片的大小来适应我们的设备。通常的标签设置如下：使用服务器的标签如下：我们同样可以指定我们图片的大小：或者只指定宽度，按照正确的比例自动填充宽度：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 13 页，共 14 页 - - - - - - - - - 我们可以通过公式来设置图片的宽度，比屏幕小20 个像素：或者按照百分百显示图片，设置图片为屏幕宽度的50% ：甚至是改变图片的格式： 这些我就不详细的讲解了，你可以参照Sencha.io中讲解详细研究，这里只是粗略的讲了一下，可能有错误，详情参照官方文档。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 14 页，共 14 页 - - - - - - - - -