СТОРІНКИ
ЕЛЕМЕНТИ
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>
ПОДІЇ
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'); }});};