1.1. Презентация Я написал это небольшое руководство для людей, которые хотят научится создавать динамические приложения пользуясь GWT (Google Web Toolkit) в AMP (Apache MySQL PHP) среде. Основная идея в том, чтобы написать небольшой и очень простое приложение с использованием PHP и MySQL на стороне сервера, GWT для реализации интерфейса, JSON для обмена данными между клиентской и северной частями.
1.2. О JSON JSON (JavaScript Object Notation) - это легкий и удобный формат обмена данными. Отличительной чертой является то, что он прост и понятен для человека. Этот формат легко обрабатывается и генерируется программами. Он основан на языке JavaScript, Standard ECMA-262 3rd Edition — December 1999. JSON — это текстовый формат, не зависящий от языка программирования. JSON использует соглашения близкие к Си-подобным языкам, включая C, C++, C#, Java, JavaScript, Perl, Python, и много других. Все это делает JSON идеальным языком для обмена данными. Вы можете найти много полезной информации о JSON здесь www.json.org (и тут: ru.wikipedia.org/wiki/JSON)
1.3. О GWT GWT (Google Web Toolkit) - это инструмент позволяющий легко создавать AJAX (ru.wikipedia.org/wiki/AJAX) приложения на языке JAVA, проще говоря, GWT “переводит” ваш JAVA код в HTML и JavaScript. Подробнее о GWT можно прочесть по адресу http://code.google.com/webtoolkit/
1.4. Об этом руководстве Мы сделаем небольшое приложение для поиска информации по сотрудникам в базе данных MySQL, используя в качестве параметра поиска имя сотрудника.
2. Работа над серверной частью.
2.1. База данных Нам нужна всего одна таблица, которая будет называться ‘directory’, и которую мы заполним информацией о сотрудниках:
2.2. PHP скрипт Для доступа к данным базы напишем PHP скрипт. Он будет выбирать данные и преобразовывать в JSON формат. Для этого будем использовать JSON PHP class, который можно скачать отсюда http://pear.php.net/pepr/pepr-proposal-show.php?id=198. Этот класс позволяет преобразовывать значения из PHP в JSON формат и отправлять их браузеру. Файл ‘index.php’ будет содержать следующий код:
8. $conector = mysql_connect(’localhost’, ‘root’, ‘juan’) or die(mysql_error()); 9. mysql_select_db(’JSONPHP’) or die(mysql_error()); 10.
11. //формируем запрос 12.
13. $sqlQuery = “SELECT * FROM directory WHERE name LIKE ‘”. $_REQUEST[’tosearch’]. “%’”; 14. $dataReturned = mysql_query($sqlQuery) or die(mysql_error()); 15. $i = 0; 16.
И это весь код. Вывод этого php скрипта должен быть похож на следующие: {”item”:[{ “Employe Number”:”110009″, “Name”:”Juan Hurtado”, “Position”:”System Analist”, “Phone Number”:”81001121″, “Location”:”Monterrey City”}] }
Теперь пора заняться интерфейсом и GWT.
3. Работа над клиентской частью.
3.1 Пример с JSON RPC На сайте http://code.google.com/webtoolkit/ есть несколько примеров использования GWT. Один из них показывает, как использовать GWT в связке с JSON для доступа к сервису Yahoo. Мы возьмем за основу нашего интерфейса пример JSON RPC.
3.2 Создание нового приложения Используя projectCreator.cmd (этот файл находится в дистрибутиве GWT) создадим новый проект:
C:>projectCreator.cmd -eclipse PHPJSON -out PHPJSON Created directory PHPJSONsrc Created file PHPJSON.project Created file PHPJSON.classpath
Теперь создадим новый проект для eclipse с помощью applicationCreator.cmd:
Created directory PHPJSONsrccomjuan Created directory PHPJSONsrccomjuanclient Created directory PHPJSONsrccomjuanpublic Created file PHPJSONsrccomjuanPHPJSON.gwt.xml Created file PHPJSONsrccomjuanpublicPHPJSON.html Created file PHPJSONsrccomjuanclientPHPJSON.java Created file PHPJSONPHPJSON.launch Created file PHPJSONPHPJSON-shell.cmd Created file PHPJSONPHPJSON-compile.cmd
Пример JSON RPC содержит классы, которые позволяют обрабатывать иформацию в формате JSON. (Тут говорится о старой версии примера JSON RPC; в новой версии примера JSON RPC эти файлы не идут в дистрибутиве примера, так как эти классы стали стандартными в новой версии GWT. Но никто не мешает вам следовать примеру, все это будет работать и с новой версией GWT) Скопируем из примера следующие файлы в папку PHPJSONsrccomjuanclient:
Во всех файлах нужно заменить строчку с данными о пути пакета. (в нашем случае нужно заменить package com.google.gwt.sample.json.client; на package com.juan.client;) Также исправьте пути в файле JSONParser.java. Затем импортируем наш проект в Eclipse как написано в документации по GWT. Запустите Eclipse и кликните в меню File -> Import. В появившемся окне выберите пункт ‘Existing Projects into Workspace’, укажите путь к файлу .project в следующем окне. После этого вы должны увидеть ваш GWT проект:
Создадим класс JSONRequester и опишем следующие метод:
1. public Widget initializeMainForm() { 2. /* 3. * Иницилизация и установка панели, которая будет содержать 4. * поисковую форму и вывод результата 5. */ 6.
7. FocusPanel fpn = new FocusPanel(); 8. Grid gd = new Grid(1,2); 9.
Как вы видете создается элемент FocusPanel, затем мы прикрепляем эелемент Grid(Сетка), на этой сетке располагаем все нужные элементы. В обработчике клика по кнопке создается класс SearchButtonClickListener, которые будет содержать следующие строки:
1. private class SearchButtonClickListener implements ClickListener { 2.
3. public void onClick(Widget sender) { 4. /* 5. * Когда пользователь нажимает кнопку мы получаем URL. 6. */ 7. itemNumber = 0; 8. doFetchURL(); 9. } 10.
Этот класс содержит метод doFetchURL(), с помощью которого находится URL и вызывается класс JSONResponseTextHandler() для выполнения операций над JSON документом:
1. private class JSONResponseTextHandler implements ResponseTextHandler { 2.
3. public void onCompletion(String responseText) { 4. /* 5. * После того, как полученны данные в формате JSON мы 6. * обрабатываем их и выводим результат 7. */ 8.
Все эти методы из файла JSON.java гугловкого примера JSON RPC. Метод requestChildrenGrid(JSONValue jsonValue) разбивает JSON документ на ключи и значения, ключи обрамляются тэгами “<B>”и прикрепляются к Grid(сетке), которая в свою очередь прикрепляется к FocusPanel. И наконец, в файле PHPJSON.java мы выводим результат на главную панель:
1. public void onModuleLoad() { 2. /* 3. * Для красоты используем TabPanel 4. */ 5. TabPanel tp = new TabPanel(); 6. JSONRequester myJson = new JSONRequester(); 7.