Creating Prototypes

Now that you've created and registered the GUI classes, you can create prototypes of them to use in General Interface Builder. Prototypes are pre-built components, which are serialized instances of GUI objects that adhere to the General Interface serialization format.

In this step you'll create the Container and Widget prototypes.

The Container prototype will have these characteristics:

• A name, Container, that appears in the Component Hierarchy palette
• A description that appears in a tooltip in the Component Hierarchy palette
• The object type, my.example.Container, which is the class of the prototype
• The jsxname, mycontainerthing, which is the name of the component in the Component Hierarchy palette
• A width and height of 100%
• An overflow that scrolls

The Widget prototype will have these characteristics:

• A name, Widget, that appears in the Component Hierarchy palette
• A description that appears in a tooltip in the Component Hierarchy palette
• An object type, my.example.Widget, which is the class of the prototype
• The jsxname, mywidgetthing, which is the name of the component in the Component Hierarchy palette
• A width and height of 100%
• An absolute position
• Positioned zero pixels from the top and left of the parent container
• A background color of #cccccc

After you've created these prototypes, deployed the add-in, and enabled the add-in for a project, you can drag and drop the prototypes from the Component Libraries palette into the Live Component view of the work area.

See Prototype Serialization File Definitions for descriptions of the XML elements in the prototype serialization files.

To create the Container prototype:

1. Choose File > New > XML Document and copy and paste this code into the empty document:

   <?xml version="1.0" ?>
   <serialization xmlns="urn:tibco.com/v3.0">
     <name><![CDATA[Container]]></name>
     <description><![CDATA[Can only contain a widget]]></description>
     <object type="my.example.Container">
       <variants jsxoverflow="1"/>
       <strings jsxname="mycontainerthing" jsxwidth="100%" jsxheight="100%">
     </object>
   </serialization>

2. Save the file:
   
   1. Choose File > Save and navigate to the root of the myAddin folder.
      
   2. Click the *New Folde*r icon and create a folder named prototypes.
      
   3. Open the prototypes folder.
      
   4. Type Container.xml in the file name field and click Save.

To create the Widget protoype:

1. Choose File > New > XML Document and copy and paste this code into the empty document:

   <?xml version="1.0" ?>
   <serialization xmlns="urn:tibco.com/v3.0">
     <name><![CDATA[Widget]]></name>
     <description><![CDATA[Can only be contained by a container]]></description>
     <object type="my.example.Widget">
       <variants jsxleft="0" jsxtop="0" jsxwidth="100" jsxheight="100">
         jsxoverflow="1" jsxrelativeposition="0"/>
       <strings jsxname="mywidgetthing" jsxbgcolor="#cccccc"/>
     </object>
   </serialization>

2. Save the file as Widget.xml in the prototypes folder.