Views & components

Template Views/components

MaplePHP comes with a couple of pre-installed views/components to get you started.

Pre-installed views/components

MaplePHP will get new views/components over time. By updating the packges with the command below in your command line, will ensure you get all newly added components.

npm update

Also, make sure that the view is pre-loaded in your "resources/js/main.js" file. You can read more about it below.

Create view/component

It is super easy to create a custom view and template. Let's start by creating a new and custom ingress view.

1. Create custom view

Start by creating a new "ingress.js" file in the directory "resources/views/jviews/". (For example, there should already exist an example "ingress.js" file at that location; if not, just create it and add the code below.)

The component could look something like bellow.

export function ingressComponent(data, container, $, builder)
{
    let out = `
    <header class="holder center">
        <h1>${data.headline}</h1>
        <p>${data.content}</p>
    </header>
    `;
    return out;
}

2. Import view/component

Then open up your "resources/js/main.js" file and import the "ingress.js" template file directly under the last imported file.

import { ingressComponent } from '../views/jviews/ingress.js';

Set the component/view inside the setup object function in the "main.js" file by adding Stratox.setComponent("ingress", ingressComponent) :

Responder.init({
    lang: "en",
    template: {
        ...
    },
    phrases: {
        ...
    },
    responder: {
        setup: function(config) {
            Stratox.setComponent("modal", StratoxModal);
            Stratox.setComponent("form", StratoxForm);
            Stratox.setComponent("table", StratoxTable);
            // Set ingress here by adding bellow:
            Stratox.setComponent("ingress", ingressComponent);
        },
        ready: function (data) {
            // The documnet is ready
            // Your code here
        },
        update: function (data) {
            console.log("Responder update: ", data);
            // There has been a responder update
            // Your code here
        }
    }
});

Your dynamic view/component is now ready to be used.

Set view

To display a dynamic view or content, you just need to execute the code below in, for example, your controller. It will dynamically create an ingress view inside the HTML element with the ID "#yourElement" in your document. You can add the element in your index, view, or a partial file (see the template engine section); it is up to you.

public function yourControllerMethod(): object
{
    // Set view (ingress)
    $item = $this->provider->responder()->setView(
        [
            "ingress" => "#yourElement"
        ], 
        [
            "tagline" => "MaplePHP",
            "headline" => "Welcome to my App",
            "content" => "Lorem ipsum dolor sit amet."
        ]
    );
    // Build and pass to frontend
    return $this->provider->responder()->build();
}

Append view after view

By utilizing the $item variable from above example and execute bellow under the ingress setView method, it will append a dynamic table view under the ingress view.

public function yourControllerMethod(): object
{
    // Set view (ingress)
    $item = $this->provider->responder()->setView(
        [
            "ingress" => "#yourElement"
        ], 
        [
            "tagline" => "MaplePHP",
            "headline" => "Welcome to my App",
            "content" => "Lorem ipsum dolor sit amet."
        ]
    );
    // Attach item (table view) to ingress
    $item->item("table", [
        "feed" => [
            ["name" => "John Doe", "email" => "[e-mail]", "status" => "1"],
            ["name" => "Jane Doe", "email" => "[e-mail]", "status" => "0"],
            ["name" => "David Doe", "email" => "[e-mail]", "status" => "1"],
        ],
        "thead" => [
            ["name" => "Name"],
            ["email" => "Email"],
            ["status" => "Visible"]
        ],
        "tbody" => [
            '{{name}}',
            '<a href="mailto:{{email}}">{{email}}</a>',
            '{{status}}'
        ]
    ]);
    // Build and pass to frontend
    return $this->provider->responder()->build();
}

Now above views will dynamically show on page views, which really are not that dynamically but a great option to have. Lets take a look on how to execute the views dynamically on Ajax request.

Click event

There already exists a built in event for making a Ajax request on click event.

// MaplePHP URI path builder (not required)
$url = $this->provider->url()->select("page")->add(["new-slug"])->getUrl();
// Accedd click event
<a class="maple-get-btn" href="#" data-href="<?php echo $url; ?>">Click here</a>

You can place the above HTML tag anywhere in your HTML code—index, view, or partial; anywhere is fine. To execute a click Ajax request, you need to add the class "maple-get-btn" and the data attribute "data-href". We use the "data-href" attribute explicitly for the Ajax request, not the regular "href". This is because bots, e.g., Google bots, will index the "href" and not "data-href". This means you can add the same or different URL for the bots.

When the user executes the above code, it will make an Ajax request to the URL "https://example.com/about/new-slug" or whatever URL you build. If that URL is pointed to a Controller that has, for example, the controller method from the previous example above, "yourControllerMethod," it will dynamically add an ingress and table view!