Editoren
Framework Studio bietet für C#, HTML, CSS, XML und DocML einen speziell für die jeweilige Sprache optimierten Editor an. Als technisches Grundgerüst dient dabei der aus Microsofts Visual Studio Code bekannte Monaco Editor. So stehen die bekannten Features, wie IntelliSense, Code Highlighting, Indent Guides, Multi-Cursor Support oder Code Folding nun auch Framework Studio zur Verfügung.
Technische Details
Der Monaco Code-Editor ist eine Webanwendung basierend auf HTML, CSS und JavaScript. Der Editor wurde primär für die Integration in Electron-Anwendungen, wie Visual Studio Code, konzipiert, da diese im Gegensatz zu einem Browser auch Zugriff auf Betriebssystem-Resourcen bieten. Dennoch ist der Monaco Editor auch im normalen Browser lauffähig. In dieser Umgebung gibt es zwar Abstriche in der Funktionalität, diese sind für Framework Studio jedoch nicht relevant.
Die folgende Abbildung zeigt eine Übersicht, wie der Monaco Code Editor in Framework Studio eingebunden ist.
Die Einbindung der Editoren in Framework Studio erfolgt über ein integriertes Chromium Browser Control und einen ebenfalls in FS integrierten Webserver. Jeder Editor nutzt dabei einen separaten Prozess, welcher sich als Sub-Prozess unter den Framework Studio Hauptprozess hängt.
Soll z.B. ein C#-Editor in einem Form oder einer Component angezeigt werden, so wird der C#-Editor in FS damit beauftragt eine neue Monaco-Instanz zu initialisieren. Folgender Ablauf findet bei jedem Laden eines Editors in FS statt:
- Der C# Code-Editor in FS lädt ein Chromium Browser Control
- Ist das Browser Control geladen, wird anschließend asynchron eine Angular App vom integrierten Webserver geladen und ausgeführt
- Die Angular App lädt wiederum asynchron den Monaco Code-Editor und zeigt letztendlich den gewünschten Code an
- Ab diesem Zeitpunkt kann der Code-Editor im jeweiligen Kontext vollumfänglich verwendet werden
Der gesamte Initialisierungsprozess ist im Normalfall in wenigen Millisekunden abgeschlossen, sodass keinerlei Unterschiede zu einem normalen Editor-Control erkennbar sind. Die Performance des Monaco Editors ist dabei so hoch, dass beim Arbeiten nicht erkennbar ist, dass es sich tatsächlich um eine Webanwendung handelt.
Editor Status
In den meisten Fällen wird in Framework Studio ein CheckOut angestoßen, wenn versucht wird an einem eingecheckten Element (Form, Component, usw.) eine Änderung vorzunehmen. Aufgrund des technischen Grundgerüsts des Monaco Editors ist diese Funktionalität innerhalb des Code Editors nicht implementierbar. Dies hat zur Folge, dass das Tippen im Code Editor nicht mehr zu einer automatischen CheckOut Meldung führt.
Ein Editor kann die drei unterschiedlichen Status annehmen:
Default
Der Editor hat eine weiße Hintergrundfarbe und das Element, für welches Code angezeigt wird, ist ausgecheckt. Dies signalisiert, dass der Editor in vollem Umfang im jeweiligen Kontext zur Verfügung steht.
CheckedIn
Der Editor hat einen gelben Hintergrund und beim Versuch zu tippen wird eine Meldung angezeigt, dass dies gerade nicht möglich ist. Die gelbe Hintergrundfarbe signalisiert jedoch, dass durch ein Auschecken des Elements der Editor in den Status Default wechseln kann. Durch Auschecken wird der für den jeweiligen Kontext angezeigte Code editierbar.
Die schnellste Möglichkeit das Element auszuchecken, auch wenn der Fokus im Editor liegt, ist der Shortcut CTRL + F10.
ReadOnly
Der Editor hat eine graue Hintergrundfarbe und es kann wie beim Status CheckedIn nichts getippt werden. Die graue Hintergrundfarbe signalisiert auch, dass sich am Status des Editors durch ein etwaiges Auschecken des Elements nichts ändern wird. ReadOnly-Editoren bleiben also in jedem Kontext grau. Sie werden z.B. zum Anzeigen des generierten Codes verwendet.
Features
Die in den Editoren verfügbaren Features sind zum Großteil abhängig von der angezeigten Programmiersprache. Die wichtigsten Features werden in den folgenden Kapiteln im Detail behandelt: