Tags

, , , , , , , , , ,

Content
Part 1: Defining and analyzing basic view structure and components
Part 2: Designing Client side object module

Introduction

In the last post we looked at our basic implementation of view for CatalogZone, LayoutZone, and WebPartZone. These three zones will be our core components that collectively form the WebPartManager which is a non-visual component of our WebPart implementation.

Today in this post I have decided to first start with client side implementation so that we could get the brief idea of components functionalities. To start with this let’s see what we can possibly have to have this to work.

Client side code mock:

 var CatalogZone1 = WebParts.CatalogZone('CatalaogZone1');
 WebParts.WebPartManager.CurrentWebPartManager.CatalogZones.add(CatalogZone1);

 var WebPartZone1 = WebParts.WebPartZone('WebPartZone1');
 var WebPartZone2 = WebParts.WebPartZone('WebPartZone2');
 var WebPartZone3 = WebParts.WebPartZone('WebPartZone3');
 var WebPartZone4 = WebParts.WebPartZone('WebPartZone4');
 WebParts.WebPartManager.CurrentWebPartManager.WebPartZones.add(WebPartZone1);
 WebParts.WebPartManager.CurrentWebPartManager.WebPartZones.add(WebPartZone2);
 WebParts.WebPartManager.CurrentWebPartManager.WebPartZones.add(WebPartZone3);
 WebParts.WebPartManager.CurrentWebPartManager.WebPartZones.add(WebPartZone4);

 CatalogZone1.WebPartDefinitions.add('title', 'discription', 'url');
 CatalogZone1.WebPartDefinitions.add({ title: 'title', discription: 'discription', url: 'url' });

 var WebPartDefinitions1 = new WebParts.WebPartDefinition('title', 'discription', 'url');
 CatalogZone1.WebPartDefinitions.add(WebPartDefinitions1);

 var StaticWebPartZone1 = WebParts.WebPartZone('StaticWebPartZone1');
 StaticWebPartZone1.CanAcceptWebParts = false;
 StaticWebPartZone1.LoadWebPart('id', { title: 'title', discription: 'discription', url: 'url' });

OK this looks prettier up till now and I think with this much implementation we are good to go ahead. Currently I’ve not considered the LayoutZone and templatization so that we get our basic required look first.
So lets design the classes required to get this working.
Here we are going to need collection class to implement the list of objects as in Javascript array provides very minimal functionality we are going to make out own CollectionBase class like one we use in .Net

    var CollectionBase = function () {
        var list = [];

        list.add = function (object) {
           list.push(object);
        }

        list.remove = function (object) {
            var index = this.indexOf(object);

            if (index >= 0) {
                delete list[index];
                list.splice(index, 1);
            }
        }

        list.indexOf = function (object) {
            for (var index = 0; index <= list.length - 1; index++) {
                if (list[index] == object)
                    return index;
            }

            return -1;
        }

        return list;
    }

Lets add WebPartManager, CatalogZone, WebPartZone, WebPartTemplate, WebPartDefinition, WebPart to WebParts namespace. I have created a NamespaceHelper class which takes care of creating classes

    var NamespaceHelper = {
        get: function (namespace) {
            if (namespace && typeof namespace == 'string') {
                var namespaces = namespace.split('.');

                var result = null;
                for (name in namespaces) {
                    var currentClassName = namespaces[name];
                    result = (result || window)[currentClassName];

                    if (!result)
                        break;
                }

                return result;
            }
        },

        create: function (namespace) {
            if (namespace && typeof namespace == 'string') {
                var namespaces = namespace.split('.');

                var currentNamespace = window;

                for (name in namespaces) {
                    var currentClassName = namespaces[name];

                    if (!currentNamespace[currentClassName]) {
                        currentNamespace[currentClassName] = {
                            "namespace": (currentNamespace.namespace ? currentNamespace.namespace + '.' + currentClassName : currentClassName),
                            "class": currentClassName
                        }
                    }

                    currentNamespace = currentNamespace[currentClassName];
                }

                return currentNamespace;
            }

            return null;
        }
    }

    var WebParts = NamespaceHelper.create('Navnath.Web.UI.WebControls.WebParts');

    WebParts.WebPartManager = function () {
        var webPartManager = {
            ImportWebPartsURL: null,
            WebPartZones: new CollectionBase(),
            CatalogZones: new CollectionBase(),

            BeginImportWebParts: function (catalogZone, callback) {

            }
        };

        return webPartManager;
    };

    WebParts.CatalogZone = function () {
        return {
            CanAcceptWebParts: true,
            ImportWebPartsURL: null,
            WebPartDefinitions: new CollectionBase(),

            BeginImportWebParts: function (callback) {

            },

            LoadWebPart: function (webPartsDefinition) {

            }
        };
    };

    WebParts.WebPartZone = function () {
        return {
            WebParts: new CollectionBase(),
            LoadWebPart: function (webPartsDefinition) {

            }
        };
    };

    WebParts.WebPartTemplate = function () {
        return {
            Metadata: null,
            DataSource: null,
            DataBind: function () {

            },

            View: function () {

            }
        };
    };

    WebParts.WebPartDefinition = function () {
        return {
            CanDrag: true,
            ID: null,
            Template: null,
            Title: null,
            URL: null,

            Clone: function () {

            }
        };
    };

    WebParts.WebPart = function () {
        return {
            Definition: null,
            ID: null,
            Visible: null,
            Zone: null,

            Load: function () {

            },

            Render: function () {

            }
        };
    };

    WebParts.init = function () {
        var WebPartManager1 = new this.WebPartManager();
        this.WebPartManager.CurrentWebPartManager = WebPartManager1;
    };

    WebParts.init();

Object Module:

As we have our basic classes in place we can now start adding the functionalities in them. In next post to speed up things I’ll implement the complete client side module to get WebPartDefinition, WebPart in work. Leter we will add drag and drop functionality to it as we move ahead.

That’s it for now. Please post your suggestions as it will help me to consider it in next post.

Advertisements