Гостевая
Форум
Разделы
Главная страница
Js скрипты
Php скрипты
Html шаблоны
Книги по Web дизайну
Статьи


Главная страница статей --> Хитрости при программировании php, заметки по базам данных

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

Источник: realcoding.net

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&#8243;,
“Name”:”Juan Hurtado”,
“Position”:”System Analist”,
“Phone Number”:”81001121&#8243;,
“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.
}

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



Похожие статьи:
- Изменение внешнего вида счетчика в CNStats
- Программная выписка счета в системе WebMoney
- Графический счетчик на Perl
- Работа с хэшами в Perl
- Создание wap-страниц (в формате *.wml)
- За что можно схлопотать бан от поисковых систем!
- Освоение Ajax: Использование XML в запросах и ответах
- Некоторые аспекты использования пользовательских функций в предложениях SQL.
- ADO и XML
- Динамические формы - проверка ввода на JavaScript
- SQL Server в вопросах и ответах
- Схемы блокировок в Базах Данных
- Динамические SQL-запросы Oracle для ускорения выборок данных


Оглавление | Обсудить на форуме | Главная страница сайта | Карта сайта |
[0.002]