Ziehen Sie jetzt mit gedrückter linker Maustaste ein Rechteck auf dem Formulareditor auf. Lassen Sie die Maustaste dann los. Was passiert?

Transkript

1 Vorraussetzungen: 1. Grundkenntnisse Windows NT 4.0 oder Einführung in die Bedienung der Computeranlage des Söderblom-Gymnasiums. 3. Einführung in die Benutzeroberfläche von Delphi Sie müssen einen persönlichen Ordner im Kursverzeichnis angelegt haben. Workshop 1 Das erste Programm Starten Sie Delphi. Klicken Sie mit der Maus dann auf die Komponente "Label". Ziehen Sie jetzt mit gedrückter linker Maustaste ein Rechteck auf dem Formulareditor auf. Lassen Sie die Maustaste dann los. Was passiert? Jetzt speichern Sie Ihr Projekt erstmal. Dazu rufen Sie die Funktion "Alles speichern" aus dem Datei-Menü auf. Geben Sie den Unterordner "Proj01" in Ihrem persönlichen Ordner als Speicherort an. Sie können einen solchen Unterordner auch während des Speichern-Dialoges anlegen, wie die Abbildung rechts zeigt. Ihr Projekt ist nun gespeichert. Anschließend drücken Sie bitte auf F9, um Ihr Programm zu starten. Workshop 2 Delphi grüsst die Welt Schließen Sie das Programmfenster Ihres eigenen Programmes, indem Sie mit der Maus auf den X-Button rechts oben klicken. Sofort erscheint wieder die gewohnte Delphi-Umgebung mit dem Formulareditor. Im Formulareditor klicken Sie jetzt bitte auf das Label mit dem Text "Label1". Achten Sie dabei auf den Objektinspektor! Was passiert hier? Es werden alle wichtigen Eigenschaften des Objektes "Label1" aufgelistet. Die Eigenschaften können wir im Objektinspektor auf einfache Weise verändern. Die wohl wichtigste Eigenschaft eines Objektes der Klasse TLabel ist "Caption", was auf deutsch soviel wie "Überschrift" heißt. Ersetzen Sie nun den Text "Label1" durch "Hallo Welt". Dazu müssen Sie mit der Maus in das helle Feld rechts neben Caption klicken und den Text verändern. Achten Sie dabei auf den Formulareditor. Auch hier hat sich der Text des Labels geändert: "Hallo Welt" steht plötzlich auf dem Formular.

2 Seite DER OBJEKTINSPEKTOR / LABEL Wie man auf dem Bildschirmphoto gut erkennen kann, verwaltet der Objektinspektor alle wichtigen Eigenschaften des Objektes Label1. Caption Das ist wohl die wichtigste Eigenschaft eines Labels. Im Workshop 2 haben Sie diese Eigenschaft geändert: vorher hatte Caption den Wert "Label1", nachher den Wert "Hallo Welt". Color Das ist die Hintergrundfarbe des Labels. Voreingestellt ist der Wert "clbtnface". Das heißt so viel wie "Farbe eines Buttons", i.d.r. also "grau". Probieren Sie hier ruhig herum, versehen Sie das Label mit einem pinkfarbenem Hintergrund oder mit einem giftgrünen, wie Sie wollen! Font Vor dieser Eigenschaft steht ein + - Symbol. Das heißt, hinter dem Eintrag "Font" verbergen sich eine ganze Reihe einzelner Eigenschaften. Wenn man mit der Maus auf das + Zeichen klickt, so klappen diese Eigenschaften auf, und man kann sie auf gewohnte Weise verändern. Hier können wir die Schriftart des Lables ändern, also Schrifttype, Schriftgröße, Schriftstil (kursiv, fett etc.) und Schriftfarbe. Kleine Übung zwischendurch Verändern Sie den Schriftzug "Hallo Welt" wie folgt: Times New Roman, 36 Punkt, kursiv, gelbe Schrift auf dunkelblauem Hintergrund. Left Das ist der x-wert der linken Seite des Labels. Der x-wert wird in Pixeln gemessen und bezieht sich nicht auf den Bildschirm, sondern auf das Formular. Ein Wert von 88 bedeutet also, dass das Label 88 Pixel vom linken Rand des Formulars entfernt ist. Name Wir müssen zwischen Caption und Name streng unterscheiden. Caption ist die Beschriftung des Labels, also das, was hinterher im laufenden Programm zu sehen ist. Name dagegen ist der interne Name des Objektes. Wenn wir hier nichts weiter ändern, hat unser Objekt den Namen "Label1". Wenn uns das nicht gefällt, so können wir hier einen anderen Namen eintragen, z.b. "Ausgabe1". Die Caption des Labels wird dadurch aber nicht verändert. Top Das ist der y-wert der oberen Seite des Labels, wieder relativ zum Formular. Im Gegensatz zum Mathematik-Unterricht befinden sich die kleinen y-werte oben, und die großen unten. Ein Wert von 20 besagt also, dass das Label sich 20 Pixel unterhalb der Oberkante des Formulars befindet. Die anderen Eigenschaften eines Labels spielen hier noch keine Rolle, Sie werden sie vielleicht später noch kennenlernen. Übung Gestalten Sie ein Formular mit 4 verschiedenen Labels, die in Form eines Quadrates angeordnet sind (2 Label nebeneinander, 2 Label untereinander, dabei gleiche Top- bzw. Left-Werte sowie gleiche Breite und Höhe der Label).

3 Seite 3 Testen Sie sich selbst Angenommen, das Formular hat eine Breite (width) von 600 Pixeln. Das Label1 ist genau 150 Pixel breit. Welchen Wert muss die Eigenschaft Label1.Left haben, damit der rechte Rand des Lables genau 20 Pixel vom rechten Rand des Formulars entfernt ist? Das Label 1 ist 200 Pixel breit, das Label2 160, und das Label3 nur 120 Pixel. Das Formular soll genau 400 Pixel Breite haben. Bestimmen Sie die Left-Werte der drei Labels, damit diese im Formular zentriert erscheinen! Ein Formular hat eine Größe von 400 x 300 Pixeln, ein Label eine Größe von 180 x 30 Pixeln. Welche Werte müssen Label1.Left und Label1.Top haben, damit das Label genau in der Mitte des Formulars erscheint? 1.2 BUTTONS Workshop 3 Drei Buttons Erzeugen Sie eine neue Anwendung. Klicken Sie auf das leere Formular, gehen Sie dannauf den Objektinspektor und ändern Sie die Farbe des Formulars, so dass es weiß aussieht. Klicken Sie in die Komponentenleiste auf das Symbol für Button. Ziehen Sie jetzt nacheinander auf dem Formular drei Rechtecke auf. Sie haben jetzt drei Buttons erzeugt. Ändern Sie mit Hilfe des Objektinspektors die nichtssagenden Buttontexte (Caption) "Button1", "Button2" und "Button3" in sinnvollere Aussage wie "Klick Mich!" etc. Ihr Formular sollte am Ende dieses Workshops ungefähr so aussehen wie in der nächsten Abbildung gezeigt.

4 Seite 4 Eigenschaften eines Buttons In der Abbildung rechts sehen wir den Objektinspektor mit den Eigenschaft eines Button-Objektes. Caption Ähnlich wie bei Label die wichtigste Eigenschaft eines Buttons. Hier wird nämlich darüber entschieden, welcher Text auf dem Button steht. Enabled Diese Eigenschaft hat nur zwei mögliche Werte: "True"und "False". Standardmäßig ist "False" eingestellt. Wenn man "True" für einen Button einstellt, so erscheint er im laufenden Programm (wenn Sie also F9 gedrückt haben) dick umrandet. Wenn man jetzt die ENTER-Taste betätigt, wird der dick umrandete Button automatisch gedrückt. Das kann manchmal ganz praktisch sein. Allerdings sollte immer nur einer von mehreren Buttons auf diese Weise hervorgehoben sein! Font Ähnlich wie bei Label. Allerdings kann die Schriftfarbe eines Buttons nicht verändert werden! Height Die Höhe eines Buttons in Pixeln Left X-Koordinate des linken Randes Name Interne Bezeichnung des Buttons. Unabhängig von der Beschriftung (Caption). Top Y-Koordinate des oberen Randes Visible Eine Eigenschaft mit nur zwei Werten: "True" oder "False". Standardmäßig ist "True" eingestellt. Setzt man Visible auf "False", so wird der Button zwar auf dem Formular angezeigt, nicht aber im fertigen Programm. Width Die Breite des Buttons in Pixeln.

5 Seite DAS ERSTE "RICHTIGE" PROGRAMM Jetzt wird es ernst. Bisher haben wir ja noch gar nicht richtig programmiert. Alles, was wir bisher gemacht haben, hätte man genauso gut und vielleicht noch viel einfacher mit einem ordentlichen Zeichen- oder Malprogramm wie Photoshop oder Paintshop machen können. Wozu also der ganze Aufwand mit Delphi? Jetzt schreiben wir aber unser erstes "richtige" Programm. Dazu benötigen wir das Delphi-Projekt aus dem letzten Workshop. Workshop 4 Drei Buttons werden aktiv Stellen Sie mit dem Objektinspektor die Eigenschaft "Visible" der Buttons 2 und 3 auf "False". Drücken Sie die Taste F9. In der Tat sieht man jetzt nur noch den ersten Button. Wenn man mit der Maus darauf klickt, passiert allerdings noch gar nichts. Schließen Sie jetzt das Fenster Ihres erzeugten Programms. Die Delphi-Umgebung tritt wieder in den Vordergrund. Im Formulareditor führen Sie jetzt einen Doppelklick auf den ersten Button aus. Es erscheint ein völlig neues Fenster, so ähnlich wie in der Abbildung unten links. Auf den zu sehenden Text gehen wir später noch ein. Der Cursor blinkt wartend zwischen dem "begin" und dem "end". Das soll wohl soviel heißen wie: "bitte schreib' hier was hin...". Delphi erwartet jetzt von uns Programmbefehle, also Anweisungen, die eindeutig festlegen, was das Programm machen soll, wenn der Benutzer den ersten Button angeklickt hat. Tragen Sie hier die folgende Zeile ein: Button2.Visible := True; Starten Sie das Programm jetzt erneut, indem Sie F9 drücken. Wenn man das Programm mit F9 startet, ist lediglich ein Button zu sehen. "Klick mich!" werden wir von diesem Button aufgefordert. Gut, dann klicken wir mit der Maus auf den Button. Im gleichen Augenblick erscheint darunter ein zweiter Button: "Mich auch!". Das ist echtes Programmieren! So einen Effekt können wir mit einem Malprogramm nicht erzeugen. Wir legen eindeutig fest, wie ein bestimmtes Objekt (z.b. unser Button2) auf ein bestimmtes Ereignis (z.b. Klick auf Button 1) reagieren soll. Wir stellen also eine Verknüpfung zwischen einem Ereignis, einem Objekt und einer Aktion her.

6 Seite 6 Übungen Übung 1 Erweitern Sie das Programm folgendermaßen: Wenn man den zweiten Button klickt, soll der dritte sichtbar werden. Übung 2 Verändern Sie das Programm folgendermaßen: Es ist immer nur ein Button gleichzeitig zu sehen. Der erste Button erscheint beim Programmstart. Wenn er geklickt wird, verschwindet er, und statt dessen wir der zweite Button angezeigt. Wenn man diesen klickt, verschwindet er, und der dritte Button erscheint. Und wenn man diesen klickt, so verschwindet er, und der erste Button erscheint wieder. Übung 3 Erstellen Sie das unten abgebildete Formular mit vier Buttons. Das Programm soll genauso funktionieren wie das aus Übung 2. Wenn man aber auf den vierten Button klickt, soll das laufende Programm beendet werden. Der dazu erforderliche Befehl heißt ganz einfach: "Close".