Example
<thtmlbx:htmlIsland id = "htmltestIsland"
height = "800px"
width = "100%"
htmlFile = "/sap(====)/bc/ui5_ui5/sap/islandtest/webapp/index.html" >
The htmlFile property references the SAPUI5 application.
Figure 1: Example structure of the CRM BSP Application
The htmlIslandProperty node is a normal context node where you must have defined getter and setter. When naming the getter and setter, you must include the name of the property in the name of the function when defining it in the SAPUI5 application.
For example, if the property’s name is boolValue, then the getter and setter are called getBoolValue and setBoolValue respectively.
Example
The definition of the property is done by using the < thtmlbx:htmlIslandProperty > tag name. You can define several properties. Make sure that you define the value with the format //<CONTEXT_NODE_NAME>/<ATTRIBUTE>
<thtmlbx:htmlIslandProperty id = "boolValue"
name = "boolValue"
value = "//PROPERTY/BOOL_PROPERTY" />
The htmlIslandDataSource node is linked with context nodes of type Table. For each data source a getter and setter are created and their names are extensions of the name of the data source. For example, if the data source name is flightData, then the getter and setter are called getFlightData and setFlightData respectively.
Example
The definition of the data source is done using the < thtmlbx:htmlIslandDataSource > tag.
<thtmlbx:htmlIslandDataSource id = "sflight"
name = "sflight"
data = "//FLIGHT/Table"
properties = "<%= controller->gt_properties %>" />
As you can see in our example we have the properties parameter defined as controller->gt_properties. This is a table where we associate the data source properties with the table context node attributes.
Figure 2: The association of the data with the properties.
Therefore, the GT_PROPERTIES table is defined in the view controller as an Instance Attribute with Public visibility and the Associated Type as WCF_HIT_DATASOURCE_PROPERTY.
A method can be created to define each of those properties and add them to the GT_PROPERTIES table. For instance, the first attribute is CARRID, in the method we define and append the property to the table. We do the same with each of the attributes in the context node.
ls_property-id = 'CARRID'.
ls_property-name = 'CARRID'.
ls_property-abap_fieldname = 'CARRID'.
APPEND ls_property TO gt_properties.
Events are part of the HTML island and allow the communication between the BSP application and the SAPUI5 application by triggering round trips on user interactions. To define an event, the tag <thtmlbx:htmlIslandEvent >.
Example
<thtmlbx:htmlIslandEvent id = "refresh"
name = "refresh"
onAction = "refresh" />
There are two types of events; client events and server events. Client events allow Islands to listen and fire client-side events which don't necessarily trigger a server request. For more information, see Setup the SAPUI5 Application Interaction with the HTML Island Framework, below. Server events receive and modify data. They have parameters which are passed to the API as a JavaScript object (hashmap) of name value pairs. The name of the server event is the one that will be used in the SAPUI5 application when firing the event.
<script>
//domain relaxation
var liBehindFirstDot = location.hostname.indexOf(".")+1;
if (liBehindFirstDot > 0) {
document.domain = location.hostname.substr(liBehindFirstDot);
}
</script>
<script src="/sap(====)/bc/bsp/sap/thtmlb_scripts/island_scripts.js?version=1" type="text/javascript"></script>
<title>htmlislandtest</title>
<script id="sap-ui-bootstrap"
src="resources/sap-ui-core.js" id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m, sap.ui.commons, sap.ui.table"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"htmlislandtest": ""}'
data-sap-ui-debug="true" >
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</script>
The first line includes the JavaScript files that controls the HTML island. The second script tab is the normal sap-ui-bootstrap used in SAPUI5 applications.
<body onload="onBodyLoad()" class="sapUiBody" id="content">
<div id="uiArea"></div>
</body>
Here, you assign an object. In this example, it is called App. App receives the div id as a parameter. This object has all the definitions of the getters and setters that are needed to communicate with the BSP application using the HTML island.
var app;
function onBodyLoad() {
app = new App('uiArea'); // Create an instance of an App during the onload event handler
}
As you can see, the div id is passed to the App constructor. In the init method, it is passed as an attribute to initialize the App object.
There are several objects defined. Each correspond to every context node in the BSP application and they will hold the data that will be sent to the SAPUI5 application.
function App(rootId) {
this._boolValue = {};
this._stringValue = {};
this._integerValue = {};
this._floatValue = {};
this._binaryValue = {};
this._dateValue = {};
this._timeValue = {};
this._sflight = [];
this._UIConfig = [];
this.init(rootId);
}
Inside the init method, register the HTML island, create the getters and setters for data interchange and define the client and server events.
thtmlbxHIslandLib.register(this);
Create all the necessary variables and models for the exchange of information. Based on our example, we have the following methods that belong to the island and can be used inside your application.
thtmlbxHIslandLib.addEventListener(thtmlbxHIslandLib.EVENT_BEGIN_FREEZE, this.onBeginFreeze, this);
thtmlbxHIslandLib.addEventListener(thtmlbxHIslandLib.EVENT_END_FREEZE, this.onEndFreeze, this);
thtmlbxHIslandLib.addEventListener(thtmlbxHIslandLib.EVENT_BEGIN_UPDATE, this.onBeginUpdate, this);
thtmlbxHIslandLib.addEventListener(thtmlbxHIslandLib.EVENT_END_UPDATE, this.onEndUpdate, this);
thtmlbxHIslandLib.addEventListener(thtmlbxHIslandLib.EVENT_BEGIN_UPDATE_EVENTS, this.onBeginUpdateEvents, this);
thtmlbxHIslandLib.addEventListener(thtmlbxHIslandLib.EVENT_END_UPDATE_EVENTS, this.onEndUpdateEvents, this);
thtmlbxHIslandLib.addEventListener(thtmlbxHIslandLib.EVENT_BEGIN_UPDATE_PROPS, this.onBeginUpdateProps, this);
thtmlbxHIslandLib.addEventListener(thtmlbxHIslandLib.EVENT_END_UPDATE_PROPS, this.onEndUpdateProps, this);
thtmlbxHIslandLib.addEventListener(thtmlbxHIslandLib.EVENT_BEGIN_UPDATE_DATASOURCES, this.onBeginUpdateDataSources, this);
thtmlbxHIslandLib.addEventListener(thtmlbxHIslandLib.EVENT_END_UPDATE_DATASOURCES, this.onEndUpdateDataSources, this);
//Models
The models, based on the example, would be written as follows:
// Create the central model(s)
var model = new sap.ui.model.json.JSONModel();
model.setData({data: this.getSFlight()}); // initially empty list
// place the model instance in a central location, available to UI Components as well as the App
sap.ui.getCore().setModel(model, 'sflight');
var model = new sap.ui.model.json.JSONModel();
model.setData({data: this.getUIConfig}); // initially empty list
sap.ui.getCore().setModel(model, 'UIConfig');
var oData = {
boolVal : " ",
timeVal : " ",
floatVal : " ",
dateVal : " ",
binaryVal : " ",
intVal : " ",
stringVal : " "
};
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(oData);
sap.ui.getCore().setModel(oModel, 'datamodel');
As explained before, every attribute in the context nodes must have a getter and setter method in the App object because this is how the data is passed from the BSP application to the SAPUI5 application. Above, the property definition for boolValue was used as an example. Here, the getter and setter methods for the same example are shown.
App.prototype.getBoolValue = function() {
return this._boolValue;
};
App.prototype.setBoolValue = function(val) {
this._boolValue = val;
var model = sap.ui.getCore().getModel('datamodel'); // get the central model
model.setProperty("/boolVal",val);
model.updateBindings(true); // let the UI Component know the data has changed
};
As you can see, the name of the getter and setter includes the exact name of the property in the BSP application. It is important to set the value of the property to the model to keep the information and to call the method updateBindings to keep the binding information available.
The same logic applies to data sources as properties. Here, the getter and setter methods are shown for the data sources.
// getter for flightData DataSource
App.prototype.getSFlight = function() {
return this._sflight;
};
// setter for flightData DataSource
App.prototype.setSflight = function(val) {
var model = sap.ui.getCore().getModel('sflight'); // get the central model
model.setData({data: val});
model.updateBindings(true); // let the UI Component know the data has changed
this._sflight = val; // store on the private member variable
};
The listener to the client event was previously defined in the Define variables and models section, now we just create the associated function body as follows:
App.prototype.onBeginUpdate = function() {
logX('App1', 'onBeginUpdate');
// Check some of the parameters
logX('App1', 'onBeginUpdate', 'Locale: ' + thtmlbxHIslandLib.getLocaleString());
logX('App1', 'onBeginUpdate', 'Decimal Separator: ' + thtmlbxHIslandLib.getDecimalSeparator());
logX('App1', 'onBeginUpdate', 'Grouping Separator: ' + thtmlbxHIslandLib.getGroupingSeparator());
logX('App1', 'onBeginUpdate', 'Date Format String: ' + thtmlbxHIslandLib.getDateFormatString());
var dateFormatField = sap.ui.getCore().byId('dateFormatField');
if(dateFormatField)
dateFormatField.setValue(thtmlbxHIslandLib.getDateFormatString());
};
There is only one definition for server events and several events can be called from it.
App.prototype.fireServerEvent = function(name, paramMap) {
thtmlbxHIslandLib.fireEvent(name, paramMap);
};
As you can see, the name of the event and its parameters are passed to the function that will fire the event to the back-end. The event must be defined in the BSP application.
sap.ui.xmlview({
viewName : "htmlislandtest.view.View1"
}).placeAt(rootID);
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
12 | |
10 | |
9 | |
7 | |
7 | |
7 | |
6 | |
6 | |
5 | |
4 |