Клиент-серверный фреймворк
Приветствие, дорогие коллеги !
Хочу поделиться общей частью, своих клиент-серверных приложений, на java-javascript.
Для простоты восприятия - оформил всё виде небольшого фреймворка.
Если в 18 словах - этот фреймворк (как и все остальные) позволяет сосредоточиться
на реализации бизнес логики, беря на себя все низкоуровневые проблемы.
Хотелось бы ваше услышать мнение, по поводу полезности, и возможности применения, его,
в ваших проектах.
В клиентской части, реализованной на javascript - этот фреймворк позволяет напрямую мапить
скриптовые объекты, на структуру хтмл, и обратно, при помощи "пользовательских" аттрибутов,
и передавать объекты javascript - в прямые вызовы методов серверных классов,
при помощи асинхронных ajax запросов.
На сервере - эти объекты, при помощи интегрированных библиотек json-lib,
commons-beanutils и ezmorph, превращаются в java-объекты нужного типа, которые, затем,
могут сохраняться, при помощи hibernate, jdo, или ещё каких орээмов.
Вот короткий пример, из 2 частей - клиентской и серверной, демонстрирующий это.
Допустим, на яваскриптовом клиенте, у нас есть пустой объект:
На клиенте:
а) создать структуру хтмл, используя фреймворковые аттрибуты form и field, на которую будет мапиться скриптовый объект :
Ввести в поле name - "Neo", а в поле lastName - "Andersen"
Значения в полях - автоматически сохранятся фреймворком, в объекте UserDataForm.data.
г) передать объект с данными, на сервер, в вызове серверного метода:
а) создать сервисный класс, с методом, который будет вызываться из клиента
б) в этом методе - преобразовать JSONObject с данными - в энтити-объект Person
в) сохранить энтити-объект Person.
На сервере:
а) положить Person, с присвоенным id, в поле JSONObject'а
return params.put("person", Person);
На клиенте:
а) в коллбэке вызова серверного сервисного метода - прочитать объект из поля person,
объекта result, передаваемого, как параметр, в вызов коллбэка,
Передать объект person в форму, и обновить её.
UserDataForm.update("data", result.person);
Дляагента смита пользователя - всё выглядит так, что при нажатии на кнопку "add person" -
эта кнопка дизаблится, в поле id - появляется значение, и кнопка отдизабливается.
Более подробно, об устройстве фреймворка, что ещё можно делать, с его помощью,
и как всё запустить - написано на этом сайте.
Он полностью сделан, при помощи этого фреймворка, и содержит интерактивные примеры, с исходными кодами.
Скриптовая часть - совместима с JQuery, и в ней могут использоваться элементы jQuery-UI.
UPD: Для эстетов) - добавлена поддержка схем. Теперь всё можно писать валидно и вэллформенно:
* Source codes in this message was highlighted with Source Code Highlighter.
Хочу поделиться общей частью, своих клиент-серверных приложений, на java-javascript.
Для простоты восприятия - оформил всё виде небольшого фреймворка.
Если в 18 словах - этот фреймворк (как и все остальные) позволяет сосредоточиться
на реализации бизнес логики, беря на себя все низкоуровневые проблемы.
Хотелось бы ваше услышать мнение, по поводу полезности, и возможности применения, его,
в ваших проектах.
В клиентской части, реализованной на javascript - этот фреймворк позволяет напрямую мапить
скриптовые объекты, на структуру хтмл, и обратно, при помощи "пользовательских" аттрибутов,
и передавать объекты javascript - в прямые вызовы методов серверных классов,
при помощи асинхронных ajax запросов.
На сервере - эти объекты, при помощи интегрированных библиотек json-lib,
commons-beanutils и ezmorph, превращаются в java-объекты нужного типа, которые, затем,
могут сохраняться, при помощи hibernate, jdo, или ещё каких орээмов.
Вот короткий пример, из 2 частей - клиентской и серверной, демонстрирующий это.
Допустим, на яваскриптовом клиенте, у нас есть пустой объект:
var userData = {name: "", lastName: ""};
который нам нужно заполнить данными и сохранить на сервере, в энтити-бине, типа:class Person{Long id; String name; String lastName; /**здесь конструкторы и акцессоры*/ } Чтобы сделать это, с помощью представляемого фреймворка - нужно:На клиенте:
а) создать структуру хтмл, используя фреймворковые аттрибуты form и field, на которую будет мапиться скриптовый объект :
<div form="UserDataForm">
id: <span field="data.id"></span>
name: <input field="data.name"/>
lastName: <input field="data.name"/>
</div>
<input type="button" onclick="add2matrix(this)" value="add person"/>б) инициализировать структуру, создав объект формы, и передать в неё объект.build("UserDataForm");
UserDataForm.update("data", userData);
/** UserDataForm - создалась фрэймворком. */в) отредактировать поля объекта, в структуре хтмл.Ввести в поле name - "Neo", а в поле lastName - "Andersen"
Значения в полях - автоматически сохранятся фреймворком, в объекте UserDataForm.data.
г) передать объект с данными, на сервер, в вызове серверного метода:
function add2matrix(command){
callServer("somedomain.somepackage.MatrixService", "addPerson",
{person: UserDataForm.data},
/* коллбэк*/
function (result){
UserDataForm.update("data", result.person);
}, command);
/* command - дизаблится на время обработки запроса.*/
}На сервере: (в качестве орээма используются JDO, поскольку дело происходит на сервере GAE) а) создать сервисный класс, с методом, который будет вызываться из клиента
б) в этом методе - преобразовать JSONObject с данными - в энтити-объект Person
в) сохранить энтити-объект Person.
public class MatrixService extends PersistenceManagerFactory{
@WebRemote JSONObject addPerson(JSONObject params){
JSONObject jsonPerson = params.get("person");
Person person = (Person)JSONObject.toBean(jsonPerson, Person.class);
getPersistenceManager().makePersistent(e ntry);
return params.put("person", Person);
}
} При обратном направлении данных: На сервере:
а) положить Person, с присвоенным id, в поле JSONObject'а
return params.put("person", Person);
На клиенте:
а) в коллбэке вызова серверного сервисного метода - прочитать объект из поля person,
объекта result, передаваемого, как параметр, в вызов коллбэка,
Передать объект person в форму, и обновить её.
UserDataForm.update("data", result.person);
Для
эта кнопка дизаблится, в поле id - появляется значение, и кнопка отдизабливается.
Более подробно, об устройстве фреймворка, что ещё можно делать, с его помощью,
и как всё запустить - написано на этом сайте.
Он полностью сделан, при помощи этого фреймворка, и содержит интерактивные примеры, с исходными кодами.
Скриптовая часть - совместима с JQuery, и в ней могут использоваться элементы jQuery-UI.
UPD: Для эстетов) - добавлена поддержка схем. Теперь всё можно писать валидно и вэллформенно:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:st="st means Stratosphera ClientServerFramework :)">
<body>
<div st:form="XPanel">
<font>XHTML expert:</font> <span st:field="link"></span>
</div>
<script><![CDATA[
enableXhtml("st");
var link = '<a href="http://w4x4.livejournal.com" target="_blank">w4x4</a>';
XPanel = {link: link};
build("XPanel", document);
disableXhtml();
]]></script>
</body>
</html>
* Source codes in this message was highlighted with Source Code Highlighter.
