Layout & Block Components

The step-by-step guide has already covered the most common method for accessing static views. However, I'll reiterate and introduce some additional approaches.

Two view type

There are 2 types of views in Stratox which you will mostly use:

• Layout: Is the starting point and main view that is initlized in the controller.

• Block: Extens layout view with blocks of content. Block view is also a self-contained and dynamic component, meaning it can be used to easily update its content without having to update the whole layout!

NOTE: The Layout and block method can be initialized the same way but just has different names and render functionalities.

Layout - Example 1

Begin by importing the view:

import ProductPage from "@/templates/views/ProductPage";

Once imported, you're ready to display the view:

const { view, item } = this.layout(ProductPage, {
    headline: "My text 1",
    content: "Lorem ipsum dolor"
});

This code imports the "ProductPage" page view if exists.

The view object argument is the main view instance while item is the view context. Both can be used to update or add data to the layout, but in most cases, you can manage without them since they are also accessible inside the layout view.

Loading the Same Layout Multiple Times

You can load the same view multiple times by providing unique names for each instance. Here's how you can do it:

const { view: view1, item: item1 } = this.layout({ ProductPage1: ProductPage }, {
    headline: "My text 1",
    content: "lorem ipsum dolor",
});

const { view: view2, item: item2 } = this.layout({ ProductPage2: ProductPage }, {
    headline: "My text 2",
    content: "lorem ipsum dolor",
});

What makes Layout unique is that it is loaded in the controller and can be loaded multiple times. Stratox automatically appends them sequentially. This example above also works with the same component and also with block, by appending a unique identifier before the layout function (e.g., ProductPage1, ProductPage2), you can load the same layout with different data. This approach allows for efficient reuse of views throughout your application.

Layout - Example 2

In most cases, it's recommended to import the view, as it helps organize your code effectively. However, there are scenarios where you might only need to add a small HTML component without the need for separate files. In such cases, you can directly define the view within your code.

We'll demonstrate the "Loading the Same View Multiple Times" approach directly in this example. This method also allows you to name the view, enabling dynamic changes to the view data after loading.

this.layout({
    ProductPage1: function(data) {
        return `
        <header class="ingress mb">
            <h2 class="headline-3 title">${data.headline}</h2>
            <p>Lorem ipsum dolor sit amet.</p>
        </header>
        `;
    }
}, {
    headline: "My text 1",
});

this.layout({
    ProductPage2: function(data) {
        return `
        <header class="ingress mb">
            <h2 class="headline-3 title">${data.headline}</h2>
            <p>Lorem ipsum dolor sit amet.</p>
        </header>
        `;
    }
}, {
    headline: "My text 2",
});

In this example, we define the layouts directly within the code, specifying unique names for each view. The provided data is then dynamically rendered within the view components.

NOTE: The block method can be initialized the same as layout.

Block - Example

import Increment from "@/templates/views/blocks/Increment";

export function Start(props, container, helper, context) {
  return `
    <article class="relative card-1 border-bottom ingress">
      <div class="wrapper md">
        <h1 class="headline-1">${props.title}</h1>
        <p>${props.description}</p>
      </div>
    </article>
    <div class="increment">
      ${this.block(Increment, { title: "Start incrementing", increment: 0 })}
    </div>
  `;
}

You utilize blocks to extend your layouts with dynamic block components, this could be everyting from a table with sotable data to a modal.

So it is not harder than starting with a layout view and extend the layout with block views.

Component argumnets

props

This is the object data passed to your template file. It contains information that helps to render the view with dynamic data

container

The container can be used to communicate with your template and the outside. You can create your own or access the frameworks functions like bellow.

const dispath = container.get("dispatch");
dispath.navigateTo("#about");

helper

Your own possible helper libraries, objects, and functions you passed in the configuration.

context

Access the Stratox builder context library (you can manage without, only for advanced users; more on this later on).