Creating a widget

So let's start and create the first widget.   We will create a widget that when pressed greet the person.    Create a file with the name GreetingWidget.js in the greetingWidget folder. 


    cg.jQuery(function ($){
  //Code
});

The reason is that Content Glass use jQuery and this will ensure that you can use the latest jQuery.

Every widget is inherent from cg.BasicWidget and therefore every widget looks like:

/**
 * @return {cg.SampleWidget}
 * @extends cg.CGWidget
 */
  $.widget("cg.GreetingWidget", $.cg.CGWidget, {
   //Widget code
  });

You can write any namespace you want and any name you want The format is {namespace}.{widgetName} .

Every widget has options section that can be customize and also add options to.
The widget options are saved in the server so if there is information you want to be saved with the widget then put it inside of the options section.


    // default options 
options: {
  baseClass: "cg-GreetingWidget",
  content: {
   view_style: {
    width: "100%"
   },
   edit_style: {
    width: "100%"
   },
   data: ""
  },
  style: {
   background: "white",
   width: "200px",
   height: "200px"
  },
  name: "Greeting widget",
  version: 1.0
},
Field name Description
baseClass what is the base class of this widget It doesn’t have to be the widget name , if you want to have couple of widgets share some CSS class rule then you can give them the same base class.
content Object that contain the view_style: style that will be applied when the widget is in view mode, edit_style: style that will be applied when the widget is in edit mode and data: commonly used to store widget data for example if the widget is showing a picture then in the data section we can save the url of that image.
name used to identify the widget is sevral cases.
version the widgets version, used for statistic.

There can be a lot more sections inside of content but this are the most important once.
After we configure the widget we need to create the render function that will be called when the widget is needed to be render on the screen.


       /**
     * Implements {@link cg.CGWidget#renderWidgetContent}
     */
     renderWidgetContent: function () {
      //Rendering code
     },

This are the basic structure every widget needs.
Here is a full code sample:


    cg.jQuery(function ($){
 * @return {cg.SampleWidget}
 * @extends cg.CGWidget
 */
  $.widget("cg.GreetingWidget", $.cg.CGWidget, {
   // default options
   options: {
     baseClass: "cg-GreetingWidget",
     content: {
      view_style: {
       width: "100%"
      },
      edit_style: {
       width: "100%"
      },
      data: ""
     },
     style: {
      background: "white",
      width: "200px",
      height: "200px"
     },
     name: "Greeting widget",
     version: 1.0
   },
   /**
     * Implements {@link cg.CGWidget#renderWidgetContent}
     */
     renderWidgetContent: function () {
      //Rendering code
     },
  });
});

The next step is to create the widget library that will be used to create this widget.