Tutorial 5: Panels und Mausevents
Im vorherigen Tutorial haben wir Panels mit ihren verschiedenen Styles behandelt, ausser den PANEL_ACTIVE-Style. In diesem Tutorial werden wir dies nachholen und uns selbst in die Mausevents einführen.
Zum Sicherstellen dass das Programm wie gezeigt mit den Bildern läuft, lade die 3 Bilder unten auf deine Harddisk herunter und füge den richtigen Pfad und Dateinamen im Code ein.
![]() |
![]() |
![]() |
Lass uns zuerst ein Panel mit einem Hintergrundbild erstellen, um einen Button zu simulieren.
SuperStrict Import MaxGui.Driver Local MyWindow:TGadget=CreateWindow("Panel-Beispiel", 200,200,320,240) |
Wir haben nun einen Button in unserem Fenster, aber er macht im Moment noch nichts.
![]() |
Lass uns ein paar Rüben mehr in unseren Code einfügen (fetter Text), es wird ein bisschen harrig aussehen, aber vertraue mir, ich werde dir Zeile um Zeile erklären.
SuperStrict Import MaxGui.Driver |
Wenn du jetzt den obenstehenden Code ausführst und mit der Maus über den Button fährst, siehst du den Rollover-Effekt.
![]() |
![]() |
Jetzt lass uns sehen, wie dieser Effekt erreicht wurde.
SuperStrict Import MaxGui.Driver |
Hoffentlich bist du jetzt vertraut mit den ersten beiden Codezeilen.
Die dritte Linie ist eine der Interessanteren, besonders das PANEL_ACTIVE-Flag, das gesetzt sein muss. Der Rest besteht aus den normalen CreatePanel-Parameter.
Local image1:TPixmap=LoadPixmap("D:My Documents on E_TutorialsButton_1.jpg") Local image2:TPixmap=LoadPixmap("D:My Documents on E_TutorialsButton_2.jpg") |
Die beiden Linien oben laden die Bilder, die wir als unsere Buttons benutzen wollen. Das wird gemacht mit der Blitzmaxfunktion LoadPixmap. Diese Funktion lädt unsere Bilder als Pixmap-Objekte in den Speicher.
Die LoadPixmap-Funktion erlaubt uns den Speicherplatz zu wissen, wo unser Bild zwischengespeichert ist. Wir müssen hier sehr spezifisch sein.
Local image:TPixmap = image1 |
Diese Zeile definiert eine Variable image vom Type Pixmap. Diese Variable können wir später bei SetPanelPixmap benutzen.
Select EventID() Case EVENT_WINDOWCLOSE End Case EVENT_MOUSEENTER image=image2 Case EVENT_MOUSELEAVE image=image1 End Select |
Unser "Select EventID()" reagiert jetzt auf 2 Mausevents, EVENT_MOUSEENTER und EVENT_MOUSELEAVE.
Diese Events werden werden von MaxGUI gesendet, wenn die Maus in unser Panel "fährt" oder wieder "hinausgeht". Case überprüft dann, welcher Event gesendet wurde, und verbindet das benötigte Bild mit unserer image-Variable.
Und zum Schluss zeigt SetPanelPixmap das Bild auf unserem Panel an. Das ruft den Rollover-Effekt hervor.
SetPanelPixmap MyPanel, image, PANELPIXMAP_CENTER |
Beachte, dass du eher den PANELPIXMAP_CENTER-Style benutzen solltest, um das gewünschte Aussehen zu erreichen.
Zum Kompletieren unseres Tutorials fügen wir noch ein bisschen Code hinzu (fetter Text), um den Mausklick-Effekt zu erreichen.
SuperStrict Import MaxGui.Driver |
Kopiere das Programm, führe es aus, und klicke auf den Button. Du solltest nun den Mausklick-Effekt auf dem Button sehen. Im obigen Code wirst du sehen, dass wir ein drittes Bild (vom gedrückten Button) zu unserer Kollektion hinzugefügt haben.
Wir überprüfen dann die MOUSEUP und MOUSEDOWN Events und verknüpfen das benötigte Bild mit unserer Variable et voilà, wir haben unseren gewünschten Effekt.
Das PANEL_ACTIVE-Flag in unserer CreatePanel-Funktion erlaubt unserem Panel folgende Events zu detektieren:
EVENT_MOUSEDOWN | Mausbutton gedrückt. EventData enthält den Buttoncode |
EVENT_MOUSEUP | Mausbutton losgelassen. EventData enthält den Buttoncode |
EVENT_MOUSEMOVE | Maus wurde bewegt. EventX und EventY enthalten die Mauskoordinaten |
EVENT_MOUSEWHEEL | Mausrad gedreht. EventData enthält Anzahl "Klicks" |
EVENT_MOUSEENTER | Maus kommt ins Panel |
EVENT_MOUSELEAVE | Maus hat Panel verlassen |
EVENT_KEYDOWN | Taste gedrückt. EventData enthält den Tastencode |
EVENT_KEYUP | Taste losgelassen. EventData enthält den Tastencode |
EVENT_KEYCHAR | Zeichen eingegeben. EventData enthält den UNICODE |
In diesem Tutorial haben wir nur den MOUSE_DOWN, MOUSE_UP, MOUSE_LEAVE und MOUSE_ENTER Event benutzt. Die anderen werden wir in den nächsten Tutorials benützen.
Zum Schluss...
Zum errinnern was wir in diesem Tutorial gelernt haben.
- Setzen des PANEL_ACTIVE-Flag erlaubt uns Events zu empfangen, die von unserem Panel gesendet wurden.
- Zusammen mit SetPanelPixmap und LoadPixmap können wir BilderButtons in unserem MaxGUI-Programm benutzen; eine Funktion die im Funktionsumfang von MaxGUI fehlt.