How to integrate javascript in vaadin (eg OpenStreetMap)? - javascript

Is it possible to create javascript elements like OpenStreetMap or jQuery inside a vaadin application?
Because vaadin websites are created by programming in java and letting the compiler autocreate the DOM and JavaScript out of it?
So, is it possible at all?

You can create such an integration with AbstractJavaScriptComponent
The basic idea here is to subclass this class, annotate with #JavaScript to pull in the needed JS libs. Then write at least a global function, that sets up your lib in the DOM (you will have a <div> at your disposal). Your component can hold state, the server side can call defined functions on the client (while sending e.g. state) and the client can call server functions (params passed as JSON).
The Wiki has an example how to include such a component

There are some easy and cheap solutions which are not the best in the long term, but they may be enough:
1)
If you just want to render some html you cant insert it as the value of a label and change its Content Mode to html.
https://vaadin.com/book/-/page/components.label.html
2)
If you just want to execute some javascript code after a ui event you can call Javascript.getCurrent().execute(javascriptCode).
https://vaadin.com/book/vaadin7/-/page/advanced.javascript.html
Notice that if you are trying to do some re-usable components, this is not the right answer

Related

How to include OVRManager in Three.js Scene?

I have created several Three.js/Javascript demo applications that I'm experimenting with in my new Oculus Go. I'm trying to enable the Go Controller to do stuff in my applications, and according to the Oculus Developer Center, the best thing to do is to include OVRManager in my scene so I have access to that API. That sounds good, but for all the documentation (https://developer.oculus.com/documentation/unity/latest/concepts/unity-ovrinput/) I can't see HOW to add OVRManager to my scene! I have not worked with Unity before, but from what I can tell in the documentation there shouldn't be any compatibility issues (should there?)
So what I'd think to do is something like:
<script src="OVRManager.js or something like that"></script>
and then call the functions I need, as I've done with OrbitControls.js and other external dependencies.
But for the life of me, Google searching is just sending me in circles. I see questions posed for C++ and C# but that's of no use to me. How do I get this API working in my Three.js scene? Where do I find it and is there some other way to include it?
Thanks!
Create a unity WebGL build and expose the API you need as public methods in a Unity Script you attach to a GameObject.
Then, you should be able to follow the directions at How to call Unity functions from javascript (copied below) on how to call those methods from your javascript code.
You may be able to use UnityScript, which is vaguely similar to JavaScript, to write the Script if you use an old version of Unity. As of this writing, Oculus recommends version 2017.4.11f1, which I think might still support UnityScript.
One major reason you see so much less UnityScript information is that Unity has been moving away from UnityScript, into only supporting C#.
But regardless of if you code your OVRManager script in C# or UnityScript, Unity will make the methods callable from your JavaScript.
Calling Unity scripts functions from JavaScript
Sometimes you need to send some data or notification to the Unity
script from the browser’s JavaScript. The recommended way of doing it
is to call methods on GameObjects in your content. If you are making
the call from a JavaScript plugin, embedded in your project, you can
use the following code:
SendMessage(objectName, methodName, value);
Where objectName is the name of an object in your scene; methodName is
the name of a method in the script, currently attached to that object;
value can be a string, a number, or can be empty. For example:
SendMessage('MyGameObject', 'MyFunction');
SendMessage('MyGameObject', 'MyFunction', 5);
SendMessage('MyGameObject', 'MyFunction', 'MyString');
If you would like to make a call from the global scope of the
embedding page, see the Code Visibility section below.
Code visibility
Starting from Unity 5.6 all the build code is executed in its own
scope. This approach makes it possible to embed your game on an
arbitrary page without causing conflicts with the embedding page code,
as well as makes it possible to embed more than one build on the same
page.
If you have all your JavaScript code in the form of .jslib plugins
inside your project, then this JavaScript code will run inside the
same scope as the compiled build and your code should work pretty much
the same way as in previous versions of Unity (for example, the
following objects and functions should be directly visible from the
JavaScript plugin code: Module, SendMessage, HEAP8, ccall etc.).
However, if you are planning to call the internal JavaScript functions
from the global scope of the embedding page, you should always assume
that there are multiple builds embedded on the page, so you should
explicitly specify which build you are referencing to. For example, if
your game has been instantiated as:
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/build.json", {onProgress: UnityProgress});
Then you can send a message to the build using
gameInstance.SendMessage(), or access the build Module object using
gameInstance.Module.

Accessing Angular app's props and controller functions from external non-Angular plugins

I have an Angular SPA but in it I'm using some non-angular library (Medium Editor [ME from now on] to be exact). I created a directive for ME so if I add a contenteditable element on my views, ME get's instantiated and works properly. So that's not a problem.
The problem is that I also created a special ME extension that requires to make web requests to my server in order to insert correct markup into ME's editable element. But to make these requests it requires some view-model's data and also communicate it back:
it needs to read and set (when undefined) my view model ID
it needs to constantly manipulate some other view model value in order for my SPA to know that it's still processing so other processes get postponed
I thought I'd simply include input type="hidden" ng-model="..." on my page and change its value and trigger input event so Angular would update its model. Hidden input of course doesn't work. So I changed it to input type="text" class="hidden" and keep the functionality.
This does work, but it doesn't seem to be the proper way of doing things as it's hackish. And this mainly works for model value exchange (get/set). How about if I would have to call some controller function? Is that even remotely possible?
I don't want to make ME's extension to rely in any way on Angular library as it has to be purely ME extension and should be reused in non-Angular SPAs (maybe some other lib SPA or just pure simple DHTML web app). But I would like to make it usable in SPAs as well as ME can easily be used to manipulate some element's markup that can be set to view model through a directive.
What it the proper way of communicating with Angular app from external libs that aren't native to Angular?
Additional info
Basically I want to have 4 functions in my custom extension that should somehow access (and manipulate) my Angular view model:
getReferenceId() and setReferenceId(id)
incrementPending() and decrementPending()
Pending counter could be exposed publicly and accessed by my Angular SPA, so it wouldn't process data while extension is still doing its own stuff. But SPA doesn't have any authority over when to set reference ID so it would correctly be read by the extension...
This is usually solved by wrapping external plugins (or their parts) in ng services and directives. You don't need the input tag, just put the data on scope and after changing from non-ng code call $scope.$digest. If you need to watch for data change to trigger something in external library, you can use either ng-change or $scope.$watch.

Listen to Response on HTML Form embedded in GWT View?

I have a HTML like the following:
<div>
<form>
<input type="text" />
<button class="sendForm" value="Send form" />
</form>
</div>
<script>
// post the form with Jquery post
// register a callback that handles the response
</script>
I use this type of form a lot with a JavaScript/JQuery overlay that displays the form. That could be handled for example with plugins like FancyBox. I use Fancybox for Ajax content.
I also want to use this form embedded into a GWT view. Lets assume that the for cannot be created on client side because it has some server based markup language inside to set up some model data.
If I want to use this form in GWT I have to do the following. Tell GWT the form request url and use a RequestBuilder to query the html content of this form. Then I can insert it into a div generated by GWT. So far so good.
Problem:
When the user hits the send button the response is handled my the JQuery callback that is inside the script under the form.
Is there a way to access this callback from within GWT?
Is there a way to overwrite the JQuery send action? Since, the code is HTML and comes from the server I cannot place ui-binder UiFields inside to get access to these DOM elements.
I need to get the response if the submitted form accessible to GWT.
Is there a way how I can achieve this with JSNI?
Answers to each question:
1 Is there a way to access this callback from within GWT? actually you cannot modify the callback itself, what you can do from GWT is to call any jquery method, thus you can unbind any previous added handler, and set yours.
//NOTE: not wrapping code in $entry() to make a clearer code.
private static native unbindForm() /*-{
// remove all jQuery handlers added previously to my form
$wnd.$("my_form_selector").off();
// add a new handler for the submit event
$wnd.$("my_form_selector").on("submit", function(event) {
event.preventDefault();
$wnd.$(this).post(url, ...).done(function(data) {
// Use JSNI to call a GWT method
#.com.example.MyClass.handleFormResponse(*)(data);
// NOTE: that you can use a star instead of having to write parameter
// types, when you only have one method signature in your class.
});
}
}-*/
// handle the form response in GWT
public static void handleFormResponse(String data) {
// handle form response in GWT
}
Another thing you can do with GWT, is to wrap your form in a FormPanel and use specific widget methods to set a handler and read the response. But I think this is not what you are asking for.
2 Is there a way to overwrite the JQuery send action Yes, using JSNI to ask jQuery to unbind previously set events. See code in #1.
3 I need to get the response if the submitted form accessible to GWT. You have to include in the jquery.post callback some code to call GWT static methods (you can use-non static as well but this way is easier) this is also JSNI. See code in #1.
4 Is there a way how I can achieve this with JSNI? Of course, JSNI is the way to interact with handwritten javascript from GWT.
Aditional Notes:
GWT is designed to build RIA apps with very optimized js code. I know each one has their reasons for using external libraries, but adding 3party javascript to your app is against the main goals of gwt compiler remove death code and optimize output. If you like jquery like syntax and features for GWT I recomend to use gwtquery, which has been fully written in gwt, hence the compiler will include just the code you use.
Writing JSNI is a source of mistakes difficult to handle in the debugger. So I recommend to use gwt-exporter to populate java methods/classes or gwtquery to call external javascript. See these post I wrote some time ago: Pass value from GWT to Javascript via JSNI and Calling GWT Java function from JavaScript
Javascript => GWT and GWT => javascript values passing both can be done using JSNI . Please have a look here for more information about JSNI

Javascript in SoapUI

Javascript in SoapUI How to's?
In SoapUI, you are allowed to write Groovy Scripts !
but since even javascript is also supported in SoapUI
how can we write a javascript in SoapUI Is there a simple example which would explain this in much detail.Is there any simple code for automating the process of testing using javascript.
To switch a project to JavaScript, click on the project, travel to the window in the bottom left hand corner. Select the script language field and update it to JavaScript.
As far as what you can do with it, you can really do anything. You can create a script step or assertion. Some examples would include creating a script to create variables or looping through a response to verify information. I didn't find much on using JavaScript with soapUI either, and ended up sticking with Groovy. I found it to be powerful and extendable via Java if needed.
If you want a specific example on how to do something. I'd recommend asking a more specific question with what you have tried so far.
So far I've got...
function myFunction() {
log.info('Hello');
}
myFunction();
Output shows up in script log, when I work out how to loop tests etc, will post…
I've not tried JavaScript, but I have developed my own java classes which I use for complex response checks.
You don't have to change the scripting language in SoapUI. To call Java class, I have a groovy step in my test, which instantiates an object from my java class and I then invoke a key method on the object. You can pass in the objects that SoapUI passes into the groovy script so you can then process the response.
The java scripts themselves live in the bin/scripts folder under SoapUI.
When working on a java class, I use an external editor like Brackets. When I save the change, SoapUI detects that change and recompiles the java class, so yup don't need to restart SoapUI after every tweak to your class.
The smart bear site and other places have tutorials to get you up and running.

C++, win32 api: How to create an html rendering window so that your application would get callbacks from JS calls?

What I need is simple: we have a console app project. We want to have such a function that would open a simple window with nothing but html (default system based) html + js rendering window that would read some default html+js string (form string or const char*). we want to have our own api joined with default js api so that when JS calls some our.function(argument); we would have our C++ application performe some function and for example cout argument. How to create such thing on windows?
CoCreate the MSHTML com object for HTML Documents:
CComPtr spDoc;
HRESULT hr = CoCreateInstance(CLSID_HTMLDocument, NULL, CLSCTX_INPROC_SERVER, IID_IHTMLDocument2, (void**)&spDoc);
Do something like this to read your HTML string and make the document render it.
Depending on what you need in terms of callbacks, you can use the COM DOM Interfaces to traverse the tree, and then sink the appropriate DispInterfaces to get events on the elements you're interested in. I would recommend this.
If what I suggest in #3 isn't good enough for you (and I'd like to hear why) then you can implement your own ActiveX control and have script on your page call methods on it as suggested by raj.
Brushing aside any security / cross browser/platforms concerns you can use implement an ActiveX object in your C++ that you can invoked from javascript.
http://msdn.microsoft.com/en-us/library/7sw4ddf8(v=vs.94).aspx
The host for the WebBrowser control can provide an object that will be accessible to scripts via the external object.
See http://msdn.microsoft.com/en-us/library/aa770041.aspx#GetExternal

Categories