Hello all, Not sure if this is already part of a thread or if it’s in one example, is there a way to show a Message box with an On Button? or a toast message that dissapears after a few seconds?
Thanks!
I went ahead and created a simple Toasts code for you to use. As of now its simply takes its values from the two text fields and uses them as the title and body text. But thats just for example purposes, you can change it however you wish. The toast is made so it can be displayed with any text for the body and title, and it is shown with a simple block, so its easier to work with. Clicking the toast itself will toggle it, so once its shown you may click/tap it and it will go back. A video showing the Toasts off can be found here (sorry about the background music. I forgot that my screen recorder records the sound from YouTube) EDIT: I have updated the code to support images and toast-typing! A new video can be found here! The code for the FIRST example is here:
<App Theme="Basic" Background="#363F45">
<JavaScript>
var titleOb = require("FuseJS/Observable");
var bodyOb = require("FuseJS/Observable");
var title = titleOb("");
var body = bodyOb("");
var toastTitle = title.map(function (title) {
if (title == "") {
return "Title Default";
} else {
return title;
}
});
var toastText = body.map(function (body) {
if (body == "") {
return "Body Default";
} else {
return body;
}
});
module.exports = {
title: title,
body: body,
toastTitle: toastTitle,
toastText: toastText
};
</JavaScript>
<Panel>
<Button ux:Name="button" Text="Show Toast" Height="45" Margin="20,80">
<Clicked>
<Toggle Target="showToast"/>
</Clicked>
</Button>
<Rectangle ux:Name="Toast" Fill="#fff" Width="250" Height="75" CornerRadius="5" Alignment="TopRight" Margin="-250,10">
<StackPanel Alignment="Center">
<Image Alignment="Left"></Image>
<Text FontSize="20" Value="{toastTitle}"/>
<Text Value="{toastText}"/>
</StackPanel>
<Clicked>
<Toggle Target="showToast"/>
</Clicked>
<DropShadow Angle="135" Distance="10" Size="1" Spread=".5"/>
</Rectangle>
<WhileTrue ux:Name="showToast">
<Change Toast.Margin="-5,10" Duration=".2" DurationBack=".2"/>
</WhileTrue>
<StackPanel Alignment="Bottom">
<TextInput Value="{title}" PlaceholderText="Toast Title Text"/>
<TextInput Value="{body}" PlaceholderText="Toast Body Text"/>
</StackPanel>
</Panel>
</App>
The code for Version 2 is here:
<App Theme="Basic" Background="#363F45">
<JavaScript>
var titleOb = require("FuseJS/Observable");
var bodyOb = require("FuseJS/Observable");
var typeOb = require("FuseJS/Observable");
var title = titleOb("");
var body = bodyOb("");
var toastType = typeOb("");
toastType.value = "#3366FF";
var toastTitle = title.map(function (title) {
if (title == "") {
return "Title Default";
} else {
return title;
}
});
var toastText = body.map(function (body) {
if (body == "") {
return "Body Default";
} else {
return body;
}
});
function typeChange(args) {
var prog = args.value;
toastType.value = "#3366FF";
if (prog < 25) {
toastType.value = "#3366FF";
} else if (prog < 50) {
toastType.value = "#00FF22";
} else if (prog < 75) {
toastType.value = "#FCCE4E";
} else {
toastType.value = "#BA0000";
}
};
module.exports = {
title: title,
body: body,
toastTitle: toastTitle,
toastText: toastText,
toastType: toastType,
typeChange: typeChange
///////////////////////////////////////
//Some good colors and their uses: //
//toastType: "#3366FF" <--default //
//toastType: "#00FF22" <--message //
//toastType: "#BA0000" <--error //
//toastType: "#FCCE4E" <--warning1 //
//toastType: "#F5B52C" <--warning2 //
//toastType: "#F6FF00" <--achievement//
///////////////////////////////////////
};
</JavaScript>
<Panel>
<Button ux:Name="button" Text="Show Toast" Height="45" Margin="20,80">
<Clicked>
<Toggle Target="showToast"/>
</Clicked>
</Button>
<Rectangle ux:Name="Toast" Fill="{toastType}" Width="250" Height="75" CornerRadius="5" Alignment="TopRight" Margin="-250,10">
<Image Alignment="Left" File="Assets/toastIcons/open_smile.png" Margin="-5,0"/>
<StackPanel Margin="5,0" Alignment="Center">
<Text FontSize="20" Value="{toastTitle}"/>
<Text Value="{toastText}"/>
</StackPanel>
<Clicked>
<Toggle Target="showToast"/>
</Clicked>
<Rectangle ux:Name="Toast" Fill="#fff" Width="250" Height="70" CornerRadius="5" Alignment="Top"/>
<DropShadow Angle="135" Distance="10" Size="1" Spread=".5"/>
</Rectangle>
<WhileTrue ux:Name="showToast">
<Change Toast.Margin="-5,10" Duration=".2" DurationBack=".2" Easing="CircularInOut"/>
</WhileTrue>
<StackPanel Alignment="Bottom">
<Text Value="Slide to change Toast Type">
<Slider ValueChanged="{typeChange}" />
</Text>
<TextInput Value="{title}" PlaceholderText="Toast Title Text"/>
<TextInput Value="{body}" PlaceholderText="Toast Body Text"/>
</StackPanel>
</Panel>
</App>
Very nice Redux!
this gives me a very good idea on how to deal with it, This is way to nice man!!
I’ll play with it, I’ll try to make a reusable Javascript version of it.
Thanks again!!
No problem 
I enjoy this kind of thing. I was originally going to create a new UI element and call it but it seemed pointless after a few minutes of coding. As of this version of Fuse, you cannot create UI elements using JavaScript/once the app is loaded. This is why it’s a single toast which is being edited and not a new one being created. If they add this ability in a future update I shall rework the code to make things a bit better. I tried making each part of the toast as easy to edit as possible, so basically any part can be changed/called on during any event handler you have in your app. I did forget to make the icon be dynamic though, but if assume you can do that yourself if need be. It would be done similarly to how I have the colors done. Please keep me updated as you play with this code I’m interested in seeing what you do with it, and what apps you use it with as I know I’m using it for my two games I’m working on.