How to include custom javascripts and stylesheets in your application

Use the custom_javascripts and custom_stylesheets blocks to include your own custom javascript and CSS files in your application.

If you are not yet familiar with the concept of blocks and slots in Xataface, you may wish to refer to Changing the Look and Feel of Your Application for an introduction.

It is not uncommon to want to include your own custom styles or javascripts in your web applications. Xataface includes 2 slots/blocks in its main template that are reserved for this purpose:

custom_javascripts
custom_stylesheets

Whatever content you place in these slots will appear in the head section of the page. Theoretically you could include any content here, but the names suggest that you should include javascript and css files here.

Adding a custom javascript

Let's begin by creating our javascript file as follows:

Create a file named javascripts.js in the root of your application's directory (i.e. /path.to.your.app/javascripts.js), and place the following function in it: function happyBirthday(name){ alert("Happy birthday, "+name+"!!!"); } This is just a simple function that displays happy birthday in a popup alert box. We may want to use this from our application.


   We want this javascript file to be included site-wide, so we will use the Application delegate class to override the custom_javascripts block and include our file.  Let's add the following method to the Application delegate class (located at /path.to.your.app/conf/ApplicationDelegate.php):
     
function block__custom_javascripts(){
    echo '<script src="javascripts.js" type="text/javascript" language="javascript"></script>';
}


You'll notice now that if you reload your application and look at the HTML source in the head section you'll see the <script> tag that you put in your block.



Using your javascripts in event handlers
Above we have made a javascript function named happyBirthday.  Suppose we want this function to be called whenever the firstname field is changed in our people table edit form.  To do this we need to attach an onchange event handler to the firstname field of our form.
Note that we can apply any HTML attributes we want to our field using the widget:atts: directive in the fields.ini file as follows:
[firstname]
widget:atts:onchange="happyBirthday(this.value);"


This directive will cause our happyBirthday() function to be called with the value of the firstname field whenever its value is changed (i.e. when you change the field and tab out of it).  If you load up  your application, and go to the edit form for our table, and make a change to the firstname field, you will see our little javascript pop-up alert saying "Happy birthday".

Pages

Pages

How to include custom javascripts and stylesheets in your application

Adding a custom javascript

Using your javascripts in event handlers