第十六天（Theming Sencha Touch）

最新推荐文章于 2014-11-03 19:03:48 发布

一个热爱bug的程序猿

最新推荐文章于 2014-11-03 19:03:48 发布

阅读量2.3k

点赞数

分类专栏： android sencha-touch

本文链接：https://blog.csdn.net/yax405/article/details/10165011

版权

android 同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

sencha-touch

23 篇文章 0 订阅

订阅专栏

原文地址：http://docs-origin.sencha.com/touch/2.2.0/#!/guide/theming

Theming Sencha Touch

st中的主题

这篇感觉翻译的非常非常糟糕，需要参考的人一定要谨慎哈，不想误人子弟，后面我会在仔细看看，然后更行下的！

Contents

Sencha Touch theming works the same as in ExtJS. For more information, see the ExtJS Theming Guide.

st中的主题语ExtJS 的一样。更多信息请查看ExtJS Theming向导篇。

Touch 2.2 introduced these new features and changes:

st2.2介绍了如下一些新特性和改进：

Platforms 平台
Themes 主题
platformConfig 平台配置
Base Theme 基础主题
List Component Change List组件的变化

Platforms 平台

Sencha Touch 2.2 introduces the capability of defining platforms, which gives you the ability to load specific resources in your application based on the platform on which your app runs.

st2.2介绍了对平台定义的能力，使得你能够依据应用所运行的环境来加载指定的资源。

In the following example from an application's app.json file, the application loads the sencha-touch.css file when the app runs on Chrome, Safari, iOS, Android, or Firefox:

下面是一个应用的app.json文件的例子，当该应用运行在chrome、safari、ios、android、firefox浏览器上时，应用加载sencha-touch.css文件：

"css": [
    {
        "path": "resources/css/sencha-touch.css",
        "platform": ["chrome", "safari", "ios", "android", "firefox"]
    }
]

You can specify multiple platforms and use it to load JS resources. In this example, the vendorfiles.js resource loads when the platform is Chrome, Safari, or iOS:

你可以指定多个平台并使用它来加载js资源。在这个例子中，当运行的平台是chrome、safari、ios时会加载vendorfiles.js:

"js": [
    {
        "path": "vendorfiles.js",
        "platform": ["chrome", "safari", "ios"]
    }
]

Each loads only if the platform of the device running the app matches a platform you specify for the resource.

当且仅当app所运行设备的平台与你指定的平台相匹配时才会加载。

You can test this functionality by using the platform parameter in a URL:

你可以通过在url参数中使用platform参数来测试该功能：

http://localhost/sdk/touch/examples/kitchensink/index.html?platform=ie10

You can also detect which platform the device is running on from within your application by using platformConfig.

你也可以在你的应用中使用platformConfig来检测当前的设备环境。

The list of available platforms are:

可用的平台列表：

android
blackberry
chrome
desktop
firefox
ie10
ios
phone
safari
tablet

Themes 主题

Themes are a set of CSS styles you can set to change an application's appearance for a device or platform. You can reference the styles as resources in your app.json file for your application.

主题是一系列css样式，你可以设置这些样式来为一种设备或平台的应用改变外观。你可以在应用的app.json文件中将这些样式作为资源引用。

Sencha Touch provides a base theme that you can customize, a Sencha Touch theme, an IE10 theme for Windows Phone and Surface, and a BlackBerry 10 theme. To code a theme, use Compass and Sass, which are provided when you install Sencha Cmd.

st提供了一个基础的主题让你能够定制。一个st主题、针对Windows Phone和Surface的ＩＥ１０主题、Blackberry10的主题。使用安装sencha cmd时提供的Compass和Sass来编写主题。

In this example, the Apple theme loads only when the platform is iOS. When the iOS platform loads, your app knows that the current theme is Apple:

在这个例子中，Apple主题只有在平台是ios时才会加载。当ios平台加载时，你的应用就知道当前的主题是Apple：

"css": [
    {
        "path": "resources/css/sencha-touch.css",
        "platform": ["ios"],
        "Theme": "Apple"
    }
]

Within your application, you can access a theme name by using Ext.theme.name.

在应用中，你可以通过Ext.theme.name来访问主题。

If you do not define a theme, the theme name is Default.

如果你没有定义主题，那么默认的主题name是Default。

You can test themes by using the theme parameter in the URL when running your app:

你可以在运行app时，通过在url中添加theme参数来测试主题：

http://localhost/sdk/touch/examples/kitchensink/index.html?theme=Apple

Important The framework uses the Windows and Blackberry themes to change the functionality of the framework if that theme is in use. If you want to replicate that functionality, and you intend to use either the Windows or Blackberry themes, you should also use those names.

注意：如果当前主题正在被使用，框架会使用Windows和Blackberry主题来改变当前的主题。如果你想重写该功能并使用Windows或者Blackberry主题，你应该使用这些主题的名字。

platformConfig 平台配置

The platformConfig feature lets you define config values based on the current platform, or theme, on which your application is running.

platformConfig允许你根据当前应用所运行的平台或者主题来定义配置。

This example defines a new class Example.view.Login that uses a simple login form. The value for the FieldSet title is specfied as Login, however by using platformConfig, you can set the value of the title based on the platform - in this case, ie10.

下面的例子定义了一个使用简单的login form作为视图的新类：Example.view.Login。FieldSet的title被指定为Login，然而通过platformConfig，你可以依据平台来设置title值——本例中是ie10.

    Ext.define('Example.view.Login', {
            extend: 'Ext.panel.FieldSet',

            config: {
                    title: 'Login'
            },

            platformConfig: [{
                    platform: 'ie10',
                    title: 'Microsoft Login'
            }]
    });

A more complex example could display your view differently or change the items in your view based on the platform you are running.

一个更复杂的例子是，依据你所处的平台展现不同的视图或者改变视图的items项。

The config system in Sencha Touch is incredibly powerful. It allows you to develop applications with lots of functionality, very quickly. For more information about the config system, read the Class System guide.

st中的config系统是极为强大的。它允许你快速的开发很多功能。查阅Class System 获取关于config系统的更多信息。

Base Theme 基础主题

The base theme is the required styling to lay out components of Sencha Touch. There are no colors or custom styling like gradients and margins and padding. It is simply the starting point of actual themes.

基础主题是布局st组件所必须的样式。没有颜色或者客户端样式如渐变、边距和填充。仅仅是真实主题的开始点。

In previous Touch versions, if you wanted to create highly customized themes, you had to override a lot of the styling of the Default theme by using lots of hacks like !important.

在以前的st版本中，如果你想创建高度定制的主题，你需要使用很多样式如!important来重写默认主题的很多样式。

Developing themes for Sencha Touch was made simple with the use of Sass, Compass and their features. This lets you dynamically change colors and measurements using variables, and create new UIs by using mixins. This rapidly speeds up development of custom themes based on the default Sencha Touch theme.

使用Sass、Compass及其特性使得编写st主题变得更简单了。这让你能够动使用变量动态的改变颜色和尺寸，并能够通过使用混合配制创建新的ui。这大大加速了基于st默认的主题开发自定义主题的速度。

Advantages of the new base theme:

新主题的优势：

No layouts for Sencha Touch components. These are already handled for you in the base. All you have to do is style a component for how you want it. 不需要为st组件指定布局。这些已经在基础主题里面替你处理了。你所需要做的是根据你的需要定义组件的样式。
No overriding default styles, because there are none. The base theme only lays out components, which means it is actually usable. You need to build on the base theme to style it, but there is no longer any need to use hacks to remove the existing styling. Which in turn, reduces the file style of your CSS because you no longer have all that default styling. 不需要重写默认的样式，因为没有。基础主题只控制组件的布局，意味着它确实可用。你需要基于基础主题定制它的样式，但是不需要任何代码去移除已经存在的样式。相应的，减小了css文件的体积，因为你没有默认的样式。
Faster CSS compiles. Along with reduced size, themes provide faster compile times. Sencha Touch uses Compass to compile stylesheets from Sass to CSS. In older Sencha Touch versions, Compass could take multiple seconds to compile because it had to compile the default theme along with all your custom styling. Now that the base is separate, you only have to compile your custom styling - which means compiling themes has dropped to fractions of seconds. This makes writing stylesheets much quicker. 更快的css编译速度。随着css文件体积的减小，主题提供了更快的编译速度。st使用Comapss将样式从Sass编译为css。在老的st版本中，Compass需要花几秒编译，因为它需要将默认的主题与你自定义的样式一起编译。现在，基础主题被分开了，你只需要编译自定义的样式——这使编译的时间大大缩短。这使编写样式更快了。

Upgrading Themes From Sencha Touch 2.1 to 2.2

将st从2.1升级到2.2

There are a lot of changes from Sencha Touch 2.1 to 2.2, but the upgrade path is rather simple.

从2.1到2.2，st做了很多改变，但是更新方法相当简单。

The most important change to be aware of is the move away from using mixins for each component. We found that using mixins for each component was quite slow when compiling your Sass, so we decided to simply move to using @import to just include each component.

最大的改变移除了对每个组件的混合使用。我们发现为每一个组件混合使用在编译Sass时相当慢，因此我们决定使用@import来包含每一个组件。

In Touch 2.1, your stylesheet looked like this:

在2.1中，你的样式看起来像下面这样：

@import 'sencha-touch/default/all';

@include sencha-panel;
@include sencha-buttons;
// and other components…

In Touch 2.2, it looks like this:

在2.2中，是这样的：

@import 'sencha-touch/default';

@import 'sencha-touch/default/Panel';
@import 'sencha-touch/default/Button';
// and other components

Instead of using @include to include a component mixin, use @import to import the component.

使用@import代替@include来引入组件。

To include all default components in Sencha Touch 2.2, use:

在2.2中引入默认组件的方式为：

@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

The same goes for when you are using other themes.

当你使用其它主题时也是类似的。

Windows: Windows主题：

@import 'sencha-touch/windows';
@import 'sencha-touch/windows/all';

BlackBerry: BlackBerry主题：

@import 'sencha-touch/bb10';
@import 'sencha-touch/bb10/all';

To include only the base theme:

只包含基础主题：

@import 'sencha-touch/base';
@import 'sencha-touch/base/all';

The base theme does not have styling like the Default, Windows, and BlackBerry themes.

基础主题不包含Default、Windows、Blackberry主题样式。

List Component Change 列表组件的改变

The List component has been optimized to ensure performance is best in every scenario. Lists now have these modes:

List组件被重构优化过以保证在每一种情形下表现都很优秀。List现在有如下模块：

Normal items 正常的items项
Infinite 自定义项
Simple items 简单的items项
Items with different heights 有不同高度的items项

Unfortunately this means that the DOM structure of list items can change depending on the mode the list is running. Therefore if you have custom styling on lists or list items, change the selectors to match the new selectors used in 2.2.

遗憾的是，这意味着list的item项的dom结构是依据list 所依赖的mode来改变的。因此，如果你对list或list的item有自定义样式，需要将选择器改至2.2中所使用的选择器。

Using an Existing Theme 使用已经存在的主题

Using one of the default themes in your Sencha Touch 2.2 application is simple. Just include the appropriate theme stylesheet into your app.json file:

在st2.2应用程序中使用默认的主题是很简单的。只需要将恰当的主题样式引入app.json文件即可：

"css": [
    {
        "path": "resources/css/wp.css",
        "update": "delta"
    }
]

This example includes only the Windows theme in the wp.css file. Ensure that the path points to the correct stylesheet within the SDK folder.

这个例子只包含了Windows主题的wp.css文件。确保路径指向了sdk目录下正确的样式。

If you want to load different themes depending on the platform, include them in your app.json file:

如果你需要依据平台来加载不同的主题，在你的app.json中包含它们：

"css": [
    {
        "path": "resources/css/sencha-touch.css",
        "platform": ["chrome", "safari", "ios", "android", "firefox"],
        "theme": "Default",
        "update": "delta"
    },
    {
        "path": "resources/css/wp.css",
        "platform": ["ie10"],
        "theme": "Windows",
        "update": "delta"
    },
    {
        "path": "resources/css/bb10.css",
        "platform": ["blackberry"],
        "theme": "Blackberry",
        "update": "delta"
    }
]

In this example, the Windows theme loads on the "ie10" platform and the BlackBerry theme loads on "blackberry". All other devices uses the Default Sencha Touch theme.

在这个例子中，Windows主题会在ie10平台加载，Blackberry主题会在“blackberry”平台加载。所有其他设备会使用默认的st主题。

Extending an Existing Theme 扩展已存在的主题

Extending one of the default themes in Sencha Touch 2.2 is also simple.

扩展一个默认的主题在st2.2中也很容易。

To extend a custom theme:

扩展自定义主题：

Open your resources/sass/app.scss stylesheet which is automatically generated when creating an application using Sencha Cmd. 使用Sencha Cmd创建项目的时候会自动在resources/sass/app.scss文件，打开该文件
Include the Sencha Touch theme you want. This example uses the default theme: 引入你想要的st主题。该例中使用default主题：
```
 @import 'sencha-touch/default';
 @import 'sencha-touch/default/all';
```
Or the Windows theme: 或者Windows主题：
```
 @import 'sencha-touch/windows';
 @import 'sencha-touch/windows/all';
```
Add your custom Sass styles. 添加你的自定义Sass样式
Compile and launch your application: 编译并启动应用：
```
 compass compile resources/sass
```

Creating a New Theme 创建新的主题

Creating a new theme is very similiar to extending a default theme, except that you only want to include the base theme.

创建一个新的主题语扩展一个已存在的主题类似，除非你只想包含基础主题。

To create a theme:

创建一个主题：

Open your resources/sass/app.scss stylesheet which is automatically generated when creating an application using Sencha Cmd. 打开使用Sencha Cmd创建应用时自动生成的resources/sass/app.scss样式文件

Include the Sencha Touch base theme: 引入st基础主题：

 @import 'sencha-touch/base';  
 @import 'sencha-touch/base/all';

Now you can write the custom Sass required to theme your app.

现在你可以为你的app创建自定义Sass了。

Custom Theme Tips 自定义主题提示

Sencha Touch components always have a baseCls that matches the name of the component. Some example of this are:

st组件总是有一个与name匹配的baseCls，如下所示：
- Ext.List -> .x-list
- Ext.field.Text -> .x-field-text
- Ext.field.Numer -> .x-field-number
- Ext.panel.Form -> .x-form-panel
If you are not familiar with the DOM structure of Sencha Touch applications, use the Web Inspector of your browser to inspect the DOM to determine what elements you need to style. 如果你对st应用的dom结构不熟，使用浏览器的Web监视器来查看dom，以决定哪些元素你需要定义样式。
You can also use the Web Inspector to detect what the base theme uses as selectors: 你也可以使用浏览器监视器来观察作为选择器的基础主题：
Navigate to a list example with just the base theme 导向到一个基础主题的列表例子
Select a list item and open it in the Web Inspector 选择一个列表项并在监视器中打开
Navigate the DOM until you see the selected class 'x-item-selected' (it may even be the select DOM element) 跟踪dom结构，直到你看到‘x-item-selected’（它可能依旧是dom元素）
Use the styles panel to see and copy the selector used in the base theme. 用style面板查看并复制基础主题所使用的选择器。
Paste the selector into your app.scss file and style as needed: 将需要的选择器样式粘贴在你的app.scss文件中

.x-list .x-list-item.x-item-selected .x-dock-horizontal, .x-list .x-list-item.x-item-selected.x-list-item-tpl {
```
 color: red;
```
}

Icon Fonts 图标字体

One element of themes in Sencha Touch 2.2 is the new use of icons as fonts. Previously, scaling icons required a great deal of overhead where the application had to draw the picture for the icon and then redraw, rescale, and change it as the app appeared on different browsers and devices.

st2.2中主题之一是对图标和字体的使用。之前，缩放图标需要做很多工作，应用需要画图标的图片，然后重绘，缩放，再依据app所运行的不同的浏览器和设备进行改变。

New in Touch 2.2, icons are now handled as fonts, which enables very fast scaling without the need to redraw the picture. Icons appear on buttons and tabs.

st2.2中，图标是按字体处理的，这使得它能够快速缩放而不需要重绘。图标出现在buttons和tabs上。

To convert your existing icons to fonts, you can use Pictos Server, Pictonic, icomoon.io, or http://fontstruct.com/ — some of these are free or available with trial subscriptions.

为了将已经存在图标转换为字体，你可以使用Pictos Server、Pictonic、icomoon.io或者http://fonstruct.com/——其中一些事免费使用的或者有一段时间的试用期。

For more information on setting Icon fonts, see Changes to Sencha Touch 2.2 Theming Part 1: Using Iconography from Figleaf.com.

关于设置图标字体的更多信息，查看Figleaf.com上的 Changes to Sencha Touch 2.2 Theming Part 1: Using Iconography获取更多信息。

Using the Pictos Font 使用Pictos Font

The Pictos font provides a large collection of free icons. You can find a full list of characters available for the Pictos font at http://www.pictos.cc. Sencha Touch provides free access to the Pictos Font Pack.

Pictos font提供了大量的免费图标。你可以在http://www.pictos.cc上找到大量的可用Pictos font。st可以直接访问Pictos Font Pack.

When you build your application using Sencha Cmd, the font libraries are copied to your application file.

当你使用Sencha Cmd构建你的应用是，font库会被复制到你的应用文件中。

Just like Sencha Touch 1 and 2, Sencha Touch 2.2 maps icon names to actual icons so you can use them within your application:

跟st1、2类似，st2.2将图标名和实际的图标做了映射，因此你你能够在应用中使用它们：

{
    xtype: 'button',
    iconCls: 'home',
    title: 'Home'
}

For a full list of iconCls functions that are available, refer to the Ext.Button class documentation.

查看Ext.Button文档获取iconCls的所有可用值。

Alternatively, you can use the Compass icon mixin to map a specific character of the icon font to an iconCls which you can use in your app:

此外，你可以使用Compass icon对一个特定的字符与一个iconCls进行映射，你可以在你的app中使用：

@include icon('home', 'H');

Using Other Icon Fonts 使用其它Icon Fonts

The Pictos font is not the only font you can use in your application. If you know of another font or you have custom converted your icons to fonts, it is very easy to use that font with the icon mixin.

你所能使用的并不仅仅只是Pictos font。如果你知道其它font或者你有转为字体的自定义图标，用icon mixin是很容易使用该字体的。

Just like with the Pictos font, you need to specify the iconCls and character to be used for the icon. Additionally, you need to specify the name of the icon font, which needs to match the font family of the icon font you have, plus you need to make sure the font has been included in your CSS using the icon-font mixin.

与Pictos font类似，你需要为图标指定iconCls和引用字符串。此外，你需要指定图标字体的name，该name字段必须与你所有的图标字体相匹配，此外，你必须保证字体已经通过icon-font添加到了css中。

This example specifies the Home icon in the custom MyFont:

这个例子指定Home图标在自定义中叫MyFont：

@include icon('home', 'H', 'MyFont');

The following example shows how to include the Pictos font using the icon-font mixin:

下面的例子展示了使用icon-font引入Pictos font：

@include icon-font('Pictos', inline-font-files('pictos/pictos-web.woff', woff, 'pictos/pictos-web.ttf', truetype,'pictos/pictos-web.svg', svg));

The first parameter is the name of the font face, which must match the name you use as the CSS font-family. The second parameter uses the inline-font-files Compass function to base64-encode the font file inline into the CSS file with paths to the WOFF, TTF, and SVG versions of the font files.

第一个参数时字体的名字，该名字必须与css中的字体名字一致。第二个参数使用inline-font-files Compass方法将字体文件已base64编码加入css文件，css文件分别放于是WOFF、TTF、SVG不同版本的字体文件下。

A good list of other icon fonts (some paid and some free) is available at http://css-tricks.com/flat-icons-icon-fonts/

查看http://css-tricks.com/flat-icons-icon-fonts/查看其它图标字体列表（有些需要付费有些免费）

Sencha Touch 1 and 2 used -webkit-mask to display and style fonts. Unfortuantely, although webkit-mask functionality works on most WebKit browsers, it does not work on non-WebKit browsers like Internet Explorer. Sencha Touch 2.2 fully supports IE10, so webkit-mask is no longer an option.

st 1和st2 使用-webkit-maask展示和塑造字体。然而，尽管webkit-maask在很多WebKit内核的浏览器上运行的很好，它在非WebKit内核的浏览器上如IE上并不能正常工作。st2.2支持IE10，因此webkit-mask不再需要。

Creating a custom font 自定义字体

There are many tools available online to create your own icon font. A good example of this is icomoon.

有很多在线工具供你创建你自己的图标字体。一个好的例子是icomoon.

Advantages of creating your own icon font:

创建你自己的图标字体的好处：

You can pick the icons you want to use in your application. 你可以挑选你想用的图标
Because you are choosing your own icons, you can reduce the file size of the font, which in turn reduces the size of your stylesheet. 因为是你在选择图标，那么你可以减少字体文件的体积，相应的也可以减少样式文件的体积。