code.makery

Learning how to code.

Edit on GitHub
Dart Kanban - Die bessere Todo-Liste (Deutsch)

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. Manchmal 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). Öffne die index.html und ergänze 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="What needs to be done?">
<button id="todo-button" type="button" class="btn btn-primary">Add</button>

Achte darauf, dass du die zwei Code-Zeilen an der richtigen Stelle einfügst.

Styling

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

Textfeld und Knopf

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. Öffne also die Datei styles.css, lösche den generierten Code und ersetze ihn mit folgendem CSS:

body {
  background-color: #e9e6e1;
}

.page-header {
  margin-top: 20px;
  margin-bottom: 20px;
  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, fügen Abstände und eine feine Linie hinzu. Du kannst das natürlich beliebig abändern.

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.

Textfeld und Knopf

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://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <title>Kanban Board</title>
    <link rel="stylesheet" href="styles.css" />
    <link rel="icon" href="favicon.ico" />
    <script defer src="main.dart.js"></script>
  </head>

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

      <input id="todo-input" type="text" class="form-control" placeholder="What needs to be done?">
      <button id="todo-button" type="button" class="btn btn-primary">Add</button>
      
      <div class="row mt-4">
        <div class="col-md-4">
          <h2>📥 Todo</h2>
          <div id="todo-list" class="list-group mt-3 mb-4">
            <a href="#" class="list-group-item list-group-item-action">Mein erstes Todo</a>
          </div>
        </div>
        <div class="col-md-4">
          <h2>⚙️ Doing</h2>
          <div id="doing-list" class="list-group mt-3 mb-4">
          </div>
        </div>
        <div class="col-md-4">
          <h2>👍 Done</h2>
          <div id="done-list" class="list-group mt-3 mb-4">
          </div>
        </div>
      </div>

    </div>
  </body>
</html>

Erklärungen

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

In jeder Spaltenüberschrift verwenden wir ein Emoji. Eine andere Möglichkeit, wäre z.B. Bootstrap Icons einzubinden.

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 du das Programm jetzt startest, sollte es wie folgt aussehen. Teste auch, wie es aussieht, wenn du das Browser-Fenster ganz schmal machst.

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 natürlich, 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.