Building your first XUL application - step 2

---

• Open project.xul and change the existing code after the xmlns: declarations to match the following:

  
          <!-- main top level container -->
  
          <vbox flex="1" class="test_v">
  
           <label value="vbox 1 - the top level container"/> 
  
   
  
           <hbox flex="1" class="test_h">
  
           <label value="hbox a - inner container"/>
  
    
  
            <!-- a container for some kind of list -->
  
            <vbox flex="1" class="test_v">
  
            <label value="vbox 2 - left navigation area"/>
  
            </vbox>
  
   
  
            <!-- container for messages and tool areas -->
  
            <vbox flex="2" class="test_v">
  
            <label value="vbox 3 - right content area"/>
  
   
  
             <!-- used to display message -->
  
             <hbox  id="contentArea"  flex="3" class="test_h">
  
             <label value="hbox b - login area"/>
  
             </hbox>
  
  
  
             <!-- used to display typing area  -->
  
             <hbox flex="3" class="test_h">
  
             <label value="hbox c - typing area"/>
  
             </hbox>
  
  
  
             <!-- used to display tool area-->
  
             <hbox flex="1" class="test_h">
  
             <label value="hbox d - tool area"/>
  
             </hbox>
  
   
  
            </vbox>
  
  
  
           </hbox>
  
    
  
          </vbox>
  
          




From Firefox, navigate to the XUL file location and open it. The result should look like the following:

Note that the inner container (hbox a) is visible because of the amount of space its label takes up.

<< Back to Step 1 • My first XUL app - Step 3 >>

Back to Tutorial Contents