quinta-feira, 23 de junho de 2011

Browser detect...

Aproveitando o embalo do Save As..., vamos avançar um pouco com Javascript + Genexus, desta vez detectando o navegador que o usuário está utilizando.

A operação de detecção do browser não é muito importante no Genexus, visto que a própria ferramenta já trata isso automaticamente.  Acontece que nossa curiosidade nos leva a programar outros recursos disponíveis diretamente em Javascript, e com isso, esbarramos na compatibilidade do navegador.

Javascript é a linguagem para programação no navegador, e entre seus recursos temos a classe Navigator, que apresenta informações a respeito do browser.  A tabela a seguir apresenta as informações retornadas por essa classe.

Opera
navigator.appCodeName:  Mozilla
navigator.appName: Opera
navigator.appVersion:  9.80 (Windows NT 6.1; U; en)
navigator.cookieEnabled:  true
navigator.platform: Win32
navigator.userAgent:  Opera/9.80 (Windows NT 6.1; U; en) Presto/2.8.131 Version/11.11
Chrome
Browser CodeName: Mozilla
Browser Name: Netscape
Browser Version: 5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.30 (KHTML, like Gecko) Chrome/12.0.742.100 Safari/534.30
Cookies Enabled: true
Platform: Win32
User-agent header: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.30 (KHTML, like Gecko) Chrome/12.0.742.100 Safari/534.30
Internet Explorer
Browser CodeName: Mozilla
Browser Name: Microsoft Internet Explorer
Browser Version: 5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; eMusic DLM/4; InfoPath.1; .NET4.0C; .NET4.0E)
Cookies Enabled: true
Platform: Win32
User-agent header: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; eMusic DLM/4; InfoPath.1; .NET4.0C; .NET4.0E)
Firefox
Browser CodeName: Mozilla
Browser Name: Netscape
Browser Version: 5.0 (Windows)
Cookies Enabled: true
Platform: Win32
User-agent header: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0.1) Gecko/20100101 Firefox/4.0.1

Para obter os valores é necessário programar o código a seguir no Genexus em um controle Textblock, marcado com a propriedade HTML.

Detectando o Navegador

O processo de detecção em Genexus envolve a obtenção do valor do navigator.appName e seu tratamento dentro da área de Events do painel. Em outras palavras, obter via Javascript o tipo de browser e passar para o Genexus tratar em sua área de código.

Para fazer isso, podemos programar, no Event Start um processo que carrega o tipo de navegador em uma variável, seria melhor colocar isso no Login do sistema, pois, desta forma teriamos o valor para futuras referencias dentro do sistema. Então, em nosso exemplo temos um WebPanel que realiza o login do usuário, e uma variável chamada &NavTipo que fica com visible=0;


Um Textblock (tipo HTML) é usado para programarmos o código em Javascript que intercepta o navegador.
Ao informar seu usuário e senha e em seguida pressionar-se o botão confirmar, o sistema devolverá o tipo de browser que o usuário está utilizando.

A programação Javascript + Genexus oferecem desafios bem interessantes e com certeza permite a construção de interfaces avançadas.  Se você não entendeu direito como funcionou a parte referente à gravação da variável Genexus, recomendo ler um pouco a respeito do Javascript DOM.

Boa programação!



3 comentários:

Anônimo disse...

I couldn't refrain from commenting. Very well written!

Here is my blog - Louis Vuitton Purses

Anônimo disse...

Hi! Quick question that's completely off topic. Do you know how to make your site mobile friendly? My weblog looks weird when browsing from my apple iphone. I'm trying to find a template or plugin that might be able to fix this problem.
If you have any suggestions, please share. Cheers!


Also visit my page: nysacpr.org

Anônimo disse...

Amazing blog! Do you have any suggestions for aspiring
writers? I'm hoping to start my own site soon but I'm a little lost
on everything. Would you suggest starting with a free platform like Wordpress or go for a
paid option? There are so many choices out there that I'm totally confused .. Any ideas? Kudos!

My website: Click This Link