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

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. UX 마크업
  4. 표현식[Expressions]

표현식[Expressions]

UX 반응 표현식(UX Reactive Expressions)

UX 마크업은 모든 객체의 속성에서 사용할 수 있는 간단하고 강력하며 확장 가능한 반응 표현식(reactive expression)을 제공합니다. 이 문서는 그것이 어떻게 작동하는지 설명합니다.

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% 씩 오프셋되고 스프링 물리 함수를 통해 -30% ~ 30% 범위의 값이 오프셋 됩니다.

바인딩(Bindings)

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

  • 데이터 바인딩 ({path.to.data})
  • 속성 바인딩 ({Property someObject.SomeProperty} 또는 {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) : 주어진 값을 추적하는 스프링 물리 시뮬레이션을 수행합니다.

참고: 레이아웃 속성(Width, Height, Margin 또는 Padding과 같은)을 레이아웃 기능(예: width(element) 및 height(element))에 대한 입력으로 사용하지 마십시오. 이렇게 하면 원치 않거나 결함이 있는 동작이 발생할 수 있습니다.

1
<Panel Width="10" Height="width(this)" />
Was this article helpful to you? Yes No

How can we help?