One of the projects that I work on is JxLib. JxLib is based on Mootools and is designed to be as HTML and CSS compliant as possible. It is aimed mainly at creating desktop-style applications (at least that’s how I see it) but is also very usable in basic websites. This post, as well as most of the ones I’ll be writing, focuses on getting started with the most recently released version – 3.1.1.

A Little about JxLib

JxLib is almost entirely class-based (there are very few exceptions) and forms a rather large class hierarchy. Every class eventually inherits base functionality from Jx.Object. If we follow the inheritance hierarchy the next most important class in the library is Jx.Widget. Jx.Widget forms the base of all classes that have a visual representation (I’ll discuss the functionality in both Jx.Object and Jx.Widget in another post).

In addition to widget classes (i.e. dialogs, panels, progress bars, etc) the library contains classes for managing data (Jx.Store), plugins (for adding functionality to existing classes), adapters (for managing the addition of data to widgets that need it), and classes for managing forms, grids, ajax requests, and a whole host of other things.

Getting JxLib

There are two ways to get JxLib.

First, you can go to the Github repository and download a prepacked download. This will give you everything you need to get started with nothing more to do.

For those who want to go the long way around (like me) the other way to get it is to build it from the source. This, of course, is the way I do it. In order to facilitate your being able to build it yourself, you can follow along below. The following shell commands are for Ubuntu but should be fairly portable. You’ll need to make sure you have the following programs installed in order checkout and build the source:

  1. node
  2. npm
  3. perl (only required if you want to build the docs)
  4. git

First, create a new directory to put the code in…

jon@xerxes:~$ mkdir jxlib

Then clone the main JxLib repository (or your own fork if you made one):

jon@xerxes:~$ git clone git://github.com/JxLib/JxLib.git jxlib

Next, change into the directory and run the following:

jon@xerxes:~$ cd jxlib
jon@xerxes:~/jxlib$ git checkout v3.1.1
jon@xerxes:~/jxlib$ git submodule update --init --recursive
jon@xerxes:~/jxlib$ npm install build
jon@xerxes:~/jxlib$ ./build.sh

After the build finishes you’ll have a few things you can use. There will be a lib directory inside the build directory that contains a full build of the code including the currently compatible mootools version (both core and more). There will also be a copy of the JxLib website. This copy of the website will be based on the current checked out version of the code.

Making sure it works

So, let’s work up a simple test to make sure this stuff works. First, create a directory structure to hold the files we need. If you have a standard one you use that’s fine. The one I like is noted below. I simply named the main directory “test”.

  • test (main directory)
    • js (holds all javascript files)
    • css (holds all css files)
    • img (holds most image files)

The img directory says “most” because the base install of JxLib expects all images to be in an images sub directory below the css file you’re using. Changing the default directory can be done but it’s not something I’d ever want to do manually. In a later post I’ll introduce you to something that can do those types of rewrites on the fly.

Once you have the directory structure figured out go to the directory where the build process put the final files. In my case they are in ~/jxlib/build/lib. I prefer to debug with each library (core/more/jxlib) in separate files (it makes the firebug debugger easier to work with in my opinion). Therefore, I’ll copy the following files into the js directory of my test project:

  • mootools-core.js
  • mootools-more.js
  • jxlib.standalone.uncompressed.js

For simplicity’s sake we should copy a_pixel.png into the js directory. That will allow the jxlib code to locate that file automatically. We can move it if we want later with a little preconfiguration magic. Now, again because it’s easiest, copy the entire theme directory into the css directory.

Now, all that’s left is to create a simple test page to make sure it all works. We’ll just code the page like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Hello World</title>
  <!-- include the jx delicious skin -->
  <link rel="stylesheet" href="css/themes/delicious/jxtheme.css" type="text/css" media="screen" charset="utf-8">
  <!--[if lte IE 6]>
      <link rel="stylesheet" href="css/themes/delicious/ie6.css" type="text/css" media="screen" charset="utf-8">
  <![endif]-->
  <!--[if IE 7]>
      <link rel="stylesheet" href="css/themes/delicious/ie7.css" type="text/css" media="screen" charset="utf-8">
  <![endif]-->
  <!-- include the required libraries -->
  <script src="js/mootools-core.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/mootools-more.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/jxlib.standalone.uncompressed.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
    window.addEvent('domready',function(){
      new Jx.Dialog({
        label: 'Test Dialog',
        modal: true,
        content: 'test'
      }).show();
    });
  </script>
</head>
<body>
<p id="test">This is test content for the dialog.</p>
</body>
</html>

and when you point your browser at the page you should see something like the screenshot below.

Wrapping it up

So there you have it. A brief introduction to the JxLib UI library. If you have any questions or comments about this post I would be glad to answer them.