Radio Button

Show and Tell
1

Hi, Since Fuse doesn’t have radio buttons yet, I’ve implemented my own radio buttons, and here is my code:

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

        var options = Observable();
        options.add({option: "option 1", visibility: "Hidden"});
        options.add({option: "option 2", visibility: "Hidden"});
        options.add({option: "option 3", visibility: "Hidden"});
        options.add({option: "option 4", visibility: "Visible"});


        function myHandler(args) {

            for (var item in options["_values"]) {

                if(args.message == options["_values"][item]["option"].toString()){

                    var index = options.indexOf(options["_values"][item]);
                    var item = {option: options["_values"][item]["option"].toString() , visibility: "Visible"};
                    options.replaceAt(index, item);
                 }
                 else {
                     var index = options.indexOf(options["_values"][item]);
                    var item = {option: options["_values"][item]["option"].toString() , visibility: "Hidden"};
                    options.replaceAt(index, item);
                 }
            }


        }

        module.exports = {
            options : options,
            myHandler:myHandler
        }
    </JavaScript>

    <StackPanel Background="#FFF" Margin="30" ItemSpacing="7">
        <Each Items="{options}">
            <StackPanel Background="#FFF" Margin="5">
                <Match Value="{visibility}">
                    <Case String="Hidden">
                        <HiddenRadioButton Text="{option}"/>
                    </Case>
                    <Case String="Visible">
                        <VisibleRadioButton Text="{option}"/>
                    </Case>
                </Match>
            </StackPanel>
        </Each>
    </StackPanel>

    <StackPanel ux:Class="HiddenRadioButton" ux:Name="self" Orientation="Horizontal" ItemSpacing="5">
        <string ux:Property="Text" />

        <UserEvent Name="ClickingEvent"/>
        <OnUserEvent Name="ClickingEvent" Handler="{myHandler}" />

        <Circle Width="25" Height="25" Color="#FFF">
            <DropShadow />
            <Circle ux:Name="SmallCircle" Width="15" Height="20" Color="#000" Visibility="Hidden" Alignment="Center"/>
        </Circle>
        <Text ux:Name="option_text" TextColor="#000" FontSize="20" Value="{Property self.Text}" Alignment="VerticalCenter"/> 

        <Clicked>
            <RaiseUserEvent Name="ClickingEvent">
                    <UserEventArg Name="message" StringValue="{Property self.Text}" />
            </RaiseUserEvent>
        </Clicked>
    </StackPanel>

    <StackPanel ux:Class="VisibleRadioButton" ux:Name="self" Orientation="Horizontal" ItemSpacing="5">
        <string ux:Property="Text" />

        <UserEvent Name="ClickingEvent"/>
        <OnUserEvent Name="ClickingEvent" Handler="{myHandler}" />

        <Circle Width="25" Height="25" Color="#FFF">
            <DropShadow />
            <Circle ux:Name="SmallCircle" Width="15" Height="20" Color="#000" Visibility="Visible"  Alignment="Center"/>
        </Circle>
        <Text ux:Name="option_text" TextColor="#000" FontSize="20" Value="{Property self.Text}" Alignment="VerticalCenter"/> 

        <Clicked>
            <RaiseUserEvent Name="ClickingEvent">
                    <UserEventArg Name="message" StringValue="{Property self.Text}" />
            </RaiseUserEvent>
        </Clicked>
    </StackPanel>


</App>
1 Like
2

Cool! :slight_smile:

You should make a github repo and add it to https://github.com/vinkla/awesome-fuse

3

Great One!! Thank you very much!
I improved your version a bit, so that the Userexperience is a bit better:
In your version, the change only works by clicking a small place.
I set the click event into the panel, so that the space for clicking is a bit bigger and the Userexperience a bit better :slight_smile:

    <StackPanel   Margin="30,10,30,10" Alignment="Center" ItemSpacing="7" Orientation="Horizontal">
        <Each Items="{options}">
            <StackPanel Background="#fff" Margin="5">
            	<Clicked>
		            <RaiseUserEvent EventName="ClickingEvent">
		                    <UserEventArg Name="message" StringValue="{option}" />
		            </RaiseUserEvent>
		        </Clicked>
                <Match Value="{visibility}">
                    <Case String="Collapsed">
                        <HiddenRadioButton Text="{option}"/>
                    </Case>
                    <Case String="Visible">
                        <VisibleRadioButton Text="{option}"/>
                    </Case>
                </Match>
            </StackPanel>
        </Each>
    </StackPanel>

<UserEvent ux:Name="ClickingEvent"/>
<OnUserEvent EventName="ClickingEvent" Handler="{myHandler}"/>
		

    <StackPanel ux:Class="HiddenRadioButton" ux:Name="self" Orientation="Vertical"  Padding="5"  >
        <string ux:Property="Text" />

        <Circle Width="20" Height="20" Color="#FFF">
            <DropShadow />
            <Circle ux:Name="SmallCircle" Width="8" Height="8" Color="#34495E" Visibility="Collapsed" Alignment="Center"/>
        </Circle>
        <Text Margin="0,10,0,0" ux:Name="option_text" TextColor="#ccc" FontSize="14" Value="{Property self.Text}" Alignment="VerticalCenter" />


        
    </StackPanel>

    <StackPanel ux:Class="VisibleRadioButton" ux:Name="self" Orientation="Vertical" Padding="5">
        <string ux:Property="Text" />

        <Circle Width="20" Height="20" Color="#FFF">
            <DropShadow />
            <Circle ux:Name="SmallCircle" Width="8" Height="8" Color="#34495E" Visibility="Visible"  Alignment="Center"/>
            </Circle>
        <Text Margin="0,10,0,0" ux:Name="option_text" TextColor="#34495E" FontSize="14" Value="{Property self.Text}" Alignment="VerticalCenter"/>
		

    </StackPanel>