Wenn Entwickler daran denken, Apps auf Xamarin-Basis für Apple-Geräte zu programmieren, denken sie oft nur an iPhone und iPad. Es ist jedoch auch möglich, Apps für MacOS zu entwickeln. Es ist zwar nicht exakt das gleiche wie beim iOS-Betriebssystem, trotzdem gibt es viele übertragbare Funktionen, für die iOS-Entwickler die eine App für MacOS entwickeln wollen. Mit Xamarin.Mac können Entwickler großartige MacOS-Apps mit der Einfachheit von C# kreieren.

In diesem Blog-Post werden Sie lernen, wie Sie Ihre erste MacOS App in C# erstellen: ein „Pomodoro Timer“, um uns produktiv zu halten.

Loslegen

Das Erstellen von Apps für MacOS beginnt wie in jedem anderen Programm mit File > New. Beachten Sie, dass Sie Xamarin.Mac auf Ihrem MacOS-Gerät installiert haben müssen. Das Erstellen von MacOS-Apps aus Visual Studio wird nicht unterstützt.

File > New Solution > Mac > App > Cocoa App

Als nächstes müssen wir den App-Namen eingeben. In diesem Beispiel heißt sie „Pomodoro“.

Die Dock Item– und Extension-Optionen sind anpassbar, werden hier aber mit den leeren/Standard-Werten hinterlassen.

Dies ist unsere grundlegende MacOS-App! Sie können sie testen, indem Sie die App oben links über dem „Play-Button“ in Xamarin Studio ausführen. Im Gegensatz zu Xamarin.iOS ist es nicht notwendig, ein Ziel/Gerät auszuwählen, um die App auszuführen, da diese direkt auf Ihrem Mac läuft. Man sollte so etwas sehen:

Eine Benutzeroberfläche (UI) bauen

Jetzt, da wir unsere grundlegende MacOS App haben, ist es an der Zeit, die Benutzeroberfläche zu erstellen!

Xamarin.Mac benutzt die grafische Schnittstelle (Interface) von Xcode, um Benutzeroberflächen zu entwickeln. Genau wie bei iOS, sind bei MacOS die grafischen Schnittstellen (Interfaces) wie Storyboards aufgebaut. Storyboard-Unterstützung auf MacOS wurde in 10.10 (Yosemite) eingeführt. Um es einfach zu halten, konzentrieren wir uns auf MacOS 10.10 und höher. Falls Ihre App Unterstützung für 10.9 oder niedriger braucht, müssen Sie .xib Dateien benutzen, mehr darüber können sie in dem „mit .xib Dateien arbeiten“-Guide von Xamarin lesen.

Führen Sie ein Doppelklick im Lösungs-Explorer auf Main.storyboard aus. Xcode wird automatisch mit einem „Stub“-Projekt und das Storyboard im Interface-Builder geöffnet.

Das erste was man sieht, ist das leere UI (User Interface). Beachten Sie, dass es eine Menüleiste im Storyboard gibt. Sie können diese verwenden, um die Menüleiste für Ihre App anzupassen. In diesem Fall wurde das Menü gelassen, wie es ist.

Das Hinzufügen von Objekten zu unserer Schnittstelle ähnelt der Verwendung des iOS-Designers in Xamarin Studio. Unten rechts im Interface-Builder-Fenster sehen Sie die Toolbox. Sie können die verfügbaren Objekte anzeigen lassen, indem Sie das Symbol „Objektbibliothek anzeigen“ wie hier gezeigt auswählen:

Man kann ganz einfach die Ansichten auf den View Controller ziehen. Um zu beginnen, erstellt man ein Interface wie das unten auf dem Bild, welches aus einem Label und einem Button besteht.

Zuerst finden Sie das Label-Objekt und ziehen dies per Drag & Drop in den View Controller.

Man kann das gleiche für den Push Button machen.

Um das Label und den Titel für den Button zu bearbeiten, kann man entweder auf den Text doppelklicken oder im Feld oben rechts bei dem „Attributes Inspector“ nach „Titel“ suchen und es dort bearbeiten.

Nun, da die UI erstellt ist, ist es Zeit, „actions“ und „outlets“ zu konfigurieren, um mit der UI im Code zu arbeiten. Um dies zu tun, muss man zum „Assistant Editor“ wechseln. Klicken Sie oben rechts im Xcode-Hauptfenster auf das Symbol, das wie zwei überlappende Kreise aussieht. Dies sollte automatisch eine Datei mit dem Namen „ViewController.h“ aufrufen. Falls nicht, dann sollten sie auf „Automatic“ im neuem Editor Fenster klicken und Manual > Pomodoro > Pomodoro > ViewController.h auswählen.

Xcode müsste jetzt so aussehen:

Das Einrichten von „actions“ und „outlets“ in der Header-Datei (die .h-Datei) ermöglicht es uns, sie unserem Xamarin-Projekt zuzuweisen. Um den Code zu starten, wenn der Button angeklickt wird, müssen wir eine „action“ einrichten und das Label unserem Xamarin-Projekt zuweisen, dazu müssen wir noch ein „outlet“ einrichten.

Halten Sie die Strg-Taste gedrückt und klicken Sie dann auf den Button und ziehen ihn bis zur Zeile, in der sich die letzte Klammer im rechten Editor sich befindet. Ändern Sie im Popup-Fenster die Connection zu Outlet und den Namen zu TimerLabel und klicken Sie auf connect:

Dies wird automatisch die Header-Datei mit der richtigen Definition für das „Outlet“ ausfüllen.:

Wiederholen Sie die gleichen Schritte für den Button, dieses Mal benennen Sie ihn StartStopButton.

Jetzt muss die Aktion für den Button hinzugefügt werden. Halten Sie die Strg-Taste gedrückt und wiederholen sie das gleiche wie im vorherigen Vorgang. Dieses Mal ändern Sie im Pop-up-Fenster die Connection zu Action und den Namen zu StartStopButtonClicked und klicken Sie auf Connect:

Sobald Sie fertig sind, sollten Sie die folgenden Definitionen haben:

Für diesen Moment ist es alles, was mit Xcode gemacht werden musste, Sie können also wieder ins Xamarin Studio wechseln, die Änderungen werden automatisch synchronisiert.

Verhalten für die Benutzeroberfläche (UI) hinzufügen

Zurück in Xamarin Studio öffnen Sie die ViewController.cs-Datei. Wir können nun den Code für den Button hinzufügen, den wir in Xcode eingerichtet haben.

Fügen Sie die folgenden Eigenschaften hinzu:

Dann fügen Sie in ViewDidLoad den folgenden Code hinzu:

Schließlich braucht man den Code, der ausgeführt wird, wenn der Button angeklickt wird:

Jetzt gibt es einen einfachen Pomodoro-Timer! Wenn die App ausgeführt wird, können Sie auf den Button klicken, um den Countdown-Timer zu starten:

Sobald 25 Minuten vergangen sind, wird eine Warnung angezeigt:

Zusammenfassung

Xamarin.Mac ist eine sehr gute Möglichkeit, leistungsstarke Apps für MacOS zu entwickeln, die die Kraft von C# nutzen. In diesem Blog-Post wurde eine „basic Pomodoro-Timer“-App für MacOS erstellt. Wenn Sie mehr über Xamarin.Mac erfahren möchten, schauen Sie sich die Xamarin.Mac-Dokumentation an und schauen Sie im Forum vorbei! Der fertige Code für diesen Blog-Post kann auf GitHub gefunden werden.

Es handelt sich bei diesem Artikel um eine Übersetzung des Blogbeitrags von Xamarin.