cyphen156

MAUI#1 프로젝트 구조 뜯어보기 본문

크로스플랫폼 개발/MAUI

MAUI#1 프로젝트 구조 뜯어보기

cyphen156 2023. 12. 1. 16:51

자세한 설명은 다음 페이지를 확인하세요

.NET MAUI 앱에 시각적 개체 컨트롤 추가 - Training | Microsoft Learn

 

.NET MAUI 앱에 시각적 개체 컨트롤 추가 - Training

.NET MAUI 페이지에 컨트롤을 배치하고 이벤트에 응답하는 방법을 알아보세요.

learn.microsoft.com

프로젝트 생성정도는 이제 알아서 잘 할 것이라고 믿는다.

우선 프로젝트를 생성하면 다음과 같은 프로젝트 구조가 보인다.

1. MAUI를 통해 크로스 플랫폼 개발을 하기 위한 메인 코드 영역

2. 플랫폼별로 최적화 하기 위한 별도의 코드 영역

3. 디버깅 실행환경을 선택할 수 있는 부분, 가상머신을 설치해야한다.

그리고 나서 WINDOWS MACHINE을 디버그 도구로 사용하면 다음과 같은 화면이 빌드된다.

 

이제부터 할 일은 화면에 배치된 컴포넌트들이 실제로 어디에 있는지를 찾아낼 것이다.

App.xanl.cs

프로그램의 시작을 알리는 핵심 코드파일이다.

App.xaml파일과 연결되어 전체 프로젝트에 대한 사전 설정을 제어하고,  화면 구성에 필요한 리소스들을 불러올 수 있다. 또한 앱 생명주기를 컨트롤한다.

namespace MAUIEX
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new AppShell();
        }
    }
}

다음 코드들을 통해 애플리케이션 생명 주기를 컨트롤한다.

protected override void OnStart()
    {
        base.OnStart();
    }

    protected override void OnResume()
    {
        base.OnResume();
    }

    protected override void OnSleep()
    {
        base.OnSleep();
    }

App.xaml

App.xaml.cs파일과 연결되어 실제로 리소스들을 불러올 경로와 같은 정보들을 표시한다.

<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MAUIEX"
             x:Class="MAUIEX.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

그림과 같은 방법으로 프로젝트 내에서 매핑된다.

그런데 매번 디버깅해서 생기는 가상 머신을 통해 화면하는것이 상당히 불편하다. 그랫 도구-미리보기 기능 관리에서 XAML 라이브 미리보기를 활성화 하면 코드를 수정하면서 UI를 점검할 수 있다.

MainPage.xaml

MainPage.xaml파일에 표시된 컴포넌트 구성이다.

여기에 컴포넌트들을 배치하여 UI를 구성한다.

애플리케이션을 ScrollView를 통해 구성했기 때문에 화면을 줄여보면 스크롤 바를 통해 화면을 제어할 수 있다.

그리고 화면 안의 컴포넌트들은 VerticalStack을 통해 레이아웃을 구성했기 때문에 수평 기준으로 순서대로 정렬된다.

<ContentPage>
    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25">
            <Image
                Source="dotnet_bot.png"
                HeightRequest="185"
                Aspect="AspectFit"
                SemanticProperties.Description="dot net bot in a race car number eight" />

            <Label
                Text="Hello, World!"
                Style="{StaticResource Headline}"
                SemanticProperties.HeadingLevel="Level1" />

            <Label
                Text="Welcome to &#10;.NET Multi-platform App UI"
                Style="{StaticResource SubHeadline}"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi platform App U I" />

            <Button
                x:Name="CounterBtn"
                Text="Click me" 
                SemanticProperties.Hint="Counts the number of times you click"
                Clicked="OnCounterClicked"
                HorizontalOptions="Fill" />
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

MainPage.xaml.cs

화면 UI와 연결된 스크립트 파일이다. 

이 파일을 통해 화면상에서 상호작용하는 이벤트의 프로그램 로직들을 처리한다.

Clicked = "OnCounterClicked" 이 문장에서 이벤트가 연결된다.

namespace MAUIEX
{
    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
                CounterBtn.Text = $"Clicked {count} times";

            SemanticScreenReader.Announce(CounterBtn.Text);
        }
    }

}

AppShell.xaml.

애플리케이션 화면스택 구조에 대한 정의 파일이다. JS에서의 app.js파일과 같이 최상위 컴포넌트에서 앱에서 사용되는 화면들에 대한 정보를 정의할 때 쓴다. 

아래 정보에 따르면 MainPage.xaml이라는 파일은 Home이라는 Title을 가지고 있고, Route경로는 MainPage이다.

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MAUIEX.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MAUIEX"
    Shell.FlyoutBehavior="Disabled"
    Title="MAUIEX">

    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage" />

</Shell>

여러모로 안드로이드 스튜디오를 통해 앱 개발했던 경험이 도움이 많이 된다.

MauiProgram.cs

MS의 설명에 따르면 다음과 같다고 한다.

더보기

MauiProgram.cs. 네이티브 플랫폼마다 애플리케이션을 만들고 초기화하는 다른 시작점이 있습니다. 프로젝트의 Platforms 폴더에서 이 코드를 찾을 수 있습니다. 이 코드는 플랫폼별 코드이지만 결국에는 정적 MauiProgram 클래스의 CreateMauiApp 메서드를 호출합니다. CreateMauiApp 메서드를 사용하여 앱 작성기 개체를 만들어 애플리케이션을 구성합니다. 최소한 애플리케이션을 설명하는 클래스를 지정해야 합니다. 앱 작성기 개체의 UseMauiApp 제네릭 메서드를 사용하여 이 작업을 수행합니다. 형식 매개 변수에서 애플리케이션 클래스를 지정합니다. 또한 앱 작성기는 글꼴 등록, 종속성 주입에 사용되는 서비스 구성, 컨트롤의 사용자 지정 처리기 등록 등과 같은 작업에 사용되는 메서드를 제공합니다. 다음 코드에서는 앱 작성기를 사용하여 글꼴을 등록하는 예를 보여줍니다.

솔직히 설명만 봐서는 잘 모르겠다. 각 프로그램 실행시 실행되고있는 이 앱이 어떤것인가? 에 대한 정보를 알려주는고 종속성을 관리하는 것 같다.

+++Platforms폴더 내부의 Android/MainApplication.cs파일을 보면 정확하게 알 수 있다.

개별적으로 빌드되기는 하지만 결국 애플리케이션 실행시 가장 먼저 호출되는 것이 MauiProgram.cs의 CreateMauiApp()app 메서드를 통해 애플리케이션을 실행한다.

        protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
using Android.App;
using Android.Runtime;

namespace MAUIEX
{
    [Application]
    public class MainApplication : MauiApplication
    {
        public MainApplication(IntPtr handle, JniHandleOwnership ownership)
            : base(handle, ownership)
        {
        }

        protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
    }
}

정리하자면 다음과 같다

  1. App.xaml.cs: 이 파일은 애플리케이션의 시작점으로, 전체 프로젝트의 설정과 초기화를 담당합니다. 앱의 생명주기 이벤트(OnStart, OnResume, OnSleep)를 관리하는 기능도 포함합니다.
  2. App.xaml: 이 파일은 App.xaml.cs와 연결되며, 애플리케이션에서 사용될 글로벌 리소스와 스타일을 정의합니다. 예를 들어, 색상, 스타일, 템플릿 등을 정의할 수 있습니다.
  3. MainPage.xaml: 사용자 인터페이스를 정의하는 파일로, XAML을 사용하여 UI 컴포넌트를 구성합니다. ScrollView와 VerticalStackLayout을 사용하여 사용자가 화면을 스크롤하고 내용을 보는 방식을 구현합니다.
  4. MainPage.xaml.cs: MainPage.xaml의 코드 뒤에 있는 C# 파일로, UI 컴포넌트에 대한 이벤트 핸들러와 로직을 구현합니다. 예를 들어, 버튼 클릭 이벤트를 처리하는 코드가 이 파일에 포함됩니다.
  5. AppShell.xaml: 애플리케이션의 네비게이션 구조와 라우팅을 정의하는 파일입니다. 이는 앱 내의 다른 페이지로의 이동을 관리합니다.

다음 글에서는 실제 프로젝트를 만들어 볼 것이다.

해당 글은 MS.DOCS를 참고하여 만들어졌습니다.

Visual Studio에 .NET MAUI 프로젝트 만들기 - Training | Microsoft Learn

 

Visual Studio에 .NET MAUI 프로젝트 만들기 - Training

Visual Studio에서 .NET MAUI 템플릿을 사용하여 새 .NET MAUI 앱을 만드는 방법을 학습합니다.

learn.microsoft.com

연습 코드는 다음 경로에 있습니다.

Workspace/C#/MAUIEX at main · cyphen156/Workspace (github.com)

 

 

 

 

저작자표시

'크로스플랫폼 개발 > MAUI' 카테고리의 다른 글

MAUI#2 두번째 화면 추가하기  (0) 2024.02.20
.NET MAUI 소개  (1) 2023.11.22
'크로스플랫폼 개발/MAUI' Related Articles more