Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

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
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]]