UIZE is free to use and all the source is available for all to view and fork on GitHub.

For more information, consult the license page.

UIZE implements an elegant and clean system for defining JavaScript modules of many different varieties.

Defining a module in UIZE is as simple as calling the Uize.module method, as follows...

Uize.module ({
  name:'MyNamespace.MyModule',
  required:[
    'Uize.Color',
    'Uize.Data.Matches',
    'MyNamespace.MyOtherModule'
  ],
  builder:function () {
    var myModule;

    // do stuff to initialize myModule
    // ... ... ... ... ... ... ...
    // ... ... ... ... ... ... ...

    return myModule
  }
});

2.1. Dependency Resolution

2.2. Built Into the Base Module

2.3. Packaging

2.4. All Kinds of Modules

UIZE provides a bunch of utility belt features right in the Uize base module, so you get that in addition to the modules & dependency resolution system.

Utility belt features include...

3.1. Avoiding Bloat

3.2. Util Namespaces

UIZE makes it dead easy to create classes that come with support for events (thanks to a built-in event infrastructure) and state properties and binding.

4.1. Creating a Class

var MyWidgetClass = Uize.Widget.V2.subclass ();

4.2. Declaring Features

var MyClass = Uize.Class.subclass ({
  instanceMethods:{
    someInstanceMethod1:function () {
      // do some stuff
    },
    someInstanceMethod2:function () {
      // do some stuff
    }
  },
  staticMethods:{
    someStaticMethod1:function () {
      // do some stuff
    },
    someStaticMethod2:function () {
      // do some stuff
    }
  }
});

For a more detailed discussion of the UIZE approach to OOP, consult the Classes and Inheritance guide.

UIZE offers a mature and powerful state properties system so that classes can expose a state interface for their instances.

The state properties system goes beyond regular object properties, and even beyond the newer properties capabilities of ECMAScript 5, providing powerful constructs like conformers, optimized onChange handlers, aliases (for deprecating old names), and value changed events using the built-in event infrastructure.

EXAMPLE

function calculateVolume () {
  this.set ({volume:this.get ('width') * this.get ('depth') * this.get ('height')});
}

var Room = Uize.Class.subclass ({
  stateProperties:{
    width:{
      value:10,
      conformer:function (newValue) {return Uize.constrain (newValue,10,50)},
      onChange:calculateVolume
    },
    depth:{
      value:10,
      conformer:function (newValue) {return Uize.constrain (newValue,10,50)},
      onChange:calculateVolume
    },
    height:{
      value:10,
      conformer:function (newValue) {return Uize.constrain (newValue,9,25)},
      onChange:calculateVolume
    },
    volume:{
      onChange:function () {
        // code to display volume info in UI
      }
    }
  }
});

In this example we're creating a Room class with the state properties width, depth, height, and volume.

5.1. Range Type Conformers

5.2. Optimized onChange Handler

5.3. Looking at Some Outcomes

var livingRoom = Room ({width:15,depth:20,height:19}); // initialized with values for properties
alert (livingRoom.get ('volume'));              // alerts 5700

livingRoom.set ({width:15,depth:20,height:19}); // no change in properties, volume unchanged
alert (livingRoom.get ('volume'));              // alerts 5700

livingRoom.set ({width:18,depth:18,height:22}); // volume is only calculated once
alert (livingRoom.get ('volume'));              // alerts 7128

livingRoom.set ({width:55,depth:60,height:30}); // property values are constrained at upper bounds
alert (livingRoom.get ('width'));               // alerts 50
alert (livingRoom.get ('depth'));               // alerts 50
alert (livingRoom.get ('height'));              // alerts 25
alert (livingRoom.get ('volume'));              // alerts 62500

livingRoom.set ({width:99,depth:99,height:99}); // properties remain constrained, volume unchanged
alert (livingRoom.get ('width'));               // alerts 50
alert (livingRoom.get ('depth'));               // alerts 50
alert (livingRoom.get ('height'));              // alerts 25
alert (livingRoom.get ('volume'));              // alerts 62500

5.4. Changed Events

var MyClass = Uize.Class.subclass ({
  stateProperties:{
    foo:{value:'bar'}
  }
});

var myClassInstance = MyClass ();

myClassInstance.wire (
  'Changed.foo',
  function () {alert (myClassInstance.get ('foo'))}
);

myClassInstance.set ({foo:'qux'});

5.5. Binding Properties Together

For a more detailed discussion of the state properties system, consult the State Properties guide.

The JavaScript language does not provide a built-in system for event-driven programming, so UIZE provides an event system.

Such events can be fired (aka published, dispatched, triggered, emitted, etc.) from anywhere in the code in an ad hoc fashion, and listenable events do not need to be registered formally. Multiple handlers can be registered for the same event. Handlers can be registered for events that are never fired, without ill effects. Conversely, events can be dispatched that are never listened for, without ill effects.

EXAMPLE

var myWidget = Uize.Widget ();
myWidget.wire (
  'My Arbitrary Event',
  function (event) {alert (event.message)}
);
myWidget.fire ({name:'My Arbitrary Event',message:'Hello, world!'});

In the above example, an instance of the Uize.Widget class is created, a handler is registered on an arbitrarily named event ('My Arbitrary Event'), and then the fire instance method is called on the widget in order to fire that event. The event object contains an additional message property, whose value is alerted in the handler that was registered for the event.

The event system implemented by the UIZE JavaScript Framework is orthogonal to the event model of Web browsers that is provided as part of the standardized Document Object Model, and can be used outside of the context of Web browsers and other host environments for the JavaScript language that may implement their own proprietary event systems. As an example of this, the framework's event system can be utilized within Windows Script Host by scripts that use the Uize.Class base class.

The Uize.Class base class provides a convenient infrastructure for supporting both static and instance events. Events can conveniently be fired for a class or an instance of a class, and methods are provided to every class that subclasses the Uize.Class base class to allow code to manage the wiring and unwiring of event handlers for static and instance events. This provides all Uize.Class subclasses with a consistent event model.

For a more in-depth discussion on events, consult the guide JavaScript Event System.

UIZE implements the useful programming constructs of conditions, barriers, and needs.

The conditions, barriers, and needs / providers mechanisms make it possible to manage tricky timing situations in applications where code is distributed and where it may not be feasible to enforce / orchestrate the desired sequencing. These mechanisms make it possible to explicitly define the state dependencies.

UIZE provides features to enable Web applications to more easily perform asynchronous communication with a Web server, a technique that is often referred to broadly as Ajax.

The Uize.Comm base class provides a foundation for supporting asynchronous communication regardless of the mechanism employed, which could be a hidden iframe, the XMLHttpRequest object, or script tags (see AJAST). This base class provides a caching mechanism for requests, a queueing mechanism in order to sequence successive asynchronous requests through a single communication object, and a standard interface for issuing requests. Various subclasses of the Uize.Comm base class implement support for different communication mechanisms.

EXAMPLE

Uize.Comm.Ajax ().request ({
  url:[
    '/service/search',
    {
      productFilter:'movies',
      genre:'comedy',
      sort:'popular',
      results:100
    }
  ],
  returnType:'json',
  callback:function (searchResults) {
    // do something with the search results
  }
});

In the above example, an instance of the Uize.Comm.Ajax class is created and immediately used to perform an asynchronous request to a hypothetical search service using the XMLHttpRequest object. The anonymous function specified for the callback property is executed once the request has successfully executed, and the result from the server is passed as a parameter to the callback function as a JSON object.

For a more in-depth discussion of AJAX programming, consult the reference for the Uize.Comm base class.

While a design goal of the UIZE JavaScript Framework is to support multiple different host environments that support the JavaScript language, a key application of the framework is to facilitate the development of Rich Internet Applications that run with a web browser as the host environment for client-side functionality.

As such, there exist a number of modules designed specifically to assist with inspection of and manipulation of a Web page's Document Object Model. Among other things, these modules provide static methods for: iterating across a range HTML elements and performing operations on each, finding a set of HTML elements by means of a match expression, getting and setting Cascading Style Sheet (CSS) style properties, insertion of HTML markup, management of DOM event listeners, and querying and modifying coordinates.

EXAMPLE

Uize.Dom.Basics.setStyle (
  ['myNode1','myNode2','myNode3'],
  {
    width:'100px',
    height:'20px',
    backgroundColor:'#000',
    fontFamily:'Times'
  }
);

The above example demonstrates how the Uize.Dom.Basics.setStyle static method of the Uize.Dom.Basics module is used to set the width, height, backgroundColor, and fontFamily CSS style properties for the three nodes with the ids "myNode1", "myNode2", and "myNode3".

For a more in-depth discussion of DOM manipulation, consult the references for the Uize.Dom.Basics module and other modules under the Uize.Dom namespace.

UIZE provides a system to facilitate the development of widgets that can be embedded in HTML pages.

Functionality that can be inherited by widget classes is implemented in the Uize.Widget base class. The framework's widget system allows widgets to be arranged in a hierarchical tree structure, where each widget can have one parent widget and any number of child widgets. In this relationship, parent widgets can provide services to child widgets on their tree, and child widgets can inherit state from widgets higher up in the parent chain.

Examples of widgets include: buttons, sliders for selecting continuous values, progress bars, calendar / date pickers, color pickers, sortable collections, tabbed interfaces, modal dialogs, slide shows, data table sorters, tree list controls, and hierarchical menus.

For a more in-depth discussion of UIZE's widget framework, consult the guide JavaScript Widgets.

The versatile templating system employed by UIZE is relied upon heavily for the HTML templates and CSS templates that are used by encapsulated widgets.

11.1. HTML Templates

11.2. CSS Templates

<%@ required ('Uize.Widgets.CssUtil'); %>
<%
  var
    _cssUtil = Uize.Widgets.CssUtil,
    _borderWidth = _cssUtil.box.border.width
  ;
%>
.`` {
  display: inline-block;
  border-width: <%= _borderWidth %>px;
  border-style: solid;
  border-color: #ccc #999 #999 #ccc;
  width: 20px;
  height: 20px;
}

/*** different sizes ***/
<%
  var _sizes = _cssUtil.sizes;
  function _sizeStyleProperties (_sizeName,_horizontalPadding) {
    var
      _size = _sizes [_sizeName],
      _widthHeight = _size.outer - _borderWidth * 2
    ;
    %>
    width: <%= _widthHeight %>px;
    height: <%= _widthHeight %>px;
    <%
  }
%>
  .`tiny` {
    <% _sizeStyleProperties ('tiny') %>
  }

  .`small` {
    <% _sizeStyleProperties ('small') %>
  }

  .`medium` {
    <% _sizeStyleProperties ('medium') %>
  }

  .`large` {
    <% _sizeStyleProperties ('large') %>
  }

To help you get started with Web app development, UIZE comes bundled with lots of built-in widgets.

Included in the built-in widgets are: auto suggest, tooltip, slider, progress bar, various buttons, calculator, calendar, collection and collection item (for grids and lists), color picker, color info, resizable and draggable dialog / window, egg timer, form and form input, image port, drop list, scrolly, table sorter, tree, toggler button, and more.

The built-in widget modules are divided into two main groups...

To preview some of the many built-in widgets, you can take a look at...

12.1. Make Your Own

UIZE provides facilities (in Uize.Widget) to ease i18n (internationalization) and L10n (localization) of JavaScript code.

The localized state property allows an arbitrary number of localized string templates to be specified in an object hash, and these string templates are then available to the widget and all its child widgets. The localize instance method allows a string template to be retrieved and will process the string, as necessary, to replace substitution tokens with dynamic data.

EXAMPLE

myWidget = Uize.Widget ({
  localized:{welcomeMessage:'Welcome, {firstName} of {state}, {country}'}
});
alert (
  myWidget.localize (
    'welcomeMessage',
    {firstName:'Chris',state:'California',country:'USA'}
  )
);

In the above example, an instance of the Uize.Widget class is created, specifying a localized hash that contains just one localized string template named welcomeMessage. This string contains the substitution tokens {firstName}, {state}, and {country}. The localize instance method is called on the widget instance, with parameters specifying the name of the localized string to retrieve and dynamic data that should be substituted into its tokens. The result is then displayed to the user with the alert statement. Typically, localization will occur inside the implementation for a widget class, so this example is purely for illustrating the syntax.

TIP: To aid in internationalizing legacy code, a script is provided that can be run in Windows Script Host and that will recurse through the folders of a Web site project in order to compile a report of all the string literals contained inside JavaScript files, using a heuristic algorithm to bucket them according to their likelihood of being internationalizable strings (see JavaScript Build Scripts).

For a more in-depth discussion of internationalization and localization, consult the guide JavaScript Localization.

UIZE provides a robust testing framework to support writing unit tests, functional tests, and performance tests.

The testing framework has the following key benefits...

For more information on the testing framework, consult the guide JavaScript Testing Framework.

UIZE implements a system for templating that allows the JavaScript language to be leveraged within templates, such templates being referred to as JavaScript templates.

This system allows for the use of programmatic logic and JavaScript control structures within a template for the purpose of rendering a result document. It's format and approach will be immediately familiar to anyone who has used the templating systems of other languages, such as Ruby's .erb templates, .NET's .aspx templates, Java's .jsp templates, etc.

The template engine is implemented in the Uize.Template module, which provides a means for compiling a source template into a more performant JavaScript function. Once compiled into JavaScript functions, JavaScript templates can be used to generate text output for a variety of purposes, including, for example, the generation of HTML markup for widgets, the generation of complete HTML documents as part of a Web project build process, and the generation of RSS documents from a data source.

EXAMPLE

var helloWorldTemplate = Uize.Template.compile (
  '<% for (var i = 0; i < input.repeats; i++) { %>' +
  '

<% .message %>

\n' +
  '<% } %>'
);

var myTemplateOutput = helloWorldTemplate ({repeats:5,message:'Hello World !'});

/* myTemplateOutput will now have the value...

Hello World !

Hello World !

Hello World !

Hello World !

Hello World !

*/

In the above example, a JavaScript template in a string literal is being compiled to a JavaScript function, and then that function is being called with input data that is supplied to the template function. The result is assigned to a variable.

In practice, JavaScript templates are contained inside separate files with the extension .jst in order that the template source not be subject to a further level of escaping within JavaScript string literals.

AS A JST FILE

<% for (var i = 0; i < input.repeats; i++) { %>

<% .message %>

<% } %>

JavaScript template files can be compiled into JavaScript modules with the use of JavaScript build scripts, and such modules can then be required as dependencies and treated as regular JavaScript modules. Alternatively, JavaScript template source can be embedded in non-visible elements of a Web page, such as a hidden textarea tag or a script tag with a mime type of text/jst, and then retrieved and compiled by client code when the document loads.

For a more in-depth discussion, consult the guide JavaScript Templates.

UIZE provides powerful features to support slick animation effects, with easing, bounce, elasticity, pulsing, and much more.

Effects and animation in the UIZE JavaScript Framework are achieved through use of a suite of associated modules. The Uize.Fade module provides the underpinnings of time-based animation and compound value interpolation, the Uize.Fade.xFactory extension module extends the Uize.Fade class with factory methods for creating, starting, and managing fades in a fade pool, and the Uize.Fx module provides static methods for initiating fades of CSS style properties.

EXAMPLE

// fade from thin border/thick padding to thick border/thin padding over 1/4 second
Uize.Fx.fadeStyle ('myNode',{borderWidth:1,padding:20},{borderWidth:20,padding:1},250);

// fade from current colors to white text on black background over two seconds
Uize.Fx.fadeStyle ('myNode',null,{color:'#fff',backgroundColor:'#000'},2000);

// fade font size from 30px back to current size over a half second
Uize.Fx.fadeStyle ('myNode',{fontSize:30},null,500);

To add some pizazz to animations, the UIZE JavaScript Framework provides the Uize.Curve, Uize.Curve.Mod, and Uize.Curve.Rubber modules that let you stray from the bland world of linear animations and into an exotic world of animations driven by arbitrary curve functions, with built-in support for easing curves as well as curves that emulate the complex properties of motion, letting you achieve effects like bounce, springiness, wobble, elasticity, etc. Beyond the built-ins, you have the freedom to roll your own curve functions in order to achieve some of the craziest motion effects you could imagine.

For a more in-depth discussion, consult the guide JavaScript Animation and Effects.

Project Application

UIZE implements a system for building HTML from documentation that is written in a Wikitext like format called Simple Doc.

Document structure in this format is controlled through indentation, much like program structure can be governed by indentation in the Python programming language. A documentation builder script is provided that can run in Windows Script Host. This build script can recurse through all the folders of a Web site project, building HTML files from all Simple Doc files it finds, and extracting Simple Doc formatted documentation from specially flagged comments inside JavaScript module files and synthesizing these Simple Doc fragments together into Simple Doc documents for conversion into HTML documentation files.

The following example shows the documentation for the to instance method of the Uize.Color module. Notice how the documentation comment is indicated with the question mark immediately following the comment begin characters /*.

EXAMPLE

/*?
  Instance Methods
    to
      Returns the current color of the instance, encoded to the specified format.

      SYNTAX
      .........................................
      encodedColor = colorOBJ.to (encodingSTR);
      .........................................

      The =encodingSTR= parameter supports a wide variety of different `color encodings`.

      EXAMPLES
      .............................................................................
      var fuchsia = Uize.Color ('fuchsia');
      fuchsia.to ('color');       // produces a new Uize.Color object
      fuchsia.to ('hex');         // produces 'ff00ff'
      fuchsia.to ('#hex');        // produces '#ff00ff'
      fuchsia.to ('name');        // produces 'fuchsia'
      fuchsia.to ('RGB array');   // produces [255,0,255]
      fuchsia.to ('RGB int');     // produces 16711935
      fuchsia.to ('RGB object');  // produces {red:255,green:0,blue:255}
      fuchsia.to ('RGB string');  // produces 'rgb(255,0,255)'
      fuchsia.to ('HSL array');   // produces [300,100,50]
      fuchsia.to ('HSL object');  // produces {hue:300,saturation:100,lightness:50}
      fuchsia.to ('HSL string');  // produces 'hsl(300,100,50)'
      .............................................................................

      NOTES
      - see the related =Uize.Color.to= static method
*/

For a more in-depth discussion of this documentation system, consult the guide JavaScript Documentation System.

UIZE provides a robust and extremely versatile and configurable build system that allows multi-level build relationships to be set up.

18.1. Responsibilities of the Build System

18.2. Key Features of the Build System

For more information on the build system, consult the JavaScript Build Scripts guide.

UIZE provides a system for scrunching (minifying) JavaScript code - primarily to reduce its size, but also to obfuscate it.

While the network bandwidth that is used to transfer JavaScript code to the client can be reduced in order to reduce transfer time through the use of HTTP compression methods such as gzip, further code size reduction as well as a degree of code obfuscation can be achieved with the use of the Scruncher, a code minification utility that is provided as part of the UIZE JavaScript Framework. This utility can be accessed for individual use through a Web page interface, but can be more conveniently utilized as part of a build script that recurses through the folders of a Web site project and generates compressed and obfuscated code from all the JavaScript files it encounters.

Among the operations that are performed by the Scruncher are:

Obfuscation that is provided by the Scruncher is an artifact of the code compression process, and the Scruncher is not designed to provide robust obfuscation.

The two examples below show first an extract of JavaScript code, and second the compressed and obfuscated form of that code. Notice how, in the compressed version of the code, private identifiers that were prefixed with an underscore in the source code have been reduced down to enumerated forms (e.g. _a, _b, _c). For the sake of readability in this example, the LineCompacting setting is turned off for the compressed code.

SOURCE CODE

/*ScruncherSettings Mappings="=" LineCompacting="FALSE"*/

_package.toAbsolute = function (_baseUrl,_url) {
  if (_package.from (_url).fullDomain) return _url;
    // return early with URL to resolve against base, if URL is absolute

  var _result = _baseUrl.slice (0,_baseUrl.search (/[\/\\][^\/\\]*$/) + 1);
    // remove everything after the last slash, but keep the last slash
  while (_url) {
    var
      _slashPos = (_url.search (/[\/\\]/) + 1 || _url.length + 1) - 1,
      _folderName = _url.slice (0,_slashPos)
    ;
    _result = _folderName == '..'
      ? _result.slice (0,_result.search (/[\/\\][^\/\\]*[\/\\]$/) + 1) // remove end folder
      : _result + _folderName + _url.charAt (_slashPos)
    ;
    _url = _url.slice (_slashPos + 1);
  }
  return _result;
};

SCRUNCHED CODE

_a.toAbsolute=function(_b,_c){
if(_a.from(_c).fullDomain)return _c;
var _d=_b.slice(0,_b.search(/[\/\\][^\/\\]*$/)+1);
while(_c){
var
 _e=(_c.search(/[\/\\]/)+1||_c.length+1)-1,
_f=_c.slice(0,_e)
;
_d=_f=='..'
?_d.slice(0,_d.search(/[\/\\][^\/\\]*[\/\\]$/)+1)
:_d+_f+_c.charAt(_e)
;
_c=_c.slice(_e+1);
}
return _d;};

For a more in-depth discussion of the Scruncher code compression system, consult the guide All About Scrunching.

UIZE provides a NodeJS based development server that allows a project that involves many different types of built files to be developed without having to constantly run build scripts between changes.

The development server utilizes the powerful build system to build derived files whenever they are requested and are not current (i.e. some of their dependencies have been modified since the last time they were built). The development server is used in the development of the UIZE framework, itself, and it can be used for any project for which static files will be generated as part of a build process.

With the right configuration of your application server, you can pull all the static files that would be built as part of your build process from the development server running on your localhost. That way, you get the best of both worlds - you can keep using your existing server platform while using the UIZE development server for pre-processing of source code for static files.

UIZE comes with extensive documentation, thanks in large parts to the built-in SimpleDoc documentation system and the powerful build system.

The UIZE documentation includes...

For more info, consule the guide Using the Documentation.