Arquivo

Textos com Etiquetas ‘Programação Orientada a Objetos’

Um objeto JavaScript para confirmar se o usuário quer sair da página

29 de novembro de 2010

Existe algumas situações que é interessante confirmar se usuário realmente quer deixar a página atual. O usuário pode sair acidentalmente sem salvar o que está editando ou quando o fluxo de edição de conteúdo da página é complexo que pode induzir o usuário a não salvar no final.

Por exemplo, no WordPress que uso nesse blog aparece uma confirmação se eu tento sair da página de edição de post sem ter salvo antes:

Clique na imagem para ampliá-la

Clique na imagem para ampliá-la

O segredo é configurar o evento onbeforeunload do objeto window com uma função que retorna o texto da confirmação:

<html>
<head>
  <script>
    window.onbeforeunload = function() {
      return "Minha mensagem de confirmação.";
    }
  </script>
</head>
<body>

</body>
</html>

Abordagem procedural

O ideal é podermos configurar se a mensagem de confirmação irá aparecer ou não, conforme as ações do usuário na página. Vamos criar uma variável que servirá como condição se a mensagem de confirmação será exibida.

<html>
<head>
  <script>
    var needToConfirm = false;

    window.onbeforeunload = function() {
      if (needToConfirm) {
        return "Minha mensagem de confirmação.";
      }
    }
  </script>
</head>
<body>
  <form onsubmit="needToConfirm = false;">
    <p><input type="text" onchange="needToConfirm = true;" /></p>
    <p><input type="submit" /></p>
  </form>
</body>
</html>

O código acima exemplifica a ativação e a desativação da exibição da mensagem de confirmação na saída da página em um formulário. Toda a vez que o valor do campo texto for alterado (linha 15), a variável needToConfirm é configurada para true. Já na submissão do formulário (linha 14) a confirmação é desativa.

Usando orientação a objetos

Agora vamos extrair essa funcionalidade para uma objeto JavaScript, salvando o código em um arquivo .js.

function ExitPageConfirmer(message) {
  this.message = message;
  this.needToConfirm = false;

  var myself = this;

  window.onbeforeunload = function() {
     if (myself.needToConfirm) {
       return myself.message;
     }
   }
}

O objeto ExitPageConfirmer recebe como parâmetro no seu construtor a mensagem de confirmação. Por padrão, a necessidade de exibir a confirmação é configurada para false. Veja um exemplo de sua utilização:

var exitPage = new ExitPageConfirmer("Minha mensagem de confirmação.");

E quando quiser ativar a exibição da mensagem de confirmação:

exitPage.needToConfirm = true;

Vamos utilizar nosso confirmador de saída de página no formulário HTML do exemplo anterior:

<html>
<head>
  <script src="scripts/Prodis.ExitPageConfirmer.js"></script>
  <script>
    var exitPage = new ExitPageConfirmer("Minha mensagem de confirmação.");
  </script>
</head>
<body>
  <form onsubmit="exitPage.needToConfirm = false;">
    <p><input type="text" onchange="exitPage.needToConfirm = true;" /></p>
    <p><input type="submit" /></p>
  </form>
</body>
</html>

Na linha 3 fizemos a referência para o arquivo .js que contém o código do confirmador e criamos uma instância de ExitPageConfirmer na linha 5. Nas linhas 9 e 10 configuramos a necessidade de exibir ou não a mensagem de confirmação utilizando usando a variável exitPage.

Detalhe sobre a implementação

Há um detalhe interessante sobre a implementação do objeto ExitPageConfirmer. Vamos ver o código novamente para ficar mais fácil de visualizar.

function ExitPageConfirmer(message) {
  this.message = message;
  this.needToConfirm = false;

  var myself = this;

  window.onbeforeunload = function() {
     if (myself.needToConfirm) {
       return myself.message;
     }
   }
}

Na linha 3 é criada a variável myself que recebe o valor de this. O this nesse escopo se refere à instância do objeto. Por exemplo, quando criamos a variável exitPage no código do formulário, o this dentro do objeto se refere a essa variável.

Dentro da função que é passada para o evento onbeforeunload do objeto window existe um if verificando o valor de needToConfirm do próprio objeto ExitPageConfirmer. Isso serve de condição para exibir a mensagem confirmação.

Mas por que não usamos this.needToConfirm ao invés de myself.needToConfirm na linha 8?

Acontece que a partir do momento que estamos configurando algo dentro do objeto window, o this se refere ao objeto window e não mais ao objeto ExitPageConfirmer. Sendo assim, criamos a variável myself que recebe uma referência da instância atual do objeto ExitPageConfirmer.

Como a variável myself fica disponível também no escopo da função que é atribuída ao evento onbeforeunload do objeto window, podemos utilizá-la sem problemas.

O escopo da variável myself se limita ao construtor de ExitPageConfirmer, então a mesma não pode ser acessada de fora do objeto.

Conclusão

O objeto ExitPageConfirmer pode ser utilizado em qualquer página, evitando assim a duplicidade de código. Além disso, o uso de programação orientada a objetos em JavaScript, ao invés de abordagem procedural, torna o código mais elegante e fácil de manter.

O código completo você encontra aqui no meu Github.

Referência:
Asking Users To Confirm If They Wish To Leave The Page

JavaScript , , , , ,

Cheeseburgers, Decorators e Ruby

13 de setembro de 2009

No post Cheeseburgers, Decorators e Mocks eu mostrei um exemplo prático de utilização do Design Pattern Decorator, que começa com um design usando herança, desaclopa usando composição e finalmente aplica Decorator. Tudo isso foi feito em .NET com C#. Agora vamos fazer o mesmo exemplo de Decorator Pattern utilizando Ruby. Para entender melhor o contexto do exemplo utilizado, sugiro que você leia antes o post anterior.

Imagem original de MarketFare Foods, Inc.

Imagem original de MarketFare Foods, Inc.

Além de Ruby, utilizarei o RSpec como ferramenta de testes unitários. No final do post há os links para baixar o código completo.

Leia mais…

Arquitetura, Ruby , , , , , , , ,

Cheeseburgers, Decorators e Mocks

29 de julho de 2009

Em São Paulo, eu sempre comi cheeseburgers feitos com pão, hamburguer e queijo. Mas quando eu fui para Itararé, cidade do interior do estado de São Paulo, descobri que eles também colocavam milho no sanduíche.

Para exemplificar, vamos imaginar que o cheeseburger de Ilhéus-BA, venha com molho de pimenta. Só para constar, eu nunca fui para Ilhéus, apesar de ser a cidade natal de meu pai. Então na verdade não tenho a mínima idéia de como seja o cheeseburger de lá.

Imagem original de MarketFare Foods, Inc.

Imagem original de MarketFare Foods, Inc.

Vamos transportar esses três tipos de cheeseburgers para objetos e fazer alguns testes com eles. Usarei como plataforma .NET, linguagem C#, a ferramenta de testes unitários que vem com o Visual Studio 2008 e o Rhino Mocks como framework de criação de mocks.

Leia mais…

.NET, Arquitetura , , , , , , , , , , , , ,

10 maneiras de melhorar seu código, por Neal Ford

23 de abril de 2009

Vou aproveitar o embalo do post sobre Automatização que o Erich colocou no blog de Tecnologia da Locaweb, onde ele fala que Neal Ford, no seu último livro “The Productive Programmer“, escreveu um capítulo inteiro sobre o assunto.

No último mês de novembro, estive na QCon San Francisco 2008 e tive o privilégio de assistir à palestra
“10 Ways to Improve Your Code”
apresentada por Neal Ford.

São elas:

  1. composed method
  2. test-driven development, test-driven design
  3. static analysis
  4. good citizenship
  5. yagni: you ain’t gonna need it
  6. question authority
  7. slap: single level of abstraction principle
  8. polyglot programming
  9. every nuance
  10. anti-objects

Você pode assistir à palestra que agora está disponível no site da InfoQ:
http://www.infoq.com/presentations/10-Ways-to-Better-Code-Neal-Ford

Baixe também os slides da apresentação em PDF neste endereço:
http://qconsf.com/sf2008/file?path=/qcon-sanfran-2008/slides//NealFord_10_Ways_to_Improve_Your_Code.pdf

Arquitetura, Eventos, TDD , , , , , , ,