Using jQuery

Table of Contents

• Introduction
• Theming Support
• Messaging and Events

Introduction

Even if the user interface in EPiServer is based on the Dojo framework, the jQuery framework will still be supported and available. In EPiServer 7, only the standard jQuery library will be generally available.

Theming Support

The theming is based on the Dijit theming support using .less when assembling the final theme css files. There is no explicit support for theming of jQuery UI widgets, but a base set of CSS rules will be loaded which will style the most common HTML elements. Additional CSS rules can be included in css files registered using the client side module configuration.

Advanced Theming

Since the standard theme is based on less with colors and sizes defined in a separate less file, you can reuse this when theming other UI elements. When the EPiServer Framework msi package has been installed you will find this file 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 very briefly a .less file importing common variable declarations and then using a shared color definition in a general purpose CSS class:

Copy 

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

Messaging and Events

Since a lot of different client side frameworks exist which can be used simultaneously in the same application, a demand for communicating between them arises. To remedy this, there is a message passing service designed for passing messages between frameworks. The jQuery framework is registered by default.

The Inner Workings

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.

How to Use It from Dojo

From Dojo it is very easy. Just use the ordinary dojo.publish and dojo.subscribe.

How It Is Used from jQuery

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

CopyJavaScript

$.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:

CopyJavaScript

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

Registering a Toolkit

The example below shows how the jQuery is registered:

CopyJavaScript

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. Can be useful if the message bus is chatty. The function receives all arguments passed to the publishing method, and should return true to pass the message on to the other toolkits; otherwise false.