Sencha Touch - supporto BlackBerry
Sencha Touch 2.x fornisce temi e funzionalità specifiche per BlackBerry 10.
Sencha Touch non solo supporta Blackberry, ma fornisce icone BlackBerry 10 che garantiscono che i dispositivi abbiano l'aspetto e il funzionamento BlackBerry.
Aggiunta del tema BlackBerry a app.json
L'esempio seguente mostra come aggiungere il tema BlackBerry a app.json.
"css": [
{
"path": "touch/resources/css/bb10.css",
"platform": ["chrome", "safari", "ios", "android", "blackberry", "firefox", "ie10"],
"theme": "Blackberry",
"update": "delta"
}
]Aggiunta di icone BlackBerry
Sencha Touch fornisce più di 50 icone per il tema BlackBerry, quindi l'applicazione offre un aspetto migliore. È possibile trovare le icone nella directory Sencha Touch / resources / themes / images / bb10 / icons dopo aver scaricato e decompresso l'installazione del software Sencha Touch.
Compila queste icone nel tuo file app.scss prima di utilizzarle nella tua applicazione. Il file SCSS risiede nella directory resources / sass nella directory di installazione di Sencha Touch. Aggiungi le immagini che desideri utilizzare al file app.scss e usa Compass per compilare il file e generare il file app.css. Compass viene fornito in bundle con Sencha CMD.
Ora per usare l'icona, puoi usare direttamente l'icona con la proprietà iconCls.
iconCls: 'overflow_tab'Sencha Touch ha una nuova barra delle azioni, menu specifici per BlackBerry.
Aggiunta di menu azione BlackBerry alla barra delle azioni
<!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>Produrrà il seguente risultato: