Šablóna dokumentu HTML5 pre Dojo 1.8

Medzi nové šablóny, ktoré sú zverejnené na stránkach How to ..., patria už aj šablóny pre prácu s frameworkom Dojo. Šablóny používajú aktuálnu verziu 1.8.3. V prípade, že chce čitateľ pracovať s najnovšími prvkami frameworku Dojo, je potrebné aktualizovať zápis verzie. V šablónach je použitá téma claro. Šablóny sú určené pre zápisy Dojo 1.7+.

Súčasťou šablón je nastavenie asynchrónneho nahrávania modulov a automatické parsovanie widgetov. Netreba preto dodatočne aktivovať parser. Prvá šablóna obsahuje len základnú inicializáciu frameworku. Je vhodná pre príklady na internete alebo na týchto stránkach, kde zväčša stačí príklad umiestniť do elementu <script> alebo <body> podľa typu obsahu.

Príklad: Základná šablóna Dojo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
    <head>
        <title>Dojo Template</title>
        <meta charset="utf-8">
        <meta name="author" content="PhDr. Matej Lednár, PhD.">
        <link rel="stylesheet" href="http://ajax.googleapis.com/
        ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css">
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/
        dojo/dojo.js" data-dojo-config="parseOnLoad:true, async:true">
        </script>
        <style>
        </style>
    </head>
    <body class="claro">
      <script>
        // dojo code
      </script>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <title>Dojo Template</title>
        <meta charset="utf-8">
        <meta name="author" content="PhDr. Matej Lednár, PhD.">
        <link rel="stylesheet" href="http://ajax.googleapis.com/
        ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css">
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/
        dojo/dojo.js" data-dojo-config="parseOnLoad:true, async:true">
        </script>
        <style>
        </style>
    </head>
    <body class="claro">
      <script>
        // dojo code
      </script>
    </body>
</html>

Druhá šablóna už aplikuje funkciu ready(), ktorá čaká na nahratie DOM a volaní vo funkcii require(). Ide teda o nahrávanie modulov prostredníctvom AMD (Asynchronous Module Definition). Táto šablóna je vhodná pre prácu s balíčkom Dojo, teda vtedy ak používateľ nechce pracovať s widgetmi.

Príklad: Rozšírená šablóna Dojo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
    <head>
        <title>Dojo Template</title>
        <meta charset="utf-8">
        <meta name="author" content="PhDr. Matej Lednár, PhD.">
        <link rel="stylesheet" href="http://ajax.googleapis.com/
        ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css">
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/
        dojo/dojo.js" data-dojo-config="parseOnLoad:true, async:true">
        </script>
        <style>
        </style>
    </head>
    <body class="claro">
        <script>
            require(["dojo/ready"], function(ready) {
                ready(function() {
                  // dojo code               
                });
            });
        </script>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <title>Dojo Template</title>
        <meta charset="utf-8">
        <meta name="author" content="PhDr. Matej Lednár, PhD.">
        <link rel="stylesheet" href="http://ajax.googleapis.com/
        ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css">
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/
        dojo/dojo.js" data-dojo-config="parseOnLoad:true, async:true">
        </script>
        <style>
        </style>
    </head>
    <body class="claro">
        <script>
            require(["dojo/ready"], function(ready) {
                ready(function() {
                  // dojo code               
                });
            });
        </script>
    </body>
</html>

Posledná verzia šablóny je vhodná pre pokročilú tvorbu webov vrátane widgetov. Widgety sú ovládacie prvky, ktoré môžu podporovať data binding a dátové sklady (stores). Widgety sú obsiahnuté v balíčkoch (packages) nazvaných Dijit a Dojox.

Príklad: Rozšírená šablóna Dojo s aktiváciou parsera.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
    <head>
        <title>Dojo Template</title>
        <meta charset="utf-8">
        <meta name="author" content="PhDr. Matej Lednár, PhD.">
        <link rel="stylesheet" href="http://ajax.googleapis.com/
        ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css">
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/
        dojo/dojo.js" data-dojo-config="parseOnLoad:true, async:true">
        </script>
        <style>
        </style>
    </head>
    <body class="claro">
        <script>
            require(["dojo/ready", "dojo/parser"], 
              function(ready, parser) {
                ready(function() {
                  // dojo code               
                });
            });
        </script>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <title>Dojo Template</title>
        <meta charset="utf-8">
        <meta name="author" content="PhDr. Matej Lednár, PhD.">
        <link rel="stylesheet" href="http://ajax.googleapis.com/
        ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css">
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/
        dojo/dojo.js" data-dojo-config="parseOnLoad:true, async:true">
        </script>
        <style>
        </style>
    </head>
    <body class="claro">
        <script>
            require(["dojo/ready", "dojo/parser"], 
              function(ready, parser) {
                ready(function() {
                  // dojo code               
                });
            });
        </script>
    </body>
</html>

Vo všetkých šablónach tvoria riadky 7 a 8 jeden riadok. To isté platí aj pre riadky 9 a 10. V opačnom prípade sa bude volať neexistujúca URI.

Záver

Uvedené šablóny obsahujú len základne nastavenia frameworku. Ďalšími nastavenia konfigurácie frameworku Dojo sa plánujem venovať v budúcnosti.

Šablóna dokumentu HTML5 pre Dojo 1.8

Záver

Komentáre

Pridať komentár