How to add d3 GWT wrapper to vaadin? - javascript

I tried adding the d3 gtw wrapper found here to Vaadin. But since I am newby to Vaadin/GWT I am a bit confused as to how exactly I can add and use the wrapper.
I tried adding the wrapper to the project as per manual using maven but I kept getting javax.servlet.ServletException: com.vaadin.server.ServiceException: java.lang.NoClassDefFoundError: com/github/gwtd3/api/D3. I get no warning in eclipse and I can see the documentaton for the classes when coding.
Thanks!

If you want to use d3.js library you have 3 options.
Add d3.js using #JavaScript annotation. This option is explained in details on Vaadin website.
Better approach (more clean, and easier to maintain in longterm) would be to write custom Vaadin component based on GWT. You can add and use your d3.js file while producing new GWT component. After that export it to the jar, recompile widgetsets and you can use it your Vaadin app. This approach is explained in details here.
Check out already developed addon for Vaadin Freecode Charts and D3 Wrapper . Maybe functionality provided in this one will be just enough for you.

Related

How to effectively traverse angular code in visual studio code

I'm developing Angular application in visual studio code.
Currently, I'm using search to trace and traverse component usages. Is it possible to show component hierarchy for angular components familiar to function call hierarchy? Also, is there a shortcut to jump between component implementation and html template? Lastly, I would like to navigate component inputs and outputs easily.
Angular Language Service is the best thing I know for VS Code.
I get used to WebStorm. It can show you the usages of the component across the project like this:
Also, Compodoc could be a good option while it's not exactly what you are looking for. Take a look at the example of the diagram of the Angular app. It includes not only components but also modules, services, and other artifacts.

Best practice: Typescript: Let a customer extend an application with custom code

we have an angular 9 based application framework, which gives a customer the possibility to configurate an application with fields and layouts. This works pretty nice.
But now we get to the point, where a customer wants to implement special features, like "He enters a value into a textfield and a request to a 3rd party software should be fired to load new data and autofill other values".
We could implement every possible interaction or allow to create custom snippets in javascript.
But in the past i have had a lot of bad experience with these base javascript snippets because they didn't have the needed standard functionality like typescript provides me.
1) Is there a way how a user can create custom code during runtime with typescript rather than plane javascript?
Yes i know typecript needs to be compiled before running, but I ask because I want to know if there is another way?
2) Alternative question:
Can a user develop an angular application and add it as plugin during runtime? Something like an extension or a custom functionality which will be added to the portal for the customer which is not part of the base framework?
Thanks for your help.
I don't know if I understand your question well but from my point of view the only way that an other user want to interact with the main Angular project is that he create a library by using the command ng generate library my-lib. (https://angular.io/guide/creating-libraries)
From there he can create a new module and then someone else import this new lib into the main project and that's it.
The new lib can be maintained by the "customer" and he can release new version of it if the lib is hosted in npm repository and from the main application just need to npm i customer-lib#latest
Did I answerd to your question ?
The thing is we have a hosted cloud application, where we have a standard implementation which is already compiled and deployed in a docker container.
Now a customer should have the possibility to extend the functionality by adding scripts and modules. Like it is common for example in wordpress. Where you have a standard implementation and if you want another wysiwyg Editor you install a plugin.
I know the only way of injecting code is via javascript but I just wanted to ask if there is another solution for this which will not lead to redploy the whole application.

How to create cross-app library in React?

I have some problem with figouring out how to solve this.
I need to build some cross app library in ReactJs. Something like jQuery but simpler. Library will be adding HTML element to the DOM of the page on which the library was added.
The case is that when for example page with implemented library is simple static page written in HTML only without ReactJs on it the library need to add React and this missing HTML element.
Finally the library need to be hosted on some CDN not as npm package.
Any idea how to make it work? Is it possible to do?
Any ideas are welcome

Integration of FullCalendar into Apache Royale

I'd like to start a Apache Royale Project which needs Calendar/Scheduler functionality. I have been working a lot with FullCalendar which is a great library. Would it be possible to integrate FullCalendar in Royale and if so, how should I do it?
I'd started working on a basic way of doing this - wrapping up the JavaScript functionality that I found from FullCalendar 4.1.0 and using the 'default' sample as a model. Putting this into a simple AS3 class means that you can then use the functionality from within your MXML files or create it within AS3, and manipulate it as you would any other Royale UI element.
More work needs doing to this - i.e. supporting the other plug-in types (fairly straightforward to do) and extending the API that's supported. But it shows how it can be done.. feel free to suggest/contribute changes! I've put it into github here
Thanks

Recommendation for SWT/JFace Javascript Editor?

I'm building an app using SWT + JFace and I would like to integrate a Javascript editor (with Syntax Highlighting and Auto-Indent).
I'm looking for something simple like RSyntaxTextArea: just use the widget like as a TextArea and set the syntax to "Javascript".
So far I've come across examples with "JFace Text" but it seems I have to implement the Javascript part myself. Also, I don't want to integrate the whole Eclipse workbench if possible.
Do you know of any component that would do the job?
It's possible to use StyledText widget (so no dependency on JFace) to show syntax highlight (see Into the Deep End of the SWT StyledText Widget), but it's quite lot of work to do..
For additional example see Implements syntax coloring using the StyledText API.
It's also possible to use SWT_AWT bridge and put the RSyntaxTextArea to your application directly..
I found some interesting project, which might help you with the situation..
It's called The DJ Project (The Sweet library brings some rich components to SWT-based applications) and when you check the Gallery, you can find as last example SWT gui with javascript syntax highlighted text area.
The licence is LGPL, which is one of the best for any purpose..

Categories