GlossarWiki - Benutzerbeiträge [de-formal]

HTML5-Tutorium: Canvas: MiniPong 05

2012-12-23T16:05:21Z

Rayza: /* Methoden */

{{HTML5-Tutorium:Canvas:MiniPong:Menü}}
'''Musterlösung''': <code>[http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/minipong/html5_canvas_minipong_04/WebContent/index.html Minipong 4]</code>
([http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/minipong/html5_canvas_minipong_04 SVN-Repository])
=Ziel: Simulation von Klassen in JavaScript=
Im vierten Teil des Tutoriums wird beschrieben, wie man [[Klasse]]n in JavaScript nachbilden kann.

Vier Klassen werden implementiert: <code>Ball</code>, <code>Paddle</code>, <code>Collision</code> und <code>Main</code>.
Es wird jeweils ein Objekt pro Klasse erstellt.

[[Medium:MiniPong04Canvas.png|miniatur|ohne|709px|Das Datenmodell von MiniPong 04]]

=Anwendung „<code>MiniPongCanvas04</code>“=

==Neues Projekt anlegen==

Legen Sie ein neues „Statisches Web-Projekt“ mit dem Namen <code>MiniPongCanvas04</code> an.

Speichern Sie dieses Projekt wie üblich in Ihrem Repository.

==Dateien erstellen==
Erstellen Sie zunächst die Datei <code>js/util.js</code> und füegen Sie folgenden Code ein:

<source lang="javascript">
/**
* @param {int} p_min
* @param {int} p_max
* @returns An integer number within the interval
* [<code>p_min</code>, <code>p_max</code>].
*/
Math.randomIntMinMax =
function(p_min, p_max)
{ return (p_min == p_max)
? p_min
: p_min+Math.floor(Math.random()*(p_max-p_min+1));
};
</source>

Damit haben Sie die Klasse <code>Math</code> um statische Funktion <code>randomIntMinMax</code>
erweitert, die eine zufällige Integer-Zahl aus dem Intervall <code>[p_min, p_max]</code>
berechnet.

Kopieren Sie die Dateien <code>index.html</code>, <code>css/main.css</code> und <code>js/CONSTANT.js</code> von [[HTML5-Tutorium: Canvas: MiniPong 03|Teil 3]] des Tutoriums,
passen Sie den Projekttitel in der Datei <code>index.html</code> an.

Jede Klasse soll in einer eigenen Datei definiert werden, wie dies auch bei anderen Programmiersprachen wie z.B. Java üblich ist.
Erstellen Sie zu diesem Zweck zunächst drei leere Dateien <code>js/ball.js</code>, <code>js/paddle.js</code> sowie <code>js/collision.js</code>.
Sorgen Sie anschließend dafür, dass alle JavaScript-Dateien von der Datei <code>index.html</code> geladen werden,
indem Sie folgende Zeilen in den Header dieser Datei einfügen:

<source lang="javascript">
<script type="text/javascript" src="js/util.js" ></script>
<script type="text/javascript" src="js/CONSTANT.js" ></script>
<script type="text/javascript" src="js/ball.js" ></script>
<script type="text/javascript" src="js/paddle.js" ></script>
<script type="text/javascript" src="js/collision.js"></script>
<script type="text/javascript" src="js/main.js" ></script>
</source>

'''Anmerkung:''' Um den Kommunikations-Overhead zwischen Client (Browser) und Server möglichst gering zu halten,
sollte eine HTML-Seite möglichst wenige weitere Dokumente (Bilder, CSS-Dateien, JavaScript-Dateien etc.) nachladen.
Die Definition weiterer JavaSCript-Dateien stellt hier aber kein Problem dar, wenn – sobald die Anwendung fertiggestellt und ausgiebig getestet wurde –
alle JavaScript-Dateien komprimiert und in eine einzige Datei (<code>js/all.min.js</code>) eingefügt werden.
Natürlich darf in der Datei <code>index.html</code> anschließend auch nur noch diese eine JavaScript-Datei geladen werden.

==Die Klasse <code>Ball</code>==

Die Definition der Klasse <code>Ball</code> wird in JavaScript durch zwei Objekte realisiert oder – besser gesagt – simuliert:
Eine Konstruktor-Funktion (genauer: ein Konstruktor-Funktion-Objekt) sowie das zugehörige <code>prototype</code>-Objekt.

Die Konstruktor-Funktion <code>Ball</code> erstellt neue Ball-Objekte und initialisiert diese,
indem sie im jedem neu erstellten Objekt (<code>this</code>) Attribute erzeugt und initialisiert.
(Ein Attribut wird automatisch erzeugt, sobald ihm ein Wert zugewiesen wird.)

===Konstruktor===
<source lang="javascript">
/**
* Creates an instance of <code>Ball</code>.
*
* @constructor
* @this {Ball}
* @param {CanvasRenderingContext2D} p_context
* The 2d context of the canvas upon which the ball is to be drawed.
* @param {Number} p_r
* The radius of the ball.
* @param {Number} [p_x_start = BALL_X_START]
* The starting position of the ball in x-direction.
* @param {Number} [p_y_start = BALL_Y_START]
* The starting position of the ball in y-direction.
* @param {Array[2]} [p_vx_start = BALL_VX_START]
* The starting velocity of the ball in x-direction (min, max).
* @param {Array[2]} [p_vy_start = BALL_VY_START]
* The starting velocity of the ball in y-direction (min, max).
*/
function Ball(p_context, p_r, p_x_start, p_y_start, p_vx_start, p_vy_start)
{ this.r = p_r || BALL_RADIUS;

this.v_x_start = p_x_start || BALL_X_START;
this.v_y_start = p_y_start || BALL_Y_START;
this.v_vx_start = p_vx_start || BALL_VX_START;
this.v_vy_start = p_vy_start || BALL_VY_START;

this.v_context = p_context;

this.reset();
};
</source>

Die <code>reset</code>-Methode nimmt weitere Initialisierungen vor.
Da diese Initialisierungen bei jedem Spielstart erneut ausgeführt werden müssen,
wurden sie in eine Methode ausgelagert.

Man beachte, dass der dem Konstruktor vorangestellte Kommentar [[JSDoc]]-konform ist.
Dies ermöglicht es, mit einem geeigneten JSDoc-Tool eine HTML-[[API]]-Dokumentation automatisch zu erstellen.

===Methoden===

Der Konstruktor weist jedem neu erstellten Objekt ein weiteres Attribut automatisch zu: <code>prototype</code>.
Dieses Attribut enthält einen Verweis auf das <code>prototype</code>-Objekt des zugehörigen Konstruktors.
JavaScript sucht bei einem Methodenaufruf <code>obj.m()</code> die Definition der Methode <code>m</code>
zunächst im Objekt <code>obj</code> selbst. Sollte dort keine Definition vorhanden sein, so
sucht JavaScript als nächstes in <code>obj.prototype</code>, dann in
<code>obj.prototype.prototype</code> usw. Die Suche endet sobald entweder eine Definition gefunden oder
kein weiteres <code>prototype</code>-Objekt mehr existiert. Im letzteren Fall meldet JavaScript einen Fehler.

Das heißt, in JavaScript werden Methoden üblicherweise im Prototyp-Objekt des Konstruktors definiert.

'''Anmerkung:''' Im Folgenden werden wieder JSDoc-konforme Kommentare benutzt.

<source lang="javascript">
Ball.prototype =
{ //////////////////////////////////////////////////////////////////////////////
// data
//////////////////////////////////////////////////////////////////////////////

/** The radius of the ball. */
get r() { return this.v_r; },
set r(p_r) { this.v_r = p_r; },

/** The x-position of the ball. */
get x() { return this.v_x; },
set x(p_x) { this.v_x = p_x; },

/** The y-position of the ball. */
get y() { return this.v_y; },
set y(p_y) { this.v_y = p_y; },

/** The vx-velocity of the ball. */
get vx() { return this.v_vx; },
set vx(p_vx) { this.v_vx = p_vx; },

/** The vy-velocity of the ball. */
get vy() { return this.v_vy; },
set vy(p_vy) { this.v_vy = p_vy; },

//////////////////////////////////////////////////////////////////////////////
// logic
//////////////////////////////////////////////////////////////////////////////

/**
* Resets the ball:
* Moves the ball to its starting position
* and computes randomly a velocity vector.
*/
reset:
function()
{ this.x = this.v_x_start;
this.y = this.v_y_start;
this.vx = (Math.random()<0.5?1:-1)
*Math.randomIntMinMax(this.v_vx_start[0], this.v_vx_start[1]);
this.vy = Math.randomIntMinMax(this.v_vy_start[0], this.v_vy_start[1]);
},

/** Moves the ball in direction (vx,vy); the step size depends on FPS. */
move:
function()
{ this.x += this.vx/FPS;
this.y += this.vy/FPS;
},

//////////////////////////////////////////////////////////////////////////////
// view
//////////////////////////////////////////////////////////////////////////////

/** Draws the ball at its current position onto a 2d context. */
draw:
function()
{ this.v_context.beginPath();
this.v_context.arc(this.x, this.y, this.r, 0, 2*Math.PI, true);
this.v_context.lineWidth = BALL_BORDER_WIDTH;
this.v_context.lineStyle = BALL_BORDER_COLOR;
this.v_context.fillStyle = BALL_COLOR;
this.v_context.stroke();
this.v_context.fill();
},

//////////////////////////////////////////////////////////////////////////////
// end of prototype
//////////////////////////////////////////////////////////////////////////////
};
</source>

Man beachte, dass die [[Getter-Methode|Getter]]- und [[Setter-Methode]]n für die
Attribute <code>r</code>, <code>x</code>, <code>y</code>, <code>vx</code>, <code>vy</code>
EcmaScript-5-konform definiert wurden (EcmaScript 5 wird von HTML5-fähigen Brwosern unterstützt).
Dies hat den Vorteil, dass man auf diese Attribute nicht mit der Methoden-Aufruf-Syntax,
sondern mit der üblichen Attribut-Syntax zugreifen kann:

<source lang="JavaScript">
var my_ball = new Ball();

my_ball.r = 20; // Aufruf der Setter-Methode
console.log(my_ball.r); // Aufruf der Getter-Methode
</source>

In EcmaScript 3 (HTML 4 oder früher)
gibt es diese Art der Getter- und Setter-Methoden nicht. Hier muss man auf
den in Java üblichen Trick zurückgreifen und ersatzweise zwei Methoden definieren:

<source lang="JavaScript">
/** The radius of the ball. */
getR: function() { return this.v_r; },
setR: function(p_r) { this.v_r = p_r; },
...
</source>

In diesem Fall erfolgen die Attribut-Zugriffe mittels Methodenaufrufen:

<source lang="JavaScript">
var my_ball = new Ball();

my_ball.setR(20); // Aufruf der Setter-Methode
console.log(my_ball.getR()); // Aufruf der Getter-Methode
</source>

Die Verwendung von echten Getter- und Setter-Methoden erhöht die
[[Programmierprinzipien#Stetigkeit.2C_Continuity|Stetigkeit]] des Codes,
da sich der Zugriff auf öffentliche Zustandsvariablen syntaktisch nicht vom
Zugriff auf echte Getter- und Setter-Methoden unterscheidet. Das heißt,
die Implementierung der Klasse kann jederzeit die Art der Attribut-Definition ändern,
ohne dass das Auswirkungen auf die Zugriff-Syntax von zugehörigen Objekten hätte.<ref>vgl. {{Quelle|Meyer (1997)}}</ref>

Beispielsweise könnten in der obigen Definition der Klasse <code>Ball</code>
die Getter- und Setter-Methoden der Attribute <code>x</code> und <code>y</code>
(ebenso wie alle anderen Getter- und Setter-Methoden) einfach aus dem Prototype-Objekt gelöscht werden.
Am Verhalten der Klasse <code>Ball</code> würde das nichts ändern, da die Methoden
<code>reset</code> und <code>move</code> nun direkt auf die Zustandsvariablen
<code>this.x</code> und <code>this.y</code> zugreifen würden. Der zugehörige
Code wäre sogar etwas effizienter.

Kommentieren Sie in der Musterlösung oder in Ihrer finalen Lösung
doch einfach mal ein paar Getter- und Setter-Methoden aus und starten Sie die Anwendung erneut.
Die Anwendung sollte immer noch fehlerfrei funktioneiren.

Anschließend sollten Sie die Methoden wieder aktivieren und testweise einmal einen Logging-Befehl einfügen:

<source lang="javascript">
set x(p_x) { this.v_x = p_x; console.log("Setter 'x', param: " + p_x); },
</source>

Wenn Sie jetzt das die Anwendung ausführen, wird jede Änderung der x-Position des Balls
im Konsolfenster ausgegeben. Ohne echte Setter-Methode hätten Sie diesen Logging-Befehl
an jede Stelle, an der die Ballposition geändert wird, einfügen müssen. Oder Sie hätten
an jeder dieser Stellen <code>...ball.x = ...</code> durch <code>...ball.setX(...)</code>
ersetzen müssen.

==Die Klasse <code>Paddle</code>==

Die Klasse <code>Paddle</code> wird analog zur Klasse <code>Ball</code> definiert.
Die benötigten Attribute und Methoden findet man im obigen Klassendiagramm.

Die Methoden-Definitionen von <code>reset</code>, <code>move</code> und <code>draw</code> werden
(wie bei der Klasse <code>Ball</code> aus) der Lösung des [[HTML5-Tutorium: Canvas: MiniPong 03|dritten Teils des Tutoriums]] übernommen.
Bei der Definition der Methode <code>reset</code> sollte analog zur Klasse <code>Ball</code>
der Zugriff auf globale Konstanten (<code>PADDLE_X</code> und <code>PADDLE_Y</code>)
durch den Zugriff auf lokale Zustandsvariablen (<code>this.v_x_start</code> und <code>this.v_y_start</code>)
ersetzt werden. Diese beiden Variablen sollten (wie in der Klasse <code>Ball</code>) von Konstruktor initialisiert werden.

Zusätzlich werden drei weitere Methoden benötigt:

<source lang="javascript">
/** Makes the paddle move left (if it is currently not moving). */
startLeft: function(){ if (this.vx == 0) this.vx = -this.v_vx_start; },

/** Makes the paddle move right (if it is currently not moving). */
startRight: function(){ if (this.vx == 0) this.vx = +this.v_vx_start; },

/** Makes the paddle stop moving. */
stop: function(){ this.vx = 0; },
</source>

Die Attribute werden – bis auf vier Ausnahmen – genauso definiert wie in der Klasse <code>Ball</code>:
Entweder gar nicht oder mittels echter Setter- und Getter-Methoden.

Vier Atribute wurden allerdings im Diagramm als nur lesbar (read only, <code>frozen</code>)
deklariert: <code>left</code>, <code>right</code>, <code>top</code> und <code>bottom</code>.
Diese Attribute dürfen also nicht geändert, sondern nur gelesen werden,
da die Werte aus anderen Attributen berechnet werden. Daher können die Werte auch nicht
in Zustandsvariablen gespeichert werden. Allerdings kann man Read-only-Attribute
mit Hilfe echter Getter-Methoden recht elegant realisieren:

<source lang="javascript">
/** The left side of the paddle (read only). */
get left() { return this.x; },

/** The right side of the paddle (read only). */
get right() { return this.x + this.width; },

/** The top side of the paddle (read only). */
get top() { return this.y; },

/** The bottom side of the paddle (read only). */
get bottom() { return this.y + this.height; },
</source>

Auf diese Attribute kann ebenfalls mit der üblichen Attribut-Syntax zugegriffen werden:

<source lang="javascript">
var my_paddle = new Paddle();

console.log(my_paddle.left); // Aufruf der Getter-Methode
</source>

Da keine Setter-Methoden existieren, können diese Attribute nicht geändert werden.
Falls man seinen JavaScript-Code mittels <code>"use strict";</code> als „strikt“ dekalriert hat,
resultiert folgende Anweisung in einer Fehlermeldung:

<source lang="javascript">
my_paddle.left = 30; // Aufruf der nicht vorhandenen Setter-Methode
</source>

==Die Klasse <code>Collision</code>==

Ein Objekt der Klass <code>Collision</code> ist für das Erkennen und Behandlen von Kollisionen zuständig.

Dem Konstruktor müssen alle möglich Kollisionspartner übergeben werden: Wände, Ball und Schläger.

<source lang="javascript">
/**
* Creates an instance of <code>Collision</code>.
*
* The main method <code>handleCollision</code> detects collisions
* between the ball and a wall, between the paddle and a wall, and
* between the ball and the paddle.
*
* @constructor
* @this {Collision}
* @param {Object} p_walls The walls of the game: An object with
* four integer attributes: <code>left</code>,
* <code>right</code>, <code>top</code>, and
* <code>bottom</code>.
* @param {Ball} p_ball The ball of the game.
* @param {Paddle} p_paddle The paddle of the game.
*/
function Collision(p_walls, p_ball, p_paddle)
{ this.v_walls = p_walls;
this.v_ball = p_ball;
this.v_paddle = p_paddle;
};
</source>

In der Kollisionsklasse wird nur eine öffentliche Methode definiert: <code>handleCollision</code>.
Diese Methode hat zwei Aufgabe: Kollisionen erkennen und erkannte Kollisionen zu behandeln.
Dabei sind zwei Arten von Behandlung möglich:
# Die Kollisionspartner ändern ihr Verhalten (Richtungswechsel des Balls, Stopp des Schläger).
# Das Spiel reagiert auf die Kollisionen (Erhöhung der Punktezahl, Spielende)

Die erste Art der Behandlung nimmt <code>handleCollision</code> selbst vor,
da ihr die Kollisionspartner bekannt sind. Die zweite Art der Kollisionsbehandlung
kann diese Methode dagegen nicht vornehmen. Daher informiert sie den Aufrufer
mittels eines Rückgabewerts (<code>EVENT_SCORE</code>: Erhöhung des Punktekontots, <code>EVENT_EXIT</code>: Spielende)
über das eingetretene Ereignis. Es ist dann die Aufgabe des Aufrufers, entsprechende Maßnahmen
vorzunehmen.

<source lang="javascript">
Collision.prototype =
{ //////////////////////////////////////////////////////////////////////////////
// Methods (Logic)
//////////////////////////////////////////////////////////////////////////////

/**
* Detects collisions between the ball and a wall,
* between the paddle and the wall, and between the ball and the paddle.
* If a collision is detected, the collision is handled.
* <p>
* This method is an update method returning an event
* name in som cases. Better event handling should be
* implemented.
* </p>
* @return {String} <code>EVENT_EXIT</code> if the ball hits the bottom wall,
* <code>EVENT_SCORE</code> if the ball hits the paddle.
* <code>NULL</code> otherwise
*/
handleCollision:
function()
{ this.m_collision_ball_wall();
this.m_collision_paddle_wall();

if (this.m_ball_exit())
return EVENT_EXIT;

if (this.m_collision_ball_paddle())
return EVENT_SCORE;

return null;
},

//////////////////////////////////////////////////////////////////////////////
// Private Methods (Logic)
//////////////////////////////////////////////////////////////////////////////

// Tests whether the ball hits the bottom wall.
m_ball_exit:
function()
{ return (this.v_ball.y >= this.v_walls.bottom + this.v_ball.r);
},

// Tests whether the ball hits another wall.
m_collision_ball_wall:
function()
{ if ( (this.v_ball.x <= this.v_walls.left + this.v_ball.r)
|| (this.v_ball.x >= this.v_walls.right - this.v_ball.r)
)
this.v_ball.vx = -this.v_ball.vx;

if (this.v_ball.y <= this.v_walls.top + this.v_ball.r)
this.v_ball.vy = -this.v_ball.vy;
},

// Tests whether the paddle hits the bottom wall and, if so, stops it.
m_collision_paddle_wall:
function()
{ if ( (this.v_paddle.left <= this.v_walls.left && this.v_paddle.vx < 0)
|| (this.v_paddle.right >= this.v_walls.right && this.v_paddle.vx > 0)
)
this.v_paddle.stop();
},

// Tests whether the paddle hits the paddle.
m_collision_ball_paddle:
function()
{ if ( this.v_ball.y + this.v_ball.r >= this.v_paddle.top
&& this.v_ball.y + this.v_ball.r <= this.v_paddle.bottom
&& this.v_ball.x + 0.5*this.v_ball.r >= this.v_paddle.left
&& this.v_ball.x - 0.5*this.v_ball.r <= this.v_paddle.right
)
{ // Resolve penetration.
if (this.v_ball.vy > 0) // The ball is moving from top to bottom.
this.v_ball.y = this.v_paddle.y - this.v_ball.r;
else // The ball is moving from bottom to top.
this.v_ball.y = this.v_paddle.y + this.v_paddle.height + this.v_ball.r;

this.v_ball.vy = -this.v_ball.vy;
this.v_ball.vx += this.v_paddle.friction*this.v_paddle.vx;
return true;
};
return false;
},

};
</source>

Man beachten, dass in der obigen Definition vier private Methoden definiert wurden,
die für die jeweils unterschiedlichen Kollisionsszenarien zuständig sind:
* Ball kollidiert mit unterer Wand (⇒ Spielende)
* Ball kollidiert mit einer anderen Wand (⇒ Richtungsänderung)
* Schläger kollidiert mit einer Wand (⇒ Stopp der Schlägerbewegung)
* Ball kollidiert mit Schläger (⇒ Richtungsänderung und Punktgewinn)

Diese Aufteilung wäre hier nicht notwendig gewesen, führt aber zu verständlicherem Code
und legt den Grundstein für eine weitergehende Modularisierung der Kollisionsklasse.

==Die Datei <code>main.js</code>==

Hier könnte zunächst die Datei <code>main.js</code> von [[HTML5-Tutorium: Canvas: MiniPong 03|Teil 3 des Tutoriums]] übernommen und leicht angepasst werden:

Die Variablen[[Definition vs. Deklaration|definition]] von <code>g_ball</code> und <code>g_paddle</code> werden durch Variablen[[Definition vs. Deklaration|deklarationen]]
ersetzt:

<source lang="javascript">
// ball, paddle, collision
var g_ball;
var g_paddle;
var g_collision;
</source>

Die eigentlich Definition der drei Objekte erfolgt nun in der Funktion <code>f_init</code>
'''nachdem''' das Objekt <code>g_context</code> ermittelt wurde:

<source lang="javascript">
// Initialize all game objects.
g_ball = new Ball(g_context);
g_paddle = new Paddle(g_context);
g_collision = new Collision
({left: 0,
right: CANVAS_WIDTH,
top: 0,
bottom: CANVAS_HEIGHT
},
g_ball,
g_paddle
);
</source>

'''Anmerkung:''' Die untere Wand wurde außerhalb des Spielfeldrandes gelegt,
damit der Ball ganz von der Bühne verschwunden ist, bevor das Spielende angezeigt wird.

Die einzigen weiteren notwendigen Änderungen sind:

Die Aufrufe
<source lang="javascript">
g_ball.draw(g_context);
g_paddle.draw(g_context);
</source>
werden durch
<source lang="javascript">
g_ball.draw();
g_paddle.draw();
</source>
ersetzt, da jedes grafische Objekt den 2D-Kontext, auf den es gezeichnet werden soll, kennt (er wurde dem jeweiligen Objekt bei der Konstruktion übergeben).

Die Redraw-Methode wird deutlich einfacher, da deren Aufgabe im Wesentlichen vom Kollisionsobjekt übernommen wurden:

<source lang="javascript">
function o_redraw()
{ // collision detection
var l_exit = g_collision.handleCollision();

if (l_exit == EVENT_EXIT)
{ o_stop_game();
return;
};

if (l_exit == EVENT_SCORE)
{ // Raise the score and display it.
g_score++;
f_info("Punkte: " + g_score);
};

// Move the ball and paddle.
g_ball.move();
g_paddle.move();

// Redraw the canvas.
f_draw();
}
</source>

Die Implementierungen der Start- und Stopp-Methoden des Paddles können ebenfalls vereinfacht werden,
da dafür im Paddle-Objekt spezielle Methoden zur Verfügung stehen:

<source lang="javascript">
// An event observer:
// It is called whenever a "start paddle moving event" is signalled.
function o_start_paddle_moving(p_event)
{ if (p_event.keyCode == KEY_LEFT)
g_paddle.startLeft();
else if (p_event.keyCode == KEY_RIGHT)
g_paddle.startRight();
}

// An event observer:
// It is called whenever a "stop paddle moving event" is signalled.
function o_stop_paddle_moving(p_event)
{ g_paddle.stop(); }
</source>

==Eine echte <code>Main</code>-Klasse (<code>main.js</code> reloaded)==

Die JavaScript-Datei <code>main.js</code> enthält noch viele globale Werte: globale Variablen (<code>g_...</code>),
globale Funktionen (<code>f_...</code>) und globale Observer-Methoden (<code>o_...</code>).

Aus Sicht des „[[Programmierprinzipien#Modularit.C3.A4t.2C_Modularity.2C_Teile_und_herrsche.2C_Divide_et_impera|Prinzips der Modularität]]“
ist die Verwendung von globalen Größen extrem schlecht. Auf globale Größen kann jedes Modul ungehindert zugreifen. Daher
kann eine globale Größe nie geändert werden, ohne vorher sämliche Module zu überprüfen, ob und in welcher Weise sie
auf diese Größe zugreifen. Dies ist eine der Lehren, die zahlreiche [[Fortran]]-Programmierer aus der früher üblichen Programmierpraxis,
sehr viele Daten in einem globalen Datenbereich abzulegen, schmerzhaft ziehen mussten.

Das heißt, alle globalen Größen der Datei <code>main.js</code> sollten in einem <code>Main</code>-Objekt gekapselt werden.

===Konstruktor===

Der Konstruktor übernimmt im Wesentlichen die Aufgaben der ehemaligen Init-Funktion <code>f_init</code>.
Anmerkung: Hier wurde bewusst auf [[JSDoc]]-Kommentare verzichtet, das <code>Main</code> eine
„private“ Klasse ist, die nicht in anderen Projekten wiederverwendet wird. Daher ist es nicht sonderlich sinnvoll,
die API dieser Klasse automatisch zu generieren.

<source lang="javascript">
// Create the main object, after the HTML page has been loaded.
window.onload = function(){ new Main(); };

// The singleton class Main.
function Main()
{ // Ensure that Main is a singleton class.
if (Main.c_element != null)
return Main.c_element;
Main.c_element = this;

var l_canvas = document.getElementById("d_canvas");

// Initialize the canvas.
l_canvas.width = CANVAS_WIDTH;
l_canvas.height = CANVAS_HEIGHT;
this.v_context = l_canvas.getContext("2d");

// Initialize all game objects.
this.v_ball = new Ball(this.v_context);
this.v_paddle = new Paddle(this.v_context);
this.v_collision = new Collision
({left: 0,
right: CANVAS_WIDTH,
top: 0,
bottom: CANVAS_HEIGHT
},
this.v_ball,
this.v_paddle
);

var self = this; // Needed to overcome dynamic binding problems.
document.getElementById("d_start_stop").onmousedown =
function() { self.o_start_stop_game(); };

// Reset the game (i.e. change its state to "waiting for game to be started").
this.v_state = STATE_STOPPED;
this.m_init_stopped();
}
</source>

Im obigen Datenmodell wurde die Klasse <code>Main</code> als <code>Singleton</code> deklariert. Das heißt, von dieser
Klasse darf es zu jedem Zeitpunkt maximal ein Objekt geben. Die erste <code>if</code>-Anweisung im Konstruktor
sorgt dafür, dass damit tatsächlich nur ein <code>Main</code>-Objekt erzeugt werden kann. Das erste
<code>Main</code>-Objekt wird im Konstruktor-Objekt gespeichert. Sofern tatsächlich versucht werden
würde, ein zweites <code>Main</code>-Objekt mit diesem Konstruktor zu erzeugen, wird einfach
das schon existente <code>Main</code>-Objekt als Ergebnis zurückgegeben.

Eine sehr subtile Änderung ist allerdings hinsichtlich des Start/Stop-Buttons notwendig.
In JavaScript hängt der Wert der Variablen <code>this</code> nicht vom Definitionsort ab, sondern vom Aufrufer der Methode.
Die Variable <code>this</code> ist also – im Gegensatz zu allen anderne JavaScript-Variablen –
nicht [[Bindung|lexikalisch]] sondern [[Bindung|dynamisch]] gebunden.

Das Problem ist nun, dass die Methode <code>o_start_stop_game</code> nicht jetzt, sondern erst später aufgerufen wird und zwar
vom im HTML-Dokument enthaltenen Button-Objekt (<code>document.getElementById("d_start_stop")</code>)
sobald der Benutzer auf diesen Button klickt. Damit zeigt die Variable <code>this</code> auf dieses Button-Objekt und nicht
auf das <code>Main</code>-Objekt. Da aber die Methode <code>o_start_stop_game</code> mittels <code>this</code> auf
Attribute des <code>Main</code>-Objekts zugreifen will, muss man einen schmutzigen, aber in JavaScript-Code
häufig anzutreffenden Trick anwenden. Man muss <code>this</code> '''außerhalb''' der Funktion, die das Button-Objekt
später aufruft, in einer lexikalisch gebundenen Variablen, d.h. in irgendeiner anderen Variablen, ablegen.
Überlicherweise heißt diese Variable <code>self</code>.

<source lang="javascript">
var self = this; // Needed to overcome dynamic binding problems.
</source>
Innerhalb der Funktion, die das Button-Objekt später aufruft, wird nun <code>self</code> anstelle von <code>this</code>
verwendet.

<source lang="javascript">
document.getElementById("d_start_stop").onmousedown =
function() { self.o_start_stop_game(); };
</source>

Da <code>self</code> lexkalisch gebunden ist, tritt das zuvor beschriebene Problem nicht mehr auf.
Wenn nun innerhalb der Methode <code>o_start_stop_game</code> auf die Variable <code>this</code>
zugegrifen wird, so ist darin wie gewünscht das <code>Main</code>-Objekt enthalten.

'''Warnung:''' Dieses JavaScript-Verhalten kann gerade einem Programmieranfäger stundenlange Fehlersuche bescheren.

===Methoden===

Die ehemals öffentlichen Funktionen der JavaScript-Datei <code>main.js</code>
werden als Methoden des <code>Main</code>-Objekts realisiert.

<source lang="javascript">
Main.prototype =
{ //////////////////////////////////////////////////////////////////////////////
// logic
//////////////////////////////////////////////////////////////////////////////

// Has to be called when the game is to be started.
m_init_started:
function ()
{ // Reset the score.
this.v_score = 0;

// Set the button "d_start_stop" to be a stop button (view).
document.getElementById("d_start_stop").value = "Stopp";

var self = this; // Needed to overcome dynamic binding problems.

// React to key down and key up events.
// The following code does not work due to dynamic binding of "this" :-(((
// document.onkeydown = this.o_start_paddle_moving;
// document.onkeyup = this.o_stop_paddle_moving;
document.onkeydown =
function(p_event){ self.o_start_paddle_moving(p_event); };
document.onkeyup =
function(p_event){ self.o_stop_paddle_moving(p_event); };

// Start the timer for redrawing the canvas every 1000/FPS seconds.
this.v_timer =
window.setInterval(function(){ self.o_redraw(); }, 1000/FPS);

// Show the current score (zero points)
this.m_info("Punkte: " + this.v_score);
},

// Has to be called when the game is to be stopped.
m_init_stopped:
function ()
{ // Stop the canvas redrawing timer.
window.clearInterval(this.v_timer);

// Stop reacting to key down and key up events.
document.onkeydown = null;
document.onkeyup = null;

// Set the button "d_start_stop" to be a start button (view).
document.getElementById("d_start_stop").value = "Start";

// Put the ball and the paddle on their starting positions
// and then redraw the canvas.
this.v_ball.reset();
this.v_paddle.reset();
this.m_draw();
},

// An event observer:
// It is called presses the start/stop button.
o_start_stop_game:
function()
{ // Change the current state (this is a little automaton!).
this.v_state = NEXT_STATE[this.v_state];

// Initialize the new state.
this["m_init_" + this.v_state]();
/* // Alternatively:
* if (this.v_state == STATE_STARTED)
* this.m_init_started();
* else if (this.v_state == STATE_STOPPED)
* this.m_init_stopped();
*/
},

// An event observer:
// It is called whenever a "start paddle moving event" is signalled.
o_start_paddle_moving:
function(p_event)
{ // console.log(this);
if (p_event.keyCode == KEY_LEFT)
this.v_paddle.startLeft();
else if (p_event.keyCode == KEY_RIGHT)
this.v_paddle.startRight();
},

// An event observer:
// It is called whenever a "stop paddle moving event" is signalled.
o_stop_paddle_moving:
function(p_event)
{ this.v_paddle.stop();
},

//////////////////////////////////////////////////////////////////////////////
// view
//////////////////////////////////////////////////////////////////////////////

// Clears the canvas and redraws all sprites (ball and paddle).
m_draw:
function()
{ this.v_context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

this.v_ball.draw();
this.v_paddle.draw();
},

// Displays information on the HTML page.
m_info:
function (p_info)
{ document.getElementById("d_info").firstChild.nodeValue = p_info; },

// An event observer:
// It is called every 1000/FPS seconds, but only when the game has been started.
o_redraw:
function()
{ // collision detection
var l_exit = this.v_collision.handleCollision();

if (l_exit == EVENT_EXIT)
{ this.o_start_stop_game();
return;
};

if (l_exit == EVENT_SCORE)
{ // Raise the score and display it.
this.v_score++;
this.m_info("Punkte: " + this.v_score);
};

// Move the ball and paddle.
this.v_ball.move();
this.v_paddle.move();

// Redraw the canvas.
this.m_draw();
},

//////////////////////////////////////////////////////////////////////////////
// end of prototype
//////////////////////////////////////////////////////////////////////////////
};
</source>

'''Beachte:''' Auch in den Methodendefinitionen musste der
„<code>this</code>/<code>self</code>-Hack“ mehrfach angewandt werden.
Man überlege sich in allen Fällen, warum dies notwendig ist.

Um das Problem nachzuvollziehen, sollten Sie die Trace-Anweisung
<code>console.log(this);</code> in der Methode <code>o_start_paddle_moving</code>
(in Ihrer Anwendung oder in der Musterlösung) aktivieren.

Starten Sie nun die Anwednung im Firefox und beobachten Sie die Text-Ausgabe im Firebug-Konsolen-Fester,
wenn Sie Ihren Schläger mittels Tastatur-Steuerung bewegen.

Aktivieren Sie anschließend im Rumpf der Methode <code>m_init_started</code>
die ersten beiden der folgenden Zeilen und kommentieren Sie die nachfolgenden vier Zeilen aus:

<source lang="javascript">
// document.onkeydown = this.o_start_paddle_moving;
// document.onkeyup = this.o_stop_paddle_moving;
document.onkeydown =
function(p_event){ self.o_start_paddle_moving(p_event); };
document.onkeyup =
function(p_event){ self.o_stop_paddle_moving(p_event); };
</source>

Aus obigem Code wird also:
<source lang="javascript">
document.onkeydown = this.o_start_paddle_moving;
document.onkeyup = this.o_stop_paddle_moving;
// document.onkeydown =
// function(p_event){ self.o_start_paddle_moving(p_event); };
// document.onkeyup =
// function(p_event){ self.o_stop_paddle_moving(p_event); };
</source>

Starten Sie nun Ihre Anwendung erneut
und versuchen Sie den Schläger mittels Tastensteuerung zu bewegen.

Sie werden feststellen, dass die Methode <code>o_start_paddle_moving</code>
nun nicht mehr auf das <code>Main</code>-Objekt zugreift,
sondern auf das <code>index.html</code>-Objekt (welches JavaScript in der globalen Variablen <code>document</code> zur Verfügung stellt).
Die in diesem Objekt enthaltenen Methoden <code>onkeydown</code> und <code>onkeyup</code> werden von JavaScript
aufgerufen, sobald der Benutzer irgendeine Taste auf dem Keyboard drückt bzw. loslässt.
Da im <code>index.html</code>-Objekt das Objekt <code>v_paddle</code> nicht existiert, reagiert <code>MiniPong</code>
nun bei jedem Tastendruck mit einer Fehlermeldung.

In der ursprünglichen Version von <code>main.js</code> bestand dieses Problem noch nicht,
da alle Funktionen (wie z.B. <code>o_start_paddle_moving</code>) und Variablen global definiert wurde.
Im globalen Kontext bezieht sich <code>this</code> auch auf das globale Objekt.

=Erweiterung=

Erweitern Sie die Anwendung wiederum so, dass Sie zwei Schläger unabhängig voneinander
links und rechts am Bühnenrand bewegen können, d.h., dass zwei Spieler gegeneinander spielen können.
Jeder Spieler hat seinen eigenen Score. Der erste Spieler, der 7 Punkte erreicht, gewinnt.
(Vergleiche [[HTML5-Tutorium: Canvas: MiniPong 03#Erweiterung]])

{{TBD}}

[[Medium:MiniPong04aCanvas.png|miniatur|ohne|945px|Das Objektmodell von MiniPong 04a]]

'''Musterlösung''': <code>[http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/minipong/html5_canvas_minipong_04a/WebContent/index.html Minipong 4a]</code>
([http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/minipong/html5_canvas_minipong_04a SVN-Repository])

=Verbesserungsmöglichkeiten=

Die Code-Qualität von <code>MiniPongCanvas04</code> hat sich gegenüber
<code>[[HTML5-Tutorium: Canvas: MiniPong 03#Weitere_Verbesserungsm.C3.B6glichkeiten|MiniPongCanvas03]]</code>
vor allem hinsichtlich der Modularität leicht gebessert. Es besteht allerdings weiterer Verbesserungsbedarf.

{{Codequalität
| application = MiniPongCanvas04
| readability = 4
| writability = 6
| continuity = 4
| customizability = 4
| dry = 3
| demeter = 5
| verifiability = 2
| interfaces = 6
| contract = 6
| liskov = 6
| modularity = 3
}}

==Das Prinzip der „[[Programmierprinzipien#Verst.C3.A4ndlichkeit.2C_Comprehesibility.2C_Lesbarkeit.2C_Readability|Verständlichkeit/Lesbarkeit]]“==

{{TBD}}

==Das Prinzip der „[[Programmierprinzipien#Schreibbarkeit.2C_Writability|Schreibbarkeit]]“==

{{TBD}}

==Das Prinzip der „[[Programmierprinzipien#Stetigkeit.2C_Continuity|Stetigkeit]]“==

{{TBD}}

==Das Prinzip der „[[Programmierprinzipien#Konfigurierbarkeit.2C_Customizability|Konfigurierbarkeit]]“==

{{TBD}}

==Das Prinzip „[[Don't repeat yourself]]“==

{{TBD}}

==Das „[[Programmierprinzipien#Gesetz_von_Demeter.5B5.5D.2C_Law_of_Demeter.2C_LoD|Gesetz von Demeter]]“==

{{TBD}}

==Das Prinzip der „[[Programmierprinzipien#.C3.9Cberpr.C3.BCfbarkeit.2C_Verifiability|Überprüfbarkeit]]“==

{{TBD}}

==Das Prinzip „[[Programmierprinzipien#Benutze_Integrit.C3.A4tsbedingungen.2C_Make_Use_of_Integrity_Constraints.2C_Design_by_Contract.5B2.5D|Design by Contract]]“==

{{TBD}}

==Das „[[Programmierprinzipien#Liskovsches_Substitutionsprinzip.5B3.5D.2C_LSP.2C_Ersetzbarkeitsprinzip.2C_Liskov_substitution_principle.5B4.5D|Liskovsche Substitutionsprinzip]]“==

{{TBD}}

==Das Prinzip der „[[Programmierprinzipien#Modularit.C3.A4t.2C_Modularity.2C_Teile_und_herrsche.2C_Divide_et_impera|Modularität]]“==

{{TBD}}

=Quellen=
<references/>
<ol start = "2">
<li>{{Quelle|Braun, H. (2011): Webanimationen mit Canvas}}</li>
<li>{{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>

=Fortsetzung des Tutoriums=

Sie sollten nun das [[HTML-Tutorium: SVG: Hello World|Hello-World-SVG-Tutorium]] bearbeiten, sofern Sie dies noch nicht gemacht haben.
Anderenfalls können Sie gleich mit dem [[HTML-Tutorium: SVG: MiniPong|Minipong-SVG-Tutorium]] forfahren.
[[Kategorie: HTML5-Tutorium: Canvas: MiniPong]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]

Model-View-Controller-Service-Paradigma

2012-11-20T07:38:03Z

Rayza: /* Beispiel Warenkorb */

{{MVC:Menü}}
=Definition=
[[Medium:MVCS-Module 01.png|gerahmt||rechts|MVCS-Module]]
Als [[Model-View-Controller-Service-Paradigma]]
(engl. [[GlossaryWiki:Model-view-controller-service paradigm|Model-view-controller-service paradigm]]) oder
[[Model-View-Controller-Service-Paradigma|-Architektur]]
(engl. [[GlossaryWiki:Model-view-controller-service paradigm|architecture]]),
kurz [[Model-View-Controller-Service-Paradigma|MVCS-Paradigma]], [[Model-View-Controller-Service-Paradigma|MVCS-Architektur]]
oder auch nur [[Model-View-Controller-Service-Paradigma|MVCS]], bezeichnet man ein [[Architekturmuster]], bei der eine [[Komponente (UML)|Anwendungs-Komponente]] in vier eigenständige Module unterteilt wird:
[[Model-View-Controller-Service-Paradigma/Model|Model]] (Modell), [[Model-View-Controller-Service-Paradigma/View|View]] (Darstellung, Präsentation),
[[Model-View-Controller-Service-Paradigma/Controller|Controller]] (Steuerung) und [[Model-View-Controller-Service-Paradigma/Service|Service]] (Service, Zugriff auf externe Daten).

==Model (Modell)==
Ein [[Model-View-Controller-Service-Paradigma/Model|MVCS-Modell]] (engl. [[GlossaryWiki:Model-view-controller-service paradigm/model|MVCS model]])
einer [[Model-View-Controller-Service-Paradigma|MVCS]]-[[Anwendung]]
dient zur Speicherung bestimmter Daten, d.h. zur Speicherung von Teilen des aktuellen Zustands der Anwendung.

Ein MVCS-Modell kann weitere Aufgaben übernehmen:

* anderen Modulen Zugriff auf die Zustandsdaten gewähren
* andere Module über Änderungen informieren (meist mittels des [[Observer-Pattern]]s)
* Umsetzung der Komponentenlogik

==View (Darstellung, Präsentation)==
[[Model-View-Controller-Service-Paradigma/View|MVCS-Views]] (engl. [[GlossaryWiki:Model-view-controller-service paradigm/view|MVCS views]]) sind die grafischen, akustischen, haptischen und olfaktorischen Schittstellen einer [[Model-View-Controller-Service-Paradigma|MVCS]]-[[Anwendung]].
Sie „visualisieren“ Daten, die in [[Model-View-Controller-Service-Paradigma/Model|Modell]]en der Anwendung enthalten sind.

Eine MVCS-View kann weitere Aufgaben übernehmen:

* bei Daten-Änderungen in den zugehörigen [[Model-View-Controller-Service-Paradigma/Model|Modell]]en der Anwendung die View-Repräsentation dieser Daten automatisch anpassen
* Benutzeraktionen, die über grafische Eingabeelemente – wie Textfelder oder Buttons – erfolgen, an einen [[Model-View-Controller-Service-Paradigma/Controller|Controller]] weiterleiten
* Visualisierung von Status- und Fehlermeldungen von Controllern

==Controller (Steuerung)==
[[Model-View-Controller-Service-Paradigma/Controller|MVCS-Controller]]
(engl. [[GlossaryWiki:Model-view-controller-service paradigma/controller|MVCS controllers]]) dienen zur Steuerung einer [[Model-View-Controller-Service-Paradigma|MVCS]]-[[Anwendung]]. Dazu nimmt ein Controller Eingaben aus verschiedensten Quellen entgegen (z.B. Sensor-Daten oder Daten, die ein Benutzer über eine beliebige Benutzer-Schnittstelle wie eine Tastatur oder eine Maus eingibt) und leitet diese bereinigt und normalisiert an
[[Model-View-Controller-Service-Paradigma/Model|Modelle]] und/oder [[Model-View-Controller-Service-Paradigma/Service|Servicemodule]] weiter.

Ein MVCS-Controller kann weitere Aufgaben übernehmen:

* Verarbeitung von Systemsignalen, wie z.B. einer Systemuhr (z.B. „Spielzeit ist abgelaufen“)
* Umsetzung der Komponentenlogik

==Service==
Ein [[Model-View-Controller-Service-Paradigma/Service|Service]] (engl. [[GlossaryWiki:Model-view-controller-service paradigm/service|service]])
dient einer [[Model-View-Controller-Service-Paradigma|MVCS]]-[[Anwendung]] zur Kommunikation
mit der Außenwelt, d.h. mit Dienste-Anbietern wie [[Web-Server]]n, [[Datenbanksystem]]en oder auch [[Dateisystem]]en.
Die Kommunikation kann in beide Richtungen erfolgen: Services können sowohl Daten aus [[Model-View-Controller-Service-Paradigma/Model|Modell]]en auslesen und in externe
[[Repository|Repositories]] schreiben, als auch Daten aus externen Repositories lesen und in Modelle einfügen.

==Data Access Object==
{{TBD}}

==MVCS-Paradigma: Varianten (Definitionen nach [[Kowarschick (MMProg)]])==

[[Medium:VCSM-Schichtenarchitektur 01.png | gerahmt | rechts | Besipiel für eine VCSM-Schichtenarchitektur]]
===VCSM-Paradigma===
Ein MVCS-Paradigma wird '''VCSM-Paradigma''' genannt, wenn die vier zugehörigen Module folgende Schichtenarchitektur bilden:
''View'', ''Controller'', ''Service'', ''Model''.

Die vier Module einer MVCS-Komponente sind gemäß dem [[Schichtenparadigma]] in Ebenen angeordnet.
Die höheren Ebenen können auf tiefergelegene Ebenen zugreifen, aber nicht umgekehrt.

Die unserste Ebene enthält das Modell. Das zugehörige Modul weiß nichts von den über ihr liegenden Module und kann mit diesen nur mit
indirekt – z.B. durch Antworten auf [[Nachricht]]en oder mit Hilfe des [[Observer-Pattern]]s – kommunizieren.

Ein Servicemodul kennt nur die darunterliegende Modelle und kann nur auf diese zugreifen
(sowie i. Allg. auf externe Datenquellen, sofern es nicht nur Filterfunktionen wahrnimmt).

Ein Controllermodul kann entweder direkt auf ein Modellmodul zugreifen oder indirekt mit Hilfe eines Servicemoduls (zum Beispiel
um Daten aus einer externen Quelle zu laden, oder um zu überprüfen,
ob die entsprechenden Zugriffsrechte für eine Datenmanipulation überhaut gegeben sind).

Man beachte, dass in diesem Paradigma die Logik der Anwendung in den Controllern und nicht in den Modellen realisiert werden sollte,
da die Modelle keinen direkten Zugriff auf andere Module haben.

Eine View kommuniziert i. Allg. direkt nur mit Controllermodulen, um diesen Benutzeraktionen, die über die View erfolgen, mitzuteilen.
Ein direkter Zugriff auf ein Datenmodul ist nur dann notwendig, wenn die Nachrichten, die von den Datenmodulen verschickt werden,
nicht alle relevanten Informationen enthalten. Zugriffe auf Servicemodule sind nicht vorgesehen.

Der Benutzer stellt das „oberste Modul“ dar. Er kommuniziert nur mit View- und Controllermodulen.

[[Medium:CVMS-Schichtenarchitektur 01.png | gerahmt | rechts | Besipiel für eine CVMS-Schichtenarchitektur]]

===CVMS-Paradigma===

Ein MVCS-Paradigma wird '''CVMS-Paradigma''' genannt, wenn die drei zugehörigen Module folgende Schichtenarchitektur bilden:
''Controller'', ''View'', ''Model'' und ''Service''.

Die Controller-Module können direkt (z.B. via [[Unicast-Nachricht]]en) auf die View- und Modell-Module zugreifen,
die View-Module können direkt auf Modell-Module zugreifen und die Modell-Module können direkt mit Service-Modulen kommunizieren,
um Daten mit externen Repositories auszutauschen. Alle anderen „Zugriffe“ erfolgen nur indirekt
(i. Allg. als Antworten auf Unicast-Nachrichten, evtl. auch mittels [[Callback]]-Routinen).

Man beachte, dass in diesem Paradigma die Logik der Anwendung in den Controllern und nicht in den Modellen realisiert werden sollte,
da die Modelle keinen direkten Zugriff auf andere Module haben.

===MVCS-Multicast-Paradigma===
Ein MVCS-Paradigma wird MVCS-Multicast-Paradigma genannt, wenn alle Module nur indirekt, d.h. mit Hilfe
von [[Multicast-Nachricht]]en kommunizieren.

==MVCS-Pattern (Definitionen nach [[Kowarschick (MMProg)]])==

Wenn für ein MVCS-Paradigma – im Sinne eines [[Entwurfmusters]] – eine konkrete [[Klasse]]n- und [[Objekt]]-Struktur für die vier Module [[Model-View-Controller-Service-Paradigma/Model|Model]], [[Model-View-Controller-Service-Paradigma/View|View]], [[Model-View-Controller-Service-Paradigma/Controller|Controller]] und [[Model-View-Controller-Service-Paradigma/Service|Service]]
vorgegeben ist, spricht man von einem [[Model-View-Controller-Service-Pattern|MVCS-Pattern]].

===VCSM-Pattern===

Ein MVCS-Pattern, das ein VCSM-Paradigma realisiert, wird auch '''VCSM-Pattern''' genannt.

===MVCS-Multicast-Pattern===

Ein MVCS-Pattern, das nur auf Multicast-Nachrichten basiert, wird auch '''MVCS-Multicast-Pattern''' genannt.

= Der MVCS-Prozess =
[[Medium:MVCS-Prozess 01.png|gerahmt|rechts|Der MVCS-Prozess]]
Das MVCS-Paradigma erweitert das [[Model-View-Controller-Paradigma|MVC-Paradigma]] um die so genannte Servicemodule. Die Servicemodule übernehmen die Aufgabe, mit externen Anwendungen/Datenpools zu kommunizieren. Hierbei handelt es sich um eine Aufgabe, von der nicht klar ist, ob sie im MVC-Paradigma eher von den Modellmodulen oder den Steuerungsmodulen übernommen werden sollte. Externe Datenbestände gehören eigentlich zu Modell. Die Steuerung des Transports dieser Daten wäre allerdings eher eine Aufgabe der Steuermodule. Joe Berkovitz schlägt daher vor, für diese Aufgabe eigenständige Module zu etablieren. Die Aufgabe der Präsentationsmodule (Views) ändert sich nicht.

Über ein Steuermodul kann der Benutzer das Modell manipulieren, das heißt, dessen Zustand (und damit auch die zugehörigen Views) ändern. Er kann insbesondere veranlassen, dass die Daten des Modells – mit Hilfe eines Servicemoduls – an eine externe Anwendung weitergeleitet oder in einer externen Datenbank, XML-Datei o.Ä. dauerhaft gespeichert werden. Auch das Lesen von Daten aus einer externen Datenquelle kann auf diese Weise initiiert werden.

Es ist sogar möglich, das Modell mit Hilfe einer Servicekomponenten automatisch mit einem externen Datenpool zu synchronisieren. Hierbei kommt keine Steuerkomponente zum Einsatz.

== Beispiel Warenkorb==
In einer [[Warenkorb]]-Anwendung werden im Modell Daten über
den Warenkorb und den Besteller (sobald dieser eingeloggt ist) gespeichert: eine aktuelle Auswahl des Warenkataloges,
den Inhalt des Warenkorbs, der Gesamtpreis der Waren im Warenkorb, der Adresse des Besterller etc. Der Warenkatalog selbst wird
hingegen nicht im Modell, sondern in einer externen Datenbank abgelegt.

Die View visualisiert Elemente der aktuellen Auswahl des Warenkataloges (siehe Modell) mit Hilfe von Texten, Bildern und Videos.
Der Benutzer kann die Auswahl der visualierten Elemente durch Filter oder Navigation abändern, er kann
Elemente des Kataloges in seinen Warenkorb legen und dort wieder entfernen etc. Für all diese Aktionen werden
dem Benutzer in der View spezielle Eingabefelder ([[Checkbox]]es, [[Drop-Down-Menü]]s, [[Textfeld]]er, [[Link]]s etc.) präsentiert.
Jedes mal, wenn der Benutzer eine dieser Felder mit Hilfe der Maus oder der Tastatur bedient, leitet das
Darstellungsmodul eine entsprechende Nachricht an das zuständige Steuermodul weiter.

Das Steuermodul analysiert jeweils die gewünschte Aktion des Benutzers und führt die entsprechenden Änderungen am Modell durch.
Zum Beispiel kann sie veranlassen, die aktuelle Auswahl des Warenkataloges den Wünschen des Benutzers gemäß zu ändern,
indem sie das entsprechende Servicemodul veranlässt, die neuen Daten aus der Datenbank in das Modell zu übertragen.

Wenn der Benutzer zu guter Letzt eine Bestellung tätigt, veranlassst das Steuermodul,
dass die Bestellung aus dem Modell mit Hilfe eines Services an eine geeignete Anwendung weitergeleitet wird.

=CVMS-Prozess, Model 2=
[[Medium:CVMS-Prozess 01.png|gerahmt|rechts|CVMS-Prozess]]

Den meisten „Web Application Frameworks“ liegt heutzutage ein MVC-Paradigma zugrunde (vgl. [[Model-View-Controller-Paradigma/Umsetzungen|MVC-Paradigma/Umsetzungen]]).
Häufig wird das MVC-Paradigma dabei als [[Model-View-Controller-Service-Paradigma#CVMS-Paradigma|CVMS-Schichtenarchitektur]] realisiert. Beispielsweise wurde
in der Spezifikation von JSP 0.92<ref name="JSP 0.92">[http://www.kirkdorffer.com/jspspecs/jsp092.html#model JavaServer<sup>TM</sup> Pages<sup>TM</sup> – Specification 0.92]</ref><ref>[http://www.oracle.com/technetwork/articles/javase/servlets-jsp-140445.html Servlets and JSP Pages Best Practices]</ref>
das so genannte [[Model 2]] eingeführt, welches eine CVMS-Architektur beschreibt.

Bei einem CVMS-Prozess läuft die Kommunikation i. Allg. synchron ab (siehe Abbildung „CVMS-Prozess“):

Ein Client (wie z.B. ein Web-Browser) übermittelt an einen Controller eine Anfrage (1.)
– z.B. in Form einer URL plus weiteren Daten – und wartet dann auf eine Antwort (11.):
eine View, die er dem Benutzer präsentieren kann.
(Dies gilt sogar, wenn [[Ajax]] zu Einsatz kommt. Auch hier wartet der Client, bis die Anwort eingetroffen ist.
Die als Ergebnis gelieferte Teilview wird dann vom Client verwendet, um die aktuell dem Benutzer präsentierte View zu aktualisieren.)

Um eine Antwort generieren zu können, leitet der Controller die erhaltenen Daten an ein Modell weiter (2.).
Das Modell enthält dabei nicht nur typische [[Session]]-Daten – wie Session-ID, Benutzer-Daten, Warenkorb-Inhalt etc. –, sondern auch
Informationen, die dem Benutzer präsentiert werden sollen – wie z.B. bestimmte Waren, für die sich
der Benutzer aktuell interessiert. Das Modell kann mit Hilfe von Service-Modulen Daten aus externen Datenbeständen
(Datenbanken, Web-Services, XML-Repositories etc.) nachladen oder auch Informationen dorthin übertragen (3., 4. und 5.).

Sobald das Modell die Daten vollständig verarbeitet hat,
meldet es den Erfolg oder Misserfolg dieser Verarbeitung an den Controller (6.).
Daraufhin stößt der Controler die Erzeugung (das Rendering) einer View an (7.). Welche View erzeugt wird, hängt dabei
von den Daten (insbesondere der URL) ab, die dem Controller vom Client übergeben wurden (1.), sowie von der Antwort des Modells (6.).
Wenn das Modell beispielsweise meldet, dass die Berechtigung zum Zugriff auf die gewünschten Daten fehlt, wird der Controller
eine Login-View generieren, anderenfalls wird er eine View erzeugen, die die gewünschten Informationen präsentiert.

Der View-Renderer kann beliebig oft auf bestimmte Modelle zugreifen (8.), um Daten zu erfragen (9.), die in die View integriert werden.
Sobald der Rendervorgang abgeschlossen ist, erhält der Controller die erzeugte View (10.). Der Controller leitet diese
als Antwort an den Client zurück (11.).

==Beispiel „JSP“==

siehe [[Model-View-Controller-Paradigma#Beispiel_.E2.80.9EJSP.E2.80.9C|CVM-Prozess: Beispiel „JSP“]]

= Kommunikation zwischen zwei MVCS-Komponenten=
Genauso wie mehrere [[Model-View-Controller-Paradigma# Kommunikation_zwischen_zwei_MVC-Komponenten|MVC-Komponenten]] miteinander kommunizieren können, können auch mehrere MVCS-Komponenten miteinander kommunizieren.

Viele Anwendungen bestehen aus mehreren MVCS-Komponenten:
Eine oder mehrere Kernanwendungen (Domain-Komponenten) sowie einer Rahmenanwendung (Frame-Komponente), die den Zugang zu und zwischen den Kernanwendungen steuert.
In diesem Fall gibt es mehrere relativ unabhängige MVCS-Prozesse. Die äußeren Komponenten (wie z.B. die Rahmenkomponente) können dabei mit den inneren Komponenten (wie z.B. die Kernkomponenten) kommunizieren.
Der umgekehrte Weg sollte vermieden werden, damit Kernkomponenten problemlos in andere Umgebungen integriert werden können.
[[Medium:MVCS-Prozess 02.png|gerahmt|links|MVCS-Prozess 2 (mit Trennung in äußere und innere MVCS-Komponenten)]]

Eine typische Aufgabe eines Rahmenservices ist es, XML-Dateien zum Initialisieren des Systems einzulesen. Die Kernservice greifen dagegen häufig auf Datenbanken oder Web-Anwendungen zu, die bestimmte Daten des Kernmodells dauerhaft speichern (vgl. obiges Beispiel).

==Beispiel „Spiel mit Highscore-Verwaltung“==
Wenn man ein „Spiel mit Highscore-Verwaltung“ realisieren möchte, sollte man zwei unanhängige Kernanwendungen schreiben.
Das Spiel selbst und eine spielunabhängige Highscore-Verwaltung. Die Rahmenanwendung verknüpft diese beiden Anwendungen.

Die Rahmenanwendung liest beispielsweise bei
Spielende die erreichten Punkte aus dem Spielmodell aus und leitet diese an das Highscore-Modell weiter.
Eine weitere Möglichkeit wäre, dass die Rahmenanwendung über die Highscore-Anwendung ermittelt, ob der Spieler schon mindestens fünf Level erfolgreich gespielt hat. Nur in diesem Fall gewährt sie den Zugang zum Trainingsmodus des Spiels.

=Quellen=
<ol>
<li>{{Quelle|Berkovitz, Joe (2006): An architectural blueprint for Flex applications}}</li>
<li>{{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>

=Siehe auch=
*{{Vgl|Model-View-Controller-Paradigma}}
*{{Vgl|Logic-Data-View-Controller-Service-Paradigma}}<noinclude>[[Kategorie:Objektorientierte Programmierung]]
[[Kategorie:Glossar]][[Kategorie:MVC]]
[[en:MVCS]]
[[Kategorie:Kapitel:Multimedia-Programmierung]]
</noinclude>

Programmierprinzipien

2012-11-13T07:51:47Z

Rayza: /* Software-Eigenschaften zur Erfüllung der beiden Ziele */

{{Qualität
|correctness = 5
|extent = 4
|numberOfReferences = 2
|qualityOfReferences = 3
|conformance = 5
}}

'''Anmerkung''': In diesem Artikel haben die beiden Folgenrungspfeile „→“ und „⇒“ folgende Bedeutungen:
:⇒: „hat zur Folge“
:→: „trägt bei zu“, „verbessert“, „erhöht“

=Zweck=
Um nützliche und dennoch preiswerte [[Programm]]e und [[Anwendung]]en erstellen zu können, sollte man eine Reihe von [[Programmierprinzipien]] beachten.

Bevor die Programmierprinzipen näher beschrieben werden können, werden zunächst die Ziele genauer spezifiziert, die mit diesen Prinzipien erreicht werden sollen.

=Ziele=

Ziel eines jeden Softwareentwicklungs-Vorhaben sollte die Erstellung von Software sein, die zwei Eigenschaften aufweist:

; nützlich (useful): Die Software sollte für den Benutzer nützlich sein.
; preiswert (inexpensive): Die Software sollte so geringe Kosten und Folgekosten verursachen wie möglich.

=Software-Eigenschaften zur Erfüllung der beiden Ziele=

Um die beiden vorgenannten Ziele zu erreichen, sollte ein Softwarepaket folgende Eigenschaften haben:

; spezifiziert (specified): Um die Nützlichkeit und die Korrektheit des Softwarepakets beurteilen zu können, sollte eine Spezifikation vorliegen, die detailliert die Aufgaben und Eigenschaften des Paketes beschreibt.

⇒ Nützlichkeit (ist abschätzbar)
; korrekt (correct): Die Implementierung des Paketes sollte korrekt sein, es sollte also die Spezifikation in allen Punkten erfüllen.

⇒ keine Kosten durch falsches oder unerwartetes Verhalten
; robust (robust): Das Softwarepaket sollte auch in abnormalen (nicht-spezifizierten) Situationen stabil laufen.

⇒ keine Kosten durch Inkonsistenzen

⇒ geringe Kosten bei Bedienungsfehlern und Systemausfällen
; benutzbar (usable): Das Softwarepaket sollte einfach zu erlernen und zu benutzen sein.

⇒ Nützlichkeit wird verbessert

⇒ geringe Schulungskosten

⇒ fehlerhafte Nutzung kommt nur selten vor und hat daher nur selten Kosten zu Folge

⇒ keine Kosten durch frustierte Benutzer
;sicher (secure): Unautorisierter Zugriff auf Daten oder Programme sollte unmöglich sein.

⇒ keine Kosten durch Sicherheitsmängel
;effizient (efficient): Das Softwarepakt sollte eine möglichst gute Laufzeit- und Speichereffizienz aufweisen, d.h. die vorhandenen Ressourcen möglichst gut ausnutzen.

⇒ geringe Personalkosten durch geringe Wartezeiten

⇒ geringe Kosten durch geringe Hardwareanforderungen
; wartbar (maintainable): Das Softwarepaket sollte leicht an neue Gegebenheiten angepasst werden können. Fehler sollten leicht behoben werden können (da sie sich nie ganz vermeiden lassen).

⇒ geringe Wartungskosten

Für die Eigenschaft „wartbar“ gibt es drei Spezialfälle, die hier gesondert genannt werden sollen:
; kompatibel (compatible): Das Softwarepaket sollte komaptibel zu bestehenden Systemen sein, es sollte also standardisierte Schnittstellen unterstützen.

⇒ geringe Intergrations- und Anpassungskosten
; portabel (portable): Das Softwarepaket sollte einfach auf neue Systeme portiert werden können.

⇒ geringe Kosten bei Änderung der Ablaufumgebung
; erweiterbar (extensible): Erweiterungen der Spezifikation sollten schnell implementiert werden können.

⇒ geringe Wartungskosten

=Programmierprinzipien=

Um die vorgenannten Ziele zu erreichen, sollten folgende [[Programmierprinzipien]] beachtet werden:

==[[Verständlichkeit]], Comprehesibility, Lesbarkeit, Readability==
;Schreibe lesbaren und verständlichen Code.: Der Programmcode sollte so einfach wie möglich gelesen und verstanden werden können. Das heißt, der Code sollte sauber formartiert werden, es sollten sprechende Bezeichner verwendet werden, es sollten sinnvolle Kommentare eingefügt werden etc. Ein erfahrender Programmierer sollte die Bedeutung der einzelnen Anweisungen, Operationen, Defintionen etc. problemlos erfassen können.

→ Überprüfbarkeit (durch Programmierer und nicht nur durch Compiler u.Ä.) (→ Korrektheit, Robustheit)

→ Wartbarkeit (da die Programme auch von anderen Programmierern verstanden werden)

→ Erweiterbarkeit (da die Programme auch von anderen Programmierern verstanden werden)

==[[Schreibbarkeit]], Writability==
;Verwende eine Programmiersprache und -umgebung, die dich beim Schreiben des Codes unterstützt.: Der Programmcode sollte so einfach wie möglich geschrieben werden können. Zum einen sollte es die Programmiersprache ermöglichen, einfachen und eleganten Code zu schreiben. Und zum anderen sollten die Programmwerkzeuge einen bei der Erstellung des Codes möglichst gut unterstützen.

Vorteile:
* Code kann schneller erstellt werden.
* Code kann automatisch formatiert werden.
* Fehler/Warnungen werden von der Programmierumgebung zeitnah gemeldet.
* Fehler werden vermieden (wenn beispielsweise Code-Fragmente automatisch generiert werden).

→ Korrektheit

→ Verständlichkeit (→ Korrektheit, Robustheit, Wartbarkeit, Erweiterbarkeit)

==[[Stetigkeit]], Continuity==
;Schreibe stetigen Code.: Schreibe den Code so, dass kleine Änderungen an der Spezifikation auch nur kleine Änderungen am Code zur Folge haben.

→ Wartbarkeit (der Code kann schnell an neue Gegebenheiten angepasst werden)

→ Erweiterberkeit (der Code kann schnell an neue Gegebenheiten angepasst werden)

→ Wiederverwendbarkeit (der Code kann schnell an neue Gegebenheiten angepasst werden)

==[[Konfigurierbarkeit]], Customizability==
;Schreibe konfigurierbaren Code.: Konstante Werte sollten im Allgemeinen nicht direkt in den Code eingefügt werden, sondern als konstante Werte separat definiert werden (Ausnahme: triviale Konstanten, die sich sicher nie ändern werden, wie z.B. Vergleiche mit dem Wert <code>0</code>). Konstanten, die das Programmverhalten beeinflussen, sollten im Allgemeinen bei Programmstart aus einer Konfigurationsdatei ausgelesen werden.

→ Stetigkeit (→ Wartbarkeit, Erweiterbarkeit, Wiederverwendbarkeit)

==[[Don't repeat yourself]], DRY<ref>{{Quelle|Hund, Thomas (2003)}}</ref>==
;Wiederhole dich nicht.: Code sollte nicht dupliziert und anschließend nur marginal modifiziert werden.

→ Stetigkeit (→ Wartbarkeit, Erweiterbarkeit, Wiederverwendbarkeit)

→ Verständlichkeit (da weniger Code existiert) (→ Korrektheit, Robustheit, Wartbarkeit, Erweiterbarkeit)

→ Robustheit (da keine inkonsitenten Änderungen an mehreren Stellen möglich sind)

==[[Gesetz von Demeter]]<ref>{{Quelle|Lieberherr, Holland (1989)}}</ref>, Law of Demeter, LoD==
;„Sprich nur zu deinen nächsten Freunden.“: Ein [[Objekt]] sollte nur [[Methode]]n von Objekten aufrufen, die es „persönlich“ kennt:
*Objekte, die in [[Zustandsvariable]]n gespeichert sind
*Objekte, die über direkte [[Beziehung|direkten Beziehungen]] zugänglich sind
*Objekte, die mittels Parametern beim Methodenaufruf übergeben wurden
*Objekte, die das aktuelle Objekt selbst erzeugt hat

→ Stetigkeit (→ Wartbarkeit, Erweiterbarkeit, Wiederverwendbarkeit)

→ Verständlichkeit (da die Anzahl der Kommunikationspartner geringer ist) (→ Korrektheit, Robustheit, Wartbarkeit, Erweiterbarkeit)

==[[Überprüfbarkeit]], Verifiability==
;Schreibe überprüfbaren Code.: Die Korrektheit eines Softwarepakets sollte plattformunabhängig sein und automatisch überprüft werden können. Viele Programmierparadigmen und auch Projekttechniken verlangen zu diesem Zweck, dass gleichzeitig mit der Software auch passende Softwaretests implementiert werden. Noch besser ist es, wenn die Semantik des Programmes formal spezifiert und überprüft werden kann ([[Abstrakter Datentyp|Abstrakte Datentypen]], [[Integritätsbedingung]]en, ...)

→ Korrektheit (insbesondere, wenn die Erfüllung der Spezifikation [[Verifikation|verifiziert]], d.h. formal nachgewisen wird)

→ Robustheit (wenn die Überprüfungen auch durchgeführt werden)

→ Portierbarkeit (wegen der Plattformunabhängigkeit)

==Benutze [[Schnittstelle]]n, Make Use of Interfaces==
;Benutze Schnittstellen zur Kommunikation mit Objekten, Modulen etc.: Die Verwendung von Schnittstellen zum Zugriff auf und zur Modifikation von Daten/Informationen (an Stelle eines direkten Zugriffes) ermöglicht es, Code lokal zu ändern, ohne dass dies Auswirkungen auf andere Objekte, Module etc. hat (solange sich die Schnittstellen nicht ändern).

→ Spezifikation

→ Verständlichkeit (→ Korrektheit, Robustheit, Wartbarkeit, Erweiterbarkeit)

→ Stetigkeit (→ Wartbarkeit, Erweiterbarkeit, Wiederverwendbarkeit)

→ Überprüfbarkeit (→ Korrektheit, Robustheit, Portierbarkeit)

→ Modularität

==Benutze [[Integritätsbedingung]]en, Make Use of Integrity Constraints, Design by Contract<ref name="Meyer">{{Quelle|Meyer, B. (1997): Object-oriented Software Construction}}</ref>==
;Benutze und beachte Integritätsbedingungen.: Wann immer möglich sollten Integritätsbedingungen — Vorbedingungen (pre conditions), Nachbedingungen (post conditions), Invarianten (invariants), Zusicherungen (Assertions), Typdefinitionen etc. — definiert und deren Einhaltung auch überprüft werden.

→ Spezifikation

→ Korrektheit

→ Robustheit

→ Überprüfbarkeit (→ Korrektheit, Robustheit, Portierbarkeit)

==[[Liskovsches Substitutionsprinzip]]<ref>{{Quelle|Liskov, Wing (1993)}}</ref>, LSP, Ersetzbarkeitsprinzip, Liskov substitution principle<ref>{{Quelle|Wikipedia (EN): Liskov substitution principle}}</ref>==
;Überschreibe Methoden nicht mit unerwartetem Code.: Eine Methode sollte nicht so überschrieben werden, dass sich ein Objekt einer [[Abgeleitete Klasse|abgeleiteten Klasse]] überraschend anders verhält, als man es aufgrund der Definition der Basisklasse erwarten würde. Mit anderen Worten: Methoden, die in abgeleiteten Klassen neu definiert werden, müssen alle [[Integritätsbedingung]]en (d.h. die Spezifikation) der Basisklasse beachten. Dieses Prinzip kann also ein Spezialfall des vorangehenden Prinzips angesehen werden.

→ Spezifikation

→ Korrektheit

→ Robustheit

==Modularität, Modularity, Teile und herrsche, Divide et impera==
;Teile und herrsche: Ein komplexes Problem (Vorhaben, Projekt, ...) kann man nur dadurch in den Griff bekommen, dass man es solange in kleinere, möglichst unabhängige Teilprobleme (Teilvorhaben, Phasen, Vorgänge, ...) zerlegt, bis diese lösbar (= beherrschbar) sind. Ein Programm sollte daher '''modularisiert''', d.h. in einzelne '''Module''' unterteilt werden.

===Fünf Anforderungen von Bertrand Meyer===
Bertrand Meyer war einer der ersten, der die Bedeutung der Modularität erkannt und beschrieben hat (vgl. [[Meyer (1997)]]).
Er hat insgesamt fünf Anforderungen formuliert, die bei der Definition von Modulen beachtet werden sollten:<ref name="Meyer"/>

====Modulare Zerlegbarkeit, modular decomposability====
;Zerlege ein Problem in unterschiedliche, seperat lösbare Teilprobleme.

→ Verständlichkeit (→ Korrektheit, Robustheit, Wartbarkeit, Erweiterbarkeit)

→ Wiederverwendbarkeit (wenn die Module weitgehend unabhängig voneinander sind)

→ Erweiterbarkeit

====Modulare Zusammenfügbarkeit, modular composability====
;Module sollten in möglichst vielen (unterschiedlichen) Situationen/Anwendungen eingesetzt werden können.
:Das heißt, Module sollten auf unterschiedliche Art und Weise zu neuen Funktionseinheiten zusammengefügt werden können.

→ Wiederverwendbarkeit

→ Erweiterbarkeit

→ Wartbarkeit

→ Überprüfbarkeit (→ Korrektheit, Robustheit, Portierbarkeit)

====Modulare Verständlichkeit, modular understandability====
;Die Aufgaben eines Moduls sollten verstanden werden, ohne dass man viele andere Module kennen muss.

→ Verständlichkeit (→ Korrektheit, Robustheit, Wartbarkeit, Erweiterbarkeit)

''Dies ist ein Spezialfall des Prinzips „[[#Verst.C3.A4ndlichkeit.2C_Comprehesibility.2C_Lesbarkeit.2C_Readability|Verständlichkeit]]“.''

====Modulare Stetigkeit, modular continuity====
;Kleine Änderungen an den Anforderungen sollten nur Änderungen an einer geringen Zahl von Modulen zur Folgen haben.
:Im besten Fall ist nur ein einziges Modul betroffen.

→ Stetigkeit (→ Wartbarkeit, Erweiterbarkeit, Wiederverwendbarkeit)

''Dies ist ein Spezialfall des Prinzips „[[#Stetigkeit.2C_Continuity|Stetigkeit]]“.''

====Modulare Robustheit, modular protection====
;Ein Modul sollte alle abnormalen Fälle selbst behandeln.
:Das heißt, es sollte sich nicht darauf verlassen, dass ein anderes Modul die Schnittstellen nur gemäß der Spezifikation verwendet.

→ Korrektheit

→ Robustheit

→ Überprüfbarkeit (→ Korrektheit, Robustheit, Portierbarkeit)

→ Wartbarkeit

===Sechs Prinzipien von Bertrand Meyer===

Aus diesen Forderungen leitet Bertrand Meyer sechs Prinzipien ab, die bei der Entwicklung von Modulen beachtet werden sollten.

====Syntaktische Einheiten, syntactical units====
;Module sind syntaktische Einheiten.: Module sollten unabhängig voneinander übersetzt und in Bibliotheken zur Verfügung gestellt werden können.

→ Wiederverwendbarkeit

→ Korrektheit

→ Robustheit

→ Überprüfbarkeit (→ Korrektheit, Robustheit, Portierbarkeit)

→ Wartbarkeit

====Wenige Schnittstellen, few interfaces====
; Module sollten wenige Schnittstellen haben.: Module sollten mit so wenig anderen Modulen kommunizieren wie möglich.

→ Wiederverwendbarkeit

→ Verständlichkeit (→ Korrektheit, Robustheit, Wartbarkeit, Erweiterbarkeit)

====Schlanke Interfaces, small interfaces====
; Module sollten schlanke Schnittstellen haben.: Schnittstellen sollten nicht mit Funktionalität überfrachtet sein. Das heißt, zwei Module sollten über möglichst umfangarme Schnittstellen miteinander kommunizieren.

→ Wartbarkeit

→ Überprüfbarkeit (→ Korrektheit, Robustheit, Portierbarkeit)

====Explizite Schnittstellen, explicit interfaces====
; Module sollten über explizite Schnittstellen kommunizieren.: Ein Modul sollte nicht über globale Variablen oder andere implizite Kommunikationswege mit anderen Modulen kommunizieren, sondern über explizite Schnittstellen.

→ Verständlichkeit (→ Korrektheit, Robustheit, Wartbarkeit, Erweiterbarkeit)

====(Daten-)[[Kapselung]], Geheimnisprinzip, Encapsulation, information hiding====
;Informationen sollten in Modulen gekapselt sein.: Jede Information, die nicht notwendig ist, um die Aufgaben bzw. die Funktionalität eines Moduls zu verstehen bzw. zu benutzen, sollte von außen nicht zugänglich sein.

→ Korrektheit

→ Robustheit

→ Überprüfbarkeit (→ Korrektheit, Robustheit, Portierbarkeit)

→ Wiederverwendbarkeit

→ Verständlichkeit (→ Korrektheit, Robustheit, Wartbarkeit, Erweiterbarkeit)

====Offen-geschlossen-Prinzip, open-closed principl)====
; Module sollten sowohl offen, als auch geschlossen sein.: Module sollten sowohl offen für Veränderungen, als auch abgeschlossen gegenüber Veränderungen sein. Da heißt, ein funktionierendes Modul sollte möglichst nicht mehr verändert werden, aber andererseits sollte es problemlos möglich sein, ein Modul an neue Gegebenheiten anzupassen. In objektorientierten Sprachen wird dies vor allem durch [[Vererbung]], [[Überschreiben|Überschreiben von Methoden]] und die Verwendung von [[Abstrakte Klasse|Abstrakten Klassen]] (insbesondere [[Interface]]s) erreicht.

→ Wiederverwendbarkeit (wenn Module offen sind)

→ Erweiterbar (wenn Module offen sind)

→ Robustheit (wenn getestete Module geschlossen sind)

→ Wartbarkeit (wenn funtionierende Module geschlossen sind; jede Änderung an einem Modul hat eventuell weitere Änderungen zu Folgen → dies soll nach Möglichkeit vermieden werden)

===Weitere Modul-Prinzipien===

Seit den wegweisenden Arbeiten von Bertrand Meyer aus den späten 80er-Jahren wurden weitere Prinzipien entwickelt, die die Definition von Modulen betreffen.

====[[Entwurfsmuster|Verwende Design Patterns]]<ref>{{Quelle|Gamma et al. (1995)}}</ref>====
;Verwende die in [[Entwurfsmuster]]n (design patterns) definierten Modul-„Schablonen“.:In der Programmierung gibt es viele Aufgaben, die immer wiederkehren, wie zum Beispiel das Durchlaufen einer Menge von Objekten. Für zahlreiche derartige Aufgaben gibt es praxiserprobte Modul-„Schablonen“. Diese beschreiben, welche Schnittstellen, Klassen, Objekte etc. benötigt werden, um die jeweilige Aufgabe zu lösen.

→ Wiederverwendbarkeit

→ Korrektheit

→ Robustheit

→ Verständlichkeit (→ Korrektheit, Robustheit, Wartbarkeit, Erweiterbarkeit)

====[[Separation of concerns]]<ref>{{Quelle|Wikipedia (EN): Separation of concerns}}</ref>====
;Jede Aufgabe wird von genau einem Modul erfüllt.: Man also die „Verantwortlichkeiten“ unter den Modulen aufteilen, sonst gehen die Vorteile der Modularisierung zum Teil wieder verloren.

====[[Single responsibility principle]]<ref>{{Quelle|Wikipedia (EN): Single responsibility principle}}</ref>====
;Jede Aufgabe wird von genau einem Modul erfüllt und jedes Modul erfüllt genau eine Aufgabe.:Bei der [[objektorientierten Programmierung]] treibt man die Modularisierung manchmal sogar so weit, dass nicht nur für jede Aufgabe höchstens ein Objekt zuständig ist (Separations of Conerns), sondern dass umgekehrt auch jedes Objekt für genau eine Aufgabe zuständig ist (Single responsibility principle).
:Das heißt, für jedes Modul gibt es genau einen Grund, warum es geändert werden muss: Die eine Aufgabe, die es hat, ändert sich.

→ Robustheit

====[[Interface-Segregation-Prinzip]]<ref>{{Quelle|Martin, R.C. (1996): The Interface Segregation Principle}}</ref>, Interface segregation principle====
;Zu große Interfaces sollten in mehrere Interfaces aufgeteilt werden.: Ein Modul, das ein Interface benutzt, sollte nur diejenigen Methoden präsentiert bekommen, die sie auch wirklich benötigt. Dieses Prinzip formuliert eine konkrete Möglichkeit, wie man die von Meyer geforderten schlanken Schnittstellen realisieren kann.

→ Wartbarkeit

→ Wiederverwendbarkeit

→ Überprüfbarkeit (→ Korrektheit, Robustheit, Portierbarkeit)

=Quellen=

<references/>
<ol>
<li value="9">{{Quelle|Wintersteiger, A.; Mathis, Ch. (2011): Clean Code – Prinzipien bei der Entwicklung von sauberem Code}}</li>
<li>{{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>

=Siehe auch=

#{{Vgl|Softwaretechnik}}
#{{Vgl|Wikipedia (EN): DRY}}
#[[WikipediaEn:Category:Programming_principles]]
#[[Wikipedia:Prinzipien Objektorientierten Designs]]

[[Kategorie:Programmierprinzip]]
[[Kategorie:Programmierung]]
[[Kategorie:HowTo]]
[[en:Programing principles]]

HTML-Tutorium: SVG: Hello World 02

2012-10-24T19:27:32Z

Rayza: /* HTML 4 vs. HTML5 */

{{HTML-Tutorium:SVG:HelloWorld:Menü}}
'''Musterlösung''': [http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_04/WebContent/hallo.html <code>hallo.html</code>]

(SVN-Repositories: [http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_02 Pendant zu Teil 2 des Canvas-Tutoriums],
[http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_03 Pendant zu Teil 3],
[http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_04 Pendant zu Teil 4])

=Voraussetzung=

Sie sollten die Inhalte der Tutorien [[HTML5-Tutorium: Canvas: Hello World 02]], [[HTML5-Tutorium: Canvas: Hello World 03|Hello World 03]] und [[HTML5-Tutorium: Canvas: Hello World 04|Hello World 04]]
sowie des Tutoriums [[HTML-Tutorium: SVG: Hello World 01]] kennen.

=Ziel: Ausgabe von „Hallo <Benutzername>!“ als SVG-Grafik=

Die in [[HTML-Tutorium: SVG: Hello World 01]] erstellte Hello-World-Anwendung wird so umgeschrieben,
dass ein Benutzer seinen Namen eingeben kann und er nach Klick auf den <code>OK</code>-Button mit seinem Namen
begrüßt wird.

=Anwendungen „<code>HelloWorldSVG02</code>“, „<code>HelloWorldSVG03</code>“ und „<code>HelloWorldSVG04</code>“=

Gehen Sie bei der Erweiterung der SVG-Hello-World-Anwendung genauso vor, wie bei der
Erweiterung der Canvas-Hello-World-Anwendung. Das heißt, befolgen Sie die Anweisungen
der Tutorien
* [[HTML5-Tutorium:_Canvas:_Hello_World_02]],
* [[HTML5-Tutorium:_Canvas:_Hello_World_03]] und
* [[HTML5-Tutorium:_Canvas:_Hello_World_04]],
ersetzen dabei aber jedes Mal den Canvas-Code durch einen äquivalenten SVG-Code.

Wenn Sie beim Erzeugen des SVG-Codes Probleme haben sollten, können Sie in den
SVG-Musterlösungen spicken:
*[http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_01 Pendant zu Teil 1 des Canvas-Tutoriums]
*[http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_02 Pendant zu Teil 2 des Canvas-Tutoriums]
*[http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_03 Pendant zu Teil 3 des Canvas-Tutoriums]
*[http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_04 Pendant zu Teil 4 des Canvas-Tutoriums]

=HTML 4 vs. HTML5 =

Beachten Sie, dass Teil 1 des SVG-Hello-World-Tutoriums in HTML 4 geschrieben wurde, während
das Canvas-Hello-World-Tutorium in HTML5 realisiert wurde.

Wenn Sie den Code der Canvas-Tutorien 2, 3 und 4 für das SVG-Tutorium wiederverwenden wollen,
sollten Sie die Datei hallo.html jeweils ebenfalls von HTML5 auf HTML 4 umstellen.
Hierbei ergeben sich lauter kleine subtile Veränaderungen.

Beispielsweise muss man anstelle von
<source lang="html4strict">
<link rel="stylesheet" href="css/all.min.css"/>
</source>
in HTML 4
<source lang="html4strict">
<link rel="stylesheet" href="css/all.min.css">
</source>
schreiben.
Für Formulare gibt es das <code>label</code>-Element noch nicht.
Dafür müssen Formularelemente in <code>p</code>-Elemente (oder Änhliches)
„gepackt“ werden.

<source lang="html4strict">
<form action="">
<p class="form">
Ihr Name:
<input id="d_name" type="text" value="" >
<input type="button" value="OK" onmousedown="sayHello()" >
</p>
</form>
</source>

Von diesen <code>p</code>-Elementen sollten per CSS der Rand (<code>margin</code>)
entfernt werden, damit das Layout erhalten bleibt:

<source lang="css">
/* In HTML 4 müssen Formularelemente in p-Elemente (oder Ähnliches)
* eingebettet werden. Damit diese Elemente optisch nicht auffallen,
* wird ihr Rand eliminiert.
*/
.form
{
margin: 0px;
}
</source>

Etc. pp.

Um zu überprüfen, ob man validen HTML-Code erzeugt hat, kann man
sich des [http://validator.w3.org/#validate_by_upload W3C-HTML-Validators] bedienen.
Das sollten man bei allen HTML-Dateien machen, die man erstellt.

Die Musterlösungen dieses Tutoriums sind valide:

* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml_svg%2Fhello_world%2Fhtml_svg_hello_world_01%2FWebContent%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0 Validierung des SVG-Beispiels, Teil 1]
* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml_svg%2Fhello_world%2Fhtml_svg_hello_world_02%2FWebContent%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0 Validierung des SVG-Beispiels, Teil 2]
* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml_svg%2Fhello_world%2Fhtml_svg_hello_world_03%2FWebContent%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0 Validierung des SVG-Beispiels, Teil 3]
* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml_svg%2Fhello_world%2Fhtml_svg_hello_world_04%2FWebContent%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0 Validierung des SVG-Beispiels, Teil 4]

==Anmerkung==

Für HTML5 funktioniert der W3C-Validator auch. Er garantiert die Validität allerdings derzeit noch nicht, da HTML5
noch nicht verabschiedet wurde:

* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml5_canvas%2Fhello_world%2Fhtml5_canvas_hello_world_01%2FWebContent%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3 Validierung des Canvas-Beispiels, Teil 1]
* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml5_canvas%2Fhello_world%2Fhtml5_canvas_hello_world_02%2FWebContent%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3 Validierung des Canvas-Beispiels, Teil 2]
* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml5_canvas%2Fhello_world%2Fhtml5_canvas_hello_world_03%2FWebContent%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3 Validierung des Canvas-Beispiels, Teil 3]
* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml5_canvas%2Fhello_world%2Fhtml5_canvas_hello_world_04%2FWebContent%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3 Validierung des Canvas-Beispiels, Teil 4]

=Ein kleiner Optimierungstipp=

Die Größe des Canvas muss nur an einer Stelle festgelegt werden, bei der Erzeugung des Canvas-Objektes:

<source lang="javascript">
g_canvas = document.getElementById("d_canvas");
g_canvas.width = 300;
g_canvas.height = 27;
</source>

In Raphaël muss die Größe dagegen an zwei Stellen angegeben werden. Bei der
Erzeugung der Bühne

<source lang="javascript">
g_canvas = new Raphael("d_canvas", 300, 27);
</source>

sowie in einer CSS-Datei (z.B. bei der Festlegung des Layouts der Umrandung ):

<source lang="css">
#d_canvas
{
width: 300px;
height: 27px;

...
}
</source>

Der Grund dafür ist, dass in HTML5 zwar ein spezielles <code>canvas</code>-Element existiert,
aber kein spezielles <code>svg</code>-Element. Ersatzweise wird in Raphaël daher ein
<code>div</code>-Element verwendet, dessen Größe dann allerdings via CSS explizit festgelegt werden
muss.

Die Definition der Größe einer Raphaël-Bühne an zwei unterschiedlichen Stellen
sollte vermieden werden, da es bei Änderung der Bühnengröße zu Inkonsitenzen kommen kann
(wenn die Größe versehentlich nur an einer Stelle geändert wird). Code-Verdopplung sollte
gemäß dem [[Programmierprinzip#Don.27t_repeat_yourself.2C_DRY.5B4.5D|Programmierprinzip „Don't repeat yourself“ (Dry)]]
sowieso stets vermieden werden.

In der Version 4 des SVG-Hello-World-Tutoriums kann dieses Problem recht elegant gelöst werden.
Die Größe der Bühne wird in der JavaScript-Datei <code>CONSTANT.js</code> festgelegt:

<source lang="javascript">
var CANVAS_WIDTH = 300;
var CANVAS_HEIGHT = 27;
</source>

Bei der Formatierung der Raphaël-Bühne (Hervorhebung des Randes) wird die Größe des zugehörigen
<code>div</code>-Containers nicht mehr mittels statischem CSS sondern mittels JavaScript (genauer: jQuery)
unter Rückgriff auf diese beiden Konstanten festgelegt:

<source lang="javascript">
g_canvas = new Raphael("d_canvas", CANVAS_WIDTH, CANVAS_HEIGHT);
$("#d_canvas")
.css ({"width": CANVAS_WIDTH,
"height": CANVAS_HEIGHT,
});
</source>

=Quellen=
<references/>
<ol start="1">
<li> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>
Die restlichen Quellen wurden direkt im Text angegeben.

=Fortsetzung des Tutoriums=

Bearbeiten Sie nun das [[HTML5-Tutorium: Canvas: MiniPong|Minipong-Canvas-Tutorium]], sofern Sie dies noch nicht gemacht haben.
Anderenfalls können Sie gleich mit dem [[HTML-Tutorium: SVG: MiniPong|Minipong-SVG-Tutorium]] forfahren.
[[Kategorie: HTML-Tutorium: SVG: Hello World]][[Kategorie: HTML-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]

HTML-Tutorium: SVG: Hello World 02

2012-10-24T19:25:10Z

Rayza: /* HTML 4 vs. HTML5 */

{{HTML-Tutorium:SVG:HelloWorld:Menü}}
'''Musterlösung''': [http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_04/WebContent/hallo.html <code>hallo.html</code>]

(SVN-Repositories: [http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_02 Pendant zu Teil 2 des Canvas-Tutoriums],
[http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_03 Pendant zu Teil 3],
[http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_04 Pendant zu Teil 4])

=Voraussetzung=

Sie sollten die Inhalte der Tutorien [[HTML5-Tutorium: Canvas: Hello World 02]], [[HTML5-Tutorium: Canvas: Hello World 03|Hello World 03]] und [[HTML5-Tutorium: Canvas: Hello World 04|Hello World 04]]
sowie des Tutoriums [[HTML-Tutorium: SVG: Hello World 01]] kennen.

=Ziel: Ausgabe von „Hallo <Benutzername>!“ als SVG-Grafik=

Die in [[HTML-Tutorium: SVG: Hello World 01]] erstellte Hello-World-Anwendung wird so umgeschrieben,
dass ein Benutzer seinen Namen eingeben kann und er nach Klick auf den <code>OK</code>-Button mit seinem Namen
begrüßt wird.

=Anwendungen „<code>HelloWorldSVG02</code>“, „<code>HelloWorldSVG03</code>“ und „<code>HelloWorldSVG04</code>“=

Gehen Sie bei der Erweiterung der SVG-Hello-World-Anwendung genauso vor, wie bei der
Erweiterung der Canvas-Hello-World-Anwendung. Das heißt, befolgen Sie die Anweisungen
der Tutorien
* [[HTML5-Tutorium:_Canvas:_Hello_World_02]],
* [[HTML5-Tutorium:_Canvas:_Hello_World_03]] und
* [[HTML5-Tutorium:_Canvas:_Hello_World_04]],
ersetzen dabei aber jedes Mal den Canvas-Code durch einen äquivalenten SVG-Code.

Wenn Sie beim Erzeugen des SVG-Codes Probleme haben sollten, können Sie in den
SVG-Musterlösungen spicken:
*[http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_01 Pendant zu Teil 1 des Canvas-Tutoriums]
*[http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_02 Pendant zu Teil 2 des Canvas-Tutoriums]
*[http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_03 Pendant zu Teil 3 des Canvas-Tutoriums]
*[http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_04 Pendant zu Teil 4 des Canvas-Tutoriums]

=HTML 4 vs. HTML5 =

Beachten Sie, dass Teil 1 des SVG-Hello-World-Tutoriums in HTML 4 geschrieben wurde, während
das Canvas-Hello-World-Tutorium in HTML5 realisiert wurde.

Wenn Sie den Code der Canvas-Tutorien 2, 3 und 4 für das SVG-Tutorium wiederverwenden wollen,
sollten Sie die Datei hallo.html jeweils ebenfalls von HTML5 auf HTML 4 umstellen.
Hierbei ergeben sich lauter kleine subtile Veränaderungen.

Beispielsweise muss man anstelle von
<source lang="html4strict">
<link rel="stylesheet" href="css/all.min.css"/>
</source>
in HTML 4
<source lang="html4strict">
<link rel="stylesheet" href="css/all.min.css">
</source>
schreiben.
Für Formulare gibt es das <code>label</code>-Element noch nicht.
Dafür müssen Formularelemente in <code>p</code>-Elemente (oder Änhliches)
„gepackt“ werden.

<source lang="html4strict">
<form action="">
<p class="form">
Ihr Name:
<input id="d_name" type="text" value="" >
<input type="button" value="OK" onmousedown="sayHello()" >
</p>
</form>
</source>

Von diesen <code>p</code>-Elementen sollten per CSS der Rand (<code>marin</code>)
entfernt werden, damit das Layout erhalten bleibt:

<source lang="css">
/* In HTML 4 müssen Formularelemente in p-Elemente (oder Ähnliches)
* eingebettet werden. Damit diese Elemente optisch nicht auffallen,
* wird ihr Rand eliminiert.
*/
.form
{
margin: 0px;
}
</source>

Etc. pp.

Um zu überprüfen, ob man validen HTML-Code erzeugt hat, kann man
sich des [http://validator.w3.org/#validate_by_upload W3C-HTML-Validators] bedienen.
Das sollten man bei allen HTML-Dateien machen, die man erstellt.

Die Musterlösungen dieses Tutoriums sind valide:

* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml_svg%2Fhello_world%2Fhtml_svg_hello_world_01%2FWebContent%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0 Validierung des SVG-Beispiels, Teil 1]
* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml_svg%2Fhello_world%2Fhtml_svg_hello_world_02%2FWebContent%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0 Validierung des SVG-Beispiels, Teil 2]
* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml_svg%2Fhello_world%2Fhtml_svg_hello_world_03%2FWebContent%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0 Validierung des SVG-Beispiels, Teil 3]
* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml_svg%2Fhello_world%2Fhtml_svg_hello_world_04%2FWebContent%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0 Validierung des SVG-Beispiels, Teil 4]

==Anmerkung==

Für HTML5 funktioniert der W3C-Validator auch. Er garantiert die Validität allerdings derzeit noch nicht, da HTML5
noch nicht verabschiedet wurde:

* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml5_canvas%2Fhello_world%2Fhtml5_canvas_hello_world_01%2FWebContent%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3 Validierung des Canvas-Beispiels, Teil 1]
* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml5_canvas%2Fhello_world%2Fhtml5_canvas_hello_world_02%2FWebContent%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3 Validierung des Canvas-Beispiels, Teil 2]
* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml5_canvas%2Fhello_world%2Fhtml5_canvas_hello_world_03%2FWebContent%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3 Validierung des Canvas-Beispiels, Teil 3]
* [http://validator.w3.org/check?uri=http%3A%2F%2Fglossar.hs-augsburg.de%2Fbeispiel%2Ftutorium%2Fhtml5_canvas%2Fhello_world%2Fhtml5_canvas_hello_world_04%2FWebContent%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3 Validierung des Canvas-Beispiels, Teil 4]

=Ein kleiner Optimierungstipp=

Die Größe des Canvas muss nur an einer Stelle festgelegt werden, bei der Erzeugung des Canvas-Objektes:

<source lang="javascript">
g_canvas = document.getElementById("d_canvas");
g_canvas.width = 300;
g_canvas.height = 27;
</source>

In Raphaël muss die Größe dagegen an zwei Stellen angegeben werden. Bei der
Erzeugung der Bühne

<source lang="javascript">
g_canvas = new Raphael("d_canvas", 300, 27);
</source>

sowie in einer CSS-Datei (z.B. bei der Festlegung des Layouts der Umrandung ):

<source lang="css">
#d_canvas
{
width: 300px;
height: 27px;

...
}
</source>

Der Grund dafür ist, dass in HTML5 zwar ein spezielles <code>canvas</code>-Element existiert,
aber kein spezielles <code>svg</code>-Element. Ersatzweise wird in Raphaël daher ein
<code>div</code>-Element verwendet, dessen Größe dann allerdings via CSS explizit festgelegt werden
muss.

Die Definition der Größe einer Raphaël-Bühne an zwei unterschiedlichen Stellen
sollte vermieden werden, da es bei Änderung der Bühnengröße zu Inkonsitenzen kommen kann
(wenn die Größe versehentlich nur an einer Stelle geändert wird). Code-Verdopplung sollte
gemäß dem [[Programmierprinzip#Don.27t_repeat_yourself.2C_DRY.5B4.5D|Programmierprinzip „Don't repeat yourself“ (Dry)]]
sowieso stets vermieden werden.

In der Version 4 des SVG-Hello-World-Tutoriums kann dieses Problem recht elegant gelöst werden.
Die Größe der Bühne wird in der JavaScript-Datei <code>CONSTANT.js</code> festgelegt:

<source lang="javascript">
var CANVAS_WIDTH = 300;
var CANVAS_HEIGHT = 27;
</source>

Bei der Formatierung der Raphaël-Bühne (Hervorhebung des Randes) wird die Größe des zugehörigen
<code>div</code>-Containers nicht mehr mittels statischem CSS sondern mittels JavaScript (genauer: jQuery)
unter Rückgriff auf diese beiden Konstanten festgelegt:

<source lang="javascript">
g_canvas = new Raphael("d_canvas", CANVAS_WIDTH, CANVAS_HEIGHT);
$("#d_canvas")
.css ({"width": CANVAS_WIDTH,
"height": CANVAS_HEIGHT,
});
</source>

=Quellen=
<references/>
<ol start="1">
<li> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>
Die restlichen Quellen wurden direkt im Text angegeben.

=Fortsetzung des Tutoriums=

Bearbeiten Sie nun das [[HTML5-Tutorium: Canvas: MiniPong|Minipong-Canvas-Tutorium]], sofern Sie dies noch nicht gemacht haben.
Anderenfalls können Sie gleich mit dem [[HTML-Tutorium: SVG: MiniPong|Minipong-SVG-Tutorium]] forfahren.
[[Kategorie: HTML-Tutorium: SVG: Hello World]][[Kategorie: HTML-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]

HTML-Tutorium: SVG: Hello World 01

2012-10-24T19:06:12Z

Rayza: /* Inhalt von hello.html */

{{HTML-Tutorium:SVG:HelloWorld:Menü}}
'''Musterlösung''': [http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_01/WebContent/hallo.html <code>hallo.html</code>]
([http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_01 SVN-Repository])

=Voraussetzung=

Sie sollten die Inhalte des Tutoriums [[HTML5-Tutorium: Canvas: Hello World 01]] kennen.

=Ziel: Ausgabe von „Hallo Welt!“ als SVG-Grafik=
Die in [[HTML5-Tutorium: Canvas: Hello World]] erstellte Hello-World-Anwendung wird so umgeschrieben,
dass die Ausgabe der Begrüßung nicht als [[Pixelgrafik]] sondern als [[Vektorgrafik]] ausgegeben wird.
Vektorgrafiken können in modernen Browsern mittels [[SVG]] dargestellt werden.

In diesem Tutorium wird die JavaScript-Bibliothek Raphaël<ref>{{Quelle|Baranovskiy, D.: Raphaël (2008+) – JavaScript Library}}</ref>
verwendet. Diese Bibliothek stellt Vektorgrafiken mit Hilfe von SVG in Browsern dar, die dies unterstützen. In Browsern,
die [[SVG]] nicht unterstützen (wie z.B. der Internet Explorer 6.0) wird automatisch ersatzweise [[VML]] verwendet.
Das heißt, diese Anwendung funktioniert nicht nur in HTML5-Browsern, sondern auch in älteren HTML4-Browsern,
da Raphaël nur [[EcmaScript|EcmaScript 3]] an Stelle von [[EcmaScript|EcmaScript 5]] voraussetzt.

=Anwendung „<code>HelloWorldSVG01</code>“=
==Neues Projekt anlegen und speichern==

Legen Sie ein neues Statisches Web-Projekt mit dem Namen <code>HelloWorldSVG01</code> an.

Speichern Sie dieses Projekt wie üblich in Ihrem Repository.

==Dateien erstellen==

===<code>raphael.js</code>===
Erstellen Sie den Ordner <code>WebContent/lib</code> und legen Sie in diesen Ordner
die Datei [http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js <code>raphael-min.js</code>].

Gehen Sie dabei genauso vor, wie beim Einbinden von <code>jQuery</code> im [[HTML5-Tutorium:_Canvas:_Hello_World_04#Einbinden_von_jQuery|4. Teil des Hello-World-Canvas-Tutoriums]].

===<code>hello.html</code>===
Erstellen Sie im Ordner <code>WebContent</code> des Projektes die Datei <code>hello.html</code>.

====Inhalt von <code>hello.html</code>====

<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>


<title>HTML5-Tutorium: SVG: Hello World 01</title>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">


<script type="text/javascript" src="lib/raphael-min.js"></script>


<script type="text/javascript">
function init()
{ var l_canvas = new Raphael("d_canvas", 300, 27);

l_canvas
.text(5, 13, "Hallo Welt!")
.attr({"font-family": "'Times New Roman', Times, serif",
"font-size": 20,
"font-weight": "bold",
"text-anchor": "start",
});
};
</script>

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


<div id="d_canvas"> </div>

</body>
</html>
</source>

==Testen und Sichern des Projektes==

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

==JavaScript-Code auslagern==

Lagern Sie [[HTML5-Tutorium:_Canvas:_Hello_World_01#JavaScript-Code auslagern|wie in Teil 1 des Hello-World-Canvas-Tutoriums]]
den JavaScript-Code aus der HTML-Datei <code>hallo.html</code> in die JavaScript-Datei <code>js/main.js</code> aus.

==Testen und Sichern des Projektes==

Vergessen Sie nicht, Ihr Projekt nach dem Testen im Repository zu sichern.

=Quellen=
<references/>
<ol start="2">
<li> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>

=Fortsetzung des Tutoriums=

Bearbeiten Sie nun [[HTML-Tutorium: SVG: Hello World 02|Teil 2 des Tutoriums]].

<noinclude>[[Kategorie: HTML-Tutorium: SVG: Hello World]][[Kategorie: HTML-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]
</noinclude>

HTML-Tutorium: SVG: Hello World 01

2012-10-24T19:04:41Z

Rayza: /* raphael.js */

{{HTML-Tutorium:SVG:HelloWorld:Menü}}
'''Musterlösung''': [http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_01/WebContent/hallo.html <code>hallo.html</code>]
([http://glossar.hs-augsburg.de/beispiel/tutorium/html_svg/hello_world/html_svg_hello_world_01 SVN-Repository])

=Voraussetzung=

Sie sollten die Inhalte des Tutoriums [[HTML5-Tutorium: Canvas: Hello World 01]] kennen.

=Ziel: Ausgabe von „Hallo Welt!“ als SVG-Grafik=
Die in [[HTML5-Tutorium: Canvas: Hello World]] erstellte Hello-World-Anwendung wird so umgeschrieben,
dass die Ausgabe der Begrüßung nicht als [[Pixelgrafik]] sondern als [[Vektorgrafik]] ausgegeben wird.
Vektorgrafiken können in modernen Browsern mittels [[SVG]] dargestellt werden.

In diesem Tutorium wird die JavaScript-Bibliothek Raphaël<ref>{{Quelle|Baranovskiy, D.: Raphaël (2008+) – JavaScript Library}}</ref>
verwendet. Diese Bibliothek stellt Vektorgrafiken mit Hilfe von SVG in Browsern dar, die dies unterstützen. In Browsern,
die [[SVG]] nicht unterstützen (wie z.B. der Internet Explorer 6.0) wird automatisch ersatzweise [[VML]] verwendet.
Das heißt, diese Anwendung funktioniert nicht nur in HTML5-Browsern, sondern auch in älteren HTML4-Browsern,
da Raphaël nur [[EcmaScript|EcmaScript 3]] an Stelle von [[EcmaScript|EcmaScript 5]] voraussetzt.

=Anwendung „<code>HelloWorldSVG01</code>“=
==Neues Projekt anlegen und speichern==

Legen Sie ein neues Statisches Web-Projekt mit dem Namen <code>HelloWorldSVG01</code> an.

Speichern Sie dieses Projekt wie üblich in Ihrem Repository.

==Dateien erstellen==

===<code>raphael.js</code>===
Erstellen Sie den Ordner <code>WebContent/lib</code> und legen Sie in diesen Ordner
die Datei [http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js <code>raphael-min.js</code>].

Gehen Sie dabei genauso vor, wie beim Einbinden von <code>jQuery</code> im [[HTML5-Tutorium:_Canvas:_Hello_World_04#Einbinden_von_jQuery|4. Teil des Hello-World-Canvas-Tutoriums]].

===<code>hello.html</code>===
Erstellen Sie im Ordner <code>WebContent</code> des Projektes die Datei <code>hello.html</code>.

====Inhalt von <code>hello.html</code>====

<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>


<title>HTML5-Tutorium: SVG: Hello World 01</title>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">


<script type="text/javascript" src="lib/raphael.min.js"></script>


<script type="text/javascript">
function init()
{ var l_canvas = new Raphael("d_canvas", 300, 27);

l_canvas
.text(5, 13, "Hallo Welt!")
.attr({"font-family": "'Times New Roman', Times, serif",
"font-size": 20,
"font-weight": "bold",
"text-anchor": "start",
});
};
</script>

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


<div id="d_canvas"> </div>

</body>
</html>
</source>

==Testen und Sichern des Projektes==

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

==JavaScript-Code auslagern==

Lagern Sie [[HTML5-Tutorium:_Canvas:_Hello_World_01#JavaScript-Code auslagern|wie in Teil 1 des Hello-World-Canvas-Tutoriums]]
den JavaScript-Code aus der HTML-Datei <code>hallo.html</code> in die JavaScript-Datei <code>js/main.js</code> aus.

==Testen und Sichern des Projektes==

Vergessen Sie nicht, Ihr Projekt nach dem Testen im Repository zu sichern.

=Quellen=
<references/>
<ol start="2">
<li> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>

=Fortsetzung des Tutoriums=

Bearbeiten Sie nun [[HTML-Tutorium: SVG: Hello World 02|Teil 2 des Tutoriums]].

<noinclude>[[Kategorie: HTML-Tutorium: SVG: Hello World]][[Kategorie: HTML-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]
</noinclude>

HTML5-Tutorium: Canvas: Hello World 04

2012-10-24T17:38:07Z

Rayza: /* Anmerkungen */

{{HTML5-Tutorium:Canvas:HelloWorld:Menü}}
'''Musterlösung''': [http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_04/WebContent/hallo.html <code>hallo.html</code>]
([http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_04 SVN-Repository])

=Voraussetzung=

Sie sollten die Inhalte des Tutoriums [[HTML5-Tutorium: Canvas: Hello World 03]] kennen.

=Ziel: Browser-Unhabhängigkeit mittels jQuery=
Leider weichen die JavaScript-Implementierungen der einzelnen Browser ziemlich voneinander ab.
Daher ist es fast immer sinnvoll, JavaScript-Bibliotheken einzusetzen, deren Hauptzweck es ist,
diese Unterschiede auszugleichen. Daneben stellen sie im Allgemeinen auch noch viele sehr
nützliche JavaScript-Erweiterungen zur Verfügung.

In diesem Tutorium soll die JavaScript-Bibliothek <code>jQuery</code><ref>[http://jquery.com/ jQuery]</ref> eingesetzt werden.
Außerdem sollen alle Konstanten aus der JavaScript-Datei <code>main.js</code> in eine eigene Datei <code>CONSTANT.js</code> ausgelagert werden.
Dies hat den Vorteil, dass die Konfiguration des Projektes (Bühnenbreite, Font-Wahl etc.) an einer zentralen Stelle erfolgen kann.

=Anwendung „<code>HelloWorldCanvas04</code>“=
==Neues Projekt anlegen==

Legen Sie ein neues Statisches Web-Projekt mit dem Namen <code>HelloWorldCanvas04</code> an.

Speichern Sie dieses Projekt wie üblich in Ihrem Repository.

==Daten übernehmen und modifizieren==
Legen Sie die Ordner <code>js</code> und <code>css</code> an und kopieren Sie die Dateien <code>main.js</code>, <code>main.css</code> und
<code>hello.html</code> aus <code>HelloWorldCanvas03</code> in die entsprechenden Ordner <code>WebContent</code> des neuen Projektes.
Passen Sie das <code>title</code>-Element in der Datei <code>hello.html</code> an.

Ändern Sie den Haeder der HTML-Datei <code>hallo.html</code> so ba,
dass Sie die unkomprimierten CSS- und JavaScript-Dateien einbinden.

<source lang="html4strict">


<link rel="stylesheet" href="css/main.css" />



<script type="text/javascript" src="js/main.js" ></script>
</source>

Anderenfalls müssten Sie vor jedem Test zunächst das Komprimierungsskript <code>build.xml</code>
ausführen. Dies vergisst man recht schnell und testet dann eine alte Version, bei der
aktuelle Änderungen an den CSS- und JavaScript-Dateien nicht berücksichtigt werden.

==Einbinden von jQuery==

Laden Sie die [http://jquery.com/ komprimierte Version von <code>jQuery</code>] herunter
und speichern Sie diese unter dem Namen <code>jquery.min.js</code> irgendwo auf Ihrer
Festplatte. Binden Sie nun <code>jQuery</code> in Ihr Projekt ein:

# <code>Projektexplorer</code>: Rechtsklick auf <code>WebContent</code> im Ordner <code>HelloWorldCanvas04</code> → Klick auf <code>Neu</code> → Klick auf <code>Ordner</code>
# Ordnername: <code>lib</code> → <code>Fertigstellen</code>
# Rechtsklick auf den neu erstellen Ordner <code>lib</code> → Klick auf <code>Importieren</code>
# <code>Allgemein</code> aufklappen → Klick auf <code>Dateisystem</code> → Klick auf <code>Weiter</code> → Aus Verzeichnis: <code><Verzeichnis, in dem jQuery liegt></code> → Häckchen vor <code>jquery.min.js</code> → <code>Fertigstellen</code> (Beachten Sie, im Projektexplorer wird für ihr Projekt nun anagezeigt, dass es nicht frei von Syntaxfehlern sein soll.)
# <code>Projektexplorer</code>: Rechtsklick auf <code>HelloWorldCanvas04</code> → Klick auf <code>Eigenschaften</code> → Klick auf <code>JavaScript</code> aufklappen → Klick auf <code>IncludePath</code>
# Klick auf Reiter <code>Quelle</code> → <code>HelloWorldCanvas04/WebContent</code> aufklappen → Klick auf <code>Ausgeschlossen: (Kein)</code> → Klick auf <code>Bearbeiten ...</code>
# Klick auf <code>Hinzufügen</code> '''unter „Ausschlussmuster“''' (= '''zweiter''' Buton mit diesem Label!) → Eingabe von <code>lib/**</code> ins Textfeld
# <code>OK</code> → <code>Fertigstellen</code> → <code>OK</code>

===Anmerkungen===

Externe, d.h. nicht von Ihnen geschrieben JavaScript-Bibliotheken, sollten nicht im Ordner <code>js</code> liegen,
da diese im allgemeinen schon komprimiert wurden und vom <code>build</code> nicht noch einmal komprimiert werden sollten.
Daher wurde der neue Ordner <code>lib</code> angelegt.

Für diesen Ordner wurde außerdem das Syntax-Checking deaktiviert,
da bei komprimierten JavaScript-Bibliotheken von Eclipse häufig Syntaxfehler gemeldet werden, obwohl überhaupt keine
Fehler darinnen enthalten sind. Bei <code>jquery.min.js</code> ist dies beispielsweise der Fall.
Nach dem Ausschluss des Ordners <code>lib</code> vom Syntaxchecking, sind die Fehlermarkierungen im Projektexplorer wieder verschwunden.
Außerdem wird der Benutzer beim Speichern des Projektes im Repositorys nicht dauern mit einer Warnmeldung, dass im Projekt noch Fehler enthalten seien, genervt.

==JavaScript-Code auf <code>jQuery</code> umstellen==

Bevor Sie <code>jqeury.min.js</code> verwenden können, müssen Sie diese Datei in der HTML-Datei <code>hallo.html</code> laden.
Erweitern Sie also den entsprechenden Abschnitt im HTML-Header:

<source lang="html4strict">

<script type="text/javascript" src="lib/jquery.min.js"></script>

<script type="text/javascript" src="js/CONSTANT.js" ></script>
<script type="text/javascript" src="js/main.js" ></script>
</source>

Die JavaScript-Datei <code>CONSTANT.js</code> enthält folgende Konstanten-Definitionen:

<source lang="javascript">
"use strict"; /* Warne vor unsauberem JavaScript-Code! */

// Anstelle von "var" sollte "const" verwendet werden.
// Dies wird aber vom Internet Explorer nicht unterstützt.

var CANVAS_WIDTH = 300;
var CANVAS_HEIGHT = 27;

var HELLO_POS_X = 5;
var HELLO_POS_Y = 20;
var HELLO_FONT_FAMILY = "'Times New Roman', Times, serif";
var HELLO_FONT_SIZE = 20;
var HELLO_FONT_WEIGHT = "bold";</source>

Anschließend können Sie die JavaScript-Datei <code>main.js</code> anpassen:

<source lang="javascript">
window.onload = init;
</source>

wird durch

<source lang="javascript">
$(document).ready(init);
</source>

ersetzt.

In der <code>init</code>-Funktion werden folgende Anpassungen vorgenommen:

<source lang="javascript">
g_canvas = document.getElementById("d_canvas");
g_canvas.width = 300;
g_canvas.height = 27;

g_context = g_canvas.getContext("2d");
</source>

wird durch

<source lang="javascript">
g_canvas = $("#d_canvas")
.attr("width", CANVAS_WIDTH)
.attr("height", CANVAS_HEIGHT)
[0] // Array-Zugriff um das Raw-Canvas-Objekt
// aus dem jQuery-Objekt zu extrahieren
;
g_context = g_canvas.getContext("2d");
</source>

und

<source lang="javascript">
// Interaktive HTML-Formular-Elemente mit JavaScript verknüpfen.
document.getElementById("d_button_ok").onmousedown = sayHello;
</source>

durch

<source lang="javascript">
// Interaktive HTML-Formular-Elemente mit JavaScript verknüpfen.
$("#d_button_ok").click(sayHello);
</source>

Abschließend wird der vollständige Inhalt der <code>sayHello</code>-Funktion durch
folgenden Code ersetzt:

<source lang="javascript">
g_context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // clear canvas
g_context.font = HELLO_FONT_WEIGHT
+ " " + HELLO_FONT_SIZE + "px"
+ " " + HELLO_FONT_FAMILY;
g_context.fillText("Hallo " + $("#d_name").val() + "!",
HELLO_POS_X, HELLO_POS_Y
);
</source>

==Testen und speichern==

Testen Sie Ihre Anwendung und speichern Sie sie in Ihrem Repository.

'''Wenn Sie den Ordner <code>lib</code> nicht von der Syntaxcheck-Behandlung ausgenommen haben, poppt eine Warnung auf, dass Ihr Code Fehler enthält. Wenn nur <code>raphael.js</code> als fehlerhaft markiert wurde, können Sie Ihr Projekt trotzdem sichern.'''

=Quellen=
<references/>
<ol>
<li value="3"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>

=Fortsetzung des Tutoriums=

Bearbeiten Sie nun entweder das [[HTML-Tutorium: SVG: Hello World|Hello-World-SVG-Tutorium]]
oder das [[HTML5-Tutorium: Canvas: MiniPong|Minipong-Canvas-Tutorium]].

[[Kategorie: HTML5-Tutorium: Canvas: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]
</noinclude>

HTML5-Tutorium: Canvas: Hello World 04

2012-10-24T17:34:13Z

Rayza: /* Einbinden von jQuery */

{{HTML5-Tutorium:Canvas:HelloWorld:Menü}}
'''Musterlösung''': [http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_04/WebContent/hallo.html <code>hallo.html</code>]
([http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_04 SVN-Repository])

=Voraussetzung=

Sie sollten die Inhalte des Tutoriums [[HTML5-Tutorium: Canvas: Hello World 03]] kennen.

=Ziel: Browser-Unhabhängigkeit mittels jQuery=
Leider weichen die JavaScript-Implementierungen der einzelnen Browser ziemlich voneinander ab.
Daher ist es fast immer sinnvoll, JavaScript-Bibliotheken einzusetzen, deren Hauptzweck es ist,
diese Unterschiede auszugleichen. Daneben stellen sie im Allgemeinen auch noch viele sehr
nützliche JavaScript-Erweiterungen zur Verfügung.

In diesem Tutorium soll die JavaScript-Bibliothek <code>jQuery</code><ref>[http://jquery.com/ jQuery]</ref> eingesetzt werden.
Außerdem sollen alle Konstanten aus der JavaScript-Datei <code>main.js</code> in eine eigene Datei <code>CONSTANT.js</code> ausgelagert werden.
Dies hat den Vorteil, dass die Konfiguration des Projektes (Bühnenbreite, Font-Wahl etc.) an einer zentralen Stelle erfolgen kann.

=Anwendung „<code>HelloWorldCanvas04</code>“=
==Neues Projekt anlegen==

Legen Sie ein neues Statisches Web-Projekt mit dem Namen <code>HelloWorldCanvas04</code> an.

Speichern Sie dieses Projekt wie üblich in Ihrem Repository.

==Daten übernehmen und modifizieren==
Legen Sie die Ordner <code>js</code> und <code>css</code> an und kopieren Sie die Dateien <code>main.js</code>, <code>main.css</code> und
<code>hello.html</code> aus <code>HelloWorldCanvas03</code> in die entsprechenden Ordner <code>WebContent</code> des neuen Projektes.
Passen Sie das <code>title</code>-Element in der Datei <code>hello.html</code> an.

Ändern Sie den Haeder der HTML-Datei <code>hallo.html</code> so ba,
dass Sie die unkomprimierten CSS- und JavaScript-Dateien einbinden.

<source lang="html4strict">


<link rel="stylesheet" href="css/main.css" />



<script type="text/javascript" src="js/main.js" ></script>
</source>

Anderenfalls müssten Sie vor jedem Test zunächst das Komprimierungsskript <code>build.xml</code>
ausführen. Dies vergisst man recht schnell und testet dann eine alte Version, bei der
aktuelle Änderungen an den CSS- und JavaScript-Dateien nicht berücksichtigt werden.

==Einbinden von jQuery==

Laden Sie die [http://jquery.com/ komprimierte Version von <code>jQuery</code>] herunter
und speichern Sie diese unter dem Namen <code>jquery.min.js</code> irgendwo auf Ihrer
Festplatte. Binden Sie nun <code>jQuery</code> in Ihr Projekt ein:

# <code>Projektexplorer</code>: Rechtsklick auf <code>WebContent</code> im Ordner <code>HelloWorldCanvas04</code> → Klick auf <code>Neu</code> → Klick auf <code>Ordner</code>
# Ordnername: <code>lib</code> → <code>Fertigstellen</code>
# Rechtsklick auf den neu erstellen Ordner <code>lib</code> → Klick auf <code>Importieren</code>
# <code>Allgemein</code> aufklappen → Klick auf <code>Dateisystem</code> → Klick auf <code>Weiter</code> → Aus Verzeichnis: <code><Verzeichnis, in dem jQuery liegt></code> → Häckchen vor <code>jquery.min.js</code> → <code>Fertigstellen</code> (Beachten Sie, im Projektexplorer wird für ihr Projekt nun anagezeigt, dass es nicht frei von Syntaxfehlern sein soll.)
# <code>Projektexplorer</code>: Rechtsklick auf <code>HelloWorldCanvas04</code> → Klick auf <code>Eigenschaften</code> → Klick auf <code>JavaScript</code> aufklappen → Klick auf <code>IncludePath</code>
# Klick auf Reiter <code>Quelle</code> → <code>HelloWorldCanvas04/WebContent</code> aufklappen → Klick auf <code>Ausgeschlossen: (Kein)</code> → Klick auf <code>Bearbeiten ...</code>
# Klick auf <code>Hinzufügen</code> '''unter „Ausschlussmuster“''' (= '''zweiter''' Buton mit diesem Label!) → Eingabe von <code>lib/**</code> ins Textfeld
# <code>OK</code> → <code>Fertigstellen</code> → <code>OK</code>

===Anmerkungen===

Externe, d.h. nicht von Ihnen geschrieben JavaScript-Bibliotheken, sollten nicht im Ordner <code>js</code> liegen,
da diese im allgemeinen schon komprimiert wurden und vom <code>build</code> nicht noch einmal komprimiert werden sollten.
Daher wurde der neue Ordner <code>lib</code> angelegt.

Für diesen Ordner wurde außerdem das Syntax-Checking deaktiviert,
da bei komprimierten JavaScript-Bibliotheken von Eclipse häufig Syntaxfehler gemeldet werden, obwohl überhaupt keine
Fehler darinnen enthalten sind. Bei <code>jquery.min.js</code> ist dies beispielsweise der Fall.
Nach dem Ausschluss des Ordners <code>lib</code> vom Syntaxchecking, sind die Fehlermarkierungen im Projektexplorer wieder verschwunden.
Außerdem wird der Benutzer beim Speichern des Projektes im Repositorys nicht dauern mit einer Warnmeldung, dass im PRojekt noch Fehler enthalten seien, gebervt.

==JavaScript-Code auf <code>jQuery</code> umstellen==

Bevor Sie <code>jqeury.min.js</code> verwenden können, müssen Sie diese Datei in der HTML-Datei <code>hallo.html</code> laden.
Erweitern Sie also den entsprechenden Abschnitt im HTML-Header:

<source lang="html4strict">

<script type="text/javascript" src="lib/jquery.min.js"></script>

<script type="text/javascript" src="js/CONSTANT.js" ></script>
<script type="text/javascript" src="js/main.js" ></script>
</source>

Die JavaScript-Datei <code>CONSTANT.js</code> enthält folgende Konstanten-Definitionen:

<source lang="javascript">
"use strict"; /* Warne vor unsauberem JavaScript-Code! */

// Anstelle von "var" sollte "const" verwendet werden.
// Dies wird aber vom Internet Explorer nicht unterstützt.

var CANVAS_WIDTH = 300;
var CANVAS_HEIGHT = 27;

var HELLO_POS_X = 5;
var HELLO_POS_Y = 20;
var HELLO_FONT_FAMILY = "'Times New Roman', Times, serif";
var HELLO_FONT_SIZE = 20;
var HELLO_FONT_WEIGHT = "bold";</source>

Anschließend können Sie die JavaScript-Datei <code>main.js</code> anpassen:

<source lang="javascript">
window.onload = init;
</source>

wird durch

<source lang="javascript">
$(document).ready(init);
</source>

ersetzt.

In der <code>init</code>-Funktion werden folgende Anpassungen vorgenommen:

<source lang="javascript">
g_canvas = document.getElementById("d_canvas");
g_canvas.width = 300;
g_canvas.height = 27;

g_context = g_canvas.getContext("2d");
</source>

wird durch

<source lang="javascript">
g_canvas = $("#d_canvas")
.attr("width", CANVAS_WIDTH)
.attr("height", CANVAS_HEIGHT)
[0] // Array-Zugriff um das Raw-Canvas-Objekt
// aus dem jQuery-Objekt zu extrahieren
;
g_context = g_canvas.getContext("2d");
</source>

und

<source lang="javascript">
// Interaktive HTML-Formular-Elemente mit JavaScript verknüpfen.
document.getElementById("d_button_ok").onmousedown = sayHello;
</source>

durch

<source lang="javascript">
// Interaktive HTML-Formular-Elemente mit JavaScript verknüpfen.
$("#d_button_ok").click(sayHello);
</source>

Abschließend wird der vollständige Inhalt der <code>sayHello</code>-Funktion durch
folgenden Code ersetzt:

<source lang="javascript">
g_context.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // clear canvas
g_context.font = HELLO_FONT_WEIGHT
+ " " + HELLO_FONT_SIZE + "px"
+ " " + HELLO_FONT_FAMILY;
g_context.fillText("Hallo " + $("#d_name").val() + "!",
HELLO_POS_X, HELLO_POS_Y
);
</source>

==Testen und speichern==

Testen Sie Ihre Anwendung und speichern Sie sie in Ihrem Repository.

'''Wenn Sie den Ordner <code>lib</code> nicht von der Syntaxcheck-Behandlung ausgenommen haben, poppt eine Warnung auf, dass Ihr Code Fehler enthält. Wenn nur <code>raphael.js</code> als fehlerhaft markiert wurde, können Sie Ihr Projekt trotzdem sichern.'''

=Quellen=
<references/>
<ol>
<li value="3"> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>

=Fortsetzung des Tutoriums=

Bearbeiten Sie nun entweder das [[HTML-Tutorium: SVG: Hello World|Hello-World-SVG-Tutorium]]
oder das [[HTML5-Tutorium: Canvas: MiniPong|Minipong-Canvas-Tutorium]].

[[Kategorie: HTML5-Tutorium: Canvas: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]
</noinclude>

HTML5-Tutorium: Canvas: Hello World 03

2012-10-16T09:52:26Z

Rayza: /* Build-Skript ausführen */

HTML5-Tutorium: Canvas: Hello World 03

2012-10-12T20:40:35Z

Rayza: /* Verbesserung der Implementierung von Teil 2 */

HTML5-Tutorium: Canvas: Hello World 03

2012-10-12T20:35:18Z

Rayza: /* Verbesserung der Implementierung von Teil 2 */

HTML5-Tutorium: Canvas: Hello World 02

2012-10-12T18:03:24Z

Rayza: /* Testen und Sichern des Projektes */

HTML5-Tutorium: Canvas: Hello World 02

2012-10-11T21:21:59Z

Rayza: /* Testen und Sichern des Projektes */

HTML5-Tutorium: Canvas: Hello World 02

2012-10-11T21:12:09Z

Rayza: /* main.js */

HTML5-Tutorium: Canvas: Hello World 01

2012-10-11T21:04:09Z

Rayza: /* Repostitory begutachten */

{{HTML5-Tutorium:Canvas:HelloWorld:Menü}}
'''Ergebnis''': [http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01/WebContent/hallo.html <code>hallo.html</code>]
([http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01 SVN-Repository])
=HTML5: Hello-Word-Anwendung mit Canvas=

Zur Erstellung der Anwendung wird [[Installation von Eclipse (Windows)|Eclipse]] eingesetzt.
Alle Eclipse-Versionen ab Helios eignen sich zur Erstellung von HTML5-Web-Anwendungen.

Zum Testen wird der Browser [[Firefox]] mit dem [https://addons.mozilla.org/de/firefox/addon/firebug/ Firebug-Plugin] verendet.

Unter Eclipse kann der Testbrowser folgendermaßen festgelegt werden:

# <code>Fenster</code> → <code>Benutzervorgaben</code> → <code>Allgemein</code> aufklappen → <code>Webbrowser</code> selektieren → <code>Verwende externen Web-Browser</code> selektieren → Häckchen vor <code>Firefox</code> → <code>OK</code>

==Eclipse vorbereiten==
(Dieser Punkt kann übersprungen werden, wenn man den Workspace http://glossar.hs-augsburg.de/svn/eclipse/workspace-mmprog heruntergeladen hat und in Eclipse als akutellen Workspace verwendet.)

Zunächst sollte man die „richtige“ Oberfläche auswählen:

# <code>Fenster</code> → <code>Perspektive öffnen</code> → <code>Web</code> (evtl. unter dem Punkt <code>Andere...</code> zu finden;

'''Beachten Sie, es gibt zwei Web-Perspektiven. Wählen Sie diejenige, die die Weltkugel mit Stift als Icon hat.'''

Außerdem muss der Character Code korrekt eingestellt werden:

Juno:
<ol start="2">
<li> <code>Fenster</code> → <code>Benutzervorgaben</code> → <code>Allgemein</code> aufklappen → <code>Arbeitsbereich</code> selektieren</li>
<li> <code>Sonstige</code> selektieren → <code>UTF-8</code> im Drop-Down-Menü selektieren</li>
<li> <code>OK</code></li>
</ol>

Indigo:
<ol start="2">
<li> <code>Fenster</code> → <code>Benutzervorgaben</code> → <code>Web</code> aufklappen → <code>HTML-Files</code> selektieren</li>
<li> Codierung: <code>ISO Latin-1</code> durch <code>ISO 10646/Unicode(UTF-8)</code> ersetzen</li>
<li> <code>OK</code></li>
</ol>

==Musterlösung herunterladen==
(Dieser Punkt kann übersprungen werden, wenn man den Workspace http://glossar.hs-augsburg.de/svn/eclipse/workspace_mmprog_x64.zip heruntergeladen hat und in Eclipse als akutellen Workspace verwendet.)

Laden Sie die Musterlösung <code>http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01/</code>
in Eclipse:

# Klick auf Reiter <code>Datei</code> → <code>Importieren</code>
# <code>SVN</code> aufklappen → Klick auf <code>Checkout Projects from SVN</code> → <code>Weiter</code>
# Entweder
#* <code>Use existing repository location:</code> und <code>http://glossar.hs-augsburg.de/beispiel/tutorium</code> selektieren (falls vorhanden)
#* <code>Create a new repsotiory location</code> wählen → <code>Weiter</code> → Url: <code>http://glossar.hs-augsburg.de/beispiel/tutorium</code>
# <code>Weiter</code>
# Nachden der Dateibaum aufgegangen ist: <code>html5_canvas</code> aufklappen → <code>hello_world</code> aufklappen → <code>html5_canvas_hello_worl_01</code> selektieren
# <code>Fertigstellen</code>

==Neues Projekt anlegen==

# <code>Datei</code> → <code>Neu</code> → <code>Statisches Web-Projekt</code>
# Project name: <code>HelloWorldCanvas01</code> → <code>Fertigstellen</code>

Speichern Sie nun Ihr Projekt in Ihrem Repository:

# <code>Projektexplorer</code>: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Projekt gemeinsam nutzen</code>
# <code>SVN</code> → <code>Weiter</code>
# <code>Create a new repository location</code> selektieren
# Url: <code><nowiki>https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT</nowiki></code> ('''<code>ACCOUNT</code> durch eigenen RZ-Account ersetzen''') → <code>Weiter</code>
# Use specified folder name: <code>mmprog/tutorium/HelloWorldCanvas01</code> → <code>Fertigstellen</code>
# Beim ersten Mal: Klick auf <code>Accept permanently</code>
# Beim ersten Mal: Passwort eingeben → Häckchen bei <code>Passwort merken</code> (sonst muss man künftig für jede hozuladende Datei das Passwort eingeben) → <code>OK</code>
# '''Eventuell''': Häckchen bei <code>Entscheidung merken</code> → '''<code>Nein</code>''' (Nicht <code>Ja</code>!!!!)

==Projekt im Repository sichern==

Das neu angelegte Projekt wird gleich mal im Repository gesichert:

# Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Commit</code>
# Enter a comment for the commit operation: <code>Neues Projekt angelegt.</code>
# <code>OK</code>

==Neue HTML-Datei anlegen==

# Im Projektexplorer (linkes Fenster): <code>HelloWorldCanvas01</code> aufklappen
# Rechtsklick auf Ordner <code>WebContent</code> → <code>Neu</code> → <code>HTML file</code>
# Dateiname: <code>hallo.html</code> → <code>Weiter</code> → Templates: <code>New HTML File (5)</code> → <code>Fertigstellen</code>

==HTML-Datei bearbeiten==

Erfassen Sie folgenden Code in der HTML-Seite:

<source lang="html4strict">
<!DOCTYPE html>
<html>
<head>


<title>HTML5-Tutorium: Canvas: Hello World 01</title>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">


<script type="text/javascript">
function init()
{
var l_canvas = document.getElementById("d_canvas");

l_canvas.width = 300;
l_canvas.height = 27;

var l_context = l_canvas.getContext("2d");

l_context.font = "bold 20px 'Times New Roman', Times, serif";
l_context.fillText("Hallo Welt!", 5, 20);
}
</script>

</head>

<body onload="init()">


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

</body>
</html>
</source>

====Anmerkung 1====
Auf das Canvas-Element wird ausschließlich von [[JavaScript]] aus zugegriffen.
Sollte ein Browser dieses Element nicht unterstützen, so wird der alternative
HTML-Code innerhalb des Canvas-Element gerendert und ausgegeben. Hier
könnte beispielsweise eine [[Flash]]-Anwendung ausgeführt werden.

====Anmerkung 2====
Die Meta-Anweisung
<source lang="html4strict">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
</source>
dient dazu, dass der Inhalt der Seite auf einem Smartphone in der richtigen Größe angezeigt wird.

====Anmerkung 3====
Es gibt auch einen WYSIWYG-Editor, den Sie folgendermaßen öffnen können:
# Rechtklick in das Editor-Fenster → <code>Öffnen mit</code> → <code>Web Page Editor</code>

Allerdings unterstützt dieser WYSIWYG-Editor die HTML5-Zeichenbühne [[Canvas]] nicht und ist daher für dieses Tutorium nicht sonderlich nützlich.

==HTML-Seite testen==
# <code>hallo.html</code> speichern: <code>Strg-s</code>
# Wichtig: '''Im <code>Projektexplorer</code> jeweils vor dem Server-Aufruf <code>hallo.html</code> selektieren''', sonst erhalten Sie eine Fehlermeldung.
# In der Icon-Zeile: Klick auf Icon „grüner Kreis mit weißen Dreieck“ → Serverziel auswählen: <code>JavaScript Web Application</code>
# <code>OK</code>

===Anmerkungen zum Firefox auf den Rechnern des MM-Labors===

Defaultmäßig kann der Firefox im MM-Labor nicht auf lokale Webserver (wie z.B. den Aptana-Server) zugreifen.

Grund: In diesem Firefox ist eine unpassende Proxy-Konfiguration voreingestellt.
Diese Einstellung verhindert den Zugriff auf localhost.

Lösung des Problems:
# Firefox starten
# Einstellungen → Erweitert → Netzwerk → Einstellungen
# Haken von <code>Proxy-Einstellungen des Systems verwenden</code> auf <code>Manuelle Proxy-Konfiguration</code> setzen und als Ausnahme <code>localhost und 127.0.0.1</code> einstellen.

===Anmerkungen zum Test-Sever===

'''Solange Sie nur HTML-Seiten, die JavaScript-Code enthalten, testen wollen, ist das Serverziel <code>JavaScript Web Application</code> die beste Wahl.'''

Sie können allerdings auch andere Web-Server verwenden:

* Den HTTP-Preview-Server, der in Eclipse integriert ist (probieren Sie diesen ruhig einmal an Stelle des JavaScript-Web-Application-Servers aus)
* Tomcat (hier muss [[Installation von Tomcat|Tomcat]] installiert und mit [[Installation von Eclipse#Integration_von_Tomcat|Eclipse verknüpft]] werden)
* Apache (hier muss [[Installation von Apache|Apache]] installiert und mit Eclipse verknüpft werden; siehe [[HTML5-Tutorium: Canvas: Hello World 02#Optional:_Apache_als_Test-Server|Teil 2 des Tutoriums]])
* etc.

In allen diesen Fällen müssten Sie <code>Run on Server</code> an Stelle von
<code>JavaScript Web Application</code> auswählen:
# In der Icon-Zeile: Klick auf Icon „grüner Kreis mit weißen Dreieck“ → Serverziel auswählen: <code>Run on Server</code>
# <code>OK</code>

Den HTTP-Preview-Server wählen Sie folgendermaßen:

<ol start="3">
<li> <code>HTTP Preview</code> → <code>Fertigstellen</code></li>
</ol>

Beachten Sie, dass beim HTTP-Preview-Server mit jedem Klick des Debug-Icons (grüner Kreis mit weißen Dreieck) ein neues Browserfenster in Eclipse geöffnet wird.
Daher ist es sinnvoller, im bestehenden Browserfenster das Reload-Icon (zwei kreiförmig angeordnete Pfeile) anzuklicken, um Änderungen an einer der
Web-Dateien sichtbar zu machen.

Für komplexere Web-Seiten mit [[PHP]]-Code, [[JSP]]-Code etc. muss man einen echten Server (wie [[Apache]] oder [[Tomcat]]) installieren und
mit Eclipse verknüpfen.

Wenn der von Ihnen gewählte Test-Web-Server Probleme hat, die
neuen HTML-Seiten darzustellen, kann es notwendig sein, den Server neu zu starten:

# Reiter <code>Server</code> im unteren Fenster selektieren
# Klick auf Icon „rotes Recheck“ (Server stoppen)
# Klick auf Icon „grüner Kreis mit weißem Dreieck“ (Server starten)

==Projekt im Repository sichern==

Jedes funktionierende Zwischenergebnis eines Projektes sollte im Repository gespeichert werden:

# Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Commit</code>
# Enter a comment for the commit operation: <code>hallo.html, ein HTML5-JavaScript-Moloch wurde erstellt.</code>
# <code>OK</code>

==JavaScript-Code auslagern==

Man sollte i. Allg. vermeiden, Javascript-Code direkt in eine HTML-Seite einzufügen.
Diese Verknüpfung von [[View]] und [[Control]] bringt nur Nachteile mit sich:
* Der Code wird unübersichtlicher, da zwei unterschiedliche Sprachen gemischt werden ([[Impedance Mismatch]]).
* Der JavaScript-Code kann nicht in mehreren HTML-Dateien eingesetzt werden ([[Don't Repeat Yourself]]).
* Die Ladezeiten der einzelnen Seiten werden länger, wenn derselbe JavaScript-Code in unterschiedlichen Seinten eingebaut ist und für jede dieser Seiten erneut geladen werden muss.

Aus diesen Gründen sollte man den JavaScript-Code in eigene Dateien auslagern:

# Rechtsklick auf Ordner <code>WebContent</code> → <code>Neu</code> → <code>Ordner</code> → Ordnername: <code>js</code> → <code>Fertigstellen</code>
# Rechtsklick auf Ordner <code>js</code> → <code>Neu</code> → <code>Datei</code> → Dateiname: <code>main.js</code> → <code>Fertigstellen</code>

===Inhalt der Datei <code>main.js</code>===
<source lang="javascript">
"use strict"; /* Warne vor unsauberem JavaScript-Code! */

function init()
{
// Erzeugung und Initialisierung der Bühne (Canvas)
var l_canvas = document.getElementById("d_canvas");

l_canvas.width = 300;
l_canvas.height = 27;

// Textausgabe (auf der Bühne)
var l_context = l_canvas.getContext("2d");

l_context.font = "bold 20px 'Times New Roman', Times, serif";
l_context.fillText("Hallo Welt!", 5, 20);
}
</source>

===Geänderter Inhalt der Datei <code>hallo.html</code>===
<source lang="html4strict">
<!DOCTYPE html>
<html>
<head>


<title>HTML5-Tutorium: Canvas: Hello World 01</title>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">


<script type="text/javascript" src="js/main.js"></script>

</head>

<body onload="init()">


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

</body>
</html>
</source>

====Tipp====
Benutzen Sie am Besten die Code-Vervollständigung (<code>Strg-Leerzeichen</code> bzw. <code>Ctrl-Space</code>).

Beispiel:
# Klicken Sie testweise im Editor-Fenster der Datei <code>main.js</code> in die leere Zeile 5 der Funktion <code>init</code>.
# Drücken Sie <code>Strg-Leerzeichen</code> und wählen Sie z.B. <code>l_canvas</code>.
# Geben Sie einen Punkt (<code>.</code>) ein und drücken Sie erneut <code>Strg-Leerzeichen</code>.
# Löschen Sie den eben erfassten Inhalt wieder. (Ihre Datei <code>main.js</code> sollte ja schon fertiggestellt gewesen sein.)

==Projekt testen==

Testen Sie Ihr Projekt wieder, indem Sie es im Firefox öffen.

Häufig ist der JavaScript-Code bei den ersten Tests fehlerhaft. In diesen Fällen hilft einem
die JavaScript-Konsole, die z.B. über das Firefox-Plugin [https://addons.mozilla.org/de/firefox/addon/firebug/ Firebug] zugänglich ist, häufig weiter.

Fügen Sie folgenden Code am Ende des Rumpfes der <code>init</code>-Funktion ein:

<source lang="javascript">
console.log( "Canvas wurde erstellt: "
+ l_canvas.width + "*" + l_canvas.height + " Pixel."
);
</source>

Wenn Sie nun die Anwendung erneut im Firefox ausführen, sehen Sie zunächst keine Veränderung.

Überprüfen Sie, ob Firebug im Firefox aktiviert wurde (Drop-Down-Menü beim Icon mit dem Bug (= Käfer) in der rechten oberen Ecke von Firefox).

Öffnen Sie nun das Firebug-Fenster (Icon mit dem Bug) und laden Sie die JavaScript-Anwendung erneut (Reload im Firefox).

Nun sollten Sie im Konsolen-Fenster von Firebug einen Kommentar lesen können.

Wenn alle Tests erfolgreich verlaufen sind, ist es sinnvoll, die
Konsolenausgaben mittels <code>//</code> oder <code>/* ... */</code> auszukommentieren.

==Projekt im Repository sichern==

Auch das Endergebnis des Projektes sollte im Repository gespeichert werden:

# Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Commit</code>
# Enter a comment for the commit operation: <code>main.js wurde erstellt, zur Auslagerung des JS-Codes aus hallo.html.</code>
# <code>OK</code>

==Repostitory begutachten==

Nun können Sie den Inhalt in Ihrem Repository betrachten.

# <code>Fenster</code> → <code>Perspektive öffnen</code> → <code>Andere</code>
# <code>SVN Repository Exploring</code> → <code>OK</code>
# Im Dateibaum (linkes Fenster) <code>https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT</code> aufklappen → <code>mmprog</code> aufklappen → <code>tutorium</code> aufklappen → <code>HelloWorldCanvas01</code> aufklappen

Hier sehen Sie zunächst den Inhalt des von Ihnen gespeicherten Projektes.
Das Repository kann aber noch mehr. Sie können sich alle gespeicherten Versionen Ihres Projektes ansehen:

<ol start="4">
<li> Rechtsklick auf <code>HelloWorldCanvas01</code> aufklappen → <code>Show History</code></li>
</ol>

Nun sehen Sie im Protokoll-Fester die verschiedenen Versionen des Projektes, mit Revisionsnummer, Author (ein Repository kann von mehreren Autoren gelichzeitig benutzt werden), sowie die von Ihnen eingegebenen Kommentare.

Als Letztes sollten Sie sich die Entwicklung der Datei <code>hallo.html</code> einmal näher ansehen:

<ol start="5">
<li> Im Dateibaum <code>WebContent</code> aufklappen → Rechtsklick auf <code>hallo.html</code> → <code>Show Revision Graph</code></li>
</ol>

Hier sehen Sie, dass es von dieser Datei zwei Versionen gibt. Diese können wir auch miteinander vergleichen:

<ol start="6">
<li> Im Dateibaum Rechtsklick auf <code>hallo.html</code> → <code>Compare</code> → <code>OK</code></li>
</ol>

In Vergleich der beiden Versionen erkennt mann, dass der JavaScript-Code durch einen Zugriff auf die Datei
<code>js/main.js</code> ersetzt wurde.

Kehren Sie nun in die normale Arbeitsumgebung zurück:

<ol start="7">
<li> In der Icon-Leiste oben rechts auf das Icon der Arbeitsumgebung (Perspektive) <code>Web</code> klicken.</li>
</ol>

Neben den Icon <code>Web</code> finden Sie jetzt auch ein Icon für die Arbeitsumgebung <code>SVN Repository Exploring</code>,
damit Sie künftig schneller in diese Perspektive wechseln können.

=Quellen=
# {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}
# [http://blog.webagesolutions.com/archives/419 Coding HTML5 Pages Using Eclipse]
# [http://www.html5canvastutorials.com/tutorials/html5-canvas-text/ HTML5 Canvas Text Tutorial]

=Siehe auch=
# {{SieheAuch|Pilgrim (2011)}}
# [http://www.w3schools.com/html5/ w3schools.com: HTML5 Tutorial]
# [http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html HTML Living Standard — The canvas element]

<noinclude>[[Kategorie: HTML5-Tutorium: Canvas: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]
</noinclude>

HTML5-Tutorium: Canvas: Hello World 01

2012-10-11T21:02:54Z

Rayza: /* Repostitory begutachten */

{{HTML5-Tutorium:Canvas:HelloWorld:Menü}}
'''Ergebnis''': [http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01/WebContent/hallo.html <code>hallo.html</code>]
([http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01 SVN-Repository])
=HTML5: Hello-Word-Anwendung mit Canvas=

Zur Erstellung der Anwendung wird [[Installation von Eclipse (Windows)|Eclipse]] eingesetzt.
Alle Eclipse-Versionen ab Helios eignen sich zur Erstellung von HTML5-Web-Anwendungen.

Zum Testen wird der Browser [[Firefox]] mit dem [https://addons.mozilla.org/de/firefox/addon/firebug/ Firebug-Plugin] verendet.

Unter Eclipse kann der Testbrowser folgendermaßen festgelegt werden:

# <code>Fenster</code> → <code>Benutzervorgaben</code> → <code>Allgemein</code> aufklappen → <code>Webbrowser</code> selektieren → <code>Verwende externen Web-Browser</code> selektieren → Häckchen vor <code>Firefox</code> → <code>OK</code>

==Eclipse vorbereiten==
(Dieser Punkt kann übersprungen werden, wenn man den Workspace http://glossar.hs-augsburg.de/svn/eclipse/workspace-mmprog heruntergeladen hat und in Eclipse als akutellen Workspace verwendet.)

Zunächst sollte man die „richtige“ Oberfläche auswählen:

# <code>Fenster</code> → <code>Perspektive öffnen</code> → <code>Web</code> (evtl. unter dem Punkt <code>Andere...</code> zu finden;

'''Beachten Sie, es gibt zwei Web-Perspektiven. Wählen Sie diejenige, die die Weltkugel mit Stift als Icon hat.'''

Außerdem muss der Character Code korrekt eingestellt werden:

Juno:
<ol start="2">
<li> <code>Fenster</code> → <code>Benutzervorgaben</code> → <code>Allgemein</code> aufklappen → <code>Arbeitsbereich</code> selektieren</li>
<li> <code>Sonstige</code> selektieren → <code>UTF-8</code> im Drop-Down-Menü selektieren</li>
<li> <code>OK</code></li>
</ol>

Indigo:
<ol start="2">
<li> <code>Fenster</code> → <code>Benutzervorgaben</code> → <code>Web</code> aufklappen → <code>HTML-Files</code> selektieren</li>
<li> Codierung: <code>ISO Latin-1</code> durch <code>ISO 10646/Unicode(UTF-8)</code> ersetzen</li>
<li> <code>OK</code></li>
</ol>

==Musterlösung herunterladen==
(Dieser Punkt kann übersprungen werden, wenn man den Workspace http://glossar.hs-augsburg.de/svn/eclipse/workspace_mmprog_x64.zip heruntergeladen hat und in Eclipse als akutellen Workspace verwendet.)

Laden Sie die Musterlösung <code>http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01/</code>
in Eclipse:

# Klick auf Reiter <code>Datei</code> → <code>Importieren</code>
# <code>SVN</code> aufklappen → Klick auf <code>Checkout Projects from SVN</code> → <code>Weiter</code>
# Entweder
#* <code>Use existing repository location:</code> und <code>http://glossar.hs-augsburg.de/beispiel/tutorium</code> selektieren (falls vorhanden)
#* <code>Create a new repsotiory location</code> wählen → <code>Weiter</code> → Url: <code>http://glossar.hs-augsburg.de/beispiel/tutorium</code>
# <code>Weiter</code>
# Nachden der Dateibaum aufgegangen ist: <code>html5_canvas</code> aufklappen → <code>hello_world</code> aufklappen → <code>html5_canvas_hello_worl_01</code> selektieren
# <code>Fertigstellen</code>

==Neues Projekt anlegen==

# <code>Datei</code> → <code>Neu</code> → <code>Statisches Web-Projekt</code>
# Project name: <code>HelloWorldCanvas01</code> → <code>Fertigstellen</code>

Speichern Sie nun Ihr Projekt in Ihrem Repository:

# <code>Projektexplorer</code>: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Projekt gemeinsam nutzen</code>
# <code>SVN</code> → <code>Weiter</code>
# <code>Create a new repository location</code> selektieren
# Url: <code><nowiki>https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT</nowiki></code> ('''<code>ACCOUNT</code> durch eigenen RZ-Account ersetzen''') → <code>Weiter</code>
# Use specified folder name: <code>mmprog/tutorium/HelloWorldCanvas01</code> → <code>Fertigstellen</code>
# Beim ersten Mal: Klick auf <code>Accept permanently</code>
# Beim ersten Mal: Passwort eingeben → Häckchen bei <code>Passwort merken</code> (sonst muss man künftig für jede hozuladende Datei das Passwort eingeben) → <code>OK</code>
# '''Eventuell''': Häckchen bei <code>Entscheidung merken</code> → '''<code>Nein</code>''' (Nicht <code>Ja</code>!!!!)

==Projekt im Repository sichern==

Das neu angelegte Projekt wird gleich mal im Repository gesichert:

# Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Commit</code>
# Enter a comment for the commit operation: <code>Neues Projekt angelegt.</code>
# <code>OK</code>

==Neue HTML-Datei anlegen==

# Im Projektexplorer (linkes Fenster): <code>HelloWorldCanvas01</code> aufklappen
# Rechtsklick auf Ordner <code>WebContent</code> → <code>Neu</code> → <code>HTML file</code>
# Dateiname: <code>hallo.html</code> → <code>Weiter</code> → Templates: <code>New HTML File (5)</code> → <code>Fertigstellen</code>

==HTML-Datei bearbeiten==

Erfassen Sie folgenden Code in der HTML-Seite:

<source lang="html4strict">
<!DOCTYPE html>
<html>
<head>


<title>HTML5-Tutorium: Canvas: Hello World 01</title>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">


<script type="text/javascript">
function init()
{
var l_canvas = document.getElementById("d_canvas");

l_canvas.width = 300;
l_canvas.height = 27;

var l_context = l_canvas.getContext("2d");

l_context.font = "bold 20px 'Times New Roman', Times, serif";
l_context.fillText("Hallo Welt!", 5, 20);
}
</script>

</head>

<body onload="init()">


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

</body>
</html>
</source>

====Anmerkung 1====
Auf das Canvas-Element wird ausschließlich von [[JavaScript]] aus zugegriffen.
Sollte ein Browser dieses Element nicht unterstützen, so wird der alternative
HTML-Code innerhalb des Canvas-Element gerendert und ausgegeben. Hier
könnte beispielsweise eine [[Flash]]-Anwendung ausgeführt werden.

====Anmerkung 2====
Die Meta-Anweisung
<source lang="html4strict">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
</source>
dient dazu, dass der Inhalt der Seite auf einem Smartphone in der richtigen Größe angezeigt wird.

====Anmerkung 3====
Es gibt auch einen WYSIWYG-Editor, den Sie folgendermaßen öffnen können:
# Rechtklick in das Editor-Fenster → <code>Öffnen mit</code> → <code>Web Page Editor</code>

Allerdings unterstützt dieser WYSIWYG-Editor die HTML5-Zeichenbühne [[Canvas]] nicht und ist daher für dieses Tutorium nicht sonderlich nützlich.

==HTML-Seite testen==
# <code>hallo.html</code> speichern: <code>Strg-s</code>
# Wichtig: '''Im <code>Projektexplorer</code> jeweils vor dem Server-Aufruf <code>hallo.html</code> selektieren''', sonst erhalten Sie eine Fehlermeldung.
# In der Icon-Zeile: Klick auf Icon „grüner Kreis mit weißen Dreieck“ → Serverziel auswählen: <code>JavaScript Web Application</code>
# <code>OK</code>

===Anmerkungen zum Firefox auf den Rechnern des MM-Labors===

Defaultmäßig kann der Firefox im MM-Labor nicht auf lokale Webserver (wie z.B. den Aptana-Server) zugreifen.

Grund: In diesem Firefox ist eine unpassende Proxy-Konfiguration voreingestellt.
Diese Einstellung verhindert den Zugriff auf localhost.

Lösung des Problems:
# Firefox starten
# Einstellungen → Erweitert → Netzwerk → Einstellungen
# Haken von <code>Proxy-Einstellungen des Systems verwenden</code> auf <code>Manuelle Proxy-Konfiguration</code> setzen und als Ausnahme <code>localhost und 127.0.0.1</code> einstellen.

===Anmerkungen zum Test-Sever===

'''Solange Sie nur HTML-Seiten, die JavaScript-Code enthalten, testen wollen, ist das Serverziel <code>JavaScript Web Application</code> die beste Wahl.'''

Sie können allerdings auch andere Web-Server verwenden:

* Den HTTP-Preview-Server, der in Eclipse integriert ist (probieren Sie diesen ruhig einmal an Stelle des JavaScript-Web-Application-Servers aus)
* Tomcat (hier muss [[Installation von Tomcat|Tomcat]] installiert und mit [[Installation von Eclipse#Integration_von_Tomcat|Eclipse verknüpft]] werden)
* Apache (hier muss [[Installation von Apache|Apache]] installiert und mit Eclipse verknüpft werden; siehe [[HTML5-Tutorium: Canvas: Hello World 02#Optional:_Apache_als_Test-Server|Teil 2 des Tutoriums]])
* etc.

In allen diesen Fällen müssten Sie <code>Run on Server</code> an Stelle von
<code>JavaScript Web Application</code> auswählen:
# In der Icon-Zeile: Klick auf Icon „grüner Kreis mit weißen Dreieck“ → Serverziel auswählen: <code>Run on Server</code>
# <code>OK</code>

Den HTTP-Preview-Server wählen Sie folgendermaßen:

<ol start="3">
<li> <code>HTTP Preview</code> → <code>Fertigstellen</code></li>
</ol>

Beachten Sie, dass beim HTTP-Preview-Server mit jedem Klick des Debug-Icons (grüner Kreis mit weißen Dreieck) ein neues Browserfenster in Eclipse geöffnet wird.
Daher ist es sinnvoller, im bestehenden Browserfenster das Reload-Icon (zwei kreiförmig angeordnete Pfeile) anzuklicken, um Änderungen an einer der
Web-Dateien sichtbar zu machen.

Für komplexere Web-Seiten mit [[PHP]]-Code, [[JSP]]-Code etc. muss man einen echten Server (wie [[Apache]] oder [[Tomcat]]) installieren und
mit Eclipse verknüpfen.

Wenn der von Ihnen gewählte Test-Web-Server Probleme hat, die
neuen HTML-Seiten darzustellen, kann es notwendig sein, den Server neu zu starten:

# Reiter <code>Server</code> im unteren Fenster selektieren
# Klick auf Icon „rotes Recheck“ (Server stoppen)
# Klick auf Icon „grüner Kreis mit weißem Dreieck“ (Server starten)

==Projekt im Repository sichern==

Jedes funktionierende Zwischenergebnis eines Projektes sollte im Repository gespeichert werden:

# Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Commit</code>
# Enter a comment for the commit operation: <code>hallo.html, ein HTML5-JavaScript-Moloch wurde erstellt.</code>
# <code>OK</code>

==JavaScript-Code auslagern==

Man sollte i. Allg. vermeiden, Javascript-Code direkt in eine HTML-Seite einzufügen.
Diese Verknüpfung von [[View]] und [[Control]] bringt nur Nachteile mit sich:
* Der Code wird unübersichtlicher, da zwei unterschiedliche Sprachen gemischt werden ([[Impedance Mismatch]]).
* Der JavaScript-Code kann nicht in mehreren HTML-Dateien eingesetzt werden ([[Don't Repeat Yourself]]).
* Die Ladezeiten der einzelnen Seiten werden länger, wenn derselbe JavaScript-Code in unterschiedlichen Seinten eingebaut ist und für jede dieser Seiten erneut geladen werden muss.

Aus diesen Gründen sollte man den JavaScript-Code in eigene Dateien auslagern:

# Rechtsklick auf Ordner <code>WebContent</code> → <code>Neu</code> → <code>Ordner</code> → Ordnername: <code>js</code> → <code>Fertigstellen</code>
# Rechtsklick auf Ordner <code>js</code> → <code>Neu</code> → <code>Datei</code> → Dateiname: <code>main.js</code> → <code>Fertigstellen</code>

===Inhalt der Datei <code>main.js</code>===
<source lang="javascript">
"use strict"; /* Warne vor unsauberem JavaScript-Code! */

function init()
{
// Erzeugung und Initialisierung der Bühne (Canvas)
var l_canvas = document.getElementById("d_canvas");

l_canvas.width = 300;
l_canvas.height = 27;

// Textausgabe (auf der Bühne)
var l_context = l_canvas.getContext("2d");

l_context.font = "bold 20px 'Times New Roman', Times, serif";
l_context.fillText("Hallo Welt!", 5, 20);
}
</source>

===Geänderter Inhalt der Datei <code>hallo.html</code>===
<source lang="html4strict">
<!DOCTYPE html>
<html>
<head>


<title>HTML5-Tutorium: Canvas: Hello World 01</title>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">


<script type="text/javascript" src="js/main.js"></script>

</head>

<body onload="init()">


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

</body>
</html>
</source>

====Tipp====
Benutzen Sie am Besten die Code-Vervollständigung (<code>Strg-Leerzeichen</code> bzw. <code>Ctrl-Space</code>).

Beispiel:
# Klicken Sie testweise im Editor-Fenster der Datei <code>main.js</code> in die leere Zeile 5 der Funktion <code>init</code>.
# Drücken Sie <code>Strg-Leerzeichen</code> und wählen Sie z.B. <code>l_canvas</code>.
# Geben Sie einen Punkt (<code>.</code>) ein und drücken Sie erneut <code>Strg-Leerzeichen</code>.
# Löschen Sie den eben erfassten Inhalt wieder. (Ihre Datei <code>main.js</code> sollte ja schon fertiggestellt gewesen sein.)

==Projekt testen==

Testen Sie Ihr Projekt wieder, indem Sie es im Firefox öffen.

Häufig ist der JavaScript-Code bei den ersten Tests fehlerhaft. In diesen Fällen hilft einem
die JavaScript-Konsole, die z.B. über das Firefox-Plugin [https://addons.mozilla.org/de/firefox/addon/firebug/ Firebug] zugänglich ist, häufig weiter.

Fügen Sie folgenden Code am Ende des Rumpfes der <code>init</code>-Funktion ein:

<source lang="javascript">
console.log( "Canvas wurde erstellt: "
+ l_canvas.width + "*" + l_canvas.height + " Pixel."
);
</source>

Wenn Sie nun die Anwendung erneut im Firefox ausführen, sehen Sie zunächst keine Veränderung.

Überprüfen Sie, ob Firebug im Firefox aktiviert wurde (Drop-Down-Menü beim Icon mit dem Bug (= Käfer) in der rechten oberen Ecke von Firefox).

Öffnen Sie nun das Firebug-Fenster (Icon mit dem Bug) und laden Sie die JavaScript-Anwendung erneut (Reload im Firefox).

Nun sollten Sie im Konsolen-Fenster von Firebug einen Kommentar lesen können.

Wenn alle Tests erfolgreich verlaufen sind, ist es sinnvoll, die
Konsolenausgaben mittels <code>//</code> oder <code>/* ... */</code> auszukommentieren.

==Projekt im Repository sichern==

Auch das Endergebnis des Projektes sollte im Repository gespeichert werden:

# Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Commit</code>
# Enter a comment for the commit operation: <code>main.js wurde erstellt, zur Auslagerung des JS-Codes aus hallo.html.</code>
# <code>OK</code>

==Repostitory begutachten==

Nun können Sie den Inhalt in Ihrem Repository betrachten.

# <code>Fenster</code> → <code>Perspektive öffnen</code> → <code>Andere</code>
# <code>SVN Repository Exploring</code> → <code>OK</code>
# Im Dateibaum (linkes Fenster) <code>https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT</code> aufklappen → <code>mmprog</code> aufklappen → <code>tutorium</code> aufklappen → <code>HelloWorldCanvas01</code> aufklappen

Hier sehen Sie zunächst den Inhalt des von Ihnen gespeicherten Projektes.
Das Repository kann aber noch mehr. Sie können sich alle gespeicherten Versionen Ihres Projektes ansehen:

<ol start="4">
<li> Rechtsklick auf <code>HelloWorldCanvas01</code> aufklappen → <code>Show History</code></li>
</ol>

Nun sehen Sie im Protokoll-Fester die verschiedenen Versionen des Projektes, mit Revisionsnummer, Author (ein Repository kann von mehreren Autoren gelichzeitig benutzt werden), sowie die von Ihnen eingegebenen Kommentare.

Als letztes sollten Sie sich die Entwicklung der Datei <code>hallo.html</code> einmal näher ansehen:

<ol start="5">
<li> Im Dateibaum <code>WebContent</code> aufklappen → Rechtsklick auf <code>hallo.html</code> → <code>Show Resion Graph</code></li>
</ol>

Hier sehen Sie, dass es von dieser Datei zwei Versionen gibt. Diese können wir auch miteinander vergleichen:

<ol start="6">
<li> Im Dateibaum Rechtsklick auf <code>hallo.html</code> → <code>Compare</code> → <code>OK</code></li>
</ol>

In Vergleich der beiden Versionen erkennt mann, dass der JavaScript-Code durch einen Zugriff auf die Datei
<code>js/main.js</code> ersetzt wurde.

Kehren Sie nun in die normale Arbeitsumgebung zurück:

<ol start="7">
<li> In der Icon-Leiste oben rechts auf das Icon der Arbeitsumgebung (Perspektive) <code>Web</code> klicken.</li>
</ol>

Neben den Icon <code>Web</code> finden Sie jetzt auch ein Icon für die Arbeitsumgebung <code>SVN Repository Exploring</code>,
damit Sie künftig schneller in diese Perspektive wechseln können.

=Quellen=
# {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}
# [http://blog.webagesolutions.com/archives/419 Coding HTML5 Pages Using Eclipse]
# [http://www.html5canvastutorials.com/tutorials/html5-canvas-text/ HTML5 Canvas Text Tutorial]

=Siehe auch=
# {{SieheAuch|Pilgrim (2011)}}
# [http://www.w3schools.com/html5/ w3schools.com: HTML5 Tutorial]
# [http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html HTML Living Standard — The canvas element]

<noinclude>[[Kategorie: HTML5-Tutorium: Canvas: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]
</noinclude>

HTML5-Tutorium: Canvas: Hello World 01

2012-10-11T15:33:41Z

Rayza: /* Tipp */

{{HTML5-Tutorium:Canvas:HelloWorld:Menü}}
'''Ergebnis''': [http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01/WebContent/hallo.html <code>hallo.html</code>]
([http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01 SVN-Repository])
=HTML5: Hello-Word-Anwendung mit Canvas=

Zur Erstellung der Anwendung wird [[Installation von Eclipse (Windows)|Eclipse]] eingesetzt.
Alle Eclipse-Versionen ab Helios eignen sich zur Erstellung von HTML5-Web-Anwendungen.

Zum Testen wird der Browser [[Firefox]] mit dem [https://addons.mozilla.org/de/firefox/addon/firebug/ Firebug-Plugin] verendet.

Unter Eclipse kann der Testbrowser folgendermaßen festgelegt werden:

# <code>Fenster</code> → <code>Benutzervorgaben</code> → <code>Allgemein</code> aufklappen → <code>Webbrowser</code> selektieren → <code>Verwende externen Web-Browser</code> selektieren → Häckchen vor <code>Firefox</code> → <code>OK</code>

==Eclipse vorbereiten==
(Dieser Punkt kann übersprungen werden, wenn man den Workspace http://glossar.hs-augsburg.de/svn/eclipse/workspace-mmprog heruntergeladen hat und in Eclipse als akutellen Workspace verwendet.)

Zunächst sollte man die „richtige“ Oberfläche auswählen:

# <code>Fenster</code> → <code>Perspektive öffnen</code> → <code>Web</code> (evtl. unter dem Punkt <code>Andere...</code> zu finden;

'''Beachten Sie, es gibt zwei Web-Perspektiven. Wählen Sie diejenige, die die Weltkugel mit Stift als Icon hat.'''

Außerdem muss der Character Code korrekt eingestellt werden:

Juno:
<ol start="2">
<li> <code>Fenster</code> → <code>Benutzervorgaben</code> → <code>Allgemein</code> aufklappen → <code>Arbeitsbereich</code> selektieren</li>
<li> <code>Sonstige</code> selektieren → <code>UTF-8</code> im Drop-Down-Menü selektieren</li>
<li> <code>OK</code></li>
</ol>

Indigo:
<ol start="2">
<li> <code>Fenster</code> → <code>Benutzervorgaben</code> → <code>Web</code> aufklappen → <code>HTML-Files</code> selektieren</li>
<li> Codierung: <code>ISO Latin-1</code> durch <code>ISO 10646/Unicode(UTF-8)</code> ersetzen</li>
<li> <code>OK</code></li>
</ol>

==Musterlösung herunterladen==
(Dieser Punkt kann übersprungen werden, wenn man den Workspace http://glossar.hs-augsburg.de/svn/eclipse/workspace_mmprog_x64.zip heruntergeladen hat und in Eclipse als akutellen Workspace verwendet.)

Laden Sie die Musterlösung <code>http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01/</code>
in Eclipse:

# Klick auf Reiter <code>Datei</code> → <code>Importieren</code>
# <code>SVN</code> aufklappen → Klick auf <code>Checkout Projects from SVN</code> → <code>Weiter</code>
# Entweder
#* <code>Use existing repository location:</code> und <code>http://glossar.hs-augsburg.de/beispiel/tutorium</code> selektieren (falls vorhanden)
#* <code>Create a new repsotiory location</code> wählen → <code>Weiter</code> → Url: <code>http://glossar.hs-augsburg.de/beispiel/tutorium</code>
# <code>Weiter</code>
# Nachden der Dateibaum aufgegangen ist: <code>html5_canvas</code> aufklappen → <code>hello_world</code> aufklappen → <code>html5_canvas_hello_worl_01</code> selektieren
# <code>Fertigstellen</code>

==Neues Projekt anlegen==

# <code>Datei</code> → <code>Neu</code> → <code>Statisches Web-Projekt</code>
# Project name: <code>HelloWorldCanvas01</code> → <code>Fertigstellen</code>

Speichern Sie nun Ihr Projekt in Ihrem Repository:

# <code>Projektexplorer</code>: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Projekt gemeinsam nutzen</code>
# <code>SVN</code> → <code>Weiter</code>
# <code>Create a new repository location</code> selektieren
# Url: <code><nowiki>https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT</nowiki></code> ('''<code>ACCOUNT</code> durch eigenen RZ-Account ersetzen''') → <code>Weiter</code>
# Use specified folder name: <code>mmprog/tutorium/HelloWorldCanvas01</code> → <code>Fertigstellen</code>
# Beim ersten Mal: Klick auf <code>Accept permanently</code>
# Beim ersten Mal: Passwort eingeben → Häckchen bei <code>Passwort merken</code> (sonst muss man künftig für jede hozuladende Datei das Passwort eingeben) → <code>OK</code>
# '''Eventuell''': Häckchen bei <code>Entscheidung merken</code> → '''<code>Nein</code>''' (Nicht <code>Ja</code>!!!!)

==Projekt im Repository sichern==

Das neu angelegte Projekt wird gleich mal im Repository gesichert:

# Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Commit</code>
# Enter a comment for the commit operation: <code>Neues Projekt angelegt.</code>
# <code>OK</code>

==Neue HTML-Datei anlegen==

# Im Projektexplorer (linkes Fenster): <code>HelloWorldCanvas01</code> aufklappen
# Rechtsklick auf Ordner <code>WebContent</code> → <code>Neu</code> → <code>HTML file</code>
# Dateiname: <code>hallo.html</code> → <code>Weiter</code> → Templates: <code>New HTML File (5)</code> → <code>Fertigstellen</code>

==HTML-Datei bearbeiten==

Erfassen Sie folgenden Code in der HTML-Seite:

<source lang="html4strict">
<!DOCTYPE html>
<html>
<head>


<title>HTML5-Tutorium: Canvas: Hello World 01</title>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">


<script type="text/javascript">
function init()
{
var l_canvas = document.getElementById("d_canvas");

l_canvas.width = 300;
l_canvas.height = 27;

var l_context = l_canvas.getContext("2d");

l_context.font = "bold 20px 'Times New Roman', Times, serif";
l_context.fillText("Hallo Welt!", 5, 20);
}
</script>

</head>

<body onload="init()">


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

</body>
</html>
</source>

====Anmerkung 1====
Auf das Canvas-Element wird ausschließlich von [[JavaScript]] aus zugegriffen.
Sollte ein Browser dieses Element nicht unterstützen, so wird der alternative
HTML-Code innerhalb des Canvas-Element gerendert und ausgegeben. Hier
könnte beispielsweise eine [[Flash]]-Anwendung ausgeführt werden.

====Anmerkung 2====
Die Meta-Anweisung
<source lang="html4strict">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
</source>
dient dazu, dass der Inhalt der Seite auf einem Smartphone in der richtigen Größe angezeigt wird.

====Anmerkung 3====
Es gibt auch einen WYSIWYG-Editor, den Sie folgendermaßen öffnen können:
# Rechtklick in das Editor-Fenster → <code>Öffnen mit</code> → <code>Web Page Editor</code>

Allerdings unterstützt dieser WYSIWYG-Editor die HTML5-Zeichenbühne [[Canvas]] nicht und ist daher für dieses Tutorium nicht sonderlich nützlich.

==HTML-Seite testen==
# <code>hallo.html</code> speichern: <code>Strg-s</code>
# Wichtig: '''Im <code>Projektexplorer</code> jeweils vor dem Server-Aufruf <code>hallo.html</code> selektieren''', sonst erhalten Sie eine Fehlermeldung.
# In der Icon-Zeile: Klick auf Icon „grüner Kreis mit weißen Dreieck“ → Serverziel auswählen: <code>JavaScript Web Application</code>
# <code>OK</code>

===Anmerkungen zum Firefox auf den Rechnern des MM-Labors===

Defaultmäßig kann der Firefox im MM-Labor nicht auf lokale Webserver (wie z.B. den Aptana-Server) zugreifen.

Grund: In diesem Firefox ist eine unpassende Proxy-Konfiguration voreingestellt.
Diese Einstellung verhindert den Zugriff auf localhost.

Lösung des Problems:
# Firefox starten
# Einstellungen → Erweitert → Netzwerk → Einstellungen
# Haken von <code>Proxy-Einstellungen des Systems verwenden</code> auf <code>Manuelle Proxy-Konfiguration</code> setzen und als Ausnahme <code>localhost und 127.0.0.1</code> einstellen.

===Anmerkungen zum Test-Sever===

'''Solange Sie nur HTML-Seiten, die JavaScript-Code enthalten, testen wollen, ist das Serverziel <code>JavaScript Web Application</code> die beste Wahl.'''

Sie können allerdings auch andere Web-Server verwenden:

* Den HTTP-Preview-Server, der in Eclipse integriert ist (probieren Sie diesen ruhig einmal an Stelle des JavaScript-Web-Application-Servers aus)
* Tomcat (hier muss [[Installation von Tomcat|Tomcat]] installiert und mit [[Installation von Eclipse#Integration_von_Tomcat|Eclipse verknüpft]] werden)
* Apache (hier muss [[Installation von Apache|Apache]] installiert und mit Eclipse verknüpft werden; siehe [[HTML5-Tutorium: Canvas: Hello World 02#Optional:_Apache_als_Test-Server|Teil 2 des Tutoriums]])
* etc.

In allen diesen Fällen müssten Sie <code>Run on Server</code> an Stelle von
<code>JavaScript Web Application</code> auswählen:
# In der Icon-Zeile: Klick auf Icon „grüner Kreis mit weißen Dreieck“ → Serverziel auswählen: <code>Run on Server</code>
# <code>OK</code>

Den HTTP-Preview-Server wählen Sie folgendermaßen:

<ol start="3">
<li> <code>HTTP Preview</code> → <code>Fertigstellen</code></li>
</ol>

Beachten Sie, dass beim HTTP-Preview-Server mit jedem Klick des Debug-Icons (grüner Kreis mit weißen Dreieck) ein neues Browserfenster in Eclipse geöffnet wird.
Daher ist es sinnvoller, im bestehenden Browserfenster das Reload-Icon (zwei kreiförmig angeordnete Pfeile) anzuklicken, um Änderungen an einer der
Web-Dateien sichtbar zu machen.

Für komplexere Web-Seiten mit [[PHP]]-Code, [[JSP]]-Code etc. muss man einen echten Server (wie [[Apache]] oder [[Tomcat]]) installieren und
mit Eclipse verknüpfen.

Wenn der von Ihnen gewählte Test-Web-Server Probleme hat, die
neuen HTML-Seiten darzustellen, kann es notwendig sein, den Server neu zu starten:

# Reiter <code>Server</code> im unteren Fenster selektieren
# Klick auf Icon „rotes Recheck“ (Server stoppen)
# Klick auf Icon „grüner Kreis mit weißem Dreieck“ (Server starten)

==Projekt im Repository sichern==

Jedes funktionierende Zwischenergebnis eines Projektes sollte im Repository gespeichert werden:

# Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Commit</code>
# Enter a comment for the commit operation: <code>hallo.html, ein HTML5-JavaScript-Moloch wurde erstellt.</code>
# <code>OK</code>

==JavaScript-Code auslagern==

Man sollte i. Allg. vermeiden, Javascript-Code direkt in eine HTML-Seite einzufügen.
Diese Verknüpfung von [[View]] und [[Control]] bringt nur Nachteile mit sich:
* Der Code wird unübersichtlicher, da zwei unterschiedliche Sprachen gemischt werden ([[Impedance Mismatch]]).
* Der JavaScript-Code kann nicht in mehreren HTML-Dateien eingesetzt werden ([[Don't Repeat Yourself]]).
* Die Ladezeiten der einzelnen Seiten werden länger, wenn derselbe JavaScript-Code in unterschiedlichen Seinten eingebaut ist und für jede dieser Seiten erneut geladen werden muss.

Aus diesen Gründen sollte man den JavaScript-Code in eigene Dateien auslagern:

# Rechtsklick auf Ordner <code>WebContent</code> → <code>Neu</code> → <code>Ordner</code> → Ordnername: <code>js</code> → <code>Fertigstellen</code>
# Rechtsklick auf Ordner <code>js</code> → <code>Neu</code> → <code>Datei</code> → Dateiname: <code>main.js</code> → <code>Fertigstellen</code>

===Inhalt der Datei <code>main.js</code>===
<source lang="javascript">
"use strict"; /* Warne vor unsauberem JavaScript-Code! */

function init()
{
// Erzeugung und Initialisierung der Bühne (Canvas)
var l_canvas = document.getElementById("d_canvas");

l_canvas.width = 300;
l_canvas.height = 27;

// Textausgabe (auf der Bühne)
var l_context = l_canvas.getContext("2d");

l_context.font = "bold 20px 'Times New Roman', Times, serif";
l_context.fillText("Hallo Welt!", 5, 20);
}
</source>

===Geänderter Inhalt der Datei <code>hallo.html</code>===
<source lang="html4strict">
<!DOCTYPE html>
<html>
<head>


<title>HTML5-Tutorium: Canvas: Hello World 01</title>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">


<script type="text/javascript" src="js/main.js"></script>

</head>

<body onload="init()">


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

</body>
</html>
</source>

====Tipp====
Benutzen Sie am Besten die Code-Vervollständigung (<code>Strg-Leerzeichen</code> bzw. <code>Ctrl-Space</code>).

Beispiel:
# Klicken Sie testweise im Editor-Fenster der Datei <code>main.js</code> in die leere Zeile 5 der Funktion <code>init</code>.
# Drücken Sie <code>Strg-Leerzeichen</code> und wählen Sie z.B. <code>l_canvas</code>.
# Geben Sie einen Punkt (<code>.</code>) ein und drücken Sie erneut <code>Strg-Leerzeichen</code>.
# Löschen Sie den eben erfassten Inhalt wieder. (Ihre Datei <code>main.js</code> sollte ja schon fertiggestellt gewesen sein.)

==Projekt testen==

Testen Sie Ihr Projekt wieder, indem Sie es im Firefox öffen.

Häufig ist der JavaScript-Code bei den ersten Tests fehlerhaft. In diesen Fällen hilft einem
die JavaScript-Konsole, die z.B. über das Firefox-Plugin [https://addons.mozilla.org/de/firefox/addon/firebug/ Firebug] zugänglich ist, häufig weiter.

Fügen Sie folgenden Code am Ende des Rumpfes der <code>init</code>-Funktion ein:

<source lang="javascript">
console.log( "Canvas wurde erstellt: "
+ l_canvas.width + "*" + l_canvas.height + " Pixel."
);
</source>

Wenn Sie nun die Anwendung erneut im Firefox ausführen, sehen Sie zunächst keine Veränderung.

Überprüfen Sie, ob Firebug im Firefox aktiviert wurde (Drop-Down-Menü beim Icon mit dem Bug (= Käfer) in der rechten oberen Ecke von Firefox).

Öffnen Sie nun das Firebug-Fenster (Icon mit dem Bug) und laden Sie die JavaScript-Anwendung erneut (Reload im Firefox).

Nun sollten Sie im Konsolen-Fenster von Firebug einen Kommentar lesen können.

Wenn alle Tests erfolgreich verlaufen sind, ist es sinnvoll, die
Konsolenausgaben mittels <code>//</code> oder <code>/* ... */</code> auszukommentieren.

==Projekt im Repository sichern==

Auch das Endergebnis des Projektes sollte im Repository gespeichert werden:

# Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Commit</code>
# Enter a comment for the commit operation: <code>main.js wurde erstellt, zur Auslagerung des JS-Codes aus hallo.html.</code>
# <code>OK</code>

==Repostitory begutachten==

Nun können Sie den Inhalt in Ihrem Repository betrachten.

# <code>Fenster</code> → <code>Perspektive öffnen</code> → <code>Andere</code>
# <code>SVN Repository Exploring</code> → <code>OK</code>
# Im Dateibaum (linkes Fenster) <code>https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT</code> aufklappen → <code>mmprog</code> aufklappen → <code>tutorium</code> aufklappen → <code>HelloWorldCanvas01</code> aufklappen

Hier sehen Sie zunächst den Inhalt des von Ihnen gespeicherten Projektes.
Das Repository kann aber noch mehr. Sie können sich alle gespeicherten Versionen Ihres Projektes ansehen:

<ol start="4">
<li> Rechtsklick auf <code>HelloWorldCanvas01</code> aufklappen → <code>Show History</code></li>
</ol>

Nun sehen Sie im Protokoll-Fester die verschiedenen Versionen des Projektes, mit Revisionsnummer, Author (ein Repository kann von mehreren Autoren gelichzeitig benutzt werden), sowie die von Ihnen eingegebenen Kommentare.

Als letztes sollten Sie sich die Entwichlung der Datei <code>hallo.html</code> einmal näher ansehen:

<ol start="5">
<li> Im Dateibaum <code>WebContent</code> aufklappen → Rechtsklick auf <code>hallo.html</code> → <code>Show Resion Graph</code></li>
</ol>

Hier sehen Sie, dass es von dieser Datei zwei Versionen gibt. Diese können wir auch miteinander vergleichen:

<ol start="6">
<li> Im Dateibaum Rechtsklick auf <code>hallo.html</code> → <code>Compare</code> → <code>OK</code></li>
</ol>

In Vergleich der beiden Versionen erkennt mann, dass der JavaScript-Code durch einen Zugriff auf die Datei
<code>js/main.js</code> ersetzt wurde.

Kehren Sie nun in die normale Arbeitsumgebung zurück:

<ol start="7">
<li> In der Icon-Leiste oben rechts auf das Icon der Arbeitsumgebung (Perspektive) <code>Web</code> klicken.</li>
</ol>

Neben den Icon <code>Web</code> finden Sie jetzt auch ein Icon für die Arbeitsumgebung <code>SVN Repository Exploring</code>,
damit Sie künftig schneller in diese Perspektive wechseln können.

=Quellen=
# {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}
# [http://blog.webagesolutions.com/archives/419 Coding HTML5 Pages Using Eclipse]
# [http://www.html5canvastutorials.com/tutorials/html5-canvas-text/ HTML5 Canvas Text Tutorial]

=Siehe auch=
# {{SieheAuch|Pilgrim (2011)}}
# [http://www.w3schools.com/html5/ w3schools.com: HTML5 Tutorial]
# [http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html HTML Living Standard — The canvas element]

<noinclude>[[Kategorie: HTML5-Tutorium: Canvas: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]
</noinclude>

HTML5-Tutorium: Canvas: Hello World 01

2012-10-11T15:24:32Z

Rayza: /* Anmerkungen zum Test-Sever */

{{HTML5-Tutorium:Canvas:HelloWorld:Menü}}
'''Ergebnis''': [http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01/WebContent/hallo.html <code>hallo.html</code>]
([http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01 SVN-Repository])
=HTML5: Hello-Word-Anwendung mit Canvas=

Zur Erstellung der Anwendung wird [[Installation von Eclipse (Windows)|Eclipse]] eingesetzt.
Alle Eclipse-Versionen ab Helios eignen sich zur Erstellung von HTML5-Web-Anwendungen.

Zum Testen wird der Browser [[Firefox]] mit dem [https://addons.mozilla.org/de/firefox/addon/firebug/ Firebug-Plugin] verendet.

Unter Eclipse kann der Testbrowser folgendermaßen festgelegt werden:

# <code>Fenster</code> → <code>Benutzervorgaben</code> → <code>Allgemein</code> aufklappen → <code>Webbrowser</code> selektieren → <code>Verwende externen Web-Browser</code> selektieren → Häckchen vor <code>Firefox</code> → <code>OK</code>

==Eclipse vorbereiten==
(Dieser Punkt kann übersprungen werden, wenn man den Workspace http://glossar.hs-augsburg.de/svn/eclipse/workspace-mmprog heruntergeladen hat und in Eclipse als akutellen Workspace verwendet.)

Zunächst sollte man die „richtige“ Oberfläche auswählen:

# <code>Fenster</code> → <code>Perspektive öffnen</code> → <code>Web</code> (evtl. unter dem Punkt <code>Andere...</code> zu finden;

'''Beachten Sie, es gibt zwei Web-Perspektiven. Wählen Sie diejenige, die die Weltkugel mit Stift als Icon hat.'''

Außerdem muss der Character Code korrekt eingestellt werden:

Juno:
<ol start="2">
<li> <code>Fenster</code> → <code>Benutzervorgaben</code> → <code>Allgemein</code> aufklappen → <code>Arbeitsbereich</code> selektieren</li>
<li> <code>Sonstige</code> selektieren → <code>UTF-8</code> im Drop-Down-Menü selektieren</li>
<li> <code>OK</code></li>
</ol>

Indigo:
<ol start="2">
<li> <code>Fenster</code> → <code>Benutzervorgaben</code> → <code>Web</code> aufklappen → <code>HTML-Files</code> selektieren</li>
<li> Codierung: <code>ISO Latin-1</code> durch <code>ISO 10646/Unicode(UTF-8)</code> ersetzen</li>
<li> <code>OK</code></li>
</ol>

==Musterlösung herunterladen==
(Dieser Punkt kann übersprungen werden, wenn man den Workspace http://glossar.hs-augsburg.de/svn/eclipse/workspace_mmprog_x64.zip heruntergeladen hat und in Eclipse als akutellen Workspace verwendet.)

Laden Sie die Musterlösung <code>http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01/</code>
in Eclipse:

# Klick auf Reiter <code>Datei</code> → <code>Importieren</code>
# <code>SVN</code> aufklappen → Klick auf <code>Checkout Projects from SVN</code> → <code>Weiter</code>
# Entweder
#* <code>Use existing repository location:</code> und <code>http://glossar.hs-augsburg.de/beispiel/tutorium</code> selektieren (falls vorhanden)
#* <code>Create a new repsotiory location</code> wählen → <code>Weiter</code> → Url: <code>http://glossar.hs-augsburg.de/beispiel/tutorium</code>
# <code>Weiter</code>
# Nachden der Dateibaum aufgegangen ist: <code>html5_canvas</code> aufklappen → <code>hello_world</code> aufklappen → <code>html5_canvas_hello_worl_01</code> selektieren
# <code>Fertigstellen</code>

==Neues Projekt anlegen==

# <code>Datei</code> → <code>Neu</code> → <code>Statisches Web-Projekt</code>
# Project name: <code>HelloWorldCanvas01</code> → <code>Fertigstellen</code>

Speichern Sie nun Ihr Projekt in Ihrem Repository:

# <code>Projektexplorer</code>: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Projekt gemeinsam nutzen</code>
# <code>SVN</code> → <code>Weiter</code>
# <code>Create a new repository location</code> selektieren
# Url: <code><nowiki>https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT</nowiki></code> ('''<code>ACCOUNT</code> durch eigenen RZ-Account ersetzen''') → <code>Weiter</code>
# Use specified folder name: <code>mmprog/tutorium/HelloWorldCanvas01</code> → <code>Fertigstellen</code>
# Beim ersten Mal: Klick auf <code>Accept permanently</code>
# Beim ersten Mal: Passwort eingeben → Häckchen bei <code>Passwort merken</code> (sonst muss man künftig für jede hozuladende Datei das Passwort eingeben) → <code>OK</code>
# '''Eventuell''': Häckchen bei <code>Entscheidung merken</code> → '''<code>Nein</code>''' (Nicht <code>Ja</code>!!!!)

==Projekt im Repository sichern==

Das neu angelegte Projekt wird gleich mal im Repository gesichert:

# Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Commit</code>
# Enter a comment for the commit operation: <code>Neues Projekt angelegt.</code>
# <code>OK</code>

==Neue HTML-Datei anlegen==

# Im Projektexplorer (linkes Fenster): <code>HelloWorldCanvas01</code> aufklappen
# Rechtsklick auf Ordner <code>WebContent</code> → <code>Neu</code> → <code>HTML file</code>
# Dateiname: <code>hallo.html</code> → <code>Weiter</code> → Templates: <code>New HTML File (5)</code> → <code>Fertigstellen</code>

==HTML-Datei bearbeiten==

Erfassen Sie folgenden Code in der HTML-Seite:

<source lang="html4strict">
<!DOCTYPE html>
<html>
<head>


<title>HTML5-Tutorium: Canvas: Hello World 01</title>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">


<script type="text/javascript">
function init()
{
var l_canvas = document.getElementById("d_canvas");

l_canvas.width = 300;
l_canvas.height = 27;

var l_context = l_canvas.getContext("2d");

l_context.font = "bold 20px 'Times New Roman', Times, serif";
l_context.fillText("Hallo Welt!", 5, 20);
}
</script>

</head>

<body onload="init()">


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

</body>
</html>
</source>

====Anmerkung 1====
Auf das Canvas-Element wird ausschließlich von [[JavaScript]] aus zugegriffen.
Sollte ein Browser dieses Element nicht unterstützen, so wird der alternative
HTML-Code innerhalb des Canvas-Element gerendert und ausgegeben. Hier
könnte beispielsweise eine [[Flash]]-Anwendung ausgeführt werden.

====Anmerkung 2====
Die Meta-Anweisung
<source lang="html4strict">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
</source>
dient dazu, dass der Inhalt der Seite auf einem Smartphone in der richtigen Größe angezeigt wird.

====Anmerkung 3====
Es gibt auch einen WYSIWYG-Editor, den Sie folgendermaßen öffnen können:
# Rechtklick in das Editor-Fenster → <code>Öffnen mit</code> → <code>Web Page Editor</code>

Allerdings unterstützt dieser WYSIWYG-Editor die HTML5-Zeichenbühne [[Canvas]] nicht und ist daher für dieses Tutorium nicht sonderlich nützlich.

==HTML-Seite testen==
# <code>hallo.html</code> speichern: <code>Strg-s</code>
# Wichtig: '''Im <code>Projektexplorer</code> jeweils vor dem Server-Aufruf <code>hallo.html</code> selektieren''', sonst erhalten Sie eine Fehlermeldung.
# In der Icon-Zeile: Klick auf Icon „grüner Kreis mit weißen Dreieck“ → Serverziel auswählen: <code>JavaScript Web Application</code>
# <code>OK</code>

===Anmerkungen zum Firefox auf den Rechnern des MM-Labors===

Defaultmäßig kann der Firefox im MM-Labor nicht auf lokale Webserver (wie z.B. den Aptana-Server) zugreifen.

Grund: In diesem Firefox ist eine unpassende Proxy-Konfiguration voreingestellt.
Diese Einstellung verhindert den Zugriff auf localhost.

Lösung des Problems:
# Firefox starten
# Einstellungen → Erweitert → Netzwerk → Einstellungen
# Haken von <code>Proxy-Einstellungen des Systems verwenden</code> auf <code>Manuelle Proxy-Konfiguration</code> setzen und als Ausnahme <code>localhost und 127.0.0.1</code> einstellen.

===Anmerkungen zum Test-Sever===

'''Solange Sie nur HTML-Seiten, die JavaScript-Code enthalten, testen wollen, ist das Serverziel <code>JavaScript Web Application</code> die beste Wahl.'''

Sie können allerdings auch andere Web-Server verwenden:

* Den HTTP-Preview-Server, der in Eclipse integriert ist (probieren Sie diesen ruhig einmal an Stelle des JavaScript-Web-Application-Servers aus)
* Tomcat (hier muss [[Installation von Tomcat|Tomcat]] installiert und mit [[Installation von Eclipse#Integration_von_Tomcat|Eclipse verknüpft]] werden)
* Apache (hier muss [[Installation von Apache|Apache]] installiert und mit Eclipse verknüpft werden; siehe [[HTML5-Tutorium: Canvas: Hello World 02#Optional:_Apache_als_Test-Server|Teil 2 des Tutoriums]])
* etc.

In allen diesen Fällen müssten Sie <code>Run on Server</code> an Stelle von
<code>JavaScript Web Application</code> auswählen:
# In der Icon-Zeile: Klick auf Icon „grüner Kreis mit weißen Dreieck“ → Serverziel auswählen: <code>Run on Server</code>
# <code>OK</code>

Den HTTP-Preview-Server wählen Sie folgendermaßen:

<ol start="3">
<li> <code>HTTP Preview</code> → <code>Fertigstellen</code></li>
</ol>

Beachten Sie, dass beim HTTP-Preview-Server mit jedem Klick des Debug-Icons (grüner Kreis mit weißen Dreieck) ein neues Browserfenster in Eclipse geöffnet wird.
Daher ist es sinnvoller, im bestehenden Browserfenster das Reload-Icon (zwei kreiförmig angeordnete Pfeile) anzuklicken, um Änderungen an einer der
Web-Dateien sichtbar zu machen.

Für komplexere Web-Seiten mit [[PHP]]-Code, [[JSP]]-Code etc. muss man einen echten Server (wie [[Apache]] oder [[Tomcat]]) installieren und
mit Eclipse verknüpfen.

Wenn der von Ihnen gewählte Test-Web-Server Probleme hat, die
neuen HTML-Seiten darzustellen, kann es notwendig sein, den Server neu zu starten:

# Reiter <code>Server</code> im unteren Fenster selektieren
# Klick auf Icon „rotes Recheck“ (Server stoppen)
# Klick auf Icon „grüner Kreis mit weißem Dreieck“ (Server starten)

==Projekt im Repository sichern==

Jedes funktionierende Zwischenergebnis eines Projektes sollte im Repository gespeichert werden:

# Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Commit</code>
# Enter a comment for the commit operation: <code>hallo.html, ein HTML5-JavaScript-Moloch wurde erstellt.</code>
# <code>OK</code>

==JavaScript-Code auslagern==

Man sollte i. Allg. vermeiden, Javascript-Code direkt in eine HTML-Seite einzufügen.
Diese Verknüpfung von [[View]] und [[Control]] bringt nur Nachteile mit sich:
* Der Code wird unübersichtlicher, da zwei unterschiedliche Sprachen gemischt werden ([[Impedance Mismatch]]).
* Der JavaScript-Code kann nicht in mehreren HTML-Dateien eingesetzt werden ([[Don't Repeat Yourself]]).
* Die Ladezeiten der einzelnen Seiten werden länger, wenn derselbe JavaScript-Code in unterschiedlichen Seinten eingebaut ist und für jede dieser Seiten erneut geladen werden muss.

Aus diesen Gründen sollte man den JavaScript-Code in eigene Dateien auslagern:

# Rechtsklick auf Ordner <code>WebContent</code> → <code>Neu</code> → <code>Ordner</code> → Ordnername: <code>js</code> → <code>Fertigstellen</code>
# Rechtsklick auf Ordner <code>js</code> → <code>Neu</code> → <code>Datei</code> → Dateiname: <code>main.js</code> → <code>Fertigstellen</code>

===Inhalt der Datei <code>main.js</code>===
<source lang="javascript">
"use strict"; /* Warne vor unsauberem JavaScript-Code! */

function init()
{
// Erzeugung und Initialisierung der Bühne (Canvas)
var l_canvas = document.getElementById("d_canvas");

l_canvas.width = 300;
l_canvas.height = 27;

// Textausgabe (auf der Bühne)
var l_context = l_canvas.getContext("2d");

l_context.font = "bold 20px 'Times New Roman', Times, serif";
l_context.fillText("Hallo Welt!", 5, 20);
}
</source>

===Geänderter Inhalt der Datei <code>hallo.html</code>===
<source lang="html4strict">
<!DOCTYPE html>
<html>
<head>


<title>HTML5-Tutorium: Canvas: Hello World 01</title>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">


<script type="text/javascript" src="js/main.js"></script>

</head>

<body onload="init()">


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

</body>
</html>
</source>

====Tipp====
Benutzen Sie am Besten die Code-Vervollständigung (<code>Strg-Leerzeichen</code> bzw. <code>Crtl-Space</code>).

Beispiel:
# Klicken Sie testweise im Editor-Fenster der Datei <code>main.js</code> in die leere Zeile 5 der Funktion <code>init</code>.
# Drücken Sie <code>Strg-Leerzeichen</code> und wählen Sie z.B. <code>l_canvas</code>.
# Geben Sie einen Punkt (<code>.</code>) ein und drücken Sie erneut <code>Strg-Leerzeichen</code>.
# Löschen Sie den eben erfassten Inhalt wieder. (Ihre Datei <code>main.js</code> sollte ja schon fertiggestellt gewesen sein.)

==Projekt testen==

Testen Sie Ihr Projekt wieder, indem Sie es im Firefox öffen.

Häufig ist der JavaScript-Code bei den ersten Tests fehlerhaft. In diesen Fällen hilft einem
die JavaScript-Konsole, die z.B. über das Firefox-Plugin [https://addons.mozilla.org/de/firefox/addon/firebug/ Firebug] zugänglich ist, häufig weiter.

Fügen Sie folgenden Code am Ende des Rumpfes der <code>init</code>-Funktion ein:

<source lang="javascript">
console.log( "Canvas wurde erstellt: "
+ l_canvas.width + "*" + l_canvas.height + " Pixel."
);
</source>

Wenn Sie nun die Anwendung erneut im Firefox ausführen, sehen Sie zunächst keine Veränderung.

Überprüfen Sie, ob Firebug im Firefox aktiviert wurde (Drop-Down-Menü beim Icon mit dem Bug (= Käfer) in der rechten oberen Ecke von Firefox).

Öffnen Sie nun das Firebug-Fenster (Icon mit dem Bug) und laden Sie die JavaScript-Anwendung erneut (Reload im Firefox).

Nun sollten Sie im Konsolen-Fenster von Firebug einen Kommentar lesen können.

Wenn alle Tests erfolgreich verlaufen sind, ist es sinnvoll, die
Konsolenausgaben mittels <code>//</code> oder <code>/* ... */</code> auszukommentieren.

==Projekt im Repository sichern==

Auch das Endergebnis des Projektes sollte im Repository gespeichert werden:

# Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Commit</code>
# Enter a comment for the commit operation: <code>main.js wurde erstellt, zur Auslagerung des JS-Codes aus hallo.html.</code>
# <code>OK</code>

==Repostitory begutachten==

Nun können Sie den Inhalt in Ihrem Repository betrachten.

# <code>Fenster</code> → <code>Perspektive öffnen</code> → <code>Andere</code>
# <code>SVN Repository Exploring</code> → <code>OK</code>
# Im Dateibaum (linkes Fenster) <code>https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT</code> aufklappen → <code>mmprog</code> aufklappen → <code>tutorium</code> aufklappen → <code>HelloWorldCanvas01</code> aufklappen

Hier sehen Sie zunächst den Inhalt des von Ihnen gespeicherten Projektes.
Das Repository kann aber noch mehr. Sie können sich alle gespeicherten Versionen Ihres Projektes ansehen:

<ol start="4">
<li> Rechtsklick auf <code>HelloWorldCanvas01</code> aufklappen → <code>Show History</code></li>
</ol>

Nun sehen Sie im Protokoll-Fester die verschiedenen Versionen des Projektes, mit Revisionsnummer, Author (ein Repository kann von mehreren Autoren gelichzeitig benutzt werden), sowie die von Ihnen eingegebenen Kommentare.

Als letztes sollten Sie sich die Entwichlung der Datei <code>hallo.html</code> einmal näher ansehen:

<ol start="5">
<li> Im Dateibaum <code>WebContent</code> aufklappen → Rechtsklick auf <code>hallo.html</code> → <code>Show Resion Graph</code></li>
</ol>

Hier sehen Sie, dass es von dieser Datei zwei Versionen gibt. Diese können wir auch miteinander vergleichen:

<ol start="6">
<li> Im Dateibaum Rechtsklick auf <code>hallo.html</code> → <code>Compare</code> → <code>OK</code></li>
</ol>

In Vergleich der beiden Versionen erkennt mann, dass der JavaScript-Code durch einen Zugriff auf die Datei
<code>js/main.js</code> ersetzt wurde.

Kehren Sie nun in die normale Arbeitsumgebung zurück:

<ol start="7">
<li> In der Icon-Leiste oben rechts auf das Icon der Arbeitsumgebung (Perspektive) <code>Web</code> klicken.</li>
</ol>

Neben den Icon <code>Web</code> finden Sie jetzt auch ein Icon für die Arbeitsumgebung <code>SVN Repository Exploring</code>,
damit Sie künftig schneller in diese Perspektive wechseln können.

=Quellen=
# {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}
# [http://blog.webagesolutions.com/archives/419 Coding HTML5 Pages Using Eclipse]
# [http://www.html5canvastutorials.com/tutorials/html5-canvas-text/ HTML5 Canvas Text Tutorial]

=Siehe auch=
# {{SieheAuch|Pilgrim (2011)}}
# [http://www.w3schools.com/html5/ w3schools.com: HTML5 Tutorial]
# [http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html HTML Living Standard — The canvas element]

<noinclude>[[Kategorie: HTML5-Tutorium: Canvas: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]
</noinclude>

HTML5-Tutorium: Canvas: Hello World 01

2012-10-11T15:19:34Z

Rayza: /* HTML-Seite testen */

{{HTML5-Tutorium:Canvas:HelloWorld:Menü}}
'''Ergebnis''': [http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01/WebContent/hallo.html <code>hallo.html</code>]
([http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01 SVN-Repository])
=HTML5: Hello-Word-Anwendung mit Canvas=

Zur Erstellung der Anwendung wird [[Installation von Eclipse (Windows)|Eclipse]] eingesetzt.
Alle Eclipse-Versionen ab Helios eignen sich zur Erstellung von HTML5-Web-Anwendungen.

Zum Testen wird der Browser [[Firefox]] mit dem [https://addons.mozilla.org/de/firefox/addon/firebug/ Firebug-Plugin] verendet.

Unter Eclipse kann der Testbrowser folgendermaßen festgelegt werden:

# <code>Fenster</code> → <code>Benutzervorgaben</code> → <code>Allgemein</code> aufklappen → <code>Webbrowser</code> selektieren → <code>Verwende externen Web-Browser</code> selektieren → Häckchen vor <code>Firefox</code> → <code>OK</code>

==Eclipse vorbereiten==
(Dieser Punkt kann übersprungen werden, wenn man den Workspace http://glossar.hs-augsburg.de/svn/eclipse/workspace-mmprog heruntergeladen hat und in Eclipse als akutellen Workspace verwendet.)

Zunächst sollte man die „richtige“ Oberfläche auswählen:

# <code>Fenster</code> → <code>Perspektive öffnen</code> → <code>Web</code> (evtl. unter dem Punkt <code>Andere...</code> zu finden;

'''Beachten Sie, es gibt zwei Web-Perspektiven. Wählen Sie diejenige, die die Weltkugel mit Stift als Icon hat.'''

Außerdem muss der Character Code korrekt eingestellt werden:

Juno:
<ol start="2">
<li> <code>Fenster</code> → <code>Benutzervorgaben</code> → <code>Allgemein</code> aufklappen → <code>Arbeitsbereich</code> selektieren</li>
<li> <code>Sonstige</code> selektieren → <code>UTF-8</code> im Drop-Down-Menü selektieren</li>
<li> <code>OK</code></li>
</ol>

Indigo:
<ol start="2">
<li> <code>Fenster</code> → <code>Benutzervorgaben</code> → <code>Web</code> aufklappen → <code>HTML-Files</code> selektieren</li>
<li> Codierung: <code>ISO Latin-1</code> durch <code>ISO 10646/Unicode(UTF-8)</code> ersetzen</li>
<li> <code>OK</code></li>
</ol>

==Musterlösung herunterladen==
(Dieser Punkt kann übersprungen werden, wenn man den Workspace http://glossar.hs-augsburg.de/svn/eclipse/workspace_mmprog_x64.zip heruntergeladen hat und in Eclipse als akutellen Workspace verwendet.)

Laden Sie die Musterlösung <code>http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01/</code>
in Eclipse:

# Klick auf Reiter <code>Datei</code> → <code>Importieren</code>
# <code>SVN</code> aufklappen → Klick auf <code>Checkout Projects from SVN</code> → <code>Weiter</code>
# Entweder
#* <code>Use existing repository location:</code> und <code>http://glossar.hs-augsburg.de/beispiel/tutorium</code> selektieren (falls vorhanden)
#* <code>Create a new repsotiory location</code> wählen → <code>Weiter</code> → Url: <code>http://glossar.hs-augsburg.de/beispiel/tutorium</code>
# <code>Weiter</code>
# Nachden der Dateibaum aufgegangen ist: <code>html5_canvas</code> aufklappen → <code>hello_world</code> aufklappen → <code>html5_canvas_hello_worl_01</code> selektieren
# <code>Fertigstellen</code>

==Neues Projekt anlegen==

# <code>Datei</code> → <code>Neu</code> → <code>Statisches Web-Projekt</code>
# Project name: <code>HelloWorldCanvas01</code> → <code>Fertigstellen</code>

Speichern Sie nun Ihr Projekt in Ihrem Repository:

# <code>Projektexplorer</code>: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Projekt gemeinsam nutzen</code>
# <code>SVN</code> → <code>Weiter</code>
# <code>Create a new repository location</code> selektieren
# Url: <code><nowiki>https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT</nowiki></code> ('''<code>ACCOUNT</code> durch eigenen RZ-Account ersetzen''') → <code>Weiter</code>
# Use specified folder name: <code>mmprog/tutorium/HelloWorldCanvas01</code> → <code>Fertigstellen</code>
# Beim ersten Mal: Klick auf <code>Accept permanently</code>
# Beim ersten Mal: Passwort eingeben → Häckchen bei <code>Passwort merken</code> (sonst muss man künftig für jede hozuladende Datei das Passwort eingeben) → <code>OK</code>
# '''Eventuell''': Häckchen bei <code>Entscheidung merken</code> → '''<code>Nein</code>''' (Nicht <code>Ja</code>!!!!)

==Projekt im Repository sichern==

Das neu angelegte Projekt wird gleich mal im Repository gesichert:

# Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Commit</code>
# Enter a comment for the commit operation: <code>Neues Projekt angelegt.</code>
# <code>OK</code>

==Neue HTML-Datei anlegen==

# Im Projektexplorer (linkes Fenster): <code>HelloWorldCanvas01</code> aufklappen
# Rechtsklick auf Ordner <code>WebContent</code> → <code>Neu</code> → <code>HTML file</code>
# Dateiname: <code>hallo.html</code> → <code>Weiter</code> → Templates: <code>New HTML File (5)</code> → <code>Fertigstellen</code>

==HTML-Datei bearbeiten==

Erfassen Sie folgenden Code in der HTML-Seite:

<source lang="html4strict">
<!DOCTYPE html>
<html>
<head>


<title>HTML5-Tutorium: Canvas: Hello World 01</title>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">


<script type="text/javascript">
function init()
{
var l_canvas = document.getElementById("d_canvas");

l_canvas.width = 300;
l_canvas.height = 27;

var l_context = l_canvas.getContext("2d");

l_context.font = "bold 20px 'Times New Roman', Times, serif";
l_context.fillText("Hallo Welt!", 5, 20);
}
</script>

</head>

<body onload="init()">


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

</body>
</html>
</source>

====Anmerkung 1====
Auf das Canvas-Element wird ausschließlich von [[JavaScript]] aus zugegriffen.
Sollte ein Browser dieses Element nicht unterstützen, so wird der alternative
HTML-Code innerhalb des Canvas-Element gerendert und ausgegeben. Hier
könnte beispielsweise eine [[Flash]]-Anwendung ausgeführt werden.

====Anmerkung 2====
Die Meta-Anweisung
<source lang="html4strict">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
</source>
dient dazu, dass der Inhalt der Seite auf einem Smartphone in der richtigen Größe angezeigt wird.

====Anmerkung 3====
Es gibt auch einen WYSIWYG-Editor, den Sie folgendermaßen öffnen können:
# Rechtklick in das Editor-Fenster → <code>Öffnen mit</code> → <code>Web Page Editor</code>

Allerdings unterstützt dieser WYSIWYG-Editor die HTML5-Zeichenbühne [[Canvas]] nicht und ist daher für dieses Tutorium nicht sonderlich nützlich.

==HTML-Seite testen==
# <code>hallo.html</code> speichern: <code>Strg-s</code>
# Wichtig: '''Im <code>Projektexplorer</code> jeweils vor dem Server-Aufruf <code>hallo.html</code> selektieren''', sonst erhalten Sie eine Fehlermeldung.
# In der Icon-Zeile: Klick auf Icon „grüner Kreis mit weißen Dreieck“ → Serverziel auswählen: <code>JavaScript Web Application</code>
# <code>OK</code>

===Anmerkungen zum Firefox auf den Rechnern des MM-Labors===

Defaultmäßig kann der Firefox im MM-Labor nicht auf lokale Webserver (wie z.B. den Aptana-Server) zugreifen.

Grund: In diesem Firefox ist eine unpassende Proxy-Konfiguration voreingestellt.
Diese Einstellung verhindert den Zugriff auf localhost.

Lösung des Problems:
# Firefox starten
# Einstellungen → Erweitert → Netzwerk → Einstellungen
# Haken von <code>Proxy-Einstellungen des Systems verwenden</code> auf <code>Manuelle Proxy-Konfiguration</code> setzen und als Ausnahme <code>localhost und 127.0.0.1</code> einstellen.

===Anmerkungen zum Test-Sever===

'''Solange Sie nur HTML-Seiten, die JavaScript-Code enthalten, testen wollen, ist das Serverziel <code>JavaScript Web Application</code> die beste Wahl.'''

Sie können allerdings auch andere Web-Server verwenden:

* Den HTTP-Preview-Server, der in Eclipse integriert ist (probieren Sie diesen ruhig einmal an Stelle des JavaScript-Web-Application-Servers aus)
* Tomcat (hier muss [[Installation von Tomcat|Tomcat]] installiert und mit [[Installation von Eclipse#Integration_von_Tomcat|Eclipse verknüpft]] werden)
* Apache (hier muss [[Installation von Apache|Apache]] installiert und mit Eclipse verknüpft werden; siehe [[HTML5-Tutorium: Canvas: Hello World 02#Optional:_Apache_als_Test-Server|Teil 2 des Tutoriums]])
* etc.

In allen diesen Fällen müssten Sie <code>Run on Server</code> an Stelle von
<code>JavaScript Web Application</code> auswählen:
# In der Icon-Zeile: Klick auf Icon „grüner Kreis mit weißen Dreieck“ → Serverziel auswählen: <code>Run on Server</code>
# <code>OK</code>

Den HTTP-Preview-Server wählen Sie folgendermaßen:

<ol start="3">
<li> <code>HTTP Preview</code> → <code>Fertigstellen</code></li>
</ol>

Beachten Sie, dass beim HTTP-Preview-Server mit jedem Klick des Debug-Icons (grüner Keris mit weißen Dreieck) ein neues Browserfenster in Eclipse geöffnet wird.
Daher ist es sinnvoller, im bestehenden Browserfenster das Reload-Icon (zwei kreiförmig angeordnete Pfeile) anzuklicken, um Änderungen an einer der
Web-Dateien sichtbar zu machen.

Für komplexere Web-Seiten mit [[PHP]]-Code, [[JSP]]-Code etc. muss man einen echten Server (wie [[Apache]] oder [[Tomcat]]) installieren und
mit Eclipse verknüpfen.

Wenn der von Ihnen gewählte Test-Web-Server Probleme hat, die
neuen HTML-Seiten darzustellen, kann es notwendig sein, den Server neu zu starten:

# Reiter <code>Server</code> im unteren Fenster selektieren
# Klick auf Icon „rotes Recheck“ (Server stoppen)
# Klick auf Icon „grüner Kreis mit weißem Dreieck“ (Server starten)

==Projekt im Repository sichern==

Jedes funktionierende Zwischenergebnis eines Projektes sollte im Repository gespeichert werden:

# Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Commit</code>
# Enter a comment for the commit operation: <code>hallo.html, ein HTML5-JavaScript-Moloch wurde erstellt.</code>
# <code>OK</code>

==JavaScript-Code auslagern==

Man sollte i. Allg. vermeiden, Javascript-Code direkt in eine HTML-Seite einzufügen.
Diese Verknüpfung von [[View]] und [[Control]] bringt nur Nachteile mit sich:
* Der Code wird unübersichtlicher, da zwei unterschiedliche Sprachen gemischt werden ([[Impedance Mismatch]]).
* Der JavaScript-Code kann nicht in mehreren HTML-Dateien eingesetzt werden ([[Don't Repeat Yourself]]).
* Die Ladezeiten der einzelnen Seiten werden länger, wenn derselbe JavaScript-Code in unterschiedlichen Seinten eingebaut ist und für jede dieser Seiten erneut geladen werden muss.

Aus diesen Gründen sollte man den JavaScript-Code in eigene Dateien auslagern:

# Rechtsklick auf Ordner <code>WebContent</code> → <code>Neu</code> → <code>Ordner</code> → Ordnername: <code>js</code> → <code>Fertigstellen</code>
# Rechtsklick auf Ordner <code>js</code> → <code>Neu</code> → <code>Datei</code> → Dateiname: <code>main.js</code> → <code>Fertigstellen</code>

===Inhalt der Datei <code>main.js</code>===
<source lang="javascript">
"use strict"; /* Warne vor unsauberem JavaScript-Code! */

function init()
{
// Erzeugung und Initialisierung der Bühne (Canvas)
var l_canvas = document.getElementById("d_canvas");

l_canvas.width = 300;
l_canvas.height = 27;

// Textausgabe (auf der Bühne)
var l_context = l_canvas.getContext("2d");

l_context.font = "bold 20px 'Times New Roman', Times, serif";
l_context.fillText("Hallo Welt!", 5, 20);
}
</source>

===Geänderter Inhalt der Datei <code>hallo.html</code>===
<source lang="html4strict">
<!DOCTYPE html>
<html>
<head>


<title>HTML5-Tutorium: Canvas: Hello World 01</title>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">


<script type="text/javascript" src="js/main.js"></script>

</head>

<body onload="init()">


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

</body>
</html>
</source>

====Tipp====
Benutzen Sie am Besten die Code-Vervollständigung (<code>Strg-Leerzeichen</code> bzw. <code>Crtl-Space</code>).

Beispiel:
# Klicken Sie testweise im Editor-Fenster der Datei <code>main.js</code> in die leere Zeile 5 der Funktion <code>init</code>.
# Drücken Sie <code>Strg-Leerzeichen</code> und wählen Sie z.B. <code>l_canvas</code>.
# Geben Sie einen Punkt (<code>.</code>) ein und drücken Sie erneut <code>Strg-Leerzeichen</code>.
# Löschen Sie den eben erfassten Inhalt wieder. (Ihre Datei <code>main.js</code> sollte ja schon fertiggestellt gewesen sein.)

==Projekt testen==

Testen Sie Ihr Projekt wieder, indem Sie es im Firefox öffen.

Häufig ist der JavaScript-Code bei den ersten Tests fehlerhaft. In diesen Fällen hilft einem
die JavaScript-Konsole, die z.B. über das Firefox-Plugin [https://addons.mozilla.org/de/firefox/addon/firebug/ Firebug] zugänglich ist, häufig weiter.

Fügen Sie folgenden Code am Ende des Rumpfes der <code>init</code>-Funktion ein:

<source lang="javascript">
console.log( "Canvas wurde erstellt: "
+ l_canvas.width + "*" + l_canvas.height + " Pixel."
);
</source>

Wenn Sie nun die Anwendung erneut im Firefox ausführen, sehen Sie zunächst keine Veränderung.

Überprüfen Sie, ob Firebug im Firefox aktiviert wurde (Drop-Down-Menü beim Icon mit dem Bug (= Käfer) in der rechten oberen Ecke von Firefox).

Öffnen Sie nun das Firebug-Fenster (Icon mit dem Bug) und laden Sie die JavaScript-Anwendung erneut (Reload im Firefox).

Nun sollten Sie im Konsolen-Fenster von Firebug einen Kommentar lesen können.

Wenn alle Tests erfolgreich verlaufen sind, ist es sinnvoll, die
Konsolenausgaben mittels <code>//</code> oder <code>/* ... */</code> auszukommentieren.

==Projekt im Repository sichern==

Auch das Endergebnis des Projektes sollte im Repository gespeichert werden:

# Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Commit</code>
# Enter a comment for the commit operation: <code>main.js wurde erstellt, zur Auslagerung des JS-Codes aus hallo.html.</code>
# <code>OK</code>

==Repostitory begutachten==

Nun können Sie den Inhalt in Ihrem Repository betrachten.

# <code>Fenster</code> → <code>Perspektive öffnen</code> → <code>Andere</code>
# <code>SVN Repository Exploring</code> → <code>OK</code>
# Im Dateibaum (linkes Fenster) <code>https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT</code> aufklappen → <code>mmprog</code> aufklappen → <code>tutorium</code> aufklappen → <code>HelloWorldCanvas01</code> aufklappen

Hier sehen Sie zunächst den Inhalt des von Ihnen gespeicherten Projektes.
Das Repository kann aber noch mehr. Sie können sich alle gespeicherten Versionen Ihres Projektes ansehen:

<ol start="4">
<li> Rechtsklick auf <code>HelloWorldCanvas01</code> aufklappen → <code>Show History</code></li>
</ol>

Nun sehen Sie im Protokoll-Fester die verschiedenen Versionen des Projektes, mit Revisionsnummer, Author (ein Repository kann von mehreren Autoren gelichzeitig benutzt werden), sowie die von Ihnen eingegebenen Kommentare.

Als letztes sollten Sie sich die Entwichlung der Datei <code>hallo.html</code> einmal näher ansehen:

<ol start="5">
<li> Im Dateibaum <code>WebContent</code> aufklappen → Rechtsklick auf <code>hallo.html</code> → <code>Show Resion Graph</code></li>
</ol>

Hier sehen Sie, dass es von dieser Datei zwei Versionen gibt. Diese können wir auch miteinander vergleichen:

<ol start="6">
<li> Im Dateibaum Rechtsklick auf <code>hallo.html</code> → <code>Compare</code> → <code>OK</code></li>
</ol>

In Vergleich der beiden Versionen erkennt mann, dass der JavaScript-Code durch einen Zugriff auf die Datei
<code>js/main.js</code> ersetzt wurde.

Kehren Sie nun in die normale Arbeitsumgebung zurück:

<ol start="7">
<li> In der Icon-Leiste oben rechts auf das Icon der Arbeitsumgebung (Perspektive) <code>Web</code> klicken.</li>
</ol>

Neben den Icon <code>Web</code> finden Sie jetzt auch ein Icon für die Arbeitsumgebung <code>SVN Repository Exploring</code>,
damit Sie künftig schneller in diese Perspektive wechseln können.

=Quellen=
# {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}
# [http://blog.webagesolutions.com/archives/419 Coding HTML5 Pages Using Eclipse]
# [http://www.html5canvastutorials.com/tutorials/html5-canvas-text/ HTML5 Canvas Text Tutorial]

=Siehe auch=
# {{SieheAuch|Pilgrim (2011)}}
# [http://www.w3schools.com/html5/ w3schools.com: HTML5 Tutorial]
# [http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html HTML Living Standard — The canvas element]

<noinclude>[[Kategorie: HTML5-Tutorium: Canvas: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]
</noinclude>

HTML5-Tutorium: Canvas: Hello World 01

2012-10-11T15:10:38Z

Rayza: /* Projekt im Repository sichern */

{{HTML5-Tutorium:Canvas:HelloWorld:Menü}}
'''Ergebnis''': [http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01/WebContent/hallo.html <code>hallo.html</code>]
([http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01 SVN-Repository])
=HTML5: Hello-Word-Anwendung mit Canvas=

Zur Erstellung der Anwendung wird [[Installation von Eclipse (Windows)|Eclipse]] eingesetzt.
Alle Eclipse-Versionen ab Helios eignen sich zur Erstellung von HTML5-Web-Anwendungen.

Zum Testen wird der Browser [[Firefox]] mit dem [https://addons.mozilla.org/de/firefox/addon/firebug/ Firebug-Plugin] verendet.

Unter Eclipse kann der Testbrowser folgendermaßen festgelegt werden:

# <code>Fenster</code> → <code>Benutzervorgaben</code> → <code>Allgemein</code> aufklappen → <code>Webbrowser</code> selektieren → <code>Verwende externen Web-Browser</code> selektieren → Häckchen vor <code>Firefox</code> → <code>OK</code>

==Eclipse vorbereiten==
(Dieser Punkt kann übersprungen werden, wenn man den Workspace http://glossar.hs-augsburg.de/svn/eclipse/workspace-mmprog heruntergeladen hat und in Eclipse als akutellen Workspace verwendet.)

Zunächst sollte man die „richtige“ Oberfläche auswählen:

# <code>Fenster</code> → <code>Perspektive öffnen</code> → <code>Web</code> (evtl. unter dem Punkt <code>Andere...</code> zu finden;

'''Beachten Sie, es gibt zwei Web-Perspektiven. Wählen Sie diejenige, die die Weltkugel mit Stift als Icon hat.'''

Außerdem muss der Character Code korrekt eingestellt werden:

Juno:
<ol start="2">
<li> <code>Fenster</code> → <code>Benutzervorgaben</code> → <code>Allgemein</code> aufklappen → <code>Arbeitsbereich</code> selektieren</li>
<li> <code>Sonstige</code> selektieren → <code>UTF-8</code> im Drop-Down-Menü selektieren</li>
<li> <code>OK</code></li>
</ol>

Indigo:
<ol start="2">
<li> <code>Fenster</code> → <code>Benutzervorgaben</code> → <code>Web</code> aufklappen → <code>HTML-Files</code> selektieren</li>
<li> Codierung: <code>ISO Latin-1</code> durch <code>ISO 10646/Unicode(UTF-8)</code> ersetzen</li>
<li> <code>OK</code></li>
</ol>

==Musterlösung herunterladen==
(Dieser Punkt kann übersprungen werden, wenn man den Workspace http://glossar.hs-augsburg.de/svn/eclipse/workspace_mmprog_x64.zip heruntergeladen hat und in Eclipse als akutellen Workspace verwendet.)

Laden Sie die Musterlösung <code>http://glossar.hs-augsburg.de/beispiel/tutorium/html5_canvas/hello_world/html5_canvas_hello_world_01/</code>
in Eclipse:

# Klick auf Reiter <code>Datei</code> → <code>Importieren</code>
# <code>SVN</code> aufklappen → Klick auf <code>Checkout Projects from SVN</code> → <code>Weiter</code>
# Entweder
#* <code>Use existing repository location:</code> und <code>http://glossar.hs-augsburg.de/beispiel/tutorium</code> selektieren (falls vorhanden)
#* <code>Create a new repsotiory location</code> wählen → <code>Weiter</code> → Url: <code>http://glossar.hs-augsburg.de/beispiel/tutorium</code>
# <code>Weiter</code>
# Nachden der Dateibaum aufgegangen ist: <code>html5_canvas</code> aufklappen → <code>hello_world</code> aufklappen → <code>html5_canvas_hello_worl_01</code> selektieren
# <code>Fertigstellen</code>

==Neues Projekt anlegen==

# <code>Datei</code> → <code>Neu</code> → <code>Statisches Web-Projekt</code>
# Project name: <code>HelloWorldCanvas01</code> → <code>Fertigstellen</code>

Speichern Sie nun Ihr Projekt in Ihrem Repository:

# <code>Projektexplorer</code>: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Projekt gemeinsam nutzen</code>
# <code>SVN</code> → <code>Weiter</code>
# <code>Create a new repository location</code> selektieren
# Url: <code><nowiki>https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT</nowiki></code> ('''<code>ACCOUNT</code> durch eigenen RZ-Account ersetzen''') → <code>Weiter</code>
# Use specified folder name: <code>mmprog/tutorium/HelloWorldCanvas01</code> → <code>Fertigstellen</code>
# Beim ersten Mal: Klick auf <code>Accept permanently</code>
# Beim ersten Mal: Passwort eingeben → Häckchen bei <code>Passwort merken</code> (sonst muss man künftig für jede hozuladende Datei das Passwort eingeben) → <code>OK</code>
# '''Eventuell''': Häckchen bei <code>Entscheidung merken</code> → '''<code>Nein</code>''' (Nicht <code>Ja</code>!!!!)

==Projekt im Repository sichern==

Das neu angelegte Projekt wird gleich mal im Repository gesichert:

# Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Commit</code>
# Enter a comment for the commit operation: <code>Neues Projekt angelegt.</code>
# <code>OK</code>

==Neue HTML-Datei anlegen==

# Im Projektexplorer (linkes Fenster): <code>HelloWorldCanvas01</code> aufklappen
# Rechtsklick auf Ordner <code>WebContent</code> → <code>Neu</code> → <code>HTML file</code>
# Dateiname: <code>hallo.html</code> → <code>Weiter</code> → Templates: <code>New HTML File (5)</code> → <code>Fertigstellen</code>

==HTML-Datei bearbeiten==

Erfassen Sie folgenden Code in der HTML-Seite:

<source lang="html4strict">
<!DOCTYPE html>
<html>
<head>


<title>HTML5-Tutorium: Canvas: Hello World 01</title>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">


<script type="text/javascript">
function init()
{
var l_canvas = document.getElementById("d_canvas");

l_canvas.width = 300;
l_canvas.height = 27;

var l_context = l_canvas.getContext("2d");

l_context.font = "bold 20px 'Times New Roman', Times, serif";
l_context.fillText("Hallo Welt!", 5, 20);
}
</script>

</head>

<body onload="init()">


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

</body>
</html>
</source>

====Anmerkung 1====
Auf das Canvas-Element wird ausschließlich von [[JavaScript]] aus zugegriffen.
Sollte ein Browser dieses Element nicht unterstützen, so wird der alternative
HTML-Code innerhalb des Canvas-Element gerendert und ausgegeben. Hier
könnte beispielsweise eine [[Flash]]-Anwendung ausgeführt werden.

====Anmerkung 2====
Die Meta-Anweisung
<source lang="html4strict">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
</source>
dient dazu, dass der Inhalt der Seite auf einem Smartphone in der richtigen Größe angezeigt wird.

====Anmerkung 3====
Es gibt auch einen WYSIWYG-Editor, den Sie folgendermaßen öffnen können:
# Rechtklick in das Editor-Fenster → <code>Öffnen mit</code> → <code>Web Page Editor</code>

Allerdings unterstützt dieser WYSIWYG-Editor die HTML5-Zeichenbühne [[Canvas]] nicht und ist daher für dieses Tutorium nicht sonderlich nützlich.

==HTML-Seite testen==
# <code>hallo.html</code> speichern: <code>Strg-s</code>
# Wichtig: '''Im <code>Projektexprlorer</code> jeweils vor dem Server-Aufruf <code>hallo.html</code> selektieren''', sonst erhalten Sie eine Fehlermeldung.
# In der Icon-Zeile: Klick auf Icon „grüner Kreis mit weißen Dreieck“ → Serverziel auswählen: <code>JavaScript Web Application</code>
# <code>OK</code>

===Anmerkungen zum Firefox auf den Rechnern des MM-Labors===

Defaultmäßig kann der Firefox im MM-Labor nicht auf lokale Webserver (wie z.B. den Aptana-Server) zugreifen.

Grund: In diesem Firefox ist eine unpassende Proxy-Konfiguration voreingestellt.
Diese Einstellung verhindert den Zugriff auf localhost.

Lösung des Problems:
# Firefox starten
# Einstellungen → Erweitert → Netzwerk → Einstellungen
# Haken von <code>Proxy-Einstellungen des Systems verwenden</code> auf <code>Manuelle Proxy-Konfiguration</code> setzen und als Ausnahme <code>localhost und 127.0.0.1</code> einstellen.

===Anmerkungen zum Test-Sever===

'''Solange Sie nur HTML-Seiten, die JavaScript-Code enthalten, testen wollen, ist das Serverziel <code>JavaScript Web Application</code> die beste Wahl.'''

Sie können allerdings auch andere Web-Server verwenden:

* Den HTTP-Preview-Server, der in Eclipse integriert ist (probieren Sie diesen ruhig einmal an Stelle des JavaScript-Web-Application-Servers aus)
* Tomcat (hier muss [[Installation von Tomcat|Tomcat]] installiert und mit [[Installation von Eclipse#Integration_von_Tomcat|Eclipse verknüpft]] werden)
* Apache (hier muss [[Installation von Apache|Apache]] installiert und mit Eclipse verknüpft werden; siehe [[HTML5-Tutorium: Canvas: Hello World 02#Optional:_Apache_als_Test-Server|Teil 2 des Tutoriums]])
* etc.

In allen diesen Fällen müssten Sie <code>Run on Server</code> an Stelle von
<code>JavaScript Web Application</code> auswählen:
# In der Icon-Zeile: Klick auf Icon „grüner Kreis mit weißen Dreieck“ → Serverziel auswählen: <code>Run on Server</code>
# <code>OK</code>

Den HTTP-Preview-Server wählen Sie folgendermaßen:

<ol start="3">
<li> <code>HTTP Preview</code> → <code>Fertigstellen</code></li>
</ol>

Beachten Sie, dass beim HTTP-Preview-Server mit jedem Klick des Debug-Icons (grüner Keris mit weißen Dreieck) ein neues Browserfenster in Eclipse geöffnet wird.
Daher ist es sinnvoller, im bestehenden Browserfenster das Reload-Icon (zwei kreiförmig angeordnete Pfeile) anzuklicken, um Änderungen an einer der
Web-Dateien sichtbar zu machen.

Für komplexere Web-Seiten mit [[PHP]]-Code, [[JSP]]-Code etc. muss man einen echten Server (wie [[Apache]] oder [[Tomcat]]) installieren und
mit Eclipse verknüpfen.

Wenn der von Ihnen gewählte Test-Web-Server Probleme hat, die
neuen HTML-Seiten darzustellen, kann es notwendig sein, den Server neu zu starten:

# Reiter <code>Server</code> im unteren Fenster selektieren
# Klick auf Icon „rotes Recheck“ (Server stoppen)
# Klick auf Icon „grüner Kreis mit weißem Dreieck“ (Server starten)

==Projekt im Repository sichern==

Jedes funktionierende Zwischenergebnis eines Projektes sollte im Repository gespeichert werden:

# Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Commit</code>
# Enter a comment for the commit operation: <code>hallo.html, ein HTML5-JavaScript-Moloch wurde erstellt.</code>
# <code>OK</code>

==JavaScript-Code auslagern==

Man sollte i. Allg. vermeiden, Javascript-Code direkt in eine HTML-Seite einzufügen.
Diese Verknüpfung von [[View]] und [[Control]] bringt nur Nachteile mit sich:
* Der Code wird unübersichtlicher, da zwei unterschiedliche Sprachen gemischt werden ([[Impedance Mismatch]]).
* Der JavaScript-Code kann nicht in mehreren HTML-Dateien eingesetzt werden ([[Don't Repeat Yourself]]).
* Die Ladezeiten der einzelnen Seiten werden länger, wenn derselbe JavaScript-Code in unterschiedlichen Seinten eingebaut ist und für jede dieser Seiten erneut geladen werden muss.

Aus diesen Gründen sollte man den JavaScript-Code in eigene Dateien auslagern:

# Rechtsklick auf Ordner <code>WebContent</code> → <code>Neu</code> → <code>Ordner</code> → Ordnername: <code>js</code> → <code>Fertigstellen</code>
# Rechtsklick auf Ordner <code>js</code> → <code>Neu</code> → <code>Datei</code> → Dateiname: <code>main.js</code> → <code>Fertigstellen</code>

===Inhalt der Datei <code>main.js</code>===
<source lang="javascript">
"use strict"; /* Warne vor unsauberem JavaScript-Code! */

function init()
{
// Erzeugung und Initialisierung der Bühne (Canvas)
var l_canvas = document.getElementById("d_canvas");

l_canvas.width = 300;
l_canvas.height = 27;

// Textausgabe (auf der Bühne)
var l_context = l_canvas.getContext("2d");

l_context.font = "bold 20px 'Times New Roman', Times, serif";
l_context.fillText("Hallo Welt!", 5, 20);
}
</source>

===Geänderter Inhalt der Datei <code>hallo.html</code>===
<source lang="html4strict">
<!DOCTYPE html>
<html>
<head>


<title>HTML5-Tutorium: Canvas: Hello World 01</title>


<meta charset="UTF-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">


<script type="text/javascript" src="js/main.js"></script>

</head>

<body onload="init()">


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

</body>
</html>
</source>

====Tipp====
Benutzen Sie am Besten die Code-Vervollständigung (<code>Strg-Leerzeichen</code> bzw. <code>Crtl-Space</code>).

Beispiel:
# Klicken Sie testweise im Editor-Fenster der Datei <code>main.js</code> in die leere Zeile 5 der Funktion <code>init</code>.
# Drücken Sie <code>Strg-Leerzeichen</code> und wählen Sie z.B. <code>l_canvas</code>.
# Geben Sie einen Punkt (<code>.</code>) ein und drücken Sie erneut <code>Strg-Leerzeichen</code>.
# Löschen Sie den eben erfassten Inhalt wieder. (Ihre Datei <code>main.js</code> sollte ja schon fertiggestellt gewesen sein.)

==Projekt testen==

Testen Sie Ihr Projekt wieder, indem Sie es im Firefox öffen.

Häufig ist der JavaScript-Code bei den ersten Tests fehlerhaft. In diesen Fällen hilft einem
die JavaScript-Konsole, die z.B. über das Firefox-Plugin [https://addons.mozilla.org/de/firefox/addon/firebug/ Firebug] zugänglich ist, häufig weiter.

Fügen Sie folgenden Code am Ende des Rumpfes der <code>init</code>-Funktion ein:

<source lang="javascript">
console.log( "Canvas wurde erstellt: "
+ l_canvas.width + "*" + l_canvas.height + " Pixel."
);
</source>

Wenn Sie nun die Anwendung erneut im Firefox ausführen, sehen Sie zunächst keine Veränderung.

Überprüfen Sie, ob Firebug im Firefox aktiviert wurde (Drop-Down-Menü beim Icon mit dem Bug (= Käfer) in der rechten oberen Ecke von Firefox).

Öffnen Sie nun das Firebug-Fenster (Icon mit dem Bug) und laden Sie die JavaScript-Anwendung erneut (Reload im Firefox).

Nun sollten Sie im Konsolen-Fenster von Firebug einen Kommentar lesen können.

Wenn alle Tests erfolgreich verlaufen sind, ist es sinnvoll, die
Konsolenausgaben mittels <code>//</code> oder <code>/* ... */</code> auszukommentieren.

==Projekt im Repository sichern==

Auch das Endergebnis des Projektes sollte im Repository gespeichert werden:

# Im Projektexplorer: Rechtsklick auf <code>HelloWorldCanvas01</code> → <code>Team</code> → <code>Commit</code>
# Enter a comment for the commit operation: <code>main.js wurde erstellt, zur Auslagerung des JS-Codes aus hallo.html.</code>
# <code>OK</code>

==Repostitory begutachten==

Nun können Sie den Inhalt in Ihrem Repository betrachten.

# <code>Fenster</code> → <code>Perspektive öffnen</code> → <code>Andere</code>
# <code>SVN Repository Exploring</code> → <code>OK</code>
# Im Dateibaum (linkes Fenster) <code>https://praktikum.multimedia.hs-augsburg.de/svn/ACCOUNT</code> aufklappen → <code>mmprog</code> aufklappen → <code>tutorium</code> aufklappen → <code>HelloWorldCanvas01</code> aufklappen

Hier sehen Sie zunächst den Inhalt des von Ihnen gespeicherten Projektes.
Das Repository kann aber noch mehr. Sie können sich alle gespeicherten Versionen Ihres Projektes ansehen:

<ol start="4">
<li> Rechtsklick auf <code>HelloWorldCanvas01</code> aufklappen → <code>Show History</code></li>
</ol>

Nun sehen Sie im Protokoll-Fester die verschiedenen Versionen des Projektes, mit Revisionsnummer, Author (ein Repository kann von mehreren Autoren gelichzeitig benutzt werden), sowie die von Ihnen eingegebenen Kommentare.

Als letztes sollten Sie sich die Entwichlung der Datei <code>hallo.html</code> einmal näher ansehen:

<ol start="5">
<li> Im Dateibaum <code>WebContent</code> aufklappen → Rechtsklick auf <code>hallo.html</code> → <code>Show Resion Graph</code></li>
</ol>

Hier sehen Sie, dass es von dieser Datei zwei Versionen gibt. Diese können wir auch miteinander vergleichen:

<ol start="6">
<li> Im Dateibaum Rechtsklick auf <code>hallo.html</code> → <code>Compare</code> → <code>OK</code></li>
</ol>

In Vergleich der beiden Versionen erkennt mann, dass der JavaScript-Code durch einen Zugriff auf die Datei
<code>js/main.js</code> ersetzt wurde.

Kehren Sie nun in die normale Arbeitsumgebung zurück:

<ol start="7">
<li> In der Icon-Leiste oben rechts auf das Icon der Arbeitsumgebung (Perspektive) <code>Web</code> klicken.</li>
</ol>

Neben den Icon <code>Web</code> finden Sie jetzt auch ein Icon für die Arbeitsumgebung <code>SVN Repository Exploring</code>,
damit Sie künftig schneller in diese Perspektive wechseln können.

=Quellen=
# {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}
# [http://blog.webagesolutions.com/archives/419 Coding HTML5 Pages Using Eclipse]
# [http://www.html5canvastutorials.com/tutorials/html5-canvas-text/ HTML5 Canvas Text Tutorial]

=Siehe auch=
# {{SieheAuch|Pilgrim (2011)}}
# [http://www.w3schools.com/html5/ w3schools.com: HTML5 Tutorial]
# [http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html HTML Living Standard — The canvas element]

<noinclude>[[Kategorie: HTML5-Tutorium: Canvas: Hello World]][[Kategorie: HTML5-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]
</noinclude>

Benutzer Diskussion:Rayza

2012-10-10T00:15:42Z

Rayza: /* Umstrukturierungsvorschlag Eclipse Installation */

== Umstrukturierungsvorschlag Eclipse Installation ==

<pre>
{{Qualität
|correctness = 4
|extent = 4
|numberOfReferences = 5
|qualityOfReferences = 4
|conformance = 4
}}
=Vorbemerkung=

[[Eclipse]] ist für die Entwicklung von dynamische Web-Anwendungen mit und ohne einen Web-Server (wie z.B. Tomcat) recht gut geeignet.

Für Windows werden folgende Annahmen gemacht: Auf der Partition C befindet sich das Windows-System und die Benutzerdaten.
Da Eclipse „out of the box“ läuft, wird es auf der Partition mit den Benutzerdaten installiert.

==Android SDK (optional)==
Um mit Eclipse Apps für Android entwickeln zu können, wird das Android SDK benötigt.
Installieren Sie dies zuerst:

* <code>http://developer.android.com/sdk/index.html</code>: <code>installer_r...-windows.exe</code> herunterladen und ausführen.
* '''Wählen Sie einen kurzen Installationspfad ohne Leerzeichen aus, z.B. <code>C:\web\android-sdk</code> (Windows) bzw. <code>/Benutzer/'''BENUTZERNAME'''/Programmierung/web/android-sdk</code> (Mac OS), auf das Benutzer ohne Administrationsrechte zugreifen können.'''
* <code>Start SDK-Manager</code> ? <code>OK</code>
* APIs auswählen für die entwickelt werden soll (z.B. API 16, API 10 und Extras) ? <code>Install ... packages</code> ? <code>Accept All</code> (rechts!) ? <code>Install</code>, '''Achtung: Dieser Vorgang dauert länger. Sie können ihn später nachholen, indem Sie Eclipse starten und <code>Fenster</code> ? <code>Android SDK Manager</code> aufrufen'''
* Es erscheinen zwei Aufforderungen, sich einzuloggen. Diese können einfach weggeklickt werden.
* Aufgrund der vorherigen Aktion werden nicht alle Paktete installiert. Das ist jedoch nicht weiter schlimm.
* '''Abschließend sollte das Paket <code>Extras</code> ? <code>Google USB Driver</code> separat installiert werden, sofern es nicht installiert wurde.'''

==Vorgefertigete Eclipse-Instanzen (derzeit nur für Windows 7)==

Für die in diesem Wiki beschriebenen Tutorien gibt es folgende vorgefertigte Eclipse-Instanzen:
* [http://glossar.hs-augsburg.de/svn/eclipse/eclipse_mmprog_x64.zip Eclipse für MMProg (Windows 7, 64 Bit)], [http://glossar.hs-augsburg.de/svn/eclipse/workspace_mmprog_x64.zip zugehöriger Workspace <code>workspace_mmprog</code>]

Sie können diese beiden Dateien herunterladen und in einen Ordner Ihrer Wahl (am Besten <code>C:\web</code>) entpacken.
Stellen Sie sicher, das das Android SDK bereits installiert wurde.
Rufen Sie nun <code>C:\web\eclipse\eclipse.exe</code> auf und geben Sie <code>C:\web\workspace_mmprog</code>
als Workspace an.

Passen Sie nun den Workspace an Ihre Rechner-Umgebung an:
* Wenn Sie Ihren eigenen Workspace verwenden, so müssen Sie diesen noch [[Konfiguration von Eclipse|konfigurieren]].
* Wenn Sie den Workspace <code>workspace_mmprog</code> verwenden, so müssen Sie noch ein Paar [[Konfiguration von Eclipse/Anpassungen_des_MMProg-Workspaces|Anpassungen]] vornehmen.
* Wenn Sie Eclipse vollkommen neu installieren, so sollten Sie die nachfolgenden Installationshinweise beachten.

Tipp: Wenn man sich nicht manuell um das Updaten von Plugins kümmern möchte, empfiehlt es sich wo möglich Update Sites zu verwenden.

=Installation von Eclipse=

* Eclipse (Juno, 4.2) herunterladen:
** Eclipse IDE for Java EE Developers (32 Bit oder 64 Bit) [http://eclipse.org/downloads/ herunterladen]
* Zip-Datei nach <code>C:/web</code> (Windows) bzw. <code>/Applications/</code> (Mac OS) entpacken ? <code>C:/web/eclipse</code> enthält Eclipse (<code>C:/web/eclipse/eclipse.exe</code> bzw. <code>/Applications/eclipse/Eclipse.app</code>)

=Diverse weitere Eclipse-Pakete installieren=

==Kurze Variante (Eclipse auf Englisch)==

===XML-Editor „Rinzo“, Subclipse und Aptana===
* [http://glossar.hs-augsburg.de/svn/eclipse/bookmarks.xml Diese XML-Datei] welche die Update-Sites enthält herunterladen.
* <code>Window</code> ? <code>Install/Update</code> ausklappen ? <code>Available Software Sites</code> ? <code>Import</code> ? Datei auswählen ? <code>Öffnen</code>
* <code>Help</code> ? <code>Install New Software...</code>
* Work with: <code>--All Available Sites--</code>
* <code>Aptana Studio 3</code>, <code>Rinzo XML Editor</code> und <code>Subclipse</code> auswählen ? <code>Next</code> ? <code>Next</code> ? Lizenzen akzeptieren ? <code>Finish</code>
* Warnung akzeptieren: <code>OK</code>
* Neustarten-Frage bejahen: <code>Yes</code>

==Lange Variante==

===XML-Editor „Rinzo“===
Da in Eclipse ein guter XML-Editor fehlt, sollte ein geeigneter Editor installiert werden.
Die wirklich guten Editoren gibt es leider nicht als Open-Source-Software. Der XML-Editor
„Rinzo“ ist zwar nicht sehr leistungsfähig, dafür aber Open-Source-Software.

Variante 1 (Update-Site):
* <code>C:\web\eclipse\eclipse.exe</code> bzw. <code>/Applications/eclipse</code> starten
* <code>Hilfe</code> ? <code>Neue Software installieren...</code>
* Work with: <code>''http://editorxml.sourceforge.net/updates''</code> ? <code>Hinzufügen</code>
* Name: <code>''Subclipse''</code> ? <code>OK</code>
* Alle Pakete auswählen ? <code>Weiter</code> ? <code>Weiter</code> ? <code>Ich akzeptiere ...</code> auswählen ? <code>Fertigstellen</code>
* Warnung akzeptieren: <code>OK</code>
* <code>Jetzt neu starten</code>

Variante 2 (manuell):
* XML-Editor Rinzo [http://sourceforge.net/projects/editorxml/ herunterladen]
* Inhalt der ZIP-Datei in Verzeichnis <code>C:\web\eclipse\dropins</code> bzw. <code>/Applications/eclipse/dropins</code> einfügen
* Eclipse neu starten

===Subclipse===
Sublipse ist ein recht guter [[Subversion|Subversion-Client]] für Eclipse.

Die meisten Eclipse-Pakete können sehr einfach mit Hilfe von Update-Sites
installiert werden, so auch Subclipse.

* <code>C:\web\eclipse\eclipse.exe</code> bzw. <code>/Applications/eclipse</code> starten
* <code>Hilfe</code> ? <code>Neue Software installieren...</code>
* Work with: <code>''http://subclipse.tigris.org/update_1.8.x''</code> ? <code>Hinzufügen</code>
* Name: <code>''Subclipse''</code> ? <code>OK</code>
* Alle Pakete auswählen ? <code>Weiter</code> ? <code>Weiter</code> ? <code>Ich akzeptiere ...</code> auswählen ? <code>Fertigstellen</code>
* Warnung akzeptieren: <code>OK</code>
* <code>Jetzt neu starten</code>
* Haken vor <code>Report usage ...</code> entfernen.
* <code>OK</code>

===Aptana===

Aptana ist ein Eclipse-Plugin zur Entwicklung von HTML/JavaScript-Anwendungen.

* <code>C:\web\eclipse\eclipse.exe</code> bzw. <code>/Applications/eclipse</code> starten
* <code>Hilfe</code> ? <code>Neue Software installieren...</code>
* Work with: <code>''http://download.aptana.com/studio3/plugin/install''</code> ? <code>Hinzufügen</code>
* Name: <code>''Aptana''</code> ? <code>OK</code>
* Alle Pakete auswählen ? <code>Weiter</code> ? <code>Weiter</code> ? <code>Ich akzeptiere ...</code> auswählen ? <code>Fertigstellen</code>
* Warnung akzeptieren: <code>OK</code>
* <code>Jetzt neu starten</code>
* <code>OK</code>

Wem das Aptana-HTML-Farbschema nicht gefällt, der kann dieses ändern:

* <code>Fenster</code> ? <code>Benutzervorgaben</code> ? <code>Aptana Studio</code> aufklappen ? <code>Themes</code> ? Drop-Down-Men+ (Inhalt <code>Aptana Studio)</code> öffnen und neues Farbschema wählen ?<code>OK</code>

==YUI Compressor ==

* YUI Compressor ([http://yuilibrary.com/download/yuicompressor/ yuicompressor-2.x.x.zip]) herunterladen
* yuicompressor-2.x.x.zip in den Ordner <code>C:\web\eclipse\dropins</code> bzw. <code>/Applications/eclipse/dropins</code> entpacken
* Ordner <code>C:\web\eclipse\dropins\yuicompressor</code> bzw. <code>/Applications/eclipse/dropins/yuicompressor</code> erstellen
* In den Ordner <code>C:\web\eclipse\dropins\yuicompressor</code> bzw. <code>/Applications/eclipse/dropins/yuicompressor</code> die Datei [http://glossar.hs-augsburg.de/svn/eclipse/build.xml <code>build.xml</code>]<ref>vgl. {{Quelle|Santos, S. (2009): Combine and minimize JavaScript and CSS files for faster loading}}</ref> einfügen

Passen Sie in der Datei <code>build.xml</code> den Pfad und Versionnummer des YUI Compressors in den beiden Zeilen

<source lang="xml">
Windows...
<property name="BUILD_DIR" value="C:/web/eclipse/dropins/yuicompressor-2.4.7/build" description="Files needed to build" />
<property name="YUI" value="${BUILD_DIR}/yuicompressor-2.4.7.jar" description="YUICompressor" />
...
</source>

<source lang="xml">
OS X...
<property name="BUILD_DIR" value="/Applications/eclipse/dropins/yuicompressor-2.4.7/build" description="Files needed to build" />
<property name="YUI" value="${BUILD_DIR}/yuicompressor-2.4.7.jar" description="YUICompressor" />
...
</source>

an Ihre Gegebenheiten an.

==Optionale Pakete==
Bei folgende Pakete macht nur in bestimmten Situationen Sinn sie zu installieren.

===ADT===
ADT ist ein Eclipse-Plugin, dass die Entwicklung von [[Java]]-Anwendungen für [[Android]]-[[Smarphone]]s ermöglicht.
Voraussetzung ist, dass das Android SDK installiert worden ist.

* <code>C:\web\eclipse\eclipse.exe</code> bzw. <code>/Applications/eclipse</code> starten
* <code>Hilfe</code> ? <code>Neue Software installieren...</code>
* Work with: <code>''https://dl-ssl.google.com/android/eclipse/''</code> ? <code>Hinzufügen</code>
* Name: <code>''ADT''</code> ? <code>OK</code>
* Alle Pakete auswählen ? <code>Weiter</code> ? <code>Weiter</code> ? <code>Ich akzeptiere ...</code> auswählen ? <code>Fertigstellen</code>
* Warnung akzeptieren: <code>OK</code>
* <code>Jetzt neu starten</code>
* <code>Fenster</code> ? <code>Benutzervorgaben</code> ? <code>Android</code>
* Wenn dieser Menü-Punkt das erste Mal aufgerufen wird, fragt Eclipse nach, ob ADT-Benutzungsstatistiken an Google gesendet werden sollen. Hier würde ich das ensprechende Häckchen entfernen ? Auf jeden Fall muss <code>Proceed</code> angeklickt werden.
* SDK Location: <code>C:\web\android-sdk</code> bzw. <code>/Benutzer/'''BENUTZERNAME'''/Programmierung/web/android-sdk</code> (Installationsverzeichnis des SDK-Managers;'''der Pfad darf keine Leerzeichen enthalten''') ? <code>Anwenden</code> ? <code>OK</code>
* <code>Fenster</code> ? <code>Android SDK Manager</code> starten
* <code>Android SDK Platformtools</code> installieren (falls diese nicht bereits installiert worden sind)

===Deutsche Sprachpakete installieren===
Das [http://www.eclipse.org/babel/downloads.php Eclipse Babel Project] stellt diverse Sprach-Pakete zu Verfügung, die allerdings noch nicht ganz fertiggestellt sind.

# Eclipse starten (<code>C:\web\eclipse\eclipse.exe</code> bzw. <code>/Applications/eclipse/Eclipse.app</code>)
# Wählen Sie einen geeignet Workspace aus (z.B. <code>C:\web\mmprog</code> bzw. <code>/Benutzer/'''BENUTZERNAME'''/Studium/mmprog</code>; auf den Laborrechnern müssen Sie Ihr Home-Verzeichnis nehmen, nicht den Desktop!)
# <code>Help</code> ? <code>Install New Software</code>
# Work with: <code>''http://download.eclipse.org/technology/babel/update-site/R0.10.0/juno''</code> (bei Eclipse Indigo: <code>''http://archive.eclipse.org/technology/babel/update-site/R0.9.1/indigo''</code>) ? <code>Add</code>
# <code>Name: ''Babel''</code> ? <code>OK</code>
# (lange) warten bis <code>Pending</code> verschwindet
# <code>Babel Language Packs in German</code> selektieren ? <code>Next</code> ? <code>Next</code> ? <code>I accept ...</code> selektieren ? <code>Finish</code>
# Warnung akzeptieren: <code>OK</code>
# <code>Restart Now</code>

Häufig sind die Babel Eclipse Server überlastet und eine manuelle Installation des Sprachpakets ist optional möglich:
# Downloaden des Pakets <code>''http://download.eclipse.org/technology/babel/babel_language_packs/R0.10.0/juno/juno.php#de''</code> (vgl. <code>http://www.eclipse.org/babel/downloads.php</code>)
# <code>BabelLanguagePack-eclipse-de_4.2.0.v20120721043402.zip</code> herunterladen
# Die beiden Ordner, die im Ordner <code>eclipse</code> des ZIP-Archivs enthalten sind, in den Eclipse-Programm-Ordner <code>C:\web\eclipse</code>
# Bei OSX Vorsicht! - Inhalte der Ordner '''features''' und '''plugins''' in die jeweiligen Ordner <code>/Applications/eclipse/features</code> und <code>/Applications/eclipse/plugins</code> kopieren
# Eclipse neu starten

====Deutsche Rechtschreibprüfung installieren====
# [http://a-weinert.de/frame4j/downloads/de_DE.dic de_DE.dic] (von Albrecht Weinert) herunterladen und unter <code>C:/web/eclipse/dropins</code> bzw. <code>/Applications/eclipse/dropins</code> speichern
# <code>Fenster</code> ? <code>Benutzervorgaben</code> ? <code>Allgemein</code> aufklappen ? <code>Editoren</code> aufklappen ? <code>Texteditoren</code> aufklappen ? <code>Schreibprüfung selektieren</code>
# Benutzerdefiniertes Wöerterbuch: <code>Durchsuchen</code> und die Datei <code>de_DE.dic</code> selektieren (bzw. <code>${eclipse_home}\dropins\de_DE.dic</code> eintragen)
# Codierung: <code>Sonstige</code> anklicken ? <code>UTF-8</code> wählen
# <code>OK</code>

Tipp: Wenn Sie mit der Maus ein rot unterringeltes Wort anklicken und anschließend <code>Strg-1</code> (<code>Ctrl-1</code>) drücken,
können Sie das Wort ins Wörterbuch einfügen oder andere Aktionen durchführen, damit ein vermeintlicher Rechtschreibfehler nicht mehr angezeigt wird.

==Installation des Flash Builder (optional)==

[[Flash Builder]] ist eine kommerzielle Software, basierend auf Eclipse Indigo, zum Entwickeln von [[Flash]]-Anwendungen.
Man kann [http://www.adobe.com/cfusion/tdrc/index.cfm?product=flash_builder&loc=de Flash Builder 4.6] (nach erfolgreicher Registrierung) als 60-Tage-Testlizenz herunterladen.

* [http://www.adobe.com/cfusion/tdrc/index.cfm?product=flash_builder&loc=de Flash Builder 4.6] herunterlanden
* Eclipse und Browser beenden
* FlashBuilder_4_6_LS10.exe ausführen und [http://kb2.adobe.com/de/releasenotes/921/cpsid_92180.html#main_Install%20your%20software Flash Builder installieren]

'''Als Studierender''' erhält man eine '''kostenlose Lizenz''' für den Flash Builder, indem man im [http://www.adobe.com/de/devnet/flex/free/index.html Adobe Flex Developer Center] mit seinen persönliche Daten und JPEG-Kopie der Immatrikulationsbescheinigung Lizenz anfordert. Diese wird einem dann per E-Mail zugeschickt.

Die meisten der nachfolgenden Installations- und Konfigurationsvorschläge funktionieren auch für den Flash-Builder.
Sie sollten allerdings nur Subclipse und evtl. Rinzo installieren. Die anderen Pakete sind für eine Flash/ActionScript-Entwicklung
unnötig.

Beachten Sie, dass der Flash Builder auf ''Eclipse Indigo'', der Vorgänger-Version von ''Eclipse Juno'', basiert und daher
die Installationsschritte leicht abweichen können.

Zu guter Letzt sollten Sie den Flash Builder [[Konfiguration von Eclipse|konfigurieren]].

=Eclipse konfigurieren=

Befolgen Sie die Anweisungen von „[[Konfiguration von Eclipse]]“.

=Integration von Tomcat=

Tomcat wird folgendermaßen in Eclipse eingebunden:

* <code>Datei</code> ? <code>Neu</code> ? <code>Andere</code>
* Klick auf Dreieck vor <code>Server</code> ? <code>Server</code>
* Klick auf Dreieck vor <code>Apache</code> ? <code>Tomcat Version 7.0 - Server</code> ? <code>Weiter</code>/<code>Fertig stellen</code> (je nachdem, welcher Button klickbar ist)
* Tomcat-Installationsverzeichnis angeben: <code>C:\web\tomcat</code>
* Klick auf <code>Fertig stellen</code>

Tomcat-Projekt benötigen eine Laufzeit-Umgebung, in der die eigentlichen Web-Auftritte gespeicher werden. Hierfür gibt es mehrere Möglichkeiten:
* das Tomcat-Webapps-Verzeichnis (<code>C:\web\tomcat\webapps</code>)
* ein spezieller Ordner im versteckten Verzeichnis <code>C:\web\workspace\.metadata</code> (schwer zu finden, nicht zu empfehlen)
* ein Eclipse-Projekt namens Tomcat, auf dessen Inhalt auch direkt über Eclipse zugegriffen werden kann

Hier wird die dritte Möglichkeit verwendet:

* <code>Datei</code> ? <code>Neu</code> ? <code>Andere</code>
* Klick auf Dreieck vor <code>Allgemein</code> ? <code>Projekt</code>
* Projektname: <code>Tomcat</code>
* Tomcat konfigurieren: <code>Server</code> ? Doppelklick <code>Tomcat Version 7.0 - Server</code>
* Tomcat konfigurieren: <code>Use custom Location</code> ? Server path: <code>Tomcat</code> (das ist das zuvor angelegte Projekt), Deploy path: <code>webapps</code>
* Tomcat ist einsatzbereit: <code>Server</code> ? Rechtsklick <code>Tomcat Version 7.0 - Server</code> oder Steuermenü in der Serverleist: Tomcat starten/stoppen etc.

<gallery widths="350" heights="250" perrow="2">
Medium:Eclipse_Tomcat_01.png | Neue Tomcat-Umgebung erstellen: <code>Andere</code> wählen
Medium:Eclipse_Tomcat_02.png | Neue Tomcat-Umgebung erstellen: <code>Server</code> wählen
Medium:Eclipse_Tomcat_03.png | Neue Tomcat-Umgebung erstellen: <code>Tomcat 6 </code> wählen
Medium:Eclipse_Tomcat_04.png | Pfad zu Tomcat-Server angeben
Medium:Eclipse_Tomcat_01.png | Generischs Projekt erstellen: <code>Andere</code> wählen
Medium:Eclipse_Tomcat_05.png | Generische Projekt erstellen: <code>Projekt</code> wählen
Medium:Eclipse_Tomcat_06.png | Projektname <code>Tomcat</code>
Medium:Eclipse_Tomcat_07.png | Tomcat konfigurieren und mit <code>Strg-S</code> speichern
Medium:Eclipse_Tomcat_08.png | Tomcat verwalten: starten/stoppen/etc.
Medium:Eclipse_Tomcat_09.png | Tomcat-Log-Datei: Der Start war erfolgreich
</gallery>

=Integration von Apache=
{{TBD}}

=Quellen=
<references/>
<ol start="2">
<li> {{Quelle|Kowarschick, W.: Content-Management}}</li>
<li> {{Quelle|Kowarschick, W.: Multimedia-Datenbanksysteme}}</li>
<li> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>
Alle übrigen Quellen wurden direkt im Text angegeben.
[[Kategorie:Kapitel:Web-Programmierung]][[Kategorie:Web-Programmierung-HowTo]]
</pre>

== bookmarks.xml ==
<code><pre>
<?xml version="1.0" encoding="UTF-8"?>
<bookmarks>
<site url="http://download.aptana.com/studio3/plugin/install" selected="true" name="Aptana Studio 3"/>
<site url="http://editorxml.sourceforge.net/updates/" selected="true" name="Rinzo XML Editor"/>
<site url="http://subclipse.tigris.org/update_1.8.x" selected="true" name="Subclipse 1.8.x Update Site"/>
</bookmarks>
</pre>
</code>

Benutzer Diskussion:Rayza

2012-10-10T00:14:34Z

Rayza: /* Umstrukturierungsvorschlag Eclipse Installation */

== Umstrukturierungsvorschlag Eclipse Installation ==

<pre>
{{Qualität
|correctness = 4
|extent = 4
|numberOfReferences = 5
|qualityOfReferences = 4
|conformance = 4
}}
=Vorbemerkung=

[[Eclipse]] ist für die Entwicklung von dynamische Web-Anwendungen mit und ohne einen Web-Server (wie z.B. Tomcat) recht gut geeignet.

Für Windows werden folgende Annahmen gemacht: Auf der Partition C befindet sich das Windows-System und die Benutzerdaten.
Da Eclipse „out of the box“ läuft, wird es auf der Partition mit den Benutzerdaten installiert.

==Android SDK (optional)==
Um mit Eclipse Apps für Android entwickeln zu können, wird das Android SDK benötigt.
Installieren Sie dies zuerst:

* <code>http://developer.android.com/sdk/index.html</code>: <code>installer_r...-windows.exe</code> herunterladen und ausführen.
* '''Wählen Sie einen kurzen Installationspfad ohne Leerzeichen aus, z.B. <code>C:\web\android-sdk</code> (Windows) bzw. <code>/Benutzer/'''BENUTZERNAME'''/Programmierung/web/android-sdk</code> (Mac OS), auf das Benutzer ohne Administrationsrechte zugreifen können.'''
* <code>Start SDK-Manager</code> ? <code>OK</code>
* APIs auswählen für die entwickelt werden soll (z.B. API 16, API 10 und Extras) ? <code>Install ... packages</code> ? <code>Accept All</code> (rechts!) ? <code>Install</code>, '''Achtung: Dieser Vorgang dauert länger. Sie können ihn später nachholen, indem Sie Eclipse starten und <code>Fenster</code> ? <code>Android SDK Manager</code> aufrufen'''
* Es erscheinen zwei Aufforderungen, sich einzuloggen. Diese können einfach weggeklickt werden.
* Aufgrund der vorherigen Aktion werden nicht alle Paktete installiert. Das ist jedoch nicht weiter schlimm.
* '''Abschließend sollte das Paket <code>Extras</code> ? <code>Google USB Driver</code> separat installiert werden, sofern es nicht installiert wurde.'''

==Vorgefertigete Eclipse-Instanzen (derzeit nur für Windows 7)==

Für die in diesem Wiki beschriebenen Tutorien gibt es folgende vorgefertigte Eclipse-Instanzen:
* [http://glossar.hs-augsburg.de/svn/eclipse/eclipse_mmprog_x64.zip Eclipse für MMProg (Windows 7, 64 Bit)], [http://glossar.hs-augsburg.de/svn/eclipse/workspace_mmprog_x64.zip zugehöriger Workspace <code>workspace_mmprog</code>]

Sie können diese beiden Dateien herunterladen und in einen Ordner Ihrer Wahl (am Besten <code>C:\web</code>) entpacken.
Stellen Sie sicher, das das Android SDK bereits installiert wurde.
Rufen Sie nun <code>C:\web\eclipse\eclipse.exe</code> auf und geben Sie <code>C:\web\workspace_mmprog</code>
als Workspace an.

Passen Sie nun den Workspace an Ihre Rechner-Umgebung an:
* Wenn Sie Ihren eigenen Workspace verwenden, so müssen Sie diesen noch [[Konfiguration von Eclipse|konfigurieren]].
* Wenn Sie den Workspace <code>workspace_mmprog</code> verwenden, so müssen Sie noch ein Paar [[Konfiguration von Eclipse/Anpassungen_des_MMProg-Workspaces|Anpassungen]] vornehmen.
* Wenn Sie Eclipse vollkommen neu installieren, so sollten Sie die nachfolgenden Installationshinweise beachten.

Tipp: Wenn man sich nicht manuell um das Updaten von Plugins kümmern möchte, empfiehlt es sich wo möglich Update Sites zu verwenden.

=Installation von Eclipse=

* Eclipse (Juno, 4.2) herunterladen:
** Eclipse IDE for Java EE Developers (32 Bit oder 64 Bit) [http://eclipse.org/downloads/ herunterladen]
* Zip-Datei nach <code>C:/web</code> (Windows) bzw. <code>/Applications/</code> (Mac OS) entpacken ? <code>C:/web/eclipse</code> enthält Eclipse (<code>C:/web/eclipse/eclipse.exe</code> bzw. <code>/Applications/eclipse/Eclipse.app</code>)

=Diverse weitere Eclipse-Pakete installieren=

==Kurze Variante (Eclipse auf Englisch)==

===XML-Editor „Rinzo“, Subclipse und Aptana===
* Diese [http://glossar.hs-augsburg.de/svn/eclipse/bookmarks.xml XML-Datei] mit den Update-Sites herunterladen.
* <code>Window</code> ? <code>Install/Update</code> ausklappen ? <code>Available Software Sites</code> ? <code>Import</code> ? Datei auswählen ? <code>Öffnen</code>
* <code>Help</code> ? <code>Install New Software...</code>
* Work with: <code>--All Available Sites--</code>
* <code>Aptana Studio 3</code>, <code>Rinzo XML Editor</code> und <code>Subclipse</code> auswählen ? <code>Next</code> ? <code>Next</code> ? Lizenzen akzeptieren ? <code>Finish</code>
* Warnung akzeptieren: <code>OK</code>
* Neustarten-Frage bejahen: <code>Yes</code>

==Lange Variante==

===XML-Editor „Rinzo“===
Da in Eclipse ein guter XML-Editor fehlt, sollte ein geeigneter Editor installiert werden.
Die wirklich guten Editoren gibt es leider nicht als Open-Source-Software. Der XML-Editor
„Rinzo“ ist zwar nicht sehr leistungsfähig, dafür aber Open-Source-Software.

Variante 1 (Update-Site):
* <code>C:\web\eclipse\eclipse.exe</code> bzw. <code>/Applications/eclipse</code> starten
* <code>Hilfe</code> ? <code>Neue Software installieren...</code>
* Work with: <code>''http://editorxml.sourceforge.net/updates''</code> ? <code>Hinzufügen</code>
* Name: <code>''Subclipse''</code> ? <code>OK</code>
* Alle Pakete auswählen ? <code>Weiter</code> ? <code>Weiter</code> ? <code>Ich akzeptiere ...</code> auswählen ? <code>Fertigstellen</code>
* Warnung akzeptieren: <code>OK</code>
* <code>Jetzt neu starten</code>

Variante 2 (manuell):
* XML-Editor Rinzo [http://sourceforge.net/projects/editorxml/ herunterladen]
* Inhalt der ZIP-Datei in Verzeichnis <code>C:\web\eclipse\dropins</code> bzw. <code>/Applications/eclipse/dropins</code> einfügen
* Eclipse neu starten

===Subclipse===
Sublipse ist ein recht guter [[Subversion|Subversion-Client]] für Eclipse.

Die meisten Eclipse-Pakete können sehr einfach mit Hilfe von Update-Sites
installiert werden, so auch Subclipse.

* <code>C:\web\eclipse\eclipse.exe</code> bzw. <code>/Applications/eclipse</code> starten
* <code>Hilfe</code> ? <code>Neue Software installieren...</code>
* Work with: <code>''http://subclipse.tigris.org/update_1.8.x''</code> ? <code>Hinzufügen</code>
* Name: <code>''Subclipse''</code> ? <code>OK</code>
* Alle Pakete auswählen ? <code>Weiter</code> ? <code>Weiter</code> ? <code>Ich akzeptiere ...</code> auswählen ? <code>Fertigstellen</code>
* Warnung akzeptieren: <code>OK</code>
* <code>Jetzt neu starten</code>
* Haken vor <code>Report usage ...</code> entfernen.
* <code>OK</code>

===Aptana===

Aptana ist ein Eclipse-Plugin zur Entwicklung von HTML/JavaScript-Anwendungen.

* <code>C:\web\eclipse\eclipse.exe</code> bzw. <code>/Applications/eclipse</code> starten
* <code>Hilfe</code> ? <code>Neue Software installieren...</code>
* Work with: <code>''http://download.aptana.com/studio3/plugin/install''</code> ? <code>Hinzufügen</code>
* Name: <code>''Aptana''</code> ? <code>OK</code>
* Alle Pakete auswählen ? <code>Weiter</code> ? <code>Weiter</code> ? <code>Ich akzeptiere ...</code> auswählen ? <code>Fertigstellen</code>
* Warnung akzeptieren: <code>OK</code>
* <code>Jetzt neu starten</code>
* <code>OK</code>

Wem das Aptana-HTML-Farbschema nicht gefällt, der kann dieses ändern:

* <code>Fenster</code> ? <code>Benutzervorgaben</code> ? <code>Aptana Studio</code> aufklappen ? <code>Themes</code> ? Drop-Down-Men+ (Inhalt <code>Aptana Studio)</code> öffnen und neues Farbschema wählen ?<code>OK</code>

==YUI Compressor ==

* YUI Compressor ([http://yuilibrary.com/download/yuicompressor/ yuicompressor-2.x.x.zip]) herunterladen
* yuicompressor-2.x.x.zip in den Ordner <code>C:\web\eclipse\dropins</code> bzw. <code>/Applications/eclipse/dropins</code> entpacken
* Ordner <code>C:\web\eclipse\dropins\yuicompressor</code> bzw. <code>/Applications/eclipse/dropins/yuicompressor</code> erstellen
* In den Ordner <code>C:\web\eclipse\dropins\yuicompressor</code> bzw. <code>/Applications/eclipse/dropins/yuicompressor</code> die Datei [http://glossar.hs-augsburg.de/svn/eclipse/build.xml <code>build.xml</code>]<ref>vgl. {{Quelle|Santos, S. (2009): Combine and minimize JavaScript and CSS files for faster loading}}</ref> einfügen

Passen Sie in der Datei <code>build.xml</code> den Pfad und Versionnummer des YUI Compressors in den beiden Zeilen

<source lang="xml">
Windows...
<property name="BUILD_DIR" value="C:/web/eclipse/dropins/yuicompressor-2.4.7/build" description="Files needed to build" />
<property name="YUI" value="${BUILD_DIR}/yuicompressor-2.4.7.jar" description="YUICompressor" />
...
</source>

<source lang="xml">
OS X...
<property name="BUILD_DIR" value="/Applications/eclipse/dropins/yuicompressor-2.4.7/build" description="Files needed to build" />
<property name="YUI" value="${BUILD_DIR}/yuicompressor-2.4.7.jar" description="YUICompressor" />
...
</source>

an Ihre Gegebenheiten an.

==Optionale Pakete==
Bei folgende Pakete macht nur in bestimmten Situationen Sinn sie zu installieren.

===ADT===
ADT ist ein Eclipse-Plugin, dass die Entwicklung von [[Java]]-Anwendungen für [[Android]]-[[Smarphone]]s ermöglicht.
Voraussetzung ist, dass das Android SDK installiert worden ist.

* <code>C:\web\eclipse\eclipse.exe</code> bzw. <code>/Applications/eclipse</code> starten
* <code>Hilfe</code> ? <code>Neue Software installieren...</code>
* Work with: <code>''https://dl-ssl.google.com/android/eclipse/''</code> ? <code>Hinzufügen</code>
* Name: <code>''ADT''</code> ? <code>OK</code>
* Alle Pakete auswählen ? <code>Weiter</code> ? <code>Weiter</code> ? <code>Ich akzeptiere ...</code> auswählen ? <code>Fertigstellen</code>
* Warnung akzeptieren: <code>OK</code>
* <code>Jetzt neu starten</code>
* <code>Fenster</code> ? <code>Benutzervorgaben</code> ? <code>Android</code>
* Wenn dieser Menü-Punkt das erste Mal aufgerufen wird, fragt Eclipse nach, ob ADT-Benutzungsstatistiken an Google gesendet werden sollen. Hier würde ich das ensprechende Häckchen entfernen ? Auf jeden Fall muss <code>Proceed</code> angeklickt werden.
* SDK Location: <code>C:\web\android-sdk</code> bzw. <code>/Benutzer/'''BENUTZERNAME'''/Programmierung/web/android-sdk</code> (Installationsverzeichnis des SDK-Managers;'''der Pfad darf keine Leerzeichen enthalten''') ? <code>Anwenden</code> ? <code>OK</code>
* <code>Fenster</code> ? <code>Android SDK Manager</code> starten
* <code>Android SDK Platformtools</code> installieren (falls diese nicht bereits installiert worden sind)

===Deutsche Sprachpakete installieren===
Das [http://www.eclipse.org/babel/downloads.php Eclipse Babel Project] stellt diverse Sprach-Pakete zu Verfügung, die allerdings noch nicht ganz fertiggestellt sind.

# Eclipse starten (<code>C:\web\eclipse\eclipse.exe</code> bzw. <code>/Applications/eclipse/Eclipse.app</code>)
# Wählen Sie einen geeignet Workspace aus (z.B. <code>C:\web\mmprog</code> bzw. <code>/Benutzer/'''BENUTZERNAME'''/Studium/mmprog</code>; auf den Laborrechnern müssen Sie Ihr Home-Verzeichnis nehmen, nicht den Desktop!)
# <code>Help</code> ? <code>Install New Software</code>
# Work with: <code>''http://download.eclipse.org/technology/babel/update-site/R0.10.0/juno''</code> (bei Eclipse Indigo: <code>''http://archive.eclipse.org/technology/babel/update-site/R0.9.1/indigo''</code>) ? <code>Add</code>
# <code>Name: ''Babel''</code> ? <code>OK</code>
# (lange) warten bis <code>Pending</code> verschwindet
# <code>Babel Language Packs in German</code> selektieren ? <code>Next</code> ? <code>Next</code> ? <code>I accept ...</code> selektieren ? <code>Finish</code>
# Warnung akzeptieren: <code>OK</code>
# <code>Restart Now</code>

Häufig sind die Babel Eclipse Server überlastet und eine manuelle Installation des Sprachpakets ist optional möglich:
# Downloaden des Pakets <code>''http://download.eclipse.org/technology/babel/babel_language_packs/R0.10.0/juno/juno.php#de''</code> (vgl. <code>http://www.eclipse.org/babel/downloads.php</code>)
# <code>BabelLanguagePack-eclipse-de_4.2.0.v20120721043402.zip</code> herunterladen
# Die beiden Ordner, die im Ordner <code>eclipse</code> des ZIP-Archivs enthalten sind, in den Eclipse-Programm-Ordner <code>C:\web\eclipse</code>
# Bei OSX Vorsicht! - Inhalte der Ordner '''features''' und '''plugins''' in die jeweiligen Ordner <code>/Applications/eclipse/features</code> und <code>/Applications/eclipse/plugins</code> kopieren
# Eclipse neu starten

====Deutsche Rechtschreibprüfung installieren====
# [http://a-weinert.de/frame4j/downloads/de_DE.dic de_DE.dic] (von Albrecht Weinert) herunterladen und unter <code>C:/web/eclipse/dropins</code> bzw. <code>/Applications/eclipse/dropins</code> speichern
# <code>Fenster</code> ? <code>Benutzervorgaben</code> ? <code>Allgemein</code> aufklappen ? <code>Editoren</code> aufklappen ? <code>Texteditoren</code> aufklappen ? <code>Schreibprüfung selektieren</code>
# Benutzerdefiniertes Wöerterbuch: <code>Durchsuchen</code> und die Datei <code>de_DE.dic</code> selektieren (bzw. <code>${eclipse_home}\dropins\de_DE.dic</code> eintragen)
# Codierung: <code>Sonstige</code> anklicken ? <code>UTF-8</code> wählen
# <code>OK</code>

Tipp: Wenn Sie mit der Maus ein rot unterringeltes Wort anklicken und anschließend <code>Strg-1</code> (<code>Ctrl-1</code>) drücken,
können Sie das Wort ins Wörterbuch einfügen oder andere Aktionen durchführen, damit ein vermeintlicher Rechtschreibfehler nicht mehr angezeigt wird.

==Installation des Flash Builder (optional)==

[[Flash Builder]] ist eine kommerzielle Software, basierend auf Eclipse Indigo, zum Entwickeln von [[Flash]]-Anwendungen.
Man kann [http://www.adobe.com/cfusion/tdrc/index.cfm?product=flash_builder&loc=de Flash Builder 4.6] (nach erfolgreicher Registrierung) als 60-Tage-Testlizenz herunterladen.

* [http://www.adobe.com/cfusion/tdrc/index.cfm?product=flash_builder&loc=de Flash Builder 4.6] herunterlanden
* Eclipse und Browser beenden
* FlashBuilder_4_6_LS10.exe ausführen und [http://kb2.adobe.com/de/releasenotes/921/cpsid_92180.html#main_Install%20your%20software Flash Builder installieren]

'''Als Studierender''' erhält man eine '''kostenlose Lizenz''' für den Flash Builder, indem man im [http://www.adobe.com/de/devnet/flex/free/index.html Adobe Flex Developer Center] mit seinen persönliche Daten und JPEG-Kopie der Immatrikulationsbescheinigung Lizenz anfordert. Diese wird einem dann per E-Mail zugeschickt.

Die meisten der nachfolgenden Installations- und Konfigurationsvorschläge funktionieren auch für den Flash-Builder.
Sie sollten allerdings nur Subclipse und evtl. Rinzo installieren. Die anderen Pakete sind für eine Flash/ActionScript-Entwicklung
unnötig.

Beachten Sie, dass der Flash Builder auf ''Eclipse Indigo'', der Vorgänger-Version von ''Eclipse Juno'', basiert und daher
die Installationsschritte leicht abweichen können.

Zu guter Letzt sollten Sie den Flash Builder [[Konfiguration von Eclipse|konfigurieren]].

=Eclipse konfigurieren=

Befolgen Sie die Anweisungen von „[[Konfiguration von Eclipse]]“.

=Integration von Tomcat=

Tomcat wird folgendermaßen in Eclipse eingebunden:

* <code>Datei</code> ? <code>Neu</code> ? <code>Andere</code>
* Klick auf Dreieck vor <code>Server</code> ? <code>Server</code>
* Klick auf Dreieck vor <code>Apache</code> ? <code>Tomcat Version 7.0 - Server</code> ? <code>Weiter</code>/<code>Fertig stellen</code> (je nachdem, welcher Button klickbar ist)
* Tomcat-Installationsverzeichnis angeben: <code>C:\web\tomcat</code>
* Klick auf <code>Fertig stellen</code>

Tomcat-Projekt benötigen eine Laufzeit-Umgebung, in der die eigentlichen Web-Auftritte gespeicher werden. Hierfür gibt es mehrere Möglichkeiten:
* das Tomcat-Webapps-Verzeichnis (<code>C:\web\tomcat\webapps</code>)
* ein spezieller Ordner im versteckten Verzeichnis <code>C:\web\workspace\.metadata</code> (schwer zu finden, nicht zu empfehlen)
* ein Eclipse-Projekt namens Tomcat, auf dessen Inhalt auch direkt über Eclipse zugegriffen werden kann

Hier wird die dritte Möglichkeit verwendet:

* <code>Datei</code> ? <code>Neu</code> ? <code>Andere</code>
* Klick auf Dreieck vor <code>Allgemein</code> ? <code>Projekt</code>
* Projektname: <code>Tomcat</code>
* Tomcat konfigurieren: <code>Server</code> ? Doppelklick <code>Tomcat Version 7.0 - Server</code>
* Tomcat konfigurieren: <code>Use custom Location</code> ? Server path: <code>Tomcat</code> (das ist das zuvor angelegte Projekt), Deploy path: <code>webapps</code>
* Tomcat ist einsatzbereit: <code>Server</code> ? Rechtsklick <code>Tomcat Version 7.0 - Server</code> oder Steuermenü in der Serverleist: Tomcat starten/stoppen etc.

<gallery widths="350" heights="250" perrow="2">
Medium:Eclipse_Tomcat_01.png | Neue Tomcat-Umgebung erstellen: <code>Andere</code> wählen
Medium:Eclipse_Tomcat_02.png | Neue Tomcat-Umgebung erstellen: <code>Server</code> wählen
Medium:Eclipse_Tomcat_03.png | Neue Tomcat-Umgebung erstellen: <code>Tomcat 6 </code> wählen
Medium:Eclipse_Tomcat_04.png | Pfad zu Tomcat-Server angeben
Medium:Eclipse_Tomcat_01.png | Generischs Projekt erstellen: <code>Andere</code> wählen
Medium:Eclipse_Tomcat_05.png | Generische Projekt erstellen: <code>Projekt</code> wählen
Medium:Eclipse_Tomcat_06.png | Projektname <code>Tomcat</code>
Medium:Eclipse_Tomcat_07.png | Tomcat konfigurieren und mit <code>Strg-S</code> speichern
Medium:Eclipse_Tomcat_08.png | Tomcat verwalten: starten/stoppen/etc.
Medium:Eclipse_Tomcat_09.png | Tomcat-Log-Datei: Der Start war erfolgreich
</gallery>

=Integration von Apache=
{{TBD}}

=Quellen=
<references/>
<ol start="2">
<li> {{Quelle|Kowarschick, W.: Content-Management}}</li>
<li> {{Quelle|Kowarschick, W.: Multimedia-Datenbanksysteme}}</li>
<li> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>
Alle übrigen Quellen wurden direkt im Text angegeben.
[[Kategorie:Kapitel:Web-Programmierung]][[Kategorie:Web-Programmierung-HowTo]]
</pre>

== bookmarks.xml ==
<code><pre>
<?xml version="1.0" encoding="UTF-8"?>
<bookmarks>
<site url="http://download.aptana.com/studio3/plugin/install" selected="true" name="Aptana Studio 3"/>
<site url="http://editorxml.sourceforge.net/updates/" selected="true" name="Rinzo XML Editor"/>
<site url="http://subclipse.tigris.org/update_1.8.x" selected="true" name="Subclipse 1.8.x Update Site"/>
</bookmarks>
</pre>
</code>

Benutzer Diskussion:Rayza

2012-10-10T00:11:52Z

Rayza: /* bookmarks.xml */

== Umstrukturierungsvorschlag Eclipse Installation ==

<pre>
{{Qualität
|correctness = 4
|extent = 4
|numberOfReferences = 5
|qualityOfReferences = 4
|conformance = 4
}}
=Vorbemerkung=

[[Eclipse]] ist für die Entwicklung von dynamische Web-Anwendungen mit und ohne einen Web-Server (wie z.B. Tomcat) recht gut geeignet.

Für Windows werden folgende Annahmen gemacht: Auf der Partition C befindet sich das Windows-System und die Benutzerdaten.
Da Eclipse „out of the box“ läuft, wird es auf der Partition mit den Benutzerdaten installiert.

==Android SDK (optional)==
Um mit Eclipse Apps für Android entwickeln zu können, wird das Android SDK benötigt.
Installieren Sie dies zuerst:

* <code>http://developer.android.com/sdk/index.html</code>: <code>installer_r...-windows.exe</code> herunterladen und ausführen.
* '''Wählen Sie einen kurzen Installationspfad ohne Leerzeichen aus, z.B. <code>C:\web\android-sdk</code> (Windows) bzw. <code>/Benutzer/'''BENUTZERNAME'''/Programmierung/web/android-sdk</code> (Mac OS), auf das Benutzer ohne Administrationsrechte zugreifen können.'''
* <code>Start SDK-Manager</code> ? <code>OK</code>
* APIs auswählen für die entwickelt werden soll (z.B. API 16, API 10 und Extras) ? <code>Install ... packages</code> ? <code>Accept All</code> (rechts!) ? <code>Install</code>, '''Achtung: Dieser Vorgang dauert länger. Sie können ihn später nachholen, indem Sie Eclipse starten und <code>Fenster</code> ? <code>Android SDK Manager</code> aufrufen'''
* Es erscheinen zwei Aufforderungen, sich einzuloggen. Diese können einfach weggeklickt werden.
* Aufgrund der vorherigen Aktion werden nicht alle Paktete installiert. Das ist jedoch nicht weiter schlimm.
* '''Abschließend sollte das Paket <code>Extras</code> ? <code>Google USB Driver</code> separat installiert werden, sofern es nicht installiert wurde.'''

==Vorgefertigete Eclipse-Instanzen (derzeit nur für Windows 7)==

Für die in diesem Wiki beschriebenen Tutorien gibt es folgende vorgefertigte Eclipse-Instanzen:
* [http://glossar.hs-augsburg.de/svn/eclipse/eclipse_mmprog_x64.zip Eclipse für MMProg (Windows 7, 64 Bit)], [http://glossar.hs-augsburg.de/svn/eclipse/workspace_mmprog_x64.zip zugehöriger Workspace <code>workspace_mmprog</code>]

Sie können diese beiden Dateien herunterladen und in einen Ordner Ihrer Wahl (am Besten <code>C:\web</code>) entpacken.
Stellen Sie sicher, das das Android SDK bereits installiert wurde.
Rufen Sie nun <code>C:\web\eclipse\eclipse.exe</code> auf und geben Sie <code>C:\web\workspace_mmprog</code>
als Workspace an.

Passen Sie nun den Workspace an Ihre Rechner-Umgebung an:
* Wenn Sie Ihren eigenen Workspace verwenden, so müssen Sie diesen noch [[Konfiguration von Eclipse|konfigurieren]].
* Wenn Sie den Workspace <code>workspace_mmprog</code> verwenden, so müssen Sie noch ein Paar [[Konfiguration von Eclipse/Anpassungen_des_MMProg-Workspaces|Anpassungen]] vornehmen.
* Wenn Sie Eclipse vollkommen neu installieren, so sollten Sie die nachfolgenden Installationshinweise beachten.

Tipp: Wenn man sich nicht manuell um das Updaten von Plugins kümmern möchte, empfiehlt es sich wo möglich Update Sites zu verwenden.

=Installation von Eclipse=

* Eclipse (Juno, 4.2) herunterladen:
** Eclipse IDE for Java EE Developers (32 Bit oder 64 Bit) [http://eclipse.org/downloads/ herunterladen]
* Zip-Datei nach <code>C:/web</code> (Windows) bzw. <code>/Applications/</code> (Mac OS) entpacken ? <code>C:/web/eclipse</code> enthält Eclipse (<code>C:/web/eclipse/eclipse.exe</code> bzw. <code>/Applications/eclipse/Eclipse.app</code>)

=Diverse weitere Eclipse-Pakete installieren=

==Kurze Variante (Eclipse auf Englisch)==

===XML-Editor „Rinzo“, Subclipse und Aptana===
* Diese XML-Datei mit den Update-Sites herunterladen.
* <code>Window</code> ? <code>Install/Update</code> ausklappen ? <code>Available Software Sites</code> ? <code>Import</code> ? Datei auswählen ? <code>Öffnen</code>
* <code>Help</code> ? <code>Install New Software...</code>
* Work with: <code>--All Available Sites--</code>
* <code>Aptana Studio 3</code>, <code>Rinzo XML Editor</code> und <code>Subclipse</code> auswählen ? <code>Next</code> ? <code>Next</code> ? Lizenzen akzeptieren ? <code>Finish</code>
* Warnung akzeptieren: <code>OK</code>
* Neustarten-Frage bejahen: <code>Yes</code>

==Lange Variante==

===XML-Editor „Rinzo“===
Da in Eclipse ein guter XML-Editor fehlt, sollte ein geeigneter Editor installiert werden.
Die wirklich guten Editoren gibt es leider nicht als Open-Source-Software. Der XML-Editor
„Rinzo“ ist zwar nicht sehr leistungsfähig, dafür aber Open-Source-Software.

Variante 1 (Update-Site):
* <code>C:\web\eclipse\eclipse.exe</code> bzw. <code>/Applications/eclipse</code> starten
* <code>Hilfe</code> ? <code>Neue Software installieren...</code>
* Work with: <code>''http://editorxml.sourceforge.net/updates''</code> ? <code>Hinzufügen</code>
* Name: <code>''Subclipse''</code> ? <code>OK</code>
* Alle Pakete auswählen ? <code>Weiter</code> ? <code>Weiter</code> ? <code>Ich akzeptiere ...</code> auswählen ? <code>Fertigstellen</code>
* Warnung akzeptieren: <code>OK</code>
* <code>Jetzt neu starten</code>

Variante 2 (manuell):
* XML-Editor Rinzo [http://sourceforge.net/projects/editorxml/ herunterladen]
* Inhalt der ZIP-Datei in Verzeichnis <code>C:\web\eclipse\dropins</code> bzw. <code>/Applications/eclipse/dropins</code> einfügen
* Eclipse neu starten

===Subclipse===
Sublipse ist ein recht guter [[Subversion|Subversion-Client]] für Eclipse.

Die meisten Eclipse-Pakete können sehr einfach mit Hilfe von Update-Sites
installiert werden, so auch Subclipse.

* <code>C:\web\eclipse\eclipse.exe</code> bzw. <code>/Applications/eclipse</code> starten
* <code>Hilfe</code> ? <code>Neue Software installieren...</code>
* Work with: <code>''http://subclipse.tigris.org/update_1.8.x''</code> ? <code>Hinzufügen</code>
* Name: <code>''Subclipse''</code> ? <code>OK</code>
* Alle Pakete auswählen ? <code>Weiter</code> ? <code>Weiter</code> ? <code>Ich akzeptiere ...</code> auswählen ? <code>Fertigstellen</code>
* Warnung akzeptieren: <code>OK</code>
* <code>Jetzt neu starten</code>
* Haken vor <code>Report usage ...</code> entfernen.
* <code>OK</code>

===Aptana===

Aptana ist ein Eclipse-Plugin zur Entwicklung von HTML/JavaScript-Anwendungen.

* <code>C:\web\eclipse\eclipse.exe</code> bzw. <code>/Applications/eclipse</code> starten
* <code>Hilfe</code> ? <code>Neue Software installieren...</code>
* Work with: <code>''http://download.aptana.com/studio3/plugin/install''</code> ? <code>Hinzufügen</code>
* Name: <code>''Aptana''</code> ? <code>OK</code>
* Alle Pakete auswählen ? <code>Weiter</code> ? <code>Weiter</code> ? <code>Ich akzeptiere ...</code> auswählen ? <code>Fertigstellen</code>
* Warnung akzeptieren: <code>OK</code>
* <code>Jetzt neu starten</code>
* <code>OK</code>

Wem das Aptana-HTML-Farbschema nicht gefällt, der kann dieses ändern:

* <code>Fenster</code> ? <code>Benutzervorgaben</code> ? <code>Aptana Studio</code> aufklappen ? <code>Themes</code> ? Drop-Down-Men+ (Inhalt <code>Aptana Studio)</code> öffnen und neues Farbschema wählen ?<code>OK</code>

==YUI Compressor ==

* YUI Compressor ([http://yuilibrary.com/download/yuicompressor/ yuicompressor-2.x.x.zip]) herunterladen
* yuicompressor-2.x.x.zip in den Ordner <code>C:\web\eclipse\dropins</code> bzw. <code>/Applications/eclipse/dropins</code> entpacken
* Ordner <code>C:\web\eclipse\dropins\yuicompressor</code> bzw. <code>/Applications/eclipse/dropins/yuicompressor</code> erstellen
* In den Ordner <code>C:\web\eclipse\dropins\yuicompressor</code> bzw. <code>/Applications/eclipse/dropins/yuicompressor</code> die Datei [http://glossar.hs-augsburg.de/svn/eclipse/build.xml <code>build.xml</code>]<ref>vgl. {{Quelle|Santos, S. (2009): Combine and minimize JavaScript and CSS files for faster loading}}</ref> einfügen

Passen Sie in der Datei <code>build.xml</code> den Pfad und Versionnummer des YUI Compressors in den beiden Zeilen

<source lang="xml">
Windows...
<property name="BUILD_DIR" value="C:/web/eclipse/dropins/yuicompressor-2.4.7/build" description="Files needed to build" />
<property name="YUI" value="${BUILD_DIR}/yuicompressor-2.4.7.jar" description="YUICompressor" />
...
</source>

<source lang="xml">
OS X...
<property name="BUILD_DIR" value="/Applications/eclipse/dropins/yuicompressor-2.4.7/build" description="Files needed to build" />
<property name="YUI" value="${BUILD_DIR}/yuicompressor-2.4.7.jar" description="YUICompressor" />
...
</source>

an Ihre Gegebenheiten an.

==Optionale Pakete==
Bei folgende Pakete macht nur in bestimmten Situationen Sinn sie zu installieren.

===ADT===
ADT ist ein Eclipse-Plugin, dass die Entwicklung von [[Java]]-Anwendungen für [[Android]]-[[Smarphone]]s ermöglicht.
Voraussetzung ist, dass das Android SDK installiert worden ist.

* <code>C:\web\eclipse\eclipse.exe</code> bzw. <code>/Applications/eclipse</code> starten
* <code>Hilfe</code> ? <code>Neue Software installieren...</code>
* Work with: <code>''https://dl-ssl.google.com/android/eclipse/''</code> ? <code>Hinzufügen</code>
* Name: <code>''ADT''</code> ? <code>OK</code>
* Alle Pakete auswählen ? <code>Weiter</code> ? <code>Weiter</code> ? <code>Ich akzeptiere ...</code> auswählen ? <code>Fertigstellen</code>
* Warnung akzeptieren: <code>OK</code>
* <code>Jetzt neu starten</code>
* <code>Fenster</code> ? <code>Benutzervorgaben</code> ? <code>Android</code>
* Wenn dieser Menü-Punkt das erste Mal aufgerufen wird, fragt Eclipse nach, ob ADT-Benutzungsstatistiken an Google gesendet werden sollen. Hier würde ich das ensprechende Häckchen entfernen ? Auf jeden Fall muss <code>Proceed</code> angeklickt werden.
* SDK Location: <code>C:\web\android-sdk</code> bzw. <code>/Benutzer/'''BENUTZERNAME'''/Programmierung/web/android-sdk</code> (Installationsverzeichnis des SDK-Managers;'''der Pfad darf keine Leerzeichen enthalten''') ? <code>Anwenden</code> ? <code>OK</code>
* <code>Fenster</code> ? <code>Android SDK Manager</code> starten
* <code>Android SDK Platformtools</code> installieren (falls diese nicht bereits installiert worden sind)

===Deutsche Sprachpakete installieren===
Das [http://www.eclipse.org/babel/downloads.php Eclipse Babel Project] stellt diverse Sprach-Pakete zu Verfügung, die allerdings noch nicht ganz fertiggestellt sind.

# Eclipse starten (<code>C:\web\eclipse\eclipse.exe</code> bzw. <code>/Applications/eclipse/Eclipse.app</code>)
# Wählen Sie einen geeignet Workspace aus (z.B. <code>C:\web\mmprog</code> bzw. <code>/Benutzer/'''BENUTZERNAME'''/Studium/mmprog</code>; auf den Laborrechnern müssen Sie Ihr Home-Verzeichnis nehmen, nicht den Desktop!)
# <code>Help</code> ? <code>Install New Software</code>
# Work with: <code>''http://download.eclipse.org/technology/babel/update-site/R0.10.0/juno''</code> (bei Eclipse Indigo: <code>''http://archive.eclipse.org/technology/babel/update-site/R0.9.1/indigo''</code>) ? <code>Add</code>
# <code>Name: ''Babel''</code> ? <code>OK</code>
# (lange) warten bis <code>Pending</code> verschwindet
# <code>Babel Language Packs in German</code> selektieren ? <code>Next</code> ? <code>Next</code> ? <code>I accept ...</code> selektieren ? <code>Finish</code>
# Warnung akzeptieren: <code>OK</code>
# <code>Restart Now</code>

Häufig sind die Babel Eclipse Server überlastet und eine manuelle Installation des Sprachpakets ist optional möglich:
# Downloaden des Pakets <code>''http://download.eclipse.org/technology/babel/babel_language_packs/R0.10.0/juno/juno.php#de''</code> (vgl. <code>http://www.eclipse.org/babel/downloads.php</code>)
# <code>BabelLanguagePack-eclipse-de_4.2.0.v20120721043402.zip</code> herunterladen
# Die beiden Ordner, die im Ordner <code>eclipse</code> des ZIP-Archivs enthalten sind, in den Eclipse-Programm-Ordner <code>C:\web\eclipse</code>
# Bei OSX Vorsicht! - Inhalte der Ordner '''features''' und '''plugins''' in die jeweiligen Ordner <code>/Applications/eclipse/features</code> und <code>/Applications/eclipse/plugins</code> kopieren
# Eclipse neu starten

====Deutsche Rechtschreibprüfung installieren====
# [http://a-weinert.de/frame4j/downloads/de_DE.dic de_DE.dic] (von Albrecht Weinert) herunterladen und unter <code>C:/web/eclipse/dropins</code> bzw. <code>/Applications/eclipse/dropins</code> speichern
# <code>Fenster</code> ? <code>Benutzervorgaben</code> ? <code>Allgemein</code> aufklappen ? <code>Editoren</code> aufklappen ? <code>Texteditoren</code> aufklappen ? <code>Schreibprüfung selektieren</code>
# Benutzerdefiniertes Wöerterbuch: <code>Durchsuchen</code> und die Datei <code>de_DE.dic</code> selektieren (bzw. <code>${eclipse_home}\dropins\de_DE.dic</code> eintragen)
# Codierung: <code>Sonstige</code> anklicken ? <code>UTF-8</code> wählen
# <code>OK</code>

Tipp: Wenn Sie mit der Maus ein rot unterringeltes Wort anklicken und anschließend <code>Strg-1</code> (<code>Ctrl-1</code>) drücken,
können Sie das Wort ins Wörterbuch einfügen oder andere Aktionen durchführen, damit ein vermeintlicher Rechtschreibfehler nicht mehr angezeigt wird.

==Installation des Flash Builder (optional)==

[[Flash Builder]] ist eine kommerzielle Software, basierend auf Eclipse Indigo, zum Entwickeln von [[Flash]]-Anwendungen.
Man kann [http://www.adobe.com/cfusion/tdrc/index.cfm?product=flash_builder&loc=de Flash Builder 4.6] (nach erfolgreicher Registrierung) als 60-Tage-Testlizenz herunterladen.

* [http://www.adobe.com/cfusion/tdrc/index.cfm?product=flash_builder&loc=de Flash Builder 4.6] herunterlanden
* Eclipse und Browser beenden
* FlashBuilder_4_6_LS10.exe ausführen und [http://kb2.adobe.com/de/releasenotes/921/cpsid_92180.html#main_Install%20your%20software Flash Builder installieren]

'''Als Studierender''' erhält man eine '''kostenlose Lizenz''' für den Flash Builder, indem man im [http://www.adobe.com/de/devnet/flex/free/index.html Adobe Flex Developer Center] mit seinen persönliche Daten und JPEG-Kopie der Immatrikulationsbescheinigung Lizenz anfordert. Diese wird einem dann per E-Mail zugeschickt.

Die meisten der nachfolgenden Installations- und Konfigurationsvorschläge funktionieren auch für den Flash-Builder.
Sie sollten allerdings nur Subclipse und evtl. Rinzo installieren. Die anderen Pakete sind für eine Flash/ActionScript-Entwicklung
unnötig.

Beachten Sie, dass der Flash Builder auf ''Eclipse Indigo'', der Vorgänger-Version von ''Eclipse Juno'', basiert und daher
die Installationsschritte leicht abweichen können.

Zu guter Letzt sollten Sie den Flash Builder [[Konfiguration von Eclipse|konfigurieren]].

=Eclipse konfigurieren=

Befolgen Sie die Anweisungen von „[[Konfiguration von Eclipse]]“.

=Integration von Tomcat=

Tomcat wird folgendermaßen in Eclipse eingebunden:

* <code>Datei</code> ? <code>Neu</code> ? <code>Andere</code>
* Klick auf Dreieck vor <code>Server</code> ? <code>Server</code>
* Klick auf Dreieck vor <code>Apache</code> ? <code>Tomcat Version 7.0 - Server</code> ? <code>Weiter</code>/<code>Fertig stellen</code> (je nachdem, welcher Button klickbar ist)
* Tomcat-Installationsverzeichnis angeben: <code>C:\web\tomcat</code>
* Klick auf <code>Fertig stellen</code>

Tomcat-Projekt benötigen eine Laufzeit-Umgebung, in der die eigentlichen Web-Auftritte gespeicher werden. Hierfür gibt es mehrere Möglichkeiten:
* das Tomcat-Webapps-Verzeichnis (<code>C:\web\tomcat\webapps</code>)
* ein spezieller Ordner im versteckten Verzeichnis <code>C:\web\workspace\.metadata</code> (schwer zu finden, nicht zu empfehlen)
* ein Eclipse-Projekt namens Tomcat, auf dessen Inhalt auch direkt über Eclipse zugegriffen werden kann

Hier wird die dritte Möglichkeit verwendet:

* <code>Datei</code> ? <code>Neu</code> ? <code>Andere</code>
* Klick auf Dreieck vor <code>Allgemein</code> ? <code>Projekt</code>
* Projektname: <code>Tomcat</code>
* Tomcat konfigurieren: <code>Server</code> ? Doppelklick <code>Tomcat Version 7.0 - Server</code>
* Tomcat konfigurieren: <code>Use custom Location</code> ? Server path: <code>Tomcat</code> (das ist das zuvor angelegte Projekt), Deploy path: <code>webapps</code>
* Tomcat ist einsatzbereit: <code>Server</code> ? Rechtsklick <code>Tomcat Version 7.0 - Server</code> oder Steuermenü in der Serverleist: Tomcat starten/stoppen etc.

<gallery widths="350" heights="250" perrow="2">
Medium:Eclipse_Tomcat_01.png | Neue Tomcat-Umgebung erstellen: <code>Andere</code> wählen
Medium:Eclipse_Tomcat_02.png | Neue Tomcat-Umgebung erstellen: <code>Server</code> wählen
Medium:Eclipse_Tomcat_03.png | Neue Tomcat-Umgebung erstellen: <code>Tomcat 6 </code> wählen
Medium:Eclipse_Tomcat_04.png | Pfad zu Tomcat-Server angeben
Medium:Eclipse_Tomcat_01.png | Generischs Projekt erstellen: <code>Andere</code> wählen
Medium:Eclipse_Tomcat_05.png | Generische Projekt erstellen: <code>Projekt</code> wählen
Medium:Eclipse_Tomcat_06.png | Projektname <code>Tomcat</code>
Medium:Eclipse_Tomcat_07.png | Tomcat konfigurieren und mit <code>Strg-S</code> speichern
Medium:Eclipse_Tomcat_08.png | Tomcat verwalten: starten/stoppen/etc.
Medium:Eclipse_Tomcat_09.png | Tomcat-Log-Datei: Der Start war erfolgreich
</gallery>

=Integration von Apache=
{{TBD}}

=Quellen=
<references/>
<ol start="2">
<li> {{Quelle|Kowarschick, W.: Content-Management}}</li>
<li> {{Quelle|Kowarschick, W.: Multimedia-Datenbanksysteme}}</li>
<li> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>
Alle übrigen Quellen wurden direkt im Text angegeben.
[[Kategorie:Kapitel:Web-Programmierung]][[Kategorie:Web-Programmierung-HowTo]]
</pre>

== bookmarks.xml ==
<code><pre>
<?xml version="1.0" encoding="UTF-8"?>
<bookmarks>
<site url="http://download.aptana.com/studio3/plugin/install" selected="true" name="Aptana Studio 3"/>
<site url="http://editorxml.sourceforge.net/updates/" selected="true" name="Rinzo XML Editor"/>
<site url="http://subclipse.tigris.org/update_1.8.x" selected="true" name="Subclipse 1.8.x Update Site"/>
</bookmarks>
</pre>
</code>

Benutzer Diskussion:Rayza

2012-10-10T00:09:11Z

Rayza: Neuer Abschnitt /* bookmarks.xml */

== Umstrukturierungsvorschlag Eclipse Installation ==

<pre>
{{Qualität
|correctness = 4
|extent = 4
|numberOfReferences = 5
|qualityOfReferences = 4
|conformance = 4
}}
=Vorbemerkung=

[[Eclipse]] ist für die Entwicklung von dynamische Web-Anwendungen mit und ohne einen Web-Server (wie z.B. Tomcat) recht gut geeignet.

Für Windows werden folgende Annahmen gemacht: Auf der Partition C befindet sich das Windows-System und die Benutzerdaten.
Da Eclipse „out of the box“ läuft, wird es auf der Partition mit den Benutzerdaten installiert.

==Android SDK (optional)==
Um mit Eclipse Apps für Android entwickeln zu können, wird das Android SDK benötigt.
Installieren Sie dies zuerst:

* <code>http://developer.android.com/sdk/index.html</code>: <code>installer_r...-windows.exe</code> herunterladen und ausführen.
* '''Wählen Sie einen kurzen Installationspfad ohne Leerzeichen aus, z.B. <code>C:\web\android-sdk</code> (Windows) bzw. <code>/Benutzer/'''BENUTZERNAME'''/Programmierung/web/android-sdk</code> (Mac OS), auf das Benutzer ohne Administrationsrechte zugreifen können.'''
* <code>Start SDK-Manager</code> ? <code>OK</code>
* APIs auswählen für die entwickelt werden soll (z.B. API 16, API 10 und Extras) ? <code>Install ... packages</code> ? <code>Accept All</code> (rechts!) ? <code>Install</code>, '''Achtung: Dieser Vorgang dauert länger. Sie können ihn später nachholen, indem Sie Eclipse starten und <code>Fenster</code> ? <code>Android SDK Manager</code> aufrufen'''
* Es erscheinen zwei Aufforderungen, sich einzuloggen. Diese können einfach weggeklickt werden.
* Aufgrund der vorherigen Aktion werden nicht alle Paktete installiert. Das ist jedoch nicht weiter schlimm.
* '''Abschließend sollte das Paket <code>Extras</code> ? <code>Google USB Driver</code> separat installiert werden, sofern es nicht installiert wurde.'''

==Vorgefertigete Eclipse-Instanzen (derzeit nur für Windows 7)==

Für die in diesem Wiki beschriebenen Tutorien gibt es folgende vorgefertigte Eclipse-Instanzen:
* [http://glossar.hs-augsburg.de/svn/eclipse/eclipse_mmprog_x64.zip Eclipse für MMProg (Windows 7, 64 Bit)], [http://glossar.hs-augsburg.de/svn/eclipse/workspace_mmprog_x64.zip zugehöriger Workspace <code>workspace_mmprog</code>]

Sie können diese beiden Dateien herunterladen und in einen Ordner Ihrer Wahl (am Besten <code>C:\web</code>) entpacken.
Stellen Sie sicher, das das Android SDK bereits installiert wurde.
Rufen Sie nun <code>C:\web\eclipse\eclipse.exe</code> auf und geben Sie <code>C:\web\workspace_mmprog</code>
als Workspace an.

Passen Sie nun den Workspace an Ihre Rechner-Umgebung an:
* Wenn Sie Ihren eigenen Workspace verwenden, so müssen Sie diesen noch [[Konfiguration von Eclipse|konfigurieren]].
* Wenn Sie den Workspace <code>workspace_mmprog</code> verwenden, so müssen Sie noch ein Paar [[Konfiguration von Eclipse/Anpassungen_des_MMProg-Workspaces|Anpassungen]] vornehmen.
* Wenn Sie Eclipse vollkommen neu installieren, so sollten Sie die nachfolgenden Installationshinweise beachten.

Tipp: Wenn man sich nicht manuell um das Updaten von Plugins kümmern möchte, empfiehlt es sich wo möglich Update Sites zu verwenden.

=Installation von Eclipse=

* Eclipse (Juno, 4.2) herunterladen:
** Eclipse IDE for Java EE Developers (32 Bit oder 64 Bit) [http://eclipse.org/downloads/ herunterladen]
* Zip-Datei nach <code>C:/web</code> (Windows) bzw. <code>/Applications/</code> (Mac OS) entpacken ? <code>C:/web/eclipse</code> enthält Eclipse (<code>C:/web/eclipse/eclipse.exe</code> bzw. <code>/Applications/eclipse/Eclipse.app</code>)

=Diverse weitere Eclipse-Pakete installieren=

==Kurze Variante (Eclipse auf Englisch)==

===XML-Editor „Rinzo“, Subclipse und Aptana===
* Diese XML-Datei mit den Update-Sites herunterladen.
* <code>Window</code> ? <code>Install/Update</code> ausklappen ? <code>Available Software Sites</code> ? <code>Import</code> ? Datei auswählen ? <code>Öffnen</code>
* <code>Help</code> ? <code>Install New Software...</code>
* Work with: <code>--All Available Sites--</code>
* <code>Aptana Studio 3</code>, <code>Rinzo XML Editor</code> und <code>Subclipse</code> auswählen ? <code>Next</code> ? <code>Next</code> ? Lizenzen akzeptieren ? <code>Finish</code>
* Warnung akzeptieren: <code>OK</code>
* Neustarten-Frage bejahen: <code>Yes</code>

==Lange Variante==

===XML-Editor „Rinzo“===
Da in Eclipse ein guter XML-Editor fehlt, sollte ein geeigneter Editor installiert werden.
Die wirklich guten Editoren gibt es leider nicht als Open-Source-Software. Der XML-Editor
„Rinzo“ ist zwar nicht sehr leistungsfähig, dafür aber Open-Source-Software.

Variante 1 (Update-Site):
* <code>C:\web\eclipse\eclipse.exe</code> bzw. <code>/Applications/eclipse</code> starten
* <code>Hilfe</code> ? <code>Neue Software installieren...</code>
* Work with: <code>''http://editorxml.sourceforge.net/updates''</code> ? <code>Hinzufügen</code>
* Name: <code>''Subclipse''</code> ? <code>OK</code>
* Alle Pakete auswählen ? <code>Weiter</code> ? <code>Weiter</code> ? <code>Ich akzeptiere ...</code> auswählen ? <code>Fertigstellen</code>
* Warnung akzeptieren: <code>OK</code>
* <code>Jetzt neu starten</code>

Variante 2 (manuell):
* XML-Editor Rinzo [http://sourceforge.net/projects/editorxml/ herunterladen]
* Inhalt der ZIP-Datei in Verzeichnis <code>C:\web\eclipse\dropins</code> bzw. <code>/Applications/eclipse/dropins</code> einfügen
* Eclipse neu starten

===Subclipse===
Sublipse ist ein recht guter [[Subversion|Subversion-Client]] für Eclipse.

Die meisten Eclipse-Pakete können sehr einfach mit Hilfe von Update-Sites
installiert werden, so auch Subclipse.

* <code>C:\web\eclipse\eclipse.exe</code> bzw. <code>/Applications/eclipse</code> starten
* <code>Hilfe</code> ? <code>Neue Software installieren...</code>
* Work with: <code>''http://subclipse.tigris.org/update_1.8.x''</code> ? <code>Hinzufügen</code>
* Name: <code>''Subclipse''</code> ? <code>OK</code>
* Alle Pakete auswählen ? <code>Weiter</code> ? <code>Weiter</code> ? <code>Ich akzeptiere ...</code> auswählen ? <code>Fertigstellen</code>
* Warnung akzeptieren: <code>OK</code>
* <code>Jetzt neu starten</code>
* Haken vor <code>Report usage ...</code> entfernen.
* <code>OK</code>

===Aptana===

Aptana ist ein Eclipse-Plugin zur Entwicklung von HTML/JavaScript-Anwendungen.

* <code>C:\web\eclipse\eclipse.exe</code> bzw. <code>/Applications/eclipse</code> starten
* <code>Hilfe</code> ? <code>Neue Software installieren...</code>
* Work with: <code>''http://download.aptana.com/studio3/plugin/install''</code> ? <code>Hinzufügen</code>
* Name: <code>''Aptana''</code> ? <code>OK</code>
* Alle Pakete auswählen ? <code>Weiter</code> ? <code>Weiter</code> ? <code>Ich akzeptiere ...</code> auswählen ? <code>Fertigstellen</code>
* Warnung akzeptieren: <code>OK</code>
* <code>Jetzt neu starten</code>
* <code>OK</code>

Wem das Aptana-HTML-Farbschema nicht gefällt, der kann dieses ändern:

* <code>Fenster</code> ? <code>Benutzervorgaben</code> ? <code>Aptana Studio</code> aufklappen ? <code>Themes</code> ? Drop-Down-Men+ (Inhalt <code>Aptana Studio)</code> öffnen und neues Farbschema wählen ?<code>OK</code>

==YUI Compressor ==

* YUI Compressor ([http://yuilibrary.com/download/yuicompressor/ yuicompressor-2.x.x.zip]) herunterladen
* yuicompressor-2.x.x.zip in den Ordner <code>C:\web\eclipse\dropins</code> bzw. <code>/Applications/eclipse/dropins</code> entpacken
* Ordner <code>C:\web\eclipse\dropins\yuicompressor</code> bzw. <code>/Applications/eclipse/dropins/yuicompressor</code> erstellen
* In den Ordner <code>C:\web\eclipse\dropins\yuicompressor</code> bzw. <code>/Applications/eclipse/dropins/yuicompressor</code> die Datei [http://glossar.hs-augsburg.de/svn/eclipse/build.xml <code>build.xml</code>]<ref>vgl. {{Quelle|Santos, S. (2009): Combine and minimize JavaScript and CSS files for faster loading}}</ref> einfügen

Passen Sie in der Datei <code>build.xml</code> den Pfad und Versionnummer des YUI Compressors in den beiden Zeilen

<source lang="xml">
Windows...
<property name="BUILD_DIR" value="C:/web/eclipse/dropins/yuicompressor-2.4.7/build" description="Files needed to build" />
<property name="YUI" value="${BUILD_DIR}/yuicompressor-2.4.7.jar" description="YUICompressor" />
...
</source>

<source lang="xml">
OS X...
<property name="BUILD_DIR" value="/Applications/eclipse/dropins/yuicompressor-2.4.7/build" description="Files needed to build" />
<property name="YUI" value="${BUILD_DIR}/yuicompressor-2.4.7.jar" description="YUICompressor" />
...
</source>

an Ihre Gegebenheiten an.

==Optionale Pakete==
Bei folgende Pakete macht nur in bestimmten Situationen Sinn sie zu installieren.

===ADT===
ADT ist ein Eclipse-Plugin, dass die Entwicklung von [[Java]]-Anwendungen für [[Android]]-[[Smarphone]]s ermöglicht.
Voraussetzung ist, dass das Android SDK installiert worden ist.

* <code>C:\web\eclipse\eclipse.exe</code> bzw. <code>/Applications/eclipse</code> starten
* <code>Hilfe</code> ? <code>Neue Software installieren...</code>
* Work with: <code>''https://dl-ssl.google.com/android/eclipse/''</code> ? <code>Hinzufügen</code>
* Name: <code>''ADT''</code> ? <code>OK</code>
* Alle Pakete auswählen ? <code>Weiter</code> ? <code>Weiter</code> ? <code>Ich akzeptiere ...</code> auswählen ? <code>Fertigstellen</code>
* Warnung akzeptieren: <code>OK</code>
* <code>Jetzt neu starten</code>
* <code>Fenster</code> ? <code>Benutzervorgaben</code> ? <code>Android</code>
* Wenn dieser Menü-Punkt das erste Mal aufgerufen wird, fragt Eclipse nach, ob ADT-Benutzungsstatistiken an Google gesendet werden sollen. Hier würde ich das ensprechende Häckchen entfernen ? Auf jeden Fall muss <code>Proceed</code> angeklickt werden.
* SDK Location: <code>C:\web\android-sdk</code> bzw. <code>/Benutzer/'''BENUTZERNAME'''/Programmierung/web/android-sdk</code> (Installationsverzeichnis des SDK-Managers;'''der Pfad darf keine Leerzeichen enthalten''') ? <code>Anwenden</code> ? <code>OK</code>
* <code>Fenster</code> ? <code>Android SDK Manager</code> starten
* <code>Android SDK Platformtools</code> installieren (falls diese nicht bereits installiert worden sind)

===Deutsche Sprachpakete installieren===
Das [http://www.eclipse.org/babel/downloads.php Eclipse Babel Project] stellt diverse Sprach-Pakete zu Verfügung, die allerdings noch nicht ganz fertiggestellt sind.

# Eclipse starten (<code>C:\web\eclipse\eclipse.exe</code> bzw. <code>/Applications/eclipse/Eclipse.app</code>)
# Wählen Sie einen geeignet Workspace aus (z.B. <code>C:\web\mmprog</code> bzw. <code>/Benutzer/'''BENUTZERNAME'''/Studium/mmprog</code>; auf den Laborrechnern müssen Sie Ihr Home-Verzeichnis nehmen, nicht den Desktop!)
# <code>Help</code> ? <code>Install New Software</code>
# Work with: <code>''http://download.eclipse.org/technology/babel/update-site/R0.10.0/juno''</code> (bei Eclipse Indigo: <code>''http://archive.eclipse.org/technology/babel/update-site/R0.9.1/indigo''</code>) ? <code>Add</code>
# <code>Name: ''Babel''</code> ? <code>OK</code>
# (lange) warten bis <code>Pending</code> verschwindet
# <code>Babel Language Packs in German</code> selektieren ? <code>Next</code> ? <code>Next</code> ? <code>I accept ...</code> selektieren ? <code>Finish</code>
# Warnung akzeptieren: <code>OK</code>
# <code>Restart Now</code>

Häufig sind die Babel Eclipse Server überlastet und eine manuelle Installation des Sprachpakets ist optional möglich:
# Downloaden des Pakets <code>''http://download.eclipse.org/technology/babel/babel_language_packs/R0.10.0/juno/juno.php#de''</code> (vgl. <code>http://www.eclipse.org/babel/downloads.php</code>)
# <code>BabelLanguagePack-eclipse-de_4.2.0.v20120721043402.zip</code> herunterladen
# Die beiden Ordner, die im Ordner <code>eclipse</code> des ZIP-Archivs enthalten sind, in den Eclipse-Programm-Ordner <code>C:\web\eclipse</code>
# Bei OSX Vorsicht! - Inhalte der Ordner '''features''' und '''plugins''' in die jeweiligen Ordner <code>/Applications/eclipse/features</code> und <code>/Applications/eclipse/plugins</code> kopieren
# Eclipse neu starten

====Deutsche Rechtschreibprüfung installieren====
# [http://a-weinert.de/frame4j/downloads/de_DE.dic de_DE.dic] (von Albrecht Weinert) herunterladen und unter <code>C:/web/eclipse/dropins</code> bzw. <code>/Applications/eclipse/dropins</code> speichern
# <code>Fenster</code> ? <code>Benutzervorgaben</code> ? <code>Allgemein</code> aufklappen ? <code>Editoren</code> aufklappen ? <code>Texteditoren</code> aufklappen ? <code>Schreibprüfung selektieren</code>
# Benutzerdefiniertes Wöerterbuch: <code>Durchsuchen</code> und die Datei <code>de_DE.dic</code> selektieren (bzw. <code>${eclipse_home}\dropins\de_DE.dic</code> eintragen)
# Codierung: <code>Sonstige</code> anklicken ? <code>UTF-8</code> wählen
# <code>OK</code>

Tipp: Wenn Sie mit der Maus ein rot unterringeltes Wort anklicken und anschließend <code>Strg-1</code> (<code>Ctrl-1</code>) drücken,
können Sie das Wort ins Wörterbuch einfügen oder andere Aktionen durchführen, damit ein vermeintlicher Rechtschreibfehler nicht mehr angezeigt wird.

==Installation des Flash Builder (optional)==

[[Flash Builder]] ist eine kommerzielle Software, basierend auf Eclipse Indigo, zum Entwickeln von [[Flash]]-Anwendungen.
Man kann [http://www.adobe.com/cfusion/tdrc/index.cfm?product=flash_builder&loc=de Flash Builder 4.6] (nach erfolgreicher Registrierung) als 60-Tage-Testlizenz herunterladen.

* [http://www.adobe.com/cfusion/tdrc/index.cfm?product=flash_builder&loc=de Flash Builder 4.6] herunterlanden
* Eclipse und Browser beenden
* FlashBuilder_4_6_LS10.exe ausführen und [http://kb2.adobe.com/de/releasenotes/921/cpsid_92180.html#main_Install%20your%20software Flash Builder installieren]

'''Als Studierender''' erhält man eine '''kostenlose Lizenz''' für den Flash Builder, indem man im [http://www.adobe.com/de/devnet/flex/free/index.html Adobe Flex Developer Center] mit seinen persönliche Daten und JPEG-Kopie der Immatrikulationsbescheinigung Lizenz anfordert. Diese wird einem dann per E-Mail zugeschickt.

Die meisten der nachfolgenden Installations- und Konfigurationsvorschläge funktionieren auch für den Flash-Builder.
Sie sollten allerdings nur Subclipse und evtl. Rinzo installieren. Die anderen Pakete sind für eine Flash/ActionScript-Entwicklung
unnötig.

Beachten Sie, dass der Flash Builder auf ''Eclipse Indigo'', der Vorgänger-Version von ''Eclipse Juno'', basiert und daher
die Installationsschritte leicht abweichen können.

Zu guter Letzt sollten Sie den Flash Builder [[Konfiguration von Eclipse|konfigurieren]].

=Eclipse konfigurieren=

Befolgen Sie die Anweisungen von „[[Konfiguration von Eclipse]]“.

=Integration von Tomcat=

Tomcat wird folgendermaßen in Eclipse eingebunden:

* <code>Datei</code> ? <code>Neu</code> ? <code>Andere</code>
* Klick auf Dreieck vor <code>Server</code> ? <code>Server</code>
* Klick auf Dreieck vor <code>Apache</code> ? <code>Tomcat Version 7.0 - Server</code> ? <code>Weiter</code>/<code>Fertig stellen</code> (je nachdem, welcher Button klickbar ist)
* Tomcat-Installationsverzeichnis angeben: <code>C:\web\tomcat</code>
* Klick auf <code>Fertig stellen</code>

Tomcat-Projekt benötigen eine Laufzeit-Umgebung, in der die eigentlichen Web-Auftritte gespeicher werden. Hierfür gibt es mehrere Möglichkeiten:
* das Tomcat-Webapps-Verzeichnis (<code>C:\web\tomcat\webapps</code>)
* ein spezieller Ordner im versteckten Verzeichnis <code>C:\web\workspace\.metadata</code> (schwer zu finden, nicht zu empfehlen)
* ein Eclipse-Projekt namens Tomcat, auf dessen Inhalt auch direkt über Eclipse zugegriffen werden kann

Hier wird die dritte Möglichkeit verwendet:

* <code>Datei</code> ? <code>Neu</code> ? <code>Andere</code>
* Klick auf Dreieck vor <code>Allgemein</code> ? <code>Projekt</code>
* Projektname: <code>Tomcat</code>
* Tomcat konfigurieren: <code>Server</code> ? Doppelklick <code>Tomcat Version 7.0 - Server</code>
* Tomcat konfigurieren: <code>Use custom Location</code> ? Server path: <code>Tomcat</code> (das ist das zuvor angelegte Projekt), Deploy path: <code>webapps</code>
* Tomcat ist einsatzbereit: <code>Server</code> ? Rechtsklick <code>Tomcat Version 7.0 - Server</code> oder Steuermenü in der Serverleist: Tomcat starten/stoppen etc.

<gallery widths="350" heights="250" perrow="2">
Medium:Eclipse_Tomcat_01.png | Neue Tomcat-Umgebung erstellen: <code>Andere</code> wählen
Medium:Eclipse_Tomcat_02.png | Neue Tomcat-Umgebung erstellen: <code>Server</code> wählen
Medium:Eclipse_Tomcat_03.png | Neue Tomcat-Umgebung erstellen: <code>Tomcat 6 </code> wählen
Medium:Eclipse_Tomcat_04.png | Pfad zu Tomcat-Server angeben
Medium:Eclipse_Tomcat_01.png | Generischs Projekt erstellen: <code>Andere</code> wählen
Medium:Eclipse_Tomcat_05.png | Generische Projekt erstellen: <code>Projekt</code> wählen
Medium:Eclipse_Tomcat_06.png | Projektname <code>Tomcat</code>
Medium:Eclipse_Tomcat_07.png | Tomcat konfigurieren und mit <code>Strg-S</code> speichern
Medium:Eclipse_Tomcat_08.png | Tomcat verwalten: starten/stoppen/etc.
Medium:Eclipse_Tomcat_09.png | Tomcat-Log-Datei: Der Start war erfolgreich
</gallery>

=Integration von Apache=
{{TBD}}

=Quellen=
<references/>
<ol start="2">
<li> {{Quelle|Kowarschick, W.: Content-Management}}</li>
<li> {{Quelle|Kowarschick, W.: Multimedia-Datenbanksysteme}}</li>
<li> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>
Alle übrigen Quellen wurden direkt im Text angegeben.
[[Kategorie:Kapitel:Web-Programmierung]][[Kategorie:Web-Programmierung-HowTo]]
</pre>

== bookmarks.xml ==

</pre>
<?xml version="1.0" encoding="UTF-8"?>
<bookmarks>
<site url="http://download.aptana.com/studio3/plugin/install" selected="true" name="Aptana Studio 3"/>
<site url="http://editorxml.sourceforge.net/updates/" selected="true" name="Rinzo XML Editor"/>
<site url="http://subclipse.tigris.org/update_1.8.x" selected="true" name="Subclipse 1.8.x Update Site"/>
</bookmarks>
</pre>

Benutzer Diskussion:Rayza

2012-10-09T22:47:00Z

Rayza: Umstrukturierungsvorschlag Eclipse Installation

== Umstrukturierungsvorschlag Eclipse Installation ==

<pre>
{{Qualität
|correctness = 4
|extent = 4
|numberOfReferences = 5
|qualityOfReferences = 4
|conformance = 4
}}
=Vorbemerkung=

[[Eclipse]] ist für die Entwicklung von dynamische Web-Anwendungen mit und ohne einen Web-Server (wie z.B. Tomcat) recht gut geeignet.

Für Windows werden folgende Annahmen gemacht: Auf der Partition C befindet sich das Windows-System und die Benutzerdaten.
Da Eclipse „out of the box“ läuft, wird es auf der Partition mit den Benutzerdaten installiert.

==Android SDK (optional)==
Um mit Eclipse Apps für Android entwickeln zu können, wird das Android SDK benötigt.
Installieren Sie dies zuerst:

* <code>http://developer.android.com/sdk/index.html</code>: <code>installer_r...-windows.exe</code> herunterladen und ausführen.
* '''Wählen Sie einen kurzen Installationspfad ohne Leerzeichen aus, z.B. <code>C:\web\android-sdk</code> (Windows) bzw. <code>/Benutzer/'''BENUTZERNAME'''/Programmierung/web/android-sdk</code> (Mac OS), auf das Benutzer ohne Administrationsrechte zugreifen können.'''
* <code>Start SDK-Manager</code> ? <code>OK</code>
* APIs auswählen für die entwickelt werden soll (z.B. API 16, API 10 und Extras) ? <code>Install ... packages</code> ? <code>Accept All</code> (rechts!) ? <code>Install</code>, '''Achtung: Dieser Vorgang dauert länger. Sie können ihn später nachholen, indem Sie Eclipse starten und <code>Fenster</code> ? <code>Android SDK Manager</code> aufrufen'''
* Es erscheinen zwei Aufforderungen, sich einzuloggen. Diese können einfach weggeklickt werden.
* Aufgrund der vorherigen Aktion werden nicht alle Paktete installiert. Das ist jedoch nicht weiter schlimm.
* '''Abschließend sollte das Paket <code>Extras</code> ? <code>Google USB Driver</code> separat installiert werden, sofern es nicht installiert wurde.'''

==Vorgefertigete Eclipse-Instanzen (derzeit nur für Windows 7)==

Für die in diesem Wiki beschriebenen Tutorien gibt es folgende vorgefertigte Eclipse-Instanzen:
* [http://glossar.hs-augsburg.de/svn/eclipse/eclipse_mmprog_x64.zip Eclipse für MMProg (Windows 7, 64 Bit)], [http://glossar.hs-augsburg.de/svn/eclipse/workspace_mmprog_x64.zip zugehöriger Workspace <code>workspace_mmprog</code>]

Sie können diese beiden Dateien herunterladen und in einen Ordner Ihrer Wahl (am Besten <code>C:\web</code>) entpacken.
Stellen Sie sicher, das das Android SDK bereits installiert wurde.
Rufen Sie nun <code>C:\web\eclipse\eclipse.exe</code> auf und geben Sie <code>C:\web\workspace_mmprog</code>
als Workspace an.

Passen Sie nun den Workspace an Ihre Rechner-Umgebung an:
* Wenn Sie Ihren eigenen Workspace verwenden, so müssen Sie diesen noch [[Konfiguration von Eclipse|konfigurieren]].
* Wenn Sie den Workspace <code>workspace_mmprog</code> verwenden, so müssen Sie noch ein Paar [[Konfiguration von Eclipse/Anpassungen_des_MMProg-Workspaces|Anpassungen]] vornehmen.
* Wenn Sie Eclipse vollkommen neu installieren, so sollten Sie die nachfolgenden Installationshinweise beachten.

Tipp: Wenn man sich nicht manuell um das Updaten von Plugins kümmern möchte, empfiehlt es sich wo möglich Update Sites zu verwenden.

=Installation von Eclipse=

* Eclipse (Juno, 4.2) herunterladen:
** Eclipse IDE for Java EE Developers (32 Bit oder 64 Bit) [http://eclipse.org/downloads/ herunterladen]
* Zip-Datei nach <code>C:/web</code> (Windows) bzw. <code>/Applications/</code> (Mac OS) entpacken ? <code>C:/web/eclipse</code> enthält Eclipse (<code>C:/web/eclipse/eclipse.exe</code> bzw. <code>/Applications/eclipse/Eclipse.app</code>)

=Diverse weitere Eclipse-Pakete installieren=

==Kurze Variante (Eclipse auf Englisch)==

===XML-Editor „Rinzo“, Subclipse und Aptana===
* Diese XML-Datei mit den Update-Sites herunterladen.
* <code>Window</code> ? <code>Install/Update</code> ausklappen ? <code>Available Software Sites</code> ? <code>Import</code> ? Datei auswählen ? <code>Öffnen</code>
* <code>Help</code> ? <code>Install New Software...</code>
* Work with: <code>--All Available Sites--</code>
* <code>Aptana Studio 3</code>, <code>Rinzo XML Editor</code> und <code>Subclipse</code> auswählen ? <code>Next</code> ? <code>Next</code> ? Lizenzen akzeptieren ? <code>Finish</code>
* Warnung akzeptieren: <code>OK</code>
* Neustarten-Frage bejahen: <code>Yes</code>

==Lange Variante==

===XML-Editor „Rinzo“===
Da in Eclipse ein guter XML-Editor fehlt, sollte ein geeigneter Editor installiert werden.
Die wirklich guten Editoren gibt es leider nicht als Open-Source-Software. Der XML-Editor
„Rinzo“ ist zwar nicht sehr leistungsfähig, dafür aber Open-Source-Software.

Variante 1 (Update-Site):
* <code>C:\web\eclipse\eclipse.exe</code> bzw. <code>/Applications/eclipse</code> starten
* <code>Hilfe</code> ? <code>Neue Software installieren...</code>
* Work with: <code>''http://editorxml.sourceforge.net/updates''</code> ? <code>Hinzufügen</code>
* Name: <code>''Subclipse''</code> ? <code>OK</code>
* Alle Pakete auswählen ? <code>Weiter</code> ? <code>Weiter</code> ? <code>Ich akzeptiere ...</code> auswählen ? <code>Fertigstellen</code>
* Warnung akzeptieren: <code>OK</code>
* <code>Jetzt neu starten</code>

Variante 2 (manuell):
* XML-Editor Rinzo [http://sourceforge.net/projects/editorxml/ herunterladen]
* Inhalt der ZIP-Datei in Verzeichnis <code>C:\web\eclipse\dropins</code> bzw. <code>/Applications/eclipse/dropins</code> einfügen
* Eclipse neu starten

===Subclipse===
Sublipse ist ein recht guter [[Subversion|Subversion-Client]] für Eclipse.

Die meisten Eclipse-Pakete können sehr einfach mit Hilfe von Update-Sites
installiert werden, so auch Subclipse.

* <code>C:\web\eclipse\eclipse.exe</code> bzw. <code>/Applications/eclipse</code> starten
* <code>Hilfe</code> ? <code>Neue Software installieren...</code>
* Work with: <code>''http://subclipse.tigris.org/update_1.8.x''</code> ? <code>Hinzufügen</code>
* Name: <code>''Subclipse''</code> ? <code>OK</code>
* Alle Pakete auswählen ? <code>Weiter</code> ? <code>Weiter</code> ? <code>Ich akzeptiere ...</code> auswählen ? <code>Fertigstellen</code>
* Warnung akzeptieren: <code>OK</code>
* <code>Jetzt neu starten</code>
* Haken vor <code>Report usage ...</code> entfernen.
* <code>OK</code>

===Aptana===

Aptana ist ein Eclipse-Plugin zur Entwicklung von HTML/JavaScript-Anwendungen.

* <code>C:\web\eclipse\eclipse.exe</code> bzw. <code>/Applications/eclipse</code> starten
* <code>Hilfe</code> ? <code>Neue Software installieren...</code>
* Work with: <code>''http://download.aptana.com/studio3/plugin/install''</code> ? <code>Hinzufügen</code>
* Name: <code>''Aptana''</code> ? <code>OK</code>
* Alle Pakete auswählen ? <code>Weiter</code> ? <code>Weiter</code> ? <code>Ich akzeptiere ...</code> auswählen ? <code>Fertigstellen</code>
* Warnung akzeptieren: <code>OK</code>
* <code>Jetzt neu starten</code>
* <code>OK</code>

Wem das Aptana-HTML-Farbschema nicht gefällt, der kann dieses ändern:

* <code>Fenster</code> ? <code>Benutzervorgaben</code> ? <code>Aptana Studio</code> aufklappen ? <code>Themes</code> ? Drop-Down-Men+ (Inhalt <code>Aptana Studio)</code> öffnen und neues Farbschema wählen ?<code>OK</code>

==YUI Compressor ==

* YUI Compressor ([http://yuilibrary.com/download/yuicompressor/ yuicompressor-2.x.x.zip]) herunterladen
* yuicompressor-2.x.x.zip in den Ordner <code>C:\web\eclipse\dropins</code> bzw. <code>/Applications/eclipse/dropins</code> entpacken
* Ordner <code>C:\web\eclipse\dropins\yuicompressor</code> bzw. <code>/Applications/eclipse/dropins/yuicompressor</code> erstellen
* In den Ordner <code>C:\web\eclipse\dropins\yuicompressor</code> bzw. <code>/Applications/eclipse/dropins/yuicompressor</code> die Datei [http://glossar.hs-augsburg.de/svn/eclipse/build.xml <code>build.xml</code>]<ref>vgl. {{Quelle|Santos, S. (2009): Combine and minimize JavaScript and CSS files for faster loading}}</ref> einfügen

Passen Sie in der Datei <code>build.xml</code> den Pfad und Versionnummer des YUI Compressors in den beiden Zeilen

<source lang="xml">
Windows...
<property name="BUILD_DIR" value="C:/web/eclipse/dropins/yuicompressor-2.4.7/build" description="Files needed to build" />
<property name="YUI" value="${BUILD_DIR}/yuicompressor-2.4.7.jar" description="YUICompressor" />
...
</source>

<source lang="xml">
OS X...
<property name="BUILD_DIR" value="/Applications/eclipse/dropins/yuicompressor-2.4.7/build" description="Files needed to build" />
<property name="YUI" value="${BUILD_DIR}/yuicompressor-2.4.7.jar" description="YUICompressor" />
...
</source>

an Ihre Gegebenheiten an.

==Optionale Pakete==
Bei folgende Pakete macht nur in bestimmten Situationen Sinn sie zu installieren.

===ADT===
ADT ist ein Eclipse-Plugin, dass die Entwicklung von [[Java]]-Anwendungen für [[Android]]-[[Smarphone]]s ermöglicht.
Voraussetzung ist, dass das Android SDK installiert worden ist.

* <code>C:\web\eclipse\eclipse.exe</code> bzw. <code>/Applications/eclipse</code> starten
* <code>Hilfe</code> ? <code>Neue Software installieren...</code>
* Work with: <code>''https://dl-ssl.google.com/android/eclipse/''</code> ? <code>Hinzufügen</code>
* Name: <code>''ADT''</code> ? <code>OK</code>
* Alle Pakete auswählen ? <code>Weiter</code> ? <code>Weiter</code> ? <code>Ich akzeptiere ...</code> auswählen ? <code>Fertigstellen</code>
* Warnung akzeptieren: <code>OK</code>
* <code>Jetzt neu starten</code>
* <code>Fenster</code> ? <code>Benutzervorgaben</code> ? <code>Android</code>
* Wenn dieser Menü-Punkt das erste Mal aufgerufen wird, fragt Eclipse nach, ob ADT-Benutzungsstatistiken an Google gesendet werden sollen. Hier würde ich das ensprechende Häckchen entfernen ? Auf jeden Fall muss <code>Proceed</code> angeklickt werden.
* SDK Location: <code>C:\web\android-sdk</code> bzw. <code>/Benutzer/'''BENUTZERNAME'''/Programmierung/web/android-sdk</code> (Installationsverzeichnis des SDK-Managers;'''der Pfad darf keine Leerzeichen enthalten''') ? <code>Anwenden</code> ? <code>OK</code>
* <code>Fenster</code> ? <code>Android SDK Manager</code> starten
* <code>Android SDK Platformtools</code> installieren (falls diese nicht bereits installiert worden sind)

===Deutsche Sprachpakete installieren===
Das [http://www.eclipse.org/babel/downloads.php Eclipse Babel Project] stellt diverse Sprach-Pakete zu Verfügung, die allerdings noch nicht ganz fertiggestellt sind.

# Eclipse starten (<code>C:\web\eclipse\eclipse.exe</code> bzw. <code>/Applications/eclipse/Eclipse.app</code>)
# Wählen Sie einen geeignet Workspace aus (z.B. <code>C:\web\mmprog</code> bzw. <code>/Benutzer/'''BENUTZERNAME'''/Studium/mmprog</code>; auf den Laborrechnern müssen Sie Ihr Home-Verzeichnis nehmen, nicht den Desktop!)
# <code>Help</code> ? <code>Install New Software</code>
# Work with: <code>''http://download.eclipse.org/technology/babel/update-site/R0.10.0/juno''</code> (bei Eclipse Indigo: <code>''http://archive.eclipse.org/technology/babel/update-site/R0.9.1/indigo''</code>) ? <code>Add</code>
# <code>Name: ''Babel''</code> ? <code>OK</code>
# (lange) warten bis <code>Pending</code> verschwindet
# <code>Babel Language Packs in German</code> selektieren ? <code>Next</code> ? <code>Next</code> ? <code>I accept ...</code> selektieren ? <code>Finish</code>
# Warnung akzeptieren: <code>OK</code>
# <code>Restart Now</code>

Häufig sind die Babel Eclipse Server überlastet und eine manuelle Installation des Sprachpakets ist optional möglich:
# Downloaden des Pakets <code>''http://download.eclipse.org/technology/babel/babel_language_packs/R0.10.0/juno/juno.php#de''</code> (vgl. <code>http://www.eclipse.org/babel/downloads.php</code>)
# <code>BabelLanguagePack-eclipse-de_4.2.0.v20120721043402.zip</code> herunterladen
# Die beiden Ordner, die im Ordner <code>eclipse</code> des ZIP-Archivs enthalten sind, in den Eclipse-Programm-Ordner <code>C:\web\eclipse</code>
# Bei OSX Vorsicht! - Inhalte der Ordner '''features''' und '''plugins''' in die jeweiligen Ordner <code>/Applications/eclipse/features</code> und <code>/Applications/eclipse/plugins</code> kopieren
# Eclipse neu starten

====Deutsche Rechtschreibprüfung installieren====
# [http://a-weinert.de/frame4j/downloads/de_DE.dic de_DE.dic] (von Albrecht Weinert) herunterladen und unter <code>C:/web/eclipse/dropins</code> bzw. <code>/Applications/eclipse/dropins</code> speichern
# <code>Fenster</code> ? <code>Benutzervorgaben</code> ? <code>Allgemein</code> aufklappen ? <code>Editoren</code> aufklappen ? <code>Texteditoren</code> aufklappen ? <code>Schreibprüfung selektieren</code>
# Benutzerdefiniertes Wöerterbuch: <code>Durchsuchen</code> und die Datei <code>de_DE.dic</code> selektieren (bzw. <code>${eclipse_home}\dropins\de_DE.dic</code> eintragen)
# Codierung: <code>Sonstige</code> anklicken ? <code>UTF-8</code> wählen
# <code>OK</code>

Tipp: Wenn Sie mit der Maus ein rot unterringeltes Wort anklicken und anschließend <code>Strg-1</code> (<code>Ctrl-1</code>) drücken,
können Sie das Wort ins Wörterbuch einfügen oder andere Aktionen durchführen, damit ein vermeintlicher Rechtschreibfehler nicht mehr angezeigt wird.

==Installation des Flash Builder (optional)==

[[Flash Builder]] ist eine kommerzielle Software, basierend auf Eclipse Indigo, zum Entwickeln von [[Flash]]-Anwendungen.
Man kann [http://www.adobe.com/cfusion/tdrc/index.cfm?product=flash_builder&loc=de Flash Builder 4.6] (nach erfolgreicher Registrierung) als 60-Tage-Testlizenz herunterladen.

* [http://www.adobe.com/cfusion/tdrc/index.cfm?product=flash_builder&loc=de Flash Builder 4.6] herunterlanden
* Eclipse und Browser beenden
* FlashBuilder_4_6_LS10.exe ausführen und [http://kb2.adobe.com/de/releasenotes/921/cpsid_92180.html#main_Install%20your%20software Flash Builder installieren]

'''Als Studierender''' erhält man eine '''kostenlose Lizenz''' für den Flash Builder, indem man im [http://www.adobe.com/de/devnet/flex/free/index.html Adobe Flex Developer Center] mit seinen persönliche Daten und JPEG-Kopie der Immatrikulationsbescheinigung Lizenz anfordert. Diese wird einem dann per E-Mail zugeschickt.

Die meisten der nachfolgenden Installations- und Konfigurationsvorschläge funktionieren auch für den Flash-Builder.
Sie sollten allerdings nur Subclipse und evtl. Rinzo installieren. Die anderen Pakete sind für eine Flash/ActionScript-Entwicklung
unnötig.

Beachten Sie, dass der Flash Builder auf ''Eclipse Indigo'', der Vorgänger-Version von ''Eclipse Juno'', basiert und daher
die Installationsschritte leicht abweichen können.

Zu guter Letzt sollten Sie den Flash Builder [[Konfiguration von Eclipse|konfigurieren]].

=Eclipse konfigurieren=

Befolgen Sie die Anweisungen von „[[Konfiguration von Eclipse]]“.

=Integration von Tomcat=

Tomcat wird folgendermaßen in Eclipse eingebunden:

* <code>Datei</code> ? <code>Neu</code> ? <code>Andere</code>
* Klick auf Dreieck vor <code>Server</code> ? <code>Server</code>
* Klick auf Dreieck vor <code>Apache</code> ? <code>Tomcat Version 7.0 - Server</code> ? <code>Weiter</code>/<code>Fertig stellen</code> (je nachdem, welcher Button klickbar ist)
* Tomcat-Installationsverzeichnis angeben: <code>C:\web\tomcat</code>
* Klick auf <code>Fertig stellen</code>

Tomcat-Projekt benötigen eine Laufzeit-Umgebung, in der die eigentlichen Web-Auftritte gespeicher werden. Hierfür gibt es mehrere Möglichkeiten:
* das Tomcat-Webapps-Verzeichnis (<code>C:\web\tomcat\webapps</code>)
* ein spezieller Ordner im versteckten Verzeichnis <code>C:\web\workspace\.metadata</code> (schwer zu finden, nicht zu empfehlen)
* ein Eclipse-Projekt namens Tomcat, auf dessen Inhalt auch direkt über Eclipse zugegriffen werden kann

Hier wird die dritte Möglichkeit verwendet:

* <code>Datei</code> ? <code>Neu</code> ? <code>Andere</code>
* Klick auf Dreieck vor <code>Allgemein</code> ? <code>Projekt</code>
* Projektname: <code>Tomcat</code>
* Tomcat konfigurieren: <code>Server</code> ? Doppelklick <code>Tomcat Version 7.0 - Server</code>
* Tomcat konfigurieren: <code>Use custom Location</code> ? Server path: <code>Tomcat</code> (das ist das zuvor angelegte Projekt), Deploy path: <code>webapps</code>
* Tomcat ist einsatzbereit: <code>Server</code> ? Rechtsklick <code>Tomcat Version 7.0 - Server</code> oder Steuermenü in der Serverleist: Tomcat starten/stoppen etc.

<gallery widths="350" heights="250" perrow="2">
Medium:Eclipse_Tomcat_01.png | Neue Tomcat-Umgebung erstellen: <code>Andere</code> wählen
Medium:Eclipse_Tomcat_02.png | Neue Tomcat-Umgebung erstellen: <code>Server</code> wählen
Medium:Eclipse_Tomcat_03.png | Neue Tomcat-Umgebung erstellen: <code>Tomcat 6 </code> wählen
Medium:Eclipse_Tomcat_04.png | Pfad zu Tomcat-Server angeben
Medium:Eclipse_Tomcat_01.png | Generischs Projekt erstellen: <code>Andere</code> wählen
Medium:Eclipse_Tomcat_05.png | Generische Projekt erstellen: <code>Projekt</code> wählen
Medium:Eclipse_Tomcat_06.png | Projektname <code>Tomcat</code>
Medium:Eclipse_Tomcat_07.png | Tomcat konfigurieren und mit <code>Strg-S</code> speichern
Medium:Eclipse_Tomcat_08.png | Tomcat verwalten: starten/stoppen/etc.
Medium:Eclipse_Tomcat_09.png | Tomcat-Log-Datei: Der Start war erfolgreich
</gallery>

=Integration von Apache=
{{TBD}}

=Quellen=
<references/>
<ol start="2">
<li> {{Quelle|Kowarschick, W.: Content-Management}}</li>
<li> {{Quelle|Kowarschick, W.: Multimedia-Datenbanksysteme}}</li>
<li> {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</li>
</ol>
Alle übrigen Quellen wurden direkt im Text angegeben.
[[Kategorie:Kapitel:Web-Programmierung]][[Kategorie:Web-Programmierung-HowTo]]
</pre>