Trongate MX Quick Start Guide
This guide will help you quickly leverage Trongate MX, the built-in JavaScript library designed specifically for the Trongate framework. Ensure you have the latest version of Trongate installed before proceeding.
Step 1: Activate Trongate MX
Trongate MX is provided in a JavaScript file named "trongate-mx.js". This file is located in the following directory structure:
public/
js/
trongate-mx.js
To activate Trongate MX, add the following line of code to your website template:
<script src="<?php echo BASE_URL; ?>js/trongate-mx.js"></script>
This script can be placed either:
- In the
<head>
section of your HTML document, or - Just before the closing
</body>
tag
Both placements are valid because Trongate MX initializes after the page loads. The choice of placement can depend on your specific needs and preferences for page loading behavior.
It's highly recommended to include a <base>
tag in the head section of any webpage that uses Trongate MX. For example:
<base href="<?= BASE_URL ?>">
Adding this to the head section of your page offers several benefits:
- It simplifies your URLs, resulting in less typing.
- It makes your code cleaner and more maintainable.
- It allows for easier migration or changing of your base URL in the future.
Correct usage of the <base>
tag means that instead of writing:
<script src="<?php echo BASE_URL; ?>js/trongate-mx.js"></script>
You can simply write:
<script src="js/trongate-mx.js"></script>
This approach streamlines your code and makes it more readable.
Later on, this will prove to be much easier to work with. So, instead of:
<button mx-get="<?= BASE_URL ?>api/get_data" mx-target="#result">Get Data</button>
You can simply write:
<button mx-get="api/get_data" mx-target="#result">Get Data</button>
Note: All subsequent examples in this chapter assume the presence of a properly configured <base>
tag. URLs in these examples will be written relative to the base URL, reflecting this best practice.
Step 2: Create a Trongate Module
Let's create a simple module to demonstrate Trongate MX. For this example, we'll create a module named 'demo'. As always, users of Trongate are free to create their modules either manually or by using the Trongate Desktop app.
- Manual Creation:
- Create a new directory named 'demo' inside your 'modules' directory.
- Within the 'demo' directory, create two subdirectories: 'controllers' and 'views'.
- Using Trongate Desktop App:
- If you have the Trongate Desktop App installed, use it to generate a new 'demo' module.
- This automatically creates the necessary directory structure.
After completing either method, your 'demo' module should have this structure:
modules/
demo/
controllers/
views/