Olá a todos. Gostaria de, antes de iniciar este artigo, desejar um ótimo carnaval a todos vocês e lembrá-los de divertir com segurança e proteção.

Hoje falaremos sobre Code Hints no Dreamweaver (DW) e de uma extensão que desenvolvi (e ainda estou incrementando) para adicionar novas funcionalidades ao Code Hints padrão do DW.

Os Code Hints disponibilizados pelo Dreamweaver nos ajudam a realizar uma codificação rápida e sem erros. Eles são utilizados/exibidos exclusivamente no modo de visualização Code View. Para todos os tipos de documentos que você estiver trabalhando, o DW exibirá um Code Hints específico ao tipo de documento em questão.

Ultimamente tenho codificado muito em JavaScript e DOM e acredito que outros desenvolvedores web que utilizam dessa ferramenta também. Com isso, senti a falta de Code Hints específicos ao JavaScript e o DOM; o que me levou a criação de uma extensão para o Dreamweaver intitula como Gecko DOM Code Hints.

Então, posso lhe dizer que a Gecko DOM Code Hints é uma iniciativa minha em oferecer Code Hints ao se trabalhar com o JavaScript/DOM no Dreamweaver. A versão atual (no momento em que escrevo este artigo) é a 0.3 e ela oferece suporte a todos os métodos e propriedades do objeto document. Além de uma tooltip para alguns dos métodos.

Faça o download da Gecko DOM Code Hints (versão 0.3)

Nota: na versão inicial – 0.1 – dessa extensão os Code Hints funcionavam apenas em documentos do tipo JavaScript, a partir da versão 0.3, os Code Hints são exibidos em qualquer tipo de documento. Portanto, toda sugestão será muito bem-vinda.

Uma vez instalado a extensão, o Dreamweaver estará apto a exibir os Code Hints referente ao objeto document. Ao iniciar a sua codificação em JavaScript/DOM e digitar o seguinte pattern: “document.” (sem aspas) será exibido um Code Hints com os métodos e propriedades referente a esse objeto. Observe na imagem abaixo um exemplo:

Nesse menu popup exibido após a digitação do pattern: “document.” (sem aspas), você poderá navegar entre os métodos/propriedades com as teclas para cima e para baixo do seu teclado. Após a escolha tecle enter que o Dreamweave irá completar a codificação para você 🙂

Para alguns métodos do objeto document será exibido uma tooltip com os parâmetros referente à função, como demonstrado na imagem abaixo:

Se um método em específico possuir mais de um parâmetro a ser informado, à media em que você for adicionando as vírgulas para informar o parâmetro posterior o menu é atualizado; sempre exibindo em negrito o parâmetro em questão.

Bom, é isso aí. Espero que tenham gostado e que a extensão seja útil para vocês, como tem sido para mim.

Lembrando que toda e qualquer sugestão será bem-vinda e poderá ser utilizada para a melhoria da extensão. Até o momento, como você percebeu, os Code Hints são referetes ao objeto document. Os demais serão incluídos em versões futuras da Gecko DOM Code Hints. Por isso, acompanhe o meu blog pessoal e meu laboratório onde lhe informarei sobre atualizações da extensão aqui abordada.

Se você é usuário da freeDOM.js – fiz uma abordagem sobre ela no artigo Codifique menos. Viva mais. – pode ser interessante conhecer a freeDOM.js inside Dreamweaver – uma extensão semelhante a Gecko DOM Code Hints.