Beide Seiten der vorigen Revision
Vorhergehende Überarbeitung
Nächste Überarbeitung
|
Vorhergehende Überarbeitung
|
einfache_steuerelemente [2017/10/06 09:56] huwi |
einfache_steuerelemente [2019/07/27 16:03] (aktuell) huwi |
| ====== Einfache Steuerelemente ====== |
| Nachdem Sie die ersten Schritte mit dem Steuerelement //[[http://www.mysvl.de/svl_dict/SButton.htm|SButton]]// ausprobiert haben, soll in diesem Abschnitt des Tutorials die Handhabung weiterer einfacher [[http://www.mysvl.de/svl_dict/SVL_CONTROLS.htm|Steuerelemente]] besprochen werden. Die folgenden Steuerelemente werden exemplarisch vorgestellt: |
| |
| * [[http://www.mysvl.de/svl_dict/SStatic.htm|SStatic]] |
| * [[http://www.mysvl.de/svl_dict/SEdit.htm|SEdit]] |
| * [[http://www.mysvl.de/svl_dict/SListBox.htm|SListBox]] |
| |
| Die aufgezeigte Arbeitsweise lässt sich prinzipiell auf alle weiteren Steuerelemente anwenden. |
| |
| ====== Vorbereitung ====== |
| Falls Sie das Projekt aus den vorangegangenen Abschnitten nicht mehr offen haben, öffnen Sie bitte das Projekt "Schnelleinstieg" oder legen Sie ein neues SVL-Projekt an (vgl. [[schnelleinstieg#ein_svl_projekt_anlegen|Schnelleinstieg]]). |
| |
| |
| |
| ====== statischer Text, SStatic ====== |
| Das vielleicht einfachste Steuerelement ist statischer Text ([[http://www.mysvl.de/svl_dict/SStatic.htm|SStatic]]). Mit diesem lassen sich bei der Benutzerführung einfache Inforamtionen als Text anzeigen. Um einen statischen Text auf dem Fenster zu platzieren, fügen Sie in die Klasse //MainWnd// ein Attribut ein. |
| |
| >{{:se:attributanlegen.png?600|ein Attribut in die Klasse einfügen}} |
| |
| Wählen Sie im ControlWizard den Typ ([[http://www.mysvl.de/svl_dict/SStatic.htm|SStatic]]). Geben Sie dem Element den Namen "Label".\\ Sie können Position und Größe festlegen sowie einen Textinhalt des Elementes. |
| |
| {{gallery>se?cwlab*.png&lightbox }} |
| |
| |
| Erstellen und Starten Sie die Anwendung. |
| |
| >{{:se:staticfertig.png?600|eine SVL-Anwendung mit statischem Text}} |
| |
| ====== Eingabefeld, SEdit ====== |
| Eingabefelder stellen im Gegensatz zum SStatic nicht nur einen Text dar, sondern ermöglichen dem Anwender auch, Texte einzugeben. Die SVL stellt als einfaches einzeiliges Eingabefeld die Klasse [[http://www.mysvl.de/svl_dict/SEdit.htm|SEdit]] zur Verfügung. Um ein einfaches Eingabefeld einzufügen, ziehen Sie per Drag & Drop ein Attribut auf die betreffende Fensterklasse. |
| |
| >{{:se:attributanlegen.png?600|ein Attribut in die Klasse einfügen}} |
| |
| Wählen Sie im ControlWizard den Typ //[[http://www.mysvl.de/svl_dict/SEdit.htm|SEdit]]//. Geben Sie dem Element den Namen „Textfeld“. Sie können Position und Größe festlegen sowie einen Textinhalt des Elementes. |
| |
| {{gallery>se?cwedit*.png&lightbox }} |
| |
| Erstellen und Starten Sie die Anwendung. |
| |
| >{{:se:editfertig.png?600|SVL-Anwendung mit Eingabefeld}} |
| |
| |
| ====== Listenfeld, SListBox ====== |
| Listen spielen in Benutzeroberflächen eine wichtige Rolle. Dem Anwender werden verschiedene Auswahlmöglichkeiten angeboten. Die Auswahlaktion selbst wird zum einen durch das Ereignis //onSelChange// signalisiert und kann sofort eine Systemreaktion auslösen. Zum anderen kann die Auswahl auch zu einem späteren Zeitpunkt ausgewertet werden, indem die Listbox, zum Beispiel mit der Nachricht //getCurSel//, abgefragt wird. Vergleichen Sie dazu die Dokumentation zur Klasse [[http://www.mysvl.de/svl_dict/SListBox.htm|SListBox]]. |
| |
| >{{:se:attributanlegen.png?600|ein Attribut in die Klasse einfügen}} |
| |
| Wählen Sie im ControlWizard den Typ //[[http://www.mysvl.de/svl_dict/SListbox.htm|SListBox]]//. Geben Sie dem Element den Namen „Listbox“. Sie können Position und Größe festlegen sowie einen Listeninhalt des Elementes. Wählen Sie bei der Auswahl zum Klick-Ereignis im Listenfeld eine neue Funktion zur Ereignisbehandlung (//onSelChangeListbox//). |
| |
| {{gallery>se?cwlist*.png&lightbox }} |
| |
| Vergleichen Sie das Klassendiagramm bis zu diesem Arbeitsstand. Achten Sie auf die neue Operation //onSelChangeListbox// in der Klasse //MainWnd//. |
| |
| >{{:se:kdlistbox.png?600|}} |
| |
| Erstellen und Starten Sie die Anwendung. |
| |
| >{{:se:listboxfertig.png?600|SVL-Anwendung mit ListBox}} |
| |
| |
| ====== Videozusammenfassung ====== |
| ><html><iframe width="700" height="525" src="https://www.youtube.com/embed/LVr9_L6Og0Q?rel=0" frameborder="0" allowfullscreen></iframe></html> |
| |
| ====== Zusammenwirken der Steuerelmente ====== |
| Die soeben angelegten Steuerelemente ([[http://www.mysvl.de/svl_dict/SStatic.htm|SStatic]], |
| [[http://www.mysvl.de/svl_dict/SEdit.htm|SEdit]], [[http://www.mysvl.de/svl_dict/SListBox.htm|SListBox]]) können vom Anwendungsentwickler über entsprechende Operationen (Nachrichten) ausgelesen oder auch verändert werden. Für das folgende Beispiel soll das Ereignis //onSelChangeListbox// genutzt werden, verschiedene Aktionen auf die Steuerelemente anzuwenden. Dafür ist die Klasse [[http://www.mysvl.de/svl_dict/SString.htm|SString]] eine nützliche Hilfe. |
| |
| |
| >**MainWnd::onSelChangeListbox**<code cpp> |
| // lokale Variablen anlegen |
| SString text; |
| int idx; |
| |
| // 1. den Text aus dem Eingabefeld abholen |
| text=eingabefeld.getWindowText(); |
| |
| // 2. den Text an das statische Label weiter geben |
| lable.setWindowText(text); |
| |
| // 3. die Selektion in der Listbox ermitteln |
| idx = listbox.getCurSel(); |
| |
| // 4. den Listentext vom selektierten Eintrag abholen |
| text = listbox.getText(idx); |
| |
| // 5. den Listentext an das Eingabefeld weiter geben |
| eingabefeld.setWindowText(text); |
| |
| </code> |
| |
| Die Dokumentation der verwendeten Operationen (Nachrichten) finden Sie in der Hilfe zu den Steuerelementen [[http://www.mysvl.de/svl_dict/SStatic.htm|SStatic]], |
| [[http://www.mysvl.de/svl_dict/SEdit.htm|SEdit]] und [[http://www.mysvl.de/svl_dict/SListBox.htm|SListBox]]. Vergleichen Sie dazu das automatisch erstellte Sequenzdiagramm. |
| |
| >{{:se:sdzusammenwirken.png?500|}} |
| |
| Erstellen, starten und testen Sie die Anwendung. |
| |
| ><html><iframe width="700" height="525" src="https://www.youtube.com/embed/n_FO9f0BhuA?rel=0" frameborder="0" allowfullscreen></iframe></html> |
| |
| ====== Nächstes Thema ====== |
| * [[Entwicklerwerkzeuge]] |
| * [[http://www.mysvl.de/wiki/doku.php?id=start|zurück zur Übersicht]] |