UI5 Development: Embedding the UI5 control in a HTML page

Embedding the library

To embed VB in a html page the sap.ui.vbm
library needs to be loaded. This is usually done in the following way:

<script src=”/sapui5-dist/resources/sap-ui-core.js”

              id=”Sample1″

                data-sap-ui-libs=”sap.ui.commons,sap.ui.vbm”

                data-sap-ui-theme=”sap_bluecrystal“ >

</script>

Create a Placeholder

The HTML document should somewhere have a placeholder, where the VB control should be placed. This is usually a <div> element. The <div> element must have a unique id.

<div id=”content”></div>

Create the control.

Some script is needed to create the control and place it at a specific location.

var oVBI = new sap.ui.vbm.VBI(‘someId’,

   {

   width : 600,

    height: 620,

    plugin: false,

    config: null

  });

  oVBI.placeAt(“content”);

The controls constructor has 2 parameters, the controls ID and a properties object. The properties object must contain the width and height of the control. Optionally a config and a plugin property can be set. The config property is a json object that describes the application that should be loaded into the control. The plugin flag tells the control to use the native implementation instead of the html implementation.

The following json code is a sample for the smallest object that is required as a config attribute to show just the map.

{

     “SAPVB”: {

      “version”: “2.0”,

       “xmlns:VB”: “VB”,

      “Windows”: {

         “Set”: {

              “Window”: { “id”: “W1”, “type”: “geo”, “refScene”: “S1” }

           }

      },

      “Scenes”: {

           “Set”: {

          “SceneGeo”: { “id”: “S1”, “refMapLayerStack”: “MAPQUESTLAYER”,
                        “initialStartPosition”: “6;30;0”, “initialZoom”:
                        “3” }

         }

      },

        “MapProviders”: {

           “Set”: {

              “MapProvider”:  {

                      “name”: “MAPQUEST”,

                      “tileX”: “256”,

                      “tileY”: “256”,

                      “maxLOD”: “19”,

                      “copyright”: “Tiles Courtesy of MapQuest © OpenStreetMap under ODbL v1.0 “,

                 “Source”: [

                      {

                        “id”: “s1”,

                      “url”: “http://otile1.mqcdn.com/tiles/1.0.0/map/{LOD}/{X}/{Y}.png”

                     }

                ]

             }

         }

      },

        “MapLayerStacks”: {

           “Set”: {

              “MapLayerStack”: {

                 “name”: “MAPQUESTLAYER”,

                 “MapLayer”: {
                    “name”: “L1”,

                    “refMapProvider”: “MAPQUEST”,

                    “opacity”: “1.0”,
                    “colBkgnd”: “RGB(255,255,255)”

               }

            }

           }

        }

     }

  }

Instead of applying the configuration immediately, the configuration can be loaded after the control is placed. In this case the code would look like this:

var oVBI = new sap.ui.vbm.VBI(‘someId’,

   {

     width : 600,

     height: 500,

     plugin: false

   });

oVBI.placeAt(‘content’);

// load the json config from some resource

   var dat = $.getJSON(“media/config.json”, function( dat )

     {

     oVBI.load( dat );

   });