From 400ae7e04fabf390d2fdf7aa0187fe80647e6ffe Mon Sep 17 00:00:00 2001 From: Sebastian Zug Date: Wed, 3 Jul 2024 09:30:21 +0200 Subject: [PATCH] First Steps in L27 --- 27_MAUI.md | 1459 +++++++++++++++++ code/27_MAUI/MauiMinimal/MauiMinimal.csproj | 65 + code/27_MAUI/MauiMinimal/MauiMinimal.sln | 25 + code/27_MAUI/MauiMinimal/MauiProgram.cs | 38 + .../Platforms/Android/AndroidManifest.xml | 6 + .../Platforms/Android/MainActivity.cs | 10 + .../Platforms/Android/MainApplication.cs | 15 + code/27_MAUI/tkinter/main.py | 16 + img/27_Maui/MinimalBeispiel.png | Bin 0 -> 337768 bytes 9 files changed, 1634 insertions(+) create mode 100644 27_MAUI.md create mode 100644 code/27_MAUI/MauiMinimal/MauiMinimal.csproj create mode 100644 code/27_MAUI/MauiMinimal/MauiMinimal.sln create mode 100644 code/27_MAUI/MauiMinimal/MauiProgram.cs create mode 100644 code/27_MAUI/MauiMinimal/Platforms/Android/AndroidManifest.xml create mode 100644 code/27_MAUI/MauiMinimal/Platforms/Android/MainActivity.cs create mode 100644 code/27_MAUI/MauiMinimal/Platforms/Android/MainApplication.cs create mode 100644 code/27_MAUI/tkinter/main.py create mode 100644 img/27_Maui/MinimalBeispiel.png diff --git a/27_MAUI.md b/27_MAUI.md new file mode 100644 index 0000000..8d7b477 --- /dev/null +++ b/27_MAUI.md @@ -0,0 +1,1459 @@ + + +[![LiaScript](https://raw.githubusercontent.com/LiaScript/LiaScript/master/badges/course.svg)](https://liascript.github.io/course/?https://github.com/TUBAF-IfI-LiaScript/VL_Softwareentwicklung/blob/master/27_MAUI.md) + +# Maui-GUI Programmierung + +| Parameter | Kursinformationen | +| ------------------------ | ------------------------------------------------------------------------------------ | +| **Veranstaltung:** | `Vorlesung Softwareentwicklung` | +| **Teil:** | `27/27` | +| **Semester** | @config.semester | +| **Hochschule:** | @config.university | +| **Inhalte:** | @comment | +| **Link auf den GitHub:** | https://github.com/TUBAF-IfI-LiaScript/VL_Softwareentwicklung/blob/master/27_MAUI.md | +| **Autoren** | @author | + +![](https://media.giphy.com/media/26tn33aiTi1jkl6H6/source.gif) + +--------------------------------------------------------------------- + + +# Maui I + +"MAUI" in .NET MAUI steht für Multi-platform App UI und hat keine direkte Verbindung zur hawaiianischen Insel Maui. + +![](https://upload.wikimedia.org/wikipedia/commons/5/5c/Maui_Landsat_Photo.jpg "Maui Landsat satellite photo (false color). [https://commons.wikimedia.org/wiki/File:Maui_Landsat_Photo.jpg](https://commons.wikimedia.org/wiki/File:Maui_Landsat_Photo.jpg)") + +## GUI + +> GUI - eine Form von Benutzerschnittstelle eines Computers mit der Aufgabe Anwendungssoftware auf einem Rechner mittels grafischer Symbole, Steuerelemente oder auch Widgets genannt, bedienbar zu machen. + +https://de.wikipedia.org/wiki/Grafische_Benutzeroberfl%C3%A4che + + + +> Anekdote (erzält von ChatGPT): Steve Jobs besuchte das Xerox PARC (Palo Alto Research Center) in den späten 1970er Jahren und war beeindruckt von den Technologien, die er dort sah, insbesondere von der grafischen Benutzeroberfläche. Er erkannte sofort das Potenzial und implementierte ähnliche Konzepte in den Apple Lisa und später in den Macintosh. Jobs soll gesagt haben, dass der Besuch bei Xerox PARC einer der inspirierendsten Momente seiner Karriere war. + +![Xerox Alto](https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Xerox_Alto.jpg/220px-Xerox_Alto.jpg "Xerox Alto (1973") +![Apple Lisa](https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Apple_Lisa_%28Little_Apple_Museum%29_%288032162544%29.jpg/220px-Apple_Lisa_%28Little_Apple_Museum%29_%288032162544%29.jpg "Apple Lisa 1983") + + +### Warum grafisch? + +> Zitat: "The screen is a window through which one sees a virtual world. The challenge is to make the world look real, act real, sound real, and feel real." – Ivan Sutherland + ++ Benutzerfreundlich und intuitiv bedienbar, optimalere Lernkurve für weniger technisch versierte Benutzer ++ Umfangreiche Möglichkeiten komplexe Daten zu visualisieren durch Diagramme, Tabellen und Grafiken ++ Interaktivität: Feedback in Echtzeit ++ Minimierung von Eingabefehler ++ Ästhetik + +### Einstiegsbeispiel + +```python +import tkinter as tk +from tkinter import messagebox + +def say_hello(): + messagebox.showinfo("Status", + "Aus kleinem Anfang entspringen alle Dinge - Cicero") + +window = tk.Tk() +window.title("Beispiel-GUI") +window.geometry('520x300') + +hello_button = tk.Button(window, text="Ich bin keine einfache Anzeige ", + command=say_hello) +hello_button.pack(pady=20) + +window.mainloop() +``` + +Was sind die Kernelemente einer GUI-Anwendung? + ++ **Fenster**: Die Hauptoberfläche, die alle anderen Elemente enthält. ++ **Widgets**: Interaktive Elemente wie Schaltflächen, Textfelder, Listen, Menüs, usw. ++ **Layouts**: Die Anordnung der Widgets im Fenster. ++ **Ereignisse**: Aktionen, die durch Benutzerinteraktionen ausgelöst werden. ++ **Logik**: Die Programmlogik, die auf Benutzeraktionen reagiert. + + +## .NET MAUI - mehr als GUI + +https://de.wikipedia.org/wiki/.NET_MAUI + +https://learn.microsoft.com/de-de/dotnet/maui/what-is-maui?view=net-maui-8.0 + +> .NET MAUI (Multi-Platform App UI) ist ein plattformübergreifendes Framework zum Erstellen nativer Mobil- und Desktop-Apps mit C# und XAML. +> +> --Handbuch von .NET MAUI 8 + +![.NET MAUI](https://learn.microsoft.com/de-de/dotnet/maui/media/what-is-maui/maui-overview.png?view=net-maui-8.0 "Multiplattform-App Vision aus dem Handbuch von .NET MAUI 8 https://learn.microsoft.com/de-de/dotnet/maui/what-is-maui?view=net-maui-8.0") + +NET MAUI vereint Android-, iOS-, macOS- und Windows-APIs in einer einzigen API, die eine Write-Once-Run-Anywhere-Entwicklung ermöglicht und gleichzeitig umfassenden Zugriff auf alle Aspekte der jeweiligen nativen Plattform bietet. + +![.NET MAUI Architektur](https://learn.microsoft.com/de-de/dotnet/maui/media/what-is-maui/architecture-diagram.png?view=net-maui-8.0 "Architektur von MAUI https://learn.microsoft.com/de-de/dotnet/maui/what-is-maui?view=net-maui-8.0") + +In einer .NET MAUI-Anwendung schreiben Sie Code, der hauptsächlich mit der .NET MAUI-API (1) interagiert. Die .NET MAUI nutzt dann direkt die APIs der nativen Plattform (3). Darüber hinaus kann der Anwendungscode bei Bedarf direkt auf die APIs der Plattform zugreifen (2). + +.NET Multi-Platform App UI (.NET MAUI)-Apps können für die folgenden Plattformen geschrieben werden: + ++ Android 5.0 (API 21) oder höher ist erforderlich. ++ iOS 11 oder höher ist erforderlich. ++ macOS 10.15 oder höher mit Mac Catalyst. ++ Windows 11 und Windows 10, Version 1809 oder höher, mit Windows UI Library (WinUI) 3. + + +**MAUI- Geschichte**: + ++ Ursprung: Xamarin.Forms wurde als eine plattformübergreifende UI-Toolkit für .NET-Entwickler eingeführt, um UI-Code zu teilen und native Benutzeroberflächen für iOS, Android und UWP (Universal Windows Platform) zu erstellen, trotz Popularität gab es Einschränkungen hinsichtlich der Wartbarkeit, Erweiterbarkeit und der Unterstützung neuerer Plattformen wie macOS und Linux. ++ Mai 2020: Microsoft kündigte .NET MAUI erstmals auf der Build-Konferenz. Die Idee war, eine weiterentwickelte Version von Xamarin.Forms zu schaffen, die eine einzige Codebasis bietet, um Anwendungen für iOS, Android, Windows und macOS zu entwickeln. ++ 2022: Veröffentlichung als als Teil von .NET 6 ++ 2023 - aktuelle Version .NET 8 + +![](https://learn.microsoft.com/de-de/previous-versions/xamarin/get-started/what-is-xamarin-forms-images/xamarin-forms-architecture.png "Architektur von Xamarin.Forms https://learn.microsoft.com/de-de/previous-versions/xamarin/get-started/what-is-xamarin-forms-images/xamarin-forms-architecture.png") + + +### Minibeispiel (ohne XAML, nur C#) + +> Der Code des Beispiels ist im Projektordner unter `/code/27_MAUI/MauiMinimal` zu finden. Versuchen Sie die Struktur nachzuvollziehen und die dabei verwendeten Merkmale der Sprache C# zu identifizieren. + +```csharp +using Microsoft.Maui; +using Microsoft.Maui.Controls; + +public class App : Application +{ + public App() + { + //Hauptseite der App als C#-Code + MainPage = new ContentPage + { + Content = new StackLayout + { + VerticalOptions = LayoutOptions.Center, + Children = + { + new Label + { + HorizontalTextAlignment = TextAlignment.Center, + Text = "Welcome to our new lecture on .NET MAUI!" + } + } + } + }; + } +} + +public static class MauiProgram +{ + //gibt Instanz der MauiApp zurück + public static MauiApp CreateMauiApp() + { + //erstellt Builder-Objekt + var builder = MauiApp.CreateBuilder(); + //konfiguriert Builder-Objekt: App als Haupteinstiegspunkt zu verwenden + builder .UseMauiApp(); + return builder.Build(); + } +} +``` + +![Resulting output](./img/27_Maui/MinimalBeispiel.png "Ausgabe des Minimalbeispiels bei der Anwendung auf Android Traget") + +### Wichtigste Klassen und ihr Verhältnis zueinander + +Um die Benutzeroberfläche zu erstellen werden in einer Maui-Anwendung die Klassen aus C# und XAML kombiniert. Dabei wird der strukturelle Aufbau und das Design der Benutzeroberfläche in XAML definiert, während die Logik und Funktionalität der Anwendung in C# implementiert wird. Beide Teile arbeiten zusammen, um eine vollständige Anwendung zu erstellen. Es existieren für jede Klasse zwei Dateien, .xaml- Datei und .xaml.cs (C#-Code-Behind)-Datei, die üblicherweise zur Laufzeit (als CIL-Code) zusammengeführt werden. + +https://learn.microsoft.com/de-de/dotnet/maui/xaml/fundamentals/get-started?view=net-maui-8.0 + +Achtung: Partielle Klassen! + +**Application**: + Die Application-Klasse repräsentiert die gesamte Anwendung. Sie dient als Einstiegspunkt und zentraler Verwalter der App. + +Hauptfunktionen: + ++ Initialisiert die App und ihre Ressourcen. ++ Verwaltet des Lebenszyklus der App (z.B. Starten, Beenden, Anhalten, Fortsetzen). ++ Definiert globale Ressourcen und Styles, die in der gesamten App verwendet werden können. ++ Gestaltet die Hauptseite der Anwendung, die beim Start angezeigt wird. + +Methoden: + ++ für die Behandlung von Lebenszyklusereignissen, ++ zum Erstellen neuer Windows für die Anwendung. Die .NET MAUI-Anwendung hat standardmäßig ein einziges Fenster, aber Sie können zusätzliche Fenster erstellen und starten. + +```csharp App.xaml.cs +public partial class App : Application +{ + public App() + { + InitializeComponent(); + MainPage = new AppShell(); + } +} +``` + +```xml App.xaml + + + + + + + + + + + +``` + +**Shell**: +Die Shell-Klasse beschreibt visuelle Hierarchie der App, ist ein Container für die gesamte App-Navigation. Sie bietet eine einheitliche Möglichkeit, die Navigationsstruktur und das Erscheinungsbild der App zu definieren. + +Hauptfunktionen: + ++ Verwaltung von Routen und Navigation innerhalb der App. ++ Unterstützung von Flyout-Menüs, Tab-Leisten und Seitenhierarchien. ++ Ermöglicht die Konfiguration von URI-basierten Navigationen und Deep Linking. + +```csharp AppShell.xaml.cs +public partial class AppShell : Shell +{ + public AppShell() + { + InitializeComponent(); + } +} +``` + +```xml AppShell.xaml + + + + + + +``` + +**ContentPage**: +Die ContentPage-Klasse ist die grundlegende Seite für die Anzeige von Inhalten in der App. Jede Seite stellt eine einzelne Ansicht dar, die vom Benutzer angezeigt wird. + +Hauptfunktionen: + ++ Enthält Views und Layouts, die auf der Seite angezeigt werden. ++ Ermöglicht das Festlegen und Verwalten des Seiteninhalts, einschließlich Header, Footer und Hauptinhalt. ++ Unterstützt Lebenszyklusereignisse wie Appearing und Disappearing für die Verwaltung der Seitendarstellung. + +```csharp MainPage.xaml.cs +public partial class MainPage : ContentPage +{ + int count = 0; + + public MainPage() + { + InitializeComponent(); + } + + private void OnCounterClicked(object sender, EventArgs e) + { + count++; + + if (count == 1) + CounterBtn.Text = $"Clicked {count} time"; + else + if (count > 10) + CounterBtn.Text = $"Clicked enough"; + else + CounterBtn.Text = $"Clicked {count} times"; + + SemanticScreenReader.Announce(CounterBtn.Text); + } +} +``` + +```xml MainPage.xaml + + + + + +