Für unser Management of Change werden wir früher oder später eine Eingabemöglichkeit für die Knoten und Verbindungen benötigen.
Damit wir einfacher diskutieren können, habe ich kurz so eine Eingabemöglichkeit skizziert.
Funktionale Anforderungen
- Es müssen beliebig viele Knoten angelegt werden können
- Es müssen zwischen allen Knoten (gerichtete) Verbindungen angelegt werden können
- Die Knoten sollen auf dem Zeichenblatt frei verschiebbar sein
- Knoten und Verbindungen müssen gelöscht werden können
- Wenn ein Knoten oder eine Verbindung angeklickt wird, müssen die notwendigen Texte und Berechnungen eingefügt werden können
Nichtfunktionale Anforderungen
- Ich möchte dass die Zeichnerei auf einem Standard-Webbrowser funktioniert
- Es sollen nur HTML und JavaScript vorausgesetzt werden
So, damit sind die Anforderungen klar.
Das vorläufige Ergebnis könnt ihr unter DER BOBBELGENERATOR bewundern 
Ich habe mich für jQuery und jsDraw2D entschieden um die Bobbels zu zeichnen und verschieben.
Das dazugehörende HTML-Dokument sieht so aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Bobbel Generator</title>
</head>
<body>
<h1>Der Bobbelgenerator</h1>
<p>Mit dem Bobbelgenerator können für MOC Knoten erstellt und mit Linien verbunden werden</p>
<p id="current_selected_circle_text">Noch kein Knoten selektiert.</p>
<p id="current_selected_line_text">Noch keine Linie selektiert.</p>
<form action="">
<div>
<input id="new_circle" type="button" value="Neuer Bobbel" onclick="addCircle();" />
<input id="new_line" type="button" value="Neue Linie" onclick="addLine();" />
</div>
</form>
<div id="all_input_lines"></div>
<div id="canvas">
<div id="all_lines"></div>
<div id="all_circles"></div>
</div>
<script type="text/javascript" src="/js/jquery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="/js/jquery/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="/js/jquery/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/js/jquery/ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="/js/jquery/ui/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="/js/js_draw_2d/jsDraw2D.js"></script>
<script type="text/javascript" src="/js/bobbel.js"></script>
</body>
</html>
Es hat also einen Button um einen neuen Knoten anzulegen und einen Button um eine neue Linie anzulegen.
Damit die Linien hinter den Kreisen angezeigt werden, müssen sie im DOM oberhalb der Kreise platziert werden (Siehe div#canvas Inhalt)
Das war für mich eine wichtige Erkenntnis, dass man über die Positionierung im DOM die Reihenfolge der Darstellung, also sichtbar, unsichtbar, festlegen kann. Vermutlich wäre es noch sicherer wenn man die entsprechende Z-Order im CSS korrekt einstellt. Aber was solls, so geht’s erst mal auch.
Der Rest in dem Dokument ist einfach geradeaus runtergetippt.
Bei den input-Feldern habe ich die OnClick-Events schon mit den dazugehörigen Funktionen verknüpft. Das hätte ich natürlich auch im JavaScript machen können. Dann wäre weniger Vermischung von HTML und JavaScript vorhanden.
Die JavaScript-Elemente lade ich am Ende des Dokuments.
Damit erreiche ich, dass der Browser zuerst den HTML-DOM-Baum lädt und interpretiert. Das Übersetzen von JavaScript findet erst nach der Anzeige statt und so ist die ganze Seite für den Anwender etwas schneller nutzbar. Diese Vorgehensweise wurde mir im Buch jQuery Kochbuch von O´ Reilly (ISBN 978.3.89721.999-1) erklärt. Danke für die Idee!
Tja und mehr gibt es zum HTML-Dokument nicht zu sagen.
Ähnliche Beiträge
www.baldenhofer.eu © seit 2009
Dieser Feed kommt vom Guggat emol Blog, viel Spaß beim Lesen! Über Links zu Artikeln freuen wir uns, jedoch bitte bindet nicht einfach unsere Inhalte in eure Seite ein, danke. Hinweis für Feedleser: Beiträge, die Quellcode enthalten sind auf der Webseite meist besser lesbar, als in einem Feed-Reader.
4e3744397ab2a417f811b29573bcbef4)