Arquitetura do Expresso Lite

De Wiki Expresso V3
Ir para: navegação, pesquisa

O ExpressoBr Móvel, codinome Expresso Lite, é uma aplicação à parte do Expresso v3, consistindo de uma interface gráfica leve em HTML5 e jQuery que comunica-se, via PHP, com o back-end do Expresso v3.

A mesma interface é utilizada para desktop e dispositivos móveis, o rearranjo dos componentes em tela é feito através de CSS media queries seguindo o conceito de layout responsivo, onde os elementos presentes na tela se reposicionam e redimensionam de acordo com o dispositivo no qual a página está sendo exibida. Também é possível compilar o Expresso Lite como uma aplicação para smartphone.

Atualmente o Expresso Lite é composto pelos módulos email, addressbook, calendário e debug.

Conteúdo

Estrutura de diretórios

Dentro do diretório raiz do projeto, há três subdiretórios:

build Arquivos necessários à construção do aplicativo Cordova e geração do respectivo pacote.
src Código-fonte da aplicação Expresso Lite.
tests Testes automatizados da aplicação.

O diretório src é composto pelos seguintes subdiretórios:

addressbook Módulos de usuário que compõem a aplicação.
calendar
email
common-js Arquivos JavaScript comuns a outros módulos.
accessible Módulo acessibilidade.
api Arquivos PHP responsáveis pela comunicação direta com o Expresso v3.
img Imagens utilizadas pelos módulos.

Arquitetura de um módulo

Um módulo de usuário deve possuir um subdiretório próprio dentro do diretório src. O ponto de entrada para o módulo é sempre o arquivo index.html, que define a estrutura geral da página que será carregada. Como exemplo, um módulo genérico chamado "Meu módulo" estaria contido no diretório src/meuModulo, com os seguintes arquivos:

index.html Página base do módulo, primeiro arquivo a ser carregado.
meuModulo.js Código JavaScript principal do módulo.
meuModulo.css Estilos do módulo.

HTML do módulo

Exemplo de um arquivo index.html para nosso módulo genérico, com a página dividida em duas seções: uma para a coluna do lado esquerdo, e uma seção central:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1"/>
    <link rel="icon" type="image/png" href="../img/favicon.png"/>
    <link type="text/css" rel="stylesheet" href="../common-js/general.css"/>
    <link type="text/css" rel="stylesheet" href="meuModulo.css"/>
    <title>Meu módulo - ExpressoBr</title>
    <script src="../cordova.js"></script>
    <script src="../common-js/require.min.js" data-main="meuModulo.js"></script>
  </head>
  <body>
    <section id="secoes">
      <aside id="colunaEsquerda"></aside>
      <section id="centro"></section>
    </section>
  </body> 
</html>

JavaScript do módulo

A seguir, o arquivo principal de JavaScript para o módulo. As dependências JavaScript são gerenciadas pela biblioteca RequireJS, que é configurado no início do arquivo. A principal dependência é a biblioteca jQuery. São incluídos alguns módulos do common-js: o App (rotinas genérias da aplicação), o Layout (estrutura da página) e UrlStack (torna funcional o botão "Voltar" do browser). Eis o arquivo meuModulo.js:

require.config({
  baseUrl: '..',
  paths: { jquery: 'common-js/jquery.min' }
});
require(['jquery',
  'common-js/App',
  'common-js/Layout',
  'common-js/UrlStack'
],
function($, App, Layout, UrlStack) {
  App.Ready(function() {

    // código do módulo...

  });
}
});
Ferramentas pessoais
Espaços nominais

Variantes
Ações
Navegação
Ferramentas