Sencha-touch-bb-support
提供：Dev Guides
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>それは次の結果を生成します-
