Новости » Google Web Toolkit. Небольшое руководство

Google Web Toolkit. Небольшое руководство

0. О статье.

Это перевод статьи Джоана Хуртадо (Juan Hurtado) “GWT Small Guide”. Оригинал доступен на испанском и английском. Возможно перевод получится грубым, так как я очень торопился, буду рад узнать ваше мнение насчет качества перевода.

Потапов Геннадий (TermiT)

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

  1. < ?
  2.  
  3. // вызов JSON.php
  4. require_once(”JSON.php”);
  5.  
  6. // коннект к базе
  7.  
  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.  
  17. while($row = mysql_fetch_array($dataReturned)){
  18.  
  19. // заполняем массив $value данными.
  20.  
  21. $value{”item”}{$i}{”Employe Number”}= $row[’enumber’];
  22. $value{”item”}{$i}{”Name”}= $row[’name’];
  23. $value{”item”}{$i}{”Position”}= $row[’position’];
  24. $value{”item”}{$i}{”Phone Number”}= $row[’phnumber’];
  25. $value{”item”}{$i}{”Location”}= $row[’location’];
  26. $i++;
  27. }
  28.  
  29. // использую JSON.php конвертируем данные в JSON формат и отправляем в браузер
  30.  
  31. $json = new Services_JSON();
  32. $output = $json->encode($value);
  33. print($output);
  34. ?>

И это весь код. Вывод этого 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 и опишем следующие метод:

  1. public Widget initializeMainForm() {
  2. /*
  3. * Иницилизация и установка панели, которая будет содержать
  4. * поисковую форму и вывод результата
  5. */
  6.  
  7. FocusPanel fpn = new FocusPanel();
  8. Grid gd = new Grid(1,2);
  9.  
  10. b1.setText(”Search”);
  11. b1.addClickListener(new SearchButtonClickListener());
  12.  
  13. gd.setWidget(0, 0, txtBox);
  14. gd.setWidget(0, 1, b1);
  15.  
  16. gdOut.setWidget(0,0,gd);
  17.  
  18. gdOut.setBorderWidth(1);
  19. gdOut.setWidth(”500px”);
  20.  
  21. childGrid.setCellPadding(0);
  22. childGrid.setCellSpacing(0);
  23. childGrid.setWidth(”490px”);
  24.  
  25. fpn.add(gdOut);
  26.  
  27. return fpn;
  28. }

Как вы видете создается элемент 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.  
  11. private void doFetchURL() {
  12. /*
  13. * Получаем URL и вызываем обработчик
  14. */
  15. b1.setText(”Searching …”);
  16. if (!HTTPRequest.asyncGet(DEFAULT_SEARCH_URL + “?tosearch=” + txtBox.getText(),
  17.  
  18. new JSONResponseTextHandler())) {
  19.  
  20. b1.setText(”Search”);
  21. }
  22. }
  23. }

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

  1. private class JSONResponseTextHandler implements ResponseTextHandler {
  2.  
  3. public void onCompletion(String responseText) {
  4. /*
  5. * После того, как полученны данные в формате JSON мы
  6. * обрабатываем их и выводим результат
  7. */
  8.  
  9. JSONObject jsonObject;
  10. try {
  11. jsonObject = JSONParser.parse(responseText);
  12. displayJSONObject(jsonObject);
  13.  
  14. } catch (JSONException e) {
  15.  
  16. }
  17.  
  18. b1.setText(”Search”);
  19.  
  20. }
  21.  
  22. private void displayJSONObject(JSONObject jsonObject) {
  23. /*
  24. * Очищаем Grid(сетку) и заполняем новыми результатами
  25. */
  26.  
  27. childGrid.clear();
  28. requestChildrenGrid(jsonObject);
  29. gdOut.setWidget(1,0,childGrid);
  30.  
  31. }
  32.  
  33. private void requestChildrenGrid(JSONValue jsonValue){
  34. /*
  35. * Заполнение Grid(сетки)
  36. */
  37.  
  38. JSONObject jsonObject;
  39. if(jsonValue.isArray() != null){
  40. for(int i = 0; i < jsonValue.isArray().size();i++){
  41. requestChildrenGrid(jsonValue.isArray().get(i));
  42. childGrid.setWidget(itemNumber,0,new HTML(”<HR/>”));
  43. childGrid.setWidget(itemNumber,1,new HTML(”<hr />”));
  44.  
  45. itemNumber++;
  46. int resizeNumber = itemNumber + 1;
  47. childGrid.resize(resizeNumber,2);
  48. }
  49. } else {
  50.  
  51. if ((jsonObject = jsonValue.isObject()) != null) {
  52. String[] keys = jsonObject.getKeys();
  53.  
  54. for (int i = 0; i < keys.length; ++i) {
  55. String key = keys[i];
  56. childGrid.setWidget(itemNumber,0,new HTML(”<B>”+ key +”:”));
  57. childGrid.setWidget(itemNumber,1,new HTML(jsonObject.get(key).toString()));
  58. requestChildrenGrid(jsonObject.get(key));
  59.  
  60. itemNumber++;
  61. int resizeNumber = itemNumber + 1;
  62. childGrid.resize(resizeNumber,2);
  63. }
  64. } else if (jsonValue != null) {
  65. //
  66.  
  67. } else {
  68. //
  69. }
  70.  
  71. }
  72. }
  73.  
  74. }

Все эти методы из файла 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.  
  8. tp.add(myJson.initializeMainForm() ,”Corporate Directory”);
  9.  
  10. tp.selectTab(0);
  11.  
  12. RootPanel.get().add(tp);
  13. }

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


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