Ext-gwt

Mais uma vez a equipe do Ext se superou. Se o GWT-Ext já era uma mão na roda pois integrava a excelente API javascript Ext com o GWT usando a JSNI (Javascript Native Interface) imagine agora tudo isso escrito somente em Java! Pois é o que a biblioteca Ext-GWT (com o nome invertido) faz. Além de ser totalmente escrita usando a API GWT ela já suporta a versão 1.5 do GWT, que por sua vez suporta o Java 5. Vejam aqui alguns exemplos:

http://extjs.com/explorer/

GWT-Ext 2.0

O GWT é um excelente framework AJAX, mas não possui componentes bonitos, digamos assim. É preciso trabalhar um pouco mais pra conseguir fazer algo interessante. O Ext por sua vez, possui diversos componentes com visuais excelentes, mas é preciso conhecer javascript pra usá-los. Pensando nisso foi criado o GWT-Ext para juntar o melhor dos dois em um super framework pra criar excelentes aplicações Web. Vejam o showcase da versão 2.0:

De volta!!

É, ando meio sumido. Começei meu blog, parei um tempo de por postagens pra estudar pra certificação java (Passei!!!), mas agora vou voltar a tratar dos assuntos mais atuais que norteiam o desenvolvimento web. Como ponto de repartida vou escrever, em outro post, como montar um ambiente para desenvolver aplicações usando o GWT + Netbeans, minha mais recente paixão :).

Javascript SOAP Client

Neste artigo, Matteo Casati mostra como utilizar o Javascript para consumir webservices, em uma implementação leve, eficiente e simples. E por que utilizar javascript para consumir webservices? Bom, uma utilidade que vejo é o reaproveitamento dos certificados digitais instalados no browser para efetuar conexões seguras com webservices que exijam isso e testar os webservices em si. Tem coisa mais simples? Principalmente pra quem tá iniciando em SOA é um bom ponto de partida.

Vejam este exemplo:

function HelloTo()
{
  var pl = new SOAPClientParameters();
  pl.add("name", document.frmDemo.txtName.value);
  SOAPClient.invoke(url, "HelloTo", pl, true, HelloTo_callBack);
}
function HelloTo_callBack(r)
{
  alert(r);
}

Para mais exemplos acessem esta página com mais demos.

Efeito Polaroid

Esse efeito é bem legal! Basta colocar a classe CSS class='instant' em suas imagens que elas automaticamente ficam com o efeito de máquina Polaroid, como essa aqui:

Para saber mais acessem:

http://www.netzgesta.de/instant/

Prototype - Parte II

Olá a todos!!

Continuando a saga do prototype, vou falar hoje de mais 3 três funções: $(), $F() e $A(). Para quem vai escrever aplicações Ajax e quer ter menos trabalho, elas irão te ajudar e muito. Vamos lá!

Função $$(): Esta função retorna todos os elementos da página que satisfaçam determinada regra CSS. Por exemplo, se eu quiser retornar o conteúdo de todas as divs que tenha a classe "teste" podemos fazer assim:

function teste(){
 var a = $$(".teste");
 a.each(function(elem){
  alert(elem.innerHTML);
 });
}

Em outro post falaremos mais sobre esse each esquisito ai no código.

Função $F(): Essa é mais simples, ela retorna o valor de qualquer input ou select da página.

alert($F("meuinput"));
    ...
<input type="text" id="meuinput" value="olá mundo" / >

Isso irá mostrar uma caixa de alerta com o texto Olá mundo.

Função $A(): Por fim, esta função recebe como argumento uma lista qualquer e retorna um objeto Array, já com as extensões do prototype. Por exemplo:

<script>
function mostraLista(){
 var lista = $('lista').getElementsByTagName('option');
 var nos = $A(lista);
 nos.each(function(no){
  alert(node.innerHTML);
 });
}
</script>

<select id="lista" size="10" >
<option value="5">Opção 1</option>
<option value="8">Opção 2</option>
<option value="1">Opção 3</option>
</select>
<input type="button" value="Mostra Lista " onclick="mostraLista();" >

Este código pega todos os elementos "option" da lista "lista" e e interage através deles usando a função each, que é uma extensão ao objeto array do prototype, mostrando o conteúdo de cada elemento. Isso facilita muito nossa vida quando queremos interar através de elementos de uma tabela ou de uma lista <li>, por exemplo.

Por hoje é isso. Nos próximos posts continuaremos essa saga do prototype. Se gostou deste post favor comentar!! Se não gostou tb!! Pode reclamar a vontade ;)

Que tal um Xadrez Chinês?

Eu não sei jogar isso, mas este xadrez chinês tem uns recursos Ajax interessantes. Animação, Drag-And-Drop, JSON, etc. O que mais chama a atenção é a forma que o oponente é processado. Todo processamento é feito no lado do servidor e utiliza repostas em JSON (JavaScript Object Notation) para indicar o próximo movimento. Em posts futuros falaremos mais sobre esse tal de JSON, não é complicado acreditem! ;)

E para quem quiser tentar o xadres chinês:

Introdução ao GWT - Google Developer Day

Que tal uma breve introdução ao GWT? No video abaixo temos uma breve explicação desta excelente tecnologia para desenvolver aplicações Web usando Ajax:

Interfaces Elements for JQuery

jQuery é um dos principais concorrentes do framework prototype. Assim como o prototype tem o Script.aculo.us para estender o framework, o jQuery tem o Interfaces Elements. Dentre os principais componentes estão:

• Animate
• Effects
• Draggables
• Droppables
• Sortables
• Selectables
• Resizables
• Slider
• Tooltips
• Slideshow
• Imagebox
• Autocompletion
• Autoscrolling
• Autoexpander
• Accordion
• Tabs in Textareas
• 3D Carousel
• Fisheye menu

O mais legal pra mim é o menu Fisheye:

Post Inicial - Framework Prototype

Olá a todos!! Esse é meu post inicial no blog Ajaxis. O tema principal do blog será tecnologias Web! Principalmente a meninas dos olhos de todos os iniciantes nesta área, o Ajax. Espero a participação de todos os visitantes para comentar os posts, sugerir melhorias e temas para discussão.

Para iniciar, vou mostrar como utilizar o framework prototype. O seu objetivo principal é agilizar e facilitar o desenvolvimento de aplicação web 2.0 usando Ajax, adicionando diversas extensões ao DOM. Neste site você encontra um excelente e completo tutorial sobre o prototype. Para começar a vamos conhecer a função $():

$(): Um atalho para o document.getElementById() do DOM em javascript. Muito mais que apenas retornar um elemento HTML, a função $() adiciona alguns métodos extras ao objeto retornado como hide(), show() e toggle() pra esconder e exibir elementos.

Ex:

<div id="minhadiv">conteúdo</div>

<a href="#" onclick="teste();">Esconder / Mostrar</a>

<script>

function teste(){

$('minhadiv').toggle();

}

</script>