I would like to be able to launch a different view after my login screen and collapse or get rid of the login view. How would I do this?
There are a lot of ways to do this in Fuse. Here is one to get you started.
<App>
<JavaScript>
var Observable = require('FuseJS/Observable');
var LoginVisible = Observable('Visible');
function login() {
LoginVisible.value = 'Collapsed';
}
module.exports {
login: login,
LoginVisible: LoginVisible
};
</JavaScript>
<Panel>
<AppView>
<LoginView Visibility="{LoginVisible}" />
</Panel>
</App>
Okay thankyou very much! When LoginView is Visible would it lay over the top of AppView or would I need to change AppView’s visibility to collapsed?
Higher “up” in the UX-document = higher “up” in the layer stack. Like layers in Photoshop.
So move the LoginView one line above AppView to acheive that.
Okay got it, thankyou all!
I can get the view to collapse, but my other view doesn’t appear.
MainView.ux
<App Theme="Basic">
<iOS.StatusBarConfig Style="Light" />
<JavaScript File="Main.js" />
<Panel>
<HomeView Visibility="{HomeVisibility}" />
<LoginView Visibility="{LoginVisibility}"/>
</Panel>
</App>
Main.js
// main observable
var Observable = require("FuseJS/Observable");
//the observables to hold the visibility of different views
var LoginVisibility = Observable("Visible");
var HomeVisibility = Observable("Collapsed");
// Observables for holding the user's email and password
var email = Observable("");
var password = Observable("");
// Observable function to check if correct values have been entered
var areCredentialsValid = Observable(function() {
return email.value != "" && password.value != "";
});
// the Login function that sends details to server and check, and returns a value
function Login() {
//the httprequest object
var hr = new XMLHttpRequest();
//variables to pass to the object
var url = "http://xxxxxxxx.xxx/login.php";
var params = "email="+email.value+"&password="+password.value;
hr.open("POST", url, true);
//set content type to tell server that parameters are in the url
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//use onreadystatechange event of the request object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200){
var return_data = hr.responseText;
email.value = return_data;
if(return_data == "Success"){
//console.log("Yay");
LoginVisibility.value = "Collapsed";
HomeVisibility.value = "Visible";
}
}
}
//send the data to the server and wait for the response
hr.send(params);
email.value = "Attempting login...";
}
//export the js to be used in the ux files
module.exports = {
email:email,
password: password,
areCredentialsValid: areCredentialsValid,
Login: Login,
LoginVisibility: LoginVisibility,
HomeVisibility: HomeVisibility
}
LoginView.ux
<DockPanel ux:Class="LoginView">
<JavaScript File="Main.js" />
<!-- login view style style -->
<Style>
<Text TextColor="#ffffff" />
<TextInput PlaceholderColor="#ffffff80" TextColor="#ffffff" CaretColor="#ffffff" />
</Style>
<!-- Button colors -->
<float4 ux:Key="C600" ux:Value="#8869e5" />
<float4 ux:Key="C700" ux:Value="#6447b3" />
<float4 ux:Key="CFillFore" ux:Value="#644793" />
<StatusBarBackground Dock="Top" />
<BottomBarBackground Dock="Bottom" />
<!-- <JavaScript File="LoginScript.js" /> -->
<Video Layer="Background" Volume="0.0" File="Assets/video.mp4" IsLooping="true" AutoPlay="true" StretchMode="UniformToFill" ContentAlignment="CenterRight" Opacity="0.3" Padding="0">
<Blur Radius="3.31" />
</Video>
<Grid Rows="1*,1*">
<StackPanel Alignment="VerticalCenter">
<Image File="Assets/logo.jpg" StretchMode="PointPrecise" />
<Text Alignment="HorizontalCenter" FontSize="50">SSMXC</Text>
<Text Alignment="HorizontalCenter" FontSize="46">Booking In</Text>
<Text Alignment="HorizontalCenter" Opacity=".5">book into the next event fast and easy</Text>
</StackPanel>
<StackPanel Alignment="VerticalCenter" Margin="50,0,50,0">
<TextInput PlaceholderText="email" Value="{email}" />
<TextInput PlaceholderText="password" IsPassword="true" Value="{password}" />
<Button Text="Log in" IsEnabled="{areCredentialsValid}" Clicked="{Login}"/>
</StackPanel>
</Grid>
</DockPanel>
HomeView.ux
<DockPanel ux:Class="HomeView">
<JavaScript File="Main.js" />
<Style>
<Button ux:InheritStyle="false" ClipToBounds="False"
Margin="0,0,0,4" Background="#bdc3c7" Name="self">
<Fuse.BasicTheme.ButtonText TextColor="#FFF" Font="RobotoMedium" Value="{Property self.Text}"
TextAlignment="Center"/>
</Button>
</Style>
<StackPanel Dock="Top" Background="#bdc3c7">
<StatusBarBackground />
<iOS.StatusBarConfig Style="Light"/>
<MultiLayoutPanel Height="50" ux:Name="tabBar">
<GridLayout ColumnCount="3" Rows="1*"/>
<Panel ux:Name="page1Tab">
<Placeholder>
<Rectangle ux:Name="indicator" Alignment="Bottom" Height="4" Fill="#6c7a89">
<LayoutAnimation>
<Move RelativeTo="LayoutChange" X="1" Duration="0.4" Easing="BackIn"/>
</LayoutAnimation>
</Rectangle>
</Placeholder>
<Button Text="Page 1">
<Clicked>
<Set navigation.Active="page1" />
</Clicked>
</Button>
</Panel>
<Panel ux:Name="page2Tab">
<Placeholder Target="indicator"/>
<Button Text="Page 2">
<Clicked>
<Set navigation.Active="page2" />
</Clicked>
</Button>
</Panel>
<Panel ux:Name="page3Tab">
<Placeholder Target="indicator"/>
<Button Text="Page 3">
<Clicked>
<Set navigation.Active="page3" />
</Clicked>
</Button>
</Panel>
</MultiLayoutPanel>
</StackPanel>
<PageControl ux:Name="navigation">
<Text ux:Class="WelcomeText" FontSize="30" Alignment="Center"/>
<Page ux:Name="page1" Background="#eee">
<WhileActive Threshold="0.5">
<Change tabBar.LayoutElement="page1Tab" />
</WhileActive>
<WelcomeText>Welcome to Page 1</WelcomeText>
</Page>
<Page ux:Name="page2" Background="#abb7b7">
<WhileActive Threshold="0.5">
<Change tabBar.LayoutElement="page2Tab" />
</WhileActive>
<WelcomeText>Welcome to Page 2</WelcomeText>
</Page>
<Page ux:Name="page3" Background="#f2f1ef">
<WhileActive Threshold="0.5">
<Change tabBar.LayoutElement="page3Tab" />
</WhileActive>
<WelcomeText>Welcome to Page 3</WelcomeText>
</Page>
</PageControl>
</DockPanel>
I have sorted it now, thanks all.
Casey Williams wrote:
I have sorted it now, thanks all.
please advise why Home view doesn’t appear?
please advise why Home view doesn’t appear?
Can you provide some more information about the problem you’re seeing? This thread is quite old so it might not be related to any issues you’re running into now. 