Objekt HTML iframe zapuzdruje webovú stránku (HTML, javascript, CSS štýly, obrázky a ďalšie potrebné súbory) a umožňuje použiť takéto stránky ako prvky užívateľského rozhrania v schémach D2000. Súbory, ktoré tvoria objekt HTML iframe sú uložené ako súčasť objektu v konfiguračnej databáze. D2000 poskytuje komunikačný kanál, cez ktorý HTML iframe komponent komunikuje s ESL/java skriptom v schéme. Kanál je obojsmerný, textový, jedným smerom skript posiela HTML komponentu riadiace príkazy, na ktoré reaguje javascript v komponente a opačným smerom javascript posiela udalosti vyvolané užívateľskou interakciou s komponentom, tie sú v skripte zachytené a aplikačne spracované.


Typicky, aplikačný programátor zoberie existujúci HTML UI prvok, vytvorí HTML stránku do ktorej prvok vloží, napíše obsluhu komunikačného rozhrania na D2000 v javascripte a výslednú množinu .html .js .css a ďalších súborov uloží do D2000 ako objekt HTML iframe.


Objekt HTML iframe musí obsahovať súbor s menom index.html, tento súbor je braný ako koreňový pri zobrazení v HTML iframe komponente na schéme.


Komunikačný kanál


Strana skriptu schémy


Príkaz (textový reťazec) sa HTML iframe objektu posiela ESL funkciou %HI_IFCSendCommand, v jave je to metóda _obj.sendCommand(String cmd), udalosti z HTML iframe objektu pricházdajú v ESL do entry OnIFCEvent, v jave do listenera registrovaného pomocou metódy _obj.addIFrameListener(IIframeComponentListener listener)


Strana javaskriptu HTML iframe objektu


Po otvorení HTML iframe komponentu sa mu zavolá do javaskriptu funkcia d2Init, ktorej parametrom je objekt intf. Atribútom (property) tohto objektu je funkcia tx(message), jej volaním sa prenesie message do skriptu schémy. Návratová hodnota d2Init je objekt, ktorý má atribút rx(message) typu funkcia, ktorá bude zavolaná ak skript schémy pošle správu. Obsah správy je v parametri message.


Príklad


Chceme použiť HTML tag button na schéme, chceme meniť zo skriptu jeho text a chceme zachytiť udalosť keď je naň kliknuté.


Objekt HTML iframe


V CNF vytvoríme objekt HTML iframe s menom rxtx, vložíme index.html, uložíme.


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>
</html>


Schéma v GR


Zobrazovač HTML iframe umiestnime na schému, priradíme mu referenčnú premennú _ifc, vyberieme HTML iframe rxtx.


ESL


ENTRY ifc_OnIFCEvent (IN TEXT _msg)
  %HI_IFCSendCommand(_ifc, "Hello " + %HI_GetUserObjName())
END ifc_OnIFCEvent


Java


Do metódy onInit() vložíme kód:


_ifc.addIFrameListener(new IIframeComponentListener() {

			@Override
			public void onEvent(IIframeComponentSource arg0, IIframeComponentEvent arg1) {
				_ifc.sendCommand("Hello " + getCurrentUser().getFullName());
			}
		});


Súvisiace stránky:

HTML iframe - položky konfiguračného okna

2 komentárov

  1. Anonymný

    Čo je premenná "data", a ako si zavolám vlastnú funckiu v HTML iFrame?

    1. D2000 Dev Team

      V uvedenom príklade objektu HTML IFRAME je "data" parameter definovanej funkcie, ktorú volá D2000. V tomto textovom parametri sa posielajú užívateľské data z ESL skriptu za schémou čo môže byť napr. serializovaná JSON štruktúra. Už spomínaná funkciu s parametrom "data" je možné využiť na volanie ďalších funkcií podľa obsahu parametra posielaného z ESL.

Napíšte komentár