SOURCE CODE: Populating Photo Details
VIEW EXAMPLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Populating Photo Details | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="Uize.Widget.Population"/>
  <meta name="description" content="See the population class used to dynamically generate HTML for a photo set, where the HTML for each photo shows title, image, description, and rating."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
  <link rel="stylesheet" href="css/rating-stars.css"/>
  <style type="text/css">
    .photoRecord {
      position:relative;
      width:500px;
      padding:6px;
      margin:7px auto;
      background:url(../images/page-contents-bg.gif) repeat-x left top;
      border:1px solid #9aa;
    }
    .photoRecord .photoTitle {
      font-size:10px;
      text-transform:uppercase;
      letter-spacing:4px;
      color:#000;
      background:#b7babf url(../images/title-bg-brushed-metal.jpg) repeat left top;
      padding:4px 0 4px 8px;
      margin-bottom:5px;
    }
    .photoRecord .photoThumbnail {
      width:105px;
      height:75px;
      margin-right:7px;
      border:4px solid #cfdadd;
      float:left;
    }
    .photoRecord .photoDate {
      font-size:10px;
    }
    .photoRecord .photoDescription {
      font-size:12px;
      color:#666;
      padding-bottom:20px;
    }
    .photoRecord .clearLeft {
      clear:left;
    }
    .photoRecord .ratingStars {
      position:absolute;
      right:5px;
      bottom:0px;
    }
  </style>
</head>

<body>

<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>
</h1>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Populating Photo Details
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/populating-photo-details.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, an instance of the <a href="../reference/Uize.Widget.Population.html"><code>Uize.Widget.Population</code></a> class is being used to populate a node with a details view for a set of photos. The HTML used as the template for populating the node with a photo record set is the initial inner HTML of the node. The <code>Uize.Widget.Population</code> instance is configured with a value for its <code>templateItem</code> state property that maps record fields to specific substrings of the HTML template by example values, allowing the initial HTML contents of the populated node to be well-formed (something that cannot be guaranteed when using strictly a substitution token syntax).</p>

    <p>The photo records do not contain a URL for the thumbnail, but only a title. So, in order to substitute the correct thumbnail URL into the HTML template when populating, a phantom property called <code>thumbnailUrl</code> is declared with the <code>Uize.Widget.Population</code> instance using the <code>itemPhantomProperties</code> state property. Similarly, in order to show the ratings for each record, a <code>ratingStarsCrop</code> phantom property is declared, and this is substituted into the correct place in the HTML in order to achieve crop rects for the rating stars HTML that would correctly reflect the rating value.</p>

    <p>Finally, a category selector is provided to let you choose from category subselections of the complete photos record set (methods of the <a href="../reference/Uize.Data.Util.html"><code>Uize.Data.Util</code></a> package come in handy here). Each time you select a new category, the <code>items</code> state property of the <code>Uize.Widget.Population</code> is updated. Updating this property automatically results in the population instance re-populating its container node to reflect its new data set.</p>

    <p>Scroll down, as necessary, to get the full effect.</p>
  </div>

  <center>
    <form style="margin:auto;">
      CATEGORY: <select id="page-categorySelector"></select>
    </form>
  </center>

  <!-- the photo details node (containing the template used for populating) -->

  <div id="page_photoDetails">
    <div class="photoRecord">
      <div class="photoTitle">TITLE</div>
      <img src="../images/blank.gif" class="photoThumbnail"/>
      <div class="photoDescription">DESCRIPTION</div>
      <div class="clearLeft" style="height:0px;">&nbsp;</div>
      <div class="ratingStars">
        <div class="ratingStarsEmpty" style="clip:rect(0 100px 20px 53px);"></div>
        <div class="ratingStarsFull" style="clip:rect(0 53px 20px 0);"></div>
      </div>
    </div>
  </div>
</div>

<!-- JavaScript code to wire up page and populate it with photo details -->

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'UizeSite.TestData.Photos',
    'Uize.Data.Util',
    'Uize.Widget.Population'
  ],
  function () {
    'use strict';

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

    /*** set up the category selector ***/
      var
        photos = UizeSite.TestData.Photos (),
        categories = Uize.Data.Util.getColumn (photos,'category',true),
        categorySelectorOptions = page.getNode ('categorySelector').options
      ;
      for (var categoryNo = -1, categoriesLength = categories.length; ++categoryNo < categoriesLength;) {
        var categoryName = categories [categoryNo];
        categorySelectorOptions [categorySelectorOptions.length] = new Option (categoryName,categoryName);
      }

    /*** add the Uize.Widget.Population instance ***/
      var population = page.addChild (
        'photoDetails',
        Uize.Widget.Population,
        {
          templateItem:{
            title:'TITLE',
            description:'DESCRIPTION',
            thumbnailUrl:'../images/blank.gif',
            ratingStarsCrop:'53px'
          },
          itemPhantomProperties:{
            thumbnailUrl:function () {
              return this.image.replace ('max_dim=500','max_dim=105');
            },
            ratingStarsCrop:function () {
              return (this.rating * 10) + 'px';
            }
          }
        }
      );

    /*** populate photo details from selected category ***/
      function populatePhotoDetails () {
        population.set ({
          items:Uize.Data.Util.findRecords (photos,{category:page.getNodeValue ('categorySelector')})
        });
      }
      populatePhotoDetails (); // initialize
      page.wireNode ('categorySelector','change',populatePhotoDetails);

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

</script>

</body>
</html>