HTML5-Tutorium: Canvas: Hello World 02

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen:

Korrektheit: 4 (großteils überprüft)

Umfang: 4 (unwichtige Fakten fehlen)

Quellenangaben: 5 (vollständig vorhanden)

Quellenarten: 5 (ausgezeichnet)

Konformität: 4 (sehr gut)

HTML-Tutorium Hello World: JavaScript | Canvas | SVG

Inhalt | Teil 1 | Teil 2

Musterlösung: index.html (SVN-Repository)

Use Cases

Wie im dritten und vierten Teil des Hello-World-Tutoriums soll die ganze der Name des Benutzers erfragt werden, bevor er persönlich begrüßt wird.

Die Ausgabe erfolgt wie im ersten Teil des Canvas-Tutoriums mit Hilfe eines Canvas-Elements.

Die Anwendung soll wie „App5“ des vierten Teils des Hello-World-Tutoriums aufgebaut sein:

• Die Initialisierungsinformationen werden aus JSON-Dateien eingelesen.
• Die Anwendung wird mit Hilfe von RequireJS modularisiert.

Zu diesem Zweck wird das leere Projekt WKempty_RequireJS eingesetzt, das die Struktur der „App5“ nachbildet.

Neues Projekt anlegen

Legen Sie ein neues Projekt mit dem Namen HelloWorldCanvas02 an. Fügen Sie die Ordner und Dateien, die Sie im Zip-Archiv WKempty_RequireJS.zip finden. ein. In diesem Zip-Archiv ist ein leere Projekt enthalten, das im Prinzip wie die App5 im Tutorium HTML5-Tutorium: JavaScript: Hello World 04 aufgebaut ist (Ein paar Datei- und Ordnernamen unterscheiden sich). Dieses Archiv enthält folgende Dateien:

• web/css/main.css: Eine leere CSS-Datei.
• web/json/init.json: Eine leere JSON-Datei, in die Initialisierungsinformationen der Anwendung eingefügt werden können.
• web/js/lib/require: Die Bibliothek RequireJS samt zugehörigem JSON-Plugin.
• web/js/app/module.js: Ein leeres RequireJS-Modul. Ein Modul mit dem Namen „module“ wird üblicherweise nicht benötigt. Die Datei kann allerdings als Template für die Erstellung anderer Module verwendet werden.
• web/js/app/init.js: Ein RequireJS-Modul, das eine (bislang noch leere und damit funktionslose) Initialisierungsfunktion enthält. Diese Methode wird von main.js aufgerufen. Ihr werden üblicherweise das Window-Objekt des Browsers sowie ein JSON-Initialisierungsobjekt übergeben.
• web/js/main.js: Eine JavaScript-Datei, die RequireJS initialisiert, die JSON-Datei init.json lädt und zu guter Letzt die Initialisierungsfunktion der eigentlichen Anwendung ausführt.
• index.html: Eine HTML-Datei mit leeren Body-Element, die main.css, RequireJS und zu guter Letzt main.js lädt.

Speichern Sie dieses Projekt wie üblich in Ihrem Repository.

Erstellen eines neuen Projektes

Erstellen Sie ein neues Projekt „HelloWorldCanvas02“. Kopieren Sie anschließend Datei „index5.html“ sowie die Ordner „web/css“, „web/init“, „web/js/app5“ , „web/js/lib/require“ und die Datei „web/js/main5.js“ aus dem vierten Teil des Tutoriums zusammen mit den darin enthaltenen Dateien in Ihr Projekt.

Nehmen Sie folgende Umbenennungen vor (smartes Refactoring):

• index5.html → index.html
• js/main5.js → js/main.js
• js/app5 → js/app

Vergessen Sie nicht, dass Sie in der Datei „index.html“ den Befehl

<script data-main="js/main5" src="js/lib/require/require.js"></script>

durch

<script data-main="js/main" src="js/lib/require/require.js"></script>

ersetzen müssen. Und in der Konfigurationsanweisung von RequireJS ( Datei „main.js“) müssen sie app: 'app5' entweder entfernen oder durch app: 'app' ersetzen. Den Eintrag wk: 'lib/wk_amd' benötigen Sie auch nicht mehr (außer wenn Sie meine JSON-Bibliothek an Stelle der des RequireJS-JSON-Plugins verwenden möchten).

Passen Sie zu guter Letzt den Titel in der HTML-Datei „index.html“ an.

Wenn Sie alles richtig gemacht haben, sollte jetzt der Code der ursprünglichen App5-Anwendung wieder laufen.

Jetzt müssen Sie nur noch wenige Veränderungen am Code vornehmen, um die Ausgabe auf eine Canvas-Ausgabe umzustellen.

index.html

Ersetzen Sie Hello-Section-Elemente Ihrer HTML-Datei durch folgende Section-Element:

<section id="section1_hello" class="hidden">
  <canvas id="canvas1">
    Unfortunately, your browser doesn't support HTML5!
  </canvas>
</section>

und

<section id="section2_hello" class="hidden">
  <canvas id="canvas2">
  </canvas>
</section>

Dieser Schritt war in ähnlicher Form schon im ersten Teil des Canvas-Tutoriums notwendig.

hello_de.json und hello_en.json

Die Initialisierungs-Dateien „hello_de.json“ und „hello_en.json“ müssen an die neuen Gegebenheiten angepasst werden. Elemente, die es nicht mehr gibt – "hello" und "welcome" –, müssen entfernt werden, neue Elemente – "canvas" – müssen eingefügt werden und Initialwerte für da Canvas-Element (Höhe, Breit, Fontangaben etc.) müssen ergänzt werden.

Beispielsweise sieht die Datei „hello_de.json“ nun folgendermaßen aus:

{
  "HTMLElements":
  {
    "sectionForm":    "section2_form",
    "headingForm":    "heading2_form",
    "inputNameLabel": "label2_name",
    "inputName":      "input2_name",
    "buttonReset":    "button2_reset",
    "buttonSubmit":   "button2_submit",
    "sectionHello":   "section2_hello",
    "canvas":         "canvas2"
  },

  "text":
  {
    "title":   "Hello, Stranger!",
    "query":   "What's your name?",
    "reset":   "Reset",
    "submit":  "Say hello",
    "hello":   "Hello, $1!"
  },

  "css":
  {
    "hidden": "hidden"
  },

  "canvas":
  {
    "width":  500,
    "height":  60,
    "font":   "bold 40px \"Times New Roman\", Times, serif",
    "hello_x": 35,
    "hello_y": 43
  }
}

greet.js

Zu guter Letzt muss noch die Methode „sayHello“ in der Datei „greet.js“ angepasst werden. Diese Methode soll nicht mehr den DOM-Baum manipulieren, sondern den Gruß in das Ihr übermittelte Canvas-Element schreiben. Alle übrigen Methoden werden nicht verändert.

Die Methode „sayHello funktioniert im Prinzip genauso wie die Initialisierungsfunktion im ersten Teil des Tutoriums. Nur werden jetzt keine konstanten Werte mehr zum Initialisieren des Canvas verwendet, sondern Werte, die im Parameter „p_init“ übermittelt wurden:

l_this.sayHello =
  function ()
  {
    var l_init_elements = p_init.HTMLElements,
        l_init_text     = p_init.text,
        l_init_hidden   = p_init.css.hidden,
        l_init_canvas   = p_init.canvas,
        l_name          = p_document.getElementById(l_init_elements.inputName).value,
        l_canvas        = p_document.getElementById(l_init_elements.canvas),
        l_context       = l_canvas.getContext('2d');

    l_canvas.width  = l_init_canvas.width;
    l_canvas.height = l_init_canvas.height;
    l_context.font  = l_init_canvas.font;

    l_context.fillText(l_init_text.hello.replace('$1', l_name), l_init_canvas.hello_x, l_init_canvas.hello_y);

    p_document.getElementById(l_init_elements.sectionHello).classList.remove(l_init_hidden);
    p_document.getElementById(l_init_elements.sectionForm).classList.add(l_init_hidden);
  };

Quellen

2. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)