button, switch, slider

앱 개발에서 가장 많이 쓰이는 세 가지 요소라서 한데 묶었다.

Button

버튼 기본. 기본 모양 등은 테마에서 제공된다.

<App Theme="Basic">
    <Button Text="Click me!" ux:Name="button1">
        <Clicked>
            <Set button1.Text="Clicked!" />
        </Clicked>
    </Button>
</App>

클릭하면 버튼의 텍스트가 바뀐다.

Fuse에서는 클릭이 가능한 오브젝트를 만드는 것이 매우 쉬우므로, 다른 여러 요소들을 이용해 자신만의 버튼을 만들 수 있다.

<App>
    <Rectangle Fill="#309">
        <Clicked>
            <DebugAction Message="Rectangle got clicked" />
        </Clicked>
    </Rectangle>
</App>

Fuse DashBoard에서 지원하는 Fuse Monitor에서 로그를 확인할 수 있다. 위 예제는 로그를 찍는 예제이다.

Event triggers

버튼 이벤트 트리거 예제

<App Theme="Basic">
    <JavaScript>
        module.exports = {
            buttonClick: function (args) { console.log("Button was clicked"); }
        }
    </JavaScript>
    <Button Text="Click me!" Clicked="{buttonClick}" />
</App>

똑같이 로그를 찍는 예제지만 자바스크립트를 이용했다. 위와같이 module.exports를 통해 이름 : 기능 으로 구현한다.

Switch

온/오프 가능한 스위치

<Switch />

WhileTrue, WhileFalse 태그를 이용해 버튼 상태에 따라 여러 제어가 가능하다.

<App Theme="Basic">
    <StackPanel>
        <Switch>
            <WhileTrue>
                <Change rectangle.Width="160" Duration="0.5"
                    Easing="CircularInOut" />
            </WhileTrue>
        </Switch>
        <Rectangle ux:Name="rectangle" Width="70" Height="70" Fill="#909" />
    </StackPanel>
</App>

To make it act on the opposite state, you can use WhileFalse, or WhileTrue Invert="true".

스위치를 On 상태로 시작하고 싶다면 Value="true"값을 준다.

<Switch Value="true" />

자바스크립트를 이용한 예제. args는 Switch가 들어간다. 그러므로 로그에 버튼의 온/오프 상태가 출력된다.

결과 로그)

LOG: Switch value is: false

LOG: Switch value is: true

LOG: Switch value is: false

LOG: Switch value is: true

LOG: Switch value is: false

<App Theme="Basic">
    <JavaScript>
        module.exports = {
            switchChanged: function (args) {
                console.log("Switch value is: " + args.value);
            }
        };
    </JavaScript>
    <StackPanel>
        <Switch Value="true" ValueChanged="{switchChanged}" />
    </StackPanel>
</App>

Databinding switch

Value 프로퍼티를 이용해 데이터바인딩이 가능하다.

<App Theme="Basic">
    <JavaScript>
        var Observable = require("FuseJS/Observable");

        var switchValue = Observable(false);

        module.exports = {
            switchValue: switchValue,
            enableSwitch: function () { switchValue.value = true; },
            disableSwitch: function () { switchValue.value = false; },
            switchChanged: function (args) {
                console.log("Switch value is: " + args.value);
            }
        };
    </JavaScript>
    <StackPanel>
        <Switch Value="{switchValue}" ValueChanged="{switchChanged}" />
        <Grid ColumnCount="2">
            <Button Text="Disable" Clicked="{disableSwitch}" />
            <Button Text="Enable" Clicked="{enableSwitch}" />
        </Grid>
    </StackPanel>
</App>

FuseJS/Observable은 Fuse의 내장 객체다. 자바스크립트를 이용해 모듈을 로드한 뒤 이를 통해 스위치를 제어하는 예제.

Slider

기본 예제

<Slider />

 ProgressAnimation을 사용해 진행상태를 제어. Consider this code which allows you to Rotate a Rectangle from 0 to 90 degrees:

<StackPanel>
    <Slider>
        <ProgressAnimation>
            <Rotate Target="rectangle" Degrees="90" />
        </ProgressAnimation>
    </Slider>
    <Rectangle ux:Name="rectangle" Width="100" Height="100" Fill="#808" />
</StackPanel>

ValueChanged-event 로 제어 가능

<App Theme="Basic">
    <JavaScript>
        module.exports = {
            sliderValueChanged: function (args)
            {
                console.log("Value: " + args.value);
            }
        };
    </JavaScript>
    <Slider ValueChanged="{sliderValueChanged}" />
</App>

슬라이더가 왼쪽에서 오른쪽으로 움직일 때 0~100 사이의 값이 발생한다. 이는 기본값이며 Minimum and Maximum 값으로 제어 가능하다.

<Slider Minimum="4" Maximum="42" />

Databinding slider

It is also possible to databind the slider position:

<App Theme="Basic">
    <JavaScript>
        var Observable = require("FuseJS/Observable");

        var sliderValue = Observable(42);
        var sliderLabel = sliderValue.map(function (val) {
            return "Current position: " + val;
        });

        module.exports = {
            sliderValue: sliderValue,
            sliderLabel: sliderLabel
        };
    </JavaScript>
    <StackPanel>
        <Slider Value="{sliderValue}" />
        <Text TextAlignment="Center" Value="{sliderLabel}" />
    </StackPanel>
</App>