XML - Managing Data Exchange/XUL/Answers

From Wikibooks, open books for an open world
< XML - Managing Data Exchange‎ | XUL
Jump to: navigation, search

Exercises

  1. Create a window that contains two text boxes that are approximately 200 pixels down the window. Use either vertical or horizontal layout. Label each text box and set default values for each text box that are different from each other. Create a button labeled ‘Swap text’. Next, create a function that when the button is clicked, will swap the text from one text box to the other.
  2. In this exercise, you will need to make two separate files. On one page, create a window that has two tabbed panels with different content on each. On the other page, simply make a popup menu with one menu item ‘Open’. Create a function that will redirect the browser to the tabbed page when the ‘Open’ menu option is clicked.

Question 1: Answer

XulNum1.js

          function swap()
          {
            var noDanaObj=document.getElementById('nodana');
            var onlyXulObj=document.getElementById('onlyxul');
            var noDanaStr=noDanaObj.getAttribute("value");
            var onlyXulStr=onlyXulObj.getAttribute("value");
            noDanaObj.setAttribute("value",onlyXulStr);
            onlyXulObj.setAttribute("value",noDanaStr); 

          }

XulNum1.xul

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
   
   <window
       id="Ex1"
       title="Excercise 1"
       orient="vertical"
       xmlns= "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">    
   <script src="XulNum1.js" />

   
  <hbox width="200px" height="200px" flex = "1">
     <text value= "There is no Dana..." id="nodana" style="font-size:18pt"/>
  </hbox>

  <hbox width="200px" height="200px" flex = "1">
     <text value="There is only XUL" id="onlyxul" style="font-size:24pt"/>
  </hbox>

<box width="200px">
        <button id="swap" label="swap" default="true" oncommand="swap();"/>
</box>


</window>