-
Notifications
You must be signed in to change notification settings - Fork 33
/
index.html
155 lines (148 loc) · 7.86 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="Maxim Sokhatsky" />
<title>NITRO</title>
<link rel="stylesheet" href="https://n2o.dev/blank.css?x=14" />
<link rel="stylesheet" href="https://n2o.dev/zima.css?x=14" />
</head><body><nav>
<a href="https://n2o.dev">DEV</a>
<a href="https://nitro.n2o.dev" style="background:#ededed;">NITRO</a>
<div class="dropdown">
<a onclick="drop()" class="dropbtn">EN</a>
<div id="dropdown" class="dropdown-content">
<a href="https://n2o.dev/ua/deps/nitro/index.html">UA</a>
<a href="https://nitro.n2o.dev/">EN</a>
</div>
</div>
</nav><header>
<a href="https://github.com/synrc/nitro"><img src="https://openmoji.org/data/color/svg/1F525.svg" /></a>
<h1>NITRO</h1>
</header><aside>
<article>
<section>
<h3>SYNOPSIS</h3>
<div>NITRO is <a href="http://nitrogenproject.com">Nitrogen</a>-like Web Framework for Erlang/OTP.
It can be used not only in web applications but also in console applications
that need to perform an HTML5 rendering.
</div>
<br/>
<div>
NOV 2021 © 5HT <a href="https://5ht.co/license.htm">ISC</a><br />
VER 6.11 5.1 4.10
</div>
</section>
<section>
<a name="plugin"></a><h3>USAGE</h3>
<div>You can get rebar dependency and compile it:</div><br/>
<figure>
<code> $ mad get nitro
$ cd deps/nitro
$ mad dep com pla rep</code></figure>
</section>
</article>
</aside><main>
<section>
<a name="endpoint"></a><h3>API</h3>
<ul><li><b><a href="man/nitro.htm">nitro</a></b> — The public Nitrogen Web Framework API</li>
<li><b><a href="man/nitro_n2o.htm">nitro_n2o</a></b> — Implementation as N2O protocol</li>
</ul>
</section>
<section>
<a name="endpoint"></a><h3>ELEMENTS</h3>
<p> Nitrogen Elements is a HTML template engine for Erlang language where
all HTML tags are being rendered from Erlang records.
</p>
<p>With N2O you don’t need to use HTML at all. Instead you define your page in the form of Erlang records so that the page is type checked at the compile time. This is a classic CGI approach for compiled pages and it gives us all the benefits of compile time error checking and provides DSL for client and server-side rendering.</p>
<p>Nitrogen elements, by their nature, are UI control primitives that can be used to construct Nitrogen pages with Erlang internal DSL. They are compiled into HTML and JavaScript. Behavior of all elements is controlled on server-side and all the communication between browser and server-side is performed over WebSocket channels. Hence there is no need to use POST requests or HTML forms. I.e.</p>
<figure><code>
#textbox { id=userName, body= <<"Anonymous">> },
#panel { id=chatHistory, class=chat_history }
</code></figure>
<p>will produce</p>
<figure><code>
<input value="Anonymous" id="userName" type="text"/>
<div id="chatHistory" class="chat_history"></div>
</code></figure>
<ul><li><b><a href="man/nx_textbox.htm">nx_textbox</a></b> — HTML TextBox</li>
<li><b><a href="man/nx_input.htm">nx_input</a></b> — HTML Input</li>
<li><b><a href="man/nx_textarea.htm">nx_textarea</a></b> — HTML TextArea</li>
<li><b><a href="man/nx_th.htm">nx_th</a></b> — HTML Table Header</li>
<li><b><a href="man/nx_tr.htm">nx_tr</a></b> — HTML Table Row</li>
<li><b><a href="man/nx_table.htm">nx_table</a></b> — HTML Table</li>
<li><b><a href="man/nx_select.htm">nx_select</a></b> — HTML Select</li>
<li><b><a href="man/nx_button.htm">nx_button</a></b> — HTML Button</li>
<li><b><a href="man/nx_fieldset.htm">nx_fieldset</a></b> — HTML Fieldset</li>
<li><b><a href="man/nx_image.htm">nx_image</a></b> — HTML Image</li>
<li><b><a href="man/nx_label.htm">nx_label</a></b> — HTML Label</li>
<li><b><a href="man/nx_radio.htm">nx_radio</a></b> — HTML RadioButton</li>
<li><b><a href="man/nx_password.htm">nx_password</a></b> — HTML Password</li>
<li><b><a href="man/nx_upload.htm">nx_upload</a></b> — NX Upload</li>
<li><b><a href="man/nx_calendar.htm">nx_calendar</a></b> — NX Calendar</li>
<li><b><a href="man/nx_comboLookup.htm">nx_comboLookup</a></b> — NX ComboLookup</li>
<li><b><a href="man/nx_dtl.htm">nx_dtl</a></b> — DTL Django</li></ul>
</section>
<section>
<a name="endpoint"></a><h3>ACTIONS</h3>
<p> Nitrogen Actions is a JavaScript template engine for Erlang language where
all events and button reactions are being rendered from Erlang language.
</p>
<figure><code>
nitro:update(loginButton,
#button{id=loginButton,
body="Login",postback=login,source=[user,pass]});
</code></figure>
<p>This will produce the following HTML:
</p><figure><code>
<input value="Login" id="loginButton" type="button"/>
</code></figure>
<p>and JavaScript code:</p>
<figure><code>
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'); }});};
</code></figure>
<ul><li><b><a href="man/action_bind.htm">action_bind</a></b> — JavaScript Bind</li><li><b><a href="man/action_confirm.htm">action_confirm</a></b> — JavaScript Confirm</li><li><b><a href="man/action_event.htm">action_event</a></b> — JavaScript Postback Event</li></ul>
</section>
<section>
<a name="mqtt"></a><h3>SPEC</h3>
<p>NITRO supports streaming of
prerendered forms over WebSocket and MQTT
and provides tiny JavaScript library to work with document model.
This library is compatible across implementations.</p>
<figure><figcaption>NITRO:</figcaption><code>
-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() }).
</code></figure>
<p>
</p>
</section>
</main><footer>
Made with <span class="heart">❤</span> to N2O
</footer>
<script>function drop(){document.getElementById("dropdown").classList.toggle("show");}</script>
</body></html>