【翻译】Ext JS 5:为不同设备设置不同的主题

来源:互联网 发布:java.util.base64 类 编辑:程序博客网 时间:2024/06/06 04:06

原文:Sencha Ext JS 5: Supporting Different Themes for Different Devices

  • 步骤1创建一个应用程序
  • 步骤2定义主题
  • 步骤3编辑Appjson文件以便支持多平台生成
  • 步骤4编辑output定义以便创建多个应用程序的manifests
  • 步骤5更新应用程序
  • 步骤6替换Appjson中的CSS配置
  • 步骤7替换bootstrap属性以便加载appropriate manifest文件
  • 步骤8在indexhtml文件中在微加载之上添加以下代码到一个script标记中以加载appropriate manifest
  • 步骤9生成应用程序
  • 步骤10在桌面或移动设备浏览器上测试应用程序

Sencha Ext JS 5是第一个完全支持iOS平板的Ext框架。

为应用程序添加平板支持,并能根据使用的设备自动切换桌面或基于触碰的主题(CSS文件)可能是相当重要的任务。

本教程将演示如何将该功能添加到应用程序。

步骤1:创建一个应用程序

  1. 在Ext JS 5文件夹打开命令行提示符
  2. 运行以下命令:
    sencha generate app TestApp ../TestApp

步骤2:定义主题

  1. 在命令行提示符切换到TestApp目录
  2. 运行以下命令
    1. sencha generate theme TestApp-Desktop(注:为桌面创建主题)
    2. sencha generate theme TestApp-Tablet(注:为平板创建主题)
  3. 在编辑器打开 /TestApp/packages/TestApp-Desktop/package.json
  4. 修改“extend”属性为“extend ext-theme-neptune”
  5. 保存文件
  6. 在编辑器打开/TestApp/packages/TestApp-Tablet/package.json
  7. 将“extend”属性从ext-theme-classic修改ext-theme-neptune-touch

步骤3:编辑App.json文件以便支持多平台生成

  1. 在编辑器打开 /TestApp/app.json
  2. 添加“builds”属性作为指示:
"builds": {    "testAppDesktop": {        "theme": "TestApp-Desktop"    },    "testAppTouch": {        "theme": "TestApp-Tablet"    }}

步骤4:编辑output定义以便创建多个应用程序的manifests

使用以下代码替换app.json中的output配置:

"output": {    "base": "${workspace.build.dir}/${build.environment}/${app.name}/${build.id}",    "page": "./index.html",    "manifest": "../${build.id}.json",    "deltas": {        "enable": false    },    "cache": {        "enable": false    }}

步骤5:更新应用程序

返回命令行提示符,输入以下命令:
sencha app refresh
这将生产manifest文件:testAppDesktop.json和testAppTouch.json

步骤6:替换App.json中的CSS配置

使用以下代码替换App.json中的css配置:

"css": [{    "path": "${build.out.css.dir}/TestApp-all.css",    "bootstrap": true }]

步骤7:替换bootstrap属性以便加载appropriate manifest文件

"bootstrap": {   "manifest": "${build.id}.json"}

步骤8:在index.html文件中,在微加载之上,添加以下代码到一个script标记中,以加载appropriate manifest:

var Ext = Ext || {};Ext.beforeLoad = function(tags){        var theme = location.href.match(/theme=([\w-]+)/);    theme  = (theme && theme[1]) || (tags.desktop ? 'testAppDesktop' : 'testAppTouch');    Ext.manifest = theme;    tags.test = /testMode=true/.test(location.search);    Ext.microloaderTags = tags;};

步骤9:生成应用程序

返回命令行提示符并输入以下命令:
sencha app build development

步骤10:在桌面或移动设备浏览器上测试应用程序

0 0
原创粉丝点击