Adding widgets and views to your JRapid projects

04/08/2009. Juan Martin Pampliega

For my first example I will use the googlemapspoint widget. This is a simple widget that enables a user to fill an input field with latitude and longitude values by clicking on a point in Google Maps. I start by showing you how to add the widget to a project called community2. There are two ways to do this through the JRapid Community webpage or your project?s IDE page.

In the Community web page you need to log in as your registered user for JRapid. Afterwards go on to the Widgets section, find the google maps point widget (it?s near the top of the list).

Then click on the ADD TO PROJECT button, and a list of your JRapid projects will slide down wards.

Now if you check the option of the project you want to add the widget to, after some blinking of the button, that indicates the operation is being processed, the widget is finally added.

The second way to add a widget is through your project’s IDE page. To get to the project’s IDE page go to http://www.jrapid.com/ then login, and click on the project you want to add the widget to. Once you are in the IDE page, go to the top bar, position the mouse over the Community and select the “Add widgets” option. A pop up window will appear, ( disable your pop-up blocker if it doesn’t) it will show a list of your available widgets. Find the widget, “googlemapspoint” in this case, and click on the Import link, wait a few seconds and the page will show “Added widget.” once the operation is finished.

After adding a widget to a project you now need to use it. For this you need to have a property in an entity to apply this widget to. In this example I have a property with the name location, and I add to it widget=”googlemapspoint”, apikey=" " and center="-34.5989137963031;-58.37935209274292" as shown in the screenshot. The attribute widget=”googlemapspoint” means that the input field in the corresponding form for the entity will have this widget applied to it, the center attribute means that the map will be centered in that point the first time it is opened, the apikey attribute specifies the Google Maps API key for the domain you are using. Once you’ve done this click on “Generate full, changes only” and refresh the entity’s form and you will now be able to use the widget.

Adding a view a project follows the same general guidelines as adding a widget. I will let you figure out how to add one by seeing the widget explanation and skip directly to explaining how to use one once it is added to a project. Views are ways that information is displayed in an entity’s listing. Therefore, to use them you need to create a listing with the attribute view=”googlemap” to use the googlemapsview. Most views have compulsory properties that the entity where they it is created needs to have. For example, the googlemapsview needs the entity to have the address, city and status properties. The address and city are for using geocoding to locate the point in the map and status is for the information supplied in the marker’s bubble.

Once you are done adding the listing to an entity click on “Generate full, changes only” and now you just need to add new entries with the form for them to show up in the listing. Remember that you can the listing’s filters as any other kind of listing to limit the result shown in the view.

Creating Widgets

Creating a widget consists of three main steps. Creating the widget XSL file, creating any additional file you might need and adding it to the files in the Extras directory.