SOURCE CODE: Basic Color Grid

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
  <title>Basic Color Grid | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="color Uize.Widget.ColorGrid Uize.Util.PropertyAdapter"/>
  <meta name="description" content="See an example of a color grid, where the color swatches in the grid are interpolated from RGB corner colors that can be dynamically set by the user."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href=""/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
  <style type="text/css">
    .swatch {

    .input {
      width: 100px;


<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Basic Color Grid
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/color-grid.html" class="buttonLink">SOURCE</a></div>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, an instance of the <a href="../reference/Uize.Widget.ColorGrid.html"><code>Uize.Widget.ColorGrid</code></a> class is wired up to provide a color grid that shows a color matrix (or color grid) of all the interpolated colors between four adjustable corner colors. Enter hex RGB values for any colors at any of the four corners and the grid will automatically update while you type. This grid is 10x10 and represents 100 colors, but the widget can be configured for different numbers of divisions on both the X and Y axes by setting the <code>divisionsX</code> and <code>divisionsY</code> state properties, respectively. With additional code, a subclass or other widget could use the color grid widget as a color selection palette, allowing the user to explore color ranges in 2D.</p>

  <!-- "wireframe" for the UI -->

    <table border="0" cellspacing="0" cellpadding="3" style="margin:auto;">
        <td id="page-colorTopLeft"></td>
        <td id="page-colorTopRight"></td>
        <td id="page-colorGrid"></td>
        <td id="page-colorBottomLeft"></td>
        <td id="page-colorBottomRight"></td>

<script type="text/javascript">

Uize.require (
  function () {
    'use strict';

    var colorNames = ['colorTopLeft','colorTopRight','colorBottomLeft','colorBottomRight'];

    /*** create the example page widget ***/
      var page = = UizeSite.Page.Example ();

    /*** create the Uize.Widget.ColorGrid object ***/
      var colorGrid = page.addChild ('colorGrid',Uize.Widget.ColorGrid,{built:false,html:Uize.Templates.ColorGrid});

    /*** create input widgets ***/
      Uize.forEach (
        function (colorName) {
          Uize.Util.PropertyAdapter ({
            propertyA:page.addChild (
                value:colorGrid.get (colorName),

    /*** wire up the page widget ***/
      page.wireUi ();