Sencha Touch - Sencha Touch
Desenvolvedor (s) | Sencha |
---|---|
Último lançamento | 2.4.2 / 15 de junho de 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 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:
- Navegador Android, Google Chrome para Android
- BlackBerry 10
- Bada Mobile Browser
- Kindle Fire Browser
- Tizen
- Windows Phone 8 e Windows 8 IE10
- Safari móvel
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
- Estrutura de aplicativos baseados na web para vários telefones
- Comparação de frameworks JavaScript
- jQuery Mobile
- Tizen
- Android (sistema operacional)
- iOS
Referências
Bibliografia
- Jesus Garcia e Anthony De Moss, Mitchell Simoens, Sencha Touch in Action , ISBN 978-1-61729-037-4
- Ajit Kumar, Sencha Touch Cookbook , ISBN 978-1-84951-544-3 .
- Hiren J. Dave, Instant Sencha Touch, ISBN 9781782165996 .
- Ajit Kumar, Sencha Touch Cookbook - Segunda Edição , ISBN 978-1-78216-918-5 .
- Lee Boonstra, Hands-On Sencha Touch 2: A Real-World App Approach 1st Edition, ISBN 978-1-44936-652-0 .
- Ajit Kumar, Sencha MVC Architecture , ISBN 978-1-84951-888-8 .
- Matthew David, HTML5 Mobile Websites, Turbocharging HTML5 with jQuery, Sencha Touch e Other Frameworks, ISBN 978-0-24081-814-6 .
- https://developer.salesforce.com/page/Developing_Mobile_Applications_With_Force.com_And_Sencha_Touch