Xcode: Animierte Fenster in Cocoa erstellen

In diesem kleinen Tutorial möchte ich euch zeigen, wie man in Xcode 4 mit Cocoa neben den bekannten Standard-Fenstern, eine ganz besondere Art von Fenstern erzeugen kann.Es handelt sich dabei um die animierten Sheets. Ein Sheet ist eine Art parasitäres Fenster das über ein übergeordnetes Fenster verfügt aus dem heraus es geöffnet wird. Ein Sheet lässt sich auf zwei Arten aufrufen. Ein Aufruf bewirkt dass das Sheet aus dem aufrufenden Fenster animiert nach unten gefahren wird, der andere dass das Sheet als modales Fenster freischwebend über dem Hauptfenster liegt.

 

Neues Projekt anlegen

Wir erzeugen ein neues Xcode-Projekt und wählen im folgenden Dialog aus den Mac OS X Templates das Template Cocoa Application. Bestätigen Sie die Auswahl durch einen Klick auf den Next-Button. Im folgenden Dialog können Sie ein paar Angaben zu dem neuen Projekt machen. Also Product Name habe ich SheetTest und als Class Prefix pwa eingegeben. Mit einem erneuten Klick auf den Next-Button gelangen Sie zum Dialog über den Sie das Projekt nun anlegen können. Wählen Sie in diesem Dialog den Ort an dem Sie das Projekt speichern wollen. Ich habe auf den Desktop das Verzeichnis fluuux-Projekte angelegt und dieses ausgewählt. Klicken Sie auf den Button Create!

Bearbeiten der AppDelegate-Dateien

pwaAppDelegate.h
Öffnen Sie den Ordner SheetTest in der linken Leiste und klicken Sie anschließend auf pwaAppDelegate.h um diese im Hauptfenster zu öffnen.
Wir müssen den Quelltext nun um eine IBOutlet ergänzen. Passen Sie dazu die folgende Zeile

@interface pwaAppDelegate : NSObject

wie folgt an

@interface pwaAppDelegate : NSObject { 
  IBOutlet NSPanel *theSheet; 
}

 

pwaAppDelegate.m
Nun müssen wir auch noch die Datei pwaAppDelegate.m anpassen.
In der Datei pwaAppDelegate.m legen wir zwei Aktionen an. Eine Aktion wird ausgeführt sobald man im Hauptprogramm auf den Button zum öffnen des Sheets klickt. Die zweite Aktion wird mit einem Button im Sheet selber verknüpft um dieses wieder zu schließen.
Der folgende Code wurde automatisch beim anlegen unseres Projektes generiert.

#import "pwaAppDelegate.h"

@implementation pwaAppDelegate

@synthesize window = _window;

- (void)applicationDidFinishLaunching:(NSNotification *)aNotification {
  // Insert code here to initialize your application
}

@end

Diesen werden wir nun wie unten abgebildet ergänzen

#import "pwaAppDelegate.h"

@implementation pwaAppDelegate

@synthesize window = _window;

- (IBAction) showSheet:(id)sender {

  [NSApp beginSheet:theSheet
     modalForWindow:(NSWindow *)_window
      modalDelegate:self
     didEndSelector:nil
        contextInfo:nil];

}

-(IBAction) closeSheet:(id)sender {

  [NSApp endSheet:theSheet];
  [theSheet orderOut:sender];

}

- (void)applicationDidFinishLaunching:(NSNotification *)aNotification {
  // Insert code here to initialize your application
}

@end

Programmoberfläche mit dem Interface Builder bearbeiten

Die Vorarbeiten wären erledigt und nun können wir anfangen unsere Programmoberfläche zu gestalten.
Dazu klicken wir in der linken Leiste auf MainMenu.xib. Der Interface Builder öffnet sich im Hauptfenster.

Geben Sie nun ganz unten rechts in das Suchfeld das Wort Panel ein. Es sollten, wie im oberen Bild zu sehen, zwei Objekte gefunden werden. Ziehen Sie das Panel in das Hauptfenster auf eine freie Fläche. Passen Sie die Größe des Panels so an dass es Ihren Anforderungen entspricht. Ich habe es so angepasst, das es in der Höhe etwa ein Drittel des Hauptfensters und etwas schmaler als dieses ist.
Klicken Sie das Panel an und entfernen Sie rechts im Attribute Inspektor das Häkchen bei Visible At Launch. Damit wird verhindert dass das Panel beim starten des Programms angezeigt wird. Wir wollen ja dass dieses erst geöffnet wird wenn wir auf den Button im Hauptfenster drücken.

Apropos Button im Hauptfenster. Wir werden nun einen PushButton auf dem Hauptfenster und einen auf dem Panel platzieren. Am einfachsten finden Sie den PushButton, indem Sie wie zuvor bei dem Panel unten, rechts in das Suchfeld das Wort Push oder Push Button eingeben. Ziehen Sie einen PushButton auf das Hauptfenster und zentrieren Sie diese am unteren Rand des Fensters. Klicken Sie doppelt auf den Button und ändern Sie den Text zu Sheet öffnen. Den Text können Sie auch ändern, indem Sie im Attribute Inspektor den Titel des Buttons ändern.
Ziehen Sie als nächstes einen PushButton auf das Panel, richten Sie dieses aus und ändern Sie den Titel des Buttons zu Sheet Schließen.

Den PushButtons Leben einhauchen.

Wenn Sie das Programm nun ausführen, werden Sie merken dass nichts passiert wenn Sie auf den Button im Hauptfenster klicken. Diese Funktionalität wollen wir nun hinzufügen. Wir erinnern uns, dass wir ganz am Anfang zwei Aktionen erstellt haben. Diese Aktionen werden wir nun mit den Buttons im Interface Builder verknüpfen.
Klicken Sie in der Leiste links neben dem Hauptfenster auf das blaue Symbol Pwa App Delegate und ziehen Sie dieses mit gedrückter linker Maustaste und bei gleichzeitig gedrückter Strg-Taste auf das Panel-Fenster. Wenn dieses Fenster blau markiert  wird, können Sie die linke Maustaste und die Strg-Taste loslassen. Es erscheint ein kleiner schwarzer HUD-Dialog in dem Sie ein Outlet auswählen können. Klicken Sie auf das Outlet theSheet.

Klicken Sie nun bei gedrückter Strg-Taste erneut mit der linken Maustaste, diesmal jedoch mit einem einfachen Mausklick, auf das blaue Symbol Pwa App Delegate. Wie im Bild unten zu sehen, öffnet sich nun wiederum ein HUD-Dialog der uns die vorhandenen Outlets oder die empfangenen Aktionen anzeigt. Unter Received Actions finden wir unsere zwei, ganz am Anfang, erstellten Aktionen closeSheet und showSheet wieder. Klicken Sie nun in den kleinen leeren Kreis hinter closeSheet und bewegen Sie den Mauszeiger bei gedrückter linker Maustaste auf den Button Sheet schließen im Panel.
Lassen Sie die linke Maustaste los.
Sie sehen nun im HUD dass die Aktion closeSheet mit dem Button Sheet schließen verknüpft wurde. Verbinden Sie nun die Aktion showSheet mit dem Button Sheet öffnen im Hauptfenster .

Unsere fertige Anwendung

Sie haben nun erfolgreich das Outlet theSheet mit dem Panel-Window und die zwei Aktionen showSheet und closeSheet mit den zwei Buttons verbunden.
Starten Sie nun das Programm und klicken Sie anschließend auf den Button Sheet öffnen.

Über Enrico S.

Programmierer, Webdesigner, Grafiker, Blogger, Screencaster, Arduino- und eMobility Enthusiast. nefilim3006 ist auch bei Google+ vertreten

Kommentare geschlossen.