为Sencha Touch应用程序的用户界面设置样式

  • 所需知识:基本JavaScript的HTMLCSS
  • 要求:Sencha Touch 1.1和Safari Web浏览器
  • 项目时间:2-3个小时

这是来自第3章的编辑摘录Sencha Touch移动JavaScript框架约翰克拉克和布莱恩约翰逊。

我们将介绍一些可用于自定义应用程序的不同视觉元素。在本文中,我们将:

  • 仔细查看工具栏和按钮,使用布局,其他样式和图标,以增强用户界面的视觉吸引力。
  • 展开我们之前使用图标的工作,包括制作您自己的自定义图标和使用base64在样式表中包含图标,而不使用实际的图像文件。
  • 讨论使用不同设备和屏幕尺寸的注意事项和快捷方式。
  • 使用SASS和Compass探索功能强大的Sencha主题引擎,使用简单的CSS样式命令创建复杂的可视外观。

样式组件与主题

在我们深入了解细节之前,了解单个组件样式与创建主题之间的区别非常重要。

几乎Sencha Touch中的每个显示组件都有一个选项来设置自己的风格。例如,面板组件可以这样使用样式:

{
Xtype:'panel',
风格:'border:none;字体:12px Arial black',
Html:'Hello World'
}

我们还可以为组件设置样式类,并使用外部CSS文件来定义类,如下所示:

{
Xtype:'panel',
Cls:'myStyle',
Html:'Hello World'
}

这些是用于控制各个组件的显示的非常有用的选项。还有一些样式元素,例如边框,填充和边距,可以直接在组件的配置中设置:

{
Xtype:'panel',
BodyMargin:'10 5 5 5',
bodyBorder:'1px solid black',
BodyPadding:5,
Html:'Hello World'
}

这些配置可以接受要应用于所有边的数字或CSS字符串值,例如,1pxsolidblack要么10555。应该输入不带引号的数字,但CSS字符串值必须在引号内。

这些微小的变化可能有助于您的应用程序样式,但如果您需要做一些更大的事情呢?如果您想要更改整个应用程序的颜色或外观怎么办?如果您想为按钮创建自己的默认样式,该怎么办?

这是主题和UI样式发挥作用的地方。我们将首先看一下UI样式,然后看看我们如何扩展这个概念,为我们的应用程序创建一个整体主题。

工具栏和按钮的UI样式

让我们再看看我们在前一章中创建的简单应用程序,并使用它来开始使用工具栏和按钮探索样式。

为了开始我们对样式的探索,我们将在我们的应用程序中添加第二个上部工具栏。找到DockedItems我们上一个例子的代码部分:

DockedItems:[
{
码头:'顶',
Xtype:'工具栏',
标题:'关于TouchStart'
}
]

在第一个工具栏的尾随花括号之后,让我们添加第二个工具栏,如下所示:

{
码头:'顶',
Xtype:'工具栏',
标题:'关于TouchStart'
},{
码头:'顶',
Xtype:'工具栏',
项目:[
{text:'我的按钮'}
]
}

不要忘记在两个工具栏之间添加逗号。

01.额外或缺少逗号

在Sencha Touch中工作时,解析错误的最常见原因之一是额外或缺少逗号。当您移动代码时,请务必确保已记录任何流浪或丢失的逗号。对我们来说幸运的是,Safari错误控制台通常会让我们非常清楚地了解这些类型的解析错误的行号。

当您查看新工具栏时,您将看到,因为它没有标题,它比它上面的那个短一些。标题使顶部栏看起来比另一个工具栏略大。您可以通过添加a来控制工具栏的高度高度配置到工具栏,如下:

{
码头:'顶',
Xtype:'工具栏',
身高:25,
项目:[
{text:'我的按钮'}
]
}

高度配置需要一个数字(不带引号)来确定工具栏的高度。您可以调整此数字以符合您的偏好。

两个工具栏一起显得有点暗,所以我们将使用更改底部条的外观UI配置选项:

{
码头:'顶',
Xtype:'工具栏',
Ui:'光',
项目:[
{text:'我的按钮'}
]
}

工具栏UI有两个初始值:是默认值(由上方工具栏使用)。在Safari中保存并重新加载页面时,应该会看到上部和下部工具栏之间存在一些对比。

Sencha Touch

02.造型按钮

按钮也有一个UI配置设置,但它们有不同的选项:

  • 正常:默认按钮。
  • 背部:一个左侧缩小到一个点的按钮。
  • 回合:一个更加圆润的按钮。
  • :一个较小的按钮。
  • 行动:默认按钮的更亮版本。
  • 向前:一个右侧缩小到一个点的按钮。

按钮也有一些颜色内置的选项UI选项。这些颜色选项是确认下降。这些选项与使用连字符的先前形状选项组合。例如,确认小要么下降轮

让我们添加一些新的按钮,看看它的外观。找到项目在我们的按钮列表,在第二个工具栏中:

项目:[
{text:'我的按钮'}
]

替换旧的项目列表中包含以下新内容项目列表:

项目:[
{
回信',
Ui:'回'
},{
文字:'圆',
Ui:'round'
},{
文字:'小',
Ui:'小'
},{
文字:'正常',
Ui:'正常'
},{
文字:'行动',
Ui:'行动'
},{
文字:'前进',
Ui:'前进'
}
]

由于按钮实际上可以在任何地方使用,我们也可以添加一些面板容器,所以我们可以看到什么UI选项,确认下降, 看起来像。在我们的第一个面板中找到以下行:

HTML:'

你好,世界
”,

在该行下方,添加以下内容:

项目:[
{
Xtype:'按钮',
文字:'确认',
Ui:'确认',
宽度:100
},{
Xtype:'按钮',
文字:'拒绝',
Ui:'衰落',
宽度:100
}
]

Sencha Touch

在我们的面板按钮中,您可能会注意到两件与工具栏按钮不同的内容。首先是我们宣布的xtype: '按钮'在我们的面板中,但我们不在工具栏中。这是因为工具栏假定它将包含按钮,和的xtype只有在使用按钮以外的东西时才需要声明。面板未设置默认值的xtype属性,因此面板中的每个项目都必须声明一个。

第二个区别是我们宣布宽度按钮。如果我们在面板中使用按钮时没有声明宽度,它将扩展为完整宽度小组的。在工具栏上,该按钮会自动调整大小以适合文本。

这些简单的样式选项有助于使您的应用程序更易于导航,并为用户提供重要或潜在破坏性操作的可视线索。

03.标签栏

与工具栏一样,底部的标签栏也可以理解UI两者的配置选项。但是,标签栏也会根据图标更改图标外观UI选项;一个工具栏将有黑色图标和一个工具栏将有灯图标。

这些图标实际上是黑白图像,用于在标签栏的颜色上创建蒙版。在本文后面,我们将向您展示如何创建自己的图标蒙版并将它们集成到您的应用程序中。

虽然我们讨论的是图标主题,但我们还应该看一下您希望在应用程序中包含的基本图标。

Sencha Touch主题

Sencha Touch中的主题是快速更改应用程序整体外观的强大方法。我们将在本章稍后介绍安装过程,但在开始之前我们需要做一些基础工作。需要涵盖很多概念信息,但您获得的灵活性将非常值得。

我们需要首先介绍的是Sencha Touch使用的工具的基本概述,这些工具可以使您的应用程序成为可能:SASS和Compass。

04. SASS +指南针=主题

Sencha Touch主题通过提供其功能特定于Sencha Touch的变量和mixins,使SASS和Compass更进一步。 Sencha Touch的JavaScript部分会生成大量非常复杂的HTML,以显示各种组件,例如工具栏和面板。您不必学习Sencha Touch使用的所有复杂类和HTML技巧,而只需使用适当的mixins来更改应用程序的外观。

设置SASS和指南针

如果您决定要创建自己的Sencha Touch主题,则必须同时安装SASS和Compass,它们是Sencha Touch的独立库。

安装SASS和Compass需要我们在命令行上做一些工作。由于SASS和Compass都可用RubyGems的,Windows用户首先需要安装红宝石

05.安装Ruby

Mac用户可以休息一下,因为默认情况下Ruby已经安装在OSX上。 Windows用户应该从中下载Ruby安装程序Rubyinstaller.org。 (我们建议使用1.9.2版。)

Sencha Touch

运行安装程序并按照屏幕上的说明安装Ruby。务必检查上面的方框将Ruby可执行文件添加到PATH中。这将节省您在命令行上的大量输入,稍后。

安装完成后,转到Windows,在Windows中打开命令行开始|跑打字CMD,并按输入。这应该调出命令行。

现在,尝试打字红宝石-v。您应该看到如下内容:

C:\ Ruby192> ruby -v
ruby 1.9.2p180(2011-02-18)[i386-mingw32]

这意味着正确安装了Ruby。

06.安装SASS和指南针

对于Mac和Windows用户,安装SASS和Compass的说明略有不同。
Mac用户需要打开终奌站应用程序并键入以下内容:

sudo gem install haml
Sudo Gem安装指南针

您需要使用您的用户名和密码进行身份验证才能完成安装。
Windows用户需要打开命令行并键入以下内容:

Gem Install Haml
宝石安装罗盘

安装完成后,我们就可以设置文件夹并开始使用SASS和Compass。

如果你对这个命令行不满意,有两个应用程序可以为你捆绑Ruby,SASS和Compass,并在Windows和OSX上运行:

创建自定义主题

接下来我们需要做的是创建我们自己的主题SCSS文件。找到煎茶,touch.scss档案TouchStart / Lib目录/资源/上海社会科学院,并制作该文件的副本。将文件的新副本重命名为MyTheme.scss

Sencha Touch

现在,我们需要告诉索引来查找我们的新主题。使用我们之前的示例文件,打开您的的index.html文件,并找到说明以下内容的行:

=“stylesheet”href =“lib / resources / css / sencha-touch.css”type =“text / css”>

改变煎茶,touch.css我们的样式表参考的index.html文件指向MyTheme.css

07. SCSS和CSS

请注意,我们目前正在包含一个样式表CSS文件夹,叫煎茶,touch.css,我们有一个匹配的文件SCSS文件夹,叫煎茶,touch.scss。编译SCSS文件时,它会在您的文件中创建一个新文件CSS夹。这个新文件的后缀为的CSS代替.scss

.scss是SASS文件的文件扩展名。SCSS是的缩写Sassy CSS

现在我们已经设置了路径,让我们来看看我们制作的主题文件副本。打开你的MyTheme.scss文件。你应该看到以下内容:

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

@ Includesencha面板;
@ Includesencha-按钮;
@ Includesencha片;
@ Includesencha选取器;
@ Includesencha袢;
@ Includesencha,工具栏;
@ Includesencha - 工具栏 - 表格;
@ Includesencha传送带;
@ Includesencha-indexbar;
@ Includesencha列表;
@ Includesencha列表分页;
@ Includesencha一览pullrefresh;
@ Includesencha布局;
@ Includesencha形式;
@ Includesencha-MSGBOX;
@ Includesencha加载微调;

此代码获取所有默认的Sencha Touch主题文件,并将它们编译为位于中的新CSS文件CSS夹。如果你打开了煎茶,touch.css文件中LIB /资源/ CSS文件夹,您将看到我们以前使用的压缩CSS文件。这个文件非常庞大,但它都是从基本命令创建的。

最好的部分是我们现在可以使用一行代码更改应用程序的整个颜色方案。

08.基色

Sencha Touch主题中的一个关键变量是$ Base_color。这种颜色及其变化在整个主题中使用。要了解我们的意思,让我们将主题的颜色更改为漂亮的森林绿色,将以下内容添加到您的顶部MyTheme.scss文件(在所有其他文本之上):

$ Base_color:#546346;

接下来,我们需要重新编译SASS文件以创建样式表。从命令行,您需要更改为上海社会科学院你的文件夹MyTheme.scss档案生活。进入文件夹后,在命令行中键入以下内容并单击输入

罗盘编译

这将更新我们的MyTheme.css用新文件$ Base_color值。重新加载
Safari中的页面,您应该会看到应用程序的新林绿色外观。

Sencha Touch

请注意,这一行代码为我们的暗工具栏和轻工具栏创建了变体。更改基色还更改了底部标签栏的图标。

这一切都很酷,但是如果我们想要调整主题的各个部分呢? Sencha Touch主题提供了我们所需要的,使用mixins和UI配置选项。

09.指南针编译与罗盘手表

指南针使用命令,根据您的SCSS文件创建新样式表。但是,您也可以将Compass设置为观察特定文件以进行更改,并在添加任何新内容时自动编译。此命令在命令行中输入,如下所示:

罗盘手表文件名

只要终端打开,此命令将保持活动状态。关闭终端窗口后,您需要再次运行该命令,以使Compass监视更改。

10. Mixins和UI配置

正如我们之前所说,Sencha主题系统是一组预定义的mixins和变量,它们被编译以创建CSS样式表。每个组件都有自己的mixins和变量来控制样式。这意味着您可以覆盖这些变量或使用mixins来自定义您自己的主题。

您还可以使用mixins为其创建其他选项UI配置选项(超越简单我们之前看到的价值观)。例如,我们可以通过向我们添加新的mixin来修改工具栏的颜色MyTheme.sass文件。

在你的MyTheme.sass文件,找到说明以下内容的行:

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

在该行之后,添加以下内容:

@ Includesencha-toolbar-ui('subnav',#625546,'matte');

此代码告诉SASS创建一个新的UI工具栏的选项。我们的新选项将被调用Subnav,它的基色为#625546。最后一个选项设置渐变的样式。可用的样式是:

  • 平面:没有渐变。
  • 磨砂:一个微妙的渐变。
  • 斜角:中等梯度。
  • 光滑:玻璃风格渐变。
  • 凹进:反向渐变。

保存文件后,需要使用。重新编译样式表罗盘编译命令行上的命令。

我们还需要改变UI我们的JavaScript文件中的配置选项。找到你的TouchStart.js文件中应用文件夹并打开它。在我们的应用程序中找到第二个工具栏,就在我们添加按钮的位置。它应该如下所示:

码头:'顶',
Xtype:'工具栏',
Ui:'light'

你需要改变用户界面:“光”用户界面: 'subnav'并保存文件。然后,您可以重新加载页面以查看更改。

Sencha Touch

11.添加新图标蒙版

您还可以使用mixins将自定义图标蒙版添加到底部的标签栏,使用PICTOS-iconmaskmixin零件。使用此功能时,请记住两点需要注意。

首先,这些图标用作按钮的遮罩。这意味着该图标是一个透明的PNG文件,仅使用黑色。然后,此图标用于通过允许其通过任何黑色区域显示来筛选特定颜色。例如,我们的信息掩码的实际PNG文件位于以下屏幕截图的最左侧。取决于UI对于标签的配置,它可以出现多种不同的颜色,也显示如下:

原始PNG文件也比我们的主题项大,这允许文件缩放以适合多种不同的大小。

使用的第二个考虑因素PICTOS-iconmaskmixin组件是它希望图标文件在特定文件夹中:/ Lib目录/资源/主题/图片/默认/ PICTOS。如果您打开此文件夹,您将看到该文件夹中已有许多额外的图标。

例如,我们有一个名为“bolt”的图标,但如果我们尝试将其用作我们的一部分TouchStart.js文件,我们最终得到一个空白方块而不是图标。我们需要使用我们的mixin实际将它添加到我们的SCSS和CSS文件中。

在你的MyTheme.sass文件,找到说:

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

在该行之后,添加以下内容:

@ Includepictos-iconmask( '螺栓');

在这种情况下,我们告诉mixin包含一个图标掩码Bolt.png图标文件。 Mixin的参数始终是没有的文件的名称巴纽延期。这也是我们用来将图标添加到JavaScript文件的名称。

在里面TouchStart.js文件,找到说:

IconCls:'info',

用以下内容替换该行:

IconCls:'bolt',

保存更改并重新加载页面以查看新图标。不要忘记使用重新编译SASS文件罗盘编译在命令行上。

您还可以将自己的自定义掩码文件添加到此文件夹,并使用相同的方法调用它们PICTOS-iconmaskmixin功能在您的SASS文件中,并添加相应的IconCls您的配置选项JS文件。只需确保它们是带有黑色图标的透明PNG文件,并将它们放在正确的文件夹中,即/ Lib目录/资源/主题/图片/默认/ PICTOS

12.变量

变量也可用于每个组件,它们用于控制特定的颜色,大小和外观选项。与mixins不同,变量针对组件的单个设置。例如,按键组件包含以下变量:

  • $按钮梯度:所有按钮的默认渐变。
  • $按钮高度:所有按钮的默认高度。
  • $按钮半径:所有按钮的默认边框半径。
  • $按钮冲程重:所有按钮的默认边框粗细。

还有一些变量用于禁用所有按钮(渐变,文本阴影和阴影)上的所有特殊CSS效果,以及设置工具栏图标的默认大小。

例如,如果我们添加$ Button-height:2em;我们的MyTheme.scss文件,然后我们可以重新编译并看到我们工具栏中的按钮现在比以前更大了。

Sencha Touch

你也会注意到我们的确认下降按钮没有改变大小。这是因为他们的UI配置(确认下降)已经单独定义并包括特定高度。如果要更改这两个按钮的大小,则需要删除两个按钮的UI配置。

更多SASS资源

使用Sencha Touch主题中包含的mixins和变量,您可以更改界面的几乎任何方面,使其看起来完全符合您的要求。有许多在线资源可以帮助您深入了解SASS和Compass的所有可能性。

13.其他资源

设计多个设备

在为应用程序创建样式表时,考虑应用程序在多个设备上的外观也很重要。每个设备都有自己的屏幕大小,这限制了应用程序的可用区域。

我们真正需要的是一种确定我们所处设备类型的方法。我们可以通过使用Sencha Touch来实现这一目标功能。函数只是返回真正要么对于以下参数:

  • Android的
  • 黑莓
  • 桌面
  • Linux的
  • 苹果电脑
  • 电话
  • 片剂
  • 视窗
  • IOS版
  • IPad的
  • 苹果手机
  • IPod的

您还可以使用独立来检测应用程序是否已保存到主屏幕。例如,如果要检查屏幕大小,可以使用以下内容:

if(Ext.is.Tablet || Ext.is.Desktop){
//在这里使用全尺寸元素
} Else {
//在这里使用手机大小元素
}

基本上,此代码检查应用程序是在平板电脑还是台式机上运行。如果是,我们可以添加代码来创建我们的全尺寸界面。如果没有在这两种设备类型中运行,我们可以为手机,iPod和其他小型设备创建一个更小的界面。

您可以根据运行应用程序的设备,使用这些测试来调整各种组件的大小并更改样式。这是一个例子:

if(Ext.is.Tablet || Ext.is.Desktop){
VarfontSize ='12px';
VardefaultUI ='normal';
VarbuttonWidth = 100;
} Else {
VarfontSize ='16px';
VardefaultUI ='large';
VarbuttonWidth = 200;
}

NewExt.Application({
名称:'TouchStart',
Launch:function(){
var about = new Ext.Panel({
全屏:真的,
标题:'触摸开始',
Html:'根据设备更改类型大小',
Style:'font-size:'+ FontSize +';',
项目:[{
Xtype:'button',t
分机:'我的按钮',
Ui:defaultUI,
Width:buttonWidth
}]
});
This.viewport = About;
}
});

此示例代码首先检查我们是否在平板电脑或台式机上运行。如果我们在这两个环境中的一个上运行,我们就会制作它们字体大小DefaultUI,和ButtonWidth配置选项是默认大小。

如果我们在任何其他类型的设备上运行(具有小屏幕的设备),我们会使字体大小和组件大小更大,以帮助实现可见性和交互。

然后,我们的应用程序代码使用按钮设置单个面板,这两个面板都使用我们在前一个示例中定义的大小值。

Sencha Touch

这些类型的条件样式调整将有助于使您的应用程序在多个设备上可读和可用。

使用Sencha.io Src在多个设备上的图像

如果您的应用程序使用图像,您可能需要比条件样式更强大的东西,例如上一节中使用的样式。为每个设备创建单独的图像集将是一场噩梦。幸运的是,Sencha的人们可以解决这个问题:一个名为的基于Web的服务Sencha.io Src

Sencha.io Src是Sencha Touch的独立服务,可用于任何基于Web的应用程序。该服务通过拍摄原始图像并在运行中调整大小来适应当前设备和屏幕尺寸。这些图像也由服务缓存,并针对快速,可重复的交付进行了优化。要使用Sencha.io Src服务,您唯一需要更改的是图像的URL。

例如,基本HTML图像标记如下所示:

使用Sencha.io Src服务的相同图像标记如下所示:

这会将图像的实际URL传递给系统进行处理。

14. Sencha.io Src中的图像URL

正如您在示例中所看到的,我们使用的是完整图像URL(使用http://www.mydomain.com/),而不是较短的相对URL(例如/images/my-big-image.jpg)。由于Sencha.io Src服务需要能够直接从主Sencha.io服务器获取文件,因此相对URL将不起作用。图像文件需要位于公共Web服务器上才能正常工作。

Sencha Touch

通过使用该服务,我们的大图像将被缩放以适应我们设备屏幕的整个宽度,无论我们使用何种尺寸的设备。 Sencha.io Src还保持图像比例正确,没有任何压扁或拉伸。

15.使用Sencha.io Src指定尺寸

我们并不总是在我们的应用程序中使用全屏图像。我们经常在应用程序中将它们用于图标和重音等内容。 Sencha.io Src还允许我们为图像指定特定的高度和/或宽度:

在这种情况下,我们将图像的宽度设置为320像素,高度设置为200像素。我们也可以只约束宽度,高度将自动设置为正确的比例:

值得注意的是,Sencha.io Src只会缩小图像。它不会扩大它们。如果输入的值大于实际图像的尺寸,则只会以完整图像尺寸显示。

您的全尺寸图像应始终是显示所需的最大尺寸。

16.按公式确定尺寸

我们还可以使用公式根据设备的屏幕大小进行更改。例如,我们可以使用以下代码使我们的照片比屏幕的整个宽度窄20像素:

如果您想在图像周围留下一个小边框,这非常有用。

17.按百分比计算

我们还可以使用百分比宽度来设置图像大小:

我们URL的x50部分将图像大小设置为屏幕宽度的50%。

我们甚至可以将这两个元素组合在一起,以创建可扩展的图库:

通过使用公式-20x50-5,我们拍摄原始图像,删除20个像素作为边距,将其缩小到50%,然后再删除5个像素,以便在两个图像之间留出空间。

Sencha Touch

18.更改文件类型

Sencha.io Src提供了一些您可能会觉得有用的附加选项。第一个允许您动态更改图像的文件类型。例如,以下代码将您的JPG文件作为PNG返回:

在为应用程序的用户提供多个图像下载选项时,这非常有用。

此选项还可以与调整大小选项组合使用:

这会将文件转换为PNG格式并将其缩放到50%。

通过使用Sencha.io Src中提供的功能,您可以自动调整应用程序的大小,并在多个设备上提供一致的外观。

有关可以与Sencha.io Src一起使用的所有功能的完整列表,请转到www.sencha.com/learn/how-to-use-src-sencha-io/

摘要

在本文中,我们介绍了如何使用the来设置工具栏的样式UI配置选项。我们还谈到了Sencha Touch如何使用SASS和Compass来创建一个强大的主题系统。我们包含了SASS和Compass的安装说明,并提供了mixins,变量,嵌套和选择器继承的说明。最后,我们使用Sencha.io Src设计了多个设备的接口并处理自动图像大小调整。

在下一章中,我们将重新回到Sencha Touch框架中。我们将回顾一下我们之前学过的关于组件层次结构的一些内容。然后,我们将介绍一些可用的更专业的组件。最后,我们将为您提供有关在Sencha Touch API文档中查找所需信息的一些提示。

约翰克拉克和布莱恩约翰逊是Twelve Foot Guru的创始人,这是一家位于佐治亚州亚特兰大的网络咨询公司。他们已经使用ExtJS和Sencha Touch多年,并且已经开发了更长时间的Web应用程序。12ftguru.com/

喜欢这个?阅读这些!



翻译字数超限