We Keep Coding

How to integrate javascript in vaadin (eg OpenStreetMap)?

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

triggering an onclick event on the BS contact viewer

This is another of my general questionand I am stuck at this point. I have made a W3DS GetScene query in the server and I have got the 3D scene as an output in the viewer. Now I want to trigger the onclick function on the displayed object so that when I click on the object, I can get its id as well as positional co-ordinates in terms of X,Y and Z and use it to trigger GetFeatureInfo request in the background to get the attribute table related to the clicked object. The part I am stuck is about how to trigger the onclick event or lets say how can I make the server understand that the object has been clicked. Is it necessary for the server to have the functionality predefined or is there any other way to instigate the function from the client side with appropriate coding. I have read in some papers that the X3D player BsContact which I am using for viewing the returned 3D scene its own proprietary interface to modify the scene using JavaScript but I am not being able to find a way how?Thanking you in advance.

This is quite not about X3DOM, but about X3D and the way you can route events in an X3D scene.
You will have to define a TouchSensor node inside as a sibling of your shape or transform node: <TouchSensor DEF="TCH"/>
Then you will have to add a Script node, set its child Field nodes and provide a JS file or JS content as CDATA to describe these fields'handling, as described in the instantreality well written documentation
The interaction between JS in the BS player and JS in the webpage is somehow not well documented. However BitManagement have SDK and support. As far as I know, being able to have both sides communicating with each other is the only way to send a request to you server on click since you succeed in listening to it BS Contact side.
Some years ago, I succeeded in creating such a communication with the Octaga Player:
a bidirectionnal communication between, JS Octaga side, JS web page side, and a java applet built with Lejos, receiving and sending orders to an NXT robot.
However: you may now consider X3DOM as the way to display X3D contents on the Web, and so directly avoid any issue on JS(X3D player) to JS(web page) communication.
And then, for implementing event handlers, I let you read this other post on stackoverflow about handling click on an X3DOM shape

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.

Ajax Design/Refactoring help when rendering new content - like list items and divs

I consistently come across this code smell where I am duplicating markup, and I'm not really sure how to fix it. Here's a typical use case scenario:
Let's say we'd like to post comments to some kind of article. Underneath the article, we see a bunch of comments. These are added with the original page request and are generated by the templating engine (Freemarker in my case, but it can be PHP or whatever).
Now, whenever a user adds a comment, we want to create a new li element and inject it in the current page's list of comments. Let's say this li contains a bunch of stuff like:
The user's avatar
Their name
A link to click to their profile or send them a private message
The text they wrote
The date they wrote the comment
Some "edit" and "delete" links/buttons if the currently logged in user has permission to do these actions.
Now, all of these things were already written in our template that originally generated the page... so now we have to duplicate it inside of Javascript!
Sure, we can use another templating language - like Jquery's Template plugin - to ease the pain generating and appending this new li block... but we still end up with duplicate html markup that is slightly different because we can't use macros or other conveniences provided to us by the templating language.
So how do we refactor out the duplication? Is it even possible, or do we just put up with it? What are the best practices being used to solve this problem?

This is a common problem and becomes more obvious as the UI complexity increases, and changes have to be done on both the server and client templates. This problem is fixable by using a the same template markup on both the client and server sides. The template processors must be written in both JavaScript and the server side language.
Two other solutions that are cleaner than the above approach, but both have their own problems:
Do everything client side
Do everything server side
If all markup generation is done on the client side, then the server acts more or less like a web service which only sends back data in whatever formats suits the application. JSON, and XML are really popular formats for most web services nowadays. The client always generates the necessary HTML and JS. If going with this approach, the boundary between the client and server must be well defined. Since the client has limited knowledge of what happens on the server, this means that proper error codes must be defined. State management will become harder since most/all server interaction will be happening asynchronously. An example of adding a comment with this approach may look like:
$('#add-comment').click(function() {
var comment = $('#comment-box').text();
$.ajax('http://example.com/add', {
success: function() {
addCommentRow(comment);
},
...
});
});
function addCommentRow(comment) {
var user = currentUser().name;
var html = "<li><b>{user}</b> says {comment}</li>";
html = html.replace("{user}", user).replace("{comment}", comment);
var item = $('<li>').html(html);
$('#comments').append(item);
}
The other approach is to do everything server side. Whenever a change happens, shoot a request to the server, and ask it for the updated view. With a fast backend, response times under a second, and proper indicators of network activity, the application should seem very responsive despite everything happening on the server. The above example would be simplified to:
$('#add-comment').click(function() {
$.ajax('http://example.com/add', {
success: function(response) {
$('#comments').html(response);
},
...
});
});
Although this seems a lot more cleaner on the client side than the previous approach, we have just moved the markup generation up to the server. However, if the application is not very AJAXy like Google Maps, then this approach may be easier to work with. Again, it's a matter of how complicated the application is, and perhaps maintaining state client side is a necessity for you, in which case you may want to go with the previous approach.

Server or CLIENT side Custom ASP.Net Controls?

I am an undergraduate student ,
and working on my Final Year project these days.
I have some queries related to Custom Controls as follows:
I am designing a text box field which will have three or more functions as follows :
Either it will allow numeric characters only
Or it will allow an email address to be taken as input
Or it will be a file Upload text box
I am using jQuery to validate this text box .for eg. for checking whether the user has entered numeric characters only or not!!
My Question is
What is the better approach to build such custom controls ? Either make it pure client side or pure Server side or both?
Also , I need to include AJAX functionality in file uploader.
If the client browser doesnot support JavaScripting for some reason then how we can avoid this constraint ?
Thank you very much for your time !
Kindly help me.

First of all you have to decide if you need both client-side and server-side functionality for your control. It will depend on your needs. If you are writing it as part of a large application, I would suggest going for both, because it's much easier to manage. If you decide that you do want both, ASP.NET includes exact functionality that you are looking for. It's called Extender controls. They will allow you to create a custom server-side control and extend that control to include some client-side functionality. You can get more information about Extenders here.
Graceful failing AJAX controls are rare, majority of the developers that create AJAX controls assume that all clients will have JavaScript turned on. However, they are not that hard to do. Actually they are very easy to do, if you are using ASP.NET AJAX Update Panel. Update Panel itself will automatically switch to full post-back if JavaScripts are disabled. If you are using custom implementation of AJAX, or jQuery (as you mentioned above), you have to follow a few simple rules. First of all, avoid binding events from inside scripts, use onclick, onmouseover, etc. This way, if a link has onclick event, and a valid href tag, if JavaScript are on, you will process onclick event handler, but if they are off, you will just follow href attribute value. For the uploader, you can put your uploader inside the FORM element, and add onsubmit event to it. If JS is on, you will process onsubmit, and do an AJAX call to save the file, if JS is off, you will do a full page post-back and save the file from the server-side.