What are JavaScript Client Pages?

JavaScript Client Pages is a client-side Web development technology that makes it possible to develop client-side user interface code using the same paradigm as the one that is used on the server side, thereby making the overall design of the Web application more consistent and saving development time by cutting down on imperative JavaScript code development

Requirements

Minimum Requirements

Recommended

Design Goals

Why JavaScript Client Pages

On the server side, the generation of XHTML code is usually performed in a rather straightforward fashion using mostly declarative code consisting of XHTML tags, embedded scripting code and custom controls. This approach is widely used on all of the platforms listed below:

On the client side, however, the lack of integration between code and markup makes it rather difficult to generate code. Given below are several approaches used by rich application developers.

String Concatenation

var html = '<table class="grid">'
+ '<thead>'
+ '<th>First Name</th>'
+ '<th>Last Name</th>'
+ '<th>Salary</th>'
+ '</thead>'
+ '<tbody>';
for(var i=0;i < items.length; i++) {
html += '<tr>'
+ '<td class="name">'
+ items[i].firstName
+ '</td>'
+ '<td class="name">'
+ items[i].lastName
+ '</td>'
+ '<td class="amount">'
+ formatCurrency(items[i].salary);
+ '</td>'
+ '</tr>';
}
html += '</tbody>';
document.getElementById('container-1').innerHTML = html;

DOM Construction

var list = document.createElement('ul');
list.className = 'names';
for (var i=0;i < items.length; i++) {
var item = document.createElement('li');
if (items[i].amount >= threshold) {
item.className = 'over';
} else {
item.className = 'under';
}
item.appendChild(document.createTextNode(item.name);
list.appendChild(item);
}
document.getElementById('list-container').appendChild(list);

Neither of these approaches offers the clarity and ease of development commonly seen on the server side on any modern Web development platform. In comparison, here is what a JavaScript Client Page may look like:

JSCP with Embedded Code

<?xml version="1.0" encoding="utf-8" ?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:js="http://www.codeplex.com/JSClientPages/JSElements"> <head> <title>Page 1</title> <meta name="JSClientPage" content="employee-listing" /> </head> <body> <h1>JSCP Example 2 : Employee Listing</h1> <h2>Summary</h2> <div class="summary"> <span class="label">Number of Employees:</span> <span class="value"> <?js text(input.employees.length) ?> </span> <span class="label">Average Salary</span> <span class="value"> <?js text(input.averageSalary) ?> </span> </div> <h2>All Employees</h2> <table class="listing"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Position</th> <th>Salary</th> </tr> </thead> <tbody> <?js for(var i=0;i < input.employees.length; i++) {> <tr> <td> <?js text(employees[i].firstName) ?> </td> <td> <?js text(employees[i].lastName) ?> </td> <td> <?js text(employees[i].position) ?> </td> <td> <?js text(employees[i].salary) ?> </td> </tr> <?js } ?> </tbody> </table> </body> </html>

JSCP with XML tags

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:js="http://www.codeplex.com/JSClientPages/JSElements"> <head> <title>Page 1</title> <meta name="JSClientPage" content="employee-listing" /> </head> <body> <h1>JSCP Example 2 : Employee Listing</h1> <h2>Summary</h2> <div class="summary"> <span class="label">Number of Employees:</span> <span class="value"> <js:output value="input.employees.length" /> </span> <span class="label">Average Salary</span> <span class="value"> <js:output value="input.averageSalary" /> </span> </div> <h2>All Employees</h2> <js:table class="listing"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Position</th> <th>Salary</th> </tr> </thead> <js:tbody> <js:forEach collection="input.employees" item="employee"> <tr> <td> <js:output value="employee.firstName" /> </td> <td> <js:output value="employee.lastName"/> </td> <td> <js:output value="employee.position"/> </td> <td> <js:output value="employee.salary" /> </td> </tr> </js:forEach> </js:tbody> </js:table> </body> </html>

Invocation Sample

<!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>JSCP Example 2 - Employee Listing</title> <link rel="Stylesheet" type="text/css" href="Style/Stylesheet.css" /> <script type="text/javascript" src="JSClientPages.js"></script> <script type="text/javascript" src="JSClientPage.ashx?page=Example2.xml"></script> <script type="text/javascript"> employees = []; averageSalary = 0.0; function addEmployee() { var salary = document.getElementById('input-salary').value; if (!salary.match(/[1-9][0-9]*/)) { alert('The salary should be numeric (no decimals)'); } else { salary = parseInt(salary); averageSalary = (averageSalary * employees.length + salary) / (employees.length + 1); employees.push( { firstName: document.getElementById('input-first-name').value, lastName: document.getElementById('input-last-name').value, position: document.getElementById('input-position').value, 'salary': salary } );
var parameters = { 'employees': employees, 'averageSalary': averageSalary }; JSClientPage.refresh( 'employee-listing', 'employee-listing', parameters );
} } </script> </head> <body> <h1> JSCP Examples</h1> <h2> Employee Listing</h2> <p> This example illustrates JSCP's XML-based rendering capabilities </p> <form id="employee-form" action=""> <table class="form"> <tbody> <tr> <td> First Name </td> <td> <input id="input-first-name" type="text" name="first_name" /> </td> </tr> <tr> <td> Last Name </td> <td> <input id="input-last-name" type="text" name="last_name" /> </td> </tr> <tr> <td> Position </td> <td> <select id="input-position" name="position"> <option value="Programmer">Programmer</option> <option value="Manager">Manager</option> <option value="Executive">Executive</option> <option value="Accountant">Ancountant</option> </select> </td> </tr> <tr> <td> Salary </td> <td> <input id="input-salary" type="text" name="salary" /> </td> </tr> </tbody> </table> </form> <button onclick="addEmployee(); return false;"> Add </button> <div id="employee-listing"> </div> </body> </html>

License

This software is provided under a BSD-style license. Click here to view it.