quarta-feira, 3 de novembro de 2010

Obtendo a Resolução de Vídeo do Usuário

Simples, uma aplicação Web precisa ser apresentada no navegador do usuário, que é um programa complexo, cheio de recursos, mas diferente de um fabricante a outro, e para complicar ainda mais é importante que a informação que você quer apresentar se adapte a resolução do monitor de seu cliente.

Genexus facilita a vida porque praticamente resolve tudo sozinho na questão de incompatibilidade de navegadores, ficando poucas situações que de fato dependem de programação especial.

Este exemplo explora Javascript para descobrir a resolução de vídeo na máquina do usuário, e sua utilidade, não preciso nem mesmo explicar, não é!

Javascript

É uma linguagem que opera no navegador, de sintaxe simples e cheia de recursos que podem ser explorados para se produzir interfaces especiais.  Genexus não atrapalha nesse sentido, permitindo que se agregue funcionalidades em Javascript sem mistérios.

Esse exemplo explora o conceito de DOM do Javascript para devolver parâmetros para o Genexus, sendo que esses constituem a resolução de vídeo do usuário.  Não estou dizendo a dimensão da janela (maximizada, minimizada ou ajustada pelo usuário), mas a própria resolução de vídeo.  Se deseja as dimensões da janela também é simples, mas não vou explorar isso aqui.

Funcionamento

Ao executar uma operação de login no sistema, gravamos em sessão as dimensões da janela (width e height).  Todas as interfaces seguintes podem explorar esse recurso para dimensionar sua área.

Utilizamos o conceito de agregar no da página um evento onload que chama a função responsável por obter e armazenar as dimensões em duas variáveis Gx criadas no formulário.

Ao finalizar o processo, lë-se as variáveis e cria-se a sessão. Simples!.

Para isso criamos inicialmente um webpanel, com quatro variáveis: &usuário, &senha, &screenwidth e &screenheight, sendo as duas últimas mantidas ocultas do usuário
Sem segredos na criação das variáveis, a resolução pode ser Numeric(4) as demais não são importantes no exemplo.

Em seguida utilizamos um TextBlock para definir os comandos Javascript que tratam de obter a resolução da interface (linha 9 e 12, abaixo), e a programação do evento onload na tag da página (linha 5 a 13: função, linha 15: a inclusão no body).


Finalmente, ao se pressionar Entrar, a criação da sessão (linhas 20 e 21) , e o tratamento do login do usuário, (a partir da linha 24).


 O resultado
Ao se executar o programa, e ao se pressionar ENTER.


Ocorre a criação da sessão, e a mensagem de boas vindas apresentando a resolução obtida.


Você pode utilizar esse recurso para programar Javascript com Genexus, ou mesmo estendê-lo para obter uma estatística da resolução de seus usuários, com certeza te auxiliará na geração de interfaces adequadas ao seu público.

Agora, o pior é a resolução do meu vídeo 1366x768, fala sério, já viu isso? nem mesmo eu sabia .

8 comentários:

Anônimo disse...

Onde está o arquivo ".js" que tem de ser incluido?

Douglas Hamilton de Oliveira disse...

Caro,
Não é necessário incluir nenhum arquivo JS, pois o código é incluso diretamente via Gx no TextBlock1.
Ab

Douglas Hamilton de Oliveira disse...

Pessoal, uma pequena correção, pois testei recentemente e o Upper() nao funcionou direito, então se não mostrar nada tente:

document.forms[0].elements['"+trim(&screenheight.InternalName)+"'].value=screen.height;

Anônimo disse...

Douglas, e se eu queria utilziar um arquivo js pronto, onde ele deve estar salvo na pasta da KB? e como ele deve ser chamado dentro do código? Grato...

Douglas Hamilton de Oliveira disse...

Para incluir um JS voce deve:
1) colocar o arquivo js na raiz da aplicacao (pasta web)
2) no evento Start do objeto que utiliza essa biblioteca, por exemplo um WebPanel, deve incluir o comando:
Form.JScriptSrc.Add('arquivo.js')

ab

Anônimo disse...

Boa Tarde, Douglas, como ficaria esta tua explicação usando o fusioncharts com JS.

Anônimo disse...

Olá Douglas. Preciso integrar um Fusion Charts com a aplcaição usando JS. Segui o que você escreveu acima, mas não obtive êxito. Alguma dica?

Douglas Oliveira disse...

Não entendi sua pergunta, você está usando o user control Fusion Charts e não está funcionando, ou quer saber como incluir uma biblioteca externa Javascript na sua interface?