litegui.js

Litegui is a javascript library to create webapps with a desktop look-alike user interface. All the widgets, panels, dialogs, etc are created from Javascript instead of HTML. The upside of this is that this helps to create more dynamic interfaces and gives a lot of flexibility. The downside is that you'll need to write some code to make it all work. If you're looking for a library that just needs some HTML and a couple of event handlers to work, litegui is not what you're looking for. On the other hand, any advanced UI will need a lot of coding and in creating advanced UI's litegui shines.

Creating a UI

So let's start with building something simple. This first introduction will show you how to create a menubar and add some items to it. Please note that the javascript is brief on purpose and doesn't reflect javascript best coding practices. The goal here is to get you up and running as fast as possible.

Start with the following index.html:

<span class="pl-c1"><!DOCTYPE html<span class="pl-kos">></span></span>
<span class="pl-kos"><</span><span class="pl-ent">html</span><span class="pl-kos">></span>
<span class="pl-kos"><</span><span class="pl-ent">head</span><span class="pl-kos">></span>
    <span class="pl-kos"><</span><span class="pl-ent">title</span><span class="pl-kos">></span>Algae<span class="pl-kos"></</span><span class="pl-ent">title</span><span class="pl-kos">></span>
    <span class="pl-kos"><</span><span class="pl-ent">link</span> <span class="pl-c1">type</span>="<span class="pl-s">text/css</span>" <span class="pl-c1">rel</span>="<span class="pl-s">stylesheet</span>" <span class="pl-c1">href</span>="<span class="pl-s">litegui.js/build/litegui.css</span>"<span class="pl-kos">></span>    <span class="pl-kos"><</span><span class="pl-ent">script</span> <span class="pl-c1">type</span>="<span class="pl-s">text/javascript</span>" <span class="pl-c1">src</span>="<span class="pl-s">litegui.js/external/jscolor/jscolor.js</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span>
    <span class="pl-kos"><</span><span class="pl-ent">script</span> <span class="pl-c1">type</span>="<span class="pl-s">application/javascript</span>" <span class="pl-c1">src</span>="<span class="pl-s">litegui.js/build/litegui.js</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span>
<span class="pl-kos"></</span><span class="pl-ent">head</span><span class="pl-kos">></span>
<span class="pl-kos"><</span><span class="pl-ent">body</span><span class="pl-kos">></span>
    <span class="pl-kos"><</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">init.js</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span>
<span class="pl-kos"></</span><span class="pl-ent">body</span><span class="pl-kos">></span>
<span class="pl-kos"></</span><span class="pl-ent">html</span><span class="pl-kos">></span>

Add the following to init.js:

<span class="pl-c">// Initialize litegui.js</span>
<span class="pl-v">LiteGUI</span><span class="pl-kos">.</span><span class="pl-en">init</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span><span class="pl-c">// Create a menu bar</span>
<span class="pl-k">var</span> <span class="pl-s1">menu</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">LiteGUI</span><span class="pl-kos">.</span><span class="pl-c1">Menubar</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-c">// Add some items to it</span>
<span class="pl-s1">menu</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s">'File/New'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">menu</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s">'File/Settings'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-c">// This will be shown greyed out</span>
<span class="pl-s1">menu</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s">'File/I\'m not clickable'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">disabled</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-c">// Add a second main menu item</span>
<span class="pl-s1">menu</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s">'Help/Help'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">menu</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s">'Help/About'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-c">// Add the menu bar to litegui</span>
<span class="pl-v">LiteGUI</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s1">menu</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

Now open index.html in your browser. You should see a menu bar on the top of the screen. That might be pretty nifty, but it's not yet doing anything usefull. Let's fix that by adding a settings dialog

Add the following code to init.js after the call to LiteGUI.init():

<span class="pl-k">function</span> <span class="pl-en">createSettingsDialog</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-c">// Create a new dialog</span>
    <span class="pl-k">var</span> <span class="pl-s1">dialog</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">LiteGUI</span><span class="pl-kos">.</span><span class="pl-c1">Dialog</span><span class="pl-kos">(</span><span class="pl-s">'Settings'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">title</span>:<span class="pl-s">'Settings'</span><span class="pl-kos">,</span> <span class="pl-c1">close</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-c1">minimize</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span> <span class="pl-c1">width</span>: <span class="pl-c1">300</span><span class="pl-kos">,</span> <span class="pl-c1">height</span>: <span class="pl-c1">500</span><span class="pl-kos">,</span> <span class="pl-c1">scroll</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span> <span class="pl-c1">resizable</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span> <span class="pl-c1">draggable</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>    <span class="pl-c">// Create a collection of widgets</span>
    <span class="pl-k">var</span> <span class="pl-s1">widgets</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">LiteGUI</span><span class="pl-kos">.</span><span class="pl-c1">Inspector</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">var</span> <span class="pl-s1">nameWidget</span> <span class="pl-c1">=</span> <span class="pl-s1">widgets</span><span class="pl-kos">.</span><span class="pl-en">addString</span><span class="pl-kos">(</span><span class="pl-s">"Your name"</span><span class="pl-kos">,</span><span class="pl-s">"foo"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">var</span> <span class="pl-s1">ageWidget</span> <span class="pl-c1">=</span> <span class="pl-s1">widgets</span><span class="pl-kos">.</span><span class="pl-en">addNumber</span><span class="pl-kos">(</span><span class="pl-s">"Your age"</span><span class="pl-kos">,</span> <span class="pl-c1">35</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">min</span>: <span class="pl-c1">0</span><span class="pl-kos">,</span> <span class="pl-c1">max</span>: <span class="pl-c1">125</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">dialog</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s1">widgets</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-c">// Placeholder function to show the new settings. Normally you would do something usefull here</span>
    <span class="pl-c">// with the new settings.</span>
    <span class="pl-k">function</span> <span class="pl-en">applySettings</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"Your name is "</span> <span class="pl-c1">+</span> <span class="pl-s1">nameWidget</span><span class="pl-kos">.</span><span class="pl-en">getValue</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">+</span> <span class="pl-s">", and you are "</span> <span class="pl-c1">+</span> <span class="pl-s1">ageWidget</span><span class="pl-kos">.</span><span class="pl-en">getValue</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">+</span> <span class="pl-s">" years old"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
    <span class="pl-c">// Add some buttons</span>
    <span class="pl-s1">dialog</span><span class="pl-kos">.</span><span class="pl-en">addButton</span><span class="pl-kos">(</span><span class="pl-s">'Ok'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">close</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-c1">callback</span>: <span class="pl-s1">applySettings</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">dialog</span><span class="pl-kos">.</span><span class="pl-en">addButton</span><span class="pl-kos">(</span><span class="pl-s">'Apply'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> <span class="pl-c1">close</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span> <span class="pl-c1">callback</span>: <span class="pl-s1">applySettings</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">dialog</span><span class="pl-kos">.</span><span class="pl-en">addButton</span><span class="pl-kos">(</span><span class="pl-s">'Cancel'</span><span class="pl-kos">,</span><span class="pl-kos">{</span> <span class="pl-c1">close</span>: <span class="pl-s">'fade'</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">return</span> <span class="pl-s1">dialog</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>
<span class="pl-k">var</span> <span class="pl-s1">settingsDialog</span> <span class="pl-c1">=</span> <span class="pl-en">createSettingsDialog</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-c">// dialogs are shown on creation, let's hide it until the settings menu item is clicked</span>
<span class="pl-s1">settingsDialog</span><span class="pl-kos">.</span><span class="pl-en">hide</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

And change the initialization of the menu bar:

<span class="pl-s1">menu</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s">'File/Settings'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-en">callback</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-s1">settingsDialog</span><span class="pl-kos">.</span><span class="pl-en">show</span><span class="pl-kos">(</span><span class="pl-s">'fade'</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>