Show TOC

XHTMLB GridLayout ExampleLocate this document in the navigation structure

Example places different HTMLB components in a GridLayout:

<?xml version="1.0"?> 
<GridLayout> 
 <GridLayoutCell id="cell1" row="1" column="1" width="100" height="100"> 
  <ButtonRow> 
   <Button id="tst1" width="100">Test1</Button> 
   <Button id="tst2" width="100">Test2</Button> 
  </ButtonRow> 
 </GridLayoutCell> 
 <GridLayoutCell id="cell2" row="1" column="2" width="100" height="100"> 
  <Tray> 
   <ButtonRow> 
    <Button id="tst3" width="100">Test4</Button> 
    <Button id="tst4" width="100">Test5</Button> 
   </ButtonRow> 
   <DropdownListBox id="Dropdown1" width="120" text="Dropdown"> 
    <parameter key="Item1" value="Value one"/> 
    <parameter key="Item2" value="Value two"/> 
   </DropdownListBox> 
  </Tray> 
 </GridLayoutCell> 
 <GridLayoutCell id="cell3" row="2" column="1" width="100" height="100"> 
   <ItemList> 
    <Group tooltip="group one tooltip"> 
     <Button isHeaderComponent="true" id="tst6" width="100">Test5</Button> 
     <a href="http://www.cnn.com">HTML Link</a> 
    </Group> 
    <Group> 
     <ButtonRow> 
      <Button id="tst7" width="100">Test1</Button> 
      <Button id="tst8" width="100">Test2</Button> 
     </ButtonRow> 
     <a href="http://www.cnn.com">HTML Link</a> 
    </Group> 
   </ItemList> 
 </GridLayoutCell>  
 <GridLayoutCell id="cell3" row="3" column="1" width="100" height="100"> 
  <Tree id="Tree1"> 
   <TreeNode id="Node1" Text="Node 1 text"> 
    <TreeNode id="Node3" Text="Node 2 text"> 
     <TreeNode id="Node2" Text="Node 3 text"> 
      <Button id="tst9" width="100">Test2</Button> 
     </TreeNode> 
    </TreeNode> 
    <TreeNode id="Node4" Text="Node 4 text"/> 
   </TreeNode> 
  </Tree> 
 </GridLayoutCell> 
 <GridLayoutCell id="cell4" row="3" column="2" Width="100%" height="100"> 
  <FlowLayout> 
   <CheckboxGroup id="CheckboxGroup1" ColumnCount="6"> 
    <Checkbox id="Checkbox1" value="Checkbox one"/> 
    <Checkbox id="Checkbox2" value="Checkbox two"/> 
    <Checkbox id="Checkbox2" value="Checkbox three"/>    
   </CheckboxGroup> 
   <TextView Labeled="true" Text="Test Text"/> 
  </FlowLayout> 
 </GridLayoutCell> 
 <GridLayoutCell id="cell5" row="4" column="1" width="100" height="100"> 
  <FlowLayout> 
   <RadioButtonGroup id="RadioGroup1" key="TestRadio" ColumnCount="10"> 
    <RadioButton id="Radio1" key="TestRadio0" selected="true">
       <InputField sid="Input0" value="test input2"/>
    </RadioButton> 
    <RadioButton id="Radio2" key="TestRadio1" 
                 text="Radio two" Labelled="true">
    </RadioButton> 
   </RadioButtonGroup> 
   <InputField id="Input2" value="test input" text="Text 2"/> 
   <InputField id="Input3" value="test input" text="Text 3"/> 
  </FlowLayout> 
 </GridLayoutCell>  
 <GridLayoutCell id="cell6" row="4" column="2" width="100" height="100"> 
  <TabStrip id="TabStrip1" width="200" bodyHeight="170"> 
   <TabStripItem index="1" title="First Tab"> 
    <TextView isHeader="true">Test Text</TextView> 
    <BreadCrumb isBody="true" id="BreadCrumb1" OnClick="alert('aaa');"> 
     <parameter name="Size" value="SMALL" class="enum.BreadCrumbSize"/> 
     <parameter name="Behavior" value="SINGLELINK"
                class="enum.BreadCrumbBehavior"/>     
      <parameter key="aaaa" value="aaaaa"/> 
      <parameter key="bbbb" value="bbbb"/> 
      <parameter key="ccc" value="cccc"/>       
      <parameter key="dddd" value="dddd"/> 
      <parameter key="eeee" value="eeeee"/> 
      <parameter key="ffff" value="ffffff"/>       
    </BreadCrumb> 
   </TabStripItem> 
   <TabStripItem index="2" title="Second Tab"> 
    <TextView isHeader="true">Test Text 2</TextView> 
    <ScrollContainer isBody="true" width="100" height="100"> 
     <Image src="http://www.ynet.co.il/PicServer/02202003//poraz_a.jpg"
            width="150" height="150"> 
      <ImageMap id="ImageMap1"> 
       <ImageArea Coordinates="0,0,150,50">
         <Link reference="http://www.cnn.com" target="_blank"/>
       </ImageArea>  
       <ImageArea Coordinates="0,50,150,100">
         <Link reference="http://www.bbc.com" target="_blank"/>
       </ImageArea> 
       <ImageArea Coordinates="0,100,150,150">
         <Link reference="http://www.latimes.com" target="_blank"/>
       </ImageArea> 
      </ImageMap> 
     </Image> 
    </ScrollContainer> 
   </TabStripItem>  
   <TabStripItem index="3" title="Third Tab"> 
    <TextView isHeader="true">Test Text 3</TextView> 
    <DateNavigator id="DateNavigator1" text="Date navigator"
         MonthsPerColumn="1" MonthsPerRow="1" onDayClick="xxxxxxxxxxxxx" >
           <DateNavigatorModel centeredMonth="2" centeredYear="2004"
                               localeUnknown="true" />
    </DateNavigator> 
   </TabStripItem>       
  </TabStrip>   
 </GridLayoutCell>  
</GridLayout> 

         

Result