Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
lucky_li
Explorer

    When we write sapui5 code, we often need get the UI5 controls basic meta information: the property, aggregation, events, associations. It is not convenient in current Eclipse environment, as the normal process would be:

  1. Download the latest UI5 source code
  2. Create a specific project and import all the ui5 source files
  3. When need see one control/element information, switch from current project to the specific project, open the xx-dbg.js file, then scroll to the control definition part.

  (In Eclipse use the F3 'Open Declaration' will jump to the embedded ui5 library file, but which only contain the function prototype, don't have the meta data information).

    And another annoying thing is for the enumerable property:  if developer want to know the available enum property value, he needs search it from the big whole source files. And find out which one is the property definition and which one is the reference. In Chrome debug window we can a better way: just type the property type in console, then it will list all the property, but it is still not convenient as we need switch often between different windows.

      How to solve this problem? One solution is use the sapui5 itself to generate basic meta information file.

sapui5 Metadata

    For each ui5 class, we can get the metadata by call getMetadata(), then from the metadata you can get all the information such as property, aggregation, event....

var meta = sap.m.Button.getMetadata()

var prop = meta.getAllProperties(), it looks like: 

text: Object

    1. defaultValue: null
    2. group: "Misc"
    3. name: "text"
    4. type: "string"
  1. type: Object
    1. defaultValue: "Default"
    2. group: "Appearance"
    3. name: "type"
    4. type: "sap.m.ButtonType"

  2. Library information

  3.     By call  sap.ui.getCore().getLoadedLibraries(),  we can get the library information, how many library, all the controls/element/types for one library.

  4. Type information:

        If the property start by 'sap', then it may be a enumerable property. We can get the object by eval the string, then do the further check:

        if all the value by key is string, then it is enumerable property, otherwise, like the 'sap.ui.core.CSSSize' it is a special type.


    Class hierarchy information:

        call the getParent() we can get the parent of one class.  Then for all the class, we can easily build the hierarchy information.


    How to generate the metadata information:

      With the available ui5 meta information, it is easy to build the files. I use a famous template http://handlebarsjs.com/ to do so.

  5.   In order for easy use, I integrated it into the 'Fast UI5 tool', you can get more information from http://scn.sap.com/community/developer-center/front-end/blog/2013/12/18/fast-sapui5-develop-tool, it look like
  6. Just choose the 'Development Assistant'-->'Meta Information', then can get you wanted file by click 'Generate Content', also you can customize the library, content and file options. The content look like:
  7. Note:
  8.   In order for user easy access, for all the enumerable property, i also generate the property candidate. And generate the parent/child information.


//extends from: sap.ui.core.Control

sap.m.Button = function() {

    var metadata = {

  properties : {

        "busy"              : { type: "boolean"            , defaultValue: false    },

        "busyIndicatorDelay": { type: "int"                , defaultValue: 1000      },

        "text"              : { type: "string"            , defaultValue: null      },

        "type"              : { type: "sap.m.ButtonType"  , defaultValue: "Default" },  // Default, Back, Accept, Reject, Transparent, Up, Unstyled, Emphasized

        "width"            : { type: "sap.ui.core.CSSSize", defaultValue: null      },

        "enabled"          : { type: "boolean"            , defaultValue: true      },

        "visible"          : { type: "boolean"            , defaultValue: true      },

        "icon"              : { type: "sap.ui.core.URI"    , defaultValue: null      },

        "iconFirst"        : { type: "boolean"            , defaultValue: true      },

        "activeIcon"        : { type: "sap.ui.core.URI"    , defaultValue: null      },

        "iconDensityAware"  : { type: "boolean"            , defaultValue: true      },

        },

  aggregations : {

            "tooltip"    : { type: "sap.ui.core.TooltipBase", multiple: false,  altTypes: "string"  },

            "customData" : { type: "sap.ui.core.CustomData" , multiple: true , singularName: "customData",  },

            "layoutData" : { type: "sap.ui.core.LayoutData" , multiple: false, singularName: "layoutData",  },

        },

  events: {

            "validationSuccess": {},

            "validationError"  : {},

            "parseError"      : {},

            "formatError"      : {},

            "tap"              : {},

            "press"            : {},

        }

    };

};

sap.ui.core.TextAlign = {

  Begin  : "Begin",

  End    : "End",

  Left  : "Left",

  Right  : "Right",

  Center : "Center",

};


  1. sapui5 1.18.0 version meta files:

  2.     I attached it in this blog, so you can import it into the ui5 project then see all the information easily just in one file.



4 Comments