Sencha Touch-BlackBerryサポート

Sencha Touch 2.xは、BlackBerry 10固有のテーマと機能を提供します。

Sencha Touchは、Blackberryをサポートするだけでなく、BlackBerry 10アイコンを提供して、デバイスのBlackBerryルックアンドフィールを確保します。

BlackBerryテーマをapp.jsonに追加する

次の例は、BlackBerryテーマをapp.jsonに追加する方法を示しています。

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

BlackBerryアイコンの追加

Sencha Touchは、BlackBerryテーマ用に50以上のアイコンを提供するため、アプリケーションの見た目と操作性が向上します。 Sencha Touchソフトウェアのインストールをダウンロードして解凍すると、Sencha Touchの/resources/themes/images/bb10/iconsディレクトリでアイコンを見つけることができます。

アプリケーションで使用する前に、これらのアイコンをapp.scssファイルにコンパイルします。 SCSSファイルは、Sencha Touchインストールディレクトリのresources/sassディレクトリにあります。使用する画像をapp.scssファイルに追加し、Compassを使用してファイルをコンパイルし、app.cssファイルを生成します。 Compassは、Sencha CMDのバンドルとして提供されます。

これで、アイコンを使用するために、iconClsプロパティでアイコンを直接使用できます。

iconCls: 'overflow_tab'

Sencha Touchには、BlackBerry固有のメニューである新しいアクションバーがあります。

BlackBerryアクションメニューをアクションバーに追加する

<!DOCTYPE html>
<html>
   <head>
      <link href="https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel="stylesheet"/>
      <script type="text/javascript" src="https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type="text/javascript">
         Ext.application({
            name: 'Sencha',

            launch: function() {
              //Tab menu button
               var tabMenuButton = Ext.create('Ext.ux.TabMenuButton', {
                  text: 'All',
                  docked: 'left',
                  iconCls: 'view_grid',
                  menuItems: [
                     {
                        text: 'All',
                        iconCls: 'view_grid'
                     }, {
                        text: 'Favorites',
                        iconCls: 'done'
                     }, {
                        text: 'Messenger',
                        iconCls: 'bbm'
                     }
                  ]
               });
              //Add it to the action bar
               Ext.Viewport.add({
                  layout: 'card',
                  items: [
                     {
                        xtype: 'toolbar',
                        docked: 'bottom',
                        items: [tabMenuButton]
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

それは次の結果を生成します-

Sencha-touch-bb-support

Sencha Touch-BlackBerryサポート

BlackBerryテーマをapp.jsonに追加する

BlackBerryアイコンの追加

BlackBerryアクションメニューをアクションバーに追加する

目次