Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
No mundo do desenvolvimento de software, duas tendências estão se tornando cada vez mais importantes: o desenvolvimento de aplicativos remotos e o desenvolvimento da Web HTML5 baseado em padrões. A curva de aprendizagem para ambos os tipos de desenvolvimento pode ser bastante íngreme.
O desenvolvimento de um aplicativo remoto nativo frequentemente requer conhecimento de plataformas e qualificações específicas, como Objective-C para iPhone e Java para Android (e essas são apenas duas plataformas).
O desenvolvimento HTML5 tornou-se mais popular recentemente porque é baseado em padrões. Apesar dos fornecedores trabalharem rapidamente para incorporar e entrar em conformidade com essas especificações iniciais, o HTML5 ainda é um tanto imaturo.
O release recente do Sencha Touch 1.0 une os mundos de vanguarda do desenvolvimento de aplicativos remotos com o desenvolvimento da Web HTML5 para formar uma estrutura simples e acessível para desenvolver aplicativos da Web remotos. Neste artigo, aprenda tudo o que precisará saber para começar a trabalhar com a estrutura Sencha Touch.
Sencha Touch
Aprender a desenvolver aplicativos remotos - especialmente da perspectiva do desenvolvedor da Web - pode ser complicado. Uma grande variedade de plataformas para escolher e tecnologias para aprender estão disponíveis.
O suporte ao HTML5, apesar de estar ganhando força, ainda não está totalmente pronto para ser usado em aplicativos da Web complexos, particularmente em aplicativos de linha de negócios.
O Sencha Touch combina as ricas plataformas de HTML5 e desenvolvimento de aplicativo da Web remoto para atingir um bom equilíbrio. A estrutura é ideal para desenvolvedores e seu uso é similar ao da estrutura Ext JS JavaScript.
Se você tiver experiência média ou avançada com JavaScript, o Sencha Touch é acessível. Se já tiver qualificações como desenvolvedor de JavaScript e CSS, o Sencha Touch pode transformá-lo imediatamente em um desenvolver de aplicativo remoto.
A Sencha é uma empresa com uma oferta central de produto comercial, mas também oferece suporte a software livre. O Sencha Touch 1.0 é gratuito tanto para o uso pessoal quanto para o comercial.
Abreviaturas usadas frequentemente
Ajax: Asynchronous JavaScript + XML
API: application programming interface
CSS: Cascading Style Sheets
HTML: Hypertext Markup Language
JSON: JavaScript Object Notation
SDK: software development kit
UI: user interface
Suporte de plataforma
O Sencha Touch é suportado atualmente em navegadores WebKit, incluindo as populares plataformas Apple iOS e Google Android. É possível que alguns argumentem que esse suporte não é suficiente - que todas as plataformas devem ser suportadas para que o Sencha Touch seja levado a sério.
Ao adotar uma estrutura na área de desenvolvimento da Web remoto, é sensato procurar duas coisas: riqueza de plataforma e riqueza de recursos. É desejável ter uma estrutura que abstrai o máximo do HTML5/CSS3 em uma forma simples de usar para o desenvolvedor, e que possui um grande alcance.
Nesse sentido, a Sencha é perspicaz ao oferecer suporte às duas plataformas mais populares, e usar seus recursos para fornecer recursos ricos e fáceis de usar para desenvolvedores.
O que você precisa saber
Para começar a usar o Sencha Touch, tudo o que você precisa é um conhecimento prático da linguagem JavaScript e CSS. Como mencionado, a estrutura abstrai muitos dos recursos e estilos que normalmente seriam montados da estaca zero.
Se deseja explorar mais adiante, e talvez desenvolver seus próprios componentes customizados ou modificar estilos para sua própria marca, você precisa de qualificações mais aprofundadas em HTML5 e CSS3. Para obter mais informações, consulte a seção Recursos.
Introdução
Para começar a trabalhar com o Sencha Touch:
Figura 1. Exemplos do Sencha Touch
/applications/core/interface/imageproxy/imageproxy.php?img=http://conteudo.imasters.com.br/20741/36386.jpg&key=18fa25f9d9032c844fc013f94ef0ae022483dfa1a8815e39b0293f71bd79feb3" alt="36386.jpg" />
Explore alguns dos recursos da estrutura através do desenvolvimento de um aplicativo Sencha Touch.
<!DOCTYPE HTML>
<html>
<head>
<title>Touch Test</title>
</head>
<body>
</body>
</html>Uma vez que tenha criado esse arquivo, você é oficialmente um desenvolvedor HTML5. O doctype *<!DOCTYPE HTML>* na parte superior é a chave; ele garante que o documento seja interpretado como HTML5.<!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" />
<!-- sencha touch javascript -->
<script type="text/javascript" src="sencha-touch/sencha-touch-debug.js"></script>
</head>
<body>
</body>
</html>O código acima inclui os arquivos CSS e JavaScript para a estrutura Sencha Touch. Você vinculou as versões de depuração desses arquivos, o que é recomendado para fins de desenvolvimento porque elas geram mensagens de erro melhores.Para implementar, simplesmente substitua as versões de depuração pelas versões reduzidas. Também é possível incluir seu próprio arquivo CSS customizado e um arquivo de JavaScript para desenvolver seu aplicativo.
<!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" />
<!-- sencha touch javascript -->
<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,
html: "Sencha Touch is ready!"
});
}
});
</script>
</head>
<body>
</body>
</html>/applications/core/interface/imageproxy/imageproxy.php?img=http://conteudo.imasters.com.br/20741/36387.jpg&key=cb0659c4bc6199379e9ab33a6de7249f366adb1db0fa4a4d3b0285cf26a8ec84" alt="36387.jpg" />
O código na Listagem 3 apresenta um bloco de código JavaScript que você reutilizará ao longo deste artigo para explorar os recursos da estrutura. Se você já usou o Ext JS, esse código pode parecer familiar.
A função Ext.setup é o ponto de partida para seus aplicativos do Sencha Touch. Ela aceita um objeto com diversas opções de configuração. O exemplo usa a opção onReady, que pega uma função e avalia quando o documento está pronto ready.
A função onReady cria o painel raiz do aplicativo. O painel raiz ocupa todo o espaço disponível e contém apenas uma cadeia de caractere simples usando as opções fullscreen e opções html, respectivamente.
Ext.setup
Várias outras opções de configuração úteis para a função Ext.setup estão disponíveis. Consulte os documentos de API, encontrados na pasta de documentos da sua instalação do Sencha Touch, para obter mais detalhes.
Executando aplicativos em um emulador do Android
Até agora você usou o navegador Google Chrome durante o trabalho de desenvolvimento.É uma boa abordagem, principalmente ao tentar lidar com erros de JavaScript e CSS. Use um emulador de dispositivo para começar o teste de aplicativo. Esta seção mostra como instalar um emulador do Android.
Figura 3. Android SDK e AVD Manager
/applications/core/interface/imageproxy/imageproxy.php?img=http://conteudo.imasters.com.br/20741/36389.jpg&key=79b9f8861deb3927509059134c62c1327c65c97e594e6505de83fe87fe6449ee" alt="36389.jpg" />
Nesta altura, se você tenta criar um novo dispositivo virtual usando o botão New?, observe um campo importante rotulado Target, que está desativado. Antes de poder criar um novo dispositivo virtual, faça o download de um complemento para o SDK.
Figura 4. Pacotes disponíveis para o Android SDK
/applications/core/interface/imageproxy/imageproxy.php?img=http://conteudo.imasters.com.br/20741/36391.jpg&key=86c0d1f2bda9704b9be635e0cc0fcc458f268d955ad02fa7bec175acd1b229a2" alt="36391.jpg" />
Você acabou de instalar um destino potencial para todos AVDs que deseja criar. Este destino é um dispositivo Android executando a versão 2.2. A próxima etapa é criar o AVD.
Tudo que você precisa para executar um emulador está agora em seu ambiente de desenvolvimento local. Para executar o emulador: abra uma janela de terminal, mude os diretórios para a raiz da sua instalação do Android SDK e insira o comando na Listagem 4.
Listagem 4. Chamando o emulador do Android
tools/emulator -avd sencha-avdÉ possível usar o navegador da Web no emulador Android para navegar até seu aplicativo teste em http://localhost/, mas receberá um grande 404. Isso ocorre porque fazer referência ao localhost ou 127.0.0.1 no emulador é feito, na verdade, dentro do contexto do próprio emulador.
Para fazer referência ao seu ambiente de desenvolvimento local, use o endereço 10.0.2.2, que resulta na tela mostrada na Figura 5.
Figura 5. Exemplo sendo executado em um emulador Android
/applications/core/interface/imageproxy/imageproxy.php?img=http://conteudo.imasters.com.br/20741/36393.jpg&key=62710edd549bbe5056278413453049505af6d2dc79014d4ae5bc3e1a0ee767ee" alt="36393.jpg" />
Um tour dos componentes de interface do Sencha Touch
Agora que você sabe o básico, esta seção oferece um tour de alguns dos componentes de UI do Sencha Touch.
Botões
É possível criar vários estilos de botão usando apenas algumas opções de configuração. O código na Listagem 5 cria uma coleção empilhada verticalmente de todos os botões disponíveis.
O aplicativo de exemplo é expandido para incluir um array de itens para serem adicionados ao painel raiz - neste caso, um único painel com uma coleção de botões organizada em pilhas verticais.
Os botões têm o estilo baseado na opção de configuração ui. Os tipos de botão suportados são normal, back, round, action e forward.
Listagem 5. Botões
<script type="text/javascript">
Ext.setup( {
onReady: function() {
// create the root panel
new Ext.Panel({
fullscreen: true,
items: [
// add a panel to the root panel
// this will contain a vertical layout of buttons
{
xtype: "panel",
layout: "vbox",
items: [
{
xtype: "button",
ui: "normal",
text: "Normal"
},
{
xtype: "button",
ui: "back",
text: "Back"
},
{
xtype: "button",
ui: "round",
text: "Round"
},
{
xtype: "button",
ui: "action",
text: "Action"
},
{
xtype: "button",
ui: "forward",
text: "Forward"
}
]
}
]
});
}
});
</script>A Figura 6 mostra o resultado.Figura 6. Estilos de botão disponíveis no Sencha Touch
/applications/core/interface/imageproxy/imageproxy.php?img=http://conteudo.imasters.com.br/20741/36394.jpg&key=8f5edfa0e9618fa3c692ee24c523e86f0b79dff7baf3801982a4e91b69c559af" alt="36394.jpg" />
Formulários
O conjunto de formulários possui o conteúdo esperado e mais. Fica claro que as funções específicas ao HTML5 estão sendo manipuladas e incorporadas.
Há suporte disponível para tipos de campo (como e-mail, endereços da Web e selecionadores de dadas) e atributos (como texto provisório) em HTML5; o Sencha Touch apenas facilita seu uso. A Listagem 6 mostra alguns desses recursos.
Listagem 6. Amostragem de controles de formulários
<script type="text/javascript">
Ext.setup( {
onReady: function() {
// create the root panel
new Ext.Panel({
fullscreen: true,
items: [
// add a panel to the root panel
{
xtype: "form",
items: [
{
xtype: "textfield",
name: "name",
label: "Name",
placeHolder: "your name here"
},
{
xtype: "emailfield",
name: "email",
label: "Email",
placeHolder: "you@example.com"
},
{
xtype: "urlfield",
name: "url",
label: "Url",
placeHolder: "[http://www.example.com"](http://www.example.com)
},
{
xtype: "datepickerfield",
name: "date",
label: "Date",
picker: { yearFrom: 2010 }
}
]
}
]
});
}
});
</script>Executar o código na Listagem 6 deve resultar em uma tela similar à Figura 7. O campo Date está focado, revelando um controle selecionador de datas na parte inferior.Figura 7. Amostragem de campos de formulários disponíveis
/applications/core/interface/imageproxy/imageproxy.php?img=http://conteudo.imasters.com.br/20741/36396.jpg&key=d54ad8b860ff093323557e3a09ba2f04a0f270d7931289cdf790a0675093dbd1" alt="36396.jpg" />
Listas
Ao desenvolver aplicativos da Web remotos, você está trabalhando com recursos limitados. O suporte para componentes de UI baseados em lista se torna importante.
O Sencha Touch é equipado com suporte para vários tipos de listas, incluindo simples, agrupado e aninhado. A Figura 8, que foi tirada da demonstração Kitchen Sink no download da estrutura, demonstra uma lista agrupada. A pilha vertical de letras à direita da lista expõe um método útil para pular para partes específicas da lista.
Figura 8. Uma lista agrupada da demonstração Kitchen Sink
/applications/core/interface/imageproxy/imageproxy.php?img=http://conteudo.imasters.com.br/20741/36397.jpg&key=398d75b497d1a11b2914d9975b76a3263b9b88ecefbcf9e98e1392543bcf4311" alt="36397.jpg" />
Ícones e barras de ferramentas
O Sencha Touch é vendido com um repositório impressionante de ícones integrados e prontos para o uso. Tudo o que você precisa fazer é especificar a cadeia de caractere que representa uma classe CSS para o ícone que deseja.
A Listagem 7 mostra como desenvolver duas barras de ferramentas: uma na parte superior do painel raiz, e outra na parte inferior. Cada barra de ferramentas está configurada com uma pequena amostra dos ícones disponíveis como padrão.
Muito mais ícones estão disponíveis. Confira os documentos e exemplos da API para obter mais informações.
Listagem 7. Ícones em barras de ferramentas
<script type="text/javascript">
Ext.setup( {
onReady: function() {
// create the root panel
new Ext.Panel({
fullscreen: true,
dockedItems: [
{
xtype: "toolbar",
dock: "top",
items: [
{
iconMask: true,
ui: "plain",
iconCls: "add"
},
{
iconMask: true,
ui: "plain",
iconCls: "delete"
},
{
iconMask: true,
ui: "plain",
iconCls: "star"
},
{
iconMask: true,
ui: "plain",
iconCls: "home"
}
]
},
{
xtype: "toolbar",
dock: "bottom",
items: [
{
iconMask: true,
iconCls: "download"
},
{
iconMask: true,
iconCls: "favorites"
},
{
iconMask: true,
iconCls: "search"
},
{
iconMask: true,
iconCls: "user"
}
]
}
]
});
}
});
</script>Depois de executar o código da Listagem 7, você deve ver uma tela similar à Figura 9.Figura 9. Amostragem de ícones e estilos
/applications/core/interface/imageproxy/imageproxy.php?img=http://conteudo.imasters.com.br/20741/36398.jpg&key=26079af7e9a965896064f08cdf2db17506a1ad74bc69f2d2a04fd11722a69ace" alt="36398.jpg" />
Exibições de carrossel e guias
As exibições de carrossel e guias são fáceis de implementar usando os padrões de codificação que você já explorou. A Listagem 8 mostra uma interface em guias e uma exibição de carrossel.
Listagem 8. Desenvolvendo exibições de carrossel e guias
<script type="text/javascript">
Ext.setup( {
onReady: function() {
// create the root panel
new Ext.TabPanel({
fullscreen: true,
items: [
{
title: "Tab 1",
html: "First tab"
},
{
title: "Tab 2",
html: "Second tab"
},
{
title: "Tab 3",
html: "Third tab"
}
]
});
}
});
</script>
<script type="text/javascript">
Ext.setup( {
onReady: function() {
// create the root panel
new Ext.Carousel({
fullscreen: true,
items: [
{
html: "First item"
},
{
html: "Second item"
},
{
html: "Third item"
}
]
});
}
});
</script>As exibições em carrossel e guias são similares quanto ao código e função. O carrossel se move de cartão a cartão através da execução de um gesto deslizante de um lado para o outro, ou clicando em dos ícones circulares na parte inferior. Por padrão, ambos os controles fazem a transição entre cartões usando a animação deslizante.A Figura 10 mostra a interface de guias.
Figura 10. Interface de guias de amostra
/applications/core/interface/imageproxy/imageproxy.php?img=http://conteudo.imasters.com.br/20741/36400.jpg&key=072373ed887b597a132aa11d834931929067f9c49997e2f0b30604958bd5ff46" alt="36400.jpg" />
A Figura 11 mostra a interface da exibição de carrossel.
Figura 11. Interface de exibição de carrossel de amostra
/applications/core/interface/imageproxy/imageproxy.php?img=http://conteudo.imasters.com.br/20741/36401.jpg&key=d85b70fcebd63858cfcca5e4ca19c27229645fc037b1b07b2c99e0617badc493" alt="36401.jpg" />
Sobreposições
É possível usar vários controles de sobreposição. Suas opções incluem controles de alerta padrão, confirmação e prompt, assim como controles modais simples.
Mapas
No desenvolvimento da Web remoto, um dos componentes mais populares são os mapas.O Sencha Touch faz com que seja simples incluir um mapa no seu aplicativo usando o componente Ext.Map.
A Listagem 9 mostra como incluir um mapa no aplicativo de amostra. Lembre-se de incluir o arquivo JavaScript para a API do Google Maps para que este exemplo funcione.
Listagem 9. Usando mapas
<!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="http://maps.google.com/maps/api/js?sensor=true">
<!-- sencha touch javascript -->
<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>A janela de mapa resultante é mostrada na Figura 12.Figura 12. Controle de mapa de exemplo
/applications/core/interface/imageproxy/imageproxy.php?img=http://conteudo.imasters.com.br/20741/36402.jpg&key=b75fa7446275a5d323f7130b5ea2c59ac7e6040c56899e0970dafc5931a5f765" alt="36402.jpg" />
Eventos e acesso de dados
O Sencha Touch oferece suporte para vários eventos-chave esperados de um aplicativo remoto, como início/fim de toque, início/fim de rolagem, toque, toque duplo, passagem de dedos e gesto de aperto. O acesso de dados parecerá familiar se já tiver trabalhado com o Ext JS no passado.
A estrutura do Sencha Touch oferece suporte a JSON com preenchimento (JSONP), Yahoo! query language (YQL) e solicitações Ajax. Em conjunto com o pacote de dados do Sencha Touch, eles oferecem um mecanismo flexível para vincular dados aos seus componentes de UI.
Estilo e design
Criar seu próprio tema pode ser uma tarefa difícil. A estrutura Sencha Touch possui recursos-chave que faz com que seja muito mais fácil modificar os estilos e design padrão.
A estrutura usa Syntactically Awesome Stylesheets (Sass), que é uma extensão de CSS3 que, entre outras coisas, permite o uso de variáveis e herança de seletor para dar mais poder ao desenvolvimento de temas. Mudar uma única variável pode causar impacto no tema inteiro - e é mesmo fácil assim.
Criar um novo tema está fora do escopo deste artigo. A seção Recursos possui diversos links para ajudá-lo a começar.
Conclusão
Este artigo ofereceu uma introdução ao Sencha Touch, uma estrutura de aplicativo da Web remoto desenvolvida usando HTML5, CSS3 e JavaScript. Você aprendeu como criar um aplicativo simples do Sencha Touch, além de testá-lo com o emulador de dispositivos. Você também explorou alguns dos elementos de UI.
Este artigo é apenas uma introdução à estrutura do Sencha Touch. Agora que você sabe o básico, cogite se aprofundar nos conceitos usando os Recursos abaixo.
Recursos
Aprender
Obter produtos e tecnologias
Discutir
***
artigo publicado originalmente no developerWorks Brasil, por Brice Mason
*Brice Mason** é marido e pai no interior do Estado de Nova York. Ele também é desenvolvedor na EQUIP For Quality, onde trabalha em uma equipe desenvolvendo a próxima geração de software de analítica de saúde para o segmento de mercado de assistência a longo prazo. Ele mantém um site pessoal.*
Carregando comentários...