UX 리액티브 표현식

퓨즈[Fusetools] v0.31에 새롭게 추가된 내용입니다.

UX 리액티브(반응) 표현식

UX 마크업은 모든 객체의 속성에서 사용할 수 있는 간단하고 강력하며 확장 가능한 리액티브 표현식을 제공합니다.

참고: UX 표현식은 실험적인 기능이며 변경될 수 있습니다. UX 마크업에서 이것을 사용한다면 업데이트 할 때 changelog에 주목하세요. Uno에서 이 기능을 사용하는 분들은, 향후 몇 가지 큰 API 변경에 대비하는게 좋습니다.

빠른 요약

UX 마크업의 ‘리액티브 표현식(Reactive Expressions)’을 사용하면 연산자와 함수를 사용하여 리터럴 자원 및 지원되는 모든 바인딩을 표현식에 사용할 수 있습니다. 이 표현식은 바인딩되어 값 변경시 자동으로 업데이트(푸시 기반 업데이팅)됩니다.

다음 예제에서는 슬라이더를 사용하여 사각형의 위치를 ​​제어합니다.

1
2
<Rectangle X="spring({Property slider.Value})*30% + 50%" Alignment="TopLeft" Width="32" Height="32" />
<Slider ux:Name="slider" Minimum="-1" Maximum="1" />

사각형의 X-Offset에 대한 표현식을 참고하세요.

1
spring({Property slider.Value})*30% + 50%

이것은 사각형이 50% 오프셋되면서 spring 함수로 인해 -30% ~ 30% 범위의 값이 더 오프셋됨을 의미합니다.

바인딩(Bindings)

바인딩은 변수값 등의 환경 변화를 수신하고 UX 표현식에 공급하는 새로운 값을 생성하는 객체입니다. 모든 바인딩 유형은 표현식의 일부로 사용될 수 있습니다.

– 데이터 바인딩 ({path.to.data})
– 속성 바인딩 ({Property someObject.SomeProperty} or {Property SomeProperty})
– 리소스 바인딩 ({Resource resourceKey})

인라인 표현식 ({= expression})도 중괄호 구문을 사용하지만 기술적으로 바인딩은 아닙니다.

산술(Arithmetic)

UX 표현식은 스칼라 또는 벡터 값을 단위(예: %와 px)와 함께 또는 포함하지 않고 더하기(+), 빼기(-), 곱하기(*), 나누기(/) 할 수 있습니다.

1
2
<Panel Width="{foo} * 100% + 40%" />
<Slider Margin="{foo}" />

산술은 동일한 단위의 값 사이에서 또는 단위없이 하나의 값과 하나의 값 사이에서 수행될 수 있습니다. 예를 들어 ‘10% + 10px’을 할 수 없습니다. 이렇게 하면 런타임 오류가 발생합니다.

벡터(Vectors)

쉼표 연산자(,)를 사용하여 벡터(최대 4개까지)를 구성 할 수 있습니다.

1
<Panel Margin="10, {spacing}, 10, {spacing} / 2" />

벡터는 X-> XXXX XY-> XYXY 및 XYZ-> XYZ1 규칙에 따라 더 짧은 벡터에서 적절한 크기로 자동 확장됩니다.

1
<Panel Margin="{spacing}" />

문자열과 텍스트(Strings and text)

문자열 속성(예: < Text Value = "")은 다른 속성과 다르게 구문 분석됩니다. 문자열 속성은 중괄호 피연산자를 제외하고 리터럴 문자열로 처리됩니다.

1
<Text>Hello, {username}!</Text>

아래 방법도 동일합니다.

1
<Text Value="Hello, {username}" />

계산된 표현식을 문자열 값에 포함시키기 위해 {= expression} 구문을 사용할 수도 있습니다

1
<Text>Hello, {= toLower({username})}!</Text>

함수(Functions)

참고: 현재 함수는 실험적이며 변경될 것입니다. changelog를 꼭 살펴보세요.

현재 아래의 함수들을 사용할 수 있습니다:

– max(a, b) : 전달된 두 값 중 큰 값을 반환합니다. (벡터인 경우 구성 요소에 따라)
– min(a, b) : 전달된 두 값 중 작은 값을 반환합니다. (벡터인 경우 구성 요소에 따라)
– toLower(s) : 주어진 문자열의 소문자를 반환합니다.
– toUpper(s) : 주어진 문자열의 대문자를 반환합니다.
– width(element) : 다른 UX 요소의 레이아웃 결과로 계산된 너비를 반환합니다.
– height(element) : 다른 UX 요소의 레이아웃 결과로 계산된 높이를 반환합니다.
– spring(value) : 주어진 값을 추적하는 스프링 물리 시뮬레이션을 수행합니다.

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

Was this article helpful?

Related Articles