Htx Guide

[Tutorial] CSS and JS

Our simple example project is nearly complete. We'll just add bootstrap and a button to finish it. This project is not something you usually make, but it teaches you all the basics of Htx.

Importing Bootstrap

Lets import Bootstrap into our project. I think it's a good thing to seperate this into another component, so we can easily find and edit it later if we want to.

First run this in the root to create the new component

touch src/other/BootstrapImport.htx # or create it with "new-item" in a powershell in windows

In this component paste the following code

<CSS src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" />
<JS src="https://code.jquery.com/jquery-3.3.1.slim.min.js" />
<JS src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" />
<JS src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" />

This will import all the requirements for bootstrap into our project. Before we can actually use Bootstrap tough, we'll still need to import our component and also define where our scope imports will be placed. Since we want to use Bootstrap everywhere we can place it in the layout file (src/layouts/Default.htx)

Lets edit that layout file

<!-- import "../other/BootstrapImport" -->
<?php
$GLOBAL_call_list = [];
array_push($GLOBAL_call_list, "layout/Default");

if(!isset($props["title"])) $props["title"] = "Page";
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $props["title"] ?></title>
    <BootstrapImport />
    <SCOPES type="css" />
</head>
<body>
    <INNER />
    <!-- render call list -->
    <ul>
    <?php foreach($GLOBAL_call_list as $called) { ?>
        <li>Called by the "<?= $called ?>"" component</li>
    <?php } ?>
    </ul>
    <SCOPES type="js" />
</body>
</html>
 












 
 









 


If you convert all htx to php again and start php, you'll see bootstrap is imported and works.

Creating a button

To showcase internal component scopes we'll create a simple button that alerts a msg. Lets make the file for the button component using the following script

touch src/other/ClickMe.htx # or use "new-item" in a powershell for windows

Put the following code inside it

<button type="button" class="btn btn-primary" onclick="someClickAction()">Click me!</button>

This is just a simple button, however the "someClickAction" function is not yet defined anywhere. Lets create the component js file using the following script

touch src/other/ClickMe.js # or use "new-item" in a powershell on windows

TIP

Puttin both .htx, .js & .css files together with other components can be harder to read, so you can also move the entire component into it's own folder

Now in that file paste the following

function someClickAction(){
    alert("Hello, World!");
}

Lets also import it in our index.htx page like so

<!-- import DefaultLayout from "../layouts/Default" -->
<!-- import "../other/Title" -->
<!-- import "../other/ClickMe" -->
<?php
$title = "Htx Tutorial";
?>
<DefaultLayout title=$title>
    <Title name=strtoupper($title) />
    Just a small page
    <ClickMe />
</DefaultLayout>


 






 

Now if you run the example again by converting everything and running php you can click the button.