Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Introduction

This topic explains what Widgets in general are and specifically how Sidebar Widgets can be built in XperienCentral. A very general definition of a widget is "an element

Anchor
top
top
XperienCentral widgets are plugins that contain a widget. A widget is an "element of interaction" in a user interface. Basic widgets are for example buttonscan be buttons, input boxesfields checkboxes and checkboxesso forth. A widget can consist of other widgets Widgets can be combined together to form more complex combined ones and further combined a widget can make a whole functionality available to the user.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 shortened referred to as simply Dojo. Dojo defines a way of implementing this kind these kinds of compound widgets using browser functionality such as HTML, CSS and JavaScriptas 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 from the bottom - up. The widgets used in a component can be standard Dojo widgets, 3rd party widgets, XperienCentral widgets or custom oneswidgets. Dojo-based widgets are used to build up all parts of throughout 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 by adding new Sidebar widgets. It is also possible to create new interactive maintenance panels. A Sidebar Widget widget is a visible component which can be docked to in the left or right-hand side of Sidebar in 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 purposeWorkspace.

This section contains a topic on creating Sidebar widgets by beginning with an archetype which is provided as a starting point for development. The code generated by the archetype is explained in detail. The generated code is explained, including the Dojo toolkit basics, which will help you getting get started with your own development.


Section


Column
width33%

Other pages in this topic

Child pages (Children Display)
alltrue
showLabelsfalse
showSpacefalse
titleIn This Section
cqllabel = "api"
labelsapi


Column
width33%

Related pages


Column
width33%

 External related pages

 

...



...

In This Topic

Table of Contents
maxLevel32
minLevel2


...

XperienCentral

...

Client-side

...

Architecture

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


Section


Column
width575px

Image RemovedImage Added


Column

 From top to bottom:

  • The user interface of the XperienCentral consists of Dojo WidgetsXperienCentral consisting of Dojo widgets.
  • Business The business logic classes provide an API for e.g. managing content which we call managing things such as content (the client-side API).
  • The communication between the client (browser) and the server is streamlined using Dojo data stores.
  • The client-side implementation is backed by server-side REST endpoints which provide access to the content in XperienCentral content.



External references: Dojo / Data Stores in DOJO


Back to top


...

Anchor
dojoToolkit
dojoToolkit
The Dojo Toolkit

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


Section


Column
width622px

Image RemovedImage Added


Column


 

Documentation

...



Anchor
dojoDoc
dojoDoc
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 using the information available in the Developing Sidebar Widgets page topic.

References:

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:

Client-side architectureImage Removed

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.

Image Removed

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

...

Back to top


...


...

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  Sidebar widgets and panel widgets. Sidebar widgets are widgets that can be docked in either the left or right sidebarSidebar in the XperienCentral Workspace:


Image RemovedImage Added

Sidebar widgets are described in detail on the in the Developing Sidebar Widgets page topic, including how to create one using an archetype. Panel widgets are widgets are widgets that can be opened via a menu item in the configuration Configuration menu, such as the standard Layout panel:

Image Removed


There is at the moment of writing Image Added

At this time there is no archetype or specific documentation for creating custom panel widgets. Therefore it requires more knowledge to write one than to write a sidebar widget.

...

Contact your GX Software consultant for help in creating a new panel widget. 

 

Back to top

 

...

 Dojo Widget Composition

Keep the following thins in mind when determining planning 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 reused 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) first 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.


 Back to top