Copy of Widgets

Introduction

A widget is an "element of interaction" in a user interface. Basic widgets can be buttons, input fields checkboxes and so forth. Widgets can be combined together to form more complex functionality, for example  a widget consisting of multiple input fields, buttons and a radio box. The user interface in XperienCentral is written in JavaScript which makes use of a framework called the Dojo Toolkit, usually referred to as simply Dojo. Dojo defines a way of implementing this kind of compound widgets using browser functionality such as HTML, CSS and JavaScript. Except for standard HTML tags, other widgets can be added in a similar fashion to build up a new client side components bottom-up. The widgets used in a component can be standard Dojo widgets, 3rd party widgets, XperienCentral widgets or custom ones. Dojo based widgets are used to build up all parts of the XperienCentral user interface.

It is also possible to write custom code using this technique. The most common way to use widgets in custom code in XperienCentral is in Sidebar Widgets, but it can also be used for creating highly interactive maintenance panels. A Sidebar Widget is a visible component which can be docked to the left or right hand side of the XperienCentral edit environment. To confuse the terminology Sidebar Widgets are often simply called Widgets, especially by non-developers.

There is a separate page on Sidebar Widgets in this topic which goes into the practical details on how to start developing widgets based on an archetype specially provided for this purpose. The generated code is explained, including the Dojo toolkit basics, which will help you getting started with your own development.

On this page

XperienCentral client-side architecture

The client side architecture introduced in XperienCentral makes it possible to add functionality to the edit environment using Dojo Widgets. The power of this architecture is that you can add functionality to the edit side which reacts on changes, such as when starting editing or viewing other content. Below a high-level description of the client-side architecture.

External references: Dojo / Data Stores in DOJO

Dojo Toolkit

The Dojo Toolkit is an open source modular JavaScript library, or more specifically a JavaScript toolkit, designed to ease the rapid development of cross-platform, JavaScript / AJAX-based applications and web sites. A few examples of standard Dojo widgets you can use:

Dojo documentation

There is a lot of documentation available on Dojo. Here are a few starting points. If you’re not familiar with the Dojo toolkit, have a look at the tutorials. Another approach is to dive right into it by creating a sidebar widget based on the archetype and analyze the code using the Sidebar Widgets page.

• Website of the Dojo foundation: http://dojotoolkit.org
• On this website you can find dojo documentation: http://dojotoolkit.org/documentation
• The API is documented here: http://dojotoolkit.org/api/

The XperienCentral client-side API

Next to the standard Dojo toolkit XperienCentral has it’s own set of Dojo classes that can be used in custom widgets. They consist of widgets, business login objects and data stores:

This XperienCentral client side API is documented in JSDoc. JSDoc basically works like Javadoc, but for JavaScript in place of Java code.

A practical example of how to use this documentation can be found on the Sidebar Widgets page.

XperienCentral JSDoc: https://api.gxsoftware.com/jsdoc/

Widget plugins in XperienCentral

There are two types of widget plugins in XperienCentral: Sidebar Widgets and Panel Widgets.

Sidebar widgets are widgets that are placed in either the left or right sidebar:

Sidebar widgets are described in detail on the Sidebar Widgets page, including how to create one using an archetype.

Panel widgets are widgets that can be opened via a menu item in the configuration menu, such as the standard Layout panel:

There is at the moment of writing no archetype or specific documentation for creating custom panel widgets. Therefore it requires more knowledge to write one than to write a sidebar widget.

Dojo Widget composition

Keep the following thins in mind when determining the composition of Dojo widgets:

• Make sure that each widget is self contained.
• The widget should expose public properties, methods and events. This ensures that your widget can be used in other widgets.
• Divide responsibility ("granularity"). In general it is better to create a few smaller widgets with a specific function than one large widget with lots of user interface elements.
• Implement the "deepest" widgets (the parts) and work upwards towards the final functionality.

• Avoid using experimental widgets as much as possible. The DojoX package was originally intended for this purpose, although some components

• Check for existing widgets. Don’t reinvent the wheel, re-use as much as possible.
• Keep reusability in mind. Make sure your widgets can be reused in other widgets later on. Also write clear API documentation for your own widget using JSDoc.