기능 개요

기능 개요

Uno 프로젝트 (.unoproj)

우노(Uno)는 C#과 유사하며, iOS 및 안드로이드용 네이티브 앱을 생성할 수 있도록 지원합니다. 퓨즈 프로젝트는 사실상 퓨즈 라이브러리를 이용하는 우노 프로젝트이며, 퓨즈 라이브러리 또한 우노로 작성되어 있습니다.

우노 프로젝트 파일은 JSON 포맷이며 기본 구조는 아래와 같습니다.
간단하게 개발과 빌드를 위한 환경 설정이라고 이해하면 됩니다.

1
2
3
4
5
6
7
8
9
{
    "Packages": [
        "Fuse",
        "FuseJS"
    ],
    "Includes": [
        "*"
    ]
}

세부 항목들을 살펴보죠.

Packages

Packages 배열은 참조할 수 있는 모듈들을 가져오는 섹션입니다. 위에서는 Fuse와 FuseJS를 추가했네요. 그러면 프로젝트 내에서 위 모듈들을 사용할 수 있게 됩니다.

Macros

“Version”, “iOS”, “Android”와 같은 앱의 속성들을 추가할 수 있습니다. 예를 들면, iOS 앱의 ‘.plist’ 내용들을 설정하려면 아래와 같이 입력합니다.

1
2
3
4
5
6
7
{
    "iOS": {
        "PList": {
            "UIApplicationExitsOnSuspend": false
        }
    }
}

설정값들을 자세히 알고 싶다면 아래 URL로 이동하세요.
https://www.fusetools.com/docs/basics/uno-projects#all-properties

App 태그

UI 객체 중 최상위 객체이며, 프로젝트에 하나만 존재해야 합니다. 퓨즈는 App 태그를 자동으로 찾기 때문에 따로 명시해 줄 필요는 없습니다.

1
2
3
<App>
    <Text>Hello, world!</Text>
</App>

컴포넌트 (Components)

Text, Rectangle, Video, Slider, Grid, DockPanel 등의 컨트롤들을 지칭합니다. UX 마크업의 각 노드라고 생각할 수 있습니다.

스크립트와 데이터 컨텍스트 (Scripting and data contexts)

자바스크립트(JavaScript) 노드에 module.exports를 사용하면 자신의 노드 레벨과 하위 노드에서 참조할 수 있는 데이터 컨텍스트가 생성됩니다. 하위 노드에서는 이 컨텍스트를 바인딩이라는 기법으로 참조할 수 있는데요. {변수}와 같이 대괄호를 이용합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<App>
    <StackPanel>
        <Each Items="{items}">
            <Panel Color="{color}" Height="40" Margin="10">
                <JavaScript>
                    console.log("hello?");
                </JavaScript>
            </Panel>
        </Each>
    </StackPanel>
    <StackPanel>
        <JavaScript>
            console.log("Hello, World!");

            module.exports = {
                items: [
                    { color: "#f00" },
                    { color: "#0f0" },
                    { color: "#00f" }
                ]
            }
        </JavaScript>
        <Each Items="{items}">
            <Panel Color="{color}" Height="40" Margin="10">
                <JavaScript>
                    console.log("hello!");
                </JavaScript>
            </Panel>
        </Each>
    </StackPanel>
</App>
1
2
3
4
5
결과 >>
LOG: Hello, World!
LOG: hello!
LOG: hello!
LOG: hello!

위 코드의 결과와 같이 hello?는 호출되지 않습니다. 데이터 컨텍스트는 자신의 노드 레벨 이하에서만 참조가 가능하기 때문이죠.

새로운 컴포넌트 생성하기 (ux:Class)

컴포넌트 노드에 ux:Class 어트리뷰트를 추가하면 새로운 컴포넌트를 만들 수 있습니다. 상속을 받는다고 생각하면 됩니다.

스타일링 (Styling)

아래와 같이 HeaderText라는 새로운 컴포넌트를 생성할 수 있습니다.

1
2
3
<Text ux:Class="HeaderText" FontSize="36" Color="#88f">
    <DropShadow Size="5" Angle="120" />
</Text>

이제부터는 HeaderText라는 컴포넌트를 이용할 수 있고 위에서 입력한 속성들이 기본으로 적용됩니다. 이렇게 하면 동일한 스타일의 텍스트들을 한번에 수정할 수 있습니다.

1
<HeaderText>This is a header</HeaderText>

컴포넌트 (Components)

스타일 뿐만 아니라 내부에 컨트롤들을 포함하는 컴포넌트도 만들 수 있습니다. 또한, 커스텀 속성도 지정이 가능하고요.

아래와 같이 작성하면 MyText라는 속성이 새롭게 추가됩니다.

1
2
3
4
5
<Panel ux:Class="MyButton">
    <string ux:Property="MyText" />
    <Text Value="{Property this.MyText}" />
    <Rectangle CornerRadius="5" Color="#ccf" />
</Panel>

이제 아래와 같이 새로운 컴포넌트와 속성을 사용할 수 있습니다.

1
<MyButton MyText="Submit" Clicked="{doSomething}" />

네비게이션 (Navigation)

여러개로 구성된 페이지를 탭이나 스와이프 등의 제스쳐로 이동하도록 만들 수 있습니다. 또한 Router 객체를 이용하면 이전, 다음으로 이동할 수도 있고요.

아래 코드를 작성하고 실행하면 스와이프로 페이징을 할 수 있는 앱이 만들어 집니다. 안드로이드라면 BACK 버튼을 터치해 보세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<App>
    <Router ux:Name="router" />
    <PageControl>
        <Page ux:Name="contacts">
            <Button Text="Contacts" />
        </Page>
        <Page ux:Name="newsfeed">
            <Button Text="News Feed" />
        </Page>
        <Page ux:Name="settings">
            <Button Text="Settings" />
        </Page>
    </PageControl>
</App>

여러개의 UX 파일로 나누기

프로젝트의 규모가 커지면 하나의 파일에 모든 내용을 작성하는 것보다 나눠서 작성하는게 더 효율적입니다. 그렇게 하면 여러명이 동시에 작업할 수도 있고요.

이해를 돕기 위해 위 네비게이션 코드를 여러개의 파일로 나눠보겠습니다.

1
2
3
4
5
6
7
8
<App>
    <Router ux:Name="router" />
    <PageControl>
        <ux:Include File="Contacts.ux" />
        <ux:Include File="NewsFeed.ux" />
        <ux:Include File="Settings.ux" />
    </PageControl>
</App>

1
2
3
<Page ux:Name="contacts">
    <Button Text="Contacts" />
</Page>

1
2
3
<Page ux:Name="newsfeed">
    <Button Text="News Feed" />
</Page>

1
2
3
<Page ux:Name="settings">
    <Button Text="Settings" />
</Page>

간단하네요. 이상으로 기능 개요를 마칩니다.

[[ 동영상 강좌(재생 목록 버튼을 누르세요) ]]

Was this article helpful?

Related Articles