Using jQuery

Note: This topic has no later version.

Table of contents

• Theming support
• Messaging and events

Although the Episerver user interface is based on the Dojo framework, Episerver also supports the jQuery framework. In Episerver 7, only the standard jQuery library is generally available.

Theming support

Theming is based on the Dijit theming support using .less when you assemble the final theme css files. There is no explicit support for theming of jQuery UI widgets, but a base set of CSS rules is loaded which styles the most common HTML elements. You can include additional CSS rules in css files that is registered by using the client-side module configuration.

Because the standard theme is based on less with colors and sizes defined in a separate less file, you can reuse this when you theme other UI elements. When you install the Episerver Framework msi package, the file is in the folder C:\Program Files (x86)\EPiServer\Framework\<version>\Application\UI\ClientResources\dojo\dijit\themes\Sleek.

To reuse this file you must use .less or its .net cousin to compile your less stylesheet into CSS.

The following example shows a .less file importing common variable declarations and then using a shared color definition in a general purpose CSS class:

@import "variables.less"
.header {
    color: @text-color
}

Messaging and events

Communication among client-side frameworks that you can use simultaneously in the same application occurs through a message passing service. The jQuery framework is registered by default.

When registering a toolkit we inject a proxy function instead of the original, enabling us to eavesdrop on what is being passed around in that toolkit. If the criteria for the message are met we pass it along to the other participating toolkits.

Dojo proxy function

From Dojo, use the following:

dojo.publish

dojo.subscribe

jQuery proxy function

To publish a message, supply the channel and the arguments:

$.event.trigger("/channel/messageName", arguments);

To subscribe (or listen) to messages, bind to any node (for example, document) with the channel and the event handler:

$(document).bind("/channel/messageName", function(){})

Registering a toolkit

The following example shows how the jQuery is registered:

epi.shell.messaging.registerLibrary("jquery", $.event, "trigger", 
   function (event, data, elem) {
      if (typeof event == "string" && !elem) {
         return true;
      }
      return false;
   });

The parameters, in order of appearance:

1. Name of the library.
2. Context within the library where the method for publishing messages exists.
3. Name of the method used for publishing messages. Should be found on the context object (publish, trigger etc).
4. Function that enables filtering of messages passed on from the library, which can be useful if the message bus is chatty. The function receives arguments passed to the publishing method, and returns true to pass the message on to the other toolkits; otherwise false.