NITRO

ЕЛЕМЕНТИ

Nitrogen Elements – це двигун шаблонів HTML для мови Erlang, у якому всі HTML теги рендеряться з Erlang рекордів.

Працюючи з N2O вам взагалі не потрібно користуватись HTML. Натомість ви визначаєте вашу сторінку у вигляді Erlang рекордів, відповідно сторінка генерується, з перевіркою типів, під час компіляції. Це класичний підхід CGI для компільованих сторінок, який надає всі переваги перевірки помилок під час компіляції, та визначає DSL для клієнт- та серверного рендерингу.

Nitrogen Elements, за своєю природою, є примітивними UI елементами управління, які можуть бути використані для побудови Nitrogen сторінок з внутрішнім DSL Erlang-а. Вони компілюються в HTML та JavaScript. Поведінка всіх елементів контролюється на стороні сервера, а весь зв'язок між веб-переглядачем та сервером здійснюється за допомогою WebSocket каналів. Отже, вам не потрібно використовувати POST запити чи HTML форми. Тобто:


 #textbox { id=userName, body= <<"Anonymous">> },
 #panel { id=chatHistory, class=chat_history }

згенерує наступний html


 <input value="Anonymous" id="userName" type="text"/>
 <div id="chatHistory" class="chat_history"></div>

nx_textbox — HTML TextBox
nx_input — HTML Input
nx_textarea — HTML TextArea
nx_th — HTML Table Header
nx_tr — HTML Table Row
nx_table — HTML Table
nx_select — HTML Select
nx_button — HTML Button
nx_fieldset — HTML Fieldset
nx_image — HTML Image
nx_label — HTML Label
nx_radio — HTML RadioButton
nx_password — HTML Password
nx_upload — NX Upload
nx_calendar — NX Calendar
nx_comboLookup — NX ComboLookup
nx_dtl — DTL Django

ПОДІЇ

Nitrogen Actions – це двигун шаблонів JavaScript подій для мови Erlang, у якому всі події та обробники кнопок рендеряться з мови Erlang.


    nitro:update(loginButton,
      #button{id=loginButton,
              body="Login",postback=login,source=[user,pass]});

Це згенерує наступний HTML:


 <input value="Login" id="loginButton" type="button"/>

та JavaScript код:


   qi('loginButton').outerHTML='<button id=\"loginButton\"
     type=\"button\">Login</button>';{var x=qi('loginButton');
     x && x.addEventListener('click',function (event){
      event.preventDefault(); { if (validateSources(['user','pass'])) {
        ws.send(enc(tuple(atom('pickle'),bin('loginButton'),
           bin('b840bca20b3295619d1157105e355880f850bf0223f2f081549dc
           8934ecbcd3653f617bd96cc9b36b2e7a19d2d47fb8f9fbe32d3c768866
           cb9d6d85700416edf47b9b90742b0632c750a4240a62dfc56789e0f5d8
           590f9afdfb31f35fbab1563ec54fcb17a8e3bad463218d6402f1304'),
           [tuple(tuple(string('loginButton'),bin('detail')),[]),
            tuple(atom('user'),querySource('user')),
            tuple(atom('pass'),querySource('pass'))]))); }
       else console.log('Validation Error'); }});};

action_bind — JavaScript Bind
action_confirm — JavaScript Confirm
action_event — JavaScript Postback Event

РЕНДЕРИНГ

wf_render — Render двигун для елементів та подій
wf_event — Рендерер для JavaScript подій postback
wf_tags — Рендерер HTML5 XML

СПЕЦИФІКАЦІЯ

NITRO підтримує стрімінг попередньо відрендерених форм через WebSocket та MQTT, та надає JavaScript бібліотеку невеличкого розміру для роботи з моделлю документа. Ця бібліотека зберігає сумістність для різних імплементацій.

NITRO:


 -spec render(list(#element{})) -> binary().
 -spec wire(list(#action{})) -> [].
 -spec insert_top(atom(), list(#element{})) -> [].
 -spec insert_bottom(atom(), list(#element{})) -> [].
 -spec update(atom(), list(#element{})) -> [].
 -spec clear(atom()) -> [].
 -spec remove(atom()) -> [].

 -record(init,    { token  = [] :: [] | binary() }).
 -record(pickle,  { source = [], pickled=[], args=[] }).
 -record(flush,   { data   = [] :: [] | term() }).
 -record(direct,  { data   = [] :: [] | term() }).
 -record(ev,      { module = [] :: [] | atom(),
                    msg    = [] :: [] | term(),
                    trigger= [] :: [] | atom() | binary(),
                    name   = [] :: [] | atom() | binary() }).