Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
erste_schritte [2017/10/06 09:49]
huwi
erste_schritte [2019/02/07 09:45] (aktuell)
Zeile 1: Zeile 1:
 +====== Die ersten Schritte ======
 +Als erste Übung wird eine einfache Schaltfläche (Button) und die dazugehörige Ereignisfunktion erstellt. Als Aktion auf das Klick-Ereignis der Schaltfläche soll ein kleines Nachrichtenfenster (MessageBox) erscheinen. Folgende Arbeitsschritte werden näher beschrieben:​
  
 +  * ein Steuerelement als Attribut anlegen
 +  * eine Operation als Ereignisbehandlung zuordnen
 +  * den Quellcode der Operation erstellen
 +
 +===== Ein Steuerelement als Attribut anlegen =====
 +Als Steuerelemente einer grafischen Benutzeroberfläche (GUI-Controls) gelten zum Beispiel:
 +  * Statische Texte (Label)
 +  * Schaltflächen (Button)
 +  * Eingabefelder (Edit)
 +  * Listenfelder (ListBox, ComboBox)
 +  * Optionsfelder (RadioButton,​ CheckButton)
 +  * Fortschrittsbalken (ProgressBar)
 +  * ...
 +
 +Aus objektorientierter Sicht sind Steuerelemente Bestandteile eines Fensters. Diese können im UML Klassendiagramm zum Beispiel als Aggregation oder als Attribut abgebildet werden. Um ein Standardsteuerelement komfortabel anzulegen, ziehen Sie ein Objekt vom Typ //​Attribut//​ aus der Objektbibliothek auf eine Klasse, die letztendlich eine Ableitung von //​[[http://​www.mysvl.de/​svl_dict/​SWindow.htm|SWindow]]//​ sein muss. 
 +In unserem Beispiel ist das die Klasse //​MainWnd//​. Diese liegt über der Basisklasse //​[[http://​www.mysvl.de/​svl_dict/​SFrameWindow.htm|SFrameWindow]]//​ in der Vererbungslinie von //​[[http://​www.mysvl.de/​svl_dict/​SWindow.htm|SWindow]]//​. Diesen Umstand erkennt das Modellierungswerkzeug und bietet dem Anwender eine spezielle Unterstützung zum Anlegen von Steuerelementen,​ den //​ControlWizard//​.
 +
 +>>>​{{:​se:​attributanlegen.png?​600|ein Attribut in die Klasse einfügen}}
 +
 +===== GUI-Element konfigurieren und Operation zuordnen =====
 +Über den ControlWizard können Sie aus einer Liste von Steuerelementen auswählen. Wählen Sie bitte den Typ //​[[http://​www.mysvl.de/​svl_dict/​SButton.htm|SButton]]//​. Im weiteren Verlauf geben Sie der Schaltfäche einen Namen (Beschriftung und Attribut), legen die Position und Größe fest, ordnen eine Funktion zur Behandlung des Klickereignis zu und können ggf. einen Tipptext formulieren. Der Tipptext wird angezeigt, wenn der Mauscursor über die Schaltfläche geführt wird. Bei der Zuordnung der Klickfunktion bietet der ControlWizard an, eine neue Operation anzulegen oder eine vorhandene auszuwählen. Bitte legen Sie eine neue Funktion für die Behandlung des Klickereignisses an. Geben Sie der Schaltfläche den Namen **"​Hallo"​**.
 +
 +{{gallery>​se?​cwiz*.png&​lightbox }}
 +
 +===== den Quellcode der Operation erstellen =====
 +Der ControlWizard hat nach dem Fertigstellen der Klasse //MainWnd// ein Attribut //#​btnHallo:​[[http://​www.mysvl.de/​svl_dict/​SButton.htm|SButton]]//​ und eine Operation mit dem Namen //#​onBtnHallo():​void//​ angelegt. ​
 +
 +Um die Funktionalität für das Betätigen der Schaltfläche zu realisieren,​ selektieren Sie bitte die Operation //#​onBtnHallo():​void//​. Im oberen Bereich des Diagrammfensters bietet Ihnen SiSy einen Quelltexteditor an. In diesem können Sie den Programmcode der ausgewählten Operation eingeben. Geben Sie den folgenden Programmcode zum Anzeigen einer [[http://​www.mysvl.de/​svl_dict/​SWindow.htm#​17_Details|MessageBox]] ein:
 +
 +>>><​code c>
 +messageBox("​Hallo SVL","​Nachricht"​);​
 +</​code>​
 +
 +>>>​{{:​se:​operationhallo.png?​640|}}
 +
 +===== Die Anwendung erstellen und testen =====
 +Im Klassendiagramm finden Sie in der Objektbibliothek eine Schaltfläche für das **Aktionsmenü**.
 +
 +>>>>>​{{:​se:​aktionsmenue.png?​300|Aktionsmenü:​ Erstellen und Ausführen}}
 +
 +Erstellen und Starten Sie die Anwendung. Sie erhalten ein Fenster mit den Schaltflächen //Hallo// und //Ende//. Wenn Sie die im ControlWizard angebotene Position und Größe der Schaltfläche nicht nachgeprüft und akzeptiert haben kann es sein, dass die Steuerelemente nicht optimal oder nach Ihren Vorstellungen angeordnet sind. Sie können die Position der Steuerelemente nachträglich anpassen. Dazu versetzen Sie die laufende Anwendung in den Positionierungs-Modus. Diesen erreichen Sie über das kleine SVL-Logo unten links. Nach dem die Positionierung aktiviert wurde, können Sie Lage und Größe der Steuerelemente mit dem Zeigegerät korrigieren. Schalten Sie den Positionierungs-Modus danach wieder ab. 
 +
 +>>>>​{{:​se:​positionhallo.png?​600|}}
 +
 +Diese Einstellungen werden in einer externen Resorce-Datei gespeichert und sind auch nach Programmänderungen weiterhin verfügbar. ​
 +
 +Beim Betätigen der Schaltfläche //Hallo// öffnet sich das Nachrichtenfenster //​Hallo-SVL//​.
 +
 +>>>>​{{:​se:​hallosvl.png?​600|das fertige SVL-Programm mit der neu positionierten Schaltfläche "​Hallo"​}}
 +
 +===== Videozusammenfassung =====
 +><​html><​iframe width="​700"​ height="​525"​ src="​https://​www.youtube.com/​embed/​2N9UnQnPiZk?​rel=0"​ frameborder="​0"​ allowfullscreen></​iframe></​html>​
 +
 +====== Nächstes Thema ======
 +  * [[einfache Steuerelemente]]
 +  * [[http://​www.mysvl.de/​wiki/​doku.php?​id=start|zurück zur Übersicht]]