Alterator/class test and btn
Актуально для alterator-4.17-alt3 alterator-fbi-5.26-alt1 28.05.2010
Очень часто необходимо получить от пользователя данные и передать их на обработку backend-у. В данном примере мы рассмотрим как это сделать при помощи поля текстового input и обычной кнопки.
HTML
Пример нашего html-кода
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html wf="none">
<body>
<form method="POST">
<table width="100%">
<tr>
<td align="left">
<span translate="_">New Data</span>
</td>
</tr>
<tr>
<td >
<hr />
</td>
</tr>
<tr>
<td >
<span translate="_">New Data:</span>
<input type="text" class="text" name="newdata"/>
<input type="button" name="datadd" value="Create/Add" class="btn"/>
</td>
</tr>
</table>
</form>
</body>
</html>
В соответствии с этим кодом, имеется текстовое поле input с уникальным атрибутом name (обязательный) и значением "newdata". Так же имеется кнопка (input class=btn) с надписью "Create/Add" и уникальный атрибут name (обязательный) со значением "datadd".
При нажатии на копку "Create/Add" значение в поле newdata должно быть передано нашему серверу и далее backend-у.
AJAX
Наш модуль имеет uri/url /mySuper-module
(define-module (ui mySuper-module ajax)
:use-module (alterator woo)
:use-module (alterator ajax)
:export (init))
(define (ui-datadd)
(woo-new "/mySuper-module" 'toBackendData (form-value "newdata"))
)
(define (init)
(form-bind "datadd" "click" ui-datadd)
)
В определении функции init мы осуществляем привязку элемента, действия и функции-обработчика (form-bind "datadd" "click" ui-datadd) : при нажатии ("click") на объект с именем datadd (наша кнопка) вызвать функцию-обработчик ui-datadd.
В свою очередь функция ui-datadd вызывает действие new (woo-new) с параметром toBackendData и значением, полученным из поля с уникальным именем newdata (form-value "newdata"). Это аналогично обращению к backend-у через alterator-cmdline вида alterator-cmdline /mySuper-module action new toBackendData "sometext". К стандартным действия list, type, write, read, new delete, которым соответствуют функции woo-list, woo-type, woo-write, woo-read, woo-new, woo-delete, можно добавить любое свое, тогда вызов несколько измениться. К примеру пусть это будет действие addData. Тогда заменим вызов woo-new на следующий (woo "addData" "/mySuper-module" 'toBackendData (form-value "newdata"))
BACKEND
#!/bin/sh
#turn of auto expansion
set -f
alterator_api_version=1
. alterator-sh-functions
. shell-config
addMyData()
{
echo "$1" >> /tmp/mysuperconfig.file.txt
}
on_message(){
case "$in_action" in
new)
[ -n "$in_toBackendData" ] && addMyData "$in_toBackendData"
;;
esac
}
message_loop
Данный backend, при получении значения в переменной in_action (действие), проверяет соответствие слову new. Хотя это может быть любым другим действием, к примеру addData. Если соответствие найдено, то проверяется переменная in_toBackendData на наличие значения, если проверка успешная, вызывается функция addMyData с параметром in_toBackendData, которая просто записывает этот параметр в файл /tmp/mysuperconfig.file.txt