Get twisted and change your twisties (Page 2)

Search DominoPower's 11,437 Lotus-related article archive

Home
EasyPrint
News details

Articles-only

Twitter Feed

Get twisted and change your twisties (continued)

There are a few more icons there, which are worthwhile to have a look at, like default database icon and column sort icons.

Twist a view
The file-changing trick we talked about above changes all the twisties in one go for the whole server, which is usually not required (or desired). In most cases you'd probably want only to change twistie shapes for specific database views or just for one view.

Since I'm going to use JavaScript for this purpose, what follows is a short introduction.

JavaScript is a scripting language embedded in the HTML document or in separate file (*.js), used to run code on the client-side, within the browser. Limited functionality is available, but it can be very useful for stuff like data validation at client end and making a site interactive (like hovers that change images or text color changes when pointing at links). Basically, you embed little chunks of code in your HTML that the client browser runs when received from the server.

We're going to use JavaScript to get untangled from our twistie twist. Here's a chunk of code:


<SCRIPT LANGUAGE=JavaScript>

var a;

a=2;

if(a>0)

	document.write('Shabbir');

</SCRIPT>

First of all, the above code includes the <SCRIPT> HTML tag. According to the HTML spec, if some scripting language like JavaScript, VBScript or JScript is embedded in the document, it must be enclosed by <SCRIPT> and </SCRIPT> tags, with the LANGUAGE attribute specifying which HTML Scripting language is used. In this case, we're using JavaScript.

Now, let's take a look at the few statements in the script:

First, we assign the value 2 to the variable a;

Next, we check to see if a is greater than 0;

Finally, I use the statement document.write('Shabbir'); document is a JavaScript object whose method write is used to display text where the script is placed.

Work with me for a moment, there's more to come. Think of this as just a simple JavaScript example. We'll look at the real routine below.

The best way to solve the twistie problem is that some JavaScript must execute when your view template or the form embedding the view is loaded.

A basic strategy is to load two extra image objects, one for expand and the other for collapse. Then, the document images collection provided in JavaScript is used to check the image URLs to see if it wants an expanded or collapsed image and then replace it. However, while loading images, the browser keeps the source URL undefined (i.e. null). Therefore, a loop is used which keeps executing until all images are loaded. Here's the JavaScript code:


<SCRIPT LANGUAGE=JavaScript>



var i, nullcount, expand, collapse; 



expand=new Image();  // creates new image object instance and assign reference

expand.src = '/icons/expview.gif'; //place URL to your image for expand 

collapse=new Image();  

collapse.src = '/icons/colview.gif'; //place URL to your image for collapse

nullcount=1; // initialize nullcount to non-zero so it enters the while loop.



while(nullcount ) //while loop tests if all the images are loaded by the browser

{

nullcount=0; // Reset nullcount which counts number of images remaining to download.

// document.images is collection of all images (<IMG> tags) on the document

// it has length attribute representing the image count.

for(i=0; i<document.images.length; i++)  

{

if(document.images[i].src==null) // src is property storing image url

 nullcount++;

else

{

if(document.images[i].src.indexOf('expand.gif')>0)  // checks expand

document.images[i].src=expand.src; 

else if(document.images[i].src.indexOf('collapse.gif')>0) //checks collapse

document.images[i].src=collapse.src;

}

}

}



</SCRIPT>