Building your first XUL application - step 5

---

Writing JavaScript to handle button functionality, part II.

• Re-open project.js, and save it as project2.js. Be sure to also change the reference to the .js file in project.xul:

  
          <script src="project2.js"/>
  
          

• Now it's time to leverage the power of a XUL structure with JavaScript to remove and add nodes to the XUL file before it is passed to the browser for display. First, changing the btnHandler function to handle exceptions to getting information about parent and child nodes. Start by removing this line:
  

  
          alert("button command: " + event);
  
          



• Replace that line with all of the following:

   
  
          try
  
          {
  
            //concatenating the returned values into a variable called infoString
  
            var infoString = "Type = " + event.type + ",";
  
            infoString += "Target = " + event.target + ",";
  
            infoString += "Target.tagName = " + event.target.tagName + ",";
  
            infoString += "Target.id = " + event.target.id + ".";
  
            document.getElementById("msgDescription").childNodes[0].nodeValue = infoString;
  
          }
  
          
  
          catch (e)
  
          {
  
            alert("btnHandler exception " + e);
  
          } 
  
          

• Next change the doLogin function to the following:

   
  
          function doLogin(event)
  
          {
  
            var loginName = document.getElementById("userName").value;
  
            var password = document.getElementById("password").value;
  
            // hard code the correct values to match for login 
  
            try
  
            {
  
              if ( (loginName == "XULuser") && (password == "XULpass") )
  
              // code can be added here later for more functionality
  
              {
  
                // remove all of the old login elements - notice how the id
  
                // value "contentArea" for the hbox is used
  
                var theParent = document.getElementById("contentArea");
  
            
  
                //loop through all of the nodes as long as there are nodes
  
                //loop through all of the nodes as long as there are nodes
  
                while(theParent.childNodes.length != 0)
  
                {
  
                  theParent.removeChild(theParent.childNodes[0]);
  
                }
  
                
  
                // rebuilding everything in the hbox
  
                
  
                //changing the style
  
                theParent.style.backgroundColor = "LightSeaGreen";
  
                theParent.style.borderColor = "gray";
  
                theParent.style.borderStyle = "ridge";
  
                
  
                //adding a spacer element
  
                var leftSpacer = document.createElement("spacer");
  
                leftSpacer.setAttribute("flex","1");
  
                theParent.appendChild(leftSpacer);
  
                
  
                //adding a description element
  
                var newDescription = document.createElement("description");
  
                var newDescriptionText = document.createTextNode("Welcome " + loginName);
  
                newDescription.appendChild(newDescriptionText);
  
                theParent.appendChild(newDescription);
  
                
  
                //adding another spacer
  
                var rightSpacer = document.createElement("spacer");
  
                rightSpacer.setAttribute("flex","1");
  
                theParent.appendChild(rightSpacer);
  
              }
  
              else
  
              {
  
                document.getElementById("msgDescription").style.backgroundColor="red";
  
                document.getElementById("msgDescription").style.color="white";
  
                document.getElementById("msgDescription").childNodes[0].nodeValue="User not authenticated.";
  
              }
  
            }
  
            catch (e)
  
            {
  
              alert("doLogin exception: " + e);
  
            }
  
           }
  
          

• Test the functionality by loading project.xul into Firefox and pressing the buttons. You should see something that looks like this: Step 5 demonstration


• In the example, try pressing each of the B1 - B4 buttons, and take note of how the message changes. Next press the Logon button without entering anything into the boxes. Finally, type "XULuser" (without the quotes) into the User Name box, and "XULpass" (without the quotes) into the Password box, the press the Logon button.

<< Back to Step 4

Back to Tutorial Contents