Manchmal sieht ein Job eigentlich ganz einfach und harmlos aus, entpuppt sich dann aber schnell als zeitfressender Produktivitätskiller aufgrund von Kleinigkeiten die einem im Vorfeld gar nicht aufgefallen sind. So auch bei dieser – eigentlich ziemlich anspruchslosen Aufgabe – Konvertierung einer bestehenden Access Applikation in eine ASP.NET Webapplikation wobei Funktionalität und Layout der Eingabemasken gleich bleiben soll. Aufgrund der Verwandschaft der Paradigmen zwischen den beiden Technologien eigentlich keine großer Task; so wie bei Access wird bei ASP.NET der Großteil der Arbeit bereits vom Framework erledigt. Der Teufel steckte aber dann im Detail – nämlich dem Layout der Formulare. Wurde bei dem ersten Formular noch freudig mit dem im Visual Studio enthaltenen GUI-Designer losgelegt zeigte sich dann schnell dass die so entstehenden Formulare
Sich mehr oder weniger stark von dem Original unterschieden
Resistent gegen weitere Änderungen mit dem GUI-Builder waren
Nicht mittels CSS formatiert werden konnten.
Der Quellcode ein unleserliches Chaos aus HTML-Table tags war
Nach einigen Experimentieren kristallisierte sich dann folgender Prozess heraus mit dem sich die Formulare dann doch noch problemlos nachbauen liessen, wobei das Ergebnis dann meist sogar besser als das Original aussah:
Nachbau der großen Formularblöcke mittels <div>, die je nach Bedarf über die ganze Breite gehen oder nach rechts oder links gefloated werden um nebeneinanderliegende Blöcke abzubilden.
<fieldset> und <legend> Elemente in die <div> Container einfügen (falls notwendig). Das Fieldset sollte dabei eine eindeutige ID erhalten um die spätere Formatierung mit CSS zu erleichtern.
Innerhalb der <fieldset> Elemente eine Tabelle einfügen mit der benötigten Anzahl von Spalten definiert mittels <colgroup> und <col> um die Bezeichnungen und Formularelemente entsprechend der Access-Vorlage nachzubauen. Dabei müssen die Spaltenbreiten der einzelnen Zeilen kombiniert werden um wirklich jede Zeile nachbauen zu können. In Zeilen bei denen weniger Spalten benötigt werden müssen diese dann mit dem colspan attribut der Zellenelemente kombiniert werden
Definieren der Spaltenbreiten der Tabelle mit den Elementen <colgroup> und <col>.
Definieren der Tabellenzeilen wobei Spalten wo notwendig mit dem colspan-Attribut verbunden werden.
Hinzufügen von CSS-Klassen für CSS-Formatierungen zu den Tabellenelementen, zumindest erhalten Zellen mit Bezeichnungen die Klasse „label“ sowie Zellen mit Eingabefeldern die Klasse „input“. Diese Klassen können auch später noch einfach hinzugefügt werden, die initiale Formatierung kann also mit nur wenigen Klassen erfolgen.
Verifizierung des Layouts – Änderungen zu diesem Zeitpunkt sind noch relativ schnell umzusetzen da noch keine ASP.NET Controls eingefügt sind.
Sämtliche Schritte bisher wurden direkt im Quelltexteditor umgesetzt; nach einer Eingewöhnungsphase geht das recht schnell durch die massive Verwendung von Copy & Paste. Mit Übung jedenfalls deutlich schneller als mit dem GUI-Builder. Für das Einfügen der APS.NET Controls kann man für die nächsten Schritte jedoch auf den Designmodus wechseln!
Einfügen der ASP.NET Controls in das Formular. Bei den von uns präferierten Telerik RadControls muss dabei meist eine fixe Breite definiert werden; hier ist darauf zu achten dass diese einheitlich gesetzt wird bei gleichen Spaltenbreiten. Bei der Reihenfolge sollte man sich von den komplexeren Controls (Grid, Datepicker) zu den einfacheren (Label, TextField) vorarbeiten um bei notwendigen Adaptionen sowenig wie möglich ändern zu müssen.
Eventuell notwendiges CSS-Feintuning; die Standard Styles sind für alle Formulare zentral definiert; jedoch können vereinzelte GUI-Elemente besondere Styles zugewiesen bekommen um auf eine erhöhte Wichtigkeit des Feldes hinzuweise.
Die so errungenen Ergebnisse gewinnt zwar wahrlich auch noch keine Schönheitspreise, ist aber schnell erstellt und entspricht weitestgehend den Originalformularen. Zum Beweis hier noch ein Screen der Originalapplikation im Vergleich mit dem überarbeiteten Screen.