Die Control-Bibliothek meistern
Wisej.NET bringt mehr als hundert Controls mit – Grids, Diagramme, Bäume, Editoren, Layout-Container und vieles mehr. Wer sie gut kennt, kämpft nicht mehr mit der Oberfläche, sondern kommt zügig voran. Dieser Kurs ist eine gründliche Tour durch die Control-Bibliothek und zeigt, wie Sie das Beste aus jeder Control-Familie herausholen. Sie lernen Grids und Daten-Controls in- und auswendig kennen, erstellen aussagekräftige Diagramme und Baumstrukturen, stellen responsive Layouts zusammen und erweitern die Bibliothek um eigene Widgets.
Holen Sie das Beste aus über 100 Controls heraus – Grids, Diagramme, Bäume und eigene Widgets.
- Niveau: Intermediate
- Dauer: 9 Stunden
- Module: 7
Lehrplan
Modul 1: Das mentale Modell der Control-Bibliothek
Modul 1 von Die Control-Bibliothek meistern – holen Sie das Beste aus über 100 Controls heraus: Grids, Diagramme, Bäume und eigene Widgets. Lesen Sie den Lektionsleitfaden und den Lab- und Prüfungsleitfaden, sehen Sie sich den Video-Walkthrough „Control-Familien und die Shell der Operations Console“ an, bestehen Sie den Wissenstest und schließen Sie dann das praktische Lab in der Operations Console ab.
- LektüreLektionsleitfaden · 14 Min.
Der Control-Baum auf dem Server und das Widget-Modell im Browser, die Control-Familien, gemeinsame Properties und Namenskonventionen sowie die Shell der Operations Console, die im Lauf des Kurses wächst. Was das für Wisej.NET-Entwickler bedeutet – und wie Sie dieses Modul lesen.
- LektüreLab- und Prüfungsleitfaden · 10 Min.
Was Sie im praktischen Lab bauen, das vorgeschlagene Vorgehen und die geforderten Ergebnisse.
- VideolektionControl-Familien und die Shell der Operations Console · 14 Min.
Control-Familien und die Shell der Operations Console – ein geführter Video-Walkthrough zu Modul 1, Schritt für Schritt in der Operations Console aufgebaut. Läuft direkt hier im Player.
Transkript der Sprecherstimme
Erstellen Sie die Betriebskonsole um das Wisej.NET-Steuerungsmodell herum. Ihr C sharp-Code ändert serverseitige Objekte und das Framework synchronisiert deren Browser-Widgets. Das Verständnis dieser Beziehung hilft Ihnen, Steuerelemente nach Verhalten auszuwählen, anstatt den Bildschirm als eine Sammlung von Markup-Fragmenten zu behandeln.
Betrachten Sie eine Schaltfläche als ein Objekt mit Eigenschaften, Ereignissen, Lebenszyklus und Theme-Unterstützung. Wenn Sie den Text einer Statusbezeichnung ändern, wird deren Status aktualisiert. Wisej.NET überträgt die entsprechende Änderung an das Widget. Sie arbeiten mit dem Kontrollvertrag, anstatt das angezeigte Element manuell neu aufzubauen.
Beginnen Sie die Auswahl mit der Kontrollfamilie. Editoren sammeln Werte, Container organisieren Regionen, Datenkontrollen präsentieren Sammlungen und Feedbackkontrollen erläutern Ergebnisse. Extender und Integrationen erweitern die Funktionalität. Durch die Identifizierung der Familie wird die Suche eingegrenzt, bevor Sie einzelne Steuerelementeigenschaften vergleichen.
Fragen Sie, was der Benutzer mit den Daten tun muss. Eine Hierarchie schlägt TreeView vor, Datensätze schlagen DataGridView vor und wiederverwendbare Schnittstellenbereiche schlagen UserControl vor. Greifen Sie zu einem benutzerdefinierten Widget erst, nachdem Sie überprüft haben, ob ein vorhandenes Steuerelement bereits zur erforderlichen Interaktion passt.
Notieren Sie sich die Konventionen, bevor Sie weitere Bildschirme hinzufügen. Geschäftsrollennamen, bewusstes Andocken und Verankern, Tastaturreihenfolge, Feedback und Darstellungstasten sollten in allen Modulen konsistent sein. Eine Auswahlhilfe macht diese Entscheidungen erklärbar, wenn ein anderer Entwickler die Konsole erweitert.
Benennen Sie Steuerelemente und Handler für ihre Rollen um, damit ein Leser Code mit dem Bildschirm verbinden kann. Ersetzen Sie absolute Positionen durch Navigations-, Befehls-, Status- und Inhaltsbereiche. Das Andocken drückt aus, wie diese Bereiche den Platz teilen, wenn sich die Fenstergröße ändert.
Zentralisieren Sie die Navigation, sodass jede Seite dem gleichen Übergang folgt. Löschen Sie den Inhaltsbereich, fügen Sie die neue Seite ein, um ihn zu füllen, und aktualisieren Sie den Status. Wenn das Öffnen fehlschlägt, erklären Sie das Problem, anstatt den Benutzer mit einem ungeklärten leeren Bereich konfrontiert zu lassen.
Verwenden Sie die sechs Platzhalterseiten, um die Shell zu testen, bevor Sie ihre vollständigen Funktionen erstellen. Jede Navigationsschaltfläche sollte sowohl den Inhalt als auch den Status ändern. Dadurch wird ein zuverlässiger Seitenwechselpfad eingerichtet, den spätere Editoren, Datenbildschirme, Dashboards und Widget-Bildschirme wiederverwenden können.
Stellen Sie die Vier-Regionen-Shell und sechs navigierbare Platzhalter mit aussagekräftigen Steuerelementnamen bereit. Erläutern Sie im Auswahlleitfaden die für jede Region verwendete Familie und ihre Rolle. Das Ziel ist eine Grundlage, die ein anderer Entwickler erweitern kann, ohne zu erraten, wie Navigation oder Layout funktionieren.
- LektüreKI-Coding-Übung · 20 Min.
Erstellen Sie das Beispielprojekt OperationsConsole dieses Moduls mit ChatGPT oder Claude aus einem fertigen Prompt, der das Modell auf die Spezifikation des Moduls verweist – und prüfen, starten und erweitern Sie dann, was Sie erhalten, auch im Vergleich mit unserem eigenen Referenz-Build auf GitHub.
- WissenstestWissenstest – Modul 1 · 10 Min. · Bestehensgrenze 80%
- Praktisches LabLab – Shell für den Control-Katalog · 45 Min.
Ziel: Erstellen Sie die Shell des Control-Katalogs der Operations Console: eine Haupt-Page mit Navigationsbereich, Inhaltsbereich, Befehlsbereich und Statusbereich; Platzhalterseiten für Editors, Layouts, Lists and Trees, DataGridView, Dashboard und Widgets; eine Notiz ControlSelection.md im Projekt, die festhält, welche Control-Familie Sie für welchen Bereich verwenden; durchgängig klare Control-Namen; und einen Statusbereich, der sich bei jedem Navigationswechsel aktualisiert. Ergebnisse: Haupt-Shell mit Navigations-, Inhalts-, Befehls- und Statusbereich; Platzhalterseiten für Editors, Layouts, Lists and Trees, DataGridView, Dashboard und Widgets; ControlSelection.md mit der für jeden Bereich gewählten Control-Familie; klare Control-Namen und ein Statusbereich, der sich bei der Navigation aktualisiert; Screenshot und eine kurze Notiz, die die Control-Entscheidungen erklärt.
Modul 2: Editoren, Buttons, Validierung und Feedback
Modul 2 von Die Control-Bibliothek meistern – holen Sie das Beste aus über 100 Controls heraus: Grids, Diagramme, Bäume und eigene Widgets. Lesen Sie den Lektionsleitfaden und den Lab- und Prüfungsleitfaden, sehen Sie sich den Video-Walkthrough „Von einfachen TextBoxen zu einem validierten CustomerEditor“ an, bestehen Sie den Wissenstest und schließen Sie dann das praktische Lab in der Operations Console ab.
- LektüreLektionsleitfaden · 14 Min.
Den Editor wählen, der zum Wert passt, ein Befehlsmodell für Buttons, ErrorProvider-Validierung, die hilft statt blockiert, und nicht blockierendes Feedback mit Toast und AlertBox. Was das für Wisej.NET-Entwickler bedeutet – und wie Sie dieses Modul lesen.
- LektüreLab- und Prüfungsleitfaden · 10 Min.
Was Sie im praktischen Lab bauen, das vorgeschlagene Vorgehen und die geforderten Ergebnisse.
- VideolektionVon einfachen TextBoxen zu einem validierten CustomerEditor · 14 Min.
Von einfachen TextBoxen zu einem validierten CustomerEditor – ein geführter Video-Walkthrough zu Modul 2, Schritt für Schritt in der Operations Console aufgebaut. Läuft direkt hier im Player.
Transkript der Sprecherstimme
Erstellen Sie CustomerEditor, um Benutzern die Eingabe eindeutiger Werte und die Behebung von Fehlern zu erleichtern. Die Auswahl geeigneter Redakteure ist nur der erste Schritt. Validierung, Befehlsstatus und eindeutiges Feedback bestimmen zusammen, ob das Formular während einer tatsächlichen Speicherung zuverlässig ist.
Ein Nur-Text-Feld akzeptiert Darstellungen, deren Bedeutung unklar sein kann, insbesondere Datumsangaben, Beträge und Statuswerte. Nutzen Sie die Schnittstelle, um offensichtliche Fehler zu vermeiden und die verbleibenden Fehler zu erklären, während Sie als zusätzlichen Schutz die dahinter stehenden Service- und Datenregeln beibehalten.
Passen Sie das Eingabesteuerelement an die Bedeutung des Werts an. Verwenden Sie Text für Namen und E-Mails, eine Datumsauswahl für das Startdatum und einen numerischen Editor für Gutschriften. Zeigen Sie in den Status- und Typlisten benutzerfreundlichen Text an, während Sie den stabilen Schlüssel speichern.
Wählen Sie Feedback entsprechend dem aus, was der Benutzer als Nächstes tun muss. ErrorProvider weist auf Korrekturen hin, Tipps geben Hinweise und ein Meldungsfeld fordert Sie zu einer Sperrentscheidung auf. Ein Toast oder eine Warnung meldet den Workflow-Fortschritt, ohne dass eine unnötige Bestätigung erforderlich ist.
Erstellen Sie eine Validierung außerhalb des Editors: Konfigurieren Sie seine Eigenschaften, analysieren Sie eingegebene Werte, überprüfen Sie Felder und überprüfen Sie dann beim Speichern das Formular und den Dienst. Halten Sie bei einem Misserfolg die Korrektur sichtbar und fokussiert. Bestätigen Sie bei Erfolg den Abschluss, ohne die nächste Aufgabe des Benutzers zu unterbrechen.
Lassen Sie jeden benannten Validator Eigentümer der Nachricht seines Feldes sein. ValidateContent ruft sie alle auf, fokussiert die erste ungültige Eingabe und gibt ein Ergebnis zurück, das die Shell versteht. Dies trennt die Validierungsentscheidung von der Entscheidung des Anrufers, ob der Workflow fortgesetzt werden soll.
Halten Sie „Speichern“ als Validierung, Persistenz, Statusaktualisierung und Benachrichtigung lesbar. Verwenden Sie finally, um den Besetztzustand auch dann freizugeben, wenn die Persistenz fehlschlägt. Ein klarer Fehlersatz und ein nicht blockierender Erfolgstoast lassen den Benutzer das Ergebnis verstehen, ohne Ausnahmen zu interpretieren.
Überprüfen Sie die fehlerhafte E-Mail und korrigieren Sie sie anschließend, um sicherzustellen, dass das Feedback umgehend gelöscht wird. Während des Speicherns sind alle drei Befehle nicht mehr verfügbar, wodurch widersprüchliche Aktionen verhindert werden. Der abschließende Toast bestätigt den Abschluss und lässt dem Benutzer die Möglichkeit, fortzufahren, ohne eine weitere Taste zu drücken.
Stellen Sie CustomerEditor als wiederverwendbares Steuerelement mit wertgerechten Eingaben und benannten Validatoren bereit. Beim Speichern, Zurücksetzen und Validieren sollte der Beschäftigt-Status berücksichtigt werden, und bei Abschluss sollte ein Toast oder eine Warnung ausgegeben werden. Testen Sie Korrekturen und Fehlerbehebungen ebenso sorgfältig wie die erfolgreiche Speicherung.
- LektüreKI-Coding-Übung · 20 Min.
Erstellen Sie das Beispielprojekt OperationsConsole dieses Moduls mit ChatGPT oder Claude aus einem fertigen Prompt, der das Modell auf die Spezifikation des Moduls verweist – und prüfen, starten und erweitern Sie dann, was Sie erhalten, auch im Vergleich mit unserem eigenen Referenz-Build auf GitHub.
- WissenstestWissenstest – Modul 2 · 10 Min. · Bestehensgrenze 80%
- Praktisches LabLab – Kundeneditor mit Validierung · 45 Min.
Ziel: Erstellen Sie für die Operations Console ein CustomerEditor-UserControl mit beschrifteten Feldern für Name, E-Mail, Status, Startdatum, Kreditlimit und Kundentyp, und verwenden Sie für jeden Wert den passenden Editor statt überall eine TextBox. Ergänzen Sie ErrorProvider-Meldungen für Pflichtfelder, E-Mail-Format, Kreditlimit-Bereich und ungültige Datumsangaben; die Befehle Save, Reset und Validate mit deaktiviertem und „beschäftigtem“ Zustand während des Speicherns; und eine Toast- oder AlertBox-Meldung, wenn Validierung oder Speichern abgeschlossen sind. Ergebnisse: CustomerEditor-UserControl mit beschrifteten Feldern für Name, E-Mail, Status, Startdatum, Kreditlimit und Kundentyp; passende Editoren: TextBox, DateTimePicker, NumericUpDown und ComboBox statt überall Freitext; ErrorProvider-Meldungen für Pflichtfelder, E-Mail-Format, Kreditlimit-Bereich und ungültige Datumsangaben; Befehle Save, Reset und Validate mit deaktiviertem und „beschäftigtem“ Zustand während des Speicherns; Toast- oder AlertBox-Feedback, wenn Validierung oder Speichern abgeschlossen sind.
Modul 3: Container, Layouts, Navigation und Wiederverwendung
Modul 3 von Die Control-Bibliothek meistern – holen Sie das Beste aus über 100 Controls heraus: Grids, Diagramme, Bäume und eigene Widgets. Lesen Sie den Lektionsleitfaden und den Lab- und Prüfungsleitfaden, sehen Sie sich den Video-Walkthrough „Docking, Tabs und das wiederverwendbare UserControl“ an, bestehen Sie den Wissenstest und schließen Sie dann das praktische Lab in der Operations Console ab.
- LektüreLektionsleitfaden · 14 Min.
Docking-Reihenfolge, Anchoring, Flow- und Table-Layouts, responsive Properties pro Client-Profil, Navigations- und Befehlsflächen sowie UserControls als Einheit der Wiederverwendung. Was das für Wisej.NET-Entwickler bedeutet – und wie Sie dieses Modul lesen.
- LektüreLab- und Prüfungsleitfaden · 10 Min.
Was Sie im praktischen Lab bauen, das vorgeschlagene Vorgehen und die geforderten Ergebnisse.
- VideolektionDocking, Tabs und das wiederverwendbare UserControl · 14 Min.
Docking, Tabs und das wiederverwendbare UserControl – ein geführter Video-Walkthrough zu Modul 3, Schritt für Schritt in der Operations Console aufgebaut. Läuft direkt hier im Player.
Transkript der Sprecherstimme
Ersetzen Sie die Platzhalter der Konsole durch Container, die ausdrücken, wie die Benutzeroberfläche organisiert ist. SplitContainer, TabControl, ToolBar und StatusBar haben unterschiedliche Jobs. Durch die Kombination erhalten Navigation, Befehle und Inhalte ein Layout, das auf sich ändernde Fenstergrößen reagieren kann.
Feste Koordinaten beschreiben nur eine Fenstergröße. Angedockte Regionen beanspruchen stattdessen Kanten und überlassen den verbleibenden Platz dem Inhalt. Wenn sich die Belichtung überschneidet, überprüfen Sie diese Layoutbeziehungen, anstatt einem Größenänderungshandler einen weiteren Satz Pixelkorrekturen hinzuzufügen.
Überprüfen Sie die Reihenfolge der untergeordneten Elemente beim Andocken der Balken und des Hauptteilungsbereichs. Die oberen und unteren Balken müssen ihren Platz reservieren, bevor der Füllbereich den Rest nutzt. Ankersteuerungen innerhalb dieser Regionen entsprechend der Reaktion ihrer eigenen Kanten.
Verwenden Sie SplitContainer, wenn der Benutzer die Unterteilung, Registerkarten für Peer-Abschnitte und Leisten für Befehle und Status steuern soll. Leiten Sie Menüs, Symbolleisten, Menübänder und Kontextmenüs über ein Befehlsmodell weiter, sodass verschiedene Einstiegspunkte konsistent dieselbe Aktion ausführen.
Beginnen Sie mit dem Desktop-Layout und weisen Sie dann profilspezifische Werte nur den Eigenschaften zu, die geändert werden müssen. Telefon- und Tablet-Layouts können dieselben Steuerelemente wiederverwenden. Erstellen Sie einen separaten Bildschirm nur dann, wenn der tatsächliche Arbeitsablauf davon abweicht, und nicht nur, weil das Fenster schmaler ist.
Das Andocken der Schale legt ihre Struktur fest; ApplyNarrowProfile ändert die Darstellung und den Status der Navigation. Aktualisieren Sie die Delegierten des gemeinsam genutzten Befehls, anstatt das Verhalten im Symbolleisten-Handler zu duplizieren. Dadurch bleiben Layoutentscheidungen von der Operation, die der Befehl ausführt, getrennt.
Extrahieren Sie den Header des wiederholten Datensatzes in einen UserControl mit Titel, Datensatzanzahl und einem Aktualisierungsereignis. Halten Sie die untergeordneten Steuerelemente privat. Aufrufer sind dann davon abhängig, was der Header bewirkt, sodass eine spätere interne Layoutänderung nicht die Bearbeitung jedes Bildschirms erfordert, der ihn verwendet.
Grenzen Sie den Browser ein und sehen Sie sich die gleiche Seitenwechselpräsentation an. Die Navigation wird ausgeblendet, die Menüschaltfläche erscheint und der Status meldet das schmale Profil. Dies demonstriert die Wiederverwendung eines Kontrollbaums anstelle des Wechsels zu einem separat verwalteten mobilen Bildschirm.
Erstellen Sie die Hülle mit den ausgewählten Containern neu, extrahieren Sie wiederholte Bereiche und fügen Sie das schmale Profil hinzu. Dokumentieren Sie, warum die Andockreihenfolge funktioniert, und erfassen Sie beide Breiten. Die Abgabe sollte die Layoutzusammenhänge erläutern und zeigen, dass die beiden Präsentationen weiterhin nutzbar sind.
- LektüreKI-Coding-Übung · 20 Min.
Erstellen Sie das Beispielprojekt OperationsConsole dieses Moduls mit ChatGPT oder Claude aus einem fertigen Prompt, der das Modell auf die Spezifikation des Moduls verweist – und prüfen, starten und erweitern Sie dann, was Sie erhalten, auch im Vergleich mit unserem eigenen Referenz-Build auf GitHub.
- WissenstestWissenstest – Modul 3 · 10 Min. · Bestehensgrenze 80%
- Praktisches LabLab – Shell der Operations Console · 45 Min.
Ziel: Ersetzen Sie die Platzhalter aus Modul 1 durch die echte Shell der Operations Console: einen SplitContainer mit der Navigation links, einer TabControl-Detailfläche rechts, einer ToolBar für häufige Befehle und einer StatusBar, die den tatsächlichen Status anzeigt. Verlagern Sie wiederholte Oberflächenteile in UserControls, die nur aussagekräftige öffentliche Properties und Events bereitstellen, setzen Sie ein Layout für das schmale Profil mit responsiven Properties oder profilabhängiger Logik um und dokumentieren Sie Ihre Docking- und Anchoring-Entscheidungen in LayoutNotes.md. Ergebnisse: Navigations-Shell aus SplitContainer, TabControl, ToolBar und StatusBar; wiederholte Oberflächenteile in UserControls mit kleiner öffentlicher Schnittstelle verlagert; Layout für das schmale Profil mit responsiven Properties oder profilabhängiger Logik; LayoutNotes.md mit den Docking- und Anchoring-Entscheidungen; Screenshots in Desktop- und schmaler Breite.
Modul 4: Listen, Bäume, Repeater und hierarchische Daten
Modul 4 von Die Control-Bibliothek meistern – holen Sie das Beste aus über 100 Controls heraus: Grids, Diagramme, Bäume und eigene Widgets. Lesen Sie den Lektionsleitfaden und den Lab- und Prüfungsleitfaden, sehen Sie sich den Video-Walkthrough „Virtuelle Listen, verzögert geladene Bäume und Detailladen“ an, bestehen Sie den Wissenstest und schließen Sie dann das praktische Lab in der Operations Console ab.
- LektüreLektionsleitfaden · 14 Min.
ComboBox, ListBox, ListView, TreeView, DataRepeater und PropertyGrid; Virtual Mode der ListView, verzögertes Laden der TreeView, stabile Knotenidentität und auswahlgesteuertes Laden von Details. Was das für Wisej.NET-Entwickler bedeutet – und wie Sie dieses Modul lesen.
- LektüreLab- und Prüfungsleitfaden · 10 Min.
Was Sie im praktischen Lab bauen, das vorgeschlagene Vorgehen und die geforderten Ergebnisse.
- VideolektionVirtuelle Listen, verzögert geladene Bäume und Detailladen · 14 Min.
Virtuelle Listen, verzögert geladene Bäume und Detailladen – ein geführter Video-Walkthrough zu Modul 4, Schritt für Schritt in der Operations Console aufgebaut. Läuft direkt hier im Player.
Transkript der Sprecherstimme
Erstellen Sie den Dokument-Explorer mit einer Hierarchie, einer Dokumentliste und einem wiederverwendbaren Detailbereich. Die Betriebskonsole sollte nur die Informationen laden, die die aktuelle Interaktion benötigt. Lazy Tree Loading und virtuelle Listenelemente machen diese Unterteilung im Steuerelementdesign sichtbar.
Wählen Sie das Steuerelement anhand der Form der Informationen und der Art und Weise aus, wie Benutzer darin navigieren. Eine Wohnungsauswahl, eine Hierarchie, eine Kartensammlung und eine Immobilienbesichtigung sind unterschiedliche Aufgaben. Wenn man sie alle als generische Auswahllisten behandelt, wird die Karte für den Benutzer schwerer verständlich.
Verwenden Sie ComboBox für kompakte Auswahlmöglichkeiten, TreeView für Hierarchien und ListView, wenn es auf die Elementpräsentation ankommt. DataRepeater und PropertyGrid dienen Karten und Inspektion. Planen Sie stabile Identifikatoren und verzögertes Laden frühzeitig ein, damit das Wachstum keine Neugestaltung der Art und Weise erzwingt, wie die Auswahl die Daten erreicht.
Der virtuelle Modus deklariert die Gesamtgröße der Liste, ohne jedes sichtbare Steuerelement im Voraus zu erstellen. RetrieveVirtualItem erstellt das angeforderte Element bei Bedarf aus serverseitigen Daten und weist seine Kennung und sein Bild zusammen zu. Dadurch wird unterschieden, wie viele Datensätze vorhanden sind und wie viele Elemente jetzt erstellt werden müssen.
Laden Sie nur die erste Ebene des Baums und verwenden Sie einen untergeordneten Platzhalter, um anzugeben, dass ein Knoten erweitert werden kann. AfterExpand ersetzt diesen Platzhalter durch untergeordnete Elemente, die vom stabilen Schlüssel in Tag abgerufen werden. Der Anzeigetext kann sich dann ändern, ohne dass sich die vom Dienst verwendete Identität ändert.
Verfolgen Sie den ausgewählten Bezeichner aus dem Baum oder der Liste in den Serviceaufruf. BuildTree und Erweiterung bewahren stabile Schlüssel; Die Auswahl lädt das Modell mit Fehlerbehandlung und übergibt es an die Detailsteuerung. Die Suche nach einem Dienst sollte nicht vom Wortlaut eines angezeigten Etiketts abhängen.
Lassen Sie die Auswahl ein Ereignis auslösen, lassen Sie die Seite die Daten abrufen und lassen Sie das Detailsteuerelement das zurückgegebene Modell anzeigen. Dadurch bleibt der Detailbereich sowohl vom Baum als auch vom Datenbankzugriff unabhängig. Die gleiche Detailsteuerung kann daher von einer anderen Navigationsoberfläche verwendet werden.
Erweitern Sie den Kundenknoten und beachten Sie, dass nur seine untergeordneten Knoten geladen werden. Die ausgewählte Kategorie meldet Hunderte von Dokumenten und erstellt dabei nur die angeforderten Listenelemente. Durch die Auswahl eines Dokuments werden dessen Details über den Dienst geladen. Nutzen Sie diese Grenzen, um etwa zehnmal mehr Daten zu begründen.
Stellen Sie den Explorer mit stabilen Knotenkennungen, geeigneten Bildschlüsseln und einer Liste bereit, die virtuelles oder verzögertes Laden verwendet. Rufen Sie Details über einen Dienst ab und übergeben Sie das Modell an seinen UserControl. Erklären Sie, wie die Ladestrategie jedes Steuerelements die Form seiner Daten unterstützt.
- LektüreKI-Coding-Übung · 20 Min.
Erstellen Sie das Beispielprojekt OperationsConsole dieses Moduls mit ChatGPT oder Claude aus einem fertigen Prompt, der das Modell auf die Spezifikation des Moduls verweist – und prüfen, starten und erweitern Sie dann, was Sie erhalten, auch im Vergleich mit unserem eigenen Referenz-Build auf GitHub.
- WissenstestWissenstest – Modul 4 · 10 Min. · Bestehensgrenze 80%
- Praktisches LabLab – Dokument-Explorer · 45 Min.
Ziel: Erstellen Sie den Dokument-Explorer der Operations Console: eine TreeView mit Kategorien oder Ordnern, bei der an jedem Knoten eine stabile ID hängt, eine ListView mit den Dokumenten des ausgewählten Knotens, verzögertes Laden oder Virtual Mode auf mindestens einem Listen- oder Baumpfad, Icons oder Image-Keys für die verschiedenen Elementtypen und ein Detail-UserControl, das bei jedem Auswahlwechsel über eine Service- oder ViewModel-Schicht geladen wird. Ergebnisse: TreeView mit Kategorien und einer stabilen ID an jedem Knoten; ListView mit den Dokumenten des ausgewählten Baumknotens; verzögertes Laden oder Virtual Mode auf mindestens einem Listen- oder Baumpfad; Detail-UserControl, das bei der Auswahl über eine Service- oder ViewModel-Schicht geladen wird; Icons oder Image-Keys für die verschiedenen Elementtypen.
Modul 5: DataGridView meistern
Modul 5 von Die Control-Bibliothek meistern – holen Sie das Beste aus über 100 Controls heraus: Grids, Diagramme, Bäume und eigene Widgets. Lesen Sie den Lektionsleitfaden und den Lab- und Prüfungsleitfaden, sehen Sie sich den Video-Walkthrough „Das Orders-Grid, von gebunden bis virtuell“ an, bestehen Sie den Wissenstest und schließen Sie dann das praktische Lab in der Operations Console ab.
- LektüreLektionsleitfaden · 14 Min.
BindingSource und explizite Spalten, eigene Editoren und Befehlszellen, Virtual Mode mit CellValueNeeded und serverseitigem Cache sowie Zell-HTML, Zell-Controls und Zell-Painting mit Augenmaß eingesetzt. Was das für Wisej.NET-Entwickler bedeutet – und wie Sie dieses Modul lesen.
- LektüreLab- und Prüfungsleitfaden · 10 Min.
Was Sie im praktischen Lab bauen, das vorgeschlagene Vorgehen und die geforderten Ergebnisse.
- VideolektionDas Orders-Grid, von gebunden bis virtuell · 14 Min.
Das Orders-Grid, von gebunden bis virtuell – ein geführter Video-Walkthrough zu Modul 5, Schritt für Schritt in der Operations Console aufgebaut. Läuft direkt hier im Player.
Transkript der Sprecherstimme
Bauen Sie das Auftragsraster schrittweise auf, sodass jede Technik einen bestimmten Bedarf erfüllt. Die Bindung legt fest, woher die Werte kommen, die Formatierung erklärt sie und der virtuelle Modus steuert das Laden großer Datenmengen. Durch die richtige Kombination bleibt die Operations Console auch bei steigendem Auftragsvolumen nutzbar.
Bewerten Sie ein Raster anhand der tatsächlichen Arbeit des Benutzers: Lade-, Scroll-, Bearbeitungs- und Interpretationsstatus. Die gleiche Technik passt möglicherweise nicht zu einer kleinen bearbeitbaren Liste und einer großen Bestellhistorie. Datengröße und Aufgabe sollten das Design bestimmen, bevor der visuelle Feinschliff hinzugefügt wird.
Trennen Sie die Datenpopulation von der Spaltengenerierung. Ein Raster kann Zeilen direkt empfangen oder eine Bindungsquelle verwenden, unabhängig davon, ob Spalten automatisch generiert werden. Binden Sie für den Produktivbildschirm das Ansichtsmodell über BindingSource und definieren Sie Spalten explizit, um deren Verhalten zu steuern.
Definieren Sie die Statusspalte, anstatt sich auf die automatische Generierung zu verlassen. CellFormatting wandelt seinen Wert in eine codierte Statusplakette um, wodurch die Anzeige besser lesbar wird. Halten Sie die Validierung aus diesem Präsentationsschritt heraus: Ein Abzeichen ändert sein Aussehen, nicht aber die Frage, ob der zugrunde liegende Wert akzeptabel ist.
Wählen Sie die leichteste Zellpräsentation, die die Aufgabe unterstützt. Stile und formatiertes Markup kosten weniger als das Einbetten von Steuerelementen oder benutzerdefiniertes Malen. Eine Schaltfläche für jede Zeile vervielfacht die Kontrollanzahl. Reservieren Sie daher die eingebettete Interaktion für die Zeile, die sie tatsächlich benötigt.
Deklarieren Sie bei großen Datensätzen die Zeilenanzahl und stellen Sie die angeforderten Werte im virtuellen Modus bereit. OrderCache ruft eine Seite ab, wenn Daten fehlen, anstatt jeweils eine Zelle abzufragen. Wenden Sie zuerst den Filter an, damit die virtuellen Zeilen den angeforderten Ergebnissatz darstellen.
Vergleichen Sie die vollständige Auftragsanzahl mit der geringen Anzahl übertragener Zeilen für den sichtbaren Bereich. Wenn Sie im Raster weit nach unten springen, wird eine andere Seite angefordert, während Abzeichen sowie Filter- und Statusbereiche weiterhin verfügbar bleiben. Der Benutzer kann durch ein großes Ergebnis navigieren, ohne die Schnittstelle jeder Zeile im Voraus erstellen zu müssen.
Ordnen Sie den Kalendereditor der Fälligkeitsspalte zu und prüfen Sie beide Richtungen der Wertübertragung. Wenn der Editor den Wert nicht automatisch austauscht, koordinieren Sie ihn in den Ereignissen begin-edit und end-edit. Ein benutzerdefinierter Editor ist nur dann abgeschlossen, wenn der ausgewählte Wert korrekt zurückgegeben wird.
Stellen Sie explizit gebundene Spalten, eine formatierte Statuszelle und eine aussagekräftige Editor- oder Befehlsspalte bereit. Fügen Sie den virtuellen Cache sowie zusammengesetzte Filter- und Statusbereiche hinzu. Überprüfen Sie sowohl die normale Bearbeitung als auch die Navigation in entfernten Zeilen, damit die Interaktions- und Ladestrategien des Rasters zusammenarbeiten.
- LektüreKI-Coding-Übung · 20 Min.
Erstellen Sie das Beispielprojekt OperationsConsole dieses Moduls mit ChatGPT oder Claude aus einem fertigen Prompt, der das Modell auf die Spezifikation des Moduls verweist – und prüfen, starten und erweitern Sie dann, was Sie erhalten, auch im Vergleich mit unserem eigenen Referenz-Build auf GitHub.
- WissenstestWissenstest – Modul 5 · 10 Min. · Bestehensgrenze 80%
- Praktisches LabLab – Orders-Grid · 45 Min.
Ziel: Erstellen Sie das Orders-Grid der Operations Console: eine DataGridView, gebunden an eine BindingSource, mit expliziten Spalten und kontrolliertem AutoGenerateColumns, eine Statuszelle, die mit AllowHtml und CellFormatting dargestellt wird, eine eigene Editor- oder Befehlsspalte, eine Variante mit Virtual Mode oder Cache für große Datenmengen sowie eine zusammengesetzte Filter- und Statusleiste, die innerhalb oder um das Grid angedockt ist. Ergebnisse: Orders-DataGridView mit expliziten Spalten, gebunden an eine BindingSource; Statuszelle, dargestellt mit AllowHtml und CellFormatting; eine eigene Editor- oder Befehlsspalte; Variante des Grids für große Datenmengen mit Virtual Mode oder Cache; zusammengesetzte Filter- und Statusleiste, innerhalb oder um das Grid angedockt.
Modul 6: Diagramme, Dashboards, Inhalte, Medien und Dokumente
Modul 6 von Die Control-Bibliothek meistern – holen Sie das Beste aus über 100 Controls heraus: Grids, Diagramme, Bäume und eigene Widgets. Lesen Sie den Lektionsleitfaden und den Lab- und Prüfungsleitfaden, sehen Sie sich den Video-Walkthrough „ChartJS, PdfViewer und eine gemeinsame Dashboard-Aktualisierung“ an, bestehen Sie den Wissenstest und schließen Sie dann das praktische Lab in der Operations Console ab.
- LektüreLektionsleitfaden · 14 Min.
ChartJS-DataSets, Labels und Optionen; Gauges und ProgressBar; PdfViewer, HtmlPanel, Upload und GoogleMaps mit Blick auf die Grenze zwischen Browser und Server; Dashboards, die als ein Modell aktualisiert werden. Was das für Wisej.NET-Entwickler bedeutet – und wie Sie dieses Modul lesen.
- LektüreLab- und Prüfungsleitfaden · 10 Min.
Was Sie im praktischen Lab bauen, das vorgeschlagene Vorgehen und die geforderten Ergebnisse.
- VideolektionChartJS, PdfViewer und eine gemeinsame Dashboard-Aktualisierung · 14 Min.
ChartJS, PdfViewer und eine gemeinsame Dashboard-Aktualisierung – ein geführter Video-Walkthrough zu Modul 6, Schritt für Schritt in der Operations Console aufgebaut. Läuft direkt hier im Player.
Transkript der Sprecherstimme
Bauen Sie das Dashboard rund um die Entscheidungen auf, die seine Daten unterstützen sollen. Diagramme, eine Abschlussanzeige, eine Dokumentvorschau und Uploads können sich einen Bildschirm teilen, benötigen aber eine koordinierte Aktualisierung. Die Betriebskonsole sollte einen kohärenten Snapshot anstelle unabhängiger visueller Aktualisierungen anzeigen.
Geben Sie zunächst die Frage an, die jede Region beantwortet. Ein Bild kann attraktiv sein und dennoch keine nützliche Entscheidungshilfe bieten. Durch die Beseitigung dieser Unklarheit vor der Auswahl eines Diagramms wird verhindert, dass das Dashboard zu einer Sammlung von Grafiken wird, deren Zweck der Benutzer erraten muss.
Passen Sie die Anzeige an die Informationen an: Muster benötigen Diagramme, einzelne Datensätze benötigen ein Raster, ein Abschlusswert benötigt ein Messgerät und der Standort benötigt eine Karte. Diese Auswahl erleichtert die Interpretation der Daten, da das Steuerelement die Frage bedient und nicht den Bildschirm schmückt.
Fügen Sie ChartJS über sein Paket hinzu und behalten Sie seine Optionen, Beschriftungen und Datensätze im Besitz des Servers. Der Browser führt das Rendering durch. Konvertieren Sie das Dashboard-Ansichtsmodell an einer Stelle in Diagrammdaten, damit sich die Diagrammkonfiguration nicht auf unabhängige Ereignishandler verteilt.
DashboardModel liefert aggregierte Monate, Zählungen und Abschlussdaten. RefreshDashboard weist Beschriftungen und Datensätze zusammen zu und aktualisiert dann das Messgerät, die Dokumentvorschau und die Zeit. Durch die Verwendung eines Modells bleiben die angezeigten Werte im Zusammenhang mit derselben Aktualisierung, anstatt separate Ergebnisse zu vermischen.
Beachten Sie beim Hinzufügen von Vorschauen, Uploads und Karten die Browsergrenzen. Beim Hochladen werden explizit vom Benutzer ausgewählte Bytes gesendet. Dadurch erhält der Server keinen Zugriff auf die Festplatte des Geräts. Bereinigen Sie eingebettetes Markup vor der Anzeige, damit die Inhaltsverarbeitung ein bewusster Teil des Designs bleibt.
Aktualisieren Sie das Dashboard als einen Vorgang: Fordern Sie aggregierte Daten einmal an und aktualisieren Sie die Steuerelemente gemeinsam. Zeigt den Ladevorgang während der Ausführung und anschließend einen sichtbaren Zeitstempel an. Der Zeitstempel hilft Benutzern, die Aktualität zu beurteilen, während die Aggregation die Übertragung von Rohdatensätzen vermeidet, die die Diagramme nicht benötigen.
Beobachten Sie, dass die Aktualisierung nicht mehr verfügbar ist, während sich Diagramm, Anzeige, Vorschau und Zeitstempel gleichzeitig ändern. Der Fertigstellungsgrad liegt bei 78 Prozent. Laden Sie dann das ausgewählte Dokument hoch und sehen Sie sich die Vorschau an, die bestätigt, dass der Server die ausgewählte Datei über den Browser empfangen hat.
Stellen Sie ein Dashboard bereit, dessen Diagramm und Fortschrittsanzeige aus demselben Ansichtsmodell stammen. Fügen Sie die Dokument- oder Markup-Vorschau hinzu und laden Sie sie hoch, wobei eine RefreshDashboard-Methode den gesamten Bildschirm aktualisiert. Erklären Sie, welche Frage jede Region beantwortet, und stellen Sie sicher, dass die Aktualisierung koordiniert bleibt.
- LektüreKI-Coding-Übung · 20 Min.
Erstellen Sie das Beispielprojekt OperationsConsole dieses Moduls mit ChatGPT oder Claude aus einem fertigen Prompt, der das Modell auf die Spezifikation des Moduls verweist – und prüfen, starten und erweitern Sie dann, was Sie erhalten, auch im Vergleich mit unserem eigenen Referenz-Build auf GitHub.
- WissenstestWissenstest – Modul 6 · 10 Min. · Bestehensgrenze 80%
- Praktisches LabLab – Dashboard und Inhalts-Tab · 45 Min.
Ziel: Erstellen Sie den Dashboard-Tab der Operations Console: ein ChartJS-Linien- oder Balkendiagramm, dessen Labels und DataSets aus einem Dashboard-ViewModel stammen, eine ProgressBar oder gaugeähnliche Anzeige für einen Statuswert, eine Inhaltsvorschau mit PdfViewer oder HtmlPanel, einen Upload-Ablauf, einen Karten- oder Inhaltsplatzhalter und eine einzige Aktualisierungsmethode, die jedes Dashboard-Control aus einem einzigen Modell aktualisiert. Ergebnisse: Dashboard-Tab mit einem ChartJS-Linien- oder Balkendiagramm; Diagramm-Labels und DataSets aus einem Dashboard-ViewModel; ProgressBar oder gaugeähnliche Anzeige für einen Statuswert; Inhaltsvorschau mit PdfViewer oder HtmlPanel sowie ein Upload-Ablauf; eine Aktualisierungsmethode, die jedes Dashboard-Control aktualisiert.
Modul 7: Eigene Widgets, Erweiterungen, Theming und Abschlussprojekt
Modul 7 von Die Control-Bibliothek meistern – holen Sie das Beste aus über 100 Controls heraus: Grids, Diagramme, Bäume und eigene Widgets. Lesen Sie den Lektionsleitfaden und den Lab- und Prüfungsleitfaden, sehen Sie sich den Video-Walkthrough „Einen Widget-Wrapper erstellen und die Nachrichten verfolgen“ an, bestehen Sie den Wissenstest und schließen Sie dann das praktische Lab in der Operations Console ab.
- LektüreLektionsleitfaden · 14 Min.
Native Controls im Vergleich zu Widgets, Komponenten, Extender Providern und Icon Packs; Packages, InitScript, WidgetEvent und die CallAsync-Anbindung des Widget-Controls; Theming und Dokumentation; das Abschlussprojekt Operations Console. Was das für Wisej.NET-Entwickler bedeutet – und wie Sie dieses Modul lesen.
- LektüreLab- und Prüfungsleitfaden · 10 Min.
Was Sie im praktischen Lab bauen, das vorgeschlagene Vorgehen und die geforderten Ergebnisse.
- VideolektionEinen Widget-Wrapper erstellen und die Nachrichten verfolgen · 14 Min.
Einen Widget-Wrapper erstellen und die Nachrichten verfolgen – ein geführter Video-Walkthrough zu Modul 7, Schritt für Schritt in der Operations Console aufgebaut. Läuft direkt hier im Player.
Transkript der Sprecherstimme
Fügen Sie die Sternebewertungsfunktion erst hinzu, nachdem Sie bestätigt haben, dass die native Bibliothek nicht die erforderliche Steuerung bereitstellt. Das Abschlussprojekt umschließt ein Browser-Widget und behält dabei den Wisej.NET-Besitz, die Ereignisse und das Design bei. Dadurch wird die Integration zum Teil des Steuerungsmodells der Anwendung und nicht zu einem isolierten Skript.
Bevorzugen Sie ein vorhandenes Steuerelement, wenn es bereits den Designer, den Serverstatus, die Ereignisse und das Designverhalten bereitstellt, die Sie benötigen. Eine benutzerdefinierte Integration wird durch eine fehlende Browserfunktion oder Bibliotheksfunktion gerechtfertigt. Stoppen Sie auf der einfachsten Ebene, die die Anforderung erfüllt, anstatt die bereits verfügbare Unterstützung neu aufzubauen.
Name die Erweiterung entsprechend ihrer Verantwortung, bevor sie ihre Implementierung auswählt. Ein Widget, eine Komponente, ein Extender, ein Symbolpaket und ein wiederverwendbarer Schnittstellenbereich sind nicht austauschbar. Diese Unterscheidung verhindert, dass Sie ein vollständig benutzerdefiniertes Steuerelement erstellen, wenn eine kleinere Integrationsgrenze ausreichen würde.
Laden Sie das Skript und das Stylesheet über Packages und initialisieren Sie dann das Browserobjekt mit InitScript. Das Widget sendet sinnvolle Änderungen über fireWidgetEvent und der Server empfängt WidgetEvent. Aufrufe in umgekehrter Richtung ermöglichen es dem Server, den Status an die Browser-Implementierung zurückzusenden.
Der Wrapper validiert sowohl den Ereignistyp als auch seine Nutzlast, bevor er RatingService aufruft. Behalten Sie im Browser-Rückruf die korrekte Widget-Referenz bei, damit das Ereignis über die vorgesehene Instanz zurückkehrt. Diese Prüfungen schützen die Grenze zwischen einer Browserinteraktion und vertrauenswürdiger serverseitiger Arbeit.
Dokumentieren Sie das Paket, die Eigenschaft, das Ereignis, die Nutzlast und den Serveraufrufvertrag neben dem Code. Wenn das Widget fehlschlägt, überprüfen Sie die Reihenfolge der Ressourcen, die Pfade, den Initialisierungszeitpunkt und die Wiederherstellung nach der Aktualisierung in den Browser-Tools. Ein schriftlicher Vertrag gibt auf jede diagnostische Frage eine klare erwartete Antwort.
Click eine Bewertung und verfolgen Sie den vollständigen Austausch. Der Server überprüft den Bereich von eins bis fünf, speichert und bestätigt den Abschluss. Der Browser zeigt dann den gespeicherten Zustand an. Der Diagnosestreifen identifiziert die aktuelle Steuerung, Aufzeichnung, das Profil und die Aktualisierung und erleichtert so die Nachverfolgung dieses Austauschs.
Verfeinern Sie die Integration durch Theme-Erscheinungsbilder oder Paketstile und überprüfen Sie dann das Reaktionsverhalten und die zugänglichen Labels. Vermeiden Sie es, visuelle Entscheidungen in JavaScript einzubetten, die zum Thema gehören sollten. Die endgültige Konsole und ihre Anleitung sollten erklären, warum jede Steuerungsauswahl ihren Zweck auf dem Bildschirm erfüllt.
Senden Sie das funktionierende Widget mit seinen Paketen, dem bidirektionalen Ereignispfad und dem dokumentierten Vertrag als Teil der vollständigen Operations Console. Fügen Sie das Demonstrationsskript und Schlussnotizen bei. Die Überprüfung sollte sowohl das benutzerorientierte Ergebnis als auch die Gründe für die gewählte Integrationsgrenze zeigen.
- LektüreKI-Coding-Übung · 20 Min.
Erstellen Sie das Beispielprojekt OperationsConsole dieses Moduls mit ChatGPT oder Claude aus einem fertigen Prompt, der das Modell auf die Spezifikation des Moduls verweist – und prüfen, starten und erweitern Sie dann, was Sie erhalten, auch im Vergleich mit unserem eigenen Referenz-Build auf GitHub.
- WissenstestWissenstest – Modul 7 · 10 Min. · Bestehensgrenze 80%
- Praktisches LabLab – Eigenes Widget und Abschlussprojekt · 45 Min.
Ziel: Kapseln Sie ein kleines JavaScript-Bewertungs- oder Anzeige-Widget mit dem Widget-Control oder konfigurieren Sie ein Wisej.NET-Erweiterungspaket: Laden Sie seine JavaScript- und CSS-Pakete, lösen Sie mit dem Widget-Event-Muster vom Client aus ein serverseitiges Event aus, rufen Sie mit CallAsync oder Eval vom Server aus eine clientseitige Funktion auf, passen Sie das Theme an die Konsole an, feilen Sie dann am vollständigen Abschlussprojekt Operations Console und bereiten Sie eine 5-minütige Demo vor. Ergebnisse: Bildschirm auf Basis eines Widgets oder einer Erweiterung mit geladenen JavaScript- und CSS-Paketen; Event vom Client zum Server über das Widget-Event-Muster oder ein natives Erweiterungs-Event; Aufruf vom Server zum Client über CallAsync, Eval oder die API der Erweiterung; dokumentierter Client/Server-Vertrag: Pakete, Properties, Events und Payload-Format; ausgefeiltes Abschlussprojekt Operations Console mit einem Skript für eine 5-minütige Demo.