Email:   
Home
In This Issue
EasyPrint
Click here for the RSS feed's XML code. This is not a browser URL.
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>




[ Prev | Next ]

ZATZ Home  ·  News  ·  Back Issues  ·  Credits/Trademarks ·  Link To Us
-- Advertisement --

Learn Notes and Domino 8 at your place and pace!
Learn Notes and Domino in your office and/or home! TLCC's highly acclaimed distance learning courses for users, developers, and admins will enhance your career and your resume.

The many included activities and demos will make you a pro! Expert instructor help is a click away.

Click here to try a FREE demo course!!

-- Advertisement --

The Ultimate Notes Domino Training Experience - Amsterdam, 11-13 November
Get in-depth technical training that you can put to use on the job right away at THE VIEW's Admin2008 and Lotus Developer2008 Europe! One registration gets you into your choice of over 70 new and updated expert know-how sessions, one-on-one consultations, hands-on labs, and more.

See complete agendas and register by 10 October to save 495 euros!
Copyright © 1998-2008, ZATZ Publishing. All rights reserved worldwide.
Editor's Login