Criando eventos em objetos Javascript

by Cássio R Eskelsen 2. janeiro 2010 09:53

Uma necessidade muito comum na programação orientada a objetos é o disparo de trechos de código quando determinado evento acontece.
Usamos isso no dia-a-dia sem pensar muito, tomando como exemplo o evento onClick dos botões ou o evento onLoad da página.

Mas e quando criamos nossos próprios objetos javascript como adicionamos eventos a eles? Bom, existem várias maneiras e nesse post vou mostrar uma forma muito fácil que utiliza a bilbioteca YUI da Yahoo.

Primeiramente vamos criar o nosso objeto em um arquivo a parte chamado MeuObjeto.js:

function MeuObjeto(){
    this.OnFinish = new YAHOO.util.CustomEvent('Terminou');
    this.Start = start;
}

function start(){
    this.onFinish.fire();
}
Leia mais...

Tags:

Web

[Off-topic] Realidade Aumentada (Web 4.0?)

by Cássio R Eskelsen 6. março 2009 09:45

Creio que não seja tão off-topic assim, já que este é um blog de tecnologia e entre outras coisas, fala de projetos WEB. E como hoje é sexta-feira, nada melhor do que algo “cool” para relaxar :)

Realidade Aumentada é uma área de pesquisa que procura juntar elementos reais e virtuais. Já vi alguns exemplos interessantes nessa área, como por exemplo, treinamento de funcionários de assistência técnica de veículos.

O vídeo abaixo mostra uma idéia interessante para o website ecomagination.com da GE. Basicamente, você imprime uma folha de papel que possui um grafismo especial e aponta essa folha para sua webcam. O site irá detectar o grafismo e “ampliar sua realidade”. Vendo o vídeo você entende melhor.

Imagino algumas aplicações interessantes para o futuro. Imagine poder provar uma roupa virtualmente? Ou apontar sua webcam para a sua sala de estar e ver como ficaria um objeto de decoração antes de comprá-lo?


PS: O vídeo original foi removido. Substitui pelo video que está no site do ecomagination.com

Tags:

Web

Jquery Intellisense no Visual Studio (e como fazer funcionar com MVC)

by Cássio R Eskelsen 22. novembro 2008 11:29

Nessas últimas semanas vários blogs (inclusive ScottGu)comentaram sobre o intellisense do JQuery no Visual Studio 2008.  Para quem está usando esse framework com aplicações .Net, o uso do intellisense ajuda muito e vale o pequeno esforço para instalar o hotfix do VS 2008.

No entanto, para quem está usando o ASP.NET MVC alguns problemas persistem.
Normalmente fazemos referência ao JQuery na MasterPage e por padrão o link fica dessa forma:

<script src="../../Scripts/jquery.js" type="text/javascript"></script>


A Masterpage de aplicações MVC esta em (root)/Views/Shared. Se temos uma view que está respondendo no mesmo nível (por exemplo, (root)Views/Home/Index.aspx), a chamada acima funciona normalmente. No entanto, se temos views em outros niveis ou se nosso site está em subdiretório (como por exemplo, este blog que está em http://www.bizness.com.br/weblog) começamos a ter problemas.
Para resolver isso, podemos usar um método do framework MVC para renderizar o caminho relativo em runtime:

<script src="<%=Url.Content("~/Scripts/jquery.js")%>" type="text/javascript"></script>


Agora criamos outro problema: o intellisense não reconhece essa forma de chamar o script. 
Para contornar, podemos usar uma chamada falsa ao javscript:

<script src="<%=Url.Content("~/Scripts/jquery.js")%>" type="text/javascript"></script>

    <%if (false)
      { %>
            <script src="../../Scripts/jquery.js" type="text/javascript"></script>
    <%} %>


Tabajara code detected!! Sim, um tanto freak, mas resolve. Como estamos isolando a segunda chamada por um if que sempre retorna falso ela nunca será renderizada na página final, mas em modo design será reconhecida pelo intellisense.

Adaptei a dica que Jeff King deu para que usercontrols .ascx tenham intellisense do Jquery quando a chamada para ele está na masterpage. (os aspx tratam as chamadas que estão na masterpage, mas os ascx não, pois eles não estão ligados a uma página ou masterpage específicos.

Tags: , , ,

Web

Google lança seu próprio browser

by Cássio R Eskelsen 2. setembro 2008 18:00

Google deu mais um passo na direção de seu objetivo de dominação mundial: lançou o seu próprio browser, o  Google Chrome!

Alguns vão dizer : “puts, mais um browser para testarmos nossos sites”, mas eu estou achando fantástico termos mais uma opção. De quebra, ele vem com uma ferramenta interessante para nós desenvolvedores: o Element Inspector. Clicando com o botão direito sobre a página é aberto um popup contendo informações sobre a página e também uma ferramenta que mostra graficamente o tempo de carregamento dos elementos da página:

 

image

 

Para quem quiser baixar, o link é: http://www.google.com/chrome/

Update! A Google soltou informações de como compilar o Chrome usando o Visual Studio. Veja aqui http://dev.chromium.org/developers/how-tos/getting-started

Tags: ,

google4business | Web

Internet Explorer 8 vem com ferramentas para desenvolvedores

by Cássio R Eskelsen 29. agosto 2008 15:34

Instalei hoje o Beta 2 do Internet Explorer 8. Ao executá-lo pela primeira vez, fui avisado de que um add-on que eu havia instalado na versão anterior (Web Developer Toolbar) não era compatível com essa versão. Cliquei na opção “check for updates” e na página à qual fui direcionado tive a supresa de ler que a versão 8 do IE incorporou uma série de ferramentas para desenvolvedores e web designers. Essas ferramentas (nomeadas de “Developer Tools”) estão acessíveis através da tecla de função F12.

A primeira tela que é exibida é uma árvore com os elementos da página corrente:

image

Ao navegar na árvore, clicando sobre um elemento específico, são exibidos os estilos aplicados a esse elemento. É aqui que a brincadeira começa a ficar interessante: os estilos sobrescritos são "riscados". Por exemplo, se você tiver um estilo semelhante a esse:

Leia mais...

Tags: , ,

Web

MS lança o Photosynth... para comemorar, juntei ele com o Google Maps!

by Cássio R Eskelsen 22. agosto 2008 01:14

A Microsoft lançou uma das suas maiores promessas tecnológicas, o Photosynth. Claro, é mais um daqueles casos de tecnologia criada por uma startup obscura e posteriormente comprada por um big player, mas ninguém irá lembrar disso quando vir o que ele produz.

A idéia do Photosynth é analisar centenas (milhares?) de fotos de alguma coisa ou lugar e linká-las entre si, através das texturas e elementos da foto. Mais ou menos como o Photoshop faz ao montar um panorama com várias fotos.  No entanto, no Photosynth a imagem é dinâmica, você pode clicar nela para mostrar em volta ou aproximar algum detalhe (obviamente se houver foto de um detalhe).

O grosso do processamento do Photosynth é feito nos servidores da Microsoft. Ou, usando o termo da moda, computação na "nuvem". Para visualizar um "synth", você precisa descarregar um player no site. Com esse mesmo player você pode criar seus próprios synths e hospedar na Microsoft ( ela disponibiliza 20 Giga de espaço). Apenas reze para que o servidor não esteja sobrecarregado como aconteceu hoje!

Talvez o fato de exigir um player específico e que roda apenas no Windows seja o maior senão dele, mas com o tempo isso se resolve (ou as pessoas se acostumam).

Se você quiser ver como ele funciona antes de instalá-lo, rode o vídeo abaixo:

 

 

Bom, agora vamos para o lado geek!

Chris Pendleton, "evangelista" do Virtual Earth, fez um post sobre o lançamento do Photosynth e como integrar um synth com o Virtual Earth. 
Não sou um grande fã do Virtual Earth. Prefiro o Google Maps, pois os mapas dele são mais completos aqui no Brasil e em outros lugares. No entanto, a tecnologia do Virtual Earth me parece superior, então vamos torcer para que a coleção de mapas dele aumente rapidamente!

Resolvi fazer algo semelhante ao que Chris mostrou, mas usando o Google Maps!

 

image

 

Não é necessário nada especial, apenas uma página HTML e javascript.

Leia mais...

Tags: ,

Geo | Web | Google Maps

db4oMembership Provide

by Cássio R Eskelsen 5. agosto 2008 22:44

(publicado originalmente em 16/11/2005)

A versão 2.0 do framework introduziu novas funcionalidades ao sistema de autenticação de páginas da versão 1.1 do framework.

Uma das mudanças é a classe Membership Provider, que mantém as informações do cadastro de usários que podem autenticar na página
Essa classe originalmente vem implementada para o banco de dados Sql Server e autenticação via Active Directory, mas pode ser implementada para outros bancos.

Eu comecei um projeto no source forge para implementar essa classe para o banco de objetos db4o. 

Atualmente já está funcionando:

- Criação de usuários
- Exclusão de usuários
- Login de usuários
- Registro do último login
- Envio de senha perdida
- Alteração de senha
- Alteração da pergunta/frase secreta
- Alteração de dados do usuário
- Listar todos os usuários

Se você encontrar algum bug ou tiver alguma sugestão, não exite para entrar em contato!

Tags: ,

Banco de Dados | Web | .Net