Page Definition

In our approach, we have to primarily focus on building the content of the body to create a UI.

Let us see, how it is built in steps and what we mean by modular components.

Imagine UI scenarios. For simplicity, let us assume the following.

  • UI has a top bar.
  • It has a sidebar for navigations to different scenarios, say Home, Tasks, Documents, etc.
  • By default, Home is selected.
  • In Home page selection, UI shows a greeting message.

It leads to the following conclusion.

  • UI has a topBar component.
  • UI has a sidebar component.
  • UI has a component (panel or card) which displays a nicely formatted greeting message.

We want to display these components when the UI comes up. In our componentized approach, it is done as follows:

  • Create an HTML file for the top bar (topBar.htm).
  • Create an HTML file for the sidebar (sidebar.htm).
  • Create an HTML file for the greeting message (greeting.htm).
  • Using CSS framework of choice (say Bootstrap 4.3), create the page layout as a grid. (page.htm)
  • In the top cell add attributes so the framework JS code can inline topBar.html.
  • In the top cell add attributes so the framework JS code can inline sideBar.htm.
  • In the main cell add attributes so a framework JS code can inline greeting.htm.

The following page.htm snippet will give an idea, how could it work. A brief mention that the “row”, “column” css defines a “grid”.

<div class="container">
  ... The following line will inline topBar.html inside div ...
  <div class="row" data-component="view" data-reference="topBar">
  </div>
  <div class="row">
    <div class="column-4" data-component="view" data-reference="sideBar">
    </div>
    <div class="column-8" data-component="view" data-reference="greeting">
    </div>
  </div>
</div>

The above code will render the page by including three components. We would later see, a) how each component gets the data from the server, b) how data-binding works, c) how UI events are handled. Let us first see how our single page UI implements navigation and state transition of the page.

Let us say that our page shows “greeting.htm” page when the path is “/home” and it shows “task.htm” when the path is “/task”. By adding the path info as a custom tag in the HTML we can support the multiple states of the page and state transition (assume that our JS framework interprets the custom attribute and acts accordingly).

See the following HTML template and notice new data-trigger attribute.

<div class="container">
  ... The following line will inline topBar.html inside div ...
  <div class="row" data-component="view" data-reference="topBar">
  </div>
  <div class="row">
    <div class="column-4" data-component="view" data-reference="sideBar">
    </div>
    <div class="column-8">
      <div data-component="view" data-reference="greeting" data-trigger="/home">
      </div>
      <div data-component="view" data-reference="tasks" data-trigger="/tasks">
      </div>
    </div>
  </div>
</div>

In the above example, “data-trigger” attribute instructs to the framework to inline “greeting.htm” when the path is “/home”. Otherwise, it is hidden from the view. Similarly, “tasks.html” is inlined when the path is “/tasks”, otherwise it is hidden.