|
|
The Real Data – Presentation Isolation
Posted On October 13, 2005 by Ramdas S filed under Miscellaneous
There has been a constant effort, from both technology manufacturers and framework developers, to provide more and more functionality to ensure that data and presentation of data are as much separated as possible. With the current scripting languages, it is imperative that at some place or the other the presentation and data must be mixed in the code.
This article is written as a step towards 100% isolation of the two. While the page is served using any standard scripting languages like ASP, JSP or PHP, etc., the presentation and content are totally isolated and can be clearly seen. A typical HTML page example has been illustrated to demonstrate the concept of data/presentation isolation. The so-called HTML page can be generated from the server using any of the scripting languages mentioned above.
Please note that this code is tested in standard browsers, namely, IE, Netscape, Opera and Firefox.
Technical layout
The page consists of three elements, namely:
· Data represented in specific format;
· A JavaScript component, which loads data into the HTML objects at client end; and
· The virgin HTML page.
The various HTML objects demonstrated in the article include:
· Text box;
· Text area;
· Combo box;
· List box;
· Check box; and
· A table control.
Data Layer
The data is presented in defined Name value pair and is pumped into a JavaScript function, see example below:
function SetData(){
SetControl("CONT0","TXT","Marry Wilson");
SetControl("CONT1","TXA","Incharge for tech and Commercial aspects.");
SetControl("CONT2","CHK",true);
SetControl("CONT3","CMB",2);
SetControl("CONT4","LST","2,4");
SetControl("TD11","TD","Applicable remarks appear here. ");
}
Note that the data being presented has to follow the following rules:
1. The data is inside a JavaScript function “SetData”; and
2. The data is represented by:
a. The name of the control, which must hold the data;
b. The type of control (in this case, TXT, TXA, CMB, LST, TD, etc,); and
c. The actual data content.
The served Page
Presentation Layer
Observe the following points carefully in code 1:
1. Please note that the presentation layer is a “PURE VIRGIN” html produced from any standard editor like FrontPage or DreamWeaver, etc. with a simple JavaScript function call “SetData” on form load, which is explained in the next section (Link);
2. Notice that we can use CSS as required, like in any standard HTML page; and
3. Observe that each and every object, which must hold the data, are named and an ID provided to each.
<BODY onload=javascript:SetData()>
<table border='1'>
<tr>
<td>User Name</td>
<td><input type=text name="CONT0" ID="CONT0"></td>
</tr>
<tr>
<td>Responsibilities</td>
<td><textarea name="CONT1" ID="CONT1"></textarea></td>
</tr>
<tr>
<td>Privileged</td>
<td><input type=checkbox name="CONT2" ID="CONT2"></td>
</tr>
<tr>
<td>User Type</td>
<td>
<select size="1" ID="CONT3" >
<option value="1">Admin</option>
<option value="2">Sales Head</option>
<option value="3">Purchase Head</option>
</select>
</td>
</tr>
<td>Privileges</td>
<td>
<select size="4" multiple ID="CONT4" Name="CONT4">
<option value="1">Manage Masters</option>
<option value="2">Manage Customers</option>
<option value="3">Manage Vendors</option>
<option value="4">Manage Products</option>
</select>
</td>
</tr>
<tr>
<td>Remarks</td>
<td ID="TD11" ></td>
</tr>
</table>
</BODY>
The Link:
The heart of the page is here (refer code 2), the JavaScript function “SetData”. Please observe the following points in this regard:
1. The JavaScript is independent of the various controls/pages and thus can be placed in any standard .JS file and need not be included in the page. For this demonstration, this is placed along with the page;
2. With careful improvement, this can be extended carefully to various other controls like Radio button, etc.; and
3. This acts as a bridge to load data from the “Data layer” and into the “presentation Layer” represented by HTML content.
function SetControl(controlName,controlType,value){
controlName = controlName.toUpperCase();
myObject = window.document.getElementById(controlName);
if (myObject){
switch (controlType){
case("TXT"):
myObject.value=value; break;
case("TXA"): myObject.value=value;
break;
case("CHK"):
myObject.checked=value;
break; case("CMB"):
for (i=0;i<=myObject.options.length-1;i++){
if (myObject.options[i].value==value){
myObject.selectedIndex=i;
break; }
}
break;
case("LST"):
for (i=0;i<=myObject.options.length-1;i++){
myObject.options[i].selected=false;
}
valueArray = value.split(",");
for (i=0;i<=valueArray.length-1;i++){
for (j=0;j<=myObject.options.length-1;j++){ if (myObject.options[j].value==valueArray[i]){
myObject.options[j].selected=true; }
}
}
break;
case("TD"): myObject.innerHTML=value; break;
}
} else {
alert ('Object \"' + controlName + '\" not found !!'); }
}
Conclusion:
This is the most simple way to provide a really high level of flexibility where a virgin HTML gets life from live data on-the-fly and the page can have its own, or various other, JavaScript Circus to provide a range of user-friendly GUI (e.g. CSS) or any other event handlers, etc. All that the developer must work on is to know the Control Names and content. The HTML can even be a standard “Include also” in the scripting language, whereby the GUI designers can provide a skeleton HTML and improve presentation as the project progresses. The developer and GUI designer must communicate the object Names/Ids. In some medium-scale projects, where the client might provide some HTML pages, we can use them on “as is where is basis”.
Author:
With over 20 years experience in IT and operations, the author is working as a Senior Technical Consultant with B2B Software Technologies Ltd., Hyderabad. He can be reached at: rksastry@b2bsoftech.com.