Sencha Touch - suporte para BlackBerry

O Sencha Touch 2.x fornece tema e funcionalidades específicas para BlackBerry 10.

O Sencha Touch não suporta apenas Blackberry, ele fornece ícones do BlackBerry 10 que garantem que os dispositivos tenham a aparência do BlackBerry.

Adicionando tema do BlackBerry ao app.json

O exemplo a seguir mostra como adicionar o tema do BlackBerry ao app.json.

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

Adicionar ícones do BlackBerry

O Sencha Touch fornece mais de 50 ícones para o tema do BlackBerry, portanto, o aplicativo oferece uma aparência melhor. Você pode encontrar os ícones no diretório Sencha Touch / resources / themes / images / bb10 / icons após fazer o download e descompactar a instalação do software Sencha Touch.

Compile esses ícones em seu arquivo app.scss antes de usá-los em seu aplicativo. O arquivo SCSS reside no diretório resources / sass no diretório de instalação do Sencha Touch. Adicione as imagens que deseja usar ao arquivo app.scss e use o Compass para compilar o arquivo e gerar o arquivo app.css. Compass vem como um pacote com Sencha CMD.

Agora para usar o ícone, você pode usar diretamente o ícone com a propriedade iconCls.

iconCls: 'overflow_tab'

O Sencha Touch tem uma nova barra de ação, menus específicos para BlackBerry.

Adicionando menus de ação do BlackBerry à barra de ação

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

Isso produzirá o seguinte resultado -

↰ Previous page