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

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 튜토리얼
  4. 3. 컴포넌트 나누기

3. 컴포넌트 나누기

소개

이전 챕터에서는 편집할 하이킹을 선택하기 위해 두 번째 뷰를 추가하여 ‘하이킹(Hike) 편집 화면’을 확장했습니다. 이는 큰 발전이었지만, 이번엔 코드를 작고 재사용 가능한 컴포넌트로 분리하여 프로젝트가 커지더라도 쉽게 관리할 수 있게 할 것입니다. 이 챕터는 실제 앱 프로젝트의 복잡성을 관리하기 위해 퓨즈가 제공하는 중요한 도구를 활용하는 방법을 알려줍니다.

보다 구체적으로, 이 챕터에서 우리가 할 일은 두 가지 뷰를 분리하는 것입니다 – 홈페이지라 부를 수 있는 ‘하이킹 선택 뷰’와 편집을 위한 ‘하이킹(Hike) 편집 화면’ 입니다. 이것은 또한 우리의 간단한 데이터 모델 (이전 챕터의 하이킹 배열)도 분리되어야 함을 의미하므로 두 뷰와 독립적이며 별도로 사용할 수 있습니다.

앞으로 배워야 할게 많기 때문에, 이번엔 뷰를 컴포넌트로 분리하는 방법만 배울 것입니다. 컴포넌트들을 짜맞추고 앱의 흐름 전체를 개발하는 것은 아닙니다. 이것은 편집을 위한 뷰가 더이상 어떤 데이터로 채워지지 않는다는 것을 의미합니다. 하지만 괜찮습니다. 한번에 한 걸음씩 떼십시오. 우리는 뷰를 다시 후킹하여 그들 사이에 데이터를 전달하는 것을 다음 챕터에서 다룰 것입니다. 걱정마세요!

전체 코드는 여기에서 받을 수 있습니다.

하이킹 컬렉션 분리하기

우리가 할 첫 번째 일은 하이킹 배열을 자체 컴포넌트로 분리하여 뷰 중 하나와 독립적으로 존재하게 하는 것입니다. 이 코드는 자바스크립트 데이터이므로 자체 모듈에 배치합니다. 모듈은 기본적으로 JavaScript가 포함된 자체 재사용 가능한 묶음입니다. 실제로 이미 모듈이 만들어져 있습니다. UX의 태그 안에 코드를 작성할 때마다 모듈이 생성됩니다!

팁: UX에서 태그를 사용하면 와 같은 다른 JavaScript 파일을 참조할 수도 있습니다. 이는 태그 안에 JavaScript 코드를 삽입하는 것과 같은 일이지만, UX 코드를 컴포넌트의 로직과 분리할 수 있기 때문에 더 깔끔해질 수 있습니다! 이 장의 뒷부분에서 좀 더 구체적인 예제를 살펴보도록 하겠습니다.

그러나 하이킹 배열의 경우 모듈을 특정 UX 파일에 묶지는 않을 것입니다. 대신 데이터를 별도의 .js 파일에 저장하고 퓨즈에게 이 모듈을 우리의 앱과 번들로 묶을 것을 지시할 것입니다. 그런 다음 이 모듈을 뷰의 각 모듈로 가져옵니다.

이를 위해, 우선 hikes.js라는 새로운 파일을 프로젝트에 추가합니다. 이것을 프로젝트 디렉토리의 루트에 위치시킬 것이므로 디렉토리는 다음과 같이 보일 것입니다:

1
2
3
4
5
$ tree
.
|- MainView.ux
|- hikes.js
|- hikr.unoproj

이 파일에 코드를 넣기 전에 먼저 Fuse가 이 파일을 번들로 제공하도록 해보겠습니다. 일반적으로 JavaScript 태그를 사용하여 UX에 인라인 JavaScript 코드를 작성하거나 와 같은 특정 파일을 참조하는 경우 Fuse는 자동으로 JavaScript 코드가 앱과 번들로 제공되도록 합니다. 그러나 프로젝트에서 JavaScript 태그로 직접 참조되지 않는 개별 JavaScript 모듈이 있는 경우 이 코드가 프로젝트의 일부임을 Fuse에 알려야 합니다.

이를 위해 우리는 프로젝트 파일(.unoproj)에 정보를 추가하여 퓨즈에게 hikes.js 파일이 우리의 앱과 번들되어야 한다고 알려줍니다. hikr.unoproj 파일을 열면 다음과 같은 내용이 표시됩니다:

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

보셨다시피, 특별한 건 없습니다. 기본적으로 우리 프로젝트에 대한 간단한 정보가 들어 있죠. 우리가 특히 관심을 갖는 섹션은 “Includes” 섹션입니다. 현재 하나의 항목이 있습니다:

1
2
3
  "Includes": [
    "*"
  ]

이것은 기본적으로 퓨즈 프로젝트가 퓨즈 프로젝트와 관련된 많은 파일을 포함해야 한다는 것을 의미합니다. 여기에는 .ux 파일, .uno 파일 및 기타 몇 가지 파일이 포함됩니다. 그러나 JavaScript 파일은 포함되어 있지 않으므로 hikes.js 파일을 명시적으로 추가해야 합니다. 이렇게 하려면 이 목록에 다른 항목을 추가합니다:

1
2
3
4
5
6
7
8
9
10
11
{
  "RootNamespace":"",
  "Packages": [
    "Fuse",
    "FuseJS"
  ],
  "Includes": [
    "*",
    "hikes.js:Bundle"
  ]
}

여기서 적용한 것은 “*” 항목 다음에 쉼표를 넣고 그 뒤에 “hikes.js:Bundle” 항목을 추가한 것입니다. 이것은 단지 “이봐, 퓨즈, hikes.js 파일 알지? 내 앱에 번들로 묶어라.”라고 말하는 것입니다. 멋지고 간단합니다! 이제 이 파일을 저장하면 설정을 마친 것입니다.

이제 MainView.ux에서 하이킹 배열을 hikes.js 파일로 옮겨야 합니다. 먼저 MainView.ux 파일에서 잘라내기 합니다:

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
        <JavaScript>
            var Observable = require("FuseJS/Observable");

            var hike = Observable();

            var name = hike.map(function(x) { return x.name; });
            var location = hike.map(function(x) { return x.location; });
            var distance = hike.map(function(x) { return x.distance; });
            var rating = hike.map(function(x) { return x.rating; });
            var comments = hike.map(function(x) { return x.comments; });

            function chooseHike(arg) {
                hike.value = arg.data;
            }

            module.exports = {
                hikes: hikes,

                name: name,
                location: location,
                distance: distance,
                rating: rating,
                comments: comments,

                chooseHike: chooseHike
            };
        </JavaScript>

module.exports에서 hikes에 대한 참조를 주목하십시오. 파일을 저장하면 오류가 발생하지만 걱정하지 않아도 됩니다. 잠시 후에 해결해 드리겠습니다.

하지만 먼저 배열을 hikes.js에 넣습니다:

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
32
33
34
35
36
37
38
39
40
41
42
var hikes = [
    {
        id: 0,
        name: "Tricky Trails",
        location: "Lakebed, Utah",
        distance: 10.4,
        rating: 4,
        comments: "This hike was nice and hike-like. Glad I didn't bring a bike."
    },
    {
        id: 1,
        name: "Mondo Mountains",
        location: "Black Hills, South Dakota",
        distance: 20.86,
        rating: 3,
        comments: "Not the best, but would probably do again. Note to self: don't forget the sandwiches next time."
    },
    {
        id: 2,
        name: "Pesky Peaks",
        location: "Bergenhagen, Norway",
        distance: 8.2,
        rating: 5,
        comments: "Short but SO sweet!!"
    },
    {
        id: 3,
        name: "Rad Rivers",
        location: "Moriyama, Japan",
        distance: 12.3,
        rating: 4,
        comments: "Took my time with this one. Great view!"
    },
    {
        id: 4,
        name: "Dangerous Dirt",
        location: "Cactus, Arizona",
        distance: 19.34,
        rating: 2,
        comments: "Too long, too hot. Also that snakebite wasn't very fun."
    }
];

뷰에서 data를 다시 접근할 수 있도록 이 새 모듈에서 배열을 내보내야(export) 합니다. 이것은 인라인 JavaScript 모듈에서 주변 UX 코드로 데이터를 노출할 때와 마찬가지로 module.exports를 사용하여 수행됩니다. 그러나 이 경우는 조금 더 간단합니다. 이 파일에서는 하나의 데이터만 가지므로 맨 아래에 다음과 같이 간단하게 작성할 수 있습니다:

1
module.exports = hikes;

그리고..그게 다에요! 이제 이 파일을 저장하면 새 모듈을 사용할 준비가 된 것입니다.

이제 뷰 코드로 돌아가십시오. 우리는 위 파일(hikes.js)로 하이킹 배열을 옮겼으므로 새로운 모듈에서 다시 가져올 필요가 있습니다. 이것은 실제로 매우 쉽게 할 수 있는데요. MainView.ux의 var Observable = require(“FuseJS/Observable”); 를 기억하십시오. 이것은 Fuse에게 FuseJS의 Observable 모듈을 가져오고 Observable이라는 이름으로 바인딩하도록 합니다. 새로운 하이킹 모듈의 경우 거의 똑같은 작업을 수행합니다:

1
2
            var Observable = require("FuseJS/Observable");
            var hikes = require("hikes");

이 경우 Fuse는 hikes라는 모듈을 가져오며 이는 hikes.js 파일을 의미합니다. 또한 모듈의 module.exports 객체를 hikes에 바인딩합니다. 멋집니다! 이것이 새롭게 생성된 재사용 가능한 JavaScript 모듈을 사용하기 위해 필요한 모든 것입니다. MainView.ux를 저장하면 실시간 미리보기가 다시 로드됩니다. 겉으로는 같아 보이겠지만 내부적으로 우리는 매우 깨끗하고 관리하기 쉬운 프로젝트 구조로 나아가고 있습니다!

‘하이킹(Hike) 편집 화면’을 컴포넌트로 변환

하이킹 배열을 분리했으므로 다음으로 하고자 하는 일은 뷰 코드에서 새로운 컴포넌트를 만드는 것입니다. 우리는 작게 시작할 것입니다. 먼저 프로젝트에서 Pages라는 새 폴더를 만듭니다.

1
2
3
4
5
6
$ tree
.
|- MainView.ux
|- hikes.js
|- hikr.unoproj
|- Pages

이 폴더 안에 EditHikePage.ux라는 새 파일을 생성합니다. 그리고 다음 코드를 삽입하세요:

1
<Page ux:Class="EditHikePage"></Page>

우리의 디렉토리 구조는 이제 다음과 같이 보일 것입니다:

1
2
3
4
5
6
7
$ tree
.
|- MainView.ux
|- hikes.js
|- hikr.unoproj
|- Pages
   |- EditHikePage.ux

계속 진행하기 전에 몇 가지 사항을 설명해야 합니다. 새로운 EditHikePage.ux 파일의 내용을 다시 한번 살펴보겠습니다.

1
<Page ux:Class="EditHikePage"></Page>

언뜻보기에는 대수롭지 않게 ux:Class 속성을 가진 비어있는 페이지만 만든 것 같습니다. 그런데 정확히 페이지가 뭐죠? 그리고 ux:Class는 뭔가요?

첫 번째 질문에 대답하기 위해 페이지는 기본적으로 탐색에 참여할 특별한 종류의 UI 요소라는걸 알 필요가 있습니다. 실제로 여기에서 페이지를 사용할 필요는 없습니다. 우리는 패널, 버튼 또는 그 밖의 다른 것을 사용할 수 있습니다. 그러나 일반적으로 탐색을 사용하여 컴포넌트를 사용하려는 경우 일반적으로 페이지를 사용하는 것이 가장 좋습니다.이 장의 뒷부분에서 간단하게 설명합니다.

두 번째 질문인 ux:Class는 Page의 인스턴스를 만드는 대신 Page 클래스를 확장하는 클래스를 작성한다는 것을 의미합니다. 이전에 객체 지향 프로그래밍을 해본 적이 있다면 이 용어는 매우 익숙할 것입니다. 그렇지 않다면 약간 이상하게 들릴지 모르지만 실제로는 이해하기 쉬운 개념입니다. 기본적으로 클래스는 객체의 설계도라고 생각할 수 있으며 인스턴스는 그런 설계도의 구체화된 객체입니다. 예를 들어 Button은 클래스이며, UX에서 < Button />을 말할 때 Button 클래스의 인스턴스를 만들고 있습니다. Button은 버튼 객체의 모양과 느낌을 설명하고 < Button />은 실제 Button 객체가 보이도록 나타냅니다.

그러나 이 맥락에서 확장(extend, 상속)은 무엇을 의미합니까? 간단히 말해서 우리는 기본적으로 주어진 클래스와 동일한 클래스를 만들려고 합니다. 하지만 우리는 몇 가지 클래스를 더 추가할 것입니다. Page 하나로 끝내면 좋겠지만 실제로는 좀 더 특별한 것들을 원합니다. 그래서 우리는 라고 말할 것입니다. 이는 Page 클래스를 확장하는 EditHikePage라는 새로운 클래스를 생성한다는 것을 의미합니다. 그런 다음 이 클래스를 사용(인스턴스 생성)할 때마다 를 입력하고 내부에 모든 사용자 지정 항목을 넣는 대신 를 간단히 입력할 수 있습니다.

참고: 클래스 만들기에 대한 자세한 내용은 컴포넌트 만들기 설명서를 참조하십시오.

이제 이 파일의 기본 내용을 이해했으므로, 우리가 원하는 코드를 MainView.ux에서 마이그레이션할 차례입니다. 이 코드는 다음과 같습니다:

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<App>
    <ClientPanel>
        <JavaScript>
            var Observable = require("FuseJS/Observable");
            var hikes = require("hikes");

            var hike = Observable();

            var name = hike.map(function(x) { return x.name; });
            var location = hike.map(function(x) { return x.location; });
            var distance = hike.map(function(x) { return x.distance; });
            var rating = hike.map(function(x) { return x.rating; });
            var comments = hike.map(function(x) { return x.comments; });

            function chooseHike(arg) {
                hike.value = arg.data;
            }

            module.exports = {
                hikes: hikes,

                name: name,
                location: location,
                distance: distance,
                rating: rating,
                comments: comments,

                chooseHike: chooseHike
            };
        </JavaScript>

        <ScrollView>
            <StackPanel>
                <Each Items="{hikes}">
                    <Button Text="{name}" Clicked="{chooseHike}" />
                </Each>

                <Text Value="{name}" />

                <Text>Name:</Text>
                <TextBox Value="{name}" />

                <Text>Location:</Text>
                <TextBox Value="{location}" />

                <Text>Distance (km):</Text>
                <TextBox Value="{distance}" InputHint="Decimal" />

                <Text>Rating:</Text>
                <TextBox Value="{rating}" InputHint="Integer" />

                <Text>Comments:</Text>
                <TextView Value="{comments}" TextWrapping="Wrap" />
            </StackPanel>
        </ScrollView>
    </ClientPanel>
</App>

이 파일의 최상위 부분을 살펴보면 먼저 App과 ClientPanel을 볼 수 있습니다. 다른 모든 내용(특히 JavaScript 및 ScrollView 태그)은 우리의 뷰를 구체적으로 보여줍니다. 우리는 이것들을 EditHikePage.ux 파일로 옮길 것입니다. 다음과 같습니다:

MainView.ux:

1
2
3
4
<App>
    <ClientPanel>
    </ClientPanel>
</App>

EditHikePage.ux:

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<Page ux:Class="EditHikePage">
    <JavaScript>
        var Observable = require("FuseJS/Observable");
        var hikes = require("hikes");

        var hike = Observable();

        var name = hike.map(function(x) { return x.name; });
        var location = hike.map(function(x) { return x.location; });
        var distance = hike.map(function(x) { return x.distance; });
        var rating = hike.map(function(x) { return x.rating; });
        var comments = hike.map(function(x) { return x.comments; });

        function chooseHike(arg) {
            hike.value = arg.data;
        }

        module.exports = {
            hikes: hikes,

            name: name,
            location: location,
            distance: distance,
            rating: rating,
            comments: comments,

            chooseHike: chooseHike
        };
    </JavaScript>

    <ScrollView>
        <StackPanel>
            <Each Items="{hikes}">
                <Button Text="{name}" Clicked="{chooseHike}" />
            </Each>

            <Text Value="{name}" />

            <Text>Name:</Text>
            <TextBox Value="{name}" />

            <Text>Location:</Text>
            <TextBox Value="{location}" />

            <Text>Distance (km):</Text>
            <TextBox Value="{distance}" InputHint="Decimal" />

            <Text>Rating:</Text>
            <TextBox Value="{rating}" InputHint="Integer" />

            <Text>Comments:</Text>
            <TextView Value="{comments}" TextWrapping="Wrap" />
        </StackPanel>
    </ScrollView>
</Page>

이 파일을 저장하면 미리보기가 업데이트되지만 이번에는 내용이 사라질 것입니다! 그 이유는 간단합니다. 우리는 EditHikePage 클래스를 만들었지만, 어디에서도 사용하지 않았기 때문입니다! 이 문제를 해결하기 위해 MainView.ux의 ClientPanel 안에 EditHikePage 클래스의 인스턴스를 추가합니다.

1
2
3
4
5
<App>
    <ClientPanel>
        <EditHikePage />
    </ClientPanel>
</App>

퓨즈에서 표준으로 제공되는 다른 클래스를 사용한 것처럼 보이지만, 이번에는 우리가 직접 만든 클래스입니다. MainView.ux를 저장하면 뷰가 다시 미리보기로 표시됩니다. 굉장해요!

이제는 새로운 컴포넌트로 한번 더 해보고자 합니다. 자바스크립트 코드를 자체 파일로 분리하는 것인데요. 이것은 매우 쉽습니다. 먼저 프로젝트의 Pages 폴더 아래의 EditHikePage.ux 파일과 같은 위치에 EditHikePage.js라는 새로운 파일을 만듭니다:

1
2
3
4
5
6
7
8
$ tree
.
|- MainView.ux
|- hikes.js
|- hikr.unoproj
|- Pages
   |- EditHikePage.js
   |- EditHikePage.ux

그런 다음 EditHikePage.ux의 JavaScript 태그에서 모든 코드를 잘라낸 후 EditHikePage.js 파일로 붙여넣기합니다:

EditHikePage.ux:

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
<Page ux:Class="EditHikePage">
    <JavaScript>
    </JavaScript>

    <ScrollView>
        <StackPanel>
            <Each Items="{hikes}">
                <Button Text="{name}" Clicked="{chooseHike}" />
            </Each>

            <Text Value="{name}" />

            <Text>Name:</Text>
            <TextBox Value="{name}" />

            <Text>Location:</Text>
            <TextBox Value="{location}" />

            <Text>Distance (km):</Text>
            <TextBox Value="{distance}" InputHint="Decimal" />

            <Text>Rating:</Text>
            <TextBox Value="{rating}" InputHint="Integer" />

            <Text>Comments:</Text>
            <TextView Value="{comments}" TextWrapping="Wrap" />
        </StackPanel>
    </ScrollView>
</Page>

EditHikePage.js:

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
var Observable = require("FuseJS/Observable");
var hikes = require("hikes");

var hike = Observable();

var name = hike.map(function(x) { return x.name; });
var location = hike.map(function(x) { return x.location; });
var distance = hike.map(function(x) { return x.distance; });
var rating = hike.map(function(x) { return x.rating; });
var comments = hike.map(function(x) { return x.comments; });

function chooseHike(arg) {
    hike.value = arg.data;
}

module.exports = {
    hikes: hikes,

    name: name,
    location: location,
    distance: distance,
    rating: rating,
    comments: comments,

    chooseHike: chooseHike
};

이 파일을 저장하십시오. 마지막으로 EditHikePage.ux 파일의 JavaScript 태그를 새로 생성된 JavaScript 파일을 참조하는 단일 태그로 변경합니다:

1
2
3
4
5
6
<Page ux:Class="EditHikePage">
    <JavaScript File="EditHikePage.js" />

    <ScrollView>

    ...

그게 다입니다! EditHikePage.ux 파일을 저장하면 미리보기가 다시 로드되며 이전과 동일하게 보입니다. 이것은 모든 것이 작동한다는 것을 의미하며, 우리는 환상적인 퓨즈 프로젝트 구조를 향한 또 다른 단계에 온 것입니다. 또한 앱의 JavaScript 태그 중 하나에서 참조되었기 때문에 프로젝트 파일에 명시적으로 EditHikePage.js 파일을 포함할 필요가 없었던 점에도 주목하십시오. 멋지네요!

홈페이지 나누기

여기까지 왔다면, EditHikePage 클래스에는 하이킹 셀렉터와 하이킹 편집기의 두 가지 컴포넌트가 있을 것입니다. 일반적으로 컴포넌트를 만들 때는 가능한 한 간단한 단일뷰(single view)와 같이 하나만 나타내는 것이 좋습니다. 다음에 할 일은 셀렉터 뷰를 다른 클래스로 분리하는 것입니다. 이 클래스를 HomePage라고 부릅니다.

기본적으로 이전에 이 작업을 수행했으므로 이번 두 번째 시간은 좀 더 쉬워야 합니다. 먼저, Pages 디렉토리에 있는 HomePage.ux라는 파일에서 홈페이지가 될 빈 페이지 클래스를 만듭니다.

1
<Page ux:Class="HomePage"></Page>

다음으로, 홈페이지 관련 UX 코드를 EditHikePage.ux에서 HomePage.ux로 마이그레이션 할 것입니다. 바로 hikes 컬렉션을 표시한 Each 태그에 있는 것입니다:

1
2
3
<Each Items="{hikes}">
    <Button Text="{name}" Clicked="{chooseHike}" />
</Each>

계속 진행하십시오:

1
2
3
4
5
<Page ux:Class="HomePage">
    <Each Items="{hikes}">
        <Button Text="{name}" Clicked="{chooseHike}" />
    </Each>
</Page>

또한 이러한 하이킹을 여러 번 표시할 예정이므로 StackPanel 안에 배치해야 합니다. ScrollView 내부에도 이 설정을 지정하는 것이 좋습니다. 따라서 다음과 같이 설정할 수 있습니다:

1
2
3
4
5
6
7
8
9
<Page ux:Class="HomePage">
    <ScrollView>
        <StackPanel>
            <Each Items="{hikes}">
                <Button Text="{name}" Clicked="{chooseHike}" />
            </Each>
        </StackPanel>
    </ScrollView>
</Page>

그러나 이 모든 것을 저장하면 몇 가지 사실을 알 수 있습니다. 특히, 우리의 새로운 HomePage.ux는 하이킹 컬렉션에 대해 아직 모른다는 것입니다. 이 뷰를 위해 일부 JavaScript를 추가하여 문제를 해결할 것입니다.

이전과 마찬가지로 HomePage.ux 파일과 같은 위치에 HomePage.js 파일을 만들고 거기에 다음 코드를 추가합니다:

1
2
3
4
5
6
7
8
9
10
11
var hikes = require("hikes");

function chooseHike(arg) {
    // TODO
}

module.exports = {
    hikes: hikes,

    chooseHike: chooseHike
};

이것은 우리가 chooseHike 함수의 내용을 주석 처리 한 것을 제외하고는 현재 EditHikePage.js에 있는 코드와 기본적으로 같습니다. 우리는 다음 챕터에서 그 부분을 살펴볼 것입니다. 그러나 EditHikePage는 모든 하이킹을 표시할 필요가 없으므로 이 코드는 양쪽 다 더 이상 필요로 하지 않습니다. 따라서 우리는 editHikePage.js에서 require, chooseHike 함수 및 해당 내보내기를 제거할 것입니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var Observable = require("FuseJS/Observable");

var hike = Observable();

var name = hike.map(function(x) { return x.name; });
var location = hike.map(function(x) { return x.location; });
var distance = hike.map(function(x) { return x.distance; });
var rating = hike.map(function(x) { return x.rating; });
var comments = hike.map(function(x) { return x.comments; });

module.exports = {
    name: name,
    location: location,
    distance: distance,
    rating: rating,
    comments: comments
};

JavaScript가 모두 준비되었으므로 다음과 같이 HomePage.ux에서 해당 파일에 링크할 것입니다:

1
2
<Page ux:Class="HomePage">
    <JavaScript File="HomePage.js" />

이제 표시하기 위한 준비를 마쳤습니다!

홈페이지 표시하기

지금까지 우리는 여러 페이지를 가지고 있었고 이를 표시하고 이들 사이를 탐색하는 방법이 필요했습니다. 퓨즈에서 이것은 네비게이터와 라우터 구성 요소에 의해 처리됩니다. 이 구성 요소들에 대한 적절한 소개가 필요할 것이며, 우리는 시간을 들여 올바르게 사용하는 방법을 배우고 완전히 이해하기 위해 다음 챕터에서 자세하게 살펴볼 것입니다.

지금은 일을 단순하게 하기 위해 PageControl을 사용합니다. PageControl은 몇 개의 페이지를 나란히 표시할 때 사용하고 스와이프할 수 있습니다.

MainView.ux를 살펴보면 현재 다음과 같이 보입니다:

1
2
3
4
5
<App>
    <ClientPanel>
        <EditHikePage />
    </ClientPanel>
</App>

EditHikePage 인스턴스를 PageControl 안에 위치 시킵시다:

1
2
3
4
5
6
7
<App>
    <ClientPanel>
        <PageControl>
            <EditHikePage />
        </PageControl>
    </ClientPanel>
</App>

이제 PageControl 안에 HomePage 인스턴스를 추가하면 됩니다. 홈페이지이기 때문에 기존의 EditHikePage 인스턴스 위에 놓습니다.

1
2
3
4
5
6
7
8
<App>
    <ClientPanel>
        <PageControl>
            <HomePage />
            <EditHikePage />
        </PageControl>
    </ClientPanel>
</App>

이제 이 모든 것을 저장하면 새로운 홈페이지가 표시되고 오른쪽으로 스와이프하여 EditHikePage를 표시할 수 있습니다. 멋져요!

우리의 진행 상황

휴, 우리는 여기에서 많은 것을 다루었습니다! 이 시점에서 두 개의 뷰가 컴포넌트로 분리되어 PageControl에 나란히 표시됩니다. 아래와 같습니다:

HomePage.ux:

EditHikePage.ux:

그리고 우리의 다양한 파일들에 대한 코드는 다음과 같습니다. 파일이 좀 더 많아졌지만 훨씬 더 단순해졌습니다:

hikr.unoproj:

1
2
3
4
5
6
7
8
9
10
11
{
  "RootNamespace":"",
  "Packages": [
    "Fuse",
    "FuseJS"
  ],
  "Includes": [
    "*",
    "hikes.js:Bundle"
  ]
}

MainView.ux:

1
2
3
4
5
6
7
8
<App>
    <ClientPanel>
        <PageControl>
            <HomePage />
            <EditHikePage />
        </PageControl>
    </ClientPanel>
</App>

hikes.js:

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
32
33
34
35
36
37
38
39
40
41
42
43
44
var hikes = [
    {
        id: 0,
        name: "Tricky Trails",
        location: "Lakebed, Utah",
        distance: 10.4,
        rating: 4,
        comments: "This hike was nice and hike-like. Glad I didn't bring a bike."
    },
    {
        id: 1,
        name: "Mondo Mountains",
        location: "Black Hills, South Dakota",
        distance: 20.86,
        rating: 3,
        comments: "Not the best, but would probably do again. Note to self: don't forget the sandwiches next time."
    },
    {
        id: 2,
        name: "Pesky Peaks",
        location: "Bergenhagen, Norway",
        distance: 8.2,
        rating: 5,
        comments: "Short but SO sweet!!"
    },
    {
        id: 3,
        name: "Rad Rivers",
        location: "Moriyama, Japan",
        distance: 12.3,
        rating: 4,
        comments: "Took my time with this one. Great view!"
    },
    {
        id: 4,
        name: "Dangerous Dirt",
        location: "Cactus, Arizona",
        distance: 19.34,
        rating: 2,
        comments: "Too long, too hot. Also that snakebite wasn't very fun."
    }
];

module.exports = hikes;

Pages/EditHikePage.ux:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<Page ux:Class="EditHikePage">
    <JavaScript File="EditHikePage.js" />

    <ScrollView>
        <StackPanel>
            <Text Value="{name}" />

            <Text>Name:</Text>
            <TextBox Value="{name}" />

            <Text>Location:</Text>
            <TextBox Value="{location}" />

            <Text>Distance (km):</Text>
            <TextBox Value="{distance}" InputHint="Decimal" />

            <Text>Rating:</Text>
            <TextBox Value="{rating}" InputHint="Integer" />

            <Text>Comments:</Text>
            <TextView Value="{comments}" TextWrapping="Wrap" />
        </StackPanel>
    </ScrollView>
</Page>

Pages/EditHikePage.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var Observable = require("FuseJS/Observable");

var hike = Observable();

var name = hike.map(function(x) { return x.name; });
var location = hike.map(function(x) { return x.location; });
var distance = hike.map(function(x) { return x.distance; });
var rating = hike.map(function(x) { return x.rating; });
var comments = hike.map(function(x) { return x.comments; });

module.exports = {
    name: name,
    location: location,
    distance: distance,
    rating: rating,
    comments: comments
};

Pages/HomePage.ux:

1
2
3
4
5
6
7
8
9
10
11
<Page ux:Class="HomePage">
    <JavaScript File="HomePage.js" />

    <ScrollView>
        <StackPanel>
            <Each Items="{hikes}">
                <Button Text="{name}" Clicked="{chooseHike}" />
            </Each>
        </StackPanel>
    </ScrollView>
</Page>

Pages/HomePage.js

1
2
3
4
5
6
7
8
9
10
11
var hikes = require("hikes");

function chooseHike(arg) {
    // TODO
}

module.exports = {
    hikes: hikes,

    chooseHike: chooseHike
};

다음으로 진행할 일

두 가지 뷰를 서로 다른 컴포넌트로 분리했으므로 다음 단계는 다시 연결하여 HomePage의 셀렉터가 EditHikePage 편집기를 채우고 탐색할 수 있도록 하는 것입니다. 이제 퓨즈의 네비게이터 및 라우터 구성 요소를 사용하여 앱의 흐름을 개발할 것입니다. 이것은 다음 장에서 다룰 내용이므로 준비가 끝나면 계속 진행하십시오!

이 장의 최종 코드는 여기에서 볼 수 있습니다.

Was this article helpful to you? Yes No

How can we help?