HTML5-Tutorium: Canvas: Hello World 02: Unterschied zwischen den Versionen

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Keine Bearbeitungszusammenfassung
Zeile 206: Zeile 206:
# [http://www.w3schools.com/html5/ w3schools.com: HTML5 Tutorial]
# [http://www.w3schools.com/html5/ w3schools.com: HTML5 Tutorial]


<noinclude>[[Kategorie: HTML5-Tutorium: Canvas: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]
=Fortsetzung des Tutoriums=
</noinclude>
 
Bearbeiten Sie nun [[HTML5-Tutorium: Canvas: Hello World 03|Teil 3 des Tutoriums]].
 
[[Kategorie: HTML5-Tutorium: Canvas: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]

Version vom 16. Oktober 2012, 11:30 Uhr

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

Ergebnis: hallo.html (SVN-Repository)

HTML5: Hello-<name>-Anwendung mit Canvas

Die in Teil 1 erstellte Hello-World-Anwendung wird so erweitert, dass der Benutzer seinen Namen eingeben kann und mit diesem anschließend begrüßt wird. Außerdem wird das Canvas-Layout mit Hilfe von CSS modifiziert.

Musterlösung herunterladen

(Dieser Punkt kann übersprungen werden.)

Laden Sie die Musterlösung http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_02/ auf bekannte Weise in Eclipse.

Neues Projekt anlegen

Legen Sie ein neues Projekt an:

  1. Datei → Neu → Statisches Web-Projekt
  2. Project name: HelloWorldCanvas02 → Fertigstellen

Speichern Sie Ihr Projekt wiederum in Ihrem Repository:

  1. Projektexplorer: Rechtsklick auf HelloWorldCanvas02 → Team → Projekt gemeinsam nutzen
  2. SVN → Weiter
  3. Url: https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT (ACCOUNT durch eigenen RZ-Account ersetzen) → Weiter
  4. Use specified folder name: mmprog/tutorium/HelloWorldCanvas02 → Fertigstellen

Projekt im Repository sichern

Das neu angelegte Projekt wird als erstes im Repositotry gesichert:

  1. Im Projektexplorer: Rechtsklick auf HelloWorldCanvas02 → Team → Commit
  2. Comment: Neues Projekt angelegt.
  3. OK

Dateien erstellen

main.js

Erstellen Sie im Ordner WebContent/js des Projektes die Datei main.js. Diese Datei enthält nun zwei Funktionen:

  • init: Diese wird nach dem Laden der HTML-Seiten in einen Browser aufgerufen, um die Zeichenbühne (canvas) zu initialisieren.
  • sayHello: Diese wird aufgerufen, sobald der Benutzer seinen Namen eingegeben und den OK-Button gedrückt hat.

Inhalt von main.js

"use strict"; /* Warne vor unsauberem JavaScript-Code! */
 
var g_canvas; 
var g_context; 
 
/** Initialisiert die Bühne (Canvas). */
function init()
{
  g_canvas        = document.getElementById("d_canvas");
  g_canvas.width  = 300;
  g_canvas.height =  27;

  g_context = g_canvas.getContext("2d");
}
 
/**
 * Löscht den aktuellen Inhalt von der Bühne und schreibt dann einen Meldung 
 * auf die Bühne, bei der der Benutzer mit seinem Namen begrüßt wird.
 * Der Name des Benutzers wird aus einem Eingabefeld der HTML-Seite gelesen.
 */ 
function sayHello()
{
  // Textausgabe (auf der Bühne)
  g_context
    .clearRect(0, 0, g_canvas.width, g_canvas.height); // clear canvas
  g_context
    .font = "bold 20px 'Times New Roman', Times, serif";
  g_context
    .fillText("Hallo " + document.getElementById("d_name").value + "!", 5, 20);
}

main.css

Erstellen Sie im Ordner WebContent/css des Projektes die Datei main.css:

Inhalt von main.css

/* Das Text-Eingabefeld wird obtisch an die Bühne angepasst. */
#d_name
{
  width: 185px;
}

/* Die Bühne wird mit Hilfe eines Rands optisch hervorgehoben. */
#d_canvas
{
  margin-top:   10px; 

  border-color: #BBBBBB; 
  border-width: 2px; 
  border-style: solid;
}

hallo.html

Erstellen Sie im Ordner WebContent des Projektes die Datei hallo.html, die den Benutzer nach seinem Namen fragt und diesen, nachdem der Benutzer einen OK-Button gedrückt hat, zur Begrüßung des Benutzers verwendet.

Inhalt von hallo.html

<!DOCTYPE html>
<html>
  <head>

    <!-- Titel der HTML-Seite; wird i. Allg. im Browser im Reiter angezeigt -->
    <title>HTML5-Tutorium: Canvas: Hello World 02</title>

    <!-- Als HTML-Encoding sollte man stets UTF-8 verwenden. -->
    <meta charset="UTF-8">

    <!-- Korrektes Skalieren der Seite auf einem mobilen Endgerät -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

    <!-- Laden aller CSS-Dateien -->
    <link rel="stylesheet" href="css/main.css"/>

    <!-- Laden aller JavaScript-Dateien -->
    <script type="text/javascript" src="js/main.js"></script>

  </head>
  <body onload="init()">

    <!-- Das Eingabeformular zur Eingabe des Benutzernamens -->
    <form >
      <label>Ihr Name:</label>
      <input id="d_name" type="text"   value=""                           />
      <input             type="button" value="OK" onmousedown="sayHello()"/>
    </form>

    <!-- Die Bühne -->
    <canvas id="d_canvas">
      Ihr Browser unterstützt HTML5 leider nicht!
    </canvas>

  </body>
</html>

Testen und Sichern des Projektes

Testen Sie zunächst Ihr Projekt und sichern Sie dann das Ergebnis:

  1. Im Projektexplorer: Rechtsklick auf HelloWorldCanvas02 → Team → Commit
  2. Enter a comment for the commit operation: hallo.html mit main.js und main.css wurden erstellt.
  3. OK

Anschließend sollten Sie ein wenig mit den drei Dateien experimentieren, indem Sie sinnvolle und fehlerhafte Änderungen vornehmen. Löschen Sie z.B. die Zeilen mit dem Aufruf der Funktion clearRect aus der Datei main.js und testen Sie Ihre Anwendung erneut. (Tipp: Geben Sie mehrmals hintereinander jeweils einen anderen Namen ein.)

Speichern Sie zu guter Letzt Ihre sinnvollen Änderungen auch im Repository (mit kurzem, aber sinnvollem Kommentar!).

Optional: Apache als Test-Server

Anstelle des Eclipse-eigenen Testserver kann man auch einen beliebigen anderen Server (wie z.B. Apache oder Tomcat) zum Testen einer Web-Anwendung verwenden. Der Vorteil dieser Variante ist, dass man den Zielserver gemäß seinen Bedürfnissen wählen und konfigurieren kann und dass die Anwendung von Anfang an auf dem richtigen Server getestet wird.

Voraussetzung ist, dass ein entsprechender Server lokal installiert wurde:

Der Apache-Server muss laufen, sonst funktioniert der nachfolgende Test nicht!

Definieren eines neuen Apache-Test-Servers in Eclipse (nachdem der Apache installiert und gestartet wurde):

  1. Projektexplorer: Rechtklick auf den Root-Ordner des aktuellen Projektes HelloWorldCanvas02 → Eigenschaften → Server → Standardserver: keine → OK
  2. Im Projektverzeichnis: hallo.html selektieren → Klick auf Icon „grüner Kreis mit weißem Dreieck“ → Run on Server → OK
  3. Neuen Server manuell definieren selektieren → Severziel eingeben: HTTP Server selektieren
  4. Hostname des Servers: localhost, Server name: Apache → Weiter
  5. Publishing Directory: D:\web\apache\htdocs (Webverzeichnis des Servers, abhängig davon, wohin Sie den Apache installiert haben) → Weiter
  6. evtl. Anpassungen vornehmen → Fertigstellen

Beim nächsten Aufruf von Run on Server wird der Server Apache unter der Liste der vorhandenen Server aufgeführt. Man sollte diesen Server wählen und dann das Häckchen vor Server als Projektstandardeinstellung festlegen setzen, damit man die Serverwahl nicht bei jedem Test erneu ausführen muss.

Als Browser wird der in Eclipse integrierte Browser verwendet. Besser ist es den Firefox als Standardbrowser zu verwenden:

  • Klick auf Fenster → Klick auf Web → Klick auf Web → Klick auf Firefox

Ein Problem bleibt bestehen: Bei jedem Aufruf von Run on Server wird in Eclipse oder Firefox ein neues Browserfester geöffnet. Um dies zu verhindern, kann man folgenden Trick anwenden, nachdem Run on Server zum ersten Mal ausgeführt worden ist:

  1. Im mittleren unteren Fenster den Reiter Server selektieren
  2. Apache aufklappen und selektieren
  3. Wenn dort nicht synchronisiert, sondern Erneut publizieren steht: Im unteren mittleren Fenster: Klick auf das vierte Icon von rechts (Auf dem Server bereitstellen)
  4. Sobald beim Apache wieder synchronisiert steht, kann im Browserfester der Reload-Button gedrückt werden, um die neuen Daten abzufrufen. (Eventuell muss der Browser-Cache geleert werden.)

Quellen

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

Fortsetzung des Tutoriums

Bearbeiten Sie nun Teil 3 des Tutoriums.

Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=HTML5-Tutorium:_Canvas:_Hello_World_02&oldid=23923“