开发 BlackBerry 10 应用程序

Sencha Touch 使开发为 BlackBerry 10 操作系统设计的应用程序变得容易。

本指南介绍了如何使用 Sencha Touch 创建 BlackBerry 10 应用程序。

Sencha Touch 支持 BlackBerry 10 主题，具有改进的优化和性能。此外，还支持 BlackBerry 10 图标，您可以使用这些图标来确保您的应用程序具有
BlackBerry 的外观和风格。有关更多信息，请参阅本指南中的 BlackBerry 10 图标。

如果您是 BlackBerry 10 开发的新手，请参阅 BlackBerry 入门指南。

操作栏

操作栏是屏幕底部的一个区域，用于显示应用于屏幕的操作和选项卡。操作栏内部是选项卡，它们只是 Sencha Touch 中的按钮。如果您要显示的选项卡过多，则需要一个选项卡菜单（左侧带有特殊的停靠左侧按钮）。添加选项卡菜单按钮组件并将其停靠在左侧。

创建选项卡菜单和进入操作栏的其他项目后，请参阅 向工具栏添加菜单，了解如何向操作栏添加其他组件。

Touch 提供了 Ext.ux.TabMenuButton 组件，可让您创建操作栏选项卡菜单。

注意：TabMenuButton 旨在停靠在底部。尝试停靠在其他任何位置都会导致不良行为。

操作菜单

操作菜单是带有标题的垂直操作列表，从侧面滑入，包含比操作栏中操作不太常用的操作。用户通过点击操作栏右侧的操作按钮来打开操作菜单。

上下文菜单

上下文菜单是无标题图标的垂直列表，从侧面滑入，并在应用程序上下文中提供操作。上下文菜单取代弹出式或图形上下文菜单。上下文菜单出现的合适位置是当您在 Ext.List 上 Ext.List#itemtaphold 时。

应用程序菜单

应用程序菜单提供独立于上下文的重要操作，例如“设置”、“注销”和“关于”。用户通过从屏幕顶部向下滑动来打开应用程序菜单，并通过点击菜单外部来关闭菜单。

向工具栏（操作栏）添加菜单

以下示例演示如何向操作栏添加菜单

BlackBerry 10 图标

Sencha Touch 包含 50 多个 BlackBerry 10 图标，您可以在应用程序中使用这些图标，使其具有 BlackBerry 10 原生外观和风格。您可以在下载并解压缩 Sencha Touch 软件安装后，在 Sencha Touch /resources/themes/images/bb10/icons 目录中找到这些图标。在使用应用程序中的图标之前，请将这些图标编译到您的 app.scss CSS 中。SCSS 文件位于 Sencha Touch 安装目录的 resources/sass 目录中。将要使用的图像添加到 app.scss 文件中，
并使用 Compass 编译该文件并生成 app.css 文件。

Compass 与 Sencha Cmd 捆绑在一起。

您可以使用以下配置语句在应用程序中使用该图像

iconCls: 'overflow_tab'

向 app.json 添加 BlackBerry 主题

以下示例演示如何在 Sencha Touch app.json 文件中指定 BlackBerry 主题

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

使用 BlackBerry 加载指示器

要在您的应用程序启动时显示 Blackberry 10 加载指示器，请将以下 style 块插入到您的 index.html 文件中

<style type="text/css">
    html, body {
        height: 100%;
        background-color: #fff
    }

    @keyframes spin {
        0% {
            transform:rotate(0deg);
        }

        100% {
            transform:rotate(360deg);
        }
    }

    @-webkit-keyframes spinner {
        0% {
            -webkit-transform:rotate(0deg);
        }

        100% {
            -webkit-transform:rotate(360deg);
        }
    }

    #SpinnerContainer .SpinnerShadow,
    #SpinnerContainer .SpinnerRing,
    #SpinnerContainer .SpinnerCenter,
    #SpinnerContainer .Spinner {
        -webkit-border-radius:50%;
        -moz-border-radius:50%;
        -o-border-radius:50%;
        border-radius:50%;
    }

    #SpinnerContainer {
        position:absolute;
        top: 50%;
        left: 50%;
        width:168px;
        height:168px;
        margin-left: -84px;
        margin-top: -84px;
    }

    #SpinnerContainer .SpinnerShadow {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        box-shadow:0 -2px 2px rgba(0, 0, 0, 0.03), inset 0 2px 6px rgba(0, 0, 0, 0.36), inset 0 -2px 1px rgba(0, 0, 0, 0.06);
    }

    #SpinnerContainer .SpinnerRing {
        position:relative;
        border:25px solid rgba(0, 0, 0, 0.13);
    }

    #SpinnerContainer .SpinnerCenter {
        width:118px;
        height:118px;
        box-shadow:0 -2px 2px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.36);
    }

    #SpinnerContainer .Spinner {
        position:absolute;
        top:-25px;
        left:-25px;
        width:168px;
        height:168px;
        /* base64 image blob */
        background-image:url('data:image/png;base64,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');
        background-repeat:no-repeat;
        background-position:top left;

        -webkit-animation:spinner 1s infinite linear;
        animation:spin 1s infinite linear;
    }
</style>

然后将以下代码添加到您的 body 中

<div id="SpinnerContainer">
    <div class="SpinnerRing">
        <div class="SpinnerCenter"></div>
        <div class="Spinner"></div>
    </div>
    <div class="SpinnerShadow"></div>
</div>

请确保从您的 index.html 中删除默认的动画元素和样式，并在您的应用程序启动时隐藏 #SpinnerContainer。

打包、测试和部署 BlackBerry 10 应用程序

现在您已经使用 Sencha Touch 开发了 BlackBerry 10 应用程序，只需几个步骤即可在 BlackBerry 10 模拟器或 BlackBerry 10 设备上运行该应用程序。完整的 移植指南 和 开发者视频 将为您提供逐步指导，帮助您将 Sencha Touch 应用程序移植到 BlackBerry 10。

更多信息

• BlackBerry 开发者屏幕结构
• BlackBerry 开发者菜单