HTML5-Tutorium: Canvas: Hello World 03

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

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

Umfang: 4 (unwichtige Fakten fehlen)

Quellenangaben: 5 (vollständig vorhanden)

Quellenarten: 5 (ausgezeichnet)

Konformität: 4 (sehr gut)

HTML-Tutorium Hello World: JavaScript | Canvas | SVG

Inhalt | Teil 1 | Teil 2

Ergebnis: hello.html (SVN-Repository)

HTML5: Hello-<name>-Anwendung mit Canvas

Die in Teil 2 erstellten JavaScript-Dateien der Hello-World-Anwendung sollen komprimiert werden, um die Zugriffszeiten zu beschleunigen. Dies erfolgt mit Hilfe des Tools YUI Compressor

Neues Projekt anlegen

Legen Sie ein neues Projekt an

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

Kopieren Sie die Dateien js/main.js, css/main.css und hello.html in den Ordner WebContent des neuen Projektes.

Ändern Sie die Zeilen

    <link rel="stylesheet" href="css/main.css" />
    <script src="js/main.js" type="text/javascript"></script>

in

    <link rel="stylesheet" href="css/all.min.css" />
    <script src="js/all.min.js" type="text/javascript"></script>

Wenn man nun das Projekt testet, passiert nicht viel, da es die Dateien all.min.css und all.mim.js noch nicht gibt.

CSS- und JavaScript-Dateien komprimieren

YUI Compressor installieren

1. YUI Compressor (yuicompressor-2.x.x.zip) herunterladen
2. yuicompressor-2.x.x.zip in den Ordner C:\web\eclipse\dropins entpacken

Build-Skript installieren

1. Ordner C:\web\eclipse\dropins\yuicompressor erstellen

Fügen Sie in den Ordner C:\web\eclipse\dropins\yuicompressor folgende Datei build.xml ein (vgl. ):

<project name="Compress CSS/JS" default="all" basedir=".">
  <!-- Setup -->
  <property name="SRC_DIR" value="WebContent" description="Source folder" />
  <property name="SRC_CSS_DIR" value="${SRC_DIR}/css" description="CSS source folder" />
  <property name="SRC_JS_DIR" value="${SRC_DIR}/js" description="JavaScript source folder" />
  <property name="DIST_DIR" value="WebContent" description="Output folder for build targets" />
  <property name="DIST_CSS_DIR" value="${DIST_DIR}/css" description="Output folder for CSS files" />
  <property name="DIST_JS_DIR" value="${DIST_DIR}/js" description="Output folder for JavaScript files" />
  <property name="BUILD_DIR" value="c:/web/eclipse/dropins/yuicompressor-2.4.6/build" description="Files needed to build" />
  <property name="YUI" value="${BUILD_DIR}/yuicompressor-2.4.6.jar" description="YUICompressor" />
 
  <!-- Files names for distribution -->
  <property name="ALL_CSS" value="all.css" />
  <property name="ALL_CSS_MIN" value="all.min.css" />
  <property name="ALL_JS" value="all.js" />
  <property name="ALL_JS_MIN" value="all.min.js" />
  <property name="CSS" value="${DIST_CSS_DIR}/${ALL_CSS}" />
  <property name="CSS_MIN" value="${DIST_CSS_DIR}/${ALL_CSS_MIN}" />
  <property name="JS" value="${DIST_JS_DIR}/${ALL_JS}" />
  <property name="JS_MIN" value="${DIST_JS_DIR}/${ALL_JS_MIN}" />
 
  <!-- Targets -->
  <target name="html" description="Copy HTML files to the output folder">
    <mkdir dir="${DIST_DIR}" />
    <copy todir="${DIST_DIR}">
       <fileset dir="${SRC_DIR}">
         <exclude name="css/*.css" />
         <exclude name="js/*.js" />
       </fileset>
    </copy>
  </target>
 
  <target name="css" depends="html" description="Concatenate CSS source files">
    <echo message="Building ${CSS}" />
    <concat destfile="${CSS}">
      <fileset dir="${SRC_CSS_DIR}" includes="*.css" />
    </concat>
    <echo message="${CSS} built." />
  </target>
 
  <target name="css.min" depends="css" description="Minimize CSS files">
    <echo message="Building ${CSS_MIN}" />
    <apply executable="java" parallel="false" verbose="true" dest="${DIST_CSS_DIR}">
      <fileset dir="${DIST_CSS_DIR}">
        <include name="${ALL_CSS}" />
      </fileset>
      <arg line="-jar" />
      <arg path="${YUI}" />
      <arg value="--charset" />
      <arg value="ANSI" />
      <arg value="-o" />
      <targetfile />
      <mapper type="glob" from="${ALL_CSS}" to="${ALL_CSS_MIN}" />
    </apply>
    <echo message="${CSS_MIN} built." />
  </target>
 
  <target name="js" depends="html" description="Concatenate JavaScript source files">
    <echo message="Building ${JS}" />
    <concat destfile="${JS}">
      <fileset dir="${SRC_JS_DIR}" includes="*.js" />
    </concat>
    <echo message="${JS} built." />
  </target>
 
  <target name="js.min" depends="js" description="Minimize JavaScript files">
    <echo message="Building ${JS_MIN}" />
    <apply executable="java" parallel="false" verbose="true" dest="${DIST_JS_DIR}">
      <fileset dir="${DIST_JS_DIR}">
        <include name="${ALL_JS}" />
      </fileset>
      <arg line="-jar" />
      <arg path="${YUI}" />
      <arg value="--charset" />
      <arg value="ANSI" />
      <arg value="-o" />
      <targetfile />
      <mapper type="glob" from="${ALL_JS}" to="${ALL_JS_MIN}" />
    </apply>
    <echo message="${JS_MIN} built." />
  </target>
 
  <target name="clean">
    <delete dir="${CSS}" />
    <delete dir="${CSS_MIN}" />
    <delete dir="${JS}" />
    <delete dir="${JS_MIN}" />
  </target>
 
  <target name="all" depends="clean, html, css, css.min, js, js.min">
    <echo message="Build complete." />
  </target>
</project>

Passen Sie in dieser Datei die Zeilen

...
  <property name="DIST_DIR" value="WebContent" description="Output folder for build targets" />
...
  <property name="BUILD_DIR" value="c:/web/eclipse/dropins/yuicompressor-2.4.6/build" description="Files needed to build" />
  <property name="YUI" value="${BUILD_DIR}/yuicompressor-2.4.6.jar" description="YUICompressor" />
...

gemäß Ihren Wünschen an.

Zunächst müssen Sie die beiden Vorkommnisse von yuicompressor-2.4.6 an die von Ihnen installierte Version anpassen. Evtl. haben Sie auch den YUI Compressor in ein anderes Verzeichnis entpackt, als oben angegeben. Dann müssen Sie das BUILD_DIR ebenfalls entsprechend anpassen.

Die Zeile

  <property name="DIST_DIR" value="WebContent" description="Output folder for build targets" />

bewirkt, dass die Dateien all.min.css und all.min.js in die Verzeichnisse css bzw. js des aktuellen Projektes eingefügt werden.

Wenn Sie einen externen Server (wie beispielsweise einen Apache) installiert haben, dann können Sie auch die Zeile

  <property name="DIST_DIR" value="c:/web/apache/htdocs/${PROJECT}" description="Output folder for build targets" />

verwenden. Diese bewirkt, dass der Web-Auftritt samt komprimierten Dateien all.min.css und all.min.js direkt in den Web-Ordner des externen Apache-Servers exportiert werden. Den Dokument-Root-Pfad müssen Sie wieder an Ihre Gegebenheiten anpassen.

Der Vorteil der zweiten Lösung ist, dass die Änderung nach Ausführung der Build-Datei sofort auf dem externen Server verfügbar sind.

Bei der Verwendung der ersten Lösung, d.h. eines (internen oder externen) Eclipse-Servers ergeben sich immer Verzögerungen, da die Dateien von Eclipse noch zum eigentlichen Server kopiert werden müssen. Diese Verzögerung kann man allerdings konfigurieren:

• Unterstes Fenster, Reiter Server selektieren
• Gewünschten Server durch Doppelklick öffnen → Veröffentlichen aufklappen → Einstellungen anpassen

Man kann das Veröffentlichen (= Kopieren der Daten von Eclipse zum Server) auch erzwingen:

• Unterstes Fenster, Reiter Server selektieren
• Rechtsklick auf gewünschten Server → Publizieren

Bei der zweiten Lösung erfolgt die Veröffentlichung ohne Verzögerung automatisch durch Ausführen des Build-Scripts. Daher bevorzuge ich (W. Kowarschick) diese Variante. Allerdings hat sie auch einen Nachteil. Im Browser öffnet sich keine URL automatisch. Man muss also die zu testende URL von Hand in einen belibigen Browser eintragen. Das ist in unseren Fall die folgende URL:

  http://localhost/HelloWorldCanvas03/hello.html

Build-Skript ausführen

Nun fehlt noch die Integration des zuvor definierten Build-Skripts in Eclipse:

1. Projektexplorer: Selektion des aktuellen Projektes
2. Klick auf den Drop-Down-Pfeil rechts neben dem Icon „grüner Kreis mit weißem Pfeil und Werkzeugkasten“ →Externe Tools Konfigurationen
3. Klick auf das Icon „weißes Blatt mit Plus-Symbol“ (damit wird eine neues Skript erstellt, das ein externes Tool ausführt)
   • Name: Deploy
   • Erstellungsdatei: C:\web\eclipse\dropins\yuicompressor\build.xml (das ist das zuvor erstellte Build-Skript)
   • Basisverzeichnis: ${project_loc}
   • Argumente: -DPROJECT=${project_name}
4. Ausführen (Damit wird das Skript auf das zuvor selektierte Projekt angewendet.)

Künftig kann irgendein Projekt selektiert werden. Mittels eines Klicks auf das „grüner Kreis mit weißem Pfeil und Werkzeugkasten“ werden für diese Projekt die Dateien all.min.css und all.min.js erstellt und die Projektdateien (sofern dies im Build-Skript konfiguriert wurde) zum externen Server kopiert.

Wenn man mehrere externe Tools verwendet, muss man den Drop-Down-Pfeil rechts neben dem Icon „grüner Kreis mit weißem Pfeil und Werkzeugkasten“ klicken und dann das Tool Deploy klicken (nachdem man zuvor im Prjektexplorer ein Projekt selektiert hat).

Quellen

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

SVN-Repository-Verweise

• Musterlösung (SVN)