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
- An XSLT processor with support for the document() function
-
Rudimentary XHTML development skills using proper well-formed XML
syntax.
-
A browser with full DOM Level 1 support
Recommended
-
One of the platforms that are fully supported as of this
version:
- .NET 3.5 with ASP.net
- PHP
-
An IDE with full support for XML Schema to provide
code completion.
Design Goals
- Platform independence
- Ease of development
-
Standards compliance
- XHTML
- XML
- ECMAScript (JavaScript/JS)
- XSLT
- XML Schema
- Correct markup
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:
- JavaServer Pages (JSP)
- JavaServer Faces (JSF)
- ASP.net
- Classic ASP
- PHP
- Ruby on Rails
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
License
This software is provided under a BSD-style license.
Click here to view it.