The HTML iframe object encapsulates website (HTML, JavaScript, CSS styles, images and other needed files) and allows the use of such sites as the user interface elements in the D2000 pictures. Files of HTML iframe object are saved as a part of object in configuration database. D2000 provides a communication channel, through which HTML iframe component communicates with ESL/java script in the picture. The channel is bidirectional, text, one way the script sends for HTML component the control commands, to which reacts JavaScript component and JavaScript sends in the opposite direction JavaScript events triggered by user interaction with the component, those ones are recorded in the script and application-processed.
Typically, the application programmer takes an existing HTML UI element, creates an HTML page, to which the element is inserted, writes instructions to operate communication interface in D2000 in JavaScript and the resulting set of .html .js .css and other files saves in the D2000 as HTML iframe object.
The HTML iframe object must contain a file named index.html, the file is taken as root when displayed in an HTML iframe component in the picture.
Communication Channel
Side of picture script
A command (text string) is sent to HTML iframe object by ESL function %HI_IFCSendCommand, in java it is method _obj.sendCommand (String cmd), events from HTML iframe object come in the ESL into entry OnIFCEvent, in java into listener registred using _obj.addIFrameListener (IIframeComponentListener listener) method.
Side of JavaScript of HTML iframe object
After opening HTML iframe component, to Javascript it is called d2Init function, whose parameter is intf object. Attribute (property) of this object is tx(message) function and by calling the function is the message transferred from script to picture. D2Init return value is an object that has rx(message) attribute of type function that will be called when the script of picture sends a message. Content of message is in the message parameter.
Example
We would like to use HTML tag button in a picture, we want to change its text from script and capture the event when the button is clicked.
HTML iframe Object
In the CNF create HTML iframe object named rxtx, insert index.html, save.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<button id="btn" onclick="onClick()">click me</button>
<script>
var intf;
function d2Init(intf_) {
"use strict";
intf = intf_;
return {
rx: function (data) {
document.getElementById("btn").innerHTML = data;
}
};
}
function onClick() {
intf.tx("clicked");
}
</script>
</body>
Picture in GR
Place the HTML iframe displayer in the picture, assign a reference variable _ifc, select HTML iframe rxtx.
ESL
ENTRY ifc_OnIFCEvent (IN TEXT _msg) %HI_IFCSendCommand(_ifc, "Hello " + %HI_GetUserObjName()) END ifc_OnIFCEvent
Java
Into the onInit() method insert the following code:
_ifc.addIFrameListener(new IIframeComponentListener() {
@Override
public void onEvent(IIframeComponentSource arg0, IIframeComponentEvent arg1) {
_ifc.sendCommand("Hello " + getCurrentUser().getFullName());
}
});
Related pages:
Pridať komentár