Sencha Touch 2: Exemplo Página de Login

02/12/2013 | By | 14 Comments

Oi Pessoal,

Recebi alguns pedidos e sugestões de post para o blog que é fazer uma página de Login com Sencha Touch 2. E aqui estou escrevendo um post sobre isso! icon smile Sencha Touch 2: Exemplo Página de Login

Hoje então vou mostrar passo a passo como fazer uma página bem simples de login com Sencha Touch – para caso alguém queira usar de base. Não vou falar sobre autenticação, pois senão já entra em um assunto muito amplo e que vai depender da tecnologia usada no server side. Também não vou explicar muito a fundo, pois todos os conceitos abordei nos cursos de Ext JS 4 e Sencha Touch 2, então espero que tenha um conhecimento básico de certas coisas! icon smile Sencha Touch 2: Exemplo Página de Login

PS.: para quem já usa o Sencha Architect 3, deixo a dica que o SA3 já vem com um template para Login. O que vou mostrar hoje é um pouco diferente! icon smile Sencha Touch 2: Exemplo Página de Login

Views

O projeto consiste em 3 views: a página de login, uma página principal que está vazia (e é onde seria colocado o conteúdo da app) com um botão de logout, e um Viewport que vai ter a página de login e a página principal fazendo o wrapper da app.

Página de Login

A página de Login é apenas um Form Panel com os campos de usuário e senha, conforme screenshot abaixo:

senchatouch login 01 Sencha Touch 2: Exemplo Página de Login

Note que nas linhas 15 – 21 também temos uma Label hidden que é para mostrar alguma mensagem de erro como usuário e senha inválidos ou algo parecido.

E nas linhas 51 – 55 temos uma função que é para setar a mensagem de erro na Label que descrevemos acima.

Página Principal

A página Principal está vazia, mas seria aqui que colocaríamos o conteúdo da app. A página consiste de um Panel com uma Toolbar que contém um botão de Logout.

E apenas para não fica vazia, deixei um HTML bem basicão só para dizer que o usuário está logado! icon smile Sencha Touch 2: Exemplo Página de Login

A Página Principal fica assim:

senchatouch login 03 Sencha Touch 2: Exemplo Página de Login

E o código:

Viewport

O Viewport é apenas um container que irá juntar as duas views que já criamos e será o reponsável pela navegação da app. Para isso, vou usar o Card Layout, assim apenas uma view fica visível por vez.

No Card Layout, a primeira view é a view ativa por padrão, então quando o usuário carregar a app, a página de login será a view exibida e a view Main ficará escondida (só para o exemplo viu, isso não é coisa que se deva fazer em app que vai para produção icon smile Sencha Touch 2: Exemplo Página de Login ).

Controller

Ah, o Controller é aquele cara que vai ficar escutando os eventos disparados pelos componentes (views). Para esse exemplo estamos interessados em escutar dois eventos: quando o usuário fazer um tap no botão de Login ou quando fazer um tap no botão de logout (lembrando que o tap seria o click de apps desktop).

Código:

Vamos lá!

Linhas 5 – 17 : temos as refs, que são apelidos criados para nos ajudar a referenciar esses componentes no nosso código. Essas refs são similar a usar Ext.ComponentQuery.query(‘selector’)[0]. Por isso precisamos ter certeza de ter apenas 1 instância desses componentes no nosso código. Como selector usei o próprio alias de cada view.

Linhas 21 – 27 : aqui estamos escutando os eventos tap dos botões login e logout. Usei o itemId dos botões e para diminuir o escopo de busca do Sencha Touch, declarei também o componente (xtype/alias) que contém esses botões.

Linhas 30 – 50 : essa é a função que é executada quando o usuário faz um tap no botão Login. A idéia geral é verificar se o usuário e senha foram digitados pelo usuário (não estão vazios – pelo menos 1 char).

  • Linha 31 – obter a referência do Form
  • Linha 32 – com a referência do Form, pegamos a referência do campo Usuário
  • Linha 33 - com a referência do Form, pegamos a referência do campo Senha
  • Linha 34 - com a referência do Form, pegamos a referência da label para caso exista necessidade de exibir uma mensagem de erro
  • Linha 37 – escondemos da Label de erro – caso já tenha acontecido um erro em outra ocasião
  • Linhas 39 e 40 – obtemos o valor inputado de usuário e senha
  • Linhas 42 – apenas para fazer um charme, na hora de fazer o login temos um pequeno delay
  • Linha 49 – instanciamos o delay
  • Linhas 43, 45 e 46 – limpamos os campos de usuário e senha, e a label de erro
  • Linha 44 – chamada da função onSignInCommand passando o Form, e campos de usuário e senha como parâmetros

Linhas 60 – 76 : função que apenas valida se usuário e senha são válidos. Não estou fazendo nenhum verificação com o server, mas seria aqui que enviaria para o server para verificar as credenciais.

  • Linha 63 a 66: se usuário e senha estão em branco, atualizados a mensagem de erro e mostramos na tela e também saímos da função terminando a execução.

senchatouch login 02 Sencha Touch 2: Exemplo Página de Login

  • Linhas 68 a 71 – apenas uma graça mascarando a tela de login
  • Linhas 73 a 75 – Se usuário e senha não estão vazios, faz o login chamando a função signInSuccess

Linhas 78 – 86 : apenas troca a view ativa do Viewport pela View Main.

  • Linha 80 – obtém a referência do Form (poderíamos ter passado como parâmetro através da função anterior também)
  • Linha 81 – obtém a referência da View da página principal
  • Linha 82 – obtém a referência do Viewport
  • Linha 84 – remove a máscara que adicionamos nas linhas 68 a 71
  • Linha 85 – apenas troca a view ativa do ViewPort para a view principal fazendo uma animação para ficar bonitinho! icon smile Sencha Touch 2: Exemplo Página de Login

Linhas 52 – 58 : função que faz logout. Apenas coloca a view Login como view ativa do Viewport.

Download Código

O código está disponível no github: https://github.com/loiane/sencha-touch2-examples-architect/tree/master/SenchaTouchLogin

Até a próxima! icon smile Sencha Touch 2: Exemplo Página de Login

Filed in: Sencha Touch 2 | Tags: , ,

Comments (14)

  1. warleyalex

    Prezada Loiane,

    Fiz o download do código fonte do exemplo acima e depois criei um package com o Cordova 3.1 setado para a plataforma Android build Debug.
    O problema é que o arquivo apk compilado é “very huge”.

    SenchaTouchLogin-debug.apk –> 8143KB

    Uma dos fatores do tamanho do arquivo parece ser os arquivos de recursos:
    assets\www\res\screen\ —>7442KB

    Se eu remover recursos desnecessários e fazer o build “release” do mesmo app está na faixa dos incríveis 4150 KB. Tempo atrás, poderia-se gerar um build release na faixa do 600K.

    Sencha Team não manifesta a respeito.

    • Olá,
      Sim, vc precisa fazer o build de produção e depois empacotar essa build com o phonegap. O build de produção não passa de 2Mb. O resto é do phonegap mesmo.
      Mas essa é uma app muito pequena. Se a app fosse muito maior, não vai dar tanta diferença de tamanho assim. Portanto, uma app grande com sencha touch e phonegap deve fica por volta de 5Mb.

      • Isso não seria o mesmo que:

        a) cd / loiane // pois salvei o projeto no diretorio “loiane”; depois dei um
        b) sencha cordova init com.mycompany.myAppID SenchaTouchLogin
        c) confirmei “android” como target platform;
        d) sencha app build native //gerou o SenchaTouchLogin-debug.apk –> 8143KB

        Estou utilizando o Cordova 3.1 com ST 2.3 + WinXP.

        • Olha, eu não recomendo usar essa integração da Sencha com o Phonegap ainda viu. Isso não tem 1 mês direito que foi lançado e vc não sabe o que estão fazendo por trás.
          Recomendo fazer na mão mesmo.

  2. Olá Loiane, na comunicação com o server eu uso o jsonp, ou temos outra opção?

  3. Henrique

    Olá, Loiane desculpe minha dúvida sei que você deve ser muito ocupada. Mas gostaria de saber se você poderia continuar esse post da tela de login integrando com uma tabela simples de usuário em mysql com php para tirar minha dúvida de como fazer uma tela de login com php usando sencha touch.

  4. Henrique

    Olá, Loiane gostaria de elogiar sua dedicação em responder os comentários postados, é bom saber que você tem o coração aberto em ajudar!

  5. Henrique

    Olá Loiane. Bom minha questão é a seguinte eu consegui implementar o php na tela de login \o/\o/ porém quando eu tento empacotar para Android usando CMD do sencha apresenta um erro ai o que eu fiz dei um build utilizando o comando “sencha app build production” e envie para o phonegap build para empacotamento. Mas quando instalei no meu smartphone não funciona a conexão remota com php haaa eu utilizei sua dica do CORS localmente mesmo em production funciona mas empacotado com phonegap não funcioan. Estou utilizando o senha touch 2.3.1 e sencha command v4.1.45.

    • Oi Henrique.
      Coloque a url completa do seu smartphone para testar a url php. Tente pelo ip do seu computador, e tenha certeza de que está conectado na mesma rede.
      Acesse a url pelo browser do seu smartphone e veja se está funcionando.
      Em último caso, vc vai precisa fazer deploy do seu código php em algum domínio na internet pra conseguir acessar e testar.
      []s

  6. Henrique

    Olá Loiane sou eu outra vez! \o/ Tenho uma boa noticia, consegui que o meu aplicativo com tela de login funcionasse, porém não usei o Phonegap Build para empacotar a aplicação para androis, utilizei o sencha command mesmo mas tive que instalar todo o framework da Sencha em uma máquina virtual emulando Windows 7 para isso pois o meu MacBook não funcionou. Sempre que tendo o commando build native apresenta um erro e já baixei o SDK do Android atualizado para ver se resolvia mas nada. Em fim minha questão de hoje é após empacotar a aplicação para Android usando o sencha build native notei que o aplicativo ao executar no smartphone fica com uma espécie de toolbar no topo com o ícone do aplicativo e nome do mesmo nessa toolbar. Gostaria de saber como posso retirar isso, já procurei na documentação mas não encontrei anda. Haaaa sua postagem sobre “Entendendo o Ext.Ajax.request (Success X Failure)” está de parabéns foi muito útil para organizar meu código rsrsrs

    • Oi Henrique, a última versão do Sencha touch estava com um bug para empacotar para android, não vi se a sencha resolveu isso.
      Quanto ao nome da app no topo isso é da app nativa mesmo. Teria que empacotar com phonegap para retirar isso, pois isso é o código da sencha que gera quando empacota com o sencha cmd.
      []‘s

Deixe um comentário