01 Desenvolvimento de Aplicativos Web

Transcrição

1 01 Desenvolvimento de Aplicativos Web Nos geradores Web da GeneXus X Evolution 2 foram trabalhadas as seguintes áreas: Segurança; Desempenho ou Performance; Prototipação na Nuvem somente com um clique, e Experiência de Usuário. Sempre agregando novas funcionalidades, ou melhorando as que já existem, para continuar evoluindo junto com as especificações e padrões que vão surgindo em cada área. Começando pela Segurança Para resolver os problemas de autenticação e autorização, tanto para aplicativos Web como para aplicativos Smart Devices com GeneXus, foi desenvolvido um módulo de Segurança que é integrado ao nosso aplicativo chamado GAM, GeneXus Access Manager. Para mais detalhes sobre o GAM, veja o vídeo...

2 Prototipação na Nuvem Conseguimos isto configurando a propriedade Deploy to Cloud com o valor Yes. Ao gerar o aplicativo são solicitadas as informações de GXtechnical para instalá-lo na nuvem. Normalmente, é utilizado o servidor na nuvem da Amazon, disponível especialmente para prototipar aplicativos GeneXus. Um dos pontos importantes que GeneXus X Evolution 2 oferece é a geração de aplicativos Web seguindo os padrões da W3C (o Consórcio World Wide Web), HTML5 e CSS3, o que torna possível obter páginas válidas segundo esses padrões. Isso é conseguido passando as páginas por uma ferramenta que indica se ela é ou não válida, segundo alguns critérios. Uma vez validada a página, pode-se utilizar nela o ícone de validade como um distintivo desta validação. Como conseguimos, com GeneXus, que os aplicativos Web aproveitem essas vantagens? Apenas configurando uma propriedade.

3 Para gerar o aplicativo utilizando HTLM5, deve-se configurar a propriedade no nível Environment HTML Document Type com o valor HTML5. Para as KBs novas, criadas com a versão GX X Evolution2, essa propriedade já vem originariamente com este valor, diferentemente das KBs convertidas de versões anteriores. Depois de configurar essa propriedade com o valor HTML5, todas as telas Web serão geradas aplicando esse padrão. Além dos pontos mencionados anteriormente, o código Web gerado aproveitará muitas das vantagens que este novo Padrão oferece. Veja alguns exemplos: Quanto ao desempenho do aplicativo, gera-se muito menos JScripts e HTML, o que reduz o tamanho das páginas geradas; Quanto à experiência de usuário: Permite a utilização de domínios semânticos; Melhora na visualização dos aplicativos Web executados em Smart Devices; Aproveita as vantagens traziadas por HTML5 e CSS3, graças ao novo Tema do GeneXus;

4 Melhora também a Integração entre os designers e desenvolvedores GeneXus, através da importação e exportação de CSS. Veja agora cada uma das vantagens em detalhe. Otimização do Tráfego HTML Como dito antes, foi reduzido substancialmente o tamanho das páginas geradas, o que resulta em uma importante melhora de performance. Isso, junto com Otimizações no lado do Servidor (em que foi implementada a Paginação de Grids e Data Sroviders no servidor de Banco de Dados), foi responsável por páginas menores e mais leves. Em nossos testes, verificamos uma redução de 25% no tamanho das páginas e, consequentemente, obteve-se uma execução 30% mais rápida.

5 Veja agora os temas relacionados com a Experiência de Usuário. O uso de HTML5 introduz um número de elementos novos, entre eles, a opção de usar Domínios Semânticos. Alguns domínios padrões de GeneXus possuem uma semântica especial que produzem certo comportamento nas campos baseados nestes domínios. Quais são, estes novos domínios semânticos? Address Geolocation URL Phone Veja como funcionam:

6 Trabalharemos com a parte Web de um aplicativo para imobiliária, na qual se definiu a Transação Property para registrar as propriedades de Venda ou Aluguel. Definimos os atributos PropertyAddress e PropertyGeolocation para mostrar o endereço e as coordenadas de geolocalização da Propriedade. Após aplicar o Pattern Work With à Transação, podemos executar o Work With Properties. Observe que o campo PropertyAddress tem automaticamente um link, que abre o Google Maps, indicando o endereço. De modo semelhante, funciona para os campos definidos como Geolocation.

7 Sobre o design do aplicativo Foi trabalhado muito em um novo Tema para GenXus, que aproveita as vantagens que oferecem HTML5 e CSS3. Além de aparecerem como novas propriedades nos Temas GeneXus, muitas das propriedades aparecem como Padrão em CSS3. Observe melhor no aplicativo esse novo Tema e suas vantagens. Note que o tema do aplicativo é o tema original de GeneXus X Evolution 2. Observe que o tema de origem é mais moderno, configurou-se ao nível do próprio tema pata que os links não apareçam sublinhados fora do grid (como, por exemplo, os links recentes e a sombra que aparece nos títulos). Ao entrar, por exemplo, em um dos registros em modo update, podemos ver os botões redondos, isso graças ao uso CSS3.

8 Essas funcionalidades podem ser vistas nos navegadores mais novos, por isso, uma dúvida que pode surgir é como funcionaria com os navegadores de versões antigas. Se não suportam CSS3 ou HTML5, seguirão vendo como antes, ou seja, nada de novo. Além disso, existe a possibilidade de Configurar o tema em runtime, utilizando a função SetTheme. As razões para oferecer mais de um Tema em um aplicativo Web são as necessidades de contemplar a variedade de gostos, de contemplar também as necessidades especiais, como por exemplo, pessoas mais velhas que podem precisar de letras com fontes maiores.

9 Também é possível em GeneXus acrescentar novas fontes e utilizálas como se fossem fontes regulares de GeneXus. Isso permite utilizar fontes mais criativas diretamente no aplicativo, onde antes deveriam utilizar imagens. Para adicionar uma nova fonte, deve-se abrir o Tema GeneXus X Evolution 2, clicar em Font com o botão direito e então em Add Font. Depois de adicionada, já pode usá-la como uma fonte padrão de GeneXus. É possível, por exemplo, atribuí-la a algum texto do aplicativo.

10 Nesse caso, muda-se o tipo de letra do título da Master Page, atribuindo-lhe a fonte recém adicionada.