[Resolvido] Desenvolva aplicativos remotos da web com o Sencha Touch

RSS iMasters · Maio 11, 2011

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:

Efetue o download da estrutura da Sencha. (Consulte Recursos)
Extraia os conteúdos da raiz do seu Web site de desenvolvimento. Cogite renomear a pasta extraída para um nome genérico, como sencha-touch, para que você possa usar esse mesmo nome de folder para versões futuras da estrutura sem atualizar outros arquivos que fazem referência a ele.
Usando um navegador WebKit, como o Google Chrome, abra a página de exemplos em http://localhost/sencha-touch/examples/. Apesar de seu ambiente poder ter uma aparência ligeiramente diferente, você deve ver uma tela similar à Figura 1.

Figura 1. Exemplos do Sencha Touch

Explore alguns dos recursos da estrutura através do desenvolvimento de um aplicativo Sencha Touch.

Crie um novo arquivo HTML chamado index.html na raiz do seu site com o código de origem da Listagem 1.

Listagem 1. Documento HTML5 de amostra

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

Modifique o código da Listagem 1 como mostrado na Listagem 2.

Listagem 2. Instalando scripts e estilos do Sencha Touch

<!DOCTYPE HTML>

<html>

<head>

<title>Touch Test</title>

href="sencha-touch/resources/css/sencha-touch-debug.css" />

</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.

Para manter o exemplo simples, inclua algum código JavaScript integrado.Comece modificando seu código para que se pareça com a Listagem 3.

Listagem 3. O aplicativo Sencha Touch mais simples

<!DOCTYPE HTML>

<html>

<head>

<title>Touch Test</title>

href="sencha-touch/resources/css/sencha-touch-debug.css" />

Ext.setup( {

onReady: function() {

// create the root panel

new Ext.Panel({

fullscreen: true,

html: "Sencha Touch is ready!"

});

}

});

</script>

</head>

<body>

</body>

</html>

Execute a página no Google Chrome, e você deverá ver algo parecido com a Figura 2.

Figura 2. O aplicativo mais simples do Sencha Touch

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.

Faça o download do Android SDK mais recente para sua plataforma de sistema operacional e o extraia para o disco. O SDK inclui todos os utilitários necessários para instalar e executar um emulador, mas são necessárias algumas etapas adicionais.
Os emuladores do Android exigem que você crie um Android Virtual Device (AVD), que é basicamente um conjunto de opções de configuração que modela um dispositivo real desenvolvido com Android. Para criar um AVD, execute o utilitário android na pasta de ferramentas do Android SDK. O Android SDK e o AVD Manager devem se abrir e serem parecidos com a Figura 3.

Figura 3. Android SDK e AVD Manager

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.

Selecione Available Packages no menu esquerdo.
Expanda o site rotulado https://dl-ssl.google.com/android/repository/repository.xmlpara revelar uma lista de pacotes disponíveis para instalação.
Selecione a plataforma SDK mais recente, como mostrado na Figura 4, e a seguir clique em Instalar Selecionados.

Figura 4. Pacotes disponíveis para o Android SDK

Aceite a instalação clicando no botão Install na próxima janela.
Quando o download e a instalação forem concluídos, clique em Close.

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.

Selecione Virtual Devices no menu esquerdo no AVD Manager e clique em New?.
Digite sencha-avd para o Nome e selecione o destino do Android 2.2 que você acabou de instalar como Target.Deixe todos os outros padrões.
Clique em Create AVD. Clique em OK na janela de confirmação e então feche o AVD Manager.

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

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

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",

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

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

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",

label: "Name",

placeHolder: "your name here"

},

{

xtype: "emailfield",

label: "Email",

placeHolder: "you@example.com"

},

{

xtype: "urlfield",

label: "Url",

placeHolder: "http://www.example.com"

},

{

xtype: "datepickerfield",

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

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

Í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

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

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

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>

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

A Figura 11 mostra a interface da exibição de carrossel.

Figura 11. Interface de exibição de carrossel de amostra

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>

href="sencha-touch/resources/css/sencha-touch-debug.css" />

src="http://maps.google.com/maps/api/js?sensor=true"></script>

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

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

Saiba tudo sobre o Sencha: leia documentos de API, confira o blog, explore os fóruns, faça download de demos e muito mais.
Leia "Dive into HTML5", de Mark Pilgrim, para fazer uma arrancada no desenvolvimento HTML5.
Saiba mais sobre o Android. O Android Dev Guide possui informações de referência e instruções passo a passo para tarefas comuns.
AWeb development zonedo developerWorks é especializada em artigos que cobrem diversas soluções baseada na Web.

Obter produtos e tecnologias

Faça o download doSencha Touch.
Faça o download da versão mais recente do navegadorGoogle Chrome .
Obtenha o mais recente SDK do Android.
Faça download e saiba mais sobre Sass.

Discutir

Crie seu perfil do My developerWorks hoje e configure uma lista de acompanhamento sobre o desenvolvimento de aplicativos remotos. Conecte-se e fique conectado com a comunidade do developerWorks.
Encontre outros membros do developerWorks interessados no desenvolvimento da Web.
Roland Barcia fala sobre Web 2.0 e middleware em seu blog.
Siga os indicadores compartilhados sobre os tópicos da Web dos membros do developerWorks.
Obtenha respostas rapidamente: Visite o fórum Web 2.0 Apps.
Obtenha respostas rapidamente: Visite o fórum Ajax.

***

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.

http://imasters.com.br/artigo/20741/framework/desenvolva-aplicativos-remotos-da-web-com-o-sencha-touch