topleft topright

Главное меню

Главная
Карта сайта
Все статьи
Контакты

Програмирование Joomla

Полезные решения
Joomla API

Программирование

Ajax
Регулярные выражения
CSS
DHTML
RSS
XML

Photoshop

Кисти для Photoshop
Исходники Photoshop
Уроки Photoshop

Наши работы

Сайты на Joomla
Решения на Joomla
Дизайны сайтов

Услуги

Разработка сайтов
Дополнительные услуги
Раскрутка сайтов
 

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

 Печать E-mail
(0 голосов)

0. О статье.

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

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

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 формат и отправляем в браузер

  31.  
  32. $json = new Services_JSON();
  33. $output = $json->encode($value);
  34. print($output);
  35. ?>

И это весь код. Вывод этого 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:
C:>applicationCreator.cmd -eclipse PHPJSON -out PHPJSON com.juan.client.PHPJSON

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:

 

  • 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. }

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

 


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

 
« Сверхдинамичные веб-интерфейсы   «Hello, закладки!» - Добавить в закладки на AJAX »
Вернуться

Ajax

CSS

DHTML


Украинская Баннерная Сеть
PR и тИЦ