[Fuse] 더 강력한 UX 마크!UX Reactive Expressions

UX Reactive Expressions(이하 UX 표현식이라고 함)는 Fustools(이하 Fuse) V0이다.31에서 새로 추가된 기능입니다.
실험적인 기능이 있기 때문에 사이트에 다음과 같은 주의사항이 있으니 꼭 찾아보세요.
Note that UX expressions is an experimental feature and is subject to change. If you're using this in UX markup, please keep an eye on the changelog when updating. If you're using this feature from Uno, be aware that several large API changes are planned.
실험 기능에 따라 UX 표현식이 변경될 수 있습니다.UX Markup에서 이것을 사용하면 업데이트 시 변경된 내용(change elog)을 확인하십시오.Uno에서 이 기능을 사용할 경우 API도 변경될 수 있습니다.
바인딩
참고로 다음과 같은 세 가지 사용 방법이 있다.

데이터의 귀속(데이터bindings)

{path.to.data}

속성의 바인딩(Propertybindings)

{Property someObject.SomeProperty} 또는 {Property SomeProperty}

리소스의 바인딩(Resource bindings)

{Resource resourceKey}

여기서 얻은 값에 따라 산술, 벡터, 문자열, 텍스트를 반영할 수 있습니다.
그럼 각자의 사용법을 소개하겠습니다.
산술
UX 표현식은 단위(% 또는 px 등) 여부와 관계없이 덧셈(+), 뺄셈(-), 곱셈(*) 및 나눗셈(/)을 수행할 수 있습니다.
sample01.ux

<App>

<!-- StackPanelのローカル名を「panel」と指定 -->
<StackPanel ux:Name="panel" Width="100%">

    <!--
        Rectangleのローカル名を「rect」に指定
        Widthを「panel」のWidthの半分に指定
    -->
    <Rectangle ux:Name="rect" 
        Width="width(panel) / 2"
        Height="40" Color="Red" Margin="5" />

    <!-- Widthを「rect」のWidthの半分に指定 -->
    <Rectangle
        Width="width(rect) / 2"
        Height="40" Color="Blue" Margin="5" />

</StackPanel>
</App>

아래와 같이 빨간색의 사각형은 화면 너비의 절반(50%), 파란색의 사각형은 빨간색의 사각형 너비의 절반(25%)을 나타낸다.

벡터
쉼표(,)를 사용하여 벡터(최대 4개)를 구성할 수 있습니다.
sample02.ux

<App>
<StackPanel>

    <!-- Sliderのローカル名を「slider」に指定 -->
    <Slider ux:Name="slider" />

    <!-- PanelのPadding属性のベクトルにsliderの値をリアルタイムで反映 -->
    <Panel Padding="10, {Property slider.Value}, 10, {Property slider.Value} / 2">
        <Rectangle Color="#FFCC00" Width="100%" Height="30" />
    </Panel>

</StackPanel>
</App>

벡터에는 다음과 같은 규칙이 있을 수 있습니다.

처음부터 "Left, Top, Right, Bottom"

X -> XXXX

XY -> XYXY

XYZ -> XYZ1

문자열 및 텍스트(Strings 및 d text)
sample03.ux

<App>
<StackPanel Padding="10">

    <!-- Sliderのローカル名を「slider」と指定 -->
    <Slider ux:Name="slider" />

    <!-- 「slider」と指定された要素の値をリアルタイムで反映 -->
    <Text Value="{Property slider.Value}" Alignment="TopCenter" />

</StackPanel>
</App>

다음과 같이 슬라이더의 프로세서를 시작하면 값의 변화가 실시간으로 Text에 반영됩니다.

UX 표현식에 사용할 수 있는 함수(Function)
또한 UX 표현식은 다음과 같은 함수를 조합할 수 있습니다.

max(a,b): 두 숫자에서 큰 값

을 되돌려줍니다

min(a,b): 두 숫자에서 작은 값

을 되돌려줍니다

toLowers(s): 건네준 영문 소문자로 되돌아오기

toUppers(s): 전달된 대문자로 되돌아오기

width(element): 다른 UX 요소의 설정 결과에 따라 반환폭

height(element): 다른 UX 요소의 배치 결과에 근거하여 세로 너비로 되돌아오기

spring:value의 수치에 대해 스프링의 물리적 연산을 실시

sample04.ux

<App>
<DockPanel>

    <Grid Rows="auto, 5*, 5*">

    <!-- Sliderに関連する要素を生成 -->
    <Grid Columns="1*,7.5*,1.5*"　Color="#333" Padding="10">
        <Text Value="0%" Alignment="CenterLeft" Color="#DDD" />
        <Slider ux:Name="slider" Value="1" Minimum="0" Maximum="1" />
        <Text Value="100%" Alignment="CenterRight" Color="#DDD" />
    </Grid>


    <!-- Alphaに関連する要素を生成 -->
    <Grid Columns="2*,8*" Color="#DDDDDD" Padding="10" Margin="5">
        <Text Value="Alpha" Alignment="VerticalCenter" />
        <!--
        max(a,b) : sliderの値と0.5中に大きい値を透明度に適用
        -->
        <Rectangle 
        Opacity="max({Property slider.Value}, 0.5)" 
        Width="100%" Height="100%" Color="#4894E5" />
    </Grid>

    <!-- Scaleに関連する要素を生成 -->
    <Grid Columns="2*,8*" Color="#DDDDDD" Padding="10" Margin="5">
        <Text Value="Scale" Alignment="VerticalCenter" />
        <!--
        四角の中心を基準にサイズが変わるように Anchor(50%, 50%)を制定
        max(a,b) : sliderの値と0.5中に大きい値 * 100%を横幅と縦幅に適用
        -->
        <Rectangle 
        Anchor="50%, 50%" 
        Width="spring(max({Property slider.Value}, 0.5)) * 100%" 
        Height="spring(max({Property slider.Value},0.5)) * 100%" 
        Color="#CC0000" />
    </Grid>

    </Grid>


</DockPanel>
</App>

※ 푸른 사각의 투명도와 붉은 사각의 크기는 50% 이하로 변하지 않습니다.
이렇게 UX 표현식을 사용하면 UI Markup에 속성을 첨부해 변수 처리를 하거나 데이터와 속성의 값을 다른 UX 요소에 실시간으로 반영할 수 있어 효율적인 코드를 쓸 수 있다.
앞으로 어떤 방향으로 확장될지 기대가 됩니다!