Layout Sample Code

Boxely supports two layout schemes: flowed (relative) and fixed (absolute)

• In flowed layout, which is the default scheme, boxes appear one right after another, arranged either horizontally or vertically. The exact position of a box is dependent on the number and sizes of the boxes appearing before it.
• In fixed layout, boxes have an absolute location relative to the parent box.

For additional information on layout, please check the Boxely User Guide: Appendix A - Box Layout Reference.

The following code is an example of you can use fixed layout to change the appearance of the boxes in your window.

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

<?import href="box://ocpToolkit/content/windowingPack/windowGadgets.box"?>
<?import href="box://ocpToolkit/content/core/coreGadgets.box"?>
<?import href="box://ocpToolkit/theme/default/toolkit.box"?>

<appWindow xmlns="http://www.aol.com/boxely/box.xsd"
  xmlns:s="http://www.aol.com/boxely/style.xsd"
  chromeless="true"
  s:height="380" s:width="260"   
  title="Pack Them Up and Move" >
  
  <library xmlns="http://www.aol.com/boxely/resource.xsd"
    xmlns:box="http://www.aol.com/boxely/box.xsd"
    xmlns:s="http://www.aol.com/boxely/style.xsd" >
    
    <gadget id="myGadget">
      <parts>
      <box:text id="greeting" value="Hello World!" />
      </parts>
    </gadget> 
  <style tag="myGadget" height="50" width="80" fill="white" hAlign="center" vAlign="center"
    stroke="black" strokeWidth="1" strokeCornerRadius="4" 
    fillCornerRadius="4" padding="1 4 2 4" margin="5"/>
  </library>
   
    <myGadget id="firstBox" s:position="fixed" s:top="20" s:left="20" />
    <myGadget id="secondBox" s:position="fixed" s:top="80" s:left="80" />
    <myGadget id="thirdBox" s:position="fixed" s:top="140" s:left="140" />
    <myGadget id="fourthBox" s:position="fixed" s:top="200" s:left="80" />
    <myGadget id="fifthBox" s:position="fixed" s:top="260" s:left="20" />  

</appWindow>
  

up next: Javascript