Skip to content

Commit 6c2c4fb

Browse files
DevTKSSDevTKSS
committed
docs: let copilot create the english localized tutorial versions from the previously own created german ones
1 parent 2d3f1cd commit 6c2c4fb

16 files changed

+928
-100
lines changed

‎doc/articles/de/Navigation/toc.yml‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ items:
88
- name: Erstellen oder upgraden
99
items:
1010
- name: "App erstellen (Wizard/CLI)"
11-
uid: DevTKSS.Uno.ExtensionsNavigation.HowTo-CreateApp.de
11+
uid: DevTKSS.Uno.Setup.HowTo-CreateNewUnoApp.de
1212
href: ../HowTo-CreateApp-de.md
1313
- name: "Eine bestehende App upgraden"
1414
uid: DevTKSS.Uno.ExtensionsNavigation.UpgradeExistingApp.de
@@ -21,4 +21,7 @@ items:
2121
href: HowTo-RegisterRoutes-de.md
2222
- name: Definieren einer Navigation im Model oder ViewModel
2323
uid: DevTKSS.Uno.ExtensionsNavigation.HowTo-DefiningModelOrViewModel.de
24-
href: HowTo-ModelDefinition-de.md
24+
href: HowTo-ModelDefinition-de.md
25+
- name: Reagieren auf Routen Änderungen
26+
uid: DevTKSS.Uno.ExtensionsNavigation.HowTo-ChangeRoutes.de
27+
href: HowTo-ChangeRoutes-de.md

‎doc/articles/en/HowTo-Adding-New-Pages-en.md‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
uid: DevTKSS.Uno.Setup.HowTo-AddingNewPages.en
3+
---
4+
5+
## How To: Add a Page
6+
7+
In this guide, we will add a new page with sample content to our Uno app together.
8+
9+
1. **Add a new item:**
10+
1. Right-click on the **Presentation** folder in the Solution Explorer on the right
11+
2. Select **Add**
12+
3. Then click on **New Item**
13+
14+
![Adding-new-Item-to-sln](../.attachments/Adding-new-Item-to-sln-en.png)
15+
16+
2. **Create a Page element:**
17+
1. Select the **`Page (Uno Platform)`** element at the top of the list and give it a name with the Page suffix. For example: `SamplePage.xaml`. This suffix is mandatory for Uno applications.
18+
2. Now click **Add**.
19+
20+
![Adding-new-Item-Page](../.attachments/Adding-new-Item-page-de.png)
21+
22+
### Adding Sample Content
23+
24+
To see that we are actually on the desired page, we now add simple sample content:
25+
26+
```xml
27+
<Page x:Class="UnoApp2.Presentation.HelloWorldPage"
28+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
29+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
30+
xmlns:local="using:UnoApp2.Presentation"
31+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
32+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
33+
mc:Ignorable="d"
34+
Background="{ThemeResource BackgroundBrush}">
35+
<Grid>
36+
<TextBlock Text="Hello World"
37+
HorizontalTextAlignment="Center"
38+
VerticalAlignment="Center" />
39+
</Grid>
40+
</Page>
41+
```
42+
43+
This way, the text `Hello World` will be displayed on this page. Of course, you are free to use any content you like.
44+
45+
---

‎doc/articles/en/HowTo-Adding-New-VM-Class-Record-en.md‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
uid: DevTKSS.Uno.Setup.HowTo-AddingNew-VM-Class-Record.en
3+
---
4+
5+
## How To: Create a ViewModel or Model from Classes
6+
7+
In this guide, we will look at how to create a new class element in Visual Studio and then create either a ViewModel or a Model for use in an Uno Platform application with **MVUX**.
8+
9+
For the following steps, let's assume the page that the element to be created belongs to is called **SamplePage.xaml**
10+
11+
1. **Add a new item (for use as Model or ViewModel):**
12+
1. Right-click on the **Presentation** folder in the Solution Explorer on the right
13+
2. Select **Add**
14+
3. Then click on **New Item**
15+
16+
![Adding-new-Item-to-sln](../.attachments/Adding-new-Item-to-sln-en.png)
17+
18+
2. **Create a Class element:**
19+
1. Select the **`Class`** element in the list and name it according to the following scheme:
20+
21+
**Your application uses:**
22+
- **Mvvm:** `SampleViewModel.cs`
23+
- **Mvux:** `SampleModel.cs`
24+
25+
3. Now click **Add**.
26+
27+
![Adding-new-Item-Class](../.attachments/Adding-new-Item-Class.png)
28+
29+
### [Create a Model **Mvux**](#tab/create-mvux-model)
30+
31+
To create a Model suitable for Mvux:
32+
33+
1. Insert `partial` before the current `class`.
34+
2. Replace `class` with `record`
35+
3. With the snippet shortcut `ctor` you can also automatically insert a (secondary) constructor.
36+
37+
![Renaming-Class-to-Mvux-Model](../.attachments/renaming-class-to-record-mvux.png)
38+
39+
### [Create a ViewModel](#tab/create-mvvm-viewmodel)
40+
41+
To create a ViewModel suitable for Mvvm:
42+
43+
1. Insert `partial` before `class`.
44+
2. Add `: ObservableObject` after your ViewModel name
45+
3. With the snippet shortcut `ctor` you can also automatically insert a (secondary) constructor.
46+
47+
![Converting-Class-to-ViewModel-Mvvm](../.attachments/converting-class-to-vm-mvvm.png)
48+
49+
---

‎doc/articles/en/HowTo-CreateApp-en.md‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
---
2+
uid: DevTKSS.Uno.Setup.HowTo-CreateNewUnoApp.en
3+
---
4+
5+
## How To: Create a New Uno Application
6+
7+
In this guide, you will learn how to create an Uno Platform application using the Wizard or dotnet CLI to follow, for example, the [Xaml Navigation App Tutorial](./Navigation/Extensions-Navigation-en.md).
8+
9+
To follow along, you should have previously completed the [Development Environment Setup Guide](xref:DevTKSS.Uno.Setup.DevelopmentEnvironment.en).
10+
11+
## Video Tutorial on Configuration
12+
13+
> [!NOTE]
14+
> This video is currently only available in German, but transcriptions have been added to the video description, which should be usable through YouTube's auto-translate feature. You can also enable auto-translated subtitles in YouTube to follow along in your preferred language.
15+
16+
![How To: Konfigurieren unserer Uno App Visual Studio Wizard](https://youtu.be/UGKidrvdKpQ)
17+
18+
## Create and Configure an Uno App via Template
19+
20+
In the following, you will learn how to configure an Uno app by selecting the desired options. You can either use the Visual Studio Wizard or the dotnet CLI tool. For the latter, it is recommended to visit the [Web Wizard](https://new.platform.uno/) to make configuration easier and get the appropriate `dotnet new` command!
21+
22+
### [Visual Studio 2022](#tab/vs-wizard)
23+
24+
#### Select Template
25+
26+
1. Open Visual Studio 2022 and select **"Create a new project"** in the start window.
27+
2. Search for the template **"Uno App"** and select it. Click **"Next"**.
28+
29+
![select-template](../.attachments/select-template-de.png)
30+
31+
3. Give your project a name and enable the option **"Place solution and project in the same directory"**. Then click **"Create"**.
32+
33+
![place-project-in-sln](../.attachments/place-project-in-sln-de.png)
34+
35+
#### The Template Wizard
36+
37+
**Select the following options in the Visual Studio Wizard to configure your app:** *(using the Xaml Navigation App Tutorial as an example)*
38+
39+
1. Use the preset **`recommended`**
40+
2. Target Framework: **`net9.0`**
41+
42+
3. As `Platform` select at least **Desktop** or **Skia Desktop**.
43+
44+
4. Markup: **`Xaml`**
45+
46+
![select-Xaml](../.attachments/select-xaml.png)
47+
48+
5. Presentation: **`MVUX`**
49+
50+
![select-MVUX](../.attachments/select-presentation-mvux.png)
51+
52+
6. Select the **Material Design Theme** under **Themes**.
53+
54+
![select-theme-optional-themeservice](../.attachments/select-theme-optional-themeservice.png)
55+
56+
> [!TIP]
57+
> By default, **ThemeService** is also selected, which would allow you to switch between light and dark UI later. It is not directly required here, but you can leave it in if you like.
58+
59+
7. Extensions: **`Regions`**, **`DependencyInjection`**
60+
61+
![select-extensions](../.attachments/select-regions-di-optional-localization.png)
62+
63+
8. *(Optional)* select the **Uno Toolkit**.
64+
65+
![select-toolkit-optional-vscode-debugging](../.attachments/select-toolkit-optional-vscode-debugging.png)
66+
67+
> [!TIP]
68+
> If you want to keep the option open to develop in Visual Studio Code later, you should also select `Visual Studio Code Debugging` here.
69+
70+
9. Finally, click **`Create`** to generate the app.
71+
72+
### [The dotnet CLI Tool](#tab/dotnet-cli)
73+
74+
1. Optionally open the [Uno Platform Web Wizard](https://new.platform.uno/) in your browser to make configuration easier and get the appropriate `dotnet new` command. Alternatively, you can always view all possible options via `dotnet new unoapp --help` in the terminal!
75+
2. Open a terminal and navigate to the desired directory.
76+
3. With the following command, you get the minimum configuration to create a new app for the [**Xaml Navigation App Tutorial**](./Navigation/Extensions-Navigation-en.md):
77+
78+
```bash
79+
dotnet new unoapp -o XamlNavigationApp -preset "recommended" -platforms "desktop" -config False -http "none" -loc False -dsp False -theme-service False
80+
```
81+
82+
Alternatively, if you want to use all the options shown in the video, you can use the following command:
83+
84+
```bash
85+
dotnet new unoapp -o XamlNavigationApp -preset "recommended" -platforms "desktop" -http "none"
86+
```
87+
88+
---

‎doc/articles/en/HowTo-Setup-DevelopmentEnvironment-en.md‎

Lines changed: 70 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,84 @@
11
---
2-
uid: DevTKSS.Setup.DevelopmentEnvironment.en
2+
uid: DevTKSS.Uno.Setup.DevelopmentEnvironment.en
33
---
4+
<!--markdownlint-disable MD028 MD041-->
5+
## How To: Set Up Your Development Environment for Uno Platform Apps
46

5-
# How To: Setup your Development Environment for Uno Apps
7+
In the following, we will look together at how to easily set up the development environment for application development with Uno Platform, or rather, how the Command Line Interface (**CLI**) tool `dotnet tool uno-check` can take care of this routine task for us.
68

7-
To setup your Development Environment for Uno Apps, please make sure, to follow the [Quick Start Guide](https://platform.uno/docs/articles/get-started.html) provided by Uno Platform which will include:
9+
> [!TIP]
10+
> Since the v6 release of Uno (SDK & Extension), this is already included in the Visual Studio Uno Platform extension from the start!
811
9-
- Download latest dotnet
10-
- Install your desired IDE
12+
> [!TIP]
13+
> If you have problems running the tool, you can find the associated [Official Guide to Uno-Check from Uno Platform](https://platform.uno/docs/articles/external/uno.check/doc/using-uno-check.html) here.
1114
12-
> [!NOTE]
13-
> I will use Visual Studio 2022 Community Edition for the Guides described in here.
15+
### Video Tutorial
1416

15-
- Get the Uno Extension from the Visual Studio Marketplace
16-
- Install Uno.Check via your Commandline: `dotnet tool install -g Uno.Check`
17-
- Run `uno-check` which will suggest you to get or fix missing Workloads for you, to ensure a smooth start unto development every day.
17+
> [!NOTE]
18+
> This video is currently only available in German, but transcriptions have been added to the video description, which should be usable through YouTube's auto-translate feature. You can also enable auto-translated subtitles in YouTube to follow along in your preferred language.
1819
19-
> [!NOTE]
20-
> There are configurations available to be applied onto the uno-check command. You can research them in the [Uno.Check Documentation](https://platform.uno/docs/articles/external/uno.check/doc/configuring-uno-check.html) or get them in your Commandline by typing `uno-check -h`
20+
![How To: Einrichten unserer Uno Platform Entwicklungsumgebung](https://youtu.be/oI6IZVOeQBI)
2121

22-
- In case, you run in Problems while this, make sure to check out the [Troubleshooting](https://platform.uno/docs/articles/external/uno.check/doc/troubleshooting-uno-check.html)
22+
> [!NOTE]
23+
> The most up-to-date guide for getting started with Uno Platform can always be found in the official [Quick Start Guide](https://platform.uno/docs/articles/get-started.html).
2324
24-
All done? Great!
25+
---
26+
27+
### Step-by-Step Setup Guide
28+
29+
1. **Choose and install your preferred IDE**
30+
31+
> [!NOTE]
32+
> This guide uses Visual Studio 2022 Community Edition. If you work with Rider or Visual Studio Code, please refer to the previously linked Quick Start Guide for any differences!
33+
34+
[Official Visual Studio Installation Page - also VS Code](https://visualstudio.microsoft.com)
35+
36+
**IDE**: Integrated Development Environment
37+
38+
2. **Install the Uno Platform Extension**
39+
40+
Available in the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=nventive.unoplatform)
41+
42+
3. **Install `Uno.Check` via the Command Line**
43+
44+
```bash
45+
dotnet tool install -g Uno.Check
46+
```
47+
48+
4. **Run `Uno.Check` to verify your environment**
49+
50+
Either via the terminal you used before:
2551

26-
I recommend you to do at least the [Counter Workshop](https://platform.uno/docs/articles/getting-started/counterapp/get-started-counter.html) to get a base understanding of:
52+
```bash
53+
uno-check
54+
```
2755

28-
- Application Structure
29-
- Assets (Images/Icons) handling with Uno.Resizetizer
30-
- Commands and Bindings
56+
Or as mentioned earlier, since version 6 of the Visual Studio Extension from Uno Platform, we can already use `Uno.Check` automatically there in our IDE. So whenever we open our solution, it runs automatically, or we can also trigger it manually in the Extensions drop-down menu in Visual Studio > Uno Platform > `Run Uno.Check`. It then checks which target devices we have specified in our project file and verifies all the necessary installations for existence, but also whether we are working with the latest available versions. This is especially helpful when bug fixes have taken place and of course also when there was a new major release.
3157

32-
> [!TIP]
33-
> Depending on the targeted Tutorial you would like to do in here, you should coose the appropriate kind of the workshop, as it is letting you choose between XAML or C# for Markup and MVVM or MVUX as Presentation / Application Structure.
58+
![Find the Uno Extensions Menu in Visual Studio](../.attachments/Finding-Uno-VS2022-Extension-Menu-de.png)
3459

35-
See you soon in the nested Tutorials here!
60+
### Configuration Options for Uno Check
61+
62+
If you only want to develop your applications for specific `targets`, i.e. target devices, and therefore don't need all other workloads, for example for the [XamlNavigation Tutorial](./Navigation/Extensions-Navigation-en.md)
63+
64+
> [!TIP]
65+
> To get an overview of the available commands, configurations and optional associated parameters, you can type `uno-check -h` in the terminal.
66+
67+
> [!NOTE]
68+
> You can find more information about configuration options in the [Uno.Check Documentation](https://platform.uno/docs/articles/external/uno.check/doc/configuring-uno-check.html)!
69+
70+
### **Problems During Setup?**
71+
72+
Check out the [Troubleshooting Guide](https://platform.uno/docs/articles/external/uno.check/doc/troubleshooting-uno-check.html).
73+
74+
---
75+
76+
### Next Steps
77+
78+
Once your environment is set up, in addition to the tutorials here, you can also start with the [Counter Workshop](https://platform.uno/docs/articles/getting-started/counterapp/get-started-counter.html) and learn these basics:
79+
80+
- The structure of an Uno app
81+
- Handling assets (images/icons) via **`Uno.Resizetizer`**
82+
- Using commands and bindings
83+
84+
---

‎doc/articles/en/HowTo-Using-DI-in-ctor-en.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
uid: DevTKSS.Uno.Setup.Using-DI-in-ctor.en
3+
---
4+
## Guide: Use Constructor Parameters for Dependency Injection
5+
6+
This guide assumes you've already created a Model, ViewModel, or a service class. If not, here's a quick guide to do that: (xref:DevTKSS.Uno.Setup.HowTo-AddingNew-VM-Class-Record.en)
7+
8+
To use Dependency Injection in your Model, ViewModel, or any class, simply add the required (ideally) interfaces and/or service classes as constructor parameters. The DI container will provide them at runtime.
9+
10+
## [In MVUX](#tab/model-with-di-params)
11+
12+
![Adding-DI-parameters-via-constructor-MVUX](../.attachments/Adding-mvux-model-constructor-DI.png)
13+
14+
## [In MVVM](#tab/viewmodel-with-di-params)
15+
16+
![Adding-DI-parameters-via-constructor-MVVM](../.attachments/Adding-mvvm-viewmodel-constructor-DI.png)
17+
18+
## [Other classes or services](#tab/classes-with-di-params)
19+
20+
![Adding-DI-parameters-via-constructor-Classes](../.attachments/Adding-service-constructor-DI.png)
21+
22+
---

‎doc/articles/en/Introduction-en.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,4 @@ To give you a quick overview of this Documentation, here is a List of quick link
2323

2424
## Next Steps
2525

26-
- [How To: Setup Development Environment for Uno Platform App Development](xref:DevTKSS.Setup.DevelopmentEnvironment.en)
26+
- [How To: Setup Development Environment for Uno Platform App Development](xref:DevTKSS.Uno.Setup.DevelopmentEnvironment.en)

0 commit comments

Comments
 (0)