1. Введение.

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’ будет содержать следующий код:


< ?

// вызов JSON.php
require_once(”JSON.php”);

// коннект к базе

$conector = mysql_connect(’localhost’, ‘root’, ‘juan’) or die(mysql_error());
mysql_select_db(’JSONPHP’) or die(mysql_error());

//формируем запрос

$sqlQuery = “SELECT * FROM directory WHERE name LIKE ‘”. $_REQUEST[’tosearch’]. “%’”;
$dataReturned = mysql_query($sqlQuery) or die(mysql_error());
$i = 0;

while($row = mysql_fetch_array($dataReturned)){

// заполняем массив $value данными.

$value{”item”}{$i}{”Employe Number”}= $row[’enumber’];
$value{”item”}{$i}{”Name”}= $row[’name’];
$value{”item”}{$i}{”Position”}= $row[’position’];
$value{”item”}{$i}{”Phone Number”}= $row[’phnumber’];
$value{”item”}{$i}{”Location”}= $row[’location’];
$i++;
}

// использую JSON.php конвертируем данные в JSON формат и отправляем в браузер

$json = new Services_JSON();
$output = $json->encode($value);
print($output);
?>

И это весь код. Вывод этого 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 PHPJSON\src
Created file PHPJSON\.project
Created file PHPJSON\.classpath
Теперь создадим новый проект для eclipse с помощью applicationCreator.cmd:
C:\>applicationCreator.cmd -eclipse PHPJSON -out PHPJSON com.juan.client.PHPJSON

Created directory PHPJSON\src\com\juan
Created directory PHPJSON\src\com\juan\client
Created directory PHPJSON\src\com\juan\public
Created file PHPJSON\src\com\juan\PHPJSON.gwt.xml
Created file PHPJSON\src\com\juan\public\PHPJSON.html
Created file PHPJSON\src\com\juan\client\PHPJSON.java
Created file PHPJSON\PHPJSON.launch
Created file PHPJSON\PHPJSON-shell.cmd
Created file PHPJSON\PHPJSON-compile.cmd

Пример JSON RPC содержит классы, которые позволяют обрабатывать иформацию в формате JSON. (Тут говорится о старой версии примера JSON RPC; в новой версии примера JSON RPC эти файлы не идут в дистрибутиве примера, так как эти классы стали стандартными в новой версии GWT. Но никто не мешает вам следовать примеру, все это будет работать и с новой версией GWT) Скопируем из примера следующие файлы в папку PHPJSON\src\com\juan\client:

• JSONArray.java
• JSONBoolean.java
• JSONException.java
• JSONNumber.java
• JSONObject.java
• JSONParser.java
• JSONString.java
• JSONValue.java

Во всех файлах нужно заменить строчку с данными о пути пакета. (в нашем случае нужно заменить 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 и опишем следующие метод:


public Widget initializeMainForm() {
/*
* Иницилизация и установка панели, которая будет содержать
* поисковую форму и вывод результата
*/

FocusPanel fpn = new FocusPanel();
Grid gd = new Grid(1,2);

b1.setText(”Search”);
b1.addClickListener(new SearchButtonClickListener());

gd.setWidget(0, 0, txtBox);
gd.setWidget(0, 1, b1);

gdOut.setWidget(0,0,gd);

gdOut.setBorderWidth(1);
gdOut.setWidth(”500px”);

childGrid.setCellPadding(0);
childGrid.setCellSpacing(0);
childGrid.setWidth(”490px”);

fpn.add(gdOut);

return fpn;
}

Как вы видете создается элемент FocusPanel, затем мы прикрепляем эелемент Grid(Сетка), на этой сетке располагаем все нужные элементы. В обработчике клика по кнопке создается класс SearchButtonClickListener, которые будет содержать следующие строки:


private class SearchButtonClickListener implements ClickListener {

public void onClick(Widget sender) {
/*
* Когда пользователь нажимает кнопку мы получаем URL.
*/
itemNumber = 0;
doFetchURL();
}

private void doFetchURL() {
/*
* Получаем URL и вызываем обработчик
*/
b1.setText(”Searching …”);
if (!HTTPRequest.asyncGet(DEFAULT_SEARCH_URL + “?tosearch=” + txtBox.getText(),

new JSONResponseTextHandler())) {

b1.setText(”Search”);
}
}
}

Этот класс содержит метод doFetchURL(), с помощью которого находится URL и вызывается класс JSONResponseTextHandler() для выполнения операций над JSON документом:


private class JSONResponseTextHandler implements ResponseTextHandler {

public void onCompletion(String responseText) {
/*
* После того, как полученны данные в формате JSON мы
* обрабатываем их и выводим результат
*/

JSONObject jsonObject;
try {
jsonObject = JSONParser.parse(responseText);
displayJSONObject(jsonObject);

} catch (JSONException e) {

}

b1.setText(”Search”);

}

private void displayJSONObject(JSONObject jsonObject) {
/*
* Очищаем Grid(сетку) и заполняем новыми результатами
*/

childGrid.clear();
requestChildrenGrid(jsonObject);
gdOut.setWidget(1,0,childGrid);

}

private void requestChildrenGrid(JSONValue jsonValue){
/*
* Заполнение Grid(сетки)
*/

JSONObject jsonObject;
if(jsonValue.isArray() != null){
for(int i = 0; i < jsonValue.isArray().size();i++){
requestChildrenGrid(jsonValue.isArray().get(i));
childGrid.setWidget(itemNumber,0,new HTML(”

---

”));
childGrid.setWidget(itemNumber,1,new HTML(”

---

”));

itemNumber++;
int resizeNumber = itemNumber + 1;
childGrid.resize(resizeNumber,2);
}
} else {

if ((jsonObject = jsonValue.isObject()) != null) {
String[] keys = jsonObject.getKeys();

for (int i = 0; i < keys.length; ++i) {
String key = keys[i];
childGrid.setWidget(itemNumber,0,new HTML(””+ key +”:”));
childGrid.setWidget(itemNumber,1,new HTML(jsonObject.get(key).toString()));
requestChildrenGrid(jsonObject.get(key));

itemNumber++;
int resizeNumber = itemNumber + 1;
childGrid.resize(resizeNumber,2);
}
} else if (jsonValue != null) {
//

} else {
//
}

}
}

}

Все эти методы из файла JSON.java гугловкого примера JSON RPC. Метод requestChildrenGrid(JSONValue jsonValue) разбивает JSON документ на ключи и значения, ключи обрамляются тэгами “<B>”и прикрепляются к Grid(сетке), которая в свою очередь прикрепляется к FocusPanel. И наконец, в файле PHPJSON.java мы выводим результат на главную панель:

public void onModuleLoad() {
/*
* Для красоты используем TabPanel
*/
TabPanel tp = new TabPanel();
JSONRequester myJson = new JSONRequester();

tp.add(myJson.initializeMainForm() ,”Corporate Directory”);

tp.selectTab(0);

RootPanel.get().add(tp);
}

Вот как должно выглядеть приложение в результате:

Вы можете скачать код клиентской и серверной части отсюда. Надеюсь, это небольшой пример вам помог.