Hi. Something like particle.js?

Hi Ser,

You don’t need a Wisej extension to use third party javascript widgets. Wisej already includes the Wisej.Web.Widget control that you can add to any container (at design time too). It let’s you import any script and css and run any initialization code. It’s actually a lot simpler than using vanilla html.

We may turn this into a tutorial. But for now, I created a simple sequence of screenshots and a zipped project.

This are the basic steps:

1- Drop a Wisej.Web.Widget control on a container. You can set the BorderStyle, colors, etc.

2- Add the “packages” you want to use. You can refer to a CDN url or to a local url if you host it on your server. You can specify multiple js and css files. Wisej will load them in sequence. Therefore if you have dependencies, place the libraries that load first at the top. In this case we are loading just particles.js.

3- This is the most important step and it depends on the widget/library you are using. It requires knowledge of the library and of javascript in general. Most third party widgets need a DOM Element to wrap. The type of the element depends on the widget, some need a <textarea> others need <canvas>, and some are happy just with a <div>.

Wisej.Web.Widget is a simple <div> and it makes the reference to the DOM Element available to “this.container”. You can use this directly with jQuery or any other library that just needs a DOM element. In other cases you have to create a new one, the most common way is to use this.container.innerHTML = “your html”.

The particles library is happy with a <div> but it needs an id, it cannot use the element directly. Look at the lines in the screenshot below. I assigned an id to the element and then simply initialized the library. The json is copied and pasted from http://vincentgarreau.com/particles.js/.

NOTE: You’d have to do this (and more) with Angular, ASP.NET/MVC, plain HTML, etc.

4- Your are done! Almost actually. When you click OK, Wisej will immediately render the imported widget in the designer. However, in this case, you will not see it because the lines are white and the background is white. Change the background on the widget and you’ll see:

Hit Run and you’ll get your widget running.

You can even receive events, but you’d have to attach to the events fired by the widget and send them to Wisej using

this.fireWidgetEvent(“name”, {data});

On the server, just attach to WidgetEvent. That’s all. 🙂