Einfache Web Anwendung mit Dart Part 1

Dart und Html. Sie wissen vielleicht das man mit Dart auf Html Elemente zugreifen kann. Dabei nimmt Dart nicht nur die Rolle von Javascript ein. Am Ende wird der Dart Code in Javascript umgewandelt !

Vielleicht fragen Sie sich: Wieso dann nicht gleich das Original lernen ??

Die Antwort: Dart ist nicht nur eine eigenständige Programmiersprache, sondern sie ist auch die Grundlage für Flutter. Mit Flutter können Sie Apps für Mobil entwickeln, Webanwendungen und in naher Zukunft auch Desktop Apps. Das heisst, sollten Sie sich entschließen Dart zu lernen, erhalten Sie Zugang zu einem grösseren Bereich, der viele wichtige Anwendungsgebiete abdeckt.

Was bisher zu lesen war:

Ich habe in jüngerer Vergangenheit bereits drei Posts zum Thema gemacht: Die Integration von Bootstrap 5 in ein Dart Web Projekt, und eins, zwei Post zum Thema, wie man auf ein Html Element zugreift. In diesem Post werden wir beginnen eine einfache todo App zu programmieren. Grundlage des Posts ist das sehr gute Tutorial von Tensor Programming, das Sie hier finden.

Grundlage

Den Boiler Code für eine einfache Dart Webanwendung finden Sie hier. Die Code Beispiele in diesem Artikel beziehen sich auf diesen Code. Zu Beginn hier der css3 Code für diesen Artikel. Ich verzichte dabei auf den Einsatz von Bootstrap 5 :

Dieser Code enthält einige Formatierungen. Sie können Sie natürlich ändern und ein wenig experimentieren.

Als nächstes ändern wir im Html File den Code. Dabei löschen wir den Code

<div>
	<h1 class="display-4" id="output"></h1>
	</div

Und ersetzten ihn mit folgendem:

Im Code oben sehen Sie ein div mit der id output.  Innerhalb dieses divs haben wir ein label Element für die Beschriftung des input Felds, anschliessend ein input Feld für text.

Es folgt ein Button und ein leerer div mit der id aufgaben-liste. Diesen leeren div werden wir später noch mit Dart zum leben erwecken.

Beachten Sie id der jeweiligen Elemente, soweit vorhanden. Sie dienen als Identifikationsmerkmale für Dart.

Dart Code

Zuerst werden im Code Variablen definiert. Mit dem Befehl querySelector und der id des Elements, weisen Sie die Html Elemente den Variablen zu.

Von den drei Variablen, müssen Sie bei zwei auf ein Ereignis reagieren, aufgabenInput und buttonLoeschen. Die dritte Variable, uiListe, enthält das leere div aufgaben-liste. 

Zum besseren Verständnis..so wird unsere Html Seite aussehen, wenn der Code dann lauffähig ist:

Das input Element löst dann ein Ereignis aus, wenn der Benutzer text eingibt und diese Eingabe mit Enter abschließt. Dieses Ereignis erwarten Sie mit aufgabenInput.onChange.listen(addAufgabe); . Wenn das Ereignis eintritt, wird die Funktion addAufgabe aufgerufen.

Ganz ähnlich funktioniert der Button. Mit buttonLoeschen.onClick.listen(aufgabenLoeschen); werden Sie informiert, sobald der Button geclickt wurde. In diesem Fall wird aufgabenLoeschen aufgerufen.

Im nächsten Post werden wir die App weiter aufbauen und uns den Code genau ansehen. 

Wer schon jetzt den ganzen Code betrachten möchte. Hier ist der GitHub Link. 

Zum zweiten Teil dieses Artikels hier clicken.

Bis bald!