Design Studio 1.2 SDK - New approach to a toolbar component using SAPUI5 Handler

[mike_howles4]

This could be considered a part 2 of my original post related to creating a Toolbar component using SAPUI5 Framework.  You can read that blog for the rationale behind the toolbar idea (Design Studio 1.2 SDK - Building a SAPUI5 Toolbar)

In this entry I wanted to focus on a different approach for the same component.  In the initial attempt, I used SAPUI5 technically to create the component, but without any clear direction on how to render it, I used SAPUI5's placeAt() function to attach it to my DIV container that the SDK provides, based on known examples to-date.  In the subsequent comments on that post, reiner.hille-doering mentioned that this may not be the best approach and said that there is a more direct, yet undocumented method.

Based on some subsequent comments in another thread, I think I've derived the cleaner method that Reiner may have been alluding to.  Below is my (undocumented, unsupported for now, I'd assume) approach at implementing the same toolbar by using the sapui5 handler instead of the div handler.

GitHub Link:

Design-Studio-Repository/sapui5.toolbar/SAPUI5 Toolbar at master · entmike/Design-Studio-Repository ...

In the component.xml file, I only needed to change handlerType from "div" to "sapui5".  The rest of the changes I will call out below which occured mainly in component.js.

I also used some SAPUI5 documentation I found here:

Documentation/AdvancedTopics/OnTheFlyControlDefinition – SAPUI5 Wiki (TIP CORE User Interface)

The code below clocks in just under 100 lines, and I've commented the important functions and details to call out.

sap.ui.commons.Toolbar.extend("com.sample.menu.ToolbarMenu", {

  // SAP UI5 Metadata convenience at work - Setter and getter are created behind the scenes, including data binding and type validation

  metadata : { // Not to be confused with the Data Source metadata property

  properties : {

  "name" : "string",

  "showCaptions" : {defaultValue : "X", type : "string" },

  "buttonClicked" : {defaultValue : -1, type : "int" },

  "buttonClickedTitle" : {defaultValue : "Nothing Clicked YET",  type : "string" }

  }

    },

    // SAPUI5 Renderer, we can leave it alone

    renderer : {

  /*render : function(rm, oControl){

  alert(oControl.getProperty("buttonClickedTitle"));

  }*/

  },

  // Called by sap.designstudio.sdkui5.Handler  (sdkui5_handler.js)

  initDesignStudio : function() {

  try{

  // Make 100 setters and getters until SDK supports properties that are Arrays

  for(var i=0;i<=100;i++){

         this.btns[i] = {};

         for(var meta in this.autoProperties){

          this.btns[i][meta] = this.autoProperties[meta];

          var setter = "set" + meta.charAt(0).toUpperCase() + meta.slice(1) + i; // Camel Case per SAPUI5 (e.g. setTitle0)

          var getter = "get" + meta.charAt(0).toUpperCase() + meta.slice(1) + i; // Camel Case per SAPUI5 (e.g. getTitle0)

          // Make setters and getters on the fly

          this[getter] = function(meta,i){

          return function(s){

              return this.btns[i][meta];

          };

          }(meta,i);

          this[setter] = function(meta,i){

          return function(s){

          this.btns[i][meta] = s;

          this.populateIcons();

          };

          }(meta,i);

         }

     }

  this.setStandalone(false);

  this.populateIcons();

  }catch(e){

  alert(e); // Aw snap

  }

  },

    btns : [], // Button Storage

    autoProperties : { // Button Properties and default values

    title : "",

    visible : false,

    enabled : false,

    icon : ""

    },

    // Override default getter for custom logic

    getButtonClickedTitle : function(){

    if(this.getButtonClicked() < 0) return "[Nothing Clicked Yet]";

  return this.btns[this.getButtonClicked()].title;

    },

    // Override the SAPUI5 setter so that we can instruct the component to redraw some buttons

    setShowCaptions : function(v){

  this.setProperty("showCaptions",v);

  this.populateIcons();

  },

  populateIcons : function(){ // Main button redraw routine

    this.removeAllItems(); // Blow away existing buttons

    for(var i=0;i<this.btns.length;i++){ // Recreate all buttons

    var b=this.btns[i];

    var bt;

    if(b && (b.title!=""||b.icon!="")){

    if(b.title=="sep") {

    bt = new sap.ui.commons.ToolbarSeparator();

    }else{

      var that = this;

    bt = new sap.ui.commons.Button({

                     text : this.getProperty("showCaptions")?b.title:"",

                     // lite : true,

                     tooltip : b.title,

                     enabled : b.enabled,

                     visible : b.visible,

                     icon : b.icon,

                     press : function(j){

                      return function(){

                      that.setProperty("buttonClicked",j);

                      that.fireDesignStudioPropertiesChanged(["buttonClicked","buttonClickedTitle"]); // SDK proxies these properties, must inform of change

                        that.fireDesignStudioEvent("onclick");

                      };

                     }(i)

      });

    }

    this.addItem(bt);

    }

    }

    }

});

I like this approach better because you can more directly bind the SAPUI5 properties to the SDK Properties exposed in contribution.xml, and override just where needed.  Also the component.ztl accounts for the SAPUI5 setters and getters notation (versus how the DIV handler uses a fluent setter/getter notation).

In the GitHub Repo, I also attached a sample Design Studio application project, to show how the functionality is identical to the original implementation using the DIV handler.

Hope this helps any other SAPUI5 guys out there who may wish to get their feet wet with Design Studio 1.2 SDK!

Enjoy.