Navigation through separate ux files

How-to Discussions
1

Hi All,

I’ve been reading through a number of threads on the subject and nearly have all the pieces of the puzzle. I’m trying to split up my project into multiple ux files with my MainView.ux file having a PageControl that flips between them.

My first panel is a login view which after the user fills in his/her credentials should result in the page control changing to another page.

The issue I’m having is accessing data in my main view from my subview.

MainView.ux:

<App Theme="Basic" ClearColor="#ffffff">
    <DockPanel>
        <JavaScript>
            var Observable = require("FuseJS/Observable");

            var active_page = Observable("Login");

            module.exports = {
                active_page: active_page
            }
        </JavaScript>
        <PageControl Active="{active_page}">
            <Page Name="Login">
                <Login />
            </Page>

            <Page Name="Page2">
                <Text Value="Page2"/>
            </Page>

            <Page Name="Page3">
                <Text Value="Page3"/>
            </Page>
        </PageControl>
    </DockPanel>
</App>

Login.ux

<StackPanel ux:Class="Login">
    <JavaScript>
        var Observable = require("FuseJS/Observable");

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

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

        var doLogon = function(args) {
            console.log("Login button pressed");
            active_page = "Page2";
        };

        module.exports = {
            username: username,
            password: password,

            isAllEntered: isAllEntered,
            doLogon: doLogon
        };
    </JavaScript>
    <StackPanel Margin="50,0,50,100">
        <TextInput PlaceholderText="username" Value="{username}" />
        <TextInput PlaceholderText="password" IsPassword="true" Value="{password}" />
        <Button Text="Log in" IsEnabled="{isAllEntered}" Clicked="{doLogon}" />
    </StackPanel>
</StackPanel>

The active_page observable isn’t in scope of my Login.ux I wager, but I’m not sure what I need to do to bring this in scope or how to implement some form of callback to my MainView.ux

Cheers,

Bas

2

Just move the doLogon() method to MainView.ux (don’t forget to update the module.exports too). Also, there’s a small error : instead of

var doLogon = function(args) {
  console.log("Login button pressed");
  active_page = "Page2";
};

do the following :

var doLogon = function(args) {
  console.log("Login button pressed");
  active_page.value = "Page2";
};

(You forgot to set the value property);

3

Oops, on forgetting the .value :slight_smile:

Moving the doLogon function into MainView.ux (and adding it to module.exports) results in it no longer being called. Kinda expecting that as I exported active_page so you would assume active_page would be accessible if doLogon is accessible and visa versa…

Cheers,

Bas

4

Still hoping someone might have an idea what I’m overlooking or doing wrong here.

Also I noticed that the PageControl container I’m using allows swiping, is there a way to turn that off?

5

Alright everyone, seeing I’ve seen a few topics go by in time asking about this, with some help from some wonderful people on Slack I managed to get something to work using User Events. You can read more about them here: https://www.fusetools.com/learn/fusejs#keyword-userevents-js

My mainview.ux now looks like this:

<App Theme="Basic" ClearColor="#ffffff">
  <UserEvent Name="afterLoginEvent" />
  <DockPanel>
    <JavaScript>
      var Observable = require("FuseJS/Observable");

      var active_page = Observable("Login");

      var afterLogin = function() {
        console.log("Do the stuff needed to be done here now that we're logged on");
        active_page.value = "Page2";
      }

      module.exports = {
        active_page: active_page,
        afterLogin: afterLogin
      }
    </JavaScript>
    <OnUserEvent Name="afterLoginEvent" Handler="{afterLogin}" Filter="Global" />
    <PageControl Active="{active_page}">
      <Page Name="Login">
        <Login />
      </Page>

      <Page Name="Page2">
        <Text Value="Page2"/>
      </Page>

      <Page Name="Page3">
        <Text Value="Page3"/>
      </Page>
    </PageControl>
  </DockPanel>
</App>

And my login.ux:

<DockPanel ux:Class="Login">
    <JavaScript>
        var Observable = require("FuseJS/Observable");
        var UserEvents = require('FuseJS/UserEvents');

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

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

        var doLogon = function(args) {
            console.log("This is where you should validate your login, get a token, etc....");
            UserEvents.raise("afterLoginEvent");
        };

        module.exports = {
            username: username,
            password: password,

            isAllEntered: isAllEntered,
            doLogon: doLogon
        };
    </JavaScript>
    <StackPanel Margin="50,0,50,25">
        <TextInput PlaceholderText="username" Value="{username}" />
        <TextInput PlaceholderText="password" IsPassword="true" Value="{password}" />
        <Button Text="Log in" IsEnabled="{isAllEntered}" Clicked="{doLogon}" />
    </StackPanel>
</DockPanel>

As the documentation states, don’t forget to incluse Fuse.UserEvents in your project file (it was there by default for me).

Pardon any typos as I had to alter it a little by removing crap not relevant here but it all seems to work. My only issue remaining is that the swipe action is enabled on my PageControl thingy.