Using JQuery input plug-ins in your JRapid App

When using code generation tools, the extensibility and customization issues are always a concern. JRapid generates a complete user interface with special widgets for each property data type and it even offers more options to import as add-ons.

But what about when you want to use your own widgets or leverage the vast amount of JQuery options available out there? Luckily, I found out that this is very easy to accomplish with little effort. I’ll walk you through the process.

For this example, we’ll use the alphanumeric plug-in by Paulo P. Marinas.

Most JQuery plug-ins aimed at helping users with data input work with text input elements. They are easily applied to a field by just selecting the element and calling a function like this:

$(“#my_input”).pluginname();

JRapid helps with the creation of widgets for your project. Go to the Add-ons -> Create add-on menu. 

Select “Widget” for the type field and complete the dialog as shown in the next image. Just enter a name for the widget by which you’ll make reference to it in your JRapid project and the name of the function that initializes the JQuery plug-in. As explained in the alphanumeric plug-in documentation, this is “alphanumeric”.

Next, use the JRapid Eclipse plug-in to get your project into your local workspace. Go to the project’s file tree and look for the WebContent/jrapid-runtime/extras/widget-alphanumeric folder that the create add-on wizard created. Inside this folder create a “js” folder. Download the alphanumeric files from here, unpack and copy jquery.alphanumeric.pack.js to the js folder you’ve just created.

Finally, edit your app definition file, Main.xml. Look for the config element and in there for this element:

<usewidget jquery="alphanumeric" name="alphanumeric"/>

Modify it so that it looks like this:

   <usescript location="../jrapid-runtime/extras/widget-alphanumeric/js/jquery.alphanumeric.pack.js"/>

You’re ready to use your widget on any property. Just add the widget=”alphanumeric” attribute. For example:

<entity label="Product" menu="Menu" name="Product"> 
       <property display="primary" label="Name" name="name" widget="alphanumeric" /> 
       <property label="Price" name="price" type="double" /> 
</entity>

The generated form for the Product entity looks like the following image.

That will prevent users form entering characters other than alphanumeric to the product name.
You can read more about creating widgets in JRapid's Widget Add-on documentation.