Blog webdeveloperski Patryk yarpo Jar

Tworzenie modułów Dojo (bez szablonów)

Autor wiadomości Luty 14, 2013

Ostatnich kilka wpisów poświęciłem tworzeniu modułów zgodnych z AMD. W tym wpisie pokażę, jak stworzyć widget Dojo wykorzystując podejście AMD (kiedyś opisywałem dawny sposób - nadal dostępny, choć już niedługo).

Na początek potrzebujesz

  • ogólnej wiedzy o JavaScript i Dojo
  • serwera WWW (przykłady do pobrania należy uruchamiać na serwerze)
  • 5 minut

Najprostsza definicja modułu

Pierwszy przykład będzie pokazywał, jak "w locie" stworzyć moduł.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Tworzenie widgetów Dojo (AMD, bez szablonów)</title>
    <script src='../1.8.3/dojo/dojo.js'>
    </script>
    <script>
	require([
            "dojo/_base/declare", // 0
            "dijit/_WidgetBase",  // 1
            "dojo/dom-construct", // 2
            "dojo/ready",         // 3
            "dojo/_base/window"   // 4
        ], function(
            declare,              // 0
            _WidgetBase,          // 1
            domConstruct,         // 2
            ready,                // 3
            win                   // 4
        ) {
            declare("MyWidget", [_WidgetBase],
            {
                buildRendering: function()
                {
                    this.domNode = domConstruct.create("span", {
                        innerHTML: "Jest twoim widgetem!",
                        style : "border:1px solid red; padding: 10px"
                    });
                }
            });
            ready(function()
            {
                // stwórz widget i umieść go w ciele strony
                (new MyWidget()).placeAt(win.body());
            });
	});
    </script>
</head>
<body></body></html>

demo online

Z kwestii, które warto tu zauważyć:

  1. Funkcja `require' (opisana w poprzednim wpisie) przyjmuje 2 parametry. Jako pierwszy tablicę modułów, które powinny zostać załączone, drugi to funkcja, jaka ma być wywołana, gdy już wszystkie moduły zostaną załączone. Ważne, aby kolejność modułów podanych w tablicy odpowiadała kolejności zmiennych podanych jako parametry funkcji anonimowej.
  2. Do stworzenia widgetu używamy funkcji `declare' z moduły `dojo/_base/declare'. Pierwszy parametr - nazwa modułu. Drugi parametr tablica modułów, po których deklarowany widget ma dziedziczyć, trzeci to obiekt będący główną częścią definicji naszego modułu (widgetu Dojo). Jeśli wydaje Ci się to znajome, to bardzo dobrze - dawny mechanizm `dojo.declare' zachowywał się bardzo podobnie.

Zastosowanie deklaratywnego sposobu wywoływania widgetów

Powyższy kod tworzy możliwość wywoływania stworzonego widgetu wiele razy (jako nowych, indywidualnych bytów). Ja jeśli tylko mogę staram się wykorzystywać bardzo przyjazny sposób wywoływania modułów, pokazany niżej:

<div data-dojo-type="MyWidget"></div>

demo online (warto zajrzeć do kodu, bo jest kilka zmian - dodanie wywołania parsowania HTML)

Moduł w osobnym pliku

Nie po to tworzy się moduły, aby móc korzystać z nich tylko w plikach, gdzie zostały zdefiniowane. Spróbujmy stworzyć osobny plik zawierający wcześniejszy widget.

define('yarpo/MyWidget',
    [
        "dojo/_base/declare", //0
        "dijit/_WidgetBase",  //1
        "dojo/dom-construct"  //2
    ],
    function(
        declare,              //0
        _WidgetBase,          //1
        domConstruct          //2
    ) {
    return declare("yarpo.MyWidget", [_WidgetBase], {
        buildRendering: function()
        {
            this.domNode = domConstruct.create("span", {
                innerHTML: "Jest twoim widgetem!",
                style : "border:1px solid red; margin: 10px; padding: 10px;"
            });
        }
    });
});

demo online

Wywołanie takiego modułu

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Tworzenie widgetów Dojo (AMD, bez szablonów)</title>
    <script
    data-dojo-config='packages:[{name:"yarpo",location: "../../widget-no-template/yarpo" }], parseOnLoad: true'
    src='../1.8.3/dojo/dojo.js'></script>
    <script>
        require(['yarpo/MyWidget', 'dojo/_base/window', 'dojo/domReady!'],
            function(MyWidget, win)
            {
                (new MyWidget()).placeAt(win.body()); // 1
                new MyWidget({}, "MyWidgetContainer"); // 2a
            });
    </script>
</head>
<body>
    <div data-dojo-type="yarpo/MyWidget"></div> <!-- 3 -->
    <div id="MyWidgetContainer"></div>          <!-- 2b -->
</body></html>

Linia z komentarzem "1" jest pokazanym wcześniej sposobem. Moim zdaniem jednym z  mniej eleganckich.

Linie "2a" oraz "2b" pokazują jak w sposób programistyczny wstawić widget na stronę, w miejsce odpowiedniego węzła HTML.

Linia 3 pokazuje mój ulubiony sposób - metodę deklaratywną. Polecam zapoznać się z innymi atrybutami `data-dojo-*'  na stronach dokumentacji.

W powyższym kodzie istotny jest jeszcze jeden kawałek:

<script
    data-dojo-config='packages:[{name:"yarpo",location: "../../widget-no-template/yarpo" }], parseOnLoad: true'
    src='../1.8.3/dojo/dojo.js'></script>

Atrybut `data-dojo-config' jest tym samym, co dawniej globalna zmienna `djConfig' (obecnie również `dojoConfig'). Ja wykorzystałem tu tylko dwie opcje:

  • lokalizację pakietów (inaczej Dojo szukałoby mojego pakietu w katalogu '1.8.3/yarpo', a takiego nie ma)
  • parseOnLoad : true - zamiast załączać jawnie "dojo/parser"

Powyższy wpis stanowi jedynie bardzo niewielkie preludium do wielkiego świata widgetów Dojo. Postaram się w najbliższym czasie opisać jak tworzyć widgety z szablonami oraz kilka ciekawych tricków związanych z tłumaczeniem widgetów czy przekazywaniem do nich danych. Póki co pozostaje google ;). Powodzenia 🙂

Komentarze (0) Trackbacks (0)

Brak komentarzy.


Leave a comment

 

Brak trackbacków.