Add Custom JavaScript Code

From JRapid

Jump to: navigation, search

Contents

Introduction

Based on your high-level application design, JRapid generates all the JavaScript your application will need. However, there are cases when adding your own JavaScript can be very helpful. JRapid gives you two distinct ways to do this. First, you can edit the Main.js file created under WebContent/Main/js. This file is automatically included in all pages in your project. The second way you can add custom code is to create your own file anywhere under WebContent and include it in your source. It is recommended you place it under the WebContent/Main/js folder along with the auto-generated Main.js. With these two methods you can tweak parts of JRapid or keep your own JavaScript methods separate from the auto-generated ones.

Your JavaScript UI code can even access back-end services through XML RPC. Through RPC this exposes server methods to the front-end.

Integrating CSS and JavaScript contains a description and an example of how to add JavaScript that manipulates, adds or removes CSS styling in your project on the fly.

Editing the included Main.js

Editing the auto-generated Main.js file is a quick way to add your own JavaScript, and can be found at WebContent/Main/js in either the file display or from Eclipse. This file is auto-generated void of any code with just a comment line at the top and is by default included in all your project HTML.

Note: when making multiple changes to the CSS and JavaScript files, they can become cached in your browser. If you are not seeing updates you make to these files and have synchronized with the file view showing your changes clearing your cache will probably help.

Example

Go to WebContent/Main/js and open Main.js. Add the following to the file:

// WRITE HERE YOUR CUSTOM JAVASCRIPT CODE

function showAlert(obj){
    alert('This is a custom alert created by the user');
}

Then add an action for one of your properties. This will cause a link to be added to forms triggering your JavaScript:

<property label="Name" name="name" type="string" unique="unique">
     <action label="Custom Javascript" type="javascript" function="showAlert"/>
</property>

Finally clicking on the link in your form should yield:

File:js_simple_result.PNG

Adding the JavaScript

This can be accomplished from the designer's file view, but it is simpler to accomplish from the Eclipse IDE. Create a file under your Main folder to keep this code apart from your Java code and any custom CSS. Make sure to synchronize your project after the addition so it exists in your web project.

File:wherejs.PNG

This file then needs to be added to your source's configuration section with a usescript line so the application knows where to find it:

File:wheresource.PNG

Actions

Your newly added custom code can easily be linked to actions for uses like adding warnings, or displaying important information. These actions also give you a functionparams tag that allows you to pass one or more values to your JavaScript function.

Example

The example here links a form action to a custom JavaScript function:

<entity label="Employee" menu="menu" name="Employee">
        ...
        <action function="display" functionparams="lastName" label="Javascript" location="form" name="javascriptFunction" type="javascript"/>
        ...
    </entity>
function display(obj, ids, param1) {
	alert('You have chosen an employee with id: ' + ids);
}

File:jsresult.PNG

Event Listeners through JQuery Live

The JQuery library is available in all JRapid projects. Live Event is a JQuery feature that can be used to attach functionality to particular objects based on their name. The custom CSS page has an example where live event is used to link a check for particular text and if found change the style class of the field.

See also

Personal tools