How to have multiple pages with set accessibility

How-to Discussions
1

Hi guys,

I’ve adapted the video login page example from youtube and added my backend that connects to a server and checks the details provided by a user enabling them to login.

I can get the login to work successfully, however I don’t know how to launch different panels or pages and make them unaccessible to other pages.

<App Theme="Basic" ClearColor="#200c50">
    <iOS.StatusBarConfig Style="Light" />

    <DockPanel>
        <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>
            var Observable = require("FuseJS/Observable");

            var email = Observable("");
            var password = Observable("");

            var currentPage = Observable("launchpage");


            var areCredentialsValid = Observable(function() {
                return email.value != "" && password.value != "";
            });


            function login() {
                //create the httprequest object
                var hr = new XMLHttpRequest();

                //variable to pass to the object
                var url = "http://myurl.com/phpfile.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"){
                            currentPage.value = "loggedinpage";
                        }
                    }
                }
                //send the data to the server and wait for the response
                hr.send(params);
                email.value = "Attempting login...";
            }



            module.exports = {
                email: email,
                password: password,
                login: login,

                currentPage: currentPage,

                areCredentialsValid: areCredentialsValid
            };
        </JavaScript>

        <!-- All pages here! -->
        <HierarchicalNavigation ux:Name="nav" Active="launchpage" ReuseExistingNode="false" />

        <Style>
            <Page>
                <EnteringAnimation>
                    <Move X="1" RelativeTo="ParentSize" />
                </EnteringAnimation>
                <ExitingAnimation>
                    <Move X="-1" RelativeTo="ParentSize" />
                </ExitingAnimation>
            </Page>
        </Style>

        <!-- Launching login page -->
        <Page ux:Name="launchpage">

            <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>
        </Page>

        <Page ux:Name="loggedinpage" Background="Red"/>

        <Page Background="Green"/>



    </DockPanel>
</App>

That is my most recent attempt using the HierarchalNavigation system, I’ve tried PageControl, but that just lets the user swipe from the login to other pages.

I’ve recently moved over from native Android Java development and am used to calling an Intent to start a new Activity, anything at all similar to this?

Just would like to say aswell, Fuse is brilliant!

Many thanks, Casey

2

I think I may have just solved it, I used in the login button and then set the WhileTrue’s value to an Observable that changes to true if the server sends back the correct message. Sorry about this, should have perservered a bit more!

3

This sounds like a good solution. If you need more changes to the UI when logged in with different accounts, one way to do it is to have the navigation in JS so that the clicked handler can check User before changing what page the app shows.

4

Okay that sounds good, would I store the users info on their device or online on my server? Could you give me a quick example of handling the navigation in JS please? Also, I have managed transition from the login page to a MultiLayoutPanel however, the tabs at the top change but the actual panel is wrong and doesn’t change. Any ideas?

<WhileTrue Value="{loggedin}">
            <StackPanel Dock="Top" Background="#bdc3c7">
                <Style>
                    <Text TextColor="#FFF" Font="RobotoMedium"/>
                    <Button ux:InheritStyle="false" ClipToBounds="False" Margin="0,0,0,4" Background="#bdc3c7" Name="self">
                        <Fuse.BasicTheme.ButtonText TextColor="#FF0000" Font="RobotoMedium" Value="{Property self.Text}" TextAlignment="Center"/>
                    </Button>
                </Style>
                <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">
                        <Set tabBar.LayoutElement="page1Tab" />
                    </WhileActive>
                    <WelcomeText>Page 1</WelcomeText>
                </Page>
                <Page ux:Name="page2" Background="#abb7b7">
                    <WhileActive Threshold="0.5">
                        <Set tabBar.LayoutElement="page2Tab" />
                    </WhileActive>
                    <WelcomeText>Page 2</WelcomeText>
                </Page>
                <Page ux:Name="page3" Background="#f2f1ef">
                    <WhileActive Threshold="0.5">
                        <Set tabBar.LayoutElement="page3Tab" />
                    </WhileActive>
                    <WelcomeText>Page 3</WelcomeText>
                </Page>
            </PageControl>
        </WhileTrue>

file
vFHNe2I1mtJa-legacy-files-5pNcEHxaHdlT74AD-ieQ8b8nE1hvbHbRP4zME_6Rc.png1366×768
file
gSwXnQnWs5G3-legacy-files-Y0idkWs5G1yqxCHy-I0mqtG-wMqlk64Xbm0zM0kKa.png1366×768

As you can see, the fills are completely different to the background and also when I am on tab 3 the panel is still panel 1.

5

Hi! I’m having trouble seing why your navigation is not working properly. Here is an example of doing the navigation in JS though:

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

            var currentPage = Observable("page1");

            function gotoPage1(){ currentPage.value = "page1"; }
            function gotoPage2(){ currentPage.value = "page2"; }
            function gotoPage3(){ currentPage.value = "page3"; }

            module.exports = {
                currentPage: currentPage,
                gotoPage1:gotoPage1,
                gotoPage2:gotoPage2,
                gotoPage3:gotoPage3
            };
        </JavaScript>
        <PageControl Active="{currentPage}">
            <Page ux:Name="page1" Background="Blue">
                <StackLayout />
                <Button Text="Page2" Clicked="{gotoPage2}" Width="200" Height="50"/>
                <Button Text="Page3" Clicked="{gotoPage3}" Width="200" Height="50"/>
            </Page>
            <Page ux:Name="page2" Background="Red">
                <Button Text="Page1" Clicked="{gotoPage1}" Width="200" Height="50"/>
            </Page>
            <Page ux:Name="page3" Background="Green">
                <Button Text="Page1" Clicked="{gotoPage1}" Width="200" Height="50"/>
            </Page>
        </PageControl>
    </Panel>
</App>