Docs Wvm Rex

Window Rex

Rex files are template files that use template directives to control and manage the content of webpages. They are capable of using decoupled component files to structure or restructure how a page content is organized. Rex template files are usually found within the windows/Rex directory and they are usually rendered using compiler functions which can be compile() or view() functions. Rex files makes it easier to load and modify pages without having to write multiple codes. In spoova, there are three types of template files. These files are :

  • php template files
  • css template files
  • javascript template files
The rex template files can easily be identified by their respective extensions. For example a css file assumes a .css extension while php and javascript assumes the .php and .js extensions respectively. Rex files are mostly identified by the .rex extension name which comes before the real extension name. This means that whilst a php rex file uses a .rex.php extension, the css files uses .rex.css and javascript files uses .rex.js extension name. This naming pattern makes it easier to identify the rex files and the type of code language each contains.

PHP Rex Files
The php rex files are the main rex files upon which other template files are built. They are usually compiled by the compile() or view() functions. When a compiler function is used, it take a first argument which defines the path of a php rex file within the windows/Rex directory. For example:

Sample 1 - PHP rex file compilation (index.rex.php)
    namespace windows\Routes;

    use window;

    class Home extends Window {
        
        function __construct(){

            self::load('index', fn() => compile() );

        }

    }
In the code above the load() method will look for the index.rex.php file within the windows/Rex directory. If such file exists, then the compiler function compile() will compile the rex template file.

CSS Rex Files
The css rex files stylesheets that are directly loaded into the webpage as embedded stylesheets. In css rex files, stylesheets are divided into sections with each section having its own unique style name. The path of a stylesheet along with its unique name makes it possible to import only specifically needed style within an external css rex file. When compiling php rex file data, only the defined css styles will be extracted from a stylesheet file while other css will be ignored. An example below shows how the format of a css rex file.

Sample 2a: Css File (index.rex.css)
    #style:header
    
    .header{

      background-color: red;

    }
    
    #style;


    #style:footer
      
    .footer{

      width: 100%;

    }
      
    #style;
The code in sample 2 above is an example of sectionalizing of a rex css file. Each section above can be imported into a php rex file using the style() directive. Only the css style names declared within the directive will be pulled into the php rex file. . For example, assuming the css file above is located within the windows/Rex/Css directory, then to import the css file above, a php rex file will contain the following code:

Sample 2b: PHP File (somefile.rex.php)
  style('css.index:header');
In the code above when the file somefile.rex.php is compiled, the compiler will extract css styles from windows/Rex/css/index.rex.css. Only the styles within the header section will be extracted. The compiled data will resemble the code below:

compiled data
    <style rel="css.index">

      .header{

        background-color: red;

      }

    </style>
The rel attribute helps to reveal the path of the css file as it can become difficult to locate stylesheet files when working on large projects. The path shown in the rel attribute is usually a path within the windows/Rex directory. In certain situations we can import multiple styles from a single css file. This can be done by first defining the file path, then each style section is extracted by their unique names. The unique names in this case will be separated by columns. For example, the code below is an example of multiple style extraction from a single css file. Both the footer and header styles will be imported as the compiled data.
somefile.rex.php
  style('css.index:header:footer');

JS Rex Files
The javascript rex files are external javascript files are compiled directly into the webpage as embedded scripts through the template directive script(). In js rex files, scripts are also divided into sections with each section having its own unique name. An example below shows the format of a js rex file

Sample 3: Js Rex File (index.rex.js)
    #script:header

      window.onload = function() {

        alert('loaded');

      }

    #script;
Assuming we have the rex file above to be within the "windows/Rex/js/" directory, then we can import the file as shown below:
Sample 3b: PHP File (some.rex.php) to file
    script('js.index:header')
The path supplied above is expected to be found at windows/Rex/js/index.rex.php. The data compiled from the file above will be as below:
compiled data
    <script>

      window.onload = function() {

        alert('loaded');

      }

    <script>
Note that when compiling the template directives, an error will displayed only if the source file of the expectant rex file is missing. If the file is not missing but the unique name supplied is not defined within the rex files (i.e css and js), no error will be displayed.

Docs Wvm Rex