Olá,

Realmente estou um pouco desapontado comigo mesmo, pois desde o último post se passou 3 anos… “Shame on you”… Mea culpa, minha vida mudou muito desde o último post, mudei de cidade, de emprego, enfim, nada justifica…

Voltando ao que interessa, gostaria de compartilhar com vocês uma solução bacana que utilizamos em um projeto que é o contador de tempo de sessão, bem parecido com aqueles cronômetros que existem em nossos internet bankings.

A solução basicamente é um mash up (uma mistura) de um User Controls e um objeto externo, ambos disponíveis no marketplace do GeneXus: Web.Config reader e SessionTime. A idéia é utilizar o user control Session Time, porém, ao invés de configurá-lo com um tempo fixo, obter o valor do tempo de sessão do web.config.

  1. A primeira coisa que precisa ser feita é o download e a instalação do U.C. e do objeto externo, caso necessite de ajuda nesse ponto, poderá encontrar a documentação aqui.
  2. O external object ConfigManager não necessita instalação, mas é necessário a importação dos objetos na sua KB, para isso, após efetuar o download, descompacte o arquivo webconfigreader.xpz para alguma pasta;
    • Vá no menu Knowledge Manager e selecione Import; Selecione o caminho onde foi posto o arquivo .xpz e selecione import.
    • Feito isso serão importados 1 External Object, 2 Files e 1 Webpanel de teste;
    • Se desejar, execute-a, para verificar se está tudo OK com o leitor de web.config:
    • Uma chave que pode ser lida sem problemas do web.config é a de nome DocumentType que por padrão está vindo com o valor HTML5.
  3. A seguir, necessitaremos incluir o user control em nossa masterpage, para que o mesmo fique sempre visível. eu recomendo adicioná-lo no cabeçalho da mesma: Sem títuloAo executar a aplicação podemos ver que agora existe um contador de sessão na masterpage:

    Sem título 2

    Também podemos notar 2 coisas:

    1. O tempo de sessão está sendo definido de forma manual, isso é, está sendo configurado diretamente no user control, ao invés de ser obtido do tempo de sessão real que o IIS nos oferece;
    2. O Layout está um pouco grande demais.
  4. Para corrigir o problema da integração com o IIS é que instalamos o external object Webconfig Reader, ele que será encarregado de obter o valor do tempo de sessão configurado na nossa aplicação. Para fazer isso, basta adicionar a seguinte linha no evento start da página onde está posicionado seu user control de tempo de sessão, no nosso caso, está na própria masterpage:
    ControlSessao1.Minutes = ConfigManager.getSessionStateTimeOut()
    
    Onde ControlSessao1 é o nome do controle utilizado na tela.
  5. Para ajustar o layout necessitaremos de um pouco de conhecimento em CSS, mas não é nada muito difícil: Todo user control é “renderizado” em tempo de execução, ou seja, no objeto gerado será feita uma referência ao código que deverá ser inserido no html, essa inserção será feita em tempo de execução. Logo, para alterar alguns detalhes do user control, basta editar o arquivo que está sendo referenciado, nesse caso se chama ControlSessaoRender.js e está na subpasta de nome ControlSessao, dentro da pasta Web de nossa aplicação.Uma maneira rápida é utilizar a configuração da fonte para que seja definida uma classe, ao invés do tipo de letra. Para isso, basta substituir a linha 40 do arquivo, onde diz:
    var buffer = '<a id="Sessao" href="#"><font face="' + this.FontFace + '" color="' +  this.FontColor + '" size="' + this.FontSize + '">'+ relogio + '</font></a>';

    por isso:

    var buffer = '<a id="Sessao" href="#"><font class="' + this.FontFace + '">'+ relogio + '</font></a>';

    O que estamos fazendo aqui é utilizando a propriedade FontFace do user control para que ao invés de configurar o tipo de letra, seja configurado a classe CSS a qual se deseja utilizar para esse texto.

    Também necessitaremos colocar o código a seguir, logo abaixo da linha que inserimos no evento start no item anterior:

    ControlSessao1.FontFace=ThemeClass:Label

    O que está acontecendo aqui é que estou dizendo que a fonte do controle de sessão agora receberá o nome da classe “Label”, notar que essa notação faz com que a classe passe a ter integridade referencial, ou seja, ao tentar remover a classe “Label” do meu objeto tema, ocorrerá um erro dizendo que ela está sendo referenciada. Nesse exemplo também poderia ser utilizado o código:

    ControlSessao1.FontFace="Label"

    Porém perderemos a integridade e caso essa classe fosse removida, nosso user control aparecerá desconfigurado.

    Assim, veremos agora como ficou nossa página:

    Sem título 3

  6. Como etapa opcional, complemento dizendo que ainda é possível melhorar um pouco mais, assim como no item anterior editamos somente a classe do texto, podemos editar o próprio texto, de forma que fique um pouco mais intuitivo, na linha 39 do mesmo arquivo ControlSessaoRender.js, temos o texto que está sendo utilizado:
    var relogio = this.tempo.getMinutes() + " Minutos : " + this.tempo.getSeconds() + " Segundos."

    Podemos, por exemplo, alterá-lo para:

    var relogio = “Tempo restante: “+ this.tempo.getMinutes() + ” min.  e ” + this.tempo.getSeconds() + ” seg.”

    O bacana é que a alteração do arquivo .JS é refletida automaticamente, basta recarregar a página que o texto aparece alterado.

    Finalmente, nossa página ficou assim:
    Sem título 4

 

Espero ter contribuído de alguma forma, qualquer dúvida ou problema que tiverem podem me deixar uma mensagem aqui embaixo, respondo ASAP.

Um abraço e até a próxima.

 

Anúncios

Um comentário sobre “Criando um contador de tempo de sessão em aplicativo web

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s