Developing for the JRapid Community

In this post you will learn all about publishing of new community views, widgets, transformers or templates.

In some particular cases, you will need to override or create new community items like views, widgets, transformers or templates. To override existing items you can directly edit the XSL, JS or CSS files of the item which are automatically downloaded to the project when it is imported.

Create or Export items

The web-based IDE supports community items development and publishing. To create or export a community item go the Community menu > Create Item or Community > export item.

Create Item

The "Create Item" action is intended to configure and create the necessary files and folders in the project for the item's development .

Type: The type of item you are going to create. The possible values are: transformer, widget or view.
Name: The name of the item.

The CreateItem window is dynamically updated after a type selection event.

Create a Transformer

A transformer is basically an XSL file which transforms an XML element defined at an Entity level to an output file like an HTML or XML file. The most popular transformers are the Toolbar and the JQuery Desktop which are useful to transform your JRapid applications into desktop-like applications.

To create a transformer select the "Transformer" type.

Generation path: Indicates the path were the generated file will be created. It is not recommended to change the default path.
Filename: The name of the generated file, the transformed file.
Run for each entity: Boolean property to specify if you want this transformation to be applied to each entity.
Regenerate always: Boolean property to specify if you want the transformation to happen each time you re-generate the application's code.
Parent: XPath expression to select the XML elements for which the transformation will run.

Example:

The following image displays a CreateItem window which will create local files for a transformer named "transformername". This transformer will transform XML elements of name <transformername> and the transformation will occur after each code generation.

After submitting this window, the following changes will happen in your project:

transformername.xsl file created in the projectname/Extras folder. This is the file where the transformation happens.
transformers.txt (projectname/Extras/transformers.txt) file updated. This is where the transformers are registered. The code generator reads this file to apply the corresponding transformations.
transformer-transformername folder created under the /jrapid-runtime/extras directory.

If you are already using a transformer you can copy the main structure of the XSL file and use it as a template.

Create a Widget

Widgets override the behavior of an input field. Popular widgets are the JDatepicker or the Mask Input widgets.

To create a Widget select the "Widget" type.

Use XSL code: Boolean property which specifies if the Widget will use an XSL file to transform the default input field of the property.
JQuery: name of the JQuery function which is going to be applied to the input field of the property.
JQuery Options: array of JQuery options.

Example:

The above screenshot explains how to create a Widget with name "widgetname".

Uses XSL code: specifies if the widget uses an XSL file to transform the default input field of the property
JQuery: the name of the jquery function which applies the widget code to the property.

After submitting the form, the following changes will happen in your project:

widgetname-widget.xsl file created under the projectname/Extras directory. This is the XSL which transforms the default input field of the property.
Main.xml file updated. The following element is added to the <config> element:
The Widget is registered in the widgets.xsl (projectname/Extras/widgets.xsl) file.
<usewidget jquery="jquerymainfunction" name="widgetname"/>
widget-widgetname folder created under the /jrapid-runtime/extras directory. For each JavaScript and CSS files under this folder a <usescript> or <usestylesheet> element will be added as a child of the <usewidget> element.

e.g: If the files jsfilename.js and cssfilename.css are directly under the widget-widgetname folder.

</usewidget>

You can also add external JavaScript or CSS files to your project by adding the corresponding elements as childs of the <config> element.

Create a View

A View changes the way a Listing is displayed. Most popular Views are googlemaps, googlecharts and tableicons views. A View is similar to a Transformer in the sense that its output is the result of an XSL transformation. This XSL transformation transforms the XML Web Service response into an HTML web page which displays the data.

To create a View select the "View" type.

Creating a View is much more simpler than creating other type of items. You should only specify the name of the View and submit the form.

Example:

After submitting the form, the following changes will happen in your project:

viewname-view.xsl file created under the projectname/Extras directory. This file is where the XSL transformation of the Listing element occurs.
Main.xml file updated. The following line is added to the config element.

<useview name="viewname"/>

Inside this element you should add the necessary <usestylesheet> and <usescript> elements to attach CSS and JS resources to the View.
views.xsl (projectname/Extras/views.xsl) file updated. The view is registered in the project.
view-viewname folder created under the /jrapid-runtime/extras directory. For each JavaScript and CSS files under this folder a <usescript> or <usestylesheet> element will be added as a child of the <useview> element.

e.g: If the files jsfilename.js and cssfilename.css are directly under the view-viewname folder:

<useview name="viewname">

<usescript location="../jrapid-runtime/extras/view-viewname/jsfilename.js"/>

<usestylesheet location="../jrapid-runtime/extras/view-view/cssfilename.css"/>

</useview>

You can also add external JavaScript or CSS files to your project by adding the corresponding elements as childs of the <config> element.

Export Item

The Export Item action creates the necessary files for the item to work and publishes a packed version in the JRapid Community.

The following attributes are common to either export a widget or a view.

Type: The type of item to export (Widget, View)
Title: The title of the item
Category: The category of the item.
DTD attributes: extra DTD attributes you need to add to the Main.xml DTD validator.

You should also specify the same attributes listed in the creation process.

Export Widget

Export View

Conclusion

Developing for the JRapid community is an easy task if you are familiarized with XML, XSL, JavaScript and CSS technologies. JRapid offers a large variety of ready to use views, widgets, transformers and templates which you can import from the web IDE. JRapid allows developers to override the existing community items and keep changes either locally or publish them to the community.

Developing for the JRapid Community

You need to be a member of JRapid Community to add comments!