wrapping js library for web component

Forum to discuss the new web client version of Servoy.

wrapping js library for web component

Postby pitc » Mon Feb 08, 2021 2:25 pm

In learning NG Client I have seen in this forum references to extending a third party javascript library or functionality to create a web component that can then be used within Servoy IDE.
In my current project I have a need to do a simple image crop. There are many js capabilities out there (see for example https://www.webdesignerdepot.com/2018/05/8-free-javascript-image-cropping-scripts-and-plugins/).
I would like to know if there is a generic approach to wrapping (if that is the correct term) a capability of a third party item to make a web component.
I have read the wiki on WebComponents (https://wiki.servoy.com/display/DOCS/WebComponents) but it is not exactly a step by step tutorial.
I had thought that the IDE might have a "build a web component" wizard or perspective but I do not see one in the latest (2020.12.1) version. Please correct me if that is incorrect.
I have gone through all the webinars but not found one to describe the step by step approach.
I imagine that others have done this before (for example https://forum.servoy.com/viewtopic.php?f=69&t=22250) and may have some learning experience to share.
If I have to learn a lot about the angularjs before I can wrap a 3rd party library that seems like so much effort!
Are there web references that people have used to learn and do what I am looking for?
Tom
Last edited by pitc on Mon Feb 08, 2021 4:05 pm, edited 1 time in total.
Tom
prospect-saas.com
pitc
 
Posts: 91
Joined: Thu Nov 14, 2019 2:22 pm
Location: Ottawa, Ontario, Canada

Re: wrapping js library for web component

Postby mboegem » Mon Feb 08, 2021 3:27 pm

Hi pitc,

All of the web packages that are available through the Servoy Package Manager, can be found on github (https://github.com/Servoy)
You will find examples for what you want to do.

Hope this helps
_____________________
Marc Boegem
Solutiative / JBS Group, Partner
• Servoy Certified Developer
• Servoy Valued Professional
• Freelance SAN Developer

Image
User avatar
mboegem
 
Posts: 1574
Joined: Sun Oct 14, 2007 1:34 pm
Location: Amsterdam

Re: wrapping js library for web component

Postby pitc » Mon Feb 08, 2021 4:17 pm

Thanks Marc,
yes I know about those examples.
What I was looking for was the reasoning behind the various files, the meaning of items.
Better for me is an actual step by step tutorial that explains the why.
Even better is if there is an IDE functionality for building a web component:
For example there should be all the "parts" needed such as files that are perhaps templates that one fills in.
I guess I am a higher level designer in that I look at the requirement such as "allow user to crop an image" then find a suitable solution from the web and then "drop it in the web component designer"!
I will keep looking.
Maybe eventually I will have to muddle through doing my own tutorial - much like: Patrick Talbot's https://wiki.servoy.com/display/DOCS/Creating+Client+Plugins.
Or perhaps there could be some collaboration.
Tom
prospect-saas.com
pitc
 
Posts: 91
Joined: Thu Nov 14, 2019 2:22 pm
Location: Ottawa, Ontario, Canada

Re: wrapping js library for web component

Postby swingman » Tue Feb 09, 2021 10:17 am

Hi Tom,

I have built some components on my own, but I'm no expert. I started by looking at the source code for the Servoy various components on Github and identified a simple one which I could understand.
Then I inserted my chosen js library, in my case d3.js. I would first do a "hello world"-style test to check the component reads my library. After this I would develop the component outside Servoy to get it working using constants as inputs.
Once working, I paste my code into my Servoy component to check if it still works. After this convert the constants one by one to properties I can set from Servoy, hook up event handlers and so on.

The first one took a while to do, but now I can do them much quicker.

Hope this helps,

Christian
Christian Batchelor
Certified Servoy Developer
Batchelor Associates Ltd, London, UK
http://www.batchelorassociates.co.uk

http://www.postgresql.org - The world's most advanced open source database.
User avatar
swingman
 
Posts: 1380
Joined: Wed Oct 01, 2003 10:20 am
Location: London


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 2 guests