Views and Navigation

Note

Since version 0.1.0 of the framework, Skate / JSX componets are no longer available by default and are generally not encouraged to be used. Documentation remains below for supportability.

What we call a view is the same as page on a website. It's a screen in your application that is made up of components. For example, your app might have a series of pages like:

Login Page => Dashboard => Job List => Job Detail

In the framework each of these would be their own view.

What are views?

Just like everything else UI related, views are nothing more than components. The only real difference is that they live in a views folder and must be reigstered.

A simple view might look like:

@component({ tag: MyAppViews.Login.tag })
export class Login extends BaseComponent<MyAppManager> {

    async _init(): Promise<void> {}
    _setupEventListeners(): void {}

    componentMarkup(): JSXElement {

        return (
            <div>
                // ...view contents
            </div>
        );
    }
}

They look very similar to components and that's because they are one! The difference being in how they're registed:

@component({ tag: MyAppViews.Login.tag })

In your application, there will be a views/register.ts file. In here is where you manage your view registrations. For each view, the MyAppViews object needs to be extended, like so:

export const MyAppViews: ViewRegistrations = {

    Login: { tag: "view-login", title: "Login", uri: "", default: true },
    /// ...more registrations here
};

Each property on the object is a ViewRegistration object, which looks like:

1. tag (string): The HTML tag name, must be hypenated, e.g. view-login.

2. title (string): The webpage title for the view. Only visible in browsers.

3. uri (string): The webpage URI for the view. Leave as "" for the root, otherwise specify your path, e.g. "login".

4. default (boolean - optional): Specify whether this view is the default. If set, this view will be loaded if no other view matches the route.

5. auth (boolean - optional): Specify whether this view requires auth. If set, view won't be loaded unless current session is authorised. Note: this isn't currently supported by default, you have to build this in.

Finally, there is one more thing you have to do for views. You have to export them. Usually, this is done in the root index.ts file and would look like:

export { Login } from "views/login/login";

If you have a lot of views you may want to condense this into its own file. We have to do this because of the tree shaking nature of webpack. As views are our root components, they not naturally imported from any other file. This means that webpack won't find them during compilation and therefore they are not included in the output.

Note

Registering views like this is an area we would like to improve in the framework. It's not a pressing issue right now however, but is in the backlog.

Navigation

Navigation between views is very simple. The manager which is accessible from any component has specific methods to do this for you. It's done like so:

this.manager.router.goToPage(MyAppViews.Login);

The router.goToPage takes one argument of type ViewRegistration. This will handle all navigation for you for all environments.

Note

There will be more navigation options available on the router in due course. This includes methods like goBack() and goToUrl(url: string).