Profound UI is a comprehensive Web 2.0 user interface framework. It has features similar to other popular JavaScript frameworks you may have heard about, such as jQuery, ExtJS, or Dojo. However, unlike most other JavaScript frameworks, Profound UI is designed to be driven by a server-side language, such as RPG, rather than client-side JavaScript. This way, RPG developers can be productive right away in creating functional Web 2.0 applications. They can do most tasks using just RPG code, while HTML, JavaScript, and CSS would only be required for advanced functionality.

Part of what makes this possible is the abundance of Web 2.0 widgets in Profound UI, which include anything from simple textboxes, links, and buttons to the more advanced pull-down menus, grids, and chart widgets. However, sometimes you may want to use a widget provided by another framework, such as the calendar widget in Dojo, in your Profound UI application. Luckily, Profound UI was designed to seamlessly integrate and minimize conflicts with any other JavaScript framework. This post will explain how to make that integration happen and provide an example.

There are 2 primary ways of loading an external framework:

1. First, you can simply drop the external CSS and JavaScript into the /profoundui/userdata/custom directory or subdirectory. Profound UI automatically reads this directory and includes any JavaScript or CSS files placed there into its applications.
2. The other method is to load the external files on-the-fly by specifying the “external javascript” and “external css” properties on a record format, or using the pui.loadJS() and pui.loadCSS() API. This method is especially useful if the external framework is hosted on a CDN site, rather than on your own server.

Once the right files are included, you can begin to write code to integrate the framework’s functionality into Profound UI. Ideally, the integration is as generic as possible, so it can be reused by more than one of your programs. You may even consider creating custom widgets within Profound UI to accomplish this.

The following code illustrates how to load the Dojo framework and integrate its Calendar widget.

var dojoLoading = false;
var dojoLoaded = false;
function loadDojo(onsuccess) {
 if (dojoLoading) return;
 if (dojoLoaded) {
 if (onsuccess != null) onsuccess();
 return;
 };
 dojoLoading = true;
pui.loadCSS("http://ajax.googleapis.com/ajax/libs/dojo/1.8.2/dijit/themes/claro/claro.css");
 pui.loadJS({
 path: "http://ajax.googleapis.com/ajax/libs/dojo/1.8.2/dojo/dojo.js",
 test: function() {
 return (typeof dojo != "undefined");
 },
 callback: function() {
 require([
 "dijit/dijit",
 "dijit/Calendar"
 ], function(xhr, parser, dom) {
 if (onsuccess != null) onsuccess();
 dojoLoading = false;
 dojoLoaded = true;
 });
 }
 });
}

function showDojoCalendar(calDateObj) {
 var cal = new dojo.dijit.Calendar({});
 var calDiv = document.createElement("div");
 calDateObj.parentNode.insertBefore(calDiv, calDateObj);
 calDiv.style.position = "absolute";
 calDiv.style.left = calDateObj.style.left;
 calDiv.style.top = calDateObj.style.top;
 calDateObj.style.visibility = "hidden";
 var calDate = calDateObj.value;
 if (calDate != null && typeof calDate == "string" && calDate.length == 10) {
 var year = Number(calDate.substr(0, 4));
 var month = Number(calDate.substr(5, 2));
 month -= 1;
 var day = Number(calDate.substr(8, 2));
 cal.set('value', new Date(year, month, day));
 }
 dojo.connect(cal, "onChange", function(value) {
 if (getObj("calendar") == null) return;
 var month = String(value.getMonth() + 1);
 if (month.length == 1) month = "0" + month;
 var day = String(value.getDate());
 if (day.length == 1) day = "0" + day;
 var year = String(value.getFullYear());
 changeElementValue("calendar", year + "-" + month + "-" + day);
 pui.click();

 });
 calDiv.className = "claro";
 calDiv.innerHTML = "";
 cal.placeAt(calDiv);
}

pui.onload = function() {
 var calDateObj = getObj("calendar");
 if (calDateObj == null) return;
 if (dojoLoaded) showDojoCalendar(calDateObj);
 else loadDojo(function() { showDojoCalendar(calDateObj) });
}

The Dojo calendar is somewhat different from the date field widget provided by Profound UI, in that it is not a pop-up calendar, but a stationary one. To integrate the code above, save it into a new file in the /profoundui/userdata/custom directory. To use this Dojo calendar integration, simply drop a textbox onto a record format in the Visual Designer, bind it to a date field in the RPG, and give it the id of “calendar”. The calendar will automatically display the date contained in the RPG field and populate the RPG field with any new date selected by the user. What’s nice about this implementation is that Dojo is loaded on-the-fly, rather than in advance, when any screen containing the calendar is displayed. The following screenshot illustrates what the calendar might look like in your application: