Create the widgets library

Every set of widget needs a library. The widget library is actually the factory
class that receive a name and create the desired widget.
To be enable to integrate with the Content Glass API the library need to inherent from cg.CGExternalWidgetLibrary
Like before we need to encapsulate the library code with Content Glass jQuery.


    (function ($) { 
  //Library code
})(cg.jQuery);

Every library structure is pretty much the same:

  • Constructor
  • createLibWidget function
  • getGallery function
  • widgets array

We will start with the Constructor:


     cg.SampleWidgetLibrary = function SampleWidgetLibrary(libDef) {
  cg.CGExternalWidgetLibrary.call(this, libDef);
 };
 cg.SampleWidgetLibrary.prototype = Object.create(cg.CGExternalWidgetLibrary.prototype);
 cg.SampleWidgetLibrary.prototype.constructor = cg.SampleWidgetLibrary;

There isn’t much to say about this code snippet it is explain itself.
The next thing is to create the function that will be called when we want to create a widget.


      /**
    * Create new widget from this library
    * @param {String} type the widget type name
    * @param {Array} options Optional array of options, to set when creating the widget
    * @return {cg.CGWidget}
    */
  cg.SampleWidgetLibrary.prototype.createLibWidget = function (type, options) {
   var defaultOptions = {
    //Can contain options that will affect all the widget of this library
   };
   if (options != null) {
    defaultOptions = $.extend(defaultOptions, options);
   }
   switch (type) {
    case "cg-GreetingWidget":
     widget = new $.cg.GreetingWidget(defaultOptions);
     break;
    default:
     throw new cg.CGException("Widget type not found '" + type + "'.");
   }
   return widget;
  };

Like we said in the start a library doesn't have to contain only 1 widget so for each
widget the library need to create a case segment will be add to the switch segment.
To create a widget instance you need to call $.{widgetNameSpace}.{widgetName},
It must be the same as the namespace and widget name you written when you wrote the widget.
The default options is used if there is some options need to be applied to all the
widgets of this library, this options is copied into the options section of each widget when created.

The next thing is to create the function that will be called when a user click on your library in the widget selector view.


      cg.SampleWidgetLibrary.prototype.getGallery = function () {
   return {
    categories: {
     "sample_widgets": {
      image: "",
      title: "Sample widgets",
      items: [
       {name: "Greeting Widget", type: "cg-GreetingWidget", clip: null, status: 'enabled'}
      ]
     }
    }
   }
  };

getGallery function returns and object that contain 1 or more categories of widgets and each
category can contain 1 or more widgets (Note: widgets can be in couple of categories in the same time).
Each category structure is:

  • image – an image file that contains all of the widgets images
    (will be used with item.clip top specify the location of the
    widget image in the category image file)
  • title – the title that will be shown to the user in the widget selector.
  • Items – an array of object that represent the widgets.
    Each item have: name: the name that will be shown to the user,
    type: the type of the widget, this string is pass to creatLibWidget function
    so it must match one of the cases strings,
    clip: object with x and y index that say the location of the widget image
    inside the category image file, status: "enabled" or "disabled" that will
    affect if the user will be able to create this widget or not.

Last , the widget array that is needed as one of the keys to identify the library in Content Glass system.


      cg.SampleWidgetLibrary.prototype.widgets = [
   "cg-GreetingWidget"
  ];

Here is the full code:

    
        (function ($) { 
 cg.SampleWidgetLibrary = function SampleWidgetLibrary(libDef) {
  cg.CGExternalWidgetLibrary.call(this, libDef);
 };
 cg.SampleWidgetLibrary.prototype = Object.create(cg.CGExternalWidgetLibrary.prototype);
 cg.SampleWidgetLibrary.prototype.constructor = cg.SampleWidgetLibrary;
  /**
    * Create new widget from this library
    * @param {String} type the widget type name
    * @param {Array} options Optional array of options, to set when creating the widget
    * @return {cg.CGWidget}
    */
  cg.SampleWidgetLibrary.prototype.createLibWidget = function (type, options) {
   var defaultOptions = {
    //Can contain options that will affect all the widget of this library
   };
   if (options != null) {
    defaultOptions = $.extend(defaultOptions, options);
   }
   switch (type) {
    case "cg-GreetingWidget":
     widget = new $.cg.GreetingWidget(defaultOptions);
     break;
    default:
     throw new cg.CGException("Widget type not found '" + type + "'.");
   }
   return widget;
  };
  cg.SampleWidgetLibrary.prototype.getGallery = function () {
   return {
    categories: {
     "sample_widgets": {
      image: "",
      title: "Sample widgets",
      items: [
       {name: "Greeting Widget", type: "cg-GreetingWidget", clip: null, status: 'enabled'}
      ]
     }
    }
   }
  };
  cg.SampleWidgetLibrary.prototype.widgets = [
   "cg-GreetingWidget"
  ];
})(cg.jQuery);

Now we have a widget library that can create our widget.
The next step is to create the manifest that
will tell Content Glass system to load your new widgets and library.