Juixe Techknow

With JavaScript you can access and update an element’s style and even its class. Say that you have two CSS classes:

.warning {color: yellow;}
.error {color: green;}

You can update or switch an element’s CSS class with the following JavaScript code:

var element = document.getElementById('element');
element.className = 'warning';

But you can access individual CSS attributes via an element’s style object, such as

var element = document.getElementById('element');
element.style.color  = 'green';

Of course, you might update an element’s style based on some event or in conjunction of an Ajax call.

A lot of peeps are talking about Ajax this and Ajax that. Since JavaScript is the J in Ajax, what a lot of people have set out to do is create JavaScript effects libraries. There are several libraries available such as dojo toolkit, prototype framework, script.aculo.us, and others. I wanted to us some effects on several projects, including this site, and decided to try out moofx but because a restriction in use I opted to write some JavaScript code of my own. The issue with moofx was that you could not apply padding or borders to your element if you wanted to use the Height and/or Width effect. Since I wanted to minimize the height of an element and those elements had borders and padding I could not use moofx. So instead I just developed a bit of JavaScript code to change the element’s CSS. Here is the code:

function fxToggle(id) {
    var element = document.getElementById(id);
    if(element && element.style) {
        var isBlank = true;
        if(element.style.display != 'none') {
            element.style.display = 'none';
        }else {
            element.style.display = 'block';
        }
    }
    return false;
}

This code will toggle an element’s display from none to block. When the display is set to none the element is not visible or takes up any real estate. I use a link to toggle an element’s display like this:

<A href="#" onclick="return fxToggle('elemId');">
  Meta
</A>

“Learn something new every day.” That is my personal motto and I really feel that everyday I learn something new. Well, the other day I learned about MS Word’s Mail Merge capabilities. Word’s Mail Merge feature allows you to define a Word document template to be used for every row in a data source file. Your data source can be an Excel file or a Word document with a single table. Once you have a data source file you can merge it with the template using the following Visual Basic script code:

Sub OpenWord(fileName, datasource)
   Set Word = WScript.CreateObject("Word.Application")
   Word.Visible = True
   Set doc = Word.Documents.Open(fileName)
   doc.MailMerge.OpenDataSource(datasource)
   doc.MailMerge.Execute True
End Sub

Even though I have two monitors, I need to utilize every possible dpi of IDE real estate. Eclipse has provides for different perspectives such as Debug and Java but it does not matter what perspective I am using, I am most interested in the code. To focus on the code select the source file you are interested and hit ctrl+m. Ctrl+m will maximize the currently selected tab. To switch back to your perspective hit the ctrl+m again.

Every Java programmer will tell you that you can pause a program using the sleep static method of the Thread class.

Thread.sleep(milliseconds);

JavaScript does not have a wait or sleep method but instead provides the setTimeout and setInterval functions. Here is some JavaScript code to demonstrate the setTimeout function:

setTimeout('alert("Hello, World")', 4000);
alert('Hello, Web');

The Hello, World message will display after 4 seconds, and after the Hello, Web message. In essence, this function treats a piece of JavaScript code as a child and gives it a ‘time out.’ In contrast, the setInterval method will repeatedly execute a piece of code at a given time interval in milliseconds until you stop it. When compare side by side, I rather use the setTimeout function. Here is a recursive-like example using the setTimeout function that mimics setInterval.

var myColors = new Array(
    '#000000',
    '#FF0000',
    '#00FF00',
    '#0000FF',
    '#FFFFFF'
    );

function myFunx(index) {
    if(!index || index > myColors.length) {
        index = 0;
    }
    setTimeout('myFunx('+(index+1)+')', 2000);
    document.bgColor=myColors[index];
}

myFunx();

The example above updates the background color every other second. Don’t try this at home unless you are a trained professional or are writing trivial JavaScript examples.

Whenever I start debugging the struts based web application I am working on the server freezes. I am using JBoss/Tomcat with Struts 1.1 and Eclipse 3.1. Since I can’t fire up the debugger, mark breakpoints, and set expressions I fell back to the tried and tested ‘printf method of debugging’. I call it ‘printf’ because I learned to debug this way back in my C programming days in college. Since I couldn’t fire up the debugger and examine the strack trace I throw my own debugging exceptions and print out the last few lines method calls in the stack.

    try {
        // TODO: Remove/debug
        throw new Exception("DEBUG EXCEPTION");
    }catch (Exception ex) {
        Object[] stack = ex.getStackTrace();
        for(int i=0; i < 4; i++) {
            System.out.println(stack[i]);
        }
    }

I should probably look more deeply into why the server freezes when I start up the debugger. On the other hand, I have managed to come up with a work around to get the job done.