Image

Imagelomka wrote in Imageru_java

Category:

Клиент-серверный фреймворк

Приветствие, дорогие коллеги !

Хочу поделиться общей частью, своих клиент-серверных приложений, на 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(entry);
  return params.put("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: Для эстетов) - добавлена поддержка схем. Теперь всё можно писать валидно и вэллформенно:

<!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.