В этом руководстве описана разработка клиентских приложений Web 2.0 с помощью функции "RESTful Web Service Remoting" в среде IDE NetBeans 6.0 или 6.1. Эта функция состоит из мастера, который позволяет создавать клиентские заглушки JavaScript из классов ресурсов веб-службы RESTful. При этом упрощается процесс получения доступа к веб-службам RESTful для клиентских приложений. Мастер позволяет выбирать проект из списка проектов, содержащих веб-службы RESTful. После выбора проекта и завершения работы мастера создаются клиентские заглушки JavaScript, которые формируют основу клиентского приложения. В этом руководстве представлен полное описание работы с этими возможностями.
Дополнительно, в целях поиска и устранения ошибок, можно загрузить готовые примеры и изучить исходный код.
Для работы с этим руководством также требуется подключаемый модуль "RESTful Web Services". В среде IDE перейдите в диспетчер подключаемых модулей в меню "Tools" и проверьте, установлен ли подключаемый модуль "RESTful Web Services", на вкладке "Installed". Если нет, установите его на вкладке "Available Plugins", как показано ниже:
Создание базы данных музыкальных файлов
В этом разделе рассматривается создание новой базы данных "Music". Она будет заполнена данными о песнях.
Создайте базу данных.
В среде IDE NetBeans 6.0 выберите "Tools > Java DB Database > Create Database".
В среде IDE NetBeans 6.1 откройте вкладку "Services" и щелкните правой кнопкой мыши узел "Java DB" или "MySQL". (Указания по настройке MySQL в NetBeans приведены в разделе Подключение к базе данных MySQL.) Запустите сервер. Затем снова щелкните правой кнопкой мыши узел базы данных и выберите "Create Database".
Присвойте базе данных имя music. В случае базы данных Java присвойте имя пользователя music и пароль music. В случае MySQL введите данные пользователя root и не вводите имя схемы.
Откройте сценарий "Music", а затем выберите подключение "Music" на панели инструментов в верхней части редактора SQL:
Нажмите кнопку "Run" на панели редактора SQL, после чего сценарий будет загружен в базу данных. Так как схема "MUSIC" не существует, могут появиться сообщения об ошибках, однако они не оказывают влияния на результат, который будет получен в этом руководстве. Если сценарий выполнен успешно, в узле подключения к базе данных в режиме просмотра служб появится структура базы данных.
Создание классов объектов из базы данных "Music"
В этом разделе описано создание классов объектов из базы данных с помощью мастеров.
Выберите "File > New Project". В области "Categories" выберите "Web". В области "Projects" выберите "Web Application" и нажмите кнопку "Next".
В поле "Project Name" введите MusicDB.
В поле "Server" выберите сервер, например, "GlassFish". Нажмите кнопку "Finish".
Щелкните правой кнопкой мыши узел проекта MusicDB и выберите "New -> Entity Classes from Database".
Появится мастер "New Entity Classes from Database".
В раскрывающемся списке "Data Source" выберите "New Data Source". Откроется диалоговое окно "Create Data Source".
В узле "Data Source" выберите "New Data Source". Появится диалоговое окно "Create Data Source".
В поле "JNDI Name" введите "jdbc/music". В области "Database Connection" выберите в раскрывающемся списке выберите подключение derby или mysql /music. На экране должно отображаться следующее: Если все верно, нажмите кнопку "OK".
В списке "Available Tables" выберите PLAYLIST, SONG и PLAYLIST_SONG. Нажмите кнопку "Add", а затем кнопку "Next".
Нажмите кнопку "Create Persistence Unit". Примите все указанные ниже значения по умолчанию и нажмите кнопку "Create".
В поле "Package Name" введите org.music. Нажмите кнопку "Finish".
В среде IDE создается два класса объектов: Playlist.java и Song.java.
Создание веб-служб RESTful из классов объектов
В этом разделе для создания веб-служб RESTful из классов объектов, полученных в предыдущем разделе, используется мастер.
Щелкните правой кнопкой мыши проект и выберите "New > RESTful Web Services from Entity Classes".
Примечание: Если указанный выше пункт меню недоступен, необходимо установить подключаемый модуль "RESTful Web Services", как описано в начале этого руководства.
В мастере создания веб-служб RESTful из классов объектов нажмите кнопку "Add All", а затем нажмите кнопку "Next". Откроется страница "Generated Classes". При этом может потребоваться добавить org.music к началу имен пакетов. Ниже приведена правильно заполненная страница:
Нажмите кнопку "Finish".
Ниже приведены созданные мастером классы:
Тестирование веб-служб RESTful
В этом разделе в качестве тестового клиента для веб-служб RESTful, созданных в предыдущем разделе, используется приложение GlassFish Tester.
Щелкните правой кнопкой мыши узел проекта и выберите "Test RESTful Web Services".
После сборки и развертывания веб-приложения в обозреватель по умолчанию открывается страница тестового клиента.
Для просмотра информации из базы данных щелкните ссылку, как показано ниже:
Закройте обозреватель.
Создание клиентских заглушек веб-службы RESTful
В этом разделе будет создано новое веб-приложение. Затем с помощью мастера будут созданы клиентские заглушки JavaScript, которые будут взаимодействовать с веб-службами RESTful.
Выберите "File > New Project". В области "Categories" выберите "Web". В области "Projects" выберите "Web Application" и нажмите кнопку "Next".
В поле "Project Name" введите MusicApp.
В поле "Server" выберите сервер, например, "GlassFish". Нажмите кнопку "Finish".
Щелкните правой кнопкой мыши узел MusicApp и выберите "New > RESTful Web Service Client Stubs".
Снимите флажок "Create jMaki Rest Components", поскольку будут использоваться только основные заглушки JavaScript.
Щелкните "Add Project" и добавьте проект "MusicDB", созданный ранее, как показано ниже:
Нажмите кнопку "Finish".
Выполните проект "MusicApp". Откроется обозреватель. Измените URL-адрес обозревателя на http://localhost:8080/MusicApp/rest/TestStubs.html.
Если клиентские заглушки созданы правильно,
то в строке "Playlists" будут отображены идентификаторы URI списков воспроизведения, а в строке "Songs" – идентификаторы URI песен.
Представление списков воспроизведения
В этом разделе для приложения создается страница index.html. Затем загружается таблица стилей CSS и соответствующие изображения.
В приложении "Music" в папке "Web Pages" создайте подпапку с именем music. Для создания подпапки выберите в мастере создания папок в категории "Other" шаблон "Folder". В этой новой подпапке создайте страницу index.html.
Вставьте в новый файл следующий код HTML:
<!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"/>
<!-- Добавление местоположения сценариев удаленного доступа MusicDB, созданных ранее:-->
<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">
<!-- Добавление к приложению баннера:-->
<div class="banner2"><img src=". /images/b.gif" width="500" height="100"/></div>
</div> <!-- header -->
<!-- Добавление меню в левую часть страницы:-->
<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>
<!-- Добавление трех тегов DIV с идентификатором "vw_pl".
Это привязка для отображения всех списков воспроизведения.
<idiom-segment id="45000238">It is left for you
an excerise to user to create a playlist.--></b>
<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 -->
<b><!-- Наконец, добавим привязку для вызова функции "showPlaylists()" языка JavaScript:--></b>
<script language="Javascript">
showPlaylists();
</script>
</body>
</html> 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>
В этом разделе в приложение добавляется возможность вывода списков файлов из базы данных для воспроизведения. Для этого необходимо написать сценарий для чтения всех списков воспроизведения с помощью ранее созданных сценариев из папки rest/musicdb.
В приложении "Music", в папке music создайте файл JavaScript с именем main.js. Для этого в мастере создания файла из категории "Other" выберите шаблон JavaScript.
Примечание: Для экономии времени или при возникновении проблем загрузите main.js.
Вставьте следующий фрагмент JavaScript в файл 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');
}
}
}
В приведенном выше фрагменте сначала создается глобальная переменная playlistsObj, которую можно использовать в других функциях. Затем создается объект Playlists и устанавливается его uri. Далее создается кнопка с текстом Create Playlist для создания списка воспроизведения. Объект Playlists использует функцию с именем getChildren, которая возвращает список объектов Playlist, проинициализированных с uri. У объекта Playlist есть функции, такие как getTitle() и getDescription(), для отображения информации каждого из списков воспроизведения. Для просмотра всех песен в списке воспроизведения приложения "Music" предоставляется ссылка (javascript:showPlaylist(index)), а также информация о списке. Наконец, обновляется тег <div> с идентификатором vw_pl со всем собранным содержимым для отображения списков воспроизведения.
Вставьте следующий фрагмент JavaScript в файл 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');
}
Функция showPlaylist(index) принимает параметр, который идентифицирует список воспроизведения, выбранный пользователем в массиве playlistsObj. После извлечения подробной информации списка воспроизведения выполняется вызов playlist.getSongs(), который возвращает объект Songs. Объект Songs представляет собой контейнер для всех песен в списке воспроизведения. После создания кнопок добавления, изменения и удаления списка воспроизведения следует выполнить итерации для списка песен в объекте Songs. Для этого необходимо вызвать songsObj.getChildren(). У объекта Songs есть функции getTitle() и getSourceUrl(). Эти функции позволяют отображать подробные данные о песне, а также исходный URL-адрес песни. Затем для каждой песни добавляется ссылка javascript:showSong(songId, title, sourceUrl), дающая возможность воспроизводить музыку. И наконец, обновляется тег <div> с идентификатором vw_pl_item_content с собранным содержимым для отображения всех песен в списке воспроизведения.
Вставьте следующий фрагмент JavaScript в файл main.js для отображения песни, выбранной из списка воспроизведения:
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";
}
Функция showSong() создает наложение песни, основанное на типе песни. Если содержимое исходного URL-адреса песни не является URL-адресом (т.е. тег <object>), то содержимое исходного URL-адреса вкладывается в страницу HTML. Подключаемый модуль в обозревателе позволяет выполнить содержимое. Если URL-адрес песни является URL-адресом, то отображается проигрыватель XSPF Music Player, которому для воспроизведения песни необходим файл метаданных. Файлы метаданных будут создаваться в следующем разделе. И наконец, добавляются функции doShowContent() и doHideContent(), позволяющие отобразить и скрыть теги <div>.
Добавление проигрывателя XSPF Music Player
В этом разделе проигрыватель интегрируется в приложение.
В папке приложения "Music" создайте подпапки /music/xspf/songs.
В мастере создания файла в категории "Other" воспользуйтесь шаблоном "Empty File" для создания файла с именем playlist1.xspf.
Создайте еще пять списков воспроизведения, от playlist2.xspf до playlist6.xspf.
Информацию для заполнения элементов местоположения и изображения в списках воспроизведения со второго по шестой см. в файле musicdb.sql, либо откройте базу данных "Music" и просмотрите содержимое таблицы "Song" для песен 2-6:
Оставить комментарии и предложения, обратиться за поддержкой и получить информацию о последних достижениях в области функциональных возможностей разработки для Java EE с помощью среды IDE NetBeans можно в списке рассылки .
