Implementing the client component

Creating the client component

You must store the client component in a .js file in the project, where the designer resides. To implement the client component, you must do the following:

1. From the context menu of folder Resources in the BookWidget folder, click Add » New Item...

2. From the dialog click Visual C# » Web » JScript File.

3. Name the file Book.js and click Add.

   An empty .js file is generated under the Resources folder.

4. From the context menu of file Book.js, select Properties.
5. In the Properties pane, set the Build Action property of the file to Embedded Resource.
6. Open the .js file.

7. In the .js file, create the namespace for the client code.

   This is done by calling the registerNamespace of the Type class.

   Type.registerNamespace("BookWidget");

   NOTE: The same namespace must be used throughout the entire client code in this file.

8. Define the client class:

   BookWidget.Book = function (element) {

       BookWidget.Book.initializeBase(this, [element]);

    

           this._imagesCollection = null;

           this._properties = null;

           this._silverlightBookObjectId = null;

   }

   It has three fields:

   • _imagesCollection

     This field is used for storing the serialized list of URLs.

   • _properties

     This field is used for storing the settings passed to the Silverlight application.

   • _silverlightBookObjectId

     This field is used for storing the ID value of the Silverlight object element.

9. Define the prototype for the class. It must include the following methods:

   • initialize

     This method is called when an instance of the class is created. In it, you must call the initialize method of the SimpleScriptViewclass. In this method you attach a handler to the onLoad event of the Silverlight object.

   • dispose

     This method is called when the instance of the class is no longer used. In it, you must call the dispose method of theSimpleScriptView class.

   • pluginLoaded

     This method handles the onLoad event of the Silverlight object. In it you pass the image URLs and the settings to the Silverlight application by calling the methods you marked as scriptable.

   • You must also wrap the fields of the client class in get and set methods.
   BookWidget.Book.prototype = {

       initialize: function () {

           BookWidget.Book.callBaseMethod(this, 'initialize');

    

           var BookObject = this.get_silverlightBookObject();

           BookObject.onLoad = Function.createDelegate(this, this.pluginLoaded);

       },

       dispose: function () {

           BookWidget.Book.callBaseMethod(this, 'dispose');

       },

       pluginLoaded: function (sender, args) {

           var imagesArr = Sys.Serialization.JavaScriptSerializer.deserialize(this.get_imagesCollection());

    

           slCtl = sender.getHost();

    

           for (var idx = 0; idx < imagesArr.length; idx++) {

               slCtl.Content.mainPage.SetItem(imagesArr[idx]['Url']);

           }

    

           slCtl.Content.mainPage.SetBookProperties(Sys.Serialization.JavaScriptSerializer.deserialize(this.get_properties()));

       },

       get_imagesCollection: function () {

           return this._imagesCollection;

       },

       set_imagesCollection: function (value) {

           if (this._imagesCollection !== value) {

               this._imagesCollection = value;

               this.raisePropertyChanged('imagesCollection');

           }

       },

       get_properties: function () {

           return this._properties;

       },

       set_properties: function (value) {

           if (this._properties !== value) {

               this._properties = value;

               this.raisePropertyChanged('properties');

           }

       },

       get_silverlightBookObjectId: function () {

           return this._silverlightBookObjectId;

       },

       set_silverlightBookObjectId: function (value) {

           if (this._silverlightBookObjectId !== value) {

               this._silverlightBookObjectId = value;

               this.raisePropertyChanged('silverlightBookObjectId');

           }

       },

       get_silverlightBookObject: function () {

           return $get(this.get_silverlightBookObjectId());

       }

   }

10. Register the client class and specify its base class.

    You do this by calling the registerClass method. You must pass the Sys.UI.Control as the base class.

    BookWidget.Book.registerClass('BookWidget.Book', Sys.UI.Control);

    if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

Referencing the client component

You must reference the client component from the control class. This is done in the override for the GetScriptReference method. In it you must create a script reference for your client component. When creating the reference, you must specify the name of the embedded resource that contains the client component and the assembly it resides in. The name of the resource follows the same naming convention as the name of the template for the control.