Dart nám totiž umožňuje v prehliadači komunikovať s JavaScriptovým prostredím. Vďačíme za to knižnici dart:js, ktorá nedávno pribudla do štandardného SDK.

Knižnica umožňuje:

• Prenášať medzi JavaScriptom a Dartom základné typy ako null, bool, num, String, DateTime.
• Prenášať zopár ďalších komplexnejších objektov, okrem iného DOM elementy.
• Volať JavaScriptové funkcie a pristupovať k JavaScriptovým objektom.
• Podstrčiť JavaScriptu Dartové funkcie ako callbacky.
• Zapisovať do JavaScriptových premenných Dartové objekty a opäť ich čítať.
• Konvertovať Dartové Maps a Lists na JavaScriptové Objects a Arrays.

Momentálne, žiaľ, nie je možné rozumným spôsobom konvertovať JavaScriptové Objects a Arrays späť do Dartu. Vždy sa to dá nejako rozumne ohackovať, ale nie je to pekné.

Jednoduché experimenty

Začnime jednoduchým Hello world programom.

import "dart:js";
import "dart:html";

void main() {
  context.callMethod('alert', ['Hello world!']);
}

Všetky JavaScriptové objekty sú v Darte zabalené do proxy objektu JsObject a knižnica poskytuje jeden globálny objekt context, ktorý zodpovedá globálnemu objektu window v JavaScripte. JsObject sprístupňuje volanie JavaScriptových metód cez callMethod, ktorá berie ako argumenty názov príslušnej metódy a List argumentov, s ktorými ju má zavolať.

Alternatívny zápis s tou istou funkcionalitou by vyzeral nasledovne:

import "dart:js";
import "dart:html";

void main() {
  context['alert'].apply(['Hello world!']);
}

Kde sme využili prístup k properties JavaScriptových objektov cez hranaté zátvorky (analogicky ako v JavaScripte samotnom) a metódu JsFunction.apply(List args, {thisArg}), ktorá je definovaná na JavaScriptových funkciách a umožňuje ich jednoduché volanie. Nepovinný argument thisArg umožňuje predefinovať JavaScriptové this.

Dialog jQuery UI

Inšpirujme sa príkladom modálneho dialógu z jQuery UI. Do hlavičky stránky pridáme tieto tri riadky

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

a v tele vytvoríme náš dialóg

<div id="dialog-confirm" title="Empty the recycle bin?">
  <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

Náš Dartovský kód potom bude vyzerať nasledovne

var jQuery = context['\$'];

var dialogOptions = new JsObject.jsify({
  'resizable': false,
  'height': 140,
  'modal': true,
  'buttons': {
    'Delete all items': new JsFunction.withThis((jsThis, event) {
      jQuery.apply([jsThis]).callMethod('dialog', ['close']);
      window.alert('Deleted!');
    }),
    'Cancel': new JsFunction.withThis((jsThis, event) {
      jQuery.apply([jsThis]).callMethod('dialog', ['close']);
      window.alert('Canceled!');
    })
  }
});
jQuery.apply(['#dialog-confirm']).callMethod('dialog', [dialogOptions]);

V prvom riadku sme si len priradili jQuery $ do premennej pre zjednodušenie budúcich zápisov. V poslednom riadku voláme $('#dialog-confirm').

Na výslednom jQuery objekte zavoláme metódu dialog, ktorej podhodíme nastavenia vo forme JavaScript objektu dialogOptions.

V Darte vieme (pokojne do seba vnorené) Maps a Lists rekurzívne konvertovať na JavaScriptové ekvivalenty pomocou konštruktora JavaScriptových objektov new JsObject.jsify, tak, ako sme to spravili s premennou dialogOptions.

V našom príklade bude výsledkom modálny dialóg s dvoma tlačítkami, na ktorých stlačenie by náš kód mal byť schopný reagovať. Potrebujeme teda do JavaScriptu podhodiť Dartové callbacky, ktoré budú zavolané JavaScriptovým kódom. Veru, aj to ide.

Pomocou konštruktora JavaScriptových funkcií JsFunction.withThis vieme obaliť Dartovú funkciu JavaScriptovou. Naša Dartová funkcia dostane potom ako prvý argument JavaScriptové this a následne ostatné argumenty predané JavaScriptovému volaniu. Tu si treba dať pozor na počet argumentov, Dart je v tomto narozdiel od JavaScriptu nekompromisný a ak nemáme deklarované nepovinné argumenty, vyžaduje presné dodržanie počtu argumentov pri volaní našich Dartových callbackov aj z JavaScriptu.

V týchto funkciách môžeme volať ľubovoľný Dartový kód, v našom prípade voláme window.alert z dart:html. Ak by sme nepotrebovali pracovať s JavaScriptovým this, stačí priradiť priamo Dartovský callback, o skonvertovanie sa už knižnica postará sama.

Zopár problémov na záver

Aktuálne API je pomerne silné, no žiaľ trochu jednosmerné. Kým z Dartu do JavaScriptu vieme objekty konvertovať, nie je triviálna cesta späť. Rozhranie JsObject nepodporuje foreach, neexistuje protipól k JsObject.jsify (akýsi dartify). Najrozumnejší spôsob, ako skonvertovať JavaScriptový objekt na Dart Map, je použiť nasledovný trik:

import dart:convert;

void main() {
  var jsData = context['data'];
  var jsonData = context['JSON'].callMethod('stringify', [jsData]);
  var dartData = JSON.decode(jsonData);
}

Tento trik samozrejme nezafunguje dobre, ak jsData obsahuje čokoľvek netriviálne: Dartový objekt, funkciu, DOM element. Samozrejme, vieme to obísť na strane JavaScriptu napísaním vlastnej forEach funkcie, ale je to nepríjemnosť navyše. Našťastie, podľa tejto issue sa zdá, že sa už na probléme pracuje.

Feedback prosím

Nájdite si prosím chvíľu na ohodnotenie tohto článku. Ak vás článok zaujal, sledujte ma na Twitteri, alebo odoberajte náš newsletter.

Zdroje

Pri písaní článku som čerpal z viacerých hodnotných zdrojov, nižšie ich nájdete zoradené podľa užitočnosti, zaujímavosti a aktuálnosti.

• http://api.dartlang.org/docs/releases/latest/dart_js.html
• http://api.dartlang.org/docs/releases/latest/dart_convert.html
• http://stackoverflow.com/questions/13939932/using-js-interop-how-can-i-convert-javascript-array-and-object-to-native-dart-ma?rq=1
• https://code.google.com/p/dart/issues/detail?id=12997&q=dart%20convert%20js%20objects&colspec=ID%20Type%20Status%20Priority%20Area%20Milestone%20Owner%20Summary