Neste tutorial, você aprenderá como desenvolver aplicativos de cliente Web 2.0 usando o "recurso Remoto de serviço Web RESTful" no NetBeans IDE 6.0 ou 6.1. O recurso consiste em um assistente que permite gerar stubs de cliente JavaScript a partir de classes de recurso de serviço Web RESTful. Quando faz isso, você está simplificando o processo através do qual os aplicativos clientes acessam os serviços Web RESTful. O assistente permite que você selecione um projeto em uma lista de projetos que contém serviços Web RESTful. Quando tiver selecionado o projeto e concluído o assistente, você terá stubs de cliente JavaScript que formarão a base de seu aplicativo cliente. Neste tutorial é apresentado um cenário completo sobre esse recurso.
Servidor da aplicação ou Web compatível com Java EE
Servidor Web Tomcat 6.0 e/ou
Servidor da aplicação GlassFish v2 Importante: Se você usa Tomcat com este tutorial, consulte o NetBeans Wiki sobre Tomcat com REST
Banco de dados
O Java DB incluído no NetBeans IDE ou a última versão de MySQL
Opcionalmente, para fins de solução de problemas, você pode baixar a amostra completa e inspecionar os códigos-fonte.
Este tutorial também requer o plug-in Serviços Web RESTful. No IDE, vá para o gerenciador de plug-ins, no menu Ferramentas, e verifique se o plug-in Serviços Web RESTful está instalado, na guia Instalado. Caso não esteja, instale-o a partir da aba Plug-ins disponíveis, como mostrado abaixo:
Criando o banco de dados Música
Nesta seção, criamos um novo banco de dados chamado "música". Nós o preenchemos com os dados sobre as canções.
Crie o banco de dados.
No NetBeanse IDE 6.0, escolha Ferramentas > Banco de dados Java DB > Criar banco de dados.
No NetBeans IDE 6.1, abra a aba Serviços e clique com o botão direito do mouse no nó Java DB ou MySQL. (Consulte Conectando a um banco de dados MySQL para obter instruções sobre como configurar MySQL no NetBeans.) Inicia o servidor. Em seguida, clique com o botão direito do mouse no nó do banco de dados novamente e selecione Criar banco de dados.
Chame o banco de dados de música. Em Java DB, use o nome de usuário música e a senha música. Em MySQL, digite as credenciais do usuário root e não indique um nome de esquema.
Abra o script música e selecione a conexão Música na barra de ferramentas na parte superior do editor SQL:
Clique em Executar na barra de ferramentas do editor SQL e o script é carregado no banco de dados. Talvez você obtenha alguns erros porque o esquema MÚSICA não existe, mas isso não afeta o resultado do tutorial. Se o script for executado com êxito, a estrutura do banco de dados se torna visível no nó da conexão do banco de dados na visualização Serviços.
Gerando classes de entidade do banco de dados Música
Nesta seção, usamos um assistente para gerar classes de entidade dos dados em nosso banco de dados.
Escolha Arquivo > Novo projeto. Em Categorias, selecione Web. Em Projetos, selecione Aplicação Web e clique em Próximo.
Em Nome do projeto, indique MusicDB .
Em Servidor, selecione um servidor, tal como GlassFish. Clique em Terminar.
Clique com o botão direito do mouse no nó do projeto MusicDB e escolha Novo -> Classes de entidade do banco de dados
O assistente para Novas classes de entidade do banco de dados aparece.
Na lista suspensa Fonte de dados, escolha Nova fonte de dados. A caixa de diálogo Criar fonte de dados se abre.
Em Fonte de dados, escolha Nova fonte de dados. A caixa de diálogo Criar fonte de dados aparece.
Em Nome JNDI, digite "jdbc/music". Em Conexão do banco de dados, selecione a conexão derby ou mysql /music na lista suspensa. Agora você deve ver o seguinte. Clique em OK, caso esteja vendo.
Na lista Tabelas disponíveis, selecione PLAYLIST, SONG e PLAYLIST_SONG. Clique em Adicionar e em Próximo.
Clique em Criar unidade de persistência. Aceite todos os valores padrão, mostrados abaixo, e clique em Criar.
Em nome do pacote, digite org.music. Clique em Terminar.
O IDE cria duas classes de entidade, Playlist.java e Song.java.
Gerando serviços Web RESTful a partir de classes de entidade
Nesta seção, usamos um assistente para criar serviços Web RESTful a partir de classes de entidade que criamos na seção anterior.
Clique com o botão direito do mouse no projeto e escolha Novo > Serviços Web RESTful a partir de classes de entidade,
Observação: Se o item acima não estiver disponível, você precisará instalar o plug-in Serviços Web RESTful, como descrito no início deste tutorial.
No assistente para Novos serviços Web RESTful a partir de classes de entidade, clique em Adicionar tudo e em Próximo. A página Classes geradas se abre. Talvez você tenha que adicionar org.music ao início dos nomes de pacote. A página concluída corretamente segue:
Clique em Terminar.
As classes geradas pelo assistente são mostradas abaixo:
Testando os serviços Web RESTful
Nesta seção, usamos o aplicativo GlassFish Tester como um cliente de teste dos serviços Web RESTful criados na seção anterior.
Clique com o botão direito do mouse no nó do projeto e escolha Testar serviços Web RESTful.
A aplicação Web é construída, implantada e o navegador padrão se abre mostrando a página do cliente de teste.
Clique em um link para ver informações do banco de dados, como mostrado abaixo:
Feche o navegador.
Criando stubs de cliente de serviço Web RESTful
Nesta seção, criamos uma nova aplicação Web. Em seguida, usamos um assistente para criar stubs de cliente JavaScript que irão interagir com nossos serviços Web RESTful.
Escolha Arquivo > Novo projeto. Em Categorias, selecione Web. Em Projetos, selecione Aplicação Web e clique em Próximo.
Em Nome do projeto, indique MusicApp.
Em Servidor, selecione um servidor, tal como GlassFish. Clique em Terminar.
Clique com o botão direito do mouse no nó MusicApp e escolha novo > Stubs do cliente de serviço Web RESTful.
Desmarque Criar componentes jMaki Rest, pois só iremos usar stubs Javascript básicos.
Clique em Adicionar projeto e adicione o projeto MusicDB que criamos anteriormente, como mostrado abaixo:
Clique em Terminar.
Executar o projeto MusicApp. Um navegador se abre. Altere a URL do navegador para a página http://localhost:8080/MusicApp/rest/TestStubs.html.
Se os stubs de cliente forem gerados corretamente,
as URIs da lista de reprodução serão listadas na linha Listas de reprodução e as URIs da canção serão exibidas na linha Músicas.
Exibindo as listas de reprodução
Nesta seção, criamos a página index.html do aplicativo. Em seguida, baixamos a folha de estilo CSS e as imagens relacionadas.
No aplicativo Música, na pasta Páginas da Web, crie uma subpasta chamada música. Crie a subpasta, escolhendo o modelo Pasta na categoria Outro no assistente Novo. Dentro da nova subpasta, crie uma página index.html.
Cole o seguinte código HTML no novo arquivo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>DeeJay - PlayList Community</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="./style.css" type="text/css"/>
<!-- Add the location of the MusicDB remoting scripts generated earlier:-->
<script type="text/javascript" src="../rest/Support.js"></script>
<script type="text/javascript" src="../rest/musicdb/MusicDB.js"></script>
<script type="text/javascript" src="../rest/musicdb/Playlists.js"></script>
<script type="text/javascript" src="../rest/musicdb/Playlist.js"></script>
<script type="text/javascript" src="../rest/musicdb/Songs.js"></script>
<script type="text/javascript" src="../rest/musicdb/Song.js"></script>
<script type="text/javascript" src="./main.js"></script>
</head>
<body>
<div class="outerBorder">
<div class="border2">
<div class="header">
<!-- Add a banner for our application:-->
<div class="banner2"><img src="./images/b.gif" width="500" height="100"/></div>
</div> <!-- header -->
<!-- Add a menu to the left side of the page:-->
<div id="main" class="main">
<table>
<tr>
<td id="leftSidebar" class="leftSidebar bkgclr" class="valign-top">
<br/>
<span class="ml5">Welcome 'Geertjan'</span>
<br/>
<br/>
<table width="150">
<tr>
<td class="cell ht">
<a href="javascript:showPlayLists()" class="links">
<span class="text2">Playlists</span>
</a>
</td>
</tr>
</table>
</td>
<td class="seperator" class="valign-top"></td>
<!-- Add three DIV tags, with the with id "vw_pl".
Trata-se de um gancho para mostrar todas as listas de reprodução. A id "vw_pl_item" é um gancho para mostrar todas as canções de uma lista de reprodução, enquanto "cr_pl" não é usado neste tutorial. It is left for you
an excerise to user to create a playlist.-->
<td id="content" class="content bkgclr" class="valign-top">
<div id="vw_pl" class="hide">
<div class="clr"></div>
<div class="heading mglf">Playlists</div>
<div id="vw_pl_content" class="form-container"></div>
</div>
<div id="cr_pl" class="hide">
<div class="clr"></div>
<div class="heading mglf">Create Playlist</div>
<div id="cr_pl_content" class="form-container"></div>
</div>
<div id="vw_pl_item" class="hide">
<div class="clr"></div>
<div class="heading mglf">Playlists</div>
<div id="vw_pl_item_content" class="form-container"></div>
<br/><br/>
<div id="add_song_content" class="form-container"></div>
</div>
</td>
</tr>
</table>
</div> <!-- main -->
</div> <!-- border2 -->
</div> <!-- outerborder -->
<!-- Finally we add a hook to invoke a javascript function
"showPlaylists()":-->
<script language="Javascript">
showPlaylists();
</script>
</body>
</html>
Baixe images.zip e descompacte-o para uma nova subpasta music/images.
Usando Javascript para manipular eventos
Nesta seção, permitimos que o aplicativo exiba as listas de reprodução a partir do banco de dados. Para fazer isso, escrevemos um script que lê todas as listas de reprodução, usando os scripts gerados anteriormente na pasta rest/musicdb.
Na pasta music do aplicativo Música, crie um arquivo Javascript chamado main.js. Crie-o escolhendo o modelo JavaScript na categoria Outro no assistente para Novo arquivo.
Observação: Para economizar tempo, ou se você encontrar problemas, baixe main.js aqui.
Cole o trecho de código Javascript seguinte no arquivo main.js:
var playlistsObj;
function showPlaylists() {
var app = new MusicDB();
var resources = app.getResources();
for(i=0;i<resources.length;i++) {
var resource = resources[i];
if(resource instanceof Playlists) {
playlistsObj = resource;
var style = 'otab';
var str = '<div><table class="result"><tr>';
str += '<td class="tab '+style+'"><a class="links" href="javascript:createPlayList()">\
<span class="text2">Create Playlist</span></a></td></tr></table></div>';
var playlists = playlistsObj.getItems();
for(i=0;i<playlists.length;i++) {
var playlist = playlists[i];
var uri = playlist.getUri();
var playlistId = playlist.getPlaylistId();
var title = playlist.getTitle();
var desc = playlist.getDescription();
//alert(uri+' '+playlistId+' '+title+' '+desc);
str += "<div id='playListsTable'><a href=\"javascript:showPlayList("+i+")\" >"+title+"</a>\
<br/>"+desc+"</div>";
}
var node = document.getElementById('vw_pl_content');
node.innerHTML = str ;
doShowContent('vw_pl');
}
}
}
Acima, primeiro criamos a variável global playlistsObj, para que possamos compartilhá-la entre outras funções. Em seguida, criamos um objeto Playlists e definimos sua uri. Depois, criamos um botão com o texto Criar lista de reprodução para criar uma lista de reprodução. O objeto Playlists usa uma função chamada getChildren que retorna uma lista de objetos Playlist, cada uma inicializada com sua uri. Um objeto Playlist possui funções tais como getTitle() e getDescription() que ajudam a exibir as informações de cada lista de reprodução. Para ajudar o usuário do aplicativo de música a usar todas as canções em uma lista de reprodução, fornecemos um link (javascript:showPlaylist(index)) junto com as informações da lista de reprodução. Finalmente, atualizamos a marca <div> com a id vw_pl com o conteúdo que coletamos até o momento para exibir todas as listas de reprodução.
Cole o trecho de código Javascript seguinte no arquivo main.js:
function showPlayList(index) {
var playlist = playlistsObj.getItems()[index];
var uri = playlist.getUri();
var playlistId = playlist.getPlaylistId();
var title = playlist.getTitle();
var desc = playlist.getDescription();
//alert(desc);
var songsObj = playlist.getSongs();
//alert(songsObj.toString());
var songs = songsObj.getItems();
//alert(songs.length);
var c = '<div><table class="result"><tr>';
c += '<td class="tab otab">\
<a class="links" href="javascript:addSong(\''+playlistId+'\', \'playlist\', \''+uri+'\')">\
<span class="text2">Add Song</span></a></td>';
c += '<td class="tab otab">\
<a class="links" href="javascript:editPlayList(\''+playlistId+'\', \''+uri+'\', \'1\')">\
<span class="text2">Edit</span></a></td>';
c += '<td class="tab otab">\
<a class="links" href="javascript:deletePlayList(\''+playlistId+'\', \''+uri+'\', \'1\')">\
<span class="text2">Delete</span></a></td>';
c += '</tr></table></div>';
var s = '<div><b>'+title+'</b></div><br/>'+c;
var i = 0;
var str = '';
for(i=0;i<songs.length;i++) {
var song = songs[i];
//alert(song.toString());
var uri = song.getUri();
var songId = song.getSongId();
var title = song.getTitle();
var sourceUrl = song.getSourceUrl();
//alert(uri+' : '+songId+' : '+title+' : '+desc);
str += "<div id='songsTable'>\
<a href=\"javascript:showSong('"+songId+"', '"+title+"', '"+sourceUrl+"')\" >"+title+"</a>\
<br/>"+sourceUrl+"</div>";
}
var node = document.getElementById('vw_pl_item_content');
node.innerHTML = s + str;
doShowContent('vw_pl_item');
}
A função showPlaylist(index) usa um argumento que identifica a lista de reprodução que o usuário selecionou na matriz playlistsObj. Apos recuperar os detalhes da lista de reprodução, chamamos playlist.getSongs(), que retorna um objeto Songs. O objeto Songs é um contêiner para todas as canções em uma lista de reprodução. Após criar os botões para adicionar uma canção à lista de reprodução, editar a lista de reprodução e exlcuí-la, precisamos iterar a lista de canções no objeto Songs. Para fazer isso, chamamos songsObj.getChildren(). Um objeto Songs possui funções getTitle() e getSourceUrl(). Essas funções permitem a exibição dos detalhes da canção junto com sua URL de origem. Adicionamos um link, javascript:showSong(songId, title, sourceUrl) para cada canção, para permitir que o usuário reproduza a música. Finalmente, atualizamos a marca <div> com o id vw_pl_item_content, com o conteúdo que coletamos até agora para exibir todas as canções na lista de reprodução.
Cole o seguinte trecho de código Javascript no arquivo main.js, para mostrar uma canção selecionada na lista de reprodução:
function showSong(id, title, songURL) {
var songContent = getSongOverlay(id, title, songURL);
var c = '<div><table class="result"><tr>';
var style = 'otab';
c += '</tr></table></div>';
c += songContent;
var f = document.getElementById('add_song_content');
f.innerHTML = c;
doShowContent('vw_pl_item');
}
function getSongOverlay(songId, title, songURL) {
var songContent = title;
if(songURL != '') {
if(songURL.length > 7 && songURL.substring(0, 7) == '<object') {
songContent = '<div id="video_content_'+songId+'"><br/>' + songURL+ '<br/></div>';
} else {
songContent = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"'+
'codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"'+
'width="400" height="15" >'+
'<param name="allowScriptAccess" value="sameDomain"/>'+
'<param name="movie" value="./xspf/xspf_player_slim.swf"/>'+
'<param name="quality" value="high"/>'+
'<param name="bgcolor" value="#E6E6E6"/>'+
'<embed src="./xspf/xspf_player_slim.swf?playlist_url='+getPlayfile(songId)+'&autoplay=true"'+
'quality="high" bgcolor="#E6E6E6" name="xspf_player" allowscriptaccess="sameDomain"'+
'type="application/x-shockwave-flash"'+
'pluginspage="http://www.macromedia.com/go/getflashplayer"'+
'class="align-center" height="15" width="330"> </embed>'+
'</object>';
}
}
var sid = 'song_overlay_'+songId;
return '<div id="'+sid+'" class="songOverlay">'+songContent+'</div>';
}
function getPlayfile(songId) {
return './xspf/songs/playlist'+songId+'.xspf';
}
function doShowContent(id) {
var nodes = new Array();
nodes[0] = 'vw_pl';
nodes[1] = 'cr_pl';
nodes[2] = 'vw_pl_item';
for(i=0;i<nodes.length;i++)
{
doHideContent(nodes[i]);
}
var node = document.getElementById(id).style;
node.display="block";
}
function doHideContent(id) {
document.getElementById(id).style.display="none";
}
A função showSong() cria uma sobreposição de canções baseada no tipo de canção. Se o conteúdo da url de origem da canção for não-url (ou seja, uma marca <object>), então esse conteúdo da URL de origem é incorporado na página HTML. O plug-in no navegador permite-nos executar o conteúdo. Se a URL da canção for uma URL, exibimos XSPF Music Player, que precisa de um arquivo de metadados para reproduzir uma canção. Crie os arquivos de metadados na próxima seção. Finalmente, acima adicionamos as funções doShowContent() e doHideContent() para mostrar e ocultar <div> marcas.
Adicionando o XSPF Music Player
Nesta seção, integramos um tocador de músicas em nosso aplicativo.
Na pasta Páginas da Web do aplicativo de música, crie as subpastas /music/xspf/songs.
Use o modelo Arquivo vazio na categoria Outro do assistente para Novo arquivo para criar um arquivo chamado playlist1.xspf.
Crie outras cinco listas de reprodução, de playlist2.xspf para playlist6.xspf.
Para encontrar as informações para preencher a localização e os elementos de imagem das listas de reprodução 2 a 6, consulte o arquivo musicdb.sql ou abra o banco de dados Música e procure o conteúdo da tabela Canção das canções 2-6:
YouTube: NetBeans 6.0, Building an End-to-End RESTful Web Application
Para enviar comentários e sugestões, obter suporte e se manter informado sobre os mais recentes desenvolvimentos dos recursos de desenvolvimento de Java EE do NetBeans IDE, inscreva-se na lista de endereçamento de .
