Welcome!

Industrial IoT Authors: Elizabeth White, Stackify Blog, Yeshim Deniz, SmartBear Blog, Liz McMillan

Related Topics: Industrial IoT

Industrial IoT: Article

XML Integration Features IN IE5.x

XML Integration Features IN IE5.x

Internet Explorer 5.x has several XML integration features that can streamline development of corporate intranets and other enterprise applications when it's the browser of choice. Complementary technologies, XML data islands and XML data binding, allow for more efficient code while offloading some of the more mundane processing from the Web server to the client. The third feature, XMLHTTP post, allows IE 5.x to easily post XML back to the Web server.

What is an XML data island? It's simply XML data that's actually part of the HTML page. By using the XML element, XML data can either be included in the HTML page between an <XML></XML> block, commonly called inline XML, or it can be referenced via the XML element's SRC attribute.

Inline
<XML id="xmlFinal">
<?xml version="1.0" ?>
<teams>
<team>Duke</team>
<team>Arizona</team>
</teams>
</XML>

By reference
<XML ID="xmlFinal" SRC="teams.xml">

XML data contained in these data islands can then be bound to HTML elements on the page via the XML Data Source Object (DSO). For our purposes we'll call it XML data binding. The process of binding XML data to specific elements is accomplished by specifying a DATASRC and/or DATAFLD attribute for the bound HTML element. The DATASRC attribute corresponds to the ID value of the XML data island with a # prepended to it: in this case DATASRC="#xmlFinal". The DATAFLD attribute value refers to the actual XML element or attribute to be bound - for example, DATAFLD="team".

A Simple Example
The best way to illustrate the basic principles is with an example. We'll use the XML in Listing 1 as the source of our data island. This data represents the four teams that competed in the 2001 Men's NCAA College Basketball Championship in Minneapolis. Listing 2 contains the complete source for the example.

The first step is to place an XML tag in the HTML source whose SRC attribute value points to finalfour.xml. This is accomplished with <xml id="finalfour" src="finalfour.xml"></xml>. When the page is rendered on the client, the XML data in Listing 1 will be pulled from the server and become part of the client-side document object. You can actually navigate to the XML tag via the HTML DOM's document.all collection. It's treated the same as any other node in the document tree.

Second, the data must be bound to the appropriate HTML element. In this case each element is bound inside a TD element of a four-columned table.

<tr>
<td><div datafld="region"></div></td>
<td><div datafld="school"></div></td>
<td><div datafld="nickname"></div></td>
<td><div datafld=
"conference"></div></td>
</tr>

The result is the page shown in Figure 1. Notice how in this example the bound elements are enclosed in DIV tags. This is because the TD element doesn't support data binding. Also, the syntax for binding to attributes in the XML data island is the same as that for binding to elements. No special syntax is required to bind the region attribute as opposed to <school>. The exception to this is if an element and one of its attributes share the same name. Here the syntax for binding to the attribute would be to prepend an ! to the attribute name. For example:

<td><div datafld="!region"></div></td>

Real-World Example
In the previous example a client- or server-side xsl transformation would have provided us with a cleaner and more robust mechanism for achieving the same result. This holds true for most read-only applications that utilize XML-based data. Where IE 5.x's intrinsic support for data islands and XML data binding excels is in building real-world applications. In the real world users don't just look at data, they interact with it. They make changes and crunch numbers, and then want to persist those changes to some back-end data store.

The traditional way to handle such activity is to post an HTML form to an Active Server Page or Java servlet. The form variables, by way of a request object, are then used to set the properties of or to call methods on server-side COM+ components or JavaBeans. While this works well, it can result in overly complex code that's prone to mistakes. The problem is that the physical representation of the data is different at each level. On the server it may be an ADO or JDBC recordset, an array, or an XML stream. It's then coerced into HTML for its trip to the client. When the time comes to send the data back to the server, it comes in the form of HTTP post variables, at which point it's once again transformed to its original format.

This constant shifting of formats is enough to give even the most well-grounded data an identity crisis. The point, of course, is that the underlying data, whether it resides on the client or the server, is the same, so why should it be necessary to go through all these gyrations? Well, if you're using or beginning to use XML and have the luxury of targeting IE 5.x, it doesn't have to be this way.

With IE 5.x, XML data islands allow data to be represented the same on both client and server. In addition, XML data binding allows this data to integrate seamlessly with the presentation layer in a way that doesn't require that the data be manually mapped to HTML elements either via client-side script or server-side code. To illustrate this point we'll build on the preceding example.

Interactive Example
Listing 3 expands on the simple example by including another table in which the XML is bound to editable HTML INPUT elements. Both tables are now bound to the same XML data island but with a somewhat different presentation, as shown in Figure 2. Binding to INPUT elements is no different from binding to read-only HTML elements:

<tr>
<td><div datafld="region"></td>
<td><input type="text" datafld=
"school"></td>
<td><input type="text" datafld=
"nickname"></td>
<td><input type="text" datafld=
"conference"></td>
</tr>

When updates are made to fields in the updatable table, the changes are immediately reflected in the read-only table. This is the beauty of XML data binding. Without a single line of code, changes to bound elements are propagated back to the underlying data store (in this case the finalfour XML data island) and reflected in any other bound elements. A lot is going on under the hood to implement this behavior, of course, but what's significant is that it's been abstracted to the point where you as the programmer can concentrate on the business solution rather than custom event handlers and data mapping.

Validation and Edit Checking
Applying various edit-checking and validation routines to the bound data is really no different than with traditional browser-based applications. One of the niceties of the XML data island approach is that we also have a window into the underlying data source that's easy to work with and navigate. If we take the example above and add an "onchange" event handler, we can see just how easy it actually is. First we add the event handler:

<script for="txtSchool" event=
"onchange">
var dupeSchool = checkForDupe
(this.value);
event.cancelBubble = true;
if(dupeSchool){
alert("School is already
represented.");
retVal = false;
this.select();
} else {
retVal = true;
}
return retVal;
</script>

This event will fire anytime the school value is updated. This event handler calls a JavaScript function called checkForDupe that checks to make sure we don't have duplicate entries. The checkForDupe code is as follows:

function checkForDupe(teamName){

var xPath = "//team[school =
'" + teamName + "']";
schoolNode = finalfour.
documentElement. _
selectSingleNode(xPath);
dupeSchool = (schoolNode != null);
return dupeSchool;
}

The most important thing to note here is the ability to work with the finalfour XML data island as a full-fledged MSXML DOM object that can be walked, manipulated, and interrogated. Here the updated txtSchool value is used to build an XPath expression that can be passed as an argument to the selectSingleNode method. If we were to change Duke to Uconn, the resultant XPath expression in line 1 of checkForDupe would be //team[school = 'Uconn']. Executing finalfour.documentElement.selectSingleNode(XPath); would return null since no nodes matching that XPath expression would be found. If a node is found, checkForDupes returns true and the cursor remains on the current txtSchool INPUT element.

Deleting and Adding Content
As with most interactive applications, a mechanism for adding and deleting content is also required. Although this article won't go into detail about how to implement this functionality, the combination of MSXML DOM manipulation on the client along with XPath support provides the framework for doing these sorts of things in a variety of ways.

Posting Content Back to the Server
Now that changes have been made to the XML data island, the next logical question is how these changes are propagated back to the server so they can be saved to some persistent data store. This can be done in several ways, the most obvious being to stuff the contents of finalfour into a hidden form variable - but there's a much more elegant way. The version of MSXML that ships with IE 5.x includes what's called the XMLHttpRequest object. This basically allows for the sending of generic HTTP requests to a Web server in either a synchronous or asynchronous manner. In our example we're interested mainly in sending XML and receiving a response back in the form of XML. If you're thinking Web services at this point, that's good, because the underlying technology used here forms the basis for Web services. We've got XML on the wire (less SOAP headers and tags) that will be processed by some ASP or Java servlet that will in turn return a status encoded in XML. To accomplish this, a button will be added to the example above with an onclick event handler that calls the following routine:

function PostXML(){
var xmlhttp = new ActiveXObject
("Microsoft.XMLHTTP");
xmlhttp.open("POST", _
"http://developerbox/dummy/
testHttpPost.asp", false);
xmlhttp.setRequestHeader
("content-type","text/xml");
xmlhttp.send(finalfour.xml);
alert(xmlhttp.responseText);
}

The first line creates a new instance of the XmlHttpRequest object. It uses the standard syntax for instantiating client-side COM objects in Microsoft IE. The programmatic ID in this case is Microsoft.XMLHTTP. The Open method of the XmlHttpRequest object takes up to five arguments. The first is the request type, which usually will be either POST or GET. The second, the URI, can be either an absolute address or a relative one. The third argument is the Async indicator. The default here is true, which simply means that control will be returned to the caller immediately and the user must code an appropriate event handler. We set this indicator to false because we want to wait for a response before continuing.

It's also necessary to set the content-type to TEXT/XML when posting so the receiving ASP page or servlet knows how to parse the content. Finally, the send method is used to POST the finalfour XML to the URL specified in the Open method. Because the Async indicator was set to false in the Open method, this call blocks until a response is sent back by testHttpPost.asp. The contents of testHttpPost.asp are shown in Listing 4. In this case testHttpPost.asp simply sends back a status message of <status>OK</status> that's displayed in an alert dialog.

Conclusion
The combination of XML data islands and XML data binding, and the ability to post XML to the Web server with the XmlHttpRequest object provide a powerful and robust mechanism for writing intranet and IE 5.x-centric Web applications. Not only can it reduce coding time and ease maintenance tasks, but it also provides a means for offloading work from the Web server to those not-so-thin clients that live on corporate desktops everywhere.

More Stories By Mike Morris

Mike Morris is cofounder of Developer Box LLC, a software development and consulting company located in Middletown, CT. He has been developing enterprise solutions for over 12 years on a variety of platforms.

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.


IoT & Smart Cities Stories
"Akvelon is a software development company and we also provide consultancy services to folks who are looking to scale or accelerate their engineering roadmaps," explained Jeremiah Mothersell, Marketing Manager at Akvelon, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
"Space Monkey by Vivent Smart Home is a product that is a distributed cloud-based edge storage network. Vivent Smart Home, our parent company, is a smart home provider that places a lot of hard drives across homes in North America," explained JT Olds, Director of Engineering, and Brandon Crowfeather, Product Manager, at Vivint Smart Home, in this SYS-CON.tv interview at @ThingsExpo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
DXWordEXPO New York 2018, colocated with CloudEXPO New York 2018 will be held November 11-13, 2018, in New York City and will bring together Cloud Computing, FinTech and Blockchain, Digital Transformation, Big Data, Internet of Things, DevOps, AI, Machine Learning and WebRTC to one location.
The current age of digital transformation means that IT organizations must adapt their toolset to cover all digital experiences, beyond just the end users’. Today’s businesses can no longer focus solely on the digital interactions they manage with employees or customers; they must now contend with non-traditional factors. Whether it's the power of brand to make or break a company, the need to monitor across all locations 24/7, or the ability to proactively resolve issues, companies must adapt to...
DXWorldEXPO LLC announced today that ICC-USA, a computer systems integrator and server manufacturing company focused on developing products and product appliances, will exhibit at the 22nd International CloudEXPO | DXWorldEXPO. DXWordEXPO New York 2018, colocated with CloudEXPO New York 2018 will be held November 11-13, 2018, in New York City. ICC is a computer systems integrator and server manufacturing company focused on developing products and product appliances to meet a wide range of ...
René Bostic is the Technical VP of the IBM Cloud Unit in North America. Enjoying her career with IBM during the modern millennial technological era, she is an expert in cloud computing, DevOps and emerging cloud technologies such as Blockchain. Her strengths and core competencies include a proven record of accomplishments in consensus building at all levels to assess, plan, and implement enterprise and cloud computing solutions. René is a member of the Society of Women Engineers (SWE) and a m...
@DevOpsSummit at Cloud Expo, taking place November 12-13 in New York City, NY, is co-located with 22nd international CloudEXPO | first international DXWorldEXPO and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is no time t...
Founded in 2000, Chetu Inc. is a global provider of customized software development solutions and IT staff augmentation services for software technology providers. By providing clients with unparalleled niche technology expertise and industry experience, Chetu has become the premiere long-term, back-end software development partner for start-ups, SMBs, and Fortune 500 companies. Chetu is headquartered in Plantation, Florida, with thirteen offices throughout the U.S. and abroad.
DXWorldEXPO | CloudEXPO are the world's most influential, independent events where Cloud Computing was coined and where technology buyers and vendors meet to experience and discuss the big picture of Digital Transformation and all of the strategies, tactics, and tools they need to realize their goals. Sponsors of DXWorldEXPO | CloudEXPO benefit from unmatched branding, profile building and lead generation opportunities.
CloudEXPO New York 2018, colocated with DXWorldEXPO New York 2018 will be held November 11-13, 2018, in New York City and will bring together Cloud Computing, FinTech and Blockchain, Digital Transformation, Big Data, Internet of Things, DevOps, AI, Machine Learning and WebRTC to one location.