All about integration – Part 1

There are several options to integrate JavasScript components in Wisej applications. These can be components that are needed to cover some specific task, have a special appearance or functionality that you require or simply some component that you are already familiar with or have bought some commercial license for.

The first way to integrate components in Wisej is through Extensions

We have already created a growing list of ready to use Extensions, including Google Maps, various editors (see http://wisej.com/blog/editors-choice/) , Gauges, Charts, Barcode reader, Fonts, Icons, Calendar and many more.
Find the complete list here: http://wisej.com/extensions/

Extensions can be used very easily. Just download from our website and then (optionally) run the registry script to make them directly available in Visual Studios Toolbox.

Learn more about Extensions in our overview: http://s3.amazonaws.com/wisej/downloads/Extensions/Wisej-Extensions.pdf

You can also define and create your own Extensions and share them with your colleagues or the Wisej community.

Another more flexible way that is also the main topic fo this series of blog articles is our Widget Class.

It´s part of the core Wisej technology and can be easily configured.

There are 2 main properties, one is a packages collection where you can define the resources that are need to include the JavaScript component. Usually it´s a mix of JavaScript script files and CSS files.

You can either host them on your servers or link to a CDN that most vendors/authors of JavaScript offer.

The second property of the Wisej widget is called InitScript and here you define the startup code that is needed to initialize the JavaScript component. You can define default properties, wire events, have different code between design mode and runtime mode etc.

All these different options will be covered in more detail.

Hands on – Dev Express

I have selected 4 controls of the impressive list of DevExpress DevExtreme suite (https://js.devexpress.com/).

  • dxPivotGrid
  • dxCircularGauge
  • dxBarGauge
  • dxGallery

In the packages for each component I add the following references:

package1.Name = “jquery.js”;
package1.Source = “https://code.jquery.com/jquery-3.1.0.min.js”;
package2.Name = “jszip.js”;
package2.Source = “https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js”;
package3.Name = “dxall.js”;
package3.Source = “https://cdn3.devexpress.com/jslib/16.2.6/js/dx.all.js”;
package4.Name = “dxspa.css”;
package4.Source = “https://cdn3.devexpress.com/jslib/16.2.6/css/dx.spa.css”;
package5.Name = “dxcommon.css”;
package5.Source = “https://cdn3.devexpress.com/jslib/16.2.6/css/dx.common.css”;
package6.Name = “dxlight.css”;
package6.Source = “https://cdn3.devexpress.com/jslib/16.2.6/css/dx.light.css”;

I am using names for the packages in case some other javascript components in my Wisej application use the same resources which is quite likely for the jquery part. 

Wisej´s package manager takes care of loading the scripts in the correct defined order and loads each named script only once.

dxPivotGrid

DevExpress Pivot Grid is a quite powerful control that can be easily used in Wisej.

pivot1

In my sample application I will feed it with data from the server side. I have created a simple function that generates random data but of course this data can come from database queries, or some other complex business logic. Here is the initialization script I have defined for the dxPivotGrid:

pivot2

pivot3

The DevExpress Custom Store is linked to my server code through the postback Url and will fire an event when data is needed.

The server implementation is as simple as this:

pivot4

It just returns a json file with all the (raw) data needed for the Pivot Grid. All the sum calculations and grouping is done by the dxPivotGrid.

dxCircularGauge

circulargauge1

The initialization script contains a few definitions like min/max value, steps etc. and also attaches 2 event handlers.

circulargauge2

The 2 buttons are used to increase or decrease the temperature by 10 degrees. They are defined with Repeat = true so holding the button down keeps adding/removing until you release the mouse.

The 2 events are used to add some server side processing:

circulargauge3

In case of the Initialized event I determine the start and end values that have been defined.

circulargauge4

I´m using 2 WebMethods to bridge between client and server code.

When an option is changed I check if it´s the value option and then I compare against the start/end values.

When the limit is reached, an AlertBox is shown and the value is set to the limit.

As you can see, event data is passed with a dynamic object. In case of OptionChanged this data is transferred:

{optionName: e.name, optionValue: e.value}

I could have used similar code for the Initialized event but wanted to show the 2nd approach as well.

dxGallery

This is another nice control from DevExpress that can be used in Wisej very easily.

gallery1

Please note the navigation links at the bottom. You can also swipe to navigate.

Again the initialization script that is needed is quite simple:

gallery2

In this sample, the pictures are statically defined in the init script, but you could easily follow the same way I did with the Pivot Grid to supply that control with images queried by server code.

dxBarGauge

The last control I want to integrate into a Wisej app in the scope of this article is a Bar Gauge:

bargauge1

With the ComboBox at the right you can change the color palette that is used:

bargauge2

Conclusion:

Using DevExpress controls in Wisej is quite easy including server side data feeding and wiring events between client and server.

In the next articles of this Integration blog series we will integrate more JavaScript controls that are quite popular.

Hosted on Wisej Demo Server
Zip File (18 Kb)

Leave a Reply