Teil 2: HTML vorbereiten

Unser Ziel ist eine dymanische Webapplikation: Der Benutzer soll direkt Änderungen vornehmen können. Es gibt aber auch Teile unserer Webapplikation, die statisch sind und sich somit nicht verändern werden (wie zum Beispiel der Titel “Kanban Board”).

Es wäre zwar möglich, alles HTML, auch das statische, aus dem Dart-Code heraus zu generieren. Meistens ist es aber einfacher, gewisse Teile in der HTML-Datei bereits zu definieren. Wir werden deshalb die ganze Grundstruktur vom Kanban Board im HTML vorbereiten.

Textfeld und Knopf

Zuerst erstellen wir ein Textfeld (Input) und einen Knopf (Button). Öffnen Sie die index.html und ergänzen Sie ihren Code mit dem gelb markierten Zeilen.

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

<input id="todo-input" type="text" class="form-control" placeholder="Was soll erledigt werden?">
<button id="todo-button" type="button" class="btn btn-primary">Hinzufügen</button>

Achten Sie darauf, dass Sie die zwei Code-Zeilen an der richtigen Stelle einfügen.

Styling

Wir verwenden Bootstrap-Klassen für das Input-Element und für den Button.

Standardmässig werden die Textfelder in Bootstrap auf der ganzen Breite angezeigt. Wir möchten jedoch, dass der Knopf schön neben dem Textfeld positioniert wird.

Solche Anpassungen können wir in der zugehörigen CSS-Datei vornehmen. Öffnen Sie also die Datei styles/main.css, löschen Sie den generierten Code und ersetzen Sie ihn mit folgendem CSS:

body {
  background-color: #e9e6e1;
}

.page-header {
  border-bottom: 1px solid #888;
}

#todo-input {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

Die beiden ersten Regeln verändern die Farbe des Hintergrunds und der feinen Linie. Sie können natürlich eine beliebige Farbe wählen.

Bei der dritten Regel sprechen wir das Textfeld an über die ID todo-input. Darin geben wir an, dass es nicht die gesamte Breite einnehmen soll.

Drei Spalten - Todo, Doing, Done

Als nächstes brauchen wir die drei Spalten für unser Kanban Board: Todo, Doing und Done.

Dafür empfielt es sich das Bootstrap-Raster zu verwenden. Im Artikel über Website-Layout erkläre ich ausführlich, wie das Bootstrap-Layout verwendet werden kann.

Der fertige Code in index.html sieht mit den drei Spalten wie folgt aus:

<!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>

      <input id="todo-input" type="text" class="form-control" placeholder="Was soll erledigt werden?">
      <button id="todo-button" type="button" class="btn btn-primary">Hinzufügen</button>

      <div class="row">
        <div class="col-sm-4">
          <h2><span class="glyphicon glyphicon-inbox"></span> Todo</h2>
          <div id="todo-list" class="list-group">
            <a href="#" class="list-group-item">Mein erstes Todo</a>
          </div>
        </div>
        <div class="col-sm-4">
          <h2><span class="glyphicon glyphicon-cog"></span> Doing</h2>
          <div id="doing-list" class="list-group">
          </div>
        </div>
        <div class="col-sm-4">
          <h2><span class="glyphicon glyphicon-thumbs-up"></span> Done</h2>
          <div id="done-list" class="list-group">
          </div>
        </div>
      </div>
      </div>

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

Erklärungen

Das Layout enthält eine Zeile mit Klasse row und für Spalten mit Klasse col-sm-4. Bootstrap sorgt dafür, dass die Spalten bei kleinen Bildschirmen untereinander angezeigt werden.

In jeder Spaltenüberschrift verwenden wir ein Icon. Die Glyphicons sind bei Bootstrap automatisch dabei.

Jede Spalte enthält ein div-Element mit der Klasse list-group. Dies sind Bootstrap-Listengruppen. Darin werden wir die einzelen Todo-Elemente auflisten.

Die erste Listengruppe enthält bereits ein Beispielelement mit dem Text “Mein erstes Todo”.

Testen

Wenn Sie das Programm jetzt starten, sollte es wie folgt aussehen. Testen Sie auch, wie es aussieht, wenn sie das Browser-Fenster ganz schmal machen.

Bootstrap Spalten

Wie weiter?

Wir könnten natürlich im HTML-Code weitere Todo-Elemente in die drei Spalten einfügen. Aber das Ziel ist offensichtlich, dass dies dynamisch möglich ist. Das heisst, dass man neue Elemente mit dem Textfeld und dem Knopf hinzufügen kann.

So etwas ist mit reinem HTML nicht möglich. Im Teil 3 lernen wir, wie wir neue Elemente mit Dart dynamisch hinzufügen können.

code.makery