hdolder.com srl  

Software R&D
 

   hdc Home    |    Content    |    Blog    |    Director    |    Contact    |    mail us   

 

M&P TBW Plug-and-Play Plugins

Posted on Augist 19, 2013 by Herman Dolder

Dynamically Loading BLOCKS

a In an M&P application some (as many as appropriate) BLOCKS can be loaded and integrated dinamically to an application, usually on demand.

M&P Plugins

An M&P Plugin is a BLOCK or BLOCKTree that is loaded dynamically.

The BLOCKS in a Plugin are normal M&P BLOCKS.

The use of plugins allows the configuration of an application at run-time.

A dynamically loaded Plugin can load other Plugins on demand.

M&P Plugins can be of two types: XPlugins and XViews.

Am XPlugin is an extension of the application that (once loaded) is instantiated only once.

An XView is a "UI Form" of the application that (once loaded) can be instantiated multiple times.

An XView may require a XPlugin to operate.

A Plugin is contained in a Javascript (.js) file in HJ5 and in an Assembly (.DLL) file in .NET.

The M&P Plug-and-Play Plugins Model

The Plug-and-Play architecture of M&P allows to load and integrate a Plugin in run-time without having to refernece it in compile-time.

The M&P Plug-and-Play Plugin Model components are:

  • The Resources Cache (Dictionary<string, string>)
  • The File (Down)Loader
  • The Plugin Activator
  • The M&P Runtime BUS

The Resources Cache stores under a key (the File Name) the content of each (down)loaded File.

When a file load is requested the Loader inspects the Resources Cache and if the file was previously loaded it returns the file content from the Cache. If the file was not previouly loaded the Loader loads the file in the Cache and return the file content.

The Activator instatiates the BLOCK/BLOCKTree from the string returned by the Loader.

During its activation the Plugin usually interoperates with the BUS to get and set information to integrate with the applicaiton.

Advantages of Plugins

Plugins facilitate:

  • The customization of the applications by using polymorphism, for example for the change of Themes.
  • The modularization of the load of the application allowing its fast startup.
  • The implementation of best security schemes
  • The implementation of self-organizing applications.
  • The loading of data by encapsulating them in BLOCKS.
  • The dynamic adaptation of applications.


Examples of Plugins

As an introductory example of the code of Plugins below we include the TaypeScript code of the two Plugins (an XView and an XPlugin) used in the client-side of the Turtle Graphics Demo:

Multiple instances of the XTurtle View open simultaneously .
Every line of the octagon is sent sequentially from a server.

The code of the XView is:

      
// XTurtle XView Plugin
module aa {

  export class XTurtle extends blkx.BXViewBase {

    constructor() {
      super();

      obx.proxyThis(this, "addShape");
      obx.proxyThis(this, "_clear");  
      obx.proxyThis(this, "_draw"); 
      this.CreateInnerBlocks();
    }

    private CreateInnerBlocks() {
      var xx = obx.LoadAndStartN(this, this.XamlCode);
    }

    private _context;
    MyDrawing;

    // override
    xopen(event, ui) {
      this._context = this.MyDrawing.getContext('2d');
      this._context.strokeStyle = "red";
      this._context.lineWidth = 3;
      this._context.clearRect(0, 0, this.MyDrawing.width, this.MyDrawing.height);
      this._context.strokeRect(150, 120, 10, 10);
    }

     // clears the canvas
     _clear() {
      this._context.clearRect(0, 0, this.MyDrawing.width, this.MyDrawing.height);
      this._context.strokeRect(150, 120, 10, 10);
    }

    // requests data (lines) to the SVR
    _draw() {
      this._context.clearRect(0, 0, this.MyDrawing.width, this.MyDrawing.height);
      blkx.BUS["CH"].CRS(obx.BSX.Parse("(axtTurtleDraw)"),
        obx.GetCSTK([obx.NIL]));
    }

    // processes callback data (lines) from the server
    addShape(args) {
      var val = obx.UnBox(args);
      var x1 = val[0];
      var y1 = val[1];
      var x2 = val[2];
      var y2 = val[3];
      this._context.beginPath();
      this._context.moveTo(x1, y1);
      this._context.lineTo(x2, y2);
      this._context.stroke();
    }

    // Xaml code - Defines the View        

    private XamlCode =
    "<mpXaml " +
    " xmlns:uic='blkx.uic'  " +
    " xmlns:blk='blkx'  " +
    " xmlns:blkx='blkx' " +
    " > " +
    " <blkx:BBoard id='TopBoard' >  " +
    "  <blkx:BXPluginLoader " +
    "   File='mp-Aux01'  " +
    "   downloader='$BUS.DWNL' " +
    "   RootClass='app.CTurtleAux' /> " +    
    "   <blkx:BView id='BVIEW' " +
    "         width='360'  " +
    "         height='410'  " +
    "  >  " +
    "    <table> " +
    "     <tr>  " +
    "      <td> " +
    "       <uic:BTitleBar id='UC1'  " +
    "               NS='aa' " +
    "               Width='330' " +
    "               Text='Turtle' />  " +
    "      </td>  " +
    "     </tr> " +
    "     <tr>  " +
    "      <td> " +
    "       <div align='center'>  " +
    "        <button type='button'  " +
    "            id='bClear' " +    
    "            onclick='{cls:`EvtHandler`, eh:`_clear` }' > " +
    "         <b>clear</b>  " +
    "        </button>  " +
    "        <button type='button'  " +
    "            id='bDraw'  " +    
    "            onclick='{cls:`EvtHandler`, eh:`_draw` }'  > " +
    "         <b>draw</b>  " +
    "        </button>  " +
    "       </div> " +
    "      </td>  " +
    "     </tr> " +
    "     <tr>  " +
    "      <td> " +
    "       <div align='center'>  " +
    "        <canvas id='MyDrawing'  " +
    "            width='300' " +
    "            height='240' " +
    "            style='border: 1px dotted #564b47;'/>  " +
    "       </div> " +
    "      </td>  " +
    "     </tr> " +
    "    </table> " +
    "   </blkx:BView> " +
    "  </blkx:BBoard>  " +
    "</mpXaml>  ";

  } // class
} // module
      
    

and the code for the XPlugin that sends the data received from the server to the current active XTurtle View is:

      
// CTurtleAux XPlugin
module app {

  export class CTurtleAux extends blkx.BLOCKBase 
  {
    
    constructor () {
      super();
      obx.proxyThis(this, "turtleAddShape");

      // For Callbacks from the SVR
      // sends the data to the active XTurtle View
      var si = obx.BS.RegSvc("turtleAddShape", this.turtleAddShape);
      si.evalargs = false;
    }

    BStart() {
    }

    // CBACK
    turtleAddShape(args) {      
      setTimeout(():any => blkx.BUS["UI"].getcurrentONS()["xpin"].addShape(args), 0);
      return obx.T;
    }

  } // class
} // module      
    

 

 

TBW The BLOCKS World 2015  hdolder.com srl
C30819
2015-06-26