FUSE 0.20 마이그레이션 가이드

Fuse 0.20 마이그레이션 가이드

테마나 스타일이 필요없음

– < App />클래스의 Theme 속성이 제거됨. 즉, Theme=”Basic”이라고 입력할 필요가 없음.
– ux:InheritStyle, ux:Cascade, IgnoreStyle 속성이 제거됨. 작성하더라도 아무런 효과 없음.

그냥 아래와 같이 작성하세요:

1
2
<App>
</App>

노트: 모든 컨트롤들(Button, Switch, Slider 그리고 TextInput)은 기본적으로 Native 테마가 적용됩니다. 하지만 .unoproj의 Packages에 “Fuse.BasicTheme”을 추가하고 을 사용할 경우 Basic 테마가 적용된 버튼을 생성할 수 있습니다.

또한, Style 태그가 완전히 제거되었습니다. 대신 ux:Class를 이용해 다시 작성하세요.
일부 사용자는 < Style ux:Class="MyStyle" >과 같이 작성하는 습관이 있습니다. Style 대신 Panel과 같이 사용하기만 하면 됩니다.

기본 패키지 참조의 변화

– 이제 패키지 참조는 “Fuse”와 “FuseJS”만 사용하면 됩니다.
– 다만, 아래의 패키지들은 따로 추가해야 합니다.
“Fuse.GeoLocation”
“Fuse.Camera”
“Fuse.Vibration”
“Fuse.Launcher”
“Fuse.PushNotifications”
“Fuse.LocalNotifications”
“Fuse.BasicTheme”

최소화된 .unoproj 파일입니다:

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

JavaScript 태그의 ux:Global은 사라질 것입니다.

자바스크립트 모듈에 ux:Global을 사용하면 require() 시에 fuse preview 에서 이상하게 동작할 것입니다.
대신 :Bundle을 이용해서 JS 파일을 직접 require 하세요.

1
2
3
4
"Includes": [
    "*",
    "*.js:Bundle"
]

그런다음 require 할 때, 파일 이름을 사용하면 됩니다.

1
2
var foo = require('foo'); // 프로젝트 루트의 foo.js를 require 합니다.
var bar = require('./../bar'); // 상위 폴더의 bar.js를 require 합니다.

TextInput과 TextEdit API의 변경

TextEdit와 PlainTextEdit가 제거되었습니다. TextInput은 아무런 디자인이 없는 입력창을 제공합니다. 만약 디자인이 적용된 컨트롤을 원한다면, Basic.TextInput을 이용하면 됩니다.

TextInput 내부에 요소를 넣어서 스타일링이 가능합니다. 이 때, TextInput을 DockPanel과 유사하게 사용할 수 있습니다.

1
2
3
<TextInput>
    <Rectangle Dock="Bottom" Height="2" Color="Blue" Margin="4" />
</TextInput>

UX 요소들의 정렬 시맨틱의 변화

아래와 같은 코드를 예로 들어보자면…

1
2
3
4
5
6
<Panel>
    <Each Count="2">
        <ElemOne/>
    </Each>
    <ElemTwo/>
</Panel>

예전에는 아래와 같이 생성되었지만…

1
2
3
4
5
<Panel>
    <ElemTwo/>
    <ElemOne/>
    <ElemOne/>
</Panel>

이제는 아래와 같이 생성됩니다.

1
2
3
4
5
<Panel>
    <ElemOne/>
    <ElemOne/>
    <ElemTwo/>
</Panel>

버그였고 수정되었습니다.

ux:Template과 ux:Factory 컨셉의 통합

기존의 Factory는 Template으로 이름이 변경되었습니다. 이전의 Template 컨셉은 삭제되었습니다.
새로운 Template 컨셉은 Router와 Navigator API에서 많이 사용됩니다.

– ux:Generate=”Factory” 대신 ux:Generate=”Template”을 사용하세요.
– ux:Template=”the_name”을 사용할 수도 있습니다.
– PageControl.DotFactory는 PageControl.DotTemplate으로 변경되었습니다.

animation API의 변화

– Attractor.SimulationType에서 Type과 Unit이 제거되었습니다.
– LinearNavigation은 Easing과 Duration 속성이 없어졌습니다.

Easing과 Duration을 적용하고 싶다면 아래 방식이 아닌..

1
<LinearNavigation Easing="CubicOut" Duration="0.3" />

아래 방식으로 가능합니다.

1
2
3
<LinearNavigation>
    <NavigationMotion Easing="CubicOut" Duration="0.3" />
</LinearNavigation>

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

Was this article helpful?

Related Articles