Skip to content

APP TEMPLATE

Overview

App template is the skeleton where the high level/base layout divisions are set/defined. When it comes to layout, it's common to have it dividide into parts like "Navigation Bar", "Top Menu", "Main Section", "Header", "Footer", etc. Those definitions are easily managed by adding on the App Template.

The default App Template includes a single <still-component> tag, which renders the active component based on routing or first component Loading set in the StillAppSetup. It must appear only once and is required in app-template.js. To add persistent UI parts, use <st-fixed> with a component property—these remain visible across navigations.

Lone component considerations

Because AppTemplate is tied to the Still Application container, it's not available when using Lone component becuase in therms of rendering they are totally depending on the environment in which they being embeded.


Standard AppTemplate (app-template.js) after initiating a project

This is the where Application context aspects are setup. This file is in the root folder.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
import { Template } from "./@still/component/super/Template.js";

export class AppTemplate extends Template {

    /**
     * <still-component> is the placeholder where components 
     * should be render both when loading or routing to the component
     * 
     * <still-fixed> is the specification of a specific component part from the 
     * User interface that needs to be fiexed (e.g. Header, Footer, Menu, Navigation, etc.)
     * 
     * THIS SHOULD BE CHANGED ACCORDING TO MY LAYOUT WHERE I'M HAVING COMPONENTS FOR
     * EACH PART AND THE FIXED ONES WIIL BE REFERENCED AS <st-fixed> AND THE COMPONENT
     * TO BE RENDERED WILL BE PASSED AS THE VALUES OF component PROPERTY OF <st-fixed>
     * e.g. <st-fixed component="AppHeader">
     */
    template = `
        <still-component/>
    `;

}



Defining Application top Bar with fixed part

As stated above, AppTemplate fixed part stays stick even when there is navigation. Follow the bellow example:

Fixed parte in line 18 - This is part of the framework and it's in the project root folder
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { Template } from "./@still/component/super/Template.js";

export class AppTemplate extends Template {

    /**
     * <still-component> is the placeholder where components 
     * should be render both when loading or routing to the component
     * 
     * <still-fixed> is the specification of a specific component part from the 
     * User interface that needs to be fiexed (e.g. Header, Footer, Menu, Navigation, etc.)
     * 
     * THIS SHOULD BE CHANGED ACCORDING TO MY LAYOUT WHERE I'M HAVING COMPONENTS FOR
     * EACH PART AND THE FIXED ONES WIIL BE REFERENCED AS <st-fixed> AND THE COMPONENT
     * TO BE RENDERED WILL BE PASSED AS THE VALUES OF component PROPERTY OF <st-fixed>
     * e.g. <st-fixed component="AppHeader">
     */
    template = `
        <st-fixed component="TopBar"/>
        <still-component/>
    `;

}
This component is placed inside app/component/bar/ folder
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { ViewComponent } from "../../../@still/component/super/ViewComponent.js";

export class TopBar extends ViewComponent {

    isPublic = true;
    template = `
        <div class="main-top-bar">
            This is the Top Bar, it's placed as Fixed
        </div>

        <style>
            .main-top-bar {
                padding: 10px 3px;
                background: blue;
                color: white;
                text-align: center;
                font-weight: bold;
            }
        </style>
    `;

}
This component is placed inside app/home/ folder
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import { ViewComponent } from "../../@still/component/super/ViewComponent.js";

export class HomeComponent extends ViewComponent {

    isPublic = true;
    template = `
        <div>
            <p>This is the Home component</p>
            <a href="#" (click)="goto('RegistrationForm')">Register Person</a>
            |
            <a href="#" (click)="goto('ListPersons')">List Persons</a>
        </div>
    `;

}
This component is placed inside app/components/person/ folder
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import { ViewComponent } from "../../../@still/component/super/ViewComponent.js";

export class RegistrationForm extends ViewComponent {

    isPublic = true;
    template = `
        <h1>
            <p>Person Registration</p>
            <a href="#" (click)="goto('HomeComponent')">Goto Main menu</a>
            |
            <a href="#" (click)="goto('ListPersons')">Register Person</a>
        </h1>
    `;
}
This component is placed inside app/components/person/ folder
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import { ViewComponent } from "../../../@still/component/super/ViewComponent.js";

export class ListPersons extends ViewComponent {

    isPublic = true;
    template = `
        <h1 style="color: green;">
            <p>This is the ListPersons Component</p>
            <a href="#" (click)="goto('HomeComponent')">Goto Main menu</a>
            |
            <a href="#" (click)="goto('ListPersons')">Register Person</a>
        </h1>
    `;

}

Animated result:



Creating a menu using Fixed parts

A fixed part recives the component just like <st-element>, such component works the same way a component works in other scenarios inspit being fixed, for this reason we can leverage it for creating more interactive parts like menus.

When using navigation in the fixed part, it does not affect the part itself, but the <still-component/> part of the AppTemplate, this makes fixed part the suitable place for transversal menus.

Fixed parte in line 18 - This is part of the framework and it's in the project root folder
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { Template } from "./@still/component/super/Template.js";

export class AppTemplate extends Template {

    /**
     * <still-component> is the placeholder where components 
     * should be render both when loading or routing to the component
     * 
     * <still-fixed> is the specification of a specific component part from the 
     * User interface that needs to be fiexed (e.g. Header, Footer, Menu, Navigation, etc.)
     * 
     * THIS SHOULD BE CHANGED ACCORDING TO MY LAYOUT WHERE I'M HAVING COMPONENTS FOR
     * EACH PART AND THE FIXED ONES WIIL BE REFERENCED AS <st-fixed> AND THE COMPONENT
     * TO BE RENDERED WILL BE PASSED AS THE VALUES OF component PROPERTY OF <st-fixed>
     * e.g. <st-fixed component="AppHeader">
     */
    template = `
        <st-fixed component="TopBar"/>
        <still-component/>
    `;

}
This component is placed inside app/component/bar/ folder
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { ViewComponent } from "../../../@still/component/super/ViewComponent.js";

export class TopMenu extends ViewComponent {

    isPublic = true;
    template = `
        <div class="top-menu-container">
            <a href="#" (click)="goto('HomeComponent')">Home</a>
            |
            <a href="#" (click)="goto('RegistrationForm')">Register Person</a>
            |
            <a href="#" (click)="goto('ListPersons')">List Persons</a>
        </div>

        <style>
            .top-menu-container a { color: white; }

            .top-menu-container {
                padding: 10px 3px;
                background: blue;
                font-weight: bold;
            }

        </style>
    `;

}
This component is placed inside app/home/ folder
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import { ViewComponent } from "../../@still/component/super/ViewComponent.js";

export class HomeComponent extends ViewComponent {

    isPublic = true;
    template = `
        <div>
            <p>This is the Home component</p>
        </div>
    `;

}
This component is placed inside app/components/person/ folder
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import { ViewComponent } from "../../../@still/component/super/ViewComponent.js";

export class RegistrationForm extends ViewComponent {

    isPublic = true;
    template = `
        <h1>
            <p>Person Registration</p>
        </h1>
    `;
}
This component is placed inside app/components/person/ folder
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import { ViewComponent } from "../../../@still/component/super/ViewComponent.js";

export class ListPersons extends ViewComponent {

    isPublic = true;
    template = `
        <h1 style="color: green;">
            <p>This is the ListPersons Component</p>
        </h1>
    `;

}

Animated result:



Application Stylization

At the end of the Day the AppTemplate sits on the of the stillUiPlaceholder which is an HTML

placed in the index.html placed in the project root folder, for this reason this (index.html) is the right to use as the source of the App UI styling for the layout by including our .css files in there.

Adding my stilesheet file in line 9 - This is a framework file located in the project root folder
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <title>StillJS</title>
    <link href="path/to/mystyling.css" rel="stylesheet">
    <link href="@still/ui/css/still.css" rel="stylesheet">
    <script src="@still/index.js" type="module"></script>
</head>

<body>
    <div id="stillUiPlaceholder"></div>
</body>