Sencha Touch - Guia rápido
Sencha Touch é uma estrutura popular de Sencha para criar uma interface de usuário para aplicativos móveis. Ele ajuda o desenvolvedor a criar um aplicativo móvel usando HTML, CSS, JS simples que oferece suporte a muitos dispositivos móveis, como Android, IOS, BlackBerry e Windows. É baseado na arquitetura MVC. A versão mais recente do Sencha Touch é 2.4.
História do Sencha Touch
Depois de lançar outro produto da Sencha, ExtJs, que era para aplicativos da web, houve a necessidade de desenvolver um framework que funcionasse em dispositivos móveis também.
A primeira versão do Sencha Touch era a versão 0.9 beta, que suportava dispositivos Android e IOS. Posteriormente, o primeiro lançamento principal do Sencha Touch versão 1.0 foi em novembro de 2010, que era a primeira versão estável e também suportava dispositivos Blackberry.
A versão mais recente do Sencha Touch é a versão 2.4 lançada em junho de 2015, que suporta muitos dispositivos como Windows, Tizen junto com Android, IOS, BlackBerry OS 10, Google Chrome para Android e Safari móvel, etc.
Recursos do Sencha Touch
A seguir estão os recursos mais importantes do Sencha Touch -
Widgets de IU personalizáveis e mais de 50 integrados com uma coleção de IU rica, como listas, carrosséis, formulários, menus e barras de ferramentas, criados especificamente para plataformas móveis.
Compatibilidade de código de novas versões com a mais antiga.
Um gerenciador de layout flexível que ajuda a organizar a exibição de dados e conteúdo em vários dispositivos móveis com sistemas operacionais diferentes.
A estrutura inclui um pacote de dados robusto que pode consumir dados de qualquer fonte de dados de back-end.
Layouts adaptáveis, animações e rolagem suave para uma melhor experiência de aplicativo da web móvel para uso.
Temas prontos para uso com aparência nativa para cada plataforma principal permitem fazer com que os aplicativos híbridos e da web combinem com a aparência das plataformas de destino.
Sencha Touch ─ Benefícios
Sencha Touch é o padrão líder para o desenvolvimento de aplicativos da Web de nível empresarial. Ele oferece as ferramentas necessárias para construir aplicativos robustos para a maioria dos dispositivos móveis, fornecendo uma plataforma única para o desenvolvimento de aplicativos. A seguir estão alguns dos benefícios -
Fornece um recurso de toque responsivo, portanto, o usuário pode navegar facilmente enquanto usa o aplicativo móvel.
Oferece compatibilidade com todas as versões mais recentes do IOS, Android e Blackberry e Windows.
Fornece a velocidade mais rápida possível desejável para qualquer aplicativo móvel.
Fornece uma solução econômica com sua compatibilidade de plataforma cruzada.
Com base nas APIs nativas e linguagens básicas de desenvolvimento da web, como HTML, CSS, JS, que torna mais fácil para um desenvolvedor entender o Sencha Touch.
Sencha Touch ─ Limitações
A API Sencha Touch não tem o seguinte recurso -
O aplicativo não tem acesso à câmera, aos contatos e ao acelerômetro do dispositivo.
Ele não fornece o recurso de notificação push. Para isso, temos que usar websockets ou long polling.
De acordo com a política geral de licença pública, é gratuito para aplicativos de código aberto, mas pago para aplicativos comerciais.
Não é bom para gráficos hardcore e aplicativos de animação, como aplicativos de jogos.
Sencha Touch ─ Ferramentas
SDK Sencha
Este é o kit de desenvolvimento Sencha usado para criar um esqueleto do projeto. Usamos o comando "sencha -sdk path / to / touch generate app appName" para criar um aplicativo com o nome fornecido no comando.
Quando o aplicativo é criado, você pode ver os seguintes arquivos no aplicativo -
app - Esta pasta contém arquivos de modelo, visualização, controlador e armazenamento para o aplicativo.
app.js- Este é o arquivo JS principal do seu aplicativo. A partir desse arquivo, o fluxo de código Sencha é iniciado.
app.json - Este é o arquivo de configuração do aplicativo, todos os detalhes de configuração apresentados aqui.
index.html - Este é o arquivo html principal onde incluímos o app.js e outros arquivos relacionados ao Sencha.
package.json - Este arquivo contém todas as dependências e demais informações relacionadas ao app.
resources - Esta pasta inclui todos os arquivos CSS e imagens necessários para o aplicativo.
Sencha CMD
Sencha CMD é uma ferramenta de linha de comando que fornece os recursos de minificação de código Sencha Touch, estrutura, geração de construção e outros recursos úteis para fins de produção.
Usamos o comando "Sencha app build package" no prompt de comando para construir o aplicativo para isso. Vá para o diretório do aplicativo no prompt de comando e digite o comando acima. Assim que a compilação for bem-sucedida, veremos a versão reduzida do aplicativo usada basicamente para fins de produção.
Isso pode ser baixado de https://www.sencha.com/products/extjs/cmd-download/
Inspetor Sencha
O Sencha Inspector é uma ferramenta de depuração para depurar qualquer problema no código Sencha durante o desenvolvimento.
Configuração de ambiente local
Esta seção o orienta sobre como fazer download e configurar o Sencha Touch em sua máquina. Siga as etapas para configurar o ambiente.
Baixando arquivos de biblioteca
Baixe uma versão comercial dos arquivos de biblioteca do Sencha Touch no seguinte link https://www.sencha.com. Você obterá a versão de teste do site em seu ID de correio registrado, que será uma pasta compactada chamada sencha-touch-2.4.2-commercial.
Descompacte a pasta e você encontrará vários arquivos JavaScript e CSS para incluir em seu aplicativo. Inclui principalmente os seguintes arquivos -
Javascript Files - O arquivo JS que você pode encontrar na pasta \ sencha-touch-2.4.2commercial \ touch-2.4.2 são -
| Sr. Não | Descrição do arquivo |
|---|---|
| 1 | sencha-touch.js Este é o arquivo principal que contém todas as funcionalidades para executar o aplicativo. |
| 2 | sencha-touch-all.js Este arquivo contém todo o código reduzido sem comentários no arquivo. |
| 3 | sencha-touch-debug.js Esta é a versão não minimizada de sencha-touch-all.js para fins de depuração. |
| 4 | sencha-touch-all-debug.js Este arquivo também não está minimizado e é usado para fins de desenvolvimento, pois contém todos os comentários e logs do console para verificar quaisquer erros / problemas. |
Você pode adicionar esses arquivos à pasta JS de seus projetos ou pode fornecer um caminho direto onde os arquivos residem em seu sistema.
CSS Files - Existem vários arquivos baseados em tema que você pode encontrar na pasta I: \ sencha touch \ sencha-touch-2.4.2-commercial \ touch-2.4.2 \ resources \ css \ sencha-touch.css
Esses arquivos de biblioteca serão adicionados no aplicativo Sencha Touch da seguinte forma -
<html>
<head>
<script type = "text/javascript" src = "../sencha-touch-2.4.2-commercial/touch-2.4.2/sencha-touch-all.js"></script>
<link href = "../sencha-touch-2.4.2-commercial/touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
<script type ="text/javascript" src = "app.js" > </script>
</head>
</html>Você pode manter o código do aplicativo Sencha Touch no arquivo app.js.
Configuração de CDN
CDN é a rede de distribuição de conteúdo com a qual você não precisa fazer download dos arquivos da biblioteca Sencha Touch; em vez disso, você pode adicionar diretamente o link CDN para ExtJS ao seu programa da seguinte maneira -
<html>
<head>
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel="stylesheet" />
<script type = "text/javascript" src = "app.js" > </script>
</head>
</html>Editores populares
Como é uma estrutura JavaScript usada para desenvolver aplicativos da web, o projeto terá arquivos HTML, JS e, para escrever seus programas Ext JS, você precisará de um editor de texto. Existem vários IDEs disponíveis no mercado. Mas, por enquanto, você pode considerar um dos seguintes -
Notepad - Na máquina Windows, você pode usar qualquer editor de texto simples como o Notepad (recomendado para este tutorial), Notepad ++.
Brackets - Outro IDE popular que pode ser baixado de http://brackets.io/ .
Sublime - Outro IDE popular que pode ser baixado de https://www.sublimetext.com/3/ .
Naming conventioné um conjunto de regras a serem seguidas para identificadores. Isso torna o código facilmente legível e compreensível para outros programadores também.
A convenção de nomenclatura no Sencha Touch segue a convenção JavaScript padrão, que não é obrigatória, mas é uma boa prática a ser seguida. Deve seguir a sintaxe camel case para nomear a classe, método, variável e propriedades.
Se o nome for combinado com duas palavras, a segunda palavra sempre começará com uma letra maiúscula. Por exemplo, doLayout (), StudentForm, firstName, etc.
| Sr. Não. | Nome e Convenção |
|---|---|
| 1 | Class Name Deve começar com uma letra maiúscula, seguida por uma caixa de camelo. Por exemplo, StudentClass |
| 2 | Method Name Deve começar com uma letra minúscula, seguida por uma caixa de camelo. Por exemplo, studentMethod () |
| 3 | Variable Name Deve começar com uma letra minúscula, seguida de caixa de camelo. Por exemplo, studentName |
| 4 | Constant Name Deve estar apenas em maiúsculas. Por exemplo, COUNT, MAX_VALUE |
| 5 | Property Name Deve começar com uma letra minúscula, seguida de caixa de camelo. Por exemplo, enableColumnResize = true |
A camada inferior de qualquer aplicativo móvel é o sistema operacional, além de tudo ou qualquer coisa construída. Depois, temos os navegadores nos quais executaremos os aplicativos. Pode ser Chrome, Safari, IE qualquer coisa. A camada superior é um padrão W3, que é comum para todos. O Sencha Touch representa ou é construído com base nos padrões W3, que nada mais é do que HTML5, o que torna um único aplicativo compatível com diferentes navegadores de diferentes dispositivos.
Sencha Touch é uma combinação de três estruturas - ExtJs, JqTouch e Raphael (desenho vetorial). Ele segue a arquitetura MVC. MVC separa o código em pedaços mais gerenciáveis.
Embora a arquitetura não seja obrigatória para o programa, é uma prática recomendada seguir essa estrutura para tornar seu código altamente sustentável e organizado.
Estrutura do projeto com o aplicativo Sencha Touch
----------src
----------resources
-------------------CSS files
-------------------Images
----------JavaScript
--------------------App Folder
-------------------------------Controller
------------------------------------Contoller.js
-------------------------------Model
------------------------------------Model.js
-------------------------------Store
------------------------------------Store.js
-------------------------------View
------------------------------------View.js
-------------------------------Utils
------------------------------------Utils.js
--------------------------------app.js
-----------HTML filesA pasta do aplicativo Sencha Touch residirá na pasta JavaScript do seu projeto.
O aplicativo conterá arquivos de controlador, visualização, modelo, armazenamento e utilitário com app.js.
app.js- O arquivo principal de onde o fluxo do programa começará. Deve ser incluído no arquivo HTML principal usando a tag <script>. O aplicativo chama o controlador do aplicativo para o restante da funcionalidade.
Controller.js- É o arquivo controlador da arquitetura Sencha Touch MVC. Ele contém todo o controle do aplicativo, os ouvintes de eventos e a maior parte da funcionalidade do código. Ele executa as seguintes tarefas: roteamento, intermediário entre a visão e o modelo e executa eventos.
View.js- Contém a parte da interface do aplicativo, que aparece para o usuário. O Sencha Touch usa várias visualizações ricas de IU, que podem ser estendidas e personalizadas de acordo com o requisito.
Store.js- Ele contém os dados armazenados em cache localmente, que devem ser renderizados na visualização com a ajuda de objetos de modelo. O armazenamento busca os dados usando proxies, que tem o caminho definido para os serviços buscarem os dados de back-end.
Model.js- Contém os objetos que vinculam os dados da loja à visualização. É a representação do objeto do mundo real, que basicamente lida com o banco de dados.
Utils.js- Não está incluído na arquitetura MVC, mas é uma prática recomendada usá-lo para tornar o código mais limpo, menos complexo e mais legível. Podemos escrever métodos neste arquivo e chamá-los no controlador ou no renderizador de visualização sempre que necessário. É útil também para fins de reutilização de código.
MVC significa Model View Controller. É um padrão de arquitetura que separa o aplicativo em componentes lógicos, tornando-o mais gerenciável.
O diagrama a seguir mostra como a arquitetura MVC funciona -
Controller - O controlador controla a aplicação inteira, notifica a visualização se o modelo é alterado e executa ações com base nas entradas do usuário.
View- Ele contém a parte da interface do aplicativo que é visual para o usuário. Notifica o controlador para alterar o modelo na entrada do usuário.
Model- Contém os objetos que vinculam os dados da loja à visualização. É a representação do objeto do mundo real que basicamente lida com banco de dados. Ele também notifica o controlador sobre qualquer mudança em vista.
Neste capítulo, listaremos as etapas para escrever o primeiro programa Hello World em Ext JS.
Passo 1
Crie uma página index.htm em um editor de sua escolha. Inclua os arquivos de biblioteca necessários na seção principal da página html como segue.
index.htm
<!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() {
Ext.create("Ext.tab.Panel", {
fullscreen: true, items: [{
title: 'Home', iconCls: 'home', html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
<body>
</body>
</html>Explicação
O método Ext.application () é o ponto de partida do aplicativo Sencha Touch. Ele cria uma variável global chamada 'Sencha' declarada com a propriedade name - todas as classes do Aplicativo, como seus Modelos, Visualizações e Controladores, residirão neste único namespace, o que reduz as chances de colisão de variáveis globais e nomes de arquivo.
O método launch () é chamado assim que a página estiver pronta e todos os arquivos JavaScript forem carregados.
O método Ext.create () é usado para criar um objeto no Sencha Touch. Aqui, estamos criando um objeto de classe de painel simples Ext.tab.Panel.
Ext.tab.Panel é a classe predefinida no Sencha Touch para criar um painel.
Cada classe Sencha Touch possui propriedades diferentes para executar algumas funcionalidades básicas.
A classe Ext.Panel tem várias propriedades, como -
fullscreen propriedade é fazer uso de uma tela inteira, portanto, o painel ocupará espaço em tela inteira.
items propriedade é o recipiente para vários itens.
iconCls é a classe usada para exibir ícones diferentes.
title propriedade é fornecer o título ao painel.
html propriedade é o conteúdo html a ser mostrado no painel.
Passo 2
Abra o arquivo index.htm em um navegador padrão e você obterá a seguinte saída.
A demanda atual por um aplicativo da web é desenvolver um aplicativo rápido com menos esforços de desenvolvimento. O Sencha Touch ajuda a fazer isso com facilidade, pois fornece várias bibliotecas de construção para escolher, com base no código de desenvolvimento ou produção, juntamente com a facilidade de criar uma construção personalizada.
As bibliotecas de construção do Sencha Touch carregam as classes dinamicamente. O carregamento dinâmico representa as classes que são carregadas quando necessárias e apenas as classes que são necessárias no aplicativo serão incluídas. Isso faz com que o aplicativo seja executado mais rápido, pois o número de arquivos a serem carregados diminui, diminuindo simultaneamente o tempo de carregamento.
O Sencha Touch 2.x fornece as cinco bibliotecas de construção a seguir.
| Sr. Não. | Construções e uso |
|---|---|
| 1 | sencha-touchdebug.js Esta construção é usada ao desenvolver o aplicativo localmente. É uma versão não minimizada com todos os comentários e logs de depuração para facilitar a depuração durante o desenvolvimento. |
| 2 | senchatouch.js Este arquivo é usado para fins de produção. É a versão reduzida quando temos uma construção personalizada. |
| 3 | sencha-touchall.js Este arquivo é usado para fins de produção. É a versão reduzida quando não temos uma compilação personalizada. |
| 4 | sencha-touchall-debug.js Este arquivo é usado para depuração na produção. Ele não está reduzido e contém todos os comentários e logs de depuração. |
| 5 | sencha-touchall-compat.js Esta construção é usada para migrar a versão 1.x para a versão 2.x. Ele dá um aviso sempre que o código da versão 1.x não é compatível e precisa de modificação de código. |
Com as construções mencionadas acima, o Sencha Touch fornece um recurso para criar construções personalizadas.
Vantagens de ter uma construção personalizada
A construção personalizada não carrega todos os arquivos de toque. Ele carrega apenas os arquivos que estamos usando no aplicativo, o que torna o aplicativo mais rápido e de fácil manutenção.
O Sencha CMD é usado para criar uma construção customizada. Para criar um build customizado no Sencha CMD, vá para o diretório onde o arquivo do aplicativo reside e digite um dos seguintes comandos para criar um build.
| Sr. Não. | Comando e Uso |
|---|---|
| 1 | sencha app build native Constrói o aplicativo e prepara um arquivo chamado packager.temp.json que pode ser usado para empacotar um aplicativo - o packager.temp.json é o mesmo que packager.json, mas contém caminhos adicionais. |
| 2 | sencha app build -run native Compila e empacota automaticamente o aplicativo e inicia o simulador apropriado. |
| 3 | sencha app build package Constrói o aplicativo com suporte para empacotamento, mas não configura um arquivo JSON do empacotador. Isso é útil para projetos que mantêm manualmente vários arquivos packager.json. |
Assim que a compilação for bem-sucedida, ela gerará o arquivo all-classes.js que precisamos incluir em nosso index.html para torná-lo pronto para produção.
O código a seguir mostra as alterações a serem feitas para o código pronto para produção.
Index.html before building application
<!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-debug.js"></script>
<script type = "text/javascript" src = "app.js"> </script>
</head>
<body>
</body>
</html>Index.html after building the application
<!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.js"></script>
<script type = "text/javascript" src = "app.js"> </script>
<script type = "text/javascript" src = "app-classes.js"> </script>
</head>
<body>
</body>
</html>O Sencha Touch vem com várias retificações da versão anterior.
O Sencha Touch 2 vem com a compilação de compatibilidade com versões anteriores, o que torna o processo de migração mais fácil da versão 1.x para 2.x.
Esta compilação apenas facilita o trabalho, fornecendo um aviso e os logs sempre que ocorrer qualquer problema de migração ou alteração de código for necessária, para que o usuário saiba onde estão as alterações necessárias para garantir que o aplicativo funcione com a versão mais recente.
A migração do Sencha Touch 2.x requer as seguintes alterações de código.
Sistema de classes
Code in Sencha Touch 1.x -
MyApp.view.StudentPanel = Ext.extend(Ext.Panel, {
scroll: 'vertical',
html: 'Student Panel'
initComponent: function() {
Ext.getCmp('StudentIdDiv').update('This is a Student panel');
}
});Code in Sencha Touch 2.x -
Ext.define('MyApp.view.StudentPanel', {
extend: 'Ext.Panel',
config: {
scroll: 'vertical',
html: 'Student Panel'
},
initialize: function() {
Ext.getCmp('StudentIdDiv').setHtml('This is a Student panel')
}
});Olhando para ambas as versões, você pode ver que a maneira de criar classes é mudando que agora é inspirada por ExtJs como -
Ext.extend é alterado para Ext.define.
Todos os parâmetros de configuração relacionados à classe agora estão definidos no parâmetro config.
O initComponent é alterado para o método initialize ().
No Sencha Touch 2.x, podemos ter as funções setHtml () e getHtml () para atualizar o html ou obter o valor.
Arquitetura MVC
O código do Sencha Touch 1.x era modular e baseado na arquitetura MVC. O Sencha Touch 2.x segue uma sintaxe diferente para escrever modelo, visualização e controlador. Vamos ver a diferença dos arquivos de modelo, visualização e controlador em diferentes versões.
Modelo
Code in Sencha Touch 1.x -
Ext.regModel('MyApp.model.StudentModel', {
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'}
]
});Code in Sencha Touch 2.x -
Ext.define('MyApp.model.StudentModel', {
extend: 'Ext.data.Model', config: {
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'}
]
}
});Ext.regModel é alterado para Ext.define que estende Ext.data.Model.
Todos os campos vêm na seção de configuração agora na versão 2.x.
Visão
Code in Sencha Touch 1.x -
Ext.Panel("studentView", {
items: [{}]
});Code in Sencha Touch 2.x -
Ext.define('MyApp.view.StudentView', {
extend: 'Ext.tab.Panel',
items: [{}]
});A visão é quase a mesma, a única mudança sendo o nome da visão segue o namespacing da versão 2.x, como Myapp.view.StudentView e o código é escrito no método Ext.define como o modelo.
Controlador
Code in Sencha Touch 1.x -
Ext.regController("studentController", {
someMethod: function() {
alert('Method is called');
}
});Code in Sencha Touch 2.x -
Ext.define('MyApp.controller.studentController', {
extend: 'Ext.app.Controller', someMethod: function() {
alert('Method is called');
}
});Igual ao modelo no controlador. Além disso, o Ext.regController é alterado para Ext.define, que estende Ext.app.Controller.
Inscrição
Code in Sencha Touch 1.x -
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('MyApp.view.StudentView');
}
});Code in Sencha Touch 2.x -
Ext.application({
name: 'MyApp',
models: ['studentModel'],
controllers: ['studentController'],
views: ['studentView'],
stores: ['studentStore'],
launch: function() {
Ext.create('MyApp.view.Main');
}
});A principal diferença entre a versão 1.xe a versão 2.x é que na 2.x declaramos todos os modelos, visualizações, controladores e armazenamentos no próprio aplicativo.
O Sencha Touch tem vários conceitos básicos, como sistema de classes, ajax, controladores, etc.
A tabela a seguir lista o link para os principais conceitos do Sencha Touch.
| Sr. Não. | Link de conceito e descrição |
|---|---|
| 1 | Sistema de classes |
| 2 | Componentes |
| 3 | Controladores |
| 4 | Suporte para BlackBerry |
| 5 | Uso de Ajax |
O pacote de dados no Sencha Touch é responsável por realizar qualquer tipo de manipulação de dados, seja armazenando ou carregando os dados.
Os pacotes de dados estão relacionados ao modelo, armazenamento e proxies.
| Sr. Não. | Link de conceito e descrição |
|---|---|
| 1 | Model É a coleção de dados e campos com os quais exibimos todos os valores na IU. Descrição |
| 2 | Store É uma coleção de instâncias de modelo que basicamente armazena os dados localmente. Na loja, gravamos todos os eventos e chamadas restantes para obter dados. Descrição |
| 3 | Proxy É basicamente responsável por carregar dados na loja. Geralmente usamos o proxy ajax para carregar os dados da loja. Descrição |
O Sencha Touch fornece vários temas para serem usados em seus aplicativos. Você pode adicionar temas diferentes no lugar do tema clássico e ver a diferença na saída com base no dispositivo que estamos usando para o aplicativo. Isso é feito simplesmente substituindo o arquivo CSS do tema, conforme explicado no exemplo a seguir.
Tema da área de trabalho
Considere seu primeiro aplicativo Hello World. O seguinte CSS do aplicativo é usado para o tema da área de trabalho.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssPara ver o efeito, tente o seguinte programa -
<!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() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Isso produzirá o seguinte resultado -
Tema do Windows
Considere seu primeiro aplicativo Hello World. Remova o seguinte CSS do aplicativo -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAdicione o seguinte CSS para usar o tema do Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.cssPara ver o efeito, tente o seguinte programa -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/wp.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() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Isso produzirá o seguinte resultado -
Tema IOS
Considere seu primeiro aplicativo Hello World. Remova o seguinte CSS do aplicativo.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAdicione o seguinte CSS para usar o tema do Windows
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.cssPara ver o efeito, tente o seguinte programa -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino.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() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Isso produzirá o seguinte resultado -
IOS Classic Theme
Considere seu primeiro aplicativo Hello World. Remova o seguinte CSS do aplicativo -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAdicione o seguinte CSS para usar o tema do Windows -
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.cssPara ver o efeito, tente o seguinte programa -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/cupertino-classic.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() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Isso produzirá o seguinte resultado -
Tema Android
Considere seu primeiro aplicativo Hello World. Remova o seguinte CSS do aplicativo.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAdicione o seguinte CSS para usar o tema do Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.cssPara ver o efeito, tente o seguinte programa -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/mountainview.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() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Isso produzirá o seguinte resultado -
BlackBerry Theme
Considere seu primeiro aplicativo Hello World. Remova o seguinte CSS do aplicativo.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.cssAdicione o seguinte CSS para usar o tema do Windows.
https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.cssPara ver o efeito, tente o seguinte programa -
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/bb10.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() {
Ext.create("Ext.tab.Panel", {
fullscreen: true,
items: [{
title: 'Home',
iconCls: 'home',
html: 'Welcome to sencha touch'
}]
});
}
});
</script>
</head>
</html>Isso produzirá o seguinte resultado -
No mundo das tecnologias de hoje, temos vários dispositivos, como celulares, tablets, desktops e laptops com diferentes tamanhos de tela. Portanto, há a necessidade de desenvolver aplicativos, que sejam acessíveis a partir de todos os dispositivos com boa aparência. No entanto, desenvolver códigos diferentes para dispositivos diferentes é muito demorado e caro.
O Sencha Touch nos ajuda nesse sentido, oferecendo um recurso de perfil de dispositivo. Com base no perfil ativo, as diferentes dependências serão executadas e aplicáveis.
Podemos declarar o perfil do dispositivo ao escrever um código de aplicativo. Podemos ter vários dispositivos como -
Ext.application({
name: 'MyApp',
profiles: ['Phone', 'Tablet']
});Uma vez feito isso, os perfis serão carregados como -
- MyApp.profiles.Phone.js
- MyApp.profiles.Tablet.js
Escrever um perfil de telefone simples
Ext.define('Mail.profile.Phone', {
extend: 'Ext.app.Profile',
config: {
name: 'Phone',
views: ['phoneView']
},
isActive: function() {
return Ext.os.is('Phone');
}
});Escrever um perfil de tablet simples
Ext.define('Mail.profile.Tablet', {
extend: 'Ext.app.Profile',
config: {
name: 'Tablet',
views: ['tableView']
},
isActive: function() {
return Ext.os.is('Tablet');
}
});Como podemos ver no perfil, temos a função isActive que determina se o dispositivo específico está ativo. Se o dispositivo estiver ativo, as dependências correspondentes serão carregadas e instanciadas.
Conforme mencionado no exemplo acima, se estivermos usando um dispositivo de telefone, a função isActive do perfil de telefone retornará true e as dependências relacionadas ao dispositivo de telefone serão carregadas; aqui o phoneView será carregado. Se o dispositivo for um tablet, a função isActive do perfil do telefone retornará false e a função isActive do perfil do tablet retornará true e a dependência tabletView será carregada.
Processo de Lançamento
Mais um ponto a ser notado aqui é quando temos perfis no aplicativo, então o carregamento e a instanciação do código do aplicativo serão na seguinte ordem -
- Os controladores são instanciados primeiro e a função init de cada controlador será carregada.
- A função de inicialização do perfil será chamada.
- A função de inicialização do aplicativo será chamada.
As funções de perfil e inicialização do aplicativo são opcionais, portanto, se não definirmos nenhuma delas, elas não serão chamadas.
Dê uma olhada no código a seguir para verificar onde e como as diferentes funções de inicialização e init podem ser definidas.
Função init do controlador
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
init : function (){
Ext.Msg.alert('Controller's init method');
},
config: {
refs: {
tab: '#divId
}
}
});Função de lançamento do perfil
Ext.define('Mail.profile.Tablet', {
extend: 'Ext.app.Profile',
config: {
name: 'Tablet', views: ['tableView']
},
isActive: function() {
return Ext.os.is('Tablet');
}
launch : function() {
Ext.Msg.alert('profile's launch function');
}
});Função de inicialização do aplicativo
Ext.application({
name: 'Sencha', launch: function() {
Ext.Msg.alert(Application's launch function);
}
});Existem certas maneiras definidas no Sencha Touch para declarar dependências, uma dentro do aplicativo e a outra dentro das classes.
Vamos dar uma olhada nas diferentes maneiras de definir dependências.
Dependências de nível de aplicativo
Aqui, declaramos todas as dependências quando criamos Ext.application.
Ext.application({
name: 'MyApp',
views: ['StudentsView'],
models: ['StudentsModel'],
controllers: ['StudentsController'],
stores: ['StudentsStore'],
profiles: ['Phone', 'Tablet']
});Agora, quando o aplicativo for carregado, todas as dependências serão carregadas ao mesmo tempo. O caminho dos outros arquivos será -
- MyApp.views.StudentsView
- MyApp.models.StudentsModel
- MyApp.stores.StudentsStore etc.
A forma de declaração acima não apenas carrega o arquivo, mas também decide qual perfil ele deve manter ativo. Após carregar o controlador, certifique-se de instanciá-lo. Depois que os armazenamentos são carregados, ele os instancia e fornece um id, se ainda não tiver sido fornecido.
Dependências específicas do perfil
Quando estamos usando perfis em um aplicativo, pode haver a possibilidade de que poucas funcionalidades sejam necessárias apenas para algum perfil específico.
As dependências específicas do perfil são declaradas nos próprios perfis em vez da declaração do nível do aplicativo.
Ext.define('MyApp.profile.Tablet', {
extend: 'Ext.app.Profile', config: {
views: ['StudentView'], controllers: ['StudentController'], models: ['StudentModel']
}
});As dependências são carregadas independentemente do perfil estar ativo ou não. No entanto, com base no perfil ativo, ocorre o processamento adicional, como instanciar o controlador e os armazenamentos.
Dependências aninhadas
Quando temos uma aplicação maior, temos vários controladores, modelos, visualizações e armazenamentos.
É sempre bom manter a modularidade em aplicações maiores. Para isso, podemos definir subpastas e ao declarar dependências podemos usar o nome da subpasta para declarar.
Ext.application({
name: 'MyApp',
controllers: ['Controller', 'nested.NewController'],
views: ['class.Cview', 'SView']
});No caso acima, os seguintes arquivos serão carregados -
- MyApp.controllers.Controller
- MyApp.controllers.nested.NewController
- MyApp.Views.Sview
- MyApp.Views.class.Cview
Dependências Externas
Podemos especificar as dependências fora do aplicativo, fornecendo nomes totalmente qualificados das classes como -
Ext.Loader.setPath({
'Class': 'Class'
});
Ext.application({
views: ['Class.view.LoginForm', 'Welcome'],
controllers: ['Class.controller.Sessions', 'Main'],
models: ['Class.model.User']
});No caso acima, os seguintes arquivos serão carregados -
- Class/view/LoginForm.js
- Class/controller/Sessions.js
- Class/model/User.js
- app/view/Welcome.js
- app/controller/Main.js
Ele o ajuda a identificar qual sistema operacional você está usando, em qual navegador está trabalhando e quais são os recursos disponíveis para o seu ambiente.
O Sencha Touch fornece diferentes funções para obter informações específicas do ambiente. Todos os métodos mencionados abaixo podem ser verificados, se a condição for if (Ext.os.is.Windows) {} e com base nas tarefas de condição podem ser executadas.
Todos os métodos a seguir retornam um valor booleano.
Sistema operacional
Ext.os é uma classe que fornece diferentes métodos para saber em qual sistema operacional estamos trabalhando.
| Sr. Não | Método e Descrição |
|---|---|
| 1 | Ext.os.is.webOS Esta função retornará verdadeiro se você estiver usando o sistema operacional webos, caso contrário, retornará falso. |
| 2 | Ext.os.is.RIMTable Esta função retornará verdadeiro se você estiver usando o sistema operacional RIMTable, caso contrário, retornará falso. |
| 3 | Ext.os.is.Linux Esta função retornará verdadeiro se você estiver usando o sistema operacional Linux, caso contrário, retornará falso. |
| 4 | Ext.os.is.Windows Esta função retornará verdadeiro se você estiver usando o sistema operacional Windows, caso contrário, retornará falso. |
| 5 | Ext.os.is.MacOs Esta função retornará verdadeiro se você estiver usando o sistema operacional Mac, caso contrário, retornará falso. |
| 6 | Ext.os.is.BlackBerry Esta função retornará verdadeiro se você estiver usando o sistema operacional BlackBerry, caso contrário, retornará falso. |
| 7 | Ext.os.is.iOS Esta função retornará verdadeiro se você estiver usando o sistema operacional IOS, caso contrário, retornará falso. |
| 8 | Ext.os.is.Android Esta função retornará verdadeiro se você estiver usando o sistema operacional Android, caso contrário, retornará falso. |
Detecção de Dispositivo
| Sr. Não | Método e Descrição |
|---|---|
| 1 | Ext.os.is.iPad Esta função retornará verdadeiro se você estiver usando o iPad, caso contrário, retornará falso. |
| 2 | Ext.os.is.iPhone Esta função retornará verdadeiro se você estiver usando o iPhone, caso contrário, retornará falso. |
| 3 | Ext.os.is.iPod Esta função retornará verdadeiro se você estiver usando o iPod, caso contrário, retornará falso. |
Versão do sistema operacional
| Sr. Não | Método e Descrição |
|---|---|
| 1 | Ext.os.name Ele retorna o nome do sistema operacional. |
| 2 | Ext.os.version.version Fornece a versão do sistema operacional que estamos usando. |
Detecção de navegador
| Sr. Não | Método e Descrição |
|---|---|
| 1 | Ext.browser.is.IE Esta função retorna verdadeiro se estivermos usando o navegador Internet Explorer, caso contrário, retorna falso. |
| 2 | Ext.browser.is.FF Esta função retorna verdadeiro se estivermos usando o navegador FireFox, caso contrário, retorna falso. |
| 3 | Ext.browser.is.Chrome Esta função retorna verdadeiro se estivermos usando o navegador Chrome, caso contrário, retorna falso. |
| 4 | Ext.browser.is.Opera Esta função retorna verdadeiro se estivermos usando o navegador Opera, caso contrário, retorna falso. |
| 5 | Ext.browser.is.Safari Esta função retorna verdadeiro se estivermos usando o navegador Safari, caso contrário, retorna falso. |
Esta função Ext.browser fornece várias outras funções -
| Sr. Não | Método e Descrição |
|---|---|
| 1 | Ext.browser.userAgent Ele retorna o userAgent atual. |
| 2 | Ext.browser.isSecure Retorna verdadeiro se a página atual estiver usando SSL. |
| 3 | Ext.browser.isStrict Retorna verdadeiro se o navegador estiver no modo estrito. |
| 4 | Ext.browser.engineName Ele retorna o nome do mecanismo do navegador (WebKit, Gecko, Presto, Trident e outro). |
| 5 | Ext.browser.engineVersion Ele retorna a versão do mecanismo do navegador. |
Características
Ext.feature.has é para verificar se o navegador tem o seguinte recurso ou não.
| Sr. Não | Método e Descrição |
|---|---|
| 1 | Ext.feature.has.Audio Este método retorna true se o navegador suportar o recurso de tag de áudio de html5. |
| 2 | Ext.feature.has.Canvas Este método retorna verdadeiro se o navegador suportar o recurso de tag de tela de html5. |
| 3 | Ext.feature.has.classList Este método retorna true se o navegador suportar o recurso classlist de html5 que é usado para adicionar, remover e alternar classes css para o elemento html. |
| 4 | Ext.feature.has.Css3dTransforms Este método retorna verdadeiro se o navegador suportar o recurso Css 3d Transform do css3. |
| 5 | Ext.feature.has.CssAnimations Este método retorna verdadeiro se o navegador suportar animações de css3. |
| 6 | Ext.feature.has.CssTransforms Este método retorna verdadeiro se o navegador suportar o recurso de transformação Css do css3. |
| 7 | Ext.feature.has.CssTransitions Este método retorna verdadeiro se o navegador suportar o recurso de transição do css3. |
| 8 | Ext.feature.has.DeviceMotion Este método retorna verdadeiro se o navegador suportar o recurso de movimento do dispositivo. |
| 9 | Ext.feature.has.Geolocation Este método retorna verdadeiro se o navegador suportar o recurso de geolocalização do html5. |
| 10 | Ext.feature.has.History Este método retorna verdadeiro se o navegador oferece suporte ao recurso de histórico de html. |
| 11 | Ext.feature.has.Orientation Este método retorna verdadeiro se o navegador puder detectar qual a orientação do dispositivo. |
| 12 | Ext.feature.has.OrientationChange Este método retorna verdadeiro se o navegador puder detectar mudança na orientação do dispositivo. |
| 13 | Ext.feature.has.Range Intervalo é um tipo de tag de entrada html para o elemento do controle deslizante de intervalo, portanto, se o navegador oferecer suporte ao controle deslizante, essa função retorna verdadeiro. |
| 14 | Ext.feature.has.SqlDatabase O banco de dados sql da Web é uma API de página da Web para armazenar dados em um banco de dados no qual podemos realizar operações de consulta. Este método retorna verdadeiro se o navegador oferecer suporte ao banco de dados SQL Sql. |
| 15 | Ext.feature.has.Svg Svg significa Scalable Vector Graphics, este método retorna verdadeiro se o navegador suportar o recurso svg do html 5. |
| 16 | Ext.feature.has.Touch Este método retorna verdadeiro se o navegador possuir o recurso Touch. |
| 17 | Ext.feature.has.Video Este método retorna verdadeiro se o navegador suportar tags de vídeo html 5. |
| 18 | Ext.feature.has.Vml Vml significa linguagem de marcação vetorial, que é uma linguagem de marcação baseada em xml. Portanto, este método retorna verdadeiro se o navegador tiver suporte para vml. |
| 19 | Ext.feature.has.WebSockets Web socket é basicamente um protocolo de comunicação para computadores que suporta duas comunicações entre clientes e servidor. Este método retorna verdadeiro se o navegador suporta WebSockets, caso contrário, retorna falso. |
Eventos são algo que são acionados quando algo acontece com a classe. Por exemplo, quando um botão é clicado ou antes / depois de um elemento ser renderizado.
Métodos de escrever eventos
A seguir estão os métodos de gravação de eventos.
- Eventos integrados usando ouvintes.
- Anexar eventos mais tarde
- Eventos personalizados
Eventos integrados usando ouvintes
O Sencha Touch fornece propriedade de ouvinte para gravar eventos e eventos customizados em arquivos Sencha Touch.
Escrevendo ouvinte no Sencha Touch
Vamos adicionar o ouvinte no próprio programa anterior, adicionando a propriedade listen ao painel, mostrado a seguir -
<!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() {
Ext.create('Ext.Panel', {
html: 'My Panel', fullscreen: true, listeners: {
painted: function() {
Ext.Msg.alert('I was painted to the screen');
}
}
});
}
});
</script>
</head>
</html>Isso produzirá o seguinte resultado -
Dessa forma, também podemos escrever vários eventos na propriedade listeners.
Vários eventos no mesmo ouvinte
<!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() {
var myButton = Ext.Viewport.add({
xtype: 'button',
centered: true,
text: 'Click me'
});
myButton.on({
tap: function() {
var randomWidth = 100 + Math.round(Math.random() * 200);
this.setWidth(randomWidth);
},
widthchange: function(button, newWidth, oldWidth) {
alert('My width changed from ' + oldWidth + ' to ' + newWidth);
}
});
}
});
</script>
</head>
</html>Isso produzirá o seguinte resultado -
Anexando evento mais tarde
No método anterior de escrever eventos, escrevemos eventos em ouvintes no momento da criação dos elementos.
A outra maneira de anexar eventos é a seguinte -
<!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() {
var myButton = Ext.Viewport.add({
xtype: 'button',
centered: true,
text: 'Click me'
});
myButton.on('tap', function() {
alert("Event listener attached by .on");
});
}
});
</script>
</head>
</html>Isso produzirá o seguinte resultado -
Eventos personalizados
Podemos escrever eventos personalizados no Sencha Touch e disparar os eventos com o método fireEvent. O exemplo a seguir explica como escrever eventos personalizados.
<!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() {
var myButton = Ext.Viewport.add({
xtype: 'button',
centered: true,
text: "Just wait 5 seconds",
listeners: {
myEvent: function(button, points) {
alert('myEvent was fired! You score ' + points + ' points');
}
}
});
Ext.defer(function() {
var number = Math.ceil(Math.random() * 100);
myButton.fireEvent('myEvent', myButton, number);
}, 5000);
}
});
</script>
</head>
</html>Assim que a página for carregada e o documento pronto, a página da IU com o botão aparecerá e como estamos disparando um evento após 5 segundos, assim que o documento estiver pronto, a caixa de alerta aparecerá após 5 segundos.
Aqui, escrevemos o evento personalizado 'myEvent' e estamos disparando eventos como button.fireEvent (eventName);
Layout é a maneira como os elementos são organizados em um contêiner. Isso pode ser horizontal, vertical ou qualquer outro. O Sencha Touch tem layouts diferentes definidos em sua biblioteca, embora também possamos escrever layouts personalizados.
| Sr. Não. | Layout e descrição |
|---|---|
| 1 | hBox Este layout permite que o elemento seja distribuído de maneira horizontal. |
| 2 | vBox Este layout permite que o elemento seja distribuído verticalmente. Este é um dos layouts comumente usados. |
| 3 | Em forma Neste layout, o container é preenchido com um único painel e quando não há nenhum requisito específico relacionado ao layout, então este layout é utilizado. |
| 4 | Cartão (TabPanel) Este layout organiza diferentes componentes em forma de guia. As guias serão exibidas na parte superior do contêiner. Sempre que apenas uma guia está visível e cada guia é considerada um componente diferente. |
O Sencha Touch vem com suporte de histórico completo e recursos de deep linking.
Possui a funcionalidade mais simples do botão Voltar, que ajuda o usuário a navegar entre as telas, sem nem mesmo atualizar a página ou o aplicativo.
Ele também fornece funcionalidade de rotas, que ajuda o usuário a navegar para qualquer URL. Com base no URL fornecido na janela do navegador, ele chama funções específicas para executar uma tarefa específica.
Veja o exemplo a seguir para a funcionalidade do botão Voltar.
Este exemplo mostra a lista aninhada que nada mais é do que uma lista dentro de uma lista, portanto, quando você clica em qualquer um dos itens da lista, ela abre outra lista e um botão Voltar aparece no topo da tela.
Para uma base de código completa, você pode verificar Lista aninhada na seção do componente de visualização.
Encaminhamento
Exemplo mais simples de rotas
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
config: {
routes: {
login: 'showLogin',
'user/:id': 'userId'
}
},
showLogin: function() {
Ext.Msg.alert('This is the login page');
},
userId: function(id) {
Ext.Msg.alert('This is the login page specific to the used Id provided');
}
});No exemplo acima, se a URL do navegador for https://myApp.com/#login, a função showLogin será chamada.
Podemos fornecer parâmetros na URL e, com base no parâmetro específico, a função pode ser chamada. Por exemplo, se a URL for https://myApp.com/#user/3, a outra função userId será chamada e o ID específico pode ser usado dentro das funções.
Roteamento avançado
Às vezes, temos parâmetros avançados que incluem vírgula, espaço em branco e caracteres especiais, etc. para isso, se usarmos a maneira acima de escrever rotas, ela não funcionará. Para resolver esse problema, o Sencha touch fornece roteamento condicional, onde podemos especificar a condição de que tipo de dados o parâmetro deve aceitar.
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller', config: {
routes: {
login/:id: {
action: showLogin, conditions: {':id: "[0-9a-zA-Z\.]+" }
}
},
showLogin: function() {
Ext.Msg.alert('This is the login page with specific id which matches criteria');
}
}
});Assim, como no exemplo acima, fornecemos o regex na condição que afirma claramente que tipo de dados deve ser permitido como parâmetro de URL.
Compartilhando o mesmo URL em diferentes perfis de dispositivo
Como o Sencha touch fornece perfil de dispositivo, então o mesmo código de aplicativo pode ser usado em vários dispositivos, pode haver possibilidades de que perfis diferentes tenham funcionalidades diferentes para o mesmo URL.
Para resolver esse problema, o Sencha touch nos dá liberdade para escrever o roteamento no controlador principal e a função chamada para ser escrita em todos os perfis com seus perfis específicos.
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller', config: {
routes: {
login: 'showLogin'
}
},
});
// For phone profile
Ext.define('MyApp.controller.phone.Main, {
extend: 'MyApp.controller.Main, showLogin: function() {
Ext.Msg.alert('This is the login page for mobile phone profile');
}
});
// For tablet profile
Ext.define('MyApp.controller.tablet.Main, {
extend: 'MyApp.controller.Main,showLogin: function() {
Ext.Msg.alert('This is the login page for tablet profile');
}
});Como exemplo mostra, temos um controlador principal que possui a função showLogin e temos dois perfis diferentes (Telefone / Tablet). Ambos os perfis possuem função showLogin com diferentes códigos específicos para o perfil.
Desta forma, podemos compartilhar o mesmo URL em vários dispositivos de perfil com suas funcionalidades específicas.
O Sencha Touch fornece configuração XHR2 para funcionar com desenvolvimento Ajax e Ajax2.
XHR2 é xmlHttpRequest nível 2, que costumava solicitar dados do servidor. Para qualquer aplicativo da web, os dados residem no servidor e uma vez que a página é carregada, os dados devem ser acessados do servidor com a ajuda de solicitações Ajax.
O XHR2 no Sencha Touch fornece o recurso de barra de progresso, que mostra ao usuário a quantidade de dados transferidos para uma solicitação específica. O XHR2 foi adicionado recentemente, portanto, precisamos verificar se o navegador é compatível ou não.
A seguir está a função para verificar se o navegador é compatível com XHR2 -
if (Ext.feature.has.XHR2) {
// Here we can write functionality to work if browser supports XHR2
}Podemos até verificar se o upload progressivo com XHR2 é suportado pelo navegador ou não.
if (Ext.feature.has.XHRUploadProgress) {
// Here we can write functionality to work if browser supports progressive uploads
}Vários novos recursos XHR2 estão incluídos no Sencha Touch.
| Sr. Não | Características e descrição |
|---|---|
| 1 | XHR2: true Isso é usado para habilitar e desabilitar a funcionalidade XHR2 no aplicativo. |
| 2 | Ext.field.File Novo campo de arquivo é adicionado para dar mais calma sobre o tipo de campo. |
| 3 | Ext.field.FileInput Isso para fornecer FileInput. |
| 4 | Ext.progressIndicator Isso é para fornecer a porcentagem exata de dados transferidos em termos de barra de progresso. |
| 5 | xtype: fileinput Para criar uma instância da classe fileInput. |
| 6 | xtype: filefield Para criar uma instância da classe de arquivo. |
| 7 | responseType : value Este parâmetro permite vários tipos de respostas como texto, documento, blob etc. |
A seguir estão os exemplos para enviar uma solicitação simples ajax com e sem parâmetro e fazer upload de arquivos usando ajax.
Solicitação Ajax simples sem parâmetros - Sucesso
<!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.setup({
requires: [ 'Ext.Panel', 'Ext.Button', 'Ext.form.Panel'], onReady: function() {
var request = {
url: 'https://www.tutorialspoint.com/sencha_touch/index.htm',
method: 'POST',
xhr2: true,
success: function(response) {
Ext.Msg.alert('Ajax call successful');
},
failure: function(response) {
Ext.Msg.alert('Ajax call failed');
}
};
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>Isso produzirá o seguinte resultado -
O exemplo acima mostra a chamada ajax bem-sucedida, pois a URL mencionada está correta. Neste exemplo, não estamos passando nenhum parâmetro, é apenas uma simples solicitação ajax que atinge a URL mencionada.
Se você estiver usando o navegador Chrome na ferramenta do desenvolvedor, navegue até a seção de rede, você pode ver a solicitação que está sendo enviada e a resposta que recebemos.
Solicitação Ajax simples sem parâmetros - Falha
<!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.setup({
requires: [
'Ext.Panel',
'Ext.Button',
'Ext.form.Panel'
],
onReady: function() {
var request = {
url: 'https://www.tutorialspoint.com/sencha_touch/indexx.htm',
method: 'POST',
xhr2: true,
success: function(response) {
Ext.Msg.alert('Ajax call successful');
},
failure: function(response) {
Ext.Msg.alert('Ajax call failed');
}
};
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>Isso produzirá o seguinte resultado -
No exemplo acima, apenas para mostrar como funciona a falha de ajax, mencionamos a URL errada. Compare este exemplo com o anterior, você encontrará a diferença.
Envio de parâmetros em solicitação Ajax
<!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.setup({
requires: [
'Ext.Panel',
'Ext.Button',
'Ext.form.Panel'
],
onReady: function() {
var formData = new FormData();
formData.append("firstName", "Hi");
formData.append("lastName", "Reader");
// Request will be sent as part of the payload instead of standard post data
var request = {
url: 'https://www.tutorialspoint.com/sencha_touch/sencha_json.php',
method: 'POST',
xhr2: true,
data: formData,
success: function(response) {
var out = Ext.getCmp("output");
response = Ext.JSON.decode(response.responseText, true);
Ext.Msg.alert(response.message);
},
failure: function(response) {
var out = Ext.getCmp("output");
Ext.Msg.alert('Ajax failed!');
}
};
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>Isso produzirá o seguinte resultado -
Neste exemplo, estamos passando parâmetros com o ajax usando a propriedade data da chamada ajax.
Upload de arquivos usando Ajax
<!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.setup({
requires: [
'Ext.Panel',
'Ext.MessageBox',
'Ext.Button',
'Ext.ProgressIndicator',
'Ext.form.Panel',
'Ext.field.FileInput'
],
onReady: function() {
var progressIndicator = Ext.create("Ext.ProgressIndicator", {
loadingText: "Uploading: {percent}%"
});
var request = {
url: 'https://www.tutorialspoint.com/sencha_touch/sencha_json.php',
method: 'POST',
xhr2: true,
progress:progressIndicator,
success: function(response) {
Ext.Msg.alert('File uploaded successfully.');
},
failure: function(response) {
Ext.Msg.alert('File upload failed.');
}
};
Ext.Viewport.add(progressIndicator);
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"fileinput",
accept:"image/jpeg"
},
{
xtype:"button",
text: "Upload",
ui: 'confirm',
handler: function(){
var input = Ext.Viewport.down("fileinput").input;
var files = input.dom.files;
if (files.length) {
request.binaryData = files[0];
Ext.Ajax.request(request);
}else {
Ext.Msg.alert("Please Select a JPG");
}
}
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>Isso produzirá o seguinte resultado -
Este exemplo mostra como fazer upload de dados usando uma chamada ajax. Neste exemplo, estamos usando o indicador da barra de progresso para mostrar o progresso durante o upload do arquivo.
O Sencha Touch fornece vários componentes de UI, que podem ser personalizados de acordo com os requisitos.
| Sr.N0. | Descrição do componente |
|---|---|
| 1 | Carrossel Este componente da IU é usado para exibir o Carrossel. |
| 2 | Lista Este componente da IU é usado para exibir listas. |
| 3 | Lista Aninhada Este componente de IU é usado para exibir a lista aninhada. |
| 4 | Formato Este componente de IU é usado para exibir formulários. |
| 5 | Gráfico Este componente de IU é usado para exibir diferentes tipos de gráficos. |
| 6 | Componente Flutuante Este componente da IU é usado para exibir o componente flutuante. |
| 7 | Painel de guia Este componente de IU é usado para exibir a visualização do painel de guias. |
| 8 | Vista de navegação Este componente de IU é usado para exibir a visualização de navegação. |
| 9 | Menu de Ação Este componente de IU é usado para exibir a barra de menus de ação. |
| 10 | Exibição de dados Este componente de IU é usado para exibir a visualização de dados. |
| 11 | Mapa Este componente da IU é usado para exibir o mapa do google. |
O Sencha Touch vem com recursos de empacotamento nativos.
A seguir estão os links para conceitos de empacotamento nativo do Sencha Touch.
| Sr. Não. | Link de conceito e descrição |
|---|---|
| 1 | Provisionamento iOS nativo |
| 2 | APIs nativas |
Prática recomendada de JavaScript básico
É uma boa prática manter todo o código relacionado ao JavaScript em um separado js (external JS) arquivo, em vez de gravá-lo no <script> tag na seção de cabeçalho ou JavaScript embutido no corpo do documento.
Sempre execute uma verificação de nulos antes de o elemento ser usado em lógica posterior.
Sempre siga a convenção de nomenclatura, pois torna o código fácil de entender por qualquer outro programador.
Para tornar o código facilmente compreensível, é sempre preferível escrever comentários para métodos JS com lógica clara por trás do que uma função faz.
Melhor prática específica para Sencha Touch
Use a estrutura de pasta recomendada do Sencha Touch, que será útil durante a compactação ou minificação JS.
É altamente recomendável usar o ouvinte (onclick / onblur, etc.) no controlador em vez de escrevê-lo na própria página html.
Não crie a instância da loja, quando a loja está sendo chamada a partir da visualização.
Quando criamos uma instância de uma loja, devemos sempre destruí-la, pois afeta o desempenho.
Ao usar o Sencha Touch, não especifique nenhum outro arquivo JavaScript simples. Use todas as funções das classes Ext (mencionadas no controlador ou utils).
Quando o mapeamento do modelo e o nome são iguais, não especifique o mapeamento. Apenas o nome resolverá o propósito.
Não use propriedades desnecessárias à vista. Use apenas a propriedade necessária e seu valor diferente do valor padrão.