Show TOC Start of Content Area

Syntax documentation XHTMLB GridLayout Example  Locate the document in its SAP Library 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

This graphic is explained in the accompanying text

 

 

End of Content Area