May 26

 Page Concepts

WaveMaker apps are a collection of pages. This document talks about

WaveMaker as a Single Page Application

Single-Page Applications (SPAs) are Web apps that load a single HTML page and dynamically update that page as the user interacts with the app. This is achieved through a clear separation of front-end and backend through AJAX Service, thus cutting full roundtrip to the server to retrieve new presentation content (HTML) which is common to traditional page life cycle.

A WaveMaker application is a single page application(SPA). Though an app is composed of multiple pages, these pages are loaded asynchronously on demand. At a given point of time, a single page is loaded in the browser for the user to see and interact. The structure of the page i.e. header, footer, left nav is retained across pages, causing no jitter.

A page can be composed of:

  • Widgets, which are loaded as part of the page, or
  • Partial pages as the content of container widgets like Panel, Tabs, Accordion, etc.

Page Life Cycle

When the request for a page is made, it goes through the following life-cycle:

  1. The network request for the page content is made and the Markup, CSS, JavaScript and Variables for the page are loaded.
  2. The Markup is then processed and compiled. During Markup compilation, if any Container widget with partial as content is found, then
    1. the resources corresponding to that partial are loaded,
    2. the onPageReady callback method in the partial script is invoked. By this time the Widgets and Variables in the partial are loaded and can be accessed in the script.
      Note: the app scoped variables are loaded when the app starts, here we are referring to the page scoped variables alone.
  3. The above step is repeated for all the partials and Prefabs found within the page.
  4. Once all the partials are loaded, the onPageReady callback method in the page script is invoked. At this point, all the Widgets and Variables in the page are ready.
  5. Variables, in the page and in the loaded partials, with Request data on page load set to true are triggered at this point. The Variables will not have any data at this point. They are only loaded in memory. The data fetched by these Variables can be accessed in their respective callback methods (onSuccess, onResult, etc.).

Flow Diagrams

Page without any partials or Prefabs
page-life-cycle
Page with partials and Prefabs
page-life-cycle-full

We have seen the page life cycle within a WaveMaker app. Work with pages by page creation, page layouts, and page templates.

 
We use cookies to provide you with a better experience. By using our website you agree to the use of cookies as described in our Privacy Policy.