SOURCE CODE: Basic Image Port
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>Basic Image Port | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta name="keywords" content="Uize.Widget.ImagePort"/>
  <meta name="description" content="The image port widget displays an image in a view port using logical sizing and positioning values. See it here, with controls for all its properties."/>
  <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"/>
  <style type="text/css">
    .label {
      font-size:10px;
    }
    select {
      border:1px solid #fff;
      font-size:12px;
      width:40px;
      height:20px;
    }
  </style>
</head>

<body>

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

<h1 class="document-title">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
  Basic Image Port
  <div id="page-actions" class="pageActions">
    <a href="source-code/image-port.html" class="buttonLink">SOURCE</a>
  </div>
</h1>

<div class="main">
  <!-- explanation copy -->

  <div class="explanation">
    <p>In this example, an instance of <a href="../reference/Uize.Widget.ImagePort.html"><code>Uize.Widget.ImagePort</code></a> is wired up to demonstrate the sizing and positioning principles of this class. Slider controls are provided for controlling the values of the <code>alignX</code>, <code>alignY</code>, and <code>sizingValue</code> state properties, and <code>select</code> dropdowns are provided for controlling the values of the <code>sizingLowerBound</code> and <code>sizingUpperBound</code> state properties. Alignment for both the X and Y axes is adjustable between <code>0</code> and <code>1</code>. In this example, <code>sizingValue</code> is adjustable between <code>0</code> and <code>3</code>, where <code>0</code> means that the image will be sized to the <code>sizingLowerBound</code>, <code>1</code> means that the image will be sized to the <code>sizingUpperBound</code>, and values above <code>1</code> will oversize the image.</p>
  </div>

  <form>
    <table border="0" cellspacing="0" cellpadding="0" style="margin:auto;">
      <tr>
        <td></td>
        <td></td>
        <td width="5"></td>
        <td class="label" style="text-align:center;">alignY</td>
        <td width="15"></td>
        <td>
          <select id="page-sizingUpperBound">
            <option value="fill" selected>fill</option>
            <option value="fit">fit</option>
          </select>
        </td>
        <td class="label" style="padding-left:5px;">sizingUpperBound</td>
      </tr>
      <tr>
        <td></td>
        <td>
          <div id="page_imagePort" style="position:relative; width:300px; height:300px; overflow:hidden; background:#000; border:1px solid #555;">
            <img id="page_imagePort-image" src="http://upload.wikimedia.org/wikipedia/commons/d/db/Nasa_blue_marble.jpg" style="width:3000px; height:3075px; position:absolute;" alt=""/>
          </div>
        </td>
        <td width="5"></td>
        <td id="page_alignYSlider"><img src="../images/blank.gif" style="width:40px; height:300px;" alt=""/></td>
        <td width="5"></td>
        <td>
          <div id="page_sizingValueSlider" style="width:40px; height:300px;"></div>
        </td>
        <td class="label" valign="center" style="padding-left:5px;">sizingValue (0 to 3)</td>
      </tr>
      <tr>
        <td colspan="7" height="5"></td>
      </tr>
      <tr>
        <td class="label" style="padding-right:5px;">alignX</td>
        <td id="page_alignXSlider"><img src="../images/blank.gif" style="width:300px; height:40px;" alt=""/></td>
        <td></td>
        <td></td>
        <td></td>
        <td>
          <select id="page-sizingLowerBound">
            <option value="fit">fit</option>
            <option value="0" selected>0</option>
          </select>
        </td>
        <td class="label" style="padding-left:5px;">sizingLowerBound</td>
      </tr>
    </table>
  </form>
</div>

<!-- JavaScript code to activate the image port functionality -->

<script type="text/javascript">

Uize.module ({
  required:[
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'Uize.Widget.ImagePort',
    'Uize.Widget.Bar.Slider.xSkin'
  ],
  builder:function () {
    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ();

    /*** add the image port child widget ***/
      var imagePort = page.addChild (
        'imagePort',
        Uize.Widget.ImagePort,
        {
          sizingLowerBound:'0',
          sizingUpperBound:'fill',
          sizingValue:.5,
          alignX:.5,
          alignY:.5
        }
      );

    /*** code to update the image port instance based on user input values ***/
      function updateImagePortSettings () {
        imagePort.set ({
          alignX:+alignXSlider,
          alignY:+alignYSlider,
          sizingUpperBound:page.getNodeValue ('sizingUpperBound'),
          sizingLowerBound:page.getNodeValue ('sizingLowerBound'),
          sizingValue:+sizingValueSlider
        });
      }

    /*** common values shared by alignX, alignY, and sizingValue sliders ***/
      Uize.Widget.Bar.Slider.set ({
        value:.5,
        fullTintColor:'#9aa',
        fullTintLevel:50,
        emptyTintColor:'#9aa',
        emptyTintLevel:50,
        borderThickness:3,
        borderTintColor:'#455',
        borderTintLevel:50,
        increments:0,
        knobSize:28,
        built:false
      });

    /*** add the alignX slider child widget ***/
      var alignXSlider = page.addChild (
        'alignXSlider',
        Uize.Widget.Bar.Slider,
        {
          minValue:0,
          maxValue:1,
          orientation:'horizontal'
        }
      );
      alignXSlider.wire ('Changed.value',updateImagePortSettings);

    /*** add the alignY slider child widget ***/
      var alignYSlider = page.addChild (
        'alignYSlider',
        Uize.Widget.Bar.Slider,
        {
          minValue:1,
          maxValue:0,
          orientation:'vertical'
        }
      );
      alignYSlider.wire ('Changed.value',updateImagePortSettings);

    /*** add the sizingValue slider child widget ***/
      var sizingValueSlider = page.addChild (
        'sizingValueSlider',
        Uize.Widget.Bar.Slider,
        {
          fullTintColor:'#fff',
          fullTintLevel:70,
          minValue:0,
          maxValue:10,
          value:1,
          orientation:'vertical'
        }
      );
      sizingValueSlider.wire ('Changed.value',updateImagePortSettings);

    /*** initialize the ImagePort instance ***/
      updateImagePortSettings ();

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

    /*** watch for changes in sizing bound values ***/
      page.wireNode ('sizingUpperBound','change',updateImagePortSettings);
      page.wireNode ('sizingLowerBound','change',updateImagePortSettings);
  }
});

</script>

</body>
</html>