Welcome!

Machine Learning Authors: Zakia Bouachraoui, Liz McMillan, Roger Strukhoff, Pat Romanski, Carmen Gonzalez

Related Topics: Machine Learning

Machine Learning : Article

Real-World AJAX Book Preview: Binding.xhtml

Real-World AJAX Book Preview: Binding.xhtml

This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs for the special pre-order price, click here for more information. Aimed at everyone from enterprise developers to self-taught scripters, Real-World AJAX: Secrets of the Masters is the perfect book for anyone who wants to start developing AJAX applications.

Binding.xhtml

<html xmlns="http://www.w3.org/1999/xhtml">
     <head>
       <title></title>
       <binding src="xincludeBinding.js" target="xinclude"/>
       <script type="text/javascript" src="bindings.js" defer="no"/>
       <style type="text/css"><![CDATA[
@import url('jsbinding.css');
]]></style>
     </head>
     <body>
       <xinclude src="ArtOfTheFugue.xhtml#intro" id="sidebar" buttons="yes"/>
     </body>
</html>

The first thing that may strike you as you're looking at this code is the fact that there is no inline scripting; the page as given is entirely XML driven. The presentation was handled by a simple CSS file included in the style block (which could have also been handled by a <link> element) (jsbinding.css):

jsbinding.css

#sidebar {
     width:6in;
     text-align:justify;
     display:block;
     background-color:lightYellow;
     padding:5px;
     border:inset 2px gray;
     }
p {font-size:9pt;font-family:Arial;}
pre {font-size:8pt;}
.xincludeButton {}
.xincludeButtonSelected {font-weight:bold;}
.xincludeButtonBar {
     width:100%;
     background-color:lightBlue;
     margin-left:-5px;
     padding:5px;
     padding-top:3px;}
.xincludeButtonBar_top {margin-top:-5px;}
.xincludeButtonBar_bottom {margin-bottom:-5px;}
.xincludeTitle {
     font-size:18pt;
     font-family:Arial;
     width:100%;
     background-color:#E0E0FF;
     padding:5px;
     margin-left:-5px;
     margin-top:-5px;
     margin-bottom:-5px;}

Most of the structure in the CSS defines the subordinate elements - the general display region, the button bar, each individual button - in terms of their visual appearances. Putting the visual (and other media) appearance in a separate CSS layer is important from a componentization layer, because this presentation layer makes it possible to reuse the component while providing very different interfaces as appropriate.

There are two pieces of "magic" that are going on in the background to make this particular XHTML file work. The first piece lays the foundation for creating bindings in general within XHTML, using the <binding> element to create an association between a binding definition and a given name (which may or may not be an element name). For instance, in the Binding.xhtml file, the element that bound the <xinclude> element to its definition was given by:

<binding src="xincludeBinding.js" target="xinclude"/>

However, in order for the page to understand how to use these binding elements, it was also necessary to invoke the script bindings.js so that the code to evaluate the binding definitions was given.

<script type="text/javascript" src="bindings.js" defer="no"/>

It's important here that the evaluation of this script is not deferred (thus defer="no") . The script needs to ensure that an event is added onto the window such that it will automatically perform the binding code once the window is initially loaded. This gets around the requirement of needing to place an onload event handler on the <body> element, keeping that particular slot open and making the code more modular.

The code for handling the binding is contained in bindings.js:

Bindings.js

window.addEventListener("load",function(){applyBindings()},true);
function applyBindings(){
     var bindingset=document.getElementsByTagName("binding");
     window.bindings = new Object;
    for (var i=0;i != bindingset.length;i++){
       var bindingNode =bindingset.item(i);
       var bindingObj = {target:bindingNode.getAttribute('target'),
         src:bindingNode.getAttribute('src'),
         http:new XMLHttpRequest(),
         code:null};
       bindingObj.http.open("GET","" + bindingObj.src,false);
       bindingObj.http.send(null);
       var text = ""+bindingObj.http.responseText;
       bindingObj.code = eval(text);
       window.bindings[bindingObj.target] = bindingObj;
       applyBinding(bindingObj.target);
       }
     }
function dump(obj){
     var buf = "";
    for (key in obj){
       buf+=key+":"+obj[key]+"\n";
       }
     alert(buf);
   }
function applyBinding(bindingTarget,boundNode){
   if (boundNode != null){
     var targets = [boundNode];
     }
   else {
     var targets = document.getElementsByTagName(bindingTarget);
     }
   var binding = window.bindings[bindingTarget];
   for (var index=0;index!=targets.length;index++){
       if (boundNode !=null){
         var target = boundNode;
         }
       else {
         var target = targets.item(index);
         }
       target._bindingConstructor = binding.code.constructor;
       var methods = binding.code.methods;
       for (method in methods){
         target[method] = methods[method];
         }
       var events = binding.code.events;
       for (eventItem in events){
         target.addEventListener(eventItem,events[eventItem],false);
         }
       target._bindingConstructor();
       }
   }
function getXPath(xpath,node){
     var xslt ='<xsl:stylesheet xmlns="http://www.w3.org/1999/xhtml" xmlns:
xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"><xsl:output method="xml"/
><xsl:template match="/"><root><xsl:copy-of select="'+xpath+'"/></root></xsl:
template><xsl:template match="*"><root><xsl:copy-of select="'+xpath+'"/></root> xsl:template></xsl:stylesheet>';
     xsltDoc = (new DOMParser()).parseFromString(xslt,"text/xml");
     var proc = new XSLTProcessor();
     proc.importStylesheet(xsltDoc);
     var doc = proc.transformToDocument(node);
     return doc.documentElement.childNodes;
     }
function xml_alert(node){
     alert((new XMLSerializer()).serializeToString(node));
     }

This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs, click here to order.

More Stories By Kurt Cagle

Kurt Cagle is a developer and author, with nearly 20 books to his name and several dozen articles. He writes about Web technologies, open source, Java, and .NET programming issues. He has also worked with Microsoft and others to develop white papers on these technologies. He is the owner of Cagle Communications and a co-author of Real-World AJAX: Secrets of the Masters (SYS-CON books, 2006).

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


CloudEXPO Stories
The precious oil is extracted from the seeds of prickly pear cactus plant. After taking out the seeds from the fruits, they are adequately dried and then cold pressed to obtain the oil. Indeed, the prickly seed oil is quite expensive. Well, that is understandable when you consider the fact that the seeds are really tiny and each seed contain only about 5% of oil in it at most, plus the seeds are usually handpicked from the fruits. This means it will take tons of these seeds to produce just one bottle of the oil for commercial purpose. But from its medical properties to its culinary importance, skin lightening, moisturizing, and protection abilities, down to its extraordinary hair care properties, prickly seed oil has got lots of excellent rewards for anyone who pays the price.
The platform combines the strengths of Singtel's extensive, intelligent network capabilities with Microsoft's cloud expertise to create a unique solution that sets new standards for IoT applications," said Mr Diomedes Kastanis, Head of IoT at Singtel. "Our solution provides speed, transparency and flexibility, paving the way for a more pervasive use of IoT to accelerate enterprises' digitalisation efforts. AI-powered intelligent connectivity over Microsoft Azure will be the fastest connected path for IoT innovators to scale globally, and the smartest path to cross-device synergy in an instrumented, connected world.
There are many examples of disruption in consumer space – Uber disrupting the cab industry, Airbnb disrupting the hospitality industry and so on; but have you wondered who is disrupting support and operations? AISERA helps make businesses and customers successful by offering consumer-like user experience for support and operations. We have built the world’s first AI-driven IT / HR / Cloud / Customer Support and Operations solution.
ScaleMP is presenting at CloudEXPO 2019, held June 24-26 in Santa Clara, and we’d love to see you there. At the conference, we’ll demonstrate how ScaleMP is solving one of the most vexing challenges for cloud — memory cost and limit of scale — and how our innovative vSMP MemoryONE solution provides affordable larger server memory for the private and public cloud. Please visit us at Booth No. 519 to connect with our experts and learn more about vSMP MemoryONE and how it is already serving some of the world’s largest data centers. Click here to schedule a meeting with our experts and executives.
Darktrace is the world's leading AI company for cyber security. Created by mathematicians from the University of Cambridge, Darktrace's Enterprise Immune System is the first non-consumer application of machine learning to work at scale, across all network types, from physical, virtualized, and cloud, through to IoT and industrial control systems. Installed as a self-configuring cyber defense platform, Darktrace continuously learns what is ‘normal' for all devices and users, updating its understanding as the environment changes.