Creating a Code-Behind Javascript file

Raxan includes a very nice feature that lets you automatically include a Javascript inside your web page without having to add an extra <script> tag. This makes it much easier and cleaner when working with a lot of script files inside your web page.

To create a code-behind script, you simply create a Javascript file with the same name as the html page you're loading but without the html extension. For example, mywebpage.js will become the code-behind file for the web page mywebpage.html.

To include your code-behind Javascript file inside your web page, you only need to add one script tag and that is the tag that will be used to load the Raxan startup.js file:


<script src="raxan/startup.js" type="text/javascript">/-/</script>

Note the /-/ characters between the <scrip> tags. These characters will instruct Raxan to automatically load the code-behind file relative to the path of the web page. If your code-behind file is located inside a sub folder (e.g. scripts/), then you can add the folder path as follows:


<script src="raxan/startup.js" type="text/javascript">/scripts/-/</script>

From within your Javascript file you can include just about any other script or CSS file. More on this later.

Embedding Javascript inside a web page
Another cool feature for the framework is the ability to embed your Javascript code inside your web page without having to use a second script block: 


    <script src="raxan/startup.js" type="text/javascript">
        html.include('jquery');

        html.ready(function(){
            alert('The page is now ready for DOM manipulation');
        });
    </script>

In the above code both the raxan/startup.js and the embedded Javascript codes are executed using only one <script> block.

Dynamic loading of Style Sheets and Javascript Libraries
At times, you only want to load a portion of your scripts and/or style sheets when the user completes a specific task. This makes it easier on the loading time required at startup and gives you the option of breaking up your very large scripts into smaller and more manageable script files.

Raxan provides two API functions to dynamic load of Javascript and CSS files from the within "plugins" and "styles" folders or from any other folder location.

To use the include() function, simply pass the name and path to the script file without the .js extension if the file is located inside the plugins folder. For example:


    html.include('myplugin');
    html.include('namespace/myplugin');
    // where namespace is a sub-folder within the plugins folder

For script files that are not located inside the plugins folder, use the following syntax:


    html.include('path/to/folder/myscript.js', true);

Note here that the extension of the file must be included and the second parameter set to true.

To receive notification after the file has been loaded you can pass a callback function as the third parameter:


    html.include('path/to/folder/myscript.js', true, function(){
    	alert('File loaded successfully');
    });

When you want to dynamically load a stylesheet, the css() function must be used. The concept is similar to that of the include() function with the exception that stylesheets are loaded from the "styles" folder and there is no support for a callback function:


    html.include('master');
    html.include('name-of-theme/theme');

    // for other stylesheets
    html.include('path/to/folder/stylesheet.css', true);

For more examples of how to use the Raxan Framework visit the Example web page and view the source code of the example pages. (See also the Quick Reference Guide)