Hi,
After upgrading to 0.21 the clicked is not working.
...
...
<StackPanel Alignment="VerticalCenter" Margin="0,420,0,0">
<Match Value="{areCredentialsValid}"> <Case Bool="true">
<Rectangle Width="345" Height="60" Color="startYellow" CornerRadius="5" IsEnabled="{areCredentialsValid}">
<Text Font="AvenirLight" Alignment="HorizontalCenter" TextColor="black"
Margin="0,18" FontSize="16" Value="{Resource SignIn}" />
</Rectangle>
</Case>
<Case Bool="false">
<Rectangle Width="345" Height="60" Color="formGray" CornerRadius="5" IsEnabled="{areCredentialsValid}">
<Text Font="AvenirLight" Alignment="HorizontalCenter" TextColor="white"
Margin="0,18" FontSize="16" Value="{Resource SignIn}" />
</Rectangle>
</Case>
</Match>
<Clicked>
<Callback Handler="{signInButtonClick}" />
</Clicked>
</StackPanel>
...
...
My feeling is that there could be something else wrong in your project. This works for me when testing:
<App>
<JavaScript>
module.exports.signInButtonClick = function() {
console.log('test');
}
</JavaScript>
<StackPanel Background="Blue">
<Clicked>
<Callback Handler="{signInButtonClick}" />
</Clicked>
</StackPanel>
</App>
Dear Anders,
I added <TextInputActionTriggered> call same function then it’s working! But <Clicked> not working. Other <Clicked> functions is working (showForgotPassword etc.).
...
...
<StackPanel Alignment="VerticalCenter" Margin="0,0,0,0">
<Rectangle Width="345" Height="121" Color="white" CornerRadius="5">
<StackPanel Alignment="VerticalCenter" Margin="50,5,50,0">
<Basic.TextInput Font="AvenirLight" FontSize="16" ActionStyle="Next" ux:Name="_email" PlaceholderText="{Resource EmailHint}" InputHint="Email" Value="{_email}" />
<Basic.TextInput Font="AvenirLight" FontSize="16" ActionStyle="Go" ux:Name="_password" PlaceholderText="{Resource PasswordHint}" IsPassword="true" Value="{_password}">
<TextInputActionTriggered>
<Callback Handler="{signInButtonClick}" />
<ReleaseFocus />
</TextInputActionTriggered>
</Basic.TextInput>
</StackPanel>
</Rectangle>
</StackPanel>
<StackPanel Alignment="VerticalCenter" Margin="0,420,0,0">
<Match Value="{areCredentialsValid}">
<Case Bool="true">
<Rectangle Width="345" Height="60" Color="startYellow" CornerRadius="5" IsEnabled="{areCredentialsValid}">
<Text Font="AvenirLight" Alignment="HorizontalCenter" TextColor="black"
Margin="0,18" FontSize="16" Value="{Resource SignIn}" />
</Rectangle>
</Case>
<Case Bool="false">
<Rectangle Width="345" Height="60" Color="formGray" CornerRadius="5" IsEnabled="{areCredentialsValid}">
<Text Font="AvenirLight" Alignment="HorizontalCenter" TextColor="white"
Margin="0,18" FontSize="16" Value="{Resource SignIn}" />
</Rectangle>
</Case>
</Match>
<Clicked>
<Callback Handler="{signInButtonClick}" />
</Clicked>
</StackPanel>
<StackPanel Margin="0,385,0,0">
<Text Font="AvenirLight" Alignment="HorizontalCenter" TextColor="white" Margin="25" FontSize="14" Value="{Resource ForgotPassword}" />
<Clicked>
<Callback Handler="{showForgotPassword}" />
</Clicked> </StackPanel>
...
...
I can’t find your error when you only show snippets of code. When I try to fill out the missing code in your example (by guessing), it is working for me. Like this:
<App>
<JavaScript>
module.exports.signInButtonClick = function() {
console.log('test');
}
module.exports.areCredentialsValid = true;
</JavaScript>
<StackPanel Background="Blue">
<Match Value="{areCredentialsValid}">
<Case Bool="true">
<Rectangle IsEnabled="{areCredentialsValid}" Background="Green">
<Text Value="True" />
</Rectangle>
</Case>
<Case Bool="false">
<Rectangle IsEnabled="{areCredentialsValid}" Background="Red">
<Text Value="False" />
</Rectangle>
</Case>
</Match>
<Clicked>
<Callback Handler="{signInButtonClick}" />
</Clicked>
</StackPanel>
</App>
Could you please paste a small uncluttered example that compiles but show the error in a clear way. Like the above.
SignIn.ux
<Page ux:Class="SignIn">
<Router ux:Dependency="router" />
<ux:Include File="helper/MyToast.ux" />
<ux:Include File="helper/BackgroundEntry.ux" />
<StatusBarBackground Dock="Top" />
<BottomFrameBackground Dock="Bottom"/>
<Panel>
<StackPanel Alignment="VerticalCenter" Width="284" Height="100" Margin="0,-440,0,0">
<Text Font="AvenirLight" Alignment="HorizontalCenter" TextColor="white" FontSize="20" Value="{Resource SignIn}" />
<Text Font="AvenirLight" Alignment="HorizontalCenter" TextColor="white" Margin="25" FontSize="14" Value="{Resource SignInMotto}" />
</StackPanel>
<StackPanel Alignment="VerticalCenter" Margin="0,0,0,0">
<Rectangle Width="345" Height="121" Color="white" CornerRadius="5">
<StackPanel Alignment="VerticalCenter" Margin="50,5,50,0">
<Basic.TextInput Font="AvenirLight" FontSize="16" ActionStyle="Next" ux:Name="_email" PlaceholderText="{Resource EmailHint}" InputHint="Email" Value="{_email}" />
<Basic.TextInput Font="AvenirLight" FontSize="16" ActionStyle="Go" ux:Name="_password" PlaceholderText="{Resource PasswordHint}" IsPassword="true" Value="{_password}">
<TextInputActionTriggered>
<Callback Handler="{signInButtonClick}" />
<ReleaseFocus />
</TextInputActionTriggered>
</Basic.TextInput>
</StackPanel>
</Rectangle>
</StackPanel>
<StackPanel Alignment="VerticalCenter" Margin="0,420,0,0">
<Match Value="{areCredentialsValid}">
<Case Bool="true">
<Rectangle Width="345" Height="60" Color="startYellow" CornerRadius="5" IsEnabled="{areCredentialsValid}">
<Text Font="AvenirLight" Alignment="HorizontalCenter" TextColor="black"
Margin="0,18" FontSize="16" Value="{Resource SignIn}" />
</Rectangle>
</Case>
<Case Bool="false">
<Rectangle Width="345" Height="60" Color="formGray" CornerRadius="5" IsEnabled="{areCredentialsValid}">
<Text Font="AvenirLight" Alignment="HorizontalCenter" TextColor="white"
Margin="0,18" FontSize="16" Value="{Resource SignIn}" />
</Rectangle>
</Case>
</Match>
<Clicked>
<Callback Handler="{signInButtonClick}" />
</Clicked>
</StackPanel>
<StackPanel Margin="0,385,0,0">
<Text Font="AvenirLight" Alignment="HorizontalCenter" TextColor="white" Margin="25" FontSize="14" Value="{Resource ForgotPassword}" />
<Clicked>
<Callback Handler="{showForgotPassword}" />
</Clicked>
</StackPanel>
<StackPanel Alignment="VerticalCenter" Width="222" Height="36" Margin="0,570,0,0">
<Text Font="AvenirLight" Alignment="Center" TextColor="white" FontSize="14" Value="{Resource DontHaveAccount}" />
<Clicked>
<Callback Handler="{showSignUp}" />
</Clicked>
</StackPanel>
</Panel>
</Page>
```
`JS`
```uno
var Observable = require("FuseJS/Observable");
var _email = Observable("");
var _password = Observable("");
var areCredentialsValid = Observable(function() {
return _email.value != "" && _password.value != "";
});
var signIn = function () {
debug_log("signIn()");
}
function signInButtonClick() {
console.log('signInButtonClick');
if (areCredentialsValid) { signIn(); }
}
```
I think we have fixed your problem in the upcoming release 0.22. You can already test it out here.