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. |