I am trying to learn the Application Layout Control in the Ext Lib. I have watched several webcasts and read a few things, but I have three questions when I try to use it.

 

First, you must put in some code in the design definition property of the control. I have found a few places that have the code on the web, but I don't really understand what it does or how to change it and what I can change. The code I have found is below.

 

<?xml version="1.0" encoding="UTF-8"?>

<xp:view xmlns:xp="http://www.ibm.com/xsp/core"

 xmlns:xc="http://www.ibm.com/xsp/custom">

<xp:div style="background-color:#CEE1FC; padding:5px">

<table width="98%"><tr><td>

 {logo} &#160; {bannerApplicationLinks}

</td><td align="right">{bannerUtilityLinks}</td></tr></table>

 <xp:table style="width: 98%; background-color:#FFFFFF">

  <xp:tr>

   <xp:td colspan="3" style="background-color:#4586D3">

    <table width="100%"><tr><td>

     <table><tr>

      <td style="background-color:#4372A9;color:#FFFFFF">

       {titleBarTabs}</td>

      <td style="background-color:#E4E8EF">

       selected</td>

     </tr></table>

    </td><td>

     <div style="float:right;background:#FFFFFF">

        {searchBar}</div>

    </td></tr></table>

   </xp:td>

  </xp:tr>

  <xp:tr>

   <xp:td colspan="3" style="background-color:#E4E8EF">

    <table width="100%"><tr><td><h2>{placeBarName}</h2></td>

     <td>

       <div style="float:right;border:thin solid #C0C7CD">

        {placeBarActions}</div></td>

    </tr></table>

   </xp:td>

  </xp:tr>

  <xp:tr>

   <xp:td style="width:123px" valign="top">

    <xp:callback id="LeftColumn" facetName="LeftColumn"/>

   </xp:td>

   <xp:td valign="top">

    <xp:callback id="callback1"/>

<xp:br/><xp:br/><xp:br/>

   </xp:td>

   <xp:td style="width:123px" valign="top">

    <xp:callback id="RightColumn" facetName="RightColumn" />

   </xp:td>

  </xp:tr>

 </xp:table>

 <xp:table style="width: 98%; background-color:#FFFFFF; margin-top:5px">

 <xp:tr><xp:td> {footerLinks}</xp:td></xp:tr>

 </xp:table>

 {legalText}

 </xp:div>

</xp:view> 

 

 

Second, I am also told to put some code like this: 

 

 <xe:this.facets>

     <xp:callback xp:key="LeftColumn" facetName="LeftColumn"

          id="callback1"></xp:callback>

     <xp:callback xp:key="RightColumn" facetName="RightColumn"

          id="callback2"></xp:callback>

</xe:this.facets>

and

<xp:callback id="OneUIMainAreaCallback"></xp:callback>

 

 

but where do I put it? 

 

Third,  

 

What if I would like to have only one column and callback, or 4? Can I change that, and how. 

 

I would appreciate ANY help. Please point me in the right direction. 

 

Thanks,  

 

Bryan