Sencha Touch - Sencha Touch

Sencha Touch
P14.png
Um aplicativo Sencha Touch com um tema iOS6
Desenvolvedor (s) Sencha
Último lançamento
2.4.2 / 15 de junho de 2015 ; 6 anos atrás ( 15/06/2015 )
Escrito em JavaScript
Sistema operacional Android , iOS , BlackBerry , Kindle , Windows Phone , Tizen
Disponível em inglês
Modelo Biblioteca JavaScript
Licença GPLv3 ou comercial
Local na rede Internet www .sencha .com / products / touch

Sencha Touch é uma biblioteca JavaScript de interface com o usuário (IU) , ou estrutura da web , construída especificamente para a Web móvel . Ele pode ser usado por desenvolvedores da Web para desenvolver interfaces de usuário para aplicativos da Web móveis que se parecem e parecem com aplicativos nativos em dispositivos móveis suportados. É baseado em padrões da web como HTML5 , CSS3 e JavaScript . O objetivo do Sencha Touch é facilitar o desenvolvimento rápido e fácil de aplicativos móveis baseados em HTML5 que rodam em dispositivos Android , iOS , Windows , Tizen e BlackBerry , permitindo simultaneamente uma aparência nativa aos aplicativos.

Histórico de versão e suporte

Sencha Touch é um produto da Sencha, que foi formado após a combinação de projetos populares de biblioteca JavaScript Ext JS , jQTouch e Raphaël . A primeira versão do Sencha Touch, versão 0.90 beta, foi disponibilizada em 17 de julho de 2010. Esta versão beta oferece suporte a dispositivos que executam Android e iOS (no iPhone , iPod touch , iPad ).

Posteriormente, a primeira versão estável, 1.0, foi lançada em novembro de 2010. A versão 1.1.0 adicionou suporte para dispositivos que executam o BlackBerry OS 6.0.

A versão mais recente, Sencha Touch 2.4.2, foi lançada em junho de 2015 e foi projetada para ser executada nos seguintes navegadores e plataformas:

Não há planos anunciados de suporte ao Firefox Mobile .

Recursos

Arquitetura MVC

O Sencha Touch segue o padrão MVC que separa os dados do aplicativo, o código de controle e a visualização. Essa separação permite que aplicativos em grande escala sejam flexíveis e fáceis de manter.

Componentes de widget e temas personalizáveis

O Sencha Touch tem uma interface de manipulação de DOM embutida que nega a dependência de outras estruturas de IU como jQuery. Ele inclui um conjunto de controles (ou componentes) baseados em GUI da interface gráfica do usuário para uso em aplicativos da web móveis. Esses componentes são otimizados para entrada de toque. Os componentes são:

  • Botões com temas e efeitos específicos do dispositivo
  • Elementos de formulário, como campos de texto para e-mail
  • Selecionador de data e endereço
  • Controles deslizantes, seletores e caixas de combinação
  • Um componente de lista com rolagem dinâmica e uma barra de índice
  • Um conjunto mínimo de ícones
  • Barras de ferramentas e menus
  • Guias móveis, barras de ferramentas inferiores
  • Um componente de mapa com suporte para gestos multitoque , como pinça e zoom
  • Carrosséis

Todos os componentes podem ser temáticos de acordo com o dispositivo de destino. Isso é feito usando Sass , uma linguagem de folha de estilo construída sobre CSS. Alguns dos temas semelhantes aos nativos são Cupertino Classic (para iOS6.x e inferior), Cupertino (para iOS 7) e Mountain View (para Android).

Transições, animações e interface do usuário adaptável

O Sencha Touch possui oito efeitos de transição integrados, incluindo deslizar sobre ou sob o elemento atual, pop, flip e cubo. Ele suporta gestos de toque comuns criados a partir de eventos de toque , que são padrões da Web, mas com suporte apenas para Android , iOS e alguns dispositivos habilitados para toque. Estes são tocar, tocar duas vezes, deslizar, rolar e beliscar.

Como o Sencha touch é baseado em HTML5, os layouts que ele oferece são extremamente adaptáveis ​​por natureza.

Charting

O Sencha Touch também oferece suporte a componentes de gráficos, incluindo gráficos de pizza, gráficos de barras, séries de linhas, etc., com legendas explicativas. Esses componentes suportam interatividade como pinçar e zoom. Assim como os componentes Grid no ExtJS , o Sencha Touch oferece a funcionalidade TouchGrid.

Perfis

A criação de perfil no Sencha Touch permite criar diferentes perfis para diferentes tamanhos de tela. Quando o aplicativo é carregado, o framework determina o tipo de dispositivo, e seu perfil correspondente determina quais componentes e funcionalidades precisam ser trocados, e as visualizações e controladores específicos que precisam ser chamados, poupando ao desenvolvedor a tarefa de criar um diferente aplicativo para cada tipo de dispositivo.

Estrutura básica do diretório do aplicativo

Os aplicativos Sencha Touch têm uma estrutura básica de arquivos e diretórios da seguinte maneira:

Diretório / Arquivo Descrição
aplicativo O diretório principal que contém os modelos, visualizações, controladores, armazenamentos e perfis do aplicativo
app.js Arquivo que contém as configurações gerais do aplicativo. As referências a todos os modelos, visualizações, controladores, armazenamentos e perfis podem ser encontradas aqui. Depois que essas referências são carregadas, a função principal de inicialização do aplicativo é chamada. Esta função carrega a primeira visualização e, portanto, pode ser considerada como o primeiro ponto do aplicativo
index.html Arquivo HTML principal do aplicativo. Pode abranger muitas páginas / telas para o aplicativo móvel
Recursos Diretório que contém todas as imagens, CSS e qualquer outro arquivo externo de que o aplicativo precisa
app.json Arquivo de configuração do aplicativo
packager.json Arquivo usado para criar pacotes nativos
ext-touch.js Esta é a biblioteca JavaScript do Sencha (ext-touchdebug.js recomendado durante a fase de desenvolvimento)
ext-touch.css Esta é a biblioteca CSS do Sencha

Ferramentas e plug-ins para desenvolvedores

O Sencha Touch fornece plug-ins IDE para facilitar o desenvolvimento. Os benefícios desses plug-ins incluem geração e preenchimento automático de código , refatoração de código e facilidade de navegação para a base de código do framework e classes personalizadas. O Sencha Touch tem plug-ins para IDEs populares como JetBrains , Visual Studio e Eclipse .

Existe um construtor de aplicativo visual, Sencha Architect, para construir aplicativos HTML5 de plataforma cruzada. Ele fornece recursos de adição, como temas e integração de linha de comando .

Uso de amostra

O Sencha Touch torna conveniente usar um mapa em seu aplicativo usando o componente Ext.Map. A inclusão de arquivo JavaScript "Google Maps API" é essencial para o GoogleMaps API ao trabalho.

<!DOCTYPE HTML>
<html>
<head>
<title>Touch Test</title>

<!-- Sencha Touch CSS -->
<link rel="stylesheet" type="text/css"
         href="sencha-touch/resources/css/sencha-touch-debug.css" />

<!-- Google Maps API -->
<script type="text/javascript"
              src="//maps.google.com/maps/api/js?sensor=true"></script>

<!-- Sencha Touch JavaScript code -->
<script type="text/javascript" src="sencha-touch/sencha-touch-debug.js"></script>

<!-- Application script -->
<script type="text/javascript">
  Ext.setup( {
    onReady: function() {
      // create the root panel
      new Ext.Panel({
        fullscreen: true,
        items: [
          {
            xtype: "map"  
          }
        ]
      });
    }
  });
</script>

</head>

<body>
</body>
</html>

Ext.setup () é o ponto de partida para inicializar o aplicativo, configurando a janela de visualização e o sistema de eventos.

Comparação com aplicativos nativos

O Sencha Touch suporta APIs PhoneGap e Apache Cordova para acelerômetro , câmera, bússola, geolocalização , captura, InAppBrowser, mídia, notificação, tela inicial , armazenamento (SQLite) , etc. que antes eram acessíveis apenas para aplicativos nativos. O Sencha Touch aproveita o JavaScript para criar a maioria dos componentes da IU e alterar o CSS dos elementos DOM na hora. Com os mecanismos de JavaScript sendo mais eficientes e rápidos do que antes, os aplicativos da web funcionam quase tão bem quanto os aplicativos nativos.

Veja também

Referências

Bibliografia

links externos