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:

1. Efetue o download da estrutura da Sencha. (Consulte Recursos)
2. 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.

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

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

• 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>

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

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

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

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

1. Selecione Available Packages no menu esquerdo.
2. Expanda o site rotulado https://dl-ssl.google.com/android/repository/repository.xml
   para revelar uma lista de pacotes disponíveis para instalação.
3. 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

1. Aceite a instalação clicando no botão Install na próxima janela.
2. 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.

1. Selecione Virtual Devices no menu esquerdo no AVD Manager e clique em New….
2. 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.

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

<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

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

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

<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

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

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>

<!-- 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"></script>

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

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.
• A
  Web development zone
  do developerWorks é especializada em artigos que cobrem diversas soluções baseada na Web.

Obter produtos e tecnologias

• Faça o download do
  Sencha 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.