Sencha Touch - asistencia de BlackBerry

Sencha Touch 2.x proporciona temas y funcionalidades específicas para BlackBerry 10.

Sencha Touch no solo es compatible con Blackberry, sino que también proporciona íconos de BlackBerry 10 que garantizan que los dispositivos tengan la apariencia de BlackBerry.

Agregar el tema de BlackBerry a app.json

El siguiente ejemplo muestra cómo agregar el tema de BlackBerry a app.json.

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

Agregar iconos de BlackBerry

Sencha Touch proporciona más de 50 iconos para el tema de BlackBerry, por lo que la aplicación ofrece una mejor apariencia. Puede encontrar los íconos en el directorio Sencha Touch / resources / themes / images / bb10 / icons después de descargar y descomprimir la instalación del software Sencha Touch.

Compile estos iconos en su archivo app.scss antes de usarlos en su aplicación. El archivo SCSS reside en el directorio resources / sass en el directorio de instalación de Sencha Touch. Agregue las imágenes que desea usar al archivo app.scss y use Compass para compilar el archivo y generar el archivo app.css. Compass viene como un paquete con Sencha CMD.

Ahora, para usar el ícono, puede usar directamente el ícono con la propiedad iconCls.

iconCls: 'overflow_tab'

Sencha Touch tiene una nueva barra de acciones, menús específicos para BlackBerry.

Adición de menús de acción de BlackBerry a la barra de acciones

<!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>

Producirá el siguiente resultado:

↰ Previous page