Alterator/class test and btn

Материал из ALT Linux Wiki

Очень часто необходимо получить от пользователя данные и передать их на обработку backend-у. В данном примере мы рассмотрим как это сделать при помощи поля текстового input и обычной кнопки.

HTML

Пример нашего html-кода 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<!-- control administration module -->
<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