캔버스앱 소스 2 - 캔버스 앱 패키지 파일 구성 1_Src폴더 구성

캔버스앱 소스 2 - 캔버스 앱 패키지 파일 구성 1_Src폴더 구성

Power Apps의 캔버스 앱을 이용하다보면 여러 컨트롤을 한번의 속성값을 변경하고 싶은 경우가 있을 것이다. 하지만 Power Apps Studio에서는 컨트롤을 한꺼번에 선택할 수 없는 경우에는 일일히 컨트롤을 선택해서 변경해야하는 불편함이 남아있다. 이런 불편함을 해결하기 위해 현재 코드를 직접 변경할 수 있도록 Power Apps CLI에서 제공하고 있다. 이번에는 캔버스 앱 패키지 파일 구성에 대해 알아본다. 사전 준비에 대해서는 다음을 참고한다. 캔버스앱 소스코드 관리 1 - 사용준비

Canvas App 패키지 파일 해제

여기서는 VSCode를 기준으로 설명한다.

1. VSCode를 실행하여 폴더위치(Ctrl + K, Ctrl + O)를 Canvas App 패키지 파일 .msapp 가 있는 위치를 설정한다.
2. VSCode 터미널에 Pac 명령어로 캔버스 앱의 패키지를 분리한다.
   pac canvas unpack --msapp {패키지파일이름}.msapp --sources {폴더명}.
   만약 패키지 파일 이름이 FirstApps 이고 폴더명이 FirstAppFolder라면 다음과 같다.
   pac canvas unpack --msapp FirstApps.msapp --sources .\FirstAppFolder\
3. 새로이 생성된 폴더에서 파일들을 확인한다.

Src 폴더

Src 폴더안에는 제어파일과 구성요소, 소스파일로 구성되어있다.

Canvas App 파일 구성 - Src\App.fx.yaml

앱의 소스파일이다. Theams.json 등의 *.json 파일에는 컨트롤에서 기본값이 아닌 값들을 입력하는데 사용한다.

1. App.fx.yaml : App에 설정한 속성값 정보가 포함되어 있다. 예를 들어 'OnStart'에 Set(Val,1); 이라는 수식을 입력하였다면 다음과 같이 나오게 될 것이다.

#App의 정의와 속성 입력

App As appinfo:
    BackEnabled: =false
    OnStart: =Set(Val,1);

2. 첫줄에는 App As appinfo: 로 시작하며 아래줄 추가 들여쓰기 후에는 속성값들이 설정되는 것을 확인 가능하다.(이후 들여쓰기가 추가되는 것을 하위 수준이라 한다.) 이때 사용자가 직접 지정한 속성값만이 보여지게 된다. 속성값을 설정시에는 {속성}: ={값} 형태로 입력된다.
3. 이 파일에서 지정하지 않은 속성값은 기본값으로 대체된다.

Canvas App 파일 구성 - Screen1.fx.yaml

1. Screen1.fx.yaml : Screen1은 스크린의 이름으로 설정한 값에 따라 다르고 파일의 개수는 생성한 스크린의 개수만큼 늘어난다(만약 Scrren2, Screen3 가 있다면 Screen2.fx.yaml, Screen3.fx.yaml 파일이 생성).
2. 각 스크린에 설정한 속성값 정보가 포함되어 있다. 만약 Screen1에 이미지와 같이 컨테이너 안에 3개의 버튼 컨트롤이 있다고 한다면(이때 컨트롤의 속성값은 설정하지 않는다.)
   
   
   
   
   파일을 열어 확인해보면 다음과 같을 것이다.

#Scrren1의 스크린 정의
Screen1 As screen:

    #Container1 정의(가로형 컨테이너)
    Container1 As groupContainer.horizontalAutoLayoutContainer:
        BorderThickness: =3
        Height: =279
        LayoutMode: =LayoutMode.Auto
        Width: =1233
        X: =40
        Y: =40
        ZIndex: =1

        #Button1 정의
        Button1 As button:
            Text: ="단추"
            ZIndex: =1

        #Button2 정의
        Button2 As button:
            Text: ="단추"
            ZIndex: =2

        #Button3 정의
        Button3 As button:
            Text: ="단추"
            ZIndex: =3

3. 우선 첫째줄에는 Screen1 As screen: 적혀있는것을 확인 가능하다. 스크린을 정의하는데 방식은 {스크린이름} As screen 형태로 입력되며 As 앞에는 이름 뒤에는 screen 이라고 표기된다. 만약 스크린 이름이 Screen2라면 Screen2 As screen:으로 표기된다.
4. 스크린의 속성을 직접 설정한다면 스크린 정의 바로 하위수준에 입력된다. 이때 형식은 {속성}: ={값}이다. 만약 OnVisible속성에 Set(Screen1Val,"스크린1") 이라고 입력한다면 아래와 같다.

Screen1 As screen:
    OnVisible: =Set(Screen1Val,"스크린1")

5. 스크린 안의 컨트롤의 정의는 {컨트롤 이름} As {컨트롤종류}: 를 사용한다. 이때 위치는 스크린의 속성선언 수준과 같다
6. 컨트롤의 속성을 선언시에는 컨트롤의 정의 하위수준에서 입력된다. 이때 형식은 {속성}: ={값}이다. 컨트롤을 적당히 위치시켰다면 Width,Height,X,Y,Z이 설정되어 있을것인데 아래와 같은 형태가 된다.

#Scrren1의 스크린 정의
Screen1 As screen:

    #Container1 정의(가로형 컨테이너)
    Container1 As groupContainer.horizontalAutoLayoutContainer:
        Height: =279
        LayoutMode: =LayoutMode.Auto
        Width: =1233
        X: =40
        Y: =40
        ZIndex: =1

7. 만약 컨테이터 컨트롤 같은 컨트롤들을 묶는 역할을 하는 컨트롤 안에 포함하는 것들은 속성 선언 후 다음줄에 이어서 컨트롤을 선언하고 속성을 지정한다.

#Scrren1의 스크린 정의
Screen1 As screen:

    #Container1 정의(가로형 컨테이너)
    Container1 As groupContainer.horizontalAutoLayoutContainer:
        BorderThickness: =3
        Height: =279
        LayoutMode: =LayoutMode.Auto
        Width: =1233
        X: =40
        Y: =40
        ZIndex: =1

        #Container1에 속한 컨트롤들을 정의
        #Button1 정의
        Button1 As button:
            Text: ="단추"
            ZIndex: =1

        #Button2 정의
        Button2 As button:
            Text: ="단추"
            ZIndex: =2

        #Button3 정의
        Button3 As button:
            Text: ="단추"
            ZIndex: =3

1. 여기까지가 Yaml 파일의 형식에 대해 알아봤다. Power FxYAML 형식으로 코드들이 이루어져 있는것을 확인가능한데 Power Apps Studio 편집창에서는 확일할 수 없었던 선언형식까지 확인 가능하다. 주의해야할점은 YAML 형식이기에 주석에 해당하는 # 사용에는 주의해야한다.

Canvas App 파일 구성 - CanvasManifest.json

캔버스 앱의 매니페스트를 구성한다. 헤더, 속성, PublishInfo(게시설정) 등을 포함한다. 매니페스트 파일을 직접 변경하여 작업하는 것보다는 Power Apps 포털에서 변경하는 것이 더 편하고 안전할것이다.(Power Apps Studio의 편집창의 설정) 하지만 몇가지는 알고 넘어가자

1. 앱 프로젝트파일명 : Properties -> Name 프로젝트를 다른 이름으로 저장하거나 할시 변경하면 된다. .msapp은 변경하지 말아야 된다.
2. 앱의 가로크기 : Properties -> DocumentLayoutWidth 해당 속성에서 앱의 가로크기를 지정하다.
3. 앱의 가로크기 : Properties -> DocumentLayoutHeight 해당 속성에서 앱의 세로크기를 지정한다.
4. 앱의 게시 설정 : PublishInfo 하위 값에는 앱 게시시의 앱의 이름, 기본 배경색,아이콘 정보 등이 구성되어 있다.
5. Screen순서 : ScreenOrder에서 Screen의 트리뷰 순서를 설정 가능하다.

Canvas App 파일 구성 - *.json

컨트롤의들의 기본값 상태의 정보를 갖는다. 기본적으로 제공하는 파일은 Theams.json 이 있으며 Src*.json 파일에서 선언하는 컨트롤은 해당파일에 저장된 정보를 가져온 후 추가로 가공하는 가정을 갖게된다.

1. 모든 컨트롤들을 살펴볼 수 없으니 단추(버튼) 컨트롤만 살펴본다. 아래는 기본 버튼에 대한 내용이다.

{
    "controlTemplateName": "button",
    "name": "defaultButtonStyle",
    "propertyValuesMap": [
    {
        "property": "Color",
        "value": "%Palette.TextMainColorInverted%"
    },
    {
        "property": "Fill",
        "value": "%Palette.PrimaryColor1%"
    },
    {
        "property": "Font",
        "value": "%Palette.TextBodyFontFace%"
    },
    {
        "property": "FontWeight",
        "value": "%Palette.TextEmphasisFontWeight%"
    },
    {
        "property": "DisabledBorderColor",
        "value": "%Palette.DisabledBorderColor%"
    },
    {
        "property": "DisabledColor",
        "value": "%Palette.DisabledTextMainColor%"
    },
    {
        "property": "DisabledFill",
        "value": "%Palette.DisabledInputBkgColor%"
    },
    {
        "property": "Size",
        "value": "%Palette.TextEmphasisFontSize%"
    },
    {
        "property": "HoverColor",
        "value": "%Palette.TextMainColorInverted%"
    },
    {
        "property": "HoverFill",
        "value": "%Palette.HoverButtonBkgColor%"
    },
    {
        "property": "BorderColor",
        "value": "ColorFade(Self.Fill, -15%)"
    },
    {
        "property": "RadiusTopLeft",
        "value": "10"
    },
    {
        "property": "RadiusBottomRight",
        "value": "10"
    },
    {
        "property": "RadiusTopRight",
        "value": "10"
    },
    {
        "property": "RadiusBottomLeft",
        "value": "10"
    },
    {
        "property": "PressedBorderColor",
        "value": "Self.Fill"
    },
    {
        "property": "HoverBorderColor",
        "value": "ColorFade(Self.BorderColor, 20%)"
    },
    {
        "property": "BorderStyle",
        "value": "%BorderStyle.RESERVED%.Solid"
    },
    {
        "property": "BorderThickness",
        "value": "2"
    },
    {
        "property": "FocusedBorderThickness",
        "value": "4"
    },
    {
        "property": "PressedColor",
        "value": "Self.Fill"
    },
    {
        "property": "PressedFill",
        "value": "Self.Color"
    },
    {
        "property": "Italic",
        "value": "false"
    },
    {
        "property": "Underline",
        "value": "false"
    },
    {
        "property": "Strikethrough",
        "value": "false"
    },
    {
        "property": "Align",
        "value": "%Align.RESERVED%.Center"
    },
    {
        "property": "VerticalAlign",
        "value": "%VerticalAlign.RESERVED%.Middle"
    }
    ]
}

2. 살펴보면 대부분이 변수로 이루어져 있지만 몇개의 속성값은 숫자, Bool 값으로 설정되어 있어 확인이 가능하다. Power Apps Studio 편집창에서 Button을 만들어 비교해보자.
   
   
   
3. 해당 파일의 값을 변경하면 새로 생성하거나 기존 컨트롤들의 설정하지 않은 기본값을 설정 가능하다.

Canvas App 파일 구성 - \EditorState\*.editorstate.json

Power Apps Studio에서 사용할 캐시파일들이다. 캐시 파일이라 안의 내용을 전부 지워버려도 상관은 없다.(패키지 후 Power Apps Studio에서 열면 다시 내용이 작성된다.) Git 등의 소스코드로 관리할시에는 해당 내용을 제외하는것을 고려해보자