How to access an element from OnUserEvent

How-to Discussions
1

Hello community,
i have a problem to access my stroke element from an onUserEvent.
How does it work? The OnUserEvent shows the debug message but the stroke changes never to red. Can anyone help me?

My dode is the following:

<TextInput ux:Class="EmailInput2" Value="{Property Text}" Height="30" Padding="5" PlaceholderText="e-mail" PlaceholderColor="#44444450">
    <UserEvent ux:Name="myEvent" />
    <string ux:Property="Text" />

    <Rectangle CornerRadius="4" Layer="Background">
        <Stroke ux:Name="stroke" Width="1" Color="#bbb" />
    </Rectangle>

    <WhileNotFocused>
        <JavaScript>
            var text = this.Text.value;

            myEvent.raise();
        </JavaScript>

        <OnUserEvent EventName="myEvent">
            <DebugAction Message="Hallo Welt" />
            <Change this.stroke.Color="Red" />
        </OnUserEvent>
    </WhileNotFocused>
</TextInput>
2

if you want change stroke color when textinput is not focused, you dont have to create your own event

<TextInput ux:Class="EmailInput2" Value="{Property Text}" Height="30" Padding="5" PlaceholderText="e-mail" PlaceholderColor="#44444450">
    <string ux:Property="Text" />

    <Rectangle CornerRadius="4" Layer="Background">
        <Stroke ux:Name="stroke" Width="1" Color="#bbb" />
    </Rectangle>

    <WhileNotFocused>
    	<Change stroke.Color="Red" />
    </WhileNotFocused>
</TextInput>
3

Hi Ichan_mb,
the plan was to build a field validation that turned the field border to red when the email is invalid.
The myEvent.raise() is triggerd later by a button.

Update:
i played around and with set instead of change it changes the color but in while it is not working. The color ist always green. Has anyone an idear why?

<TextInput ux:Class="EmailInput2" Value="{Property Text}" IsValid="init" Height="30" Padding="5" PlaceholderText="e-mail" PlaceholderColor="#44444450">
    <UserEvent ux:Name="myEvent" />
    <string ux:Property="Text" />
    <string ux:Property="IsValid" />

    <Rectangle CornerRadius="4" Layer="Background">
        <Stroke ux:Name="stroke" Width="1" Color="#bbb" />
    </Rectangle>

    <WhileNotFocused>
        <JavaScript>
            var Context = require("Modules/Context");
            var text = this.Text.value;
            var test123 = Context.Observable();

            test123.value = false;

            myEvent.raise();

            module.exports = {
                test123: test123
            };
        </JavaScript>

        <OnUserEvent EventName="myEvent">
            <DebugAction Message="Hallo Welt" />
            <DebugAction Message="{test123}" />
            <Set stroke.Color="Green" />

            <WhileString Value="{test123}" Equals="false" CaseSensitive="false">
                <DebugAction Message="WhileString" />
                <DebugAction Message="{test123}" />
                <Set stroke.Color="Red" />
            </WhileString>

            <WhileFalse Value="{test123}">
                <DebugAction Message="WhileTrue" />
                <DebugAction Message="{test123}" />
                <Set stroke.Color="Blue" />
            </WhileFalse>
        </OnUserEvent>
    </WhileNotFocused>
</TextInput>
4

Value of WhileString is expected to be string not boolean, so i guest it’s not worked. How about this :

<App>
	<TextInput ux:Class="EmailInput2" Value="{Property Text}" IsValid="true"  Height="30" Padding="5" PlaceholderText="e-mail" PlaceholderColor="#44444450">
	    <string ux:Property="Text" />
	    <bool ux:Property="IsValid" />

	    <JavaScript>
	    	var txtEmail = this.Text;
	    	var isValid = this.IsValid;
	    	function validateEmail() {
				   var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
				isValid.value = re.test(String(txtEmail.value).toLowerCase());
			}
            module.exports = {
                validateEmail: validateEmail
            };
        </JavaScript>
	    <Rectangle CornerRadius="4" Layer="Background">
	        <Stroke ux:Name="stroke" Width="1" Color="#bbb" />
	    </Rectangle>

	    <WhileNotFocused>
	    	<Callback Handler="{validateEmail}" />
	        <WhileFalse Value="{Property IsValid}">
	        	<Change stroke.Color="Red" />
	        </WhileFalse>
	    </WhileNotFocused>
	</TextInput>

	<ClientPanel>
		<Panel Alignment="Center">
			<EmailInput2 Width="250" />
		</Panel>
	</ClientPanel>
</App>

this will check/validate input value when not focused. You can see, first it set IsValid property to true as default value so when the first time textinput is rendered it will not change stroke color to red.

You can also check validity of input value everytime value is changed using onValueChanged