widget-factory

Description

Widget Factory is a TypeScript widget builder object based on Widget Router routing.

How to Install and Configure

npm install widget-factory

The following code use the DefaultRenderer object (JSRender). You can use whatever render you want (fulfilling the DefaultTemplateRenderer object type), and just send it through the Widget Factory Constructor.

  var WidgetFactory = require('widget-factory');
  var containerId = '#widgetFactoryContainer'; // (Mandatory) Id to the Div Container of all widget pages
  var renderAfterRoute = true;
  var routerConfiguration = { // Widget Router Configuration
    afterRouteInitController: true,
    pageIdPrefix: 'widget_router_',
	usingTemplates: true, // This is set to true because i'm using a TemplateRenderer (JSRender). In this way, the uncompiled and unrendered template will not be showed to the client, and you will need always to render the template to show the content inside the page.
    routes: [
      {
        name: "main",
        template: '<h1>{{:title}}</h1><input type="button" value="go to secondary" onclick="WidgetFactory.router.go(&quot;secondary&quot;);"/><p>{{:description}}</p>',
        controller: function(routeResult) {
           // this controller will return a promise, just for fun...
          var dfd = new Promise ((resolve, reject) => {
            routeResult.routeScope.title = 'Main Page';
            routeResult.routeScope.description = 'Main page description';
            // If you don't set 'renderAfterRoute' parameter to true, this template will not be rendered.
            // If you set it to false, then you will need to render the page like this:
            //routeResult.controllerHelper.render(routeResult.routeName, routeResult.routeScope);
            resolve();
          });
          return dfd;
        }
      },
      {
        name: "secondary",
        template: '<h1>Secondary Page</h1><input type="button" value="go to main" onclick="WidgetFactory.router.go(&quot;main&quot;);"/><p>Secondary page description</p>',
        controller: function (routeResult) {
		  // If you don't set 'renderAfterRoute' parameter to true, this template will show a blank page, because "usingTemplates" is set to true in routerConfiguration
          // If you set it to false, then you will need to render the page like this:
          //routeResult.controllerHelper.render(routeResult.routeName, routeResult.routeScope);
        }
      }
    ]
  }
  window.WidgetFactory = new WidgetFactory.WidgetFactory(containerId, routerConfiguration, null, null, renderAfterRoute);
  WidgetFactory.start();

##Events "beforeroute" and "afterroute"

If you want to inject some functions executions before or after the router is executed. Then you can do it this way:

  
  WidgetFactory.on('beforeroute', (event, sender) => {
    return new Promise(function(resolve, reject) {
      setTimeout(() => {
        console.log('event ' + event + ' will be executed after this async method');
        resolve();
      }, 100);  
    });
  });

  WidgetFactory.on('beforeroute', (event, sender) => {
    console.log('do something before route event gets executed');
  });

  WidgetFactory.on('afterroute', (event, sender) => {
    console.log('do something after route event have finished');
  });

##Events "beforestart" and "afterstart"

If you want to inject some functions executions before or after the WidgetFactory start method is executed. Then you can do it this way:

  
  WidgetFactory.on('beforestart', (event, sender) => {
    return new Promise(function (resolve, reject) {
      setTimeout(() => {
        console.log('event ' + event + ' will be executed after this async method');
        resolve();
      }, 100);
    });
  });

  WidgetFactory.on('afterstart', (event, sender) => {
    console.log('event ' + event + ' was executed');
  });

Notes

There is an IPageController and a default PageController object implemententation of that interface exported in this library, you can extend from it and use its default render function.

If you are going to use this library with webpack, please add this aliases inside your webpack.config.js:

alias: {
	"widget-router": "widget-router/dist/widget-router",
    "widget-factory": "widget-factory/dist/widget-factory",
	"event-handler-manager": "event-handler-manager/dist/event-handler-manager"
}