toloframework

Version:

Javascript/HTML/CSS compiler for Firefox OS or nodewebkit apps using modules in the nodejs style.

43 lines • 5.77 kB

HTML

<!DOCTYPE html><html><head><link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet" type="text/css"></link><title>XJS user manual 666</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta name="description" content="Javascript/HTML/CSS compiler for Firefox OS or nodewebkit apps using modules in the nodejs style."></meta><script defer="null" src="js/@xjs.js"></script><link rel="stylesheet" type="text/css" href="css/@xjs.css"></head><body class="theme-webgl theme-color-bg-B5"><section class="theme-color-bg-B0 theme-elevation-4"><pre><code><h1 id="xjs-against-all-the-boilerplate-">XJS against all the boilerplate!</h1> </code></pre>The Javascript for a module is usually stored in a <code>module.js</code> file. But because writing some sort of code can be fastidious, toloframework can use a <code>module.xjs</code> file to generate Javascript before minification. XJS files are written in a syntax near the JSON one: it is just less restrictive on how you use strings and it allows you to put Javascript comments. XJS is extensible and you can easily add your own code generators. For now, we will focus on the builtin generator: View. <h2 id="xjs-view">XJS View</h2> Writing good code for visual components with data binding can result in lot of unreadable javascript code. View helps you writing such a code in a declarative way. Let's take an example: <div id="tfw.view.checkbox0" class="" style="display:none"></div> To create this checkbox component, all you need is a <code>jsx</code> file and a <code>css</code> file. And you can click on it: it really works! And when it has the focus, you can use the keyboard to toggle its state. And all this without a single line of javascript code. <pre class="custom highlight xjs">// tfw.view.checkbox {View BUTTON view.attribs: { value: false, reversed: false, content: Checkbox } class:tfw-view-checkbox class.ok:{Attrib value} event.tap:{Toggle value} event.keyup:{Toggle value} [ {DIV class:pin [ {DIV class:"bar thm-ele2" class.thm-bgSL|thm-bg2: {Attrib value} } {DIV class:"btn thm-ele2" class.thm-bgS|thm-bg1: {Attrib value} } ]} {DIV class:txt {Attrib content}} ] } </pre> To understand this syntax you must know that permissive JSON uses implicit attribute names. So stuff like <code>{Attrib value}</code> can be translated in pure JSON as <code>{"0": "Attrib", "1": "value"}</code>. Basically, XJS takes an object and generate javascript code. To know which code generator to use, it looks at the attribute "0" of the object. In our case, this is View. A view is an HTML element which can contain other HTML elements or views. When the first implicit attribute is uppercase, this is an HTML element, otherwise this is a View. As you can see here, this view is a BUTTON. The module <code>tfw.view.checkbox</code> will be a class which you can instantiate and use like this: <pre class="custom highlight js">var Checkbox = require("tfw.view.checkbox"); var chk = new Checkbox({ content: "Hello world!" }); document.body.appendChild( chk.$ ); </pre> All views have the <code>$</code> attribute which maps to the root HTML element. Other attributes can be defined with their default values in the XJS object: <pre class="custom highlight xjs">view.attribs: { value: false, reversed: false, content: Checkbox } </pre> </section></body></html>