Pages

In "Webriko" the code is mostly distributed in pages.

You can create pages of type: Javascript, HTML, CSS, PHP.

The "Inspector" panel displays the page properties by clicking on the page background.

The main properties of a page are: name, title, description, width, height.

By compiling the project, each page will become a single file with all the code of the contained nodes.

The "Page dir target" property indicates the directory where the page file will be saved.

For example, if we create a Javascript page named "utils",

and we define as destination folder of the compilation: "javascript",

after compiling we will find the page file in that folder: "javascript/utils.js".

Another page of type HTML, compiled in the upper folder, will be able to import the file using:


<script src="javascript/utils.js" ></script>

Page code

Each page, like nodes, contains code displayed by the code editor panel.

The code of a Javascript page contains only a placeholder "__JS__" which,

during compilation it is replaced by all the code of the nodes present in the page.

The same thing goes for CSS and PHP pages.

The code of a CSS page contains a "__CSS__" placeholder, while a PHP page contains the "__PHP__" placeholder.

By default, an HTML-type page can contain several programming languages,

in fact, the initial code contains the minimum code required for an HTML page

and the respective placeholders for the nodes: Javascript, CSS and HTML.

The initial code of an HTML page

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>__page_title__</title>
    <meta name="description"
    content="__page_description__">
</head>

<body>

<style> __CSS__ </style>

    __HTML__

<script> __JS__ </script>

</body>
</html>


During compilation:
the CSS code contained in the page nodes will replace the "__CSS__" placeholder,
the HTML code contained in the page nodes will replace the "__HTML__" placeholder,
Javascript code contained in page nodes will replace the "__JS__" placeholder.

Placeholder variables

The code of pages and nodes can contain other placeholder variables.

The HTML page code shown above contains 2 placeholder variables: "__page_title__" and "__page_description__".

These 2 placeholder variables, at compile time,

are replaced by the value of the respective page properties: "title" and "description".