Posts Tagged → javascript
WTF? Quake II em GWT?
Veja isso…
Um desenvolvedor do Google, nos 20% de tempo que são fornecidos para projeto próprio, resolveu portar o Quake II utilizando os novos recursos do HTML5. E para isso também utilizou o GWT. Não é impressionante? Agora acredito que o Flash possa “morrer”. Vou baixar o código-fonte do projeto e dar uma fuçada…
Utilizando Javascript no GWT/Google Web Toolkit com JSNI (Parte 1)
Muitas vezes os desenvolvedores precisam de um novo componente para sua aplicação, e esse componente a maioria das vezes é desenvolvido em Javascript. Quem conhece o GWT, sabe que a framework permite desenvolver aplicações RIA sem saber Javascript, mas sim desenvolvendo em Java de uma forma muita parecida como a que se desenvolve em Swing ou SWT. Você não tem contato direto com o Javascript, pois ele é gerado na compilação. Mas como então se faz para utilizar um componente Javascript no GWT?
O GWT tem uma funcionalidade que se chama JSNI(Javascript Native Interface). Ela é baseada no JNI(Java Native Interface), que permite aos desenvolvedores Java utilizarem recursos específicos do sistema operacional. No JNI são métodos na classe Java escritos em C. No JSNI são métodos na classe Java que utilizam Javascript. Mas a forma em que eles são escritos é muito parecida, tanto que é possível utilizar parte da documentação do JNI como referência para o JSNI.
Vamos primeiramente criar o já conhecido “Hello World!”, para que começar a se familizar com o JSNI:
public void onModuleLoad() {
Button btn = new Button("Clique aqui");
btn.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
alert("Hello World!");
}
});
RootPanel.get().add(btn);
}
//Dê uma atenção especial a este método
public native void alert(String txt) /*-{
$wnd.alert(txt);
}-*/;
}
Quando esse código for executado, dará para ver um botão, que você clica e mostra um alert com o “Hello World!”. Mas este alert é feito utilizando Javascript, como dá para ver. È criado um método nativo(“public native void alert”) que recebe uma String. O bloco de código é delimitado por “/*-{” e “}-*/” em vez de um simples par de chaves. E dentro do bloco de código é executado um “$wnd.alert(txt);”, que seria o correspondente a “window.alert(txt)” ou a apenas “alert(txt)”. O GWT precisa que tudo que seja referente a janela(window) seja chamado com o “$wnd” no início, pois internamente ele utiliza alguns iframes e algumas coisas que não vem ao caso, e ele precisa disso para não se perder na compilação. Da mesma forma, quando você precisar utilizar um “document.
document = $doc
window = $wnd
Vamos fazer um exemplo utilizando o “$doc” agora.
public void onModuleLoad() {
TextBox txt = new TextBox();
txt.setName("campoTexto");
RootPanel.get().add(txt);
Button btn = new Button("Clique aqui");
btn.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
mostraTextoTextBox();
}
});
RootPanel.get().add(btn);
}
public native void mostraTextoTextBox() /*-{
var txt = $doc.getElementById("campoTexto");
$wnd.alert(txt.value);
}-*/;
}
Neste exemplo, é criado um campo TextBox e um botão. Quando se clica no botão, é mostrado em um alert o texto do TextBox. Mas é utilizado Javascript para isso. È utilizado um “$doc.getElementById” para pegar a instância do TextBox(que no fundo no fundo é um “input text” HTML), e retornar o valor. Pode ver que é feita a mesma coisa que seria feita com um campo de texto HTML. A diferença é que se utiliza o $doc ao invés do “document” no getElementById.
A partir disso dá para ver que dá para fazer muita coisa com o JSNI. Esse é o básico do básico do que a ferramenta pode fazer. No próximo artigo irei explicar como utilizar objetos Java no Javascript e fazer com que métodos Java sejam visíveis para Javascript’s externos. Qualquer dúvida, tire nos comentários. 