Wrench value from your Creo Investments Home Measure the benefits Simple Automation can bring Why
Automate?
A personal way to do PDM Peer to Peer
PDM
3D Drawings Model Based
Design
Smooth out unwanted sharp edges Other
Articles
www.proetoolbox.co.uk - Simple Automation made Simple

Getting Started with YUI

Almost all Pro/Web.Link applications involve some kind of UI, even if it just a report.For example you may want to create a list of all Parts in an Assembly complete with some additional parameters. A standard approach is to build the UI HTML as a string and then display it to the user. This article will show how you can instead build code based on the YUI (Yahoo User Interface) Library.

What is the YUI?

From http://developer.yahoo.com/yui/ "The YUI Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. YUI is available under a BSD license and is free for all uses."

Step 1: Download it

Download the YUI and extract it to an area on your Intranet (or local machine if you develop locally). The result is as per the structure shown left. The developers have helpfully placed an Index.html file in there so you can jump around the files, seeing examples and reviewing information. All the component libraries have been placed under the 'build' folder. If you want to be able to use yahoo at all, you should link your applications to the relevant JavaScript files to use the functionality.

Note: You could actually skip this step and link to the file directly on Yahoos or Googles servers. However you'll get better performance if you install them into your intranet.

 

Step 2: Link to the relevant files in your code

The developers have chosen to keep the files open, meaning that you only load the portions of the Library that you actually need instead of bringing down every single function for every single UI component that you could use. This aspect does however mean that you need to visit http://developer.yahoo.com/yui/articles/hosting/ in order to figure out what files you need (the image below is that page where I clicked 'DataTable Control', 'Button Control').

 

It is a simple matter to redirect the links to the ones on your site as the code below shows.

<!-- Individual YUI CSS files -->
<link rel="stylesheet" type="text/css" href="http://Intranet/YUI/build/button/assets/skins/sam/button.css">
<link rel="stylesheet" type="text/css" href="http://Intranet/YUI/build/datatable/assets/skins/sam/datatable.css">
<!-- Individual YUI JS files -->
<script type="text/javascript" src="http://Intranet/YUI/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="http://Intranet/YUI/build/dom/dom-min.js"></script>
<script type="text/javascript" src="http://Intranet/YUI/build/event/event-min.js"></script>
<script type="text/javascript" src="http://Intranet/YUI/build/element/element-min.js"></script>
<script type="text/javascript" src="http://Intranet/YUI/build/button/button-min.js"></script>
<script type="text/javascript" src="http://Intranet/YUI/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://Intranet/YUI/build/datatable/datatable-min.js"></script>

 

Step 3: Make Button

Try out the simple example below to generate a very simple 'Hello World' application.

<html>
<head>
<title>
Hello YUI World!
</title>
<head>
<body class=" yui-skin-sam">
<!-- Individual YUI CSS files -->
<link rel="stylesheet" type="text/css" href="http://Intranet/YUI/build/button/assets/skins/sam/button.css">
<link rel="stylesheet" type="text/css" href="http://Intranet/YUI/build/datatable/assets/skins/sam/datatable.css">
<!-- Individual YUI JS files -->
<script type="text/javascript" src="http://Intranet/YUI/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="http://Intranet/YUI/build/dom/dom-min.js"></script>
<script type="text/javascript" src="http://Intranet/YUI/build/event/event-min.js"></script>
<script type="text/javascript" src="http://Intranet/YUI/build/element/element-min.js"></script>
<script type="text/javascript" src="http://Intranet/YUI/build/button/button-min.js"></script>
<script type="text/javascript" src="http://Intranet/YUI/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://Intranet/YUI/build/datatable/datatable-min.js"></script>

<script>
var oPushButton1 = new YAHOO.widget.Button({ label:"Say Hi", id:"pushbutton1", container:"pushbuttons" });
oPushButton1.on("click", Hello);
		
function Hello()
{
	alert ("Hello YUI World!");
}
</script>
<div id="pushbuttons"></div>
</body>
</html>

The basic syntax is to create Yahoo UI objects (new YAHOO.widget.Button...) and then assign Events to them (Button.on...). Be sure to setup container DIV's and functions to handle the additions of course.

Step 4: Make Table

Try out the simple example below to generate a very simple DataTable application.

<html>
<head>
<title>
Hello YUI DataTables!
</title>
<head>
<body class=" yui-skin-sam">
<!-- Individual YUI CSS files -->
<link rel="stylesheet" type="text/css" href="http://Intranet/YUI/build/button/assets/skins/sam/button.css">
<link rel="stylesheet" type="text/css" href="http://Intranet/YUI/build/datatable/assets/skins/sam/datatable.css">
<!-- Individual YUI JS files -->
<script type="text/javascript" src="http://Intranet/YUI/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="http://Intranet/YUI/build/dom/dom-min.js"></script>
<script type="text/javascript" src="http://Intranet/YUI/build/event/event-min.js"></script>
<script type="text/javascript" src="http://Intranet/YUI/build/element/element-min.js"></script>
<script type="text/javascript" src="http://Intranet/YUI/build/button/button-min.js"></script>
<script type="text/javascript" src="http://Intranet/YUI/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://Intranet/YUI/build/datatable/datatable-min.js"></script>
<div id="Result"></div>
<script>
var myData = [
  {Id: 1, Name: "BOLT", Type: "PART"},
  {Id: 2, Name: "POWER SUPPLY", Type: "ASSY"},
  {Id: 3, Name: "CONNECTOR", Type: "PART"},
  {Id: 4, Name: "BRACKET", Type: "PART"},
  {Id: 5, Name: "SWITCH", Type: "PART"},
  {Id: 6, Name: "CIRCUIT BOARD", Type: "ASSY"}
];

myTable = function() {
var myColumnDefs = [
  {key:"Id", label:"Index", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true, resizeable:true},
  {key:"Name", formatter:YAHOO.widget.DataTable.formatString,sortable:true, resizeable:true},
  {key:"Type", formatter:YAHOO.widget.DataTable.formatString,sortable:true, resizeable:true}		
];
	
	
var myDataSource = new YAHOO.util.DataSource(myData);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema = {
  fields: ["Id","Name","Type"]
};
var myDataTable = new YAHOO.widget.DataTable("Result",
  myColumnDefs, myDataSource, {caption:"DataTable Caption"});

return {
  oDS: myDataSource,
  oDT: myDataTable
};
}();

var RecordSet = myTable.oDT.getRecordSet();
var Records = RecordSet.getRecords();
alert (Records.length);

</script>
</body>
</html>

There are a few key concepts you need to get your head around before working with tables.

  • First one must have a 'DataSource'.
  • Second one must have a set of 'Column Definitions'.
  • Third always write the code as a self-executing function so that you always have a global reference to the master table in the script.
  • Forth make sure containers for UI components are before scripts to avoid load errors (or assign code to run when body onload executes)
  • //The JavaScript object syntax allows
    //an Array of Objects to be written out
    //easily.
    AnArrayOfMyObjects = [
      {key1: valkey1Obj1, key2: valkey2Obj1},
      {key1: valkey1Obj2, key2: valkey2Obj2},
      {key1: valkey1Obj3, key2: valkey2Obj3}
    ];
    

    DataSources; can be easily constructed from Arrays of JavaScript objects as you can see above. To work with Pro/Web.Link sequences, we'd simply need to write a function to convert them to regular Arrays.

    Column Definitions; at it's most simplist it's enough to simply define which columns are to be shown. However the simplicity can be replaced with full-out functionality that can control exactly how each column formats and even allow dynamic editing of the table contents. The DataTable control is a truly remarkable peice of code, but you'll have to hunt down the finer details yourself.

    MySelfExecutingFunction = function(){
      //Code in Here
    }();
    

    Self Executing Function; this takes the form as shown right. The brackets '()' placed after the end brace '}' cause the browser to immediately run the function AND assign it to the variable on the left.

    Conclusion

    The YUI is a superbly executed software module and is an ideal for Simple Automation projects. There are competing libraries out there but Yahoo's take on the JavaScript Library is unsurpassed in my opinion for the aspects that enable Simple Automation applications, namely fast and professional looking UI components.