퓨즈[Fusetools] 문서[Docs] 번역

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 퓨즈 기본
  4. 기능 개요

기능 개요

이 문서에서는 퓨즈의 고급 개념과 패턴에 대한 개요를 제공합니다. 각 주제에 대한 자세한 내용을 보려면 링크를 클릭하십시오.

우노 프로젝트 (.unoproj)

Uno 프로젝트 문서에서는 앱 프로젝트 구성, 참조 관리, 인클루드 및 번들링을 다루는 방법에 대해 설명합니다.

이 문서는 프로젝트에 App 태그를 포함하는 적어도 하나의 UX 마크업 파일을 포함하도록 구성되었다고 가정합니다.

App 태그

App 태그는 앱 트리의 루트입니다. 프로젝트의 UX 마크업 파일 중 하나에 App 태그가 있으면 프로젝트가 컴포넌트 라이브러리가 아닌 앱임을 나타냅니다.

퓨즈는 자동으로 프로젝트의 App 태그를 찾아 이를 루트 컴포넌트로 사용합니다. 프로젝트에는 하나의 앱 태그만 있을 수 있습니다.

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

컴포넌트

퓨즈에서 앱은 단순히 UX 마크업 컴포넌트의 트리입니다(Uno 클래스의 인스턴스).

기본 빌딩 블록은 텍스트, 사각형, 비디오, 슬라이더 또는 MapView와 같은 기본 요소입니다. StackPanel 및 Grid와 같은 계층적 레이아웃을 위한 패널을 사용하여 구성할 수 있습니다.

1
2
3
4
5
6
<App>
    <StackPanel>
        <Text>Hello, World!</Text>
        <Text>Hello again!</Text>
    </StackPanel>
</App>

앱의 루트 레벨에서 각 요소는 앱의 전체 수명 동안 한 번만 인스턴스화(생성) 됩니다. 그러나 각각의 특별한 UX 노드가 있으며 ux:Template과 같은 속성은 다중 인스턴스를 생성하고 적절한 경우 컴포넌트를 지연 생성 및 재사용 할 수 있습니다.

이 주제들에 대한 더 많은 정보는 Primitives, LayoutControl 챕터를 보세요.

스크립팅 및 데이터 컨텍스트

퓨즈 앱의 비즈니스 로직은 JavaScript 클래스와 같은 스크립트 컴포넌트를 사용하여 수행됩니다. 이것들은 앱 트리의 어느 레벨에나 배치할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<App>
    <JavaScript>
        console.log("Hello, World!");

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

스크립트는 포함하는 노드의 각 인스턴스에 대해 한 번만 실행됩니다. 위의 예에서 첫 번째 자바스크립트의 경우 전체 앱에 대해 한 번만 사용됩니다. 그러나 Each 안에 있는 JavaScript는 Panel의 각 인스턴스에 대해 한 번씩 실행됩니다. 위의 예에서 hello!는 콘솔에 세 번 기록됩니다.

각 스크립트의 결과는 module.exports는 하위 트리의 데이터 컨텍스트가 됩니다. 데이터 컨텍스트에 중괄호 {binding} 구문을 사용하여 데이터 바인딩을 사용하여 데이터로 뷰를 채울 수 있습니다.

데이터 컨텍스트 캐스케이드. 이는 모든 노드에서 외부 트리의 모든 데이터 컨텍스트에 액세스할 수 있음을 의미합니다. 이름이 충돌하면 트리에서 가장 가까운 것이 우선합니다.

이 주제에 대한 자세한 내용은 스크립팅 및 데이터 챕터를 참조하십시오.

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

UX 마크업은 기존 컴포넌트를 결합하여 새로운 고급 컴포넌트를 생성할 수 있는 조합형 언어입니다. UX 마크업 요소의 모든 트리는 ux:Class 속성을 사용하여 쉽게 컴포넌트로 변환될 수 있습니다. 이것은 여러 용도로 사용됩니다.

스타일링

일관된 룩앱필을 만들기 위해 퓨즈는 기본 속성 및 동작을 할당하기 위해 프리미티브의 하위 클래스를 만드는 데 의존합니다.

예를 들어 고정 텍스트 스타일을 제공하는 간단한 클래스(컴포넌트)는 다음과 같습니다:

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

다음과 같이 사용할 수 있습니다:

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

퓨즈는 CSS와 다른 구조를 가지고 있으며 스타일을 분리하지 않습니다. 그러나 퓨즈는 UX 마크업에서 정의된 시각적 사용자 경험과 비즈니스 로직(예: 자바 스크립트에서 정의 됨)을 구분하는 데 큰 도움을 줍니다.

재사용 가능한 컴포넌트

서브 클래스를 만드는 또 다른 중요한 사용 사례는 선택적으로 내부 로직, 공용 속성 및 이벤트를 사용하여 재사용 가능한 컴포넌트를 작성하는 것입니다.

또 다른 예로, 간단한 사용자 정의 버튼 컴포넌트가 있습니다:

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

그런 다음 다른 컴포넌트와 같이 프로젝트의 어느 위치에서나 사용할 수 있습니다:

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

이 아이템에 대한 자세한 내용은 컴포넌트 만들기를 참조하십시오.

Uno 코드를 통해 새로운 UX 컴포넌트를 만들 수도 있습니다. 자세한 내용은 Native Interop 챕터를 참조하십시오.

네비게이션(Navigation)

일반적인 앱은 사용자가 제스처를 사용하여 탐색하거나, 컨트롤을 탭하거나, 디바이스의 실제 Back 버튼을 사용하여 페이지를 구성합니다.

퓨즈 앱의 탐색은 일반적으로 App 태그 내부에 직접 배치되는 라우터 객체를 통해 제어됩니다. 이렇게 하면 지정된 이름을 사용하여 클래스 범위의 모든 노드에서 라우터를 사용할 수 있게 되고 라우터가 있는 디바이스의 실제 Back 버튼이 자동으로 연결됩니다.

1
2
3
<App>
    <Router ux:Name="router" />
</App>

라우터는 그 자체로 많은 것을 하지는 않습니다. 라우터는 실제 페이지를 포함하는 하위 트리에 있는 PageControl 및 Navigator와 같은 라우터 아울렛(router outlets)을 처리합니다. 그러면 라우터는 자바스크립트로 제어할 수 있습니다.

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

이 주제에 대한 자세한 내용은 네비게이션 챕터를 참조하십시오.

여러 개의 UX 파일로 분할하기

프로젝트가 커져감에 따라 우리는 일반적으로 앱을 여러 UX 마크업 파일로 분할하려고 합니다. 퓨즈에서 UX 마크업은 임의의 컴포넌트를 루트 노드로 사용하여 원하는 트리의 모든 레벨에서 수행할 수 있습니다. 그러나 자연스럽고 추천할만한 방법은 페이지별로 나누는 것입니다.

위의 예에서 각 페이지 태그를 적절한 이름의 별도 UX 파일로 만드는 것을 의미합니다. 우리가 이것을 할 수 있는 두 가지 방법이 있습니다:

ux:Include 사용 – 코드 포함하기

이것이 가장 쉬운 방법입니다. 다음과 같이 각 페이지를 별도의 파일에 붙여넣기만 하면 됩니다:

Contacts.ux:

1
2
3
<Page ux:Name="contacts">
    ...
</Page>

그리고 NewsFeed.ux와 Settings.ux도 비슷합니다. 그런 다음 앱 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>

이것은 우리에게 여러가지 텍스트 파일로 작업할 수 있게 해주면서 우리에게 동일한 비헤이비어를 제공합니다.

동일한 기법을 ux:Name 대신 ux:Template 속성이 있는 페이지 템플릿에 사용할 수 있습니다.

ux:Class 사용 – 페이지를 컴포넌트로 변환

UX 마크업 요소의 트리를 추출하는 더 강력한 방법은 격리된(다시 사용할 수 있는) 컴포넌트로 바꾸는 것입니다. 여기에는 컴포넌트가 종속성을 명시적으로 나타내야 하므로 코드가 조금 더 필요합니다. 또한 컴포넌트를 테스트, 유지 관리 및 재사용하기가 더 쉽다는 이점이 있습니다.

먼저 페이지 코드를 별도의 파일에 복사하고 ux:Name을 적절한 ux:Class 이름으로 대체합니다. 클래스의 첫 글자에는 대문자를 사용하는 것이 일반적입니다.

그런 다음 이 페이지의 종속성을 확인하고 선언해야 합니다. 라우터 또는 외부 범위에서 선언된 다른 개체에서 발생할 수 있습니다. 아래와 같이 ux:Dependency 속성을 사용하여 선언합니다.

ContactsPage.ux

1
2
3
4
<Page ux:Class="ContactsPage">
    <Router ux:Dependency="router" />
    ...
</Page>

그리고 NewsFeedPage.ux와 SettingsPage.ux도 비슷합니다. 그런 다음 App UX를 다음과 같이 변경합니다:

1
2
3
4
5
6
7
8
<App>
    <Router ux:Name="router" />
    <PageControl>
        <ContactsPage ux:Name="contacts" router="router" />
        <NewsFeedPage ux:Name="newsfeed" router="router" />
        <Settings ux:Name="settings" router="router" />
    </PageControl>
</App>

이렇게 하면 페이지 컴포넌트를 다른 컨텍스트에서 재사용 할 수 있는 동시에 동일한 동작을 얻을 수 있습니다. 컴포넌트를 다른 곳에서 재사용 할 수 있는 유일한 요구 사항은 종속성(예: 라우터)을 제공할 수 있다는 것입니다.

이 아이템에 대한 자세한 내용은 컴포넌트 만들기 문서를 참조하십시오.

Was this article helpful to you? Yes 1 No

How can we help?