n4u
/
nitro


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
							<!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.space" 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/deps/nitro/man/ua/index.html">UA</a>
      <a href="https://nitro.n2o.space/">EN</a>
    </div>
  </div>
</nav><header>
    <a href="https://github.com/synrc/nitro"><img src="https://synrc.space/images/Synrc Neo.svg?v=1" /></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 2018 © 5HT <a href="https://5ht.co/license.htm">ISC</a>
            </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>
        </ul>
    </section>
    <section>
        <a name="endpoint"></a><h3>ELEMENTS</h3>
        <p> Nitrogen Elements is an 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= &lt;&lt;"Anonymous">> },
 #panel { id=chatHistory, class=chat_history }
        </code></figure>
        <p>will produce</p>
        <figure><code>
 &lt;input value="Anonymous" id="userName" type="text"/&gt;
 &lt;div id="chatHistory" class="chat_history"&gt;&lt;/div&gt;
        </code></figure>

        <ul><li><b><a href="man/element_textbox.htm">element_textbox</a></b> — HTML Text Box</li><li><b><a href="man/element_input.htm">element_input</a></b> — HTML Input</li><li><b><a href="man/element_textarea.htm">element_textarea</a></b> — HTML Text Area</li><li><b><a href="man/element_th.htm">element_th</a></b> — HTML Table Header</li><li><b><a href="man/element_tr.htm">element_tr</a></b> — HTML Table Row</li><li><b><a href="man/element_table.htm">element_table</a></b> — HTML Table</li><li><b><a href="man/element_select.htm">element_select</a></b> — HTML Select</li><li><b><a href="man/element_button.htm">element_button</a></b> — HTML Button</li><li><b><a href="man/element_fieldset.htm">element_fieldset</a></b> — HTML Fieldset</li><li><b><a href="man/element_image.htm">element_image</a></b> — HTML Image</li><li><b><a href="man/element_label.htm">element_label</a></b> — HTML Label</li><li><b><a href="man/element_radio.htm">element_radio</a></b> — HTML Radiobutton</li><li><b><a href="man/element_password.htm">element_password</a></b> — NITRO Password Element</li><li><b><a href="man/element_upload.htm">element_upload</a></b> — NITRO Upload Element</li><li><b><a href="man/element_calendar.htm">element_calendar</a></b> — NITRO Calendar Element</li><li><b><a href="man/element_dtl.htm">element_dtl</a></b> — Django DTL Element</li></ul>

    </section>
    <section>
        <a name="endpoint"></a><h3>ACTIONS</h3>
        <p> Nitrogen Ations is an 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>
 &lt;input value="Login" id="loginButton" type="button"/&gt;
        </code></figure>
       <p>and JavaScript code:</p>
        <figure><code>
   qi('loginButton').outerHTML='&lt;button id=\"loginButton\"
     type=\"button\"&gt;Login&lt;/button&gt;';{var x=qi('loginButton');
     x &#38;&#38; 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>RENDER</h3>
        <ul><li><b><a href="man/wf_render.htm">wf_render</a></b> — Render Engine for Elements and Actions</li>
            <li><b><a href="man/wf_event.htm">wf_event</a></b> — Event JavaScript postback renderer</li>
            <li><b><a href="man/wf_tags.htm">wf_tags</a></b> — HTML5 XML renderer</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>