Sencha Touch - Assistance BlackBerry
Sencha Touch 2.x fournit un thème et des fonctionnalités spécifiques à BlackBerry 10.
Sencha Touch prend non seulement en charge Blackberry, il fournit des icônes BlackBerry 10 qui garantissent que les appareils ont l'apparence et la convivialité de BlackBerry.
Ajout d'un thème BlackBerry à app.json
L'exemple suivant montre comment ajouter un thème BlackBerry à app.json.
"css": [
{
"path": "touch/resources/css/bb10.css",
"platform": ["chrome", "safari", "ios", "android", "blackberry", "firefox", "ie10"],
"theme": "Blackberry",
"update": "delta"
}
]Ajout d'icônes BlackBerry
Sencha Touch fournit plus de 50 icônes pour le thème BlackBerry, de sorte que l'application donne un meilleur aspect et une meilleure sensation. Vous pouvez trouver les icônes dans le répertoire Sencha Touch / resources / themes / images / bb10 / icons après avoir téléchargé et décompressé l'installation du logiciel Sencha Touch.
Compilez ces icônes dans votre fichier app.scss avant de les utiliser dans votre application. Le fichier SCSS se trouve dans le répertoire resources / sass du répertoire d'installation de Sencha Touch. Ajoutez les images que vous souhaitez utiliser au fichier app.scss et utilisez Compass pour compiler le fichier et générer le fichier app.css. Compass est fourni avec Sencha CMD.
Maintenant, pour utiliser l'icône, vous pouvez directement utiliser l'icône avec la propriété iconCls.
iconCls: 'overflow_tab'Sencha Touch a une nouvelle barre d'action, des menus spécifiques à BlackBerry.
Ajout de menus d'action BlackBerry à la barre d'action
<!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>Il produira le résultat suivant -