Overview
Inheritance Notice: Class
App inherits all of its core state tracking, rendering configurations, and event handlers from the abstract base class Component.
The App class acts as the main wrapper/shell for pages in the fgta5js library. It automatically generates and appends standard layout headers and footers around your primary main content block.
It also provides a secure message channel via window.postMessage to coordinate views and navigation directly with the parent dashboard (such as the AppManager host).
HTML Markup
Define your main application container with the fgta5-component="Application" attribute. The layout builder will automatically inject header and footer siblings next to this element.
<main id="myapp" fgta5-component="Application">
<h2>My Application Content</h2>
<p>Standard inner HTML contents go here.</p>
</main>Instantiate and start the Application in JavaScript:
const app = new $fgta5.App('myapp');
app.setTitle('My Dashboard');
app.finalize();Properties
| Property | Type | Description |
|---|---|---|
Nodes |
Object |
Contains direct references to key DOM elements under keys: Head (header), Main (main application element), and Footer (footer element). |
Methods
| Method | Arguments | Description |
|---|---|---|
constructor(id) |
(id: String) |
Creates and binds a new App instance to the HTML element. Automatically formats layout siblings. |
setTitle(title) |
(title: String) |
Dynamically updates the app header title display and browser document title tab. |
showFooter(show) |
(show: Boolean) |
Toggles footer section visibility and adjusts main layout attributes. |
setMenuIcon(url) |
(url: String) |
Updates the background image URL for the navigation menu button. |
finalize() |
() |
Notifies the parent wrapper container that the app loading phase is successfully completed. |