Gridx in XPages – 5: Modularizing Common Resources

The second post in this series showed how to use the djConfig property to make the Gridx (or any other library’s) resources available to an XPage. Looking forward, I wanted to find a way to modularize the common resources required by Gridx so they do not need to be included on every XPage. In this post, I’ll describe the challenges and then show a much cleaner solution that I found that makes it easy to reuse the resources.

Gridx Series

Gridx in XPages — Entire Series

Modularization Challenges

I thought it would be pretty straight forward to move the style sheets, djConfig property, and beforePageLoad code to define the modulePath to a custom control and reuse it across any pages that display a Gridx grid. Unfortunately, it wasn’t that simple.

The style sheets and the beforePageLoad code worked fine from a separate custom control, but the djConfig property only worked when on the XPage. This would still be an improvement in reusability, but would require setting that property on all XPages that display a grid.

I then thought that I could set the djConfig property in the application’s XSP properties. While that works for other djConfig attributes, it does not work for modulePaths because it still has the same escaping problem that necessitated the beforePageLoad code to begin with.

Dojo Module Path Resource

Fortunately, I found a much simpler solution – a Dojo Module Path Resource!

It’s a page-level resource, just like a style sheet, script library or Dojo module. It makes it much simpler to reference the Gridx code within the application.

1. From an XPage or custom control, go to the Properties view and select the Resources subtab.
2. Click the Add… button and select Dojo Module Path Resource…
3. Enter gridx as the prefix and /gridx as the url

This tells the page to look for a module named gridx at the location /gridx. The forward slash starts from the WebContent folder in the application and we put the code into a folder named gridx. (Adjust as needed if your directory structure is different.)

This is much simpler; it removes the need for the djConfig property and the beforePageLoad code!

Common Gridx Resources

Unlike the djConfig property, specifying a Dojo Module Resource Path works from a custom control included on a page, so now we can separate the common resources into a custom control for easy reuse.

Now, I have a custom control named ccGridxResources. This is the full source:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

  <xp:this.resources>
    <!-- Claro Theme -->
    <xp:styleSheet href="/.ibmxspres/dojoroot/dijit/themes/claro/claro.css"></xp:styleSheet>
    <xp:styleSheet href="/.ibmxspres/dojoroot/dijit/themes/claro/document.css"></xp:styleSheet>

    <!--  Module Path to locate Gridx Library -->
    <xp:dojoModulePath url="/gridx" prefix="gridx"></xp:dojoModulePath>

    <!-- -Main GridX Stylesheet  -->
    <xp:styleSheet href="gridx/resources/claro/Gridx.css"></xp:styleSheet>
		
  </xp:this.resources>
	
</xp:view>

Line 10 is the Dojo Module Path Resource that specifies where to find the files. The rest are the 3 stylesheets that we were already including. The djConfig property and beforePageLoad code are no longer required.

Streamlined XPage to Create the Grid

Now, this is the full source of the XPage required to create the same grid as the last post, accessing live data via a REST service.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">

<xc:ccGridxResources></xc:ccGridxResources>

<div id="gridX_Here" style="height:300px; width:300px;"></div>

<script>
  require([
    "gridx/Grid", "dojo/store/JsonRest",
    "gridx/core/model/cache/Async", "dojo/domReady!"
  ], function(Grid,JsonRest, Cache) {


    var store = new	JsonRest({
      idProperty: '@noteid',
      target: "X_REST.xsp/gridData"
    });

    var columns = [
      {id: 'first', field: 'firstname', name: 'First', width:	'70px'},
      {id: 'last', field: 'lastname', name: 'Last'},
      {id: 'state',field: 'state', name: 'State', width: '40px'}
    ];

    grid = new Grid({
      id: "my_gridX",
      cacheClass: Cache,
      store: store,
      structure: columns
    });

    //Put it into the DOM tree.
    grid.placeAt('gridX_Here');
    grid.startup();

  });
</script>
</xp:view>

Now we have a more modular design and a simpler page structure to work with as we get ready to add features to the grid.