Hello World App을 만들어보자

Raspberry Pi와 Windows 10 IoT core를 이용해서 가장 간단한 실습해보려고 한다. 버튼과 Text를 이용해서 이름을 입력하고 버튼을 클릭하면 미리 등록한 인사말을 화면에 뿌리는 것인데, app 형태로 Raspberry pi에 올려서 실행하며 C# Project 이용할 것이다.

우선 C# Project를 생성해야 한다. 생성하려면 우선  Windodws IoT Core Template는 설치해야하는데 메뉴 > 도구 > 확장 및 업데이트에서 찾을 수 있다.

설치가 됬는지 확인해 본다.

오늘 만들어 볼 App은 Hello World 출력하는 것이므로 Visual C#으로 Blank App을 하나 만들어야 한다.

이제 먼가 만들어질 줄 알았는데! 아래와 같은 팝업이 뜬다.

팝업에서 개발자 설정 링크를 클릭해서 개발자 모드를 설정시켜준다.

비어 있는 앱은 최소한의 템플릿이지만 다음과 같은 많은 파일이 포함되어 있다. 그리고 템플릿을 구성하는 파일들은 아래와 같다.

• 이름, 설명, 타일, 시작 페이지 등 앱에 대한 설명과 앱에 포함된 파일의 목록이 수록되어 있는 매니페스트 파일(Package.appxmanifest)
• 시작 메뉴에 표시되는 로고 이미지 집합(Assets/Square150x150Logo.scale-200.png, Assets/Square44x44Logo.scale-200.png 및 Assets/Wide310x150Logo.scale-200.png)
• Windows 스토어에서 해당 앱을 나타낼 이미지(Assets/StoreLogo.png)
• 앱 시작 시 표시되는 시작 화면(Assets/SplashScreen.scale-200.png)
• 앱의 XAML 및 코드 파일(App.xaml 및 App.xaml.cs)
• 앱 시작 시 실행되는 시작 페이지(MainPage.xaml) 및 관련 코드 파일(MainPage.xaml.cs)

개발자 모드 설정이 설정 되었다면 기본 template code들이 위와 같이 보일 것이다. xaml 파일을 수정해서 build 후 실행하면 기본 코드 자동생기니 일단 xaml.cs의 코드들을 그냥 둔다.

하지만 여기서 한가지 더해야하는게 Windows IoT Extension SDK를 추가해주어야 한다. 왜냐면 현재 Visual Studio는 Windows IoT Extension SDK가 기본이 아니기 때문이며 IoT Project를 하기 때문에 이에 맞는 SDK를 써야한다.. 

오른쪽 솔루션 탐색기에서 프로젝트를 오른쪽 마우스 버튼으로 눌러서 팝업메뉴가 뜨면 추가로 참조를 선택해준다.

그리고 Universal Windows의 확장을 보면 Windows IoT Extensions for the UWP 라고 있고 선택해준다.

여기까지 마치고 MainPage.xaml을 클릭해보면 정상적으로 Test 박스하나가 보일것이다.

이제 원하는 형태의 Text 와 Button을 만들기 위해 Layout을 수정해준다.

파일에 포함된 항목

프로젝트의 파일을 보고 편집하려면 솔루션 탐색기에서 해당 파일을 두 번 클릭한다. 기본적으로 폴더와 같이 XAML 파일을 확장하여 관련 코드 파일을 볼 수 있는데 XAML 파일은 디자인 화면과 XAML 편집기가 모두 표시되는 분할 보기로 열리게 된다..

수정 파일은 App.xaml, MainPage.xaml 및 MainPage.xaml.cs 이다.

App.xaml 및 App.xaml.cs

App.xaml은 앱 전체에서 사용되는 리소스를 선언하는 파일이다.. App.xaml.cs는 App.xaml의 코드 숨김 파일로 코드 숨김은 XAML 페이지의 partial 클래스에 조인되는 코드이다. XAML은 코드 숨김과 함께 완전한 클래스를 만드는데. App.xaml.cs는 앱의 진입점이다. 모든 코드 숨김 페이지와 같이 여기에는 InitializeComponent 메서드를 호출하는 생성자가 포함되어 있다. InitializeComponent 메서드는 작성하지 않는다 이 메서드는 Visual Studio에서 생성되며 그 주요 목적은 XAML 파일에 선언된 요소를 초기화하는 것이다. App.xaml.cs에는 앱의 활성화와 일시 중단을 처리하는 메서드도 포함되어 있다.

MainPage.xaml

MainPage.xaml에서는 앱의 UI를 정의한다. XAML 마크업을 사용하여 직접 요소를 추가하거나 Visual Studio에서 제공하는 디자인 도구를 사용할 수 있다. MainPage.xaml.cs는 MainPage.xaml의 코드 숨김 페이지로 여기에서 앱 논리와 이벤트 처리기를 추가한다. 이러한 두 파일은 HelloWorld 네임스페이스의 Page에서 상속되는 MainPage(이)라는 새 클래스를 함께 정의한다.

XAML

<Page
    x:Class="HelloWorld.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HelloWorld"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        
    </Grid>
</Page>

Grid 사이에, Text box와 button을 추가한다.

<StackPanel x:Name="contentPanel" Margin="8,32,0,0">

    <TextBlock Text="Hello, world!" Margin="0,0,0,40"/>
    <TextBlock Text="What's your name?"/>
    <StackPanel x:Name="inputPanel" Orientation="Horizontal" Margin="0,20,0,20">
        <TextBox x:Name="nameInput" Width="280" HorizontalAlignment="Left"/>
        <Button x:Name="inputButton" Content="Say &quot;Hello&quot;"/>
    </StackPanel>
    <TextBlock x:Name="greetingOutput"/>
</StackPanel>

이렇게 xaml 파일 수정을 해서 TextBox와 Button을 추가했지만, Button을 눌렀을때 먼가 이벤트가 발생시키게 하고싶다. 그래서 이벤트 처리기를 추가할 건데 XAML 또는 디자인 뷰에서 MainPage.xaml 에 추가한 Button을 클릭한다. 그리고 Button_Click을 입력한다. 그리고 XAML 코드에서 Button_Click에 대한 이벤트를 추가해준다.

<Button x:Name="inputButton" Content="Say &quot;Hello&quot;" Click="Button_Click"/>

그리고 나서 xaml.cs 파일에서 Button_Click에 대한 이벤트 처리기 코드를 추가한다.

private void Button_Click(object sender, RoutedEventArgs e)
{
    greetingOutput.Text = "Hello, " + nameInput.Text + "!";
}

또 세로로 길죽한 스타일로 나오게 하기위해서 VisualStateManager를 추가하고 다양한 시각적 상태에 적용되는 속성을 설정하는데 이는 다양한 UI에 맞게 유연하게 수정하도록 한다. 그리고 이는 Grid 여는 태그 뒤에 추가해주어야 한다. 관련된 내용은 다른 글에서 상세하게 다룰 예정이다.

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="wideState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="641" />
            </VisualState.StateTriggers>
        </VisualState>
        <VisualState x:Name="narrowState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="inputPanel.Orientation" Value="Vertical"/>
                <Setter Target="inputButton.Margin" Value="0,4,0,0"/>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup> 

</VisualStateManager.VisualStateGroups>

우선 모바일 장치 에뮬레이터로 설정하고 빌드 및 실행해본다. 자기 PC에 맞게 선택하고 녹색 삼각형 버튼을 눌러주면 빌드 및 실행이된다.

Browser에서 실행되며 Ted라고 입력하고 Say "Hello" 버튼을 누르니 Hello, Ted!가 출력된 모습을 볼수 있다.

이제 이 App을 Windows Browser 에 실행할게 아니라 Raspberry에 설치해서 실행해보자.

PC에서 실행할 때와 달리, Target을 ARM으로 설정하고(Raspberry는 ARM 이니까!), 원격 컴퓨터로 설정시 최초 설정이면 우선 연결속성창이 뜰텐데 만약 안뜬다면 메뉴>프로젝트>"Hello World" 속성 을 클릭하고 찾기를 눌러준다.

Raspberry가 같은 망에서 IP 가 설정(Manual 이든 DHCP 이든) 되어 있다면 자동 감지될 것이다. 지금 그리은 자동 감지 되지 않은 모습이다.

감지되면 아래와 같이 창에서 자동감지된다.

선택을하고 녹색버튼을 눌러 빌드 및 실행이 되도록 기다린다. 실제 UWP로 만든 App이 Raspberry에 설치되는 과정이므로 시간이 비교적 걸린다.

App이 실행되는 동안 Visual Studio에서 출력창은 아래와 같이 나오고 정상적으로 설치되었다면 Raspberry 와 연결된 모니터에서 PC에서 실행시켰던 App이 실행될 것이다.

자~ 잘 설치되었고, USB Keyboard가 없는지라 USB Mouse를 연결해서 Say "Hello"를 클릭하니 Click 이벤트가 호출되어 Hello라는 메시지가 찍혀있다.

간단할 줄 알았던 첫 예제는 마치고 다음 예제를 기다려보자.