Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
einfache_steuerelemente [2017/10/06 09:58]
huwi
einfache_steuerelemente [2019/02/07 09:45] (aktuell)
Zeile 1: Zeile 1:
 +====== 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]]