Hi. Something like particle.js?

Answered
0
0

Hi. Something like particle.js ?
Would be cool to have something like a WIsej ParticlePanel, ParticleGroupbox or ParticleBackground controls
Demo: http://vincentgarreau.com/particles.js/
Thanks in advance!

  • You must to post comments
Best Answer
1
0

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. 🙂

 

 

 

 

 

  • Ser Gar
    Awesome. But exist way to bind or set widget properties/methods from server and reflect to client properties/methods? Thanks in advance!
  • Ser Gar
    For example, i need to send “org company data array/list” from server to client “org chart widget/plugin”. Until know i see only “initscript” and “packages” widget properties. Maybe a way to implement or bind server widget properties/methods to client plugin properties/methods.
  • Luca (ITG)
    It depends on the third party widget. Most javascript (jQuery or non jQuery) widgets don’t support changes after creation and they need to be destroyed and recreated, other do. In InitScript you can add javascript methods and call them from the server using Call(). You can also attach to events and send them back to the server. Look at the source code of the /extensions we published that use Wisej.Web.Widget as the base class.
  • Luca (ITG)
    You can send data by calling a method into the widget, or you can pull data from the widget either by calling a server method or a postback. I will send you an example.
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.