Creating a New Project and JavaScript Classes

In this step you'll create a new project for developing a custom add-in, then create the classes Container and Widget :

• The Container class extends Block and includes a feature that allows only a Widget or Container component to be added as a child. If any other type of component is dropped on a Container, this message appears in the General Interface system log: The child object could not be accepted, because it is not of type container or widget.

• The Widget class extends Block and includes a feature that allows it to be accepted only as a child of a Container prototype. If a Widget is dropped on any type of component other than Container, this message appears in the General Interface system log: Widgets can only be added to containers. You must first add a container before adding a widget.

After you create these classes you'll register their class paths in the General Interface Project Settings dialog.

For more information about creating classes, see Class Inheritance and Introspection in the General Interface Developer Guide.

To create the project and Container class:

1. Choose Project > New Project and create a new project called myAddin.
2. Choose File > New > JavaScript File to open a new JavaScript file in the General Interface work area.
   
   Click here to expand screenshot...
   
   
   
3. Copy and paste this code into the new JavaScript file, to create the Container class:

   jsx3.require("jsx3.gui.Block");
   jsx3.lang.Class.defineClass("my.example.Container", jsx3.gui.Block, , function(Container,Container_prototype) {
     /**
      * main method
      */
     Container_prototype.init = function() {
       this.jsxsuper();
     };
   
     /**
      * Called before appending a child to the children list. Only allows
      * widgets and containers to be set as children of a container
      * @return {boolean} true to allow the set, false to veto
      */
   
     Container_prototype.onSetChild = function(objChild) {
       ///jsx3.log(objChild.getName());
       var bSuccess = objChild instanceof my.example.Widget || objChild instanceof my.example.Container;
       if(!bSuccess)
         jsx3.log("The child object could not be accepted, because it is not of type container or widget.");
       return bSuccess;
     };
   });

   
   

4. Save the file:
   
   1. Choose File > Save and open the js folder of the project.
      
      Click here to expand screenshot...
      
      
      
      
   2. Click the Create New Folder icon and create a folder named my.
      
   3. Open the my folder.
      
   4. Click the New Folder icon and create a folder named example.
      
   5. Open the example folder.
      
   6. Type Container.js as the file name and click Save.

The fully qualified name for the new class (my.example.Container) is reflected in the path where it is saved (js/my/example/Container.js).

To create the Widget class:

1. Create a new JavaScript file and copy and paste this code into the file:

   jsx3.require("jsx3.gui.Block");
   jsx3.lang.Class.defineClass("my.example.Widget", jsx3.gui.Block, , function(Widget,Widget_prototype) {
     /**
      * main method
      */
     Widget_prototype.init = function() {
       this.jsxsuper();
     };
     /**
      * Called when an item is about to be set; returns false if the parent
      * is not of the appropriate type (container)
      * @return {boolean} true to allow the set, false to veto
      */
     Widget_prototype.onSetParent = function(objParent) {
       var bSuccess = my.example.Container && objParent instanceof my.example.Container;
       if(!bSuccess)
         jsx3.log("Widgets can only be added to containers.  You must first add a container before adding a widget.");
       return bSuccess;
     };
   });

2. Save the file as Widget.js in the same directory as Container.js.