Teil 1: Webapp erstellen

Eine Webapplikation erstellen

Um eine Webapplikation zu erstellen öffnen Sie das Menu File | New Project…

Schreiben Sie dart_kanban in das Feld für den Project name.
Legen Sie im zweiten Feld den Ordner fest, wo Sie das Projekt speichern wollen.
Wählen Sie ubersimplewebapp aus der Liste der Vorlagen aus.
Klicken Sie auf Finish.

Der Dart Editor erstellt daraufhin alle Dateien, die es für eine Webapplikation braucht. Wir schauen uns nun die wichtigsten Dateien an.

Die HTML-Datei

Die Datei web/index.html ist die Datei, die vom Browser geladen wird und die Grundstruktur vorgibt. Ersetzen Sie den automatisch erstellen Code mit dem folgenden HTML.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles/main.css">
    <title>Kanban Board</title>
  </head>

  <body>
    <div class="container">
      <div class="page-header">
        <h1>Kanban Board <small id="subtitle"></small></h1>
      </div>
    </div>

    <script type="application/dart" src="main.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

Speichern Sie die Datei nach den Änderungen mit File | Save oder der Tastenkombination Ctrl+S.

Erklärungen zum HTML-Code

Im head werden zwei Stylesheets eingefügt. Wir verwenden hier das Bootstrap CSS für ein attraktives Aussehen. Das zweite ist unser eigenes CSS.

Der body enthält zwei Div-Container mit Bootstrap-Klassen und einen Titel und Untertitel. Der Untertitel hat eine ID subtitle, die wir später noch verwenden werden.

Am Schluss befinden sich die zwei wichtigen script-Tags. Das erste gibt an, dass die main.dart-Datei geladen werden soll. Das zweite Script, dart.js, wird verwendet für Browser, die kein Dart unterstützten. Darin wird main.dart mit dem entsprechenden JavaScript ersetzt.

Die Dart-Datei

Öffnen Sie die Datei main.dart und ändern Sie den Code so ab, dass er wie folgt aussieht.

import 'dart:html';

void main() {
  Element subtitle = querySelector('#subtitle');
  subtitle.text = 'von Marco';
}

Erklärungen zum Dart-Code

In der ersten Zeile wird Darts HTML-Bibliothek importiert. Diese beinhaltet die wichtigsten Klassen und Funktionen, um mit dem HTML-Dokument zu interagieren.

Die main()-Funktion

Dann folgt die main()-Funktion. Diese Funktion ist der Startpunkt des Dart-Programms. Jede Dart-Applikation muss genau eine main-Funktion haben.

querySelector() verwenden

Die Funktion querySelector() stammt aus der importierten dart:html Bibliothek. Damit kann man ein Element aus dem HTML-Dokument holen. In unserem Fall ist dies das Element mit der ID subtitle.

Wir speichern das Untertitel-Element in eine Variable. Mit dem Punkt-Operator können wir auf Eigenschaften zugreifen und diese verändern.

Mit dem Gleichheits-Zeichen (=) setzen wir den Text auf den String-Wert 'von Marco'.

Alternative: Wir könnten die zwei Schritte in unserem Programm auch auf einer Zeile zusammenfassen. Damit bräuchten wir keine Variable.

querySelector('#subtitle').text = 'von Marco';

Die Webapplikation starten

Selektieren Sie nun die index.html und klicken Sie auf den Run-Knopf Run . Der Dart Editor öffnet Dartium (spezieller Chrome Browser mit integrierter Dart VM) und lädt die index.html. Der Dart-Code sorgt dafür, dass der Untertitel gesetzt wird, wie im folgenden Screenshot.

Erster Start

Andere Browser

Wenn Sie die Webapplikation in einem anderen Browser laufen lassen möchten, dann kann der Dart-Code nach JavaScript übersetzt werden mittels dem dart2js Tool (ist bereits im Dart Editor enthalten). Dazu gibt es im Dart Editor ein praktisches Kontextmenu:

Run as JavaScript

Im letzten Teil dieser Serie wird noch genauer beschrieben, wie eine Dart-Applikation in JavaScript übersetzt und auf einem Webserver veröffentlicht werden kann.

Wie weiter?

Im Teil 2 bereiten wir die Grundstruktur der HTML-Datei für unser Kanban Board vor.

code.makery