Weblog for the AMIS Technology corner
Posts tagged javascript
Stand-alone Java Client for jWebSocket Server – communicating from Java Client to Web Clients and vice versa over WebSockets
Jan 15th
In a previous article, I have discussed the open source jWebSocket Server and a simple installation and configuration (http://technology.amis.nl/blog/14940/first-steps-with-jwebsocket-open-source-java-framework-for-websockets-installation-and-running-samples). Subsequently, I have shown the implementation of a web client for a synchronized Slideshow application, where WebSocket communication is used to perform Client 2 Client push (http://technology.amis.nl/blog/14949/push-based-synchronized-slideshow-web-application-implemented-using-websockets-and-jwebsocket-server-the-open-source-java-websocket-server). In a third article I have explained how jWebSocket server can be integrated with a Java application that can start the server and interact with it (http://technology.amis.nl/blog/14973/implementing-a-java-server-side-component-for-jwebsocket-server-for-websocket-interaction-with-web-clients). Finally in this article I demonstrate how a stand alone Java Client can connect to a ‘remote’ jWebSocket server and open WebSocket interactions with it.
The functionality realized in this article is a simple Java application that listens to slide selection events as pushed from the clients to the WebSocket and that also pushes slide change instructions over WebSockets to the clients. After starting the jWebSocket server and opening one or more clients, running the Java Application created in this article will guide all clients through a sequence of slides.
and a few seconds later:
Implementing a Java Server Side component for jWebSocket Server for WebSocket interaction with Web Clients
Jan 14th
In a previous post – http://technology.amis.nl/blog/14949/push-based-synchronized-slideshow-web-application-implemented-using-websockets-and-jwebsocket-server-the-open-source-java-websocket-server – I discussed the implementation of the synchronized slideshow application using Web (HTML/JavaScript) clients and jWebSocket as websocket server. In an earlier article, I described the same for the Kaazing WebSocket server – http://technology.amis.nl/blog/14777/push-based-synchronized-slideshow-web-application-implemented-using-websockets-and-kaazing-websocket-gateway – and both stories are (fortunately) fairly similar. In the Kaazing article I also described a Java based Server Side ‘client’ or ‘WebSocket interaction partner’. In the jWebSocket article, that part was missing and in this article I will rectify that.
This article will describe how a Java application can integrate with jWebSocket server – in fact: start the server from within the Java code -and subsequently register listeners that intercept WebSocket communication from other interaction partners such as Web clients. The Java application can also send messages to specific clients or broadcast to all clients. This article will merely scratch the service by describing how a simple Java application interacting in this way with jWebSocket server can be created in NetBeans 7.
Finding the information to achieve this was not very easy by the way. And finding out how a stand alone Java application can connect to a stand alone (separately running) jWebSocket server is still slightly beyond my reach.
Push-based synchronized slideshow web application – implemented using WebSockets and jWebSocket server – the open source Java WebSocket server
Jan 13th
In a recent article, I have introduced jWebSocket – an open source Java based server for WebSocket communication: http://technology.amis.nl/blog/14940/first-steps-with-jwebsocket-open-source-java-framework-for-websockets-installation-and-running-samples. In this article, I have described how to download and install the jWebSocket server and how to get going with running some of the distributed samples.
In another recent article, I looked at the implementation of a slideshow application where multiple web clients are mutually synchronized using WebSocket based communication using the Kaazing commercial Web Socket Gateway: http://technology.amis.nl/blog/14777/push-based-synchronized-slideshow-web-application-implemented-using-websockets-and-kaazing-websocket-gateway.
In this article, I will implement that same Slideshow application as with Kaazing, this time using the jWebSocket server as my underlying WebSocket infrastructure. It turns out that no server side configuration is required for this initial, somewhat naive implementation that does not use a specific channel but simply has all clients of the jWebSocket server participate in the communication. A more advanced set up would undoubtedly use some way to ensure that only interested parties connected to a specific web socket or channel would actually receive the slide selection events. As it stands, the implementation is quite straightforward – based on the file presenter.htm shipped with the jWebSocket Client Samples (directory demos\slideshow).
The result will look like this – just like it looked with both cometd and with Kaazing:
Push based synchronized Slideshow demo application implemented using CometD and jQuery running on Tomcat
Jan 9th
In a string of recent articles, I have discussed downloading, installing and running demos for a number of different tools, frameworks and libraries that support push-style (web) applications in one way or another. I have looked into ‘classic’ comet with Grizzly, Atmosphere and CometD as well as ADF Active Data Service and WebLogic Pub/Sub (Bayeux) Channels. I have also looked to WebSockets with jWebSocket, again Atmosphere and CometD and also with Kaazing. I am now working on a series of articles in which I use each of these frameworks and push infrastructures to implement the same simple push-style application – to see how that goes and to compare the various implementations. The functionality I will be implementing is simple:
- through the web client (HTML 5/javaScript), a user can select an image from a list of ’slides’
- the selection of the image is communicated to the server (background WebSocket based or alternatively regular AJAX)Comet (Bayeux)/Long Poll style)
- the server informs all connected clients about the selected image through a pushed message (background WebSocket based or alternatively Comet (Bayeux)/Long Poll style); these clients all synchronize that slide selection
- a Java (server side) component can also connect to the server and listen in to image selection events as well as publish image selection messages of its own
The first article discussed the implementation using WebSockets and Kaazing Gateway (http://technology.amis.nl/blog/14777/push-based-synchronized-slideshow-web-application-implemented-using-websockets-and-kaazing-websocket-gateway). In this article, I will present an implementation using the CometD framework.
Push-based synchronized slideshow web application – implemented using WebSockets and Kaazing WebSocket Gateway
Jan 7th
In the last few articles, I have discussed downloading, installing and running demos for a number of different tools, frameworks and libraries that support push-style (web) applications in one way or another. I have looked into ‘classic’ comet with Grizzly, Atmosphere and CometD as well as ADF Active Data Service and WebLogic Pub/Sub (Bayeux) Channels. I have also looked to WebSockets with jWebSocket, again Atmosphere and CometD and also with Kaazing. I intend to now take a closer look at some of these frameworks, by taking a simple push-style application and implementing it using each of these frameworks. The functionality I will be implementing is simple:
-
through the web client (HTML 5/javaScript), a user can select an image from a list of ’slides’
-
the selection of the image is communicated to the server (background WebSocket based or alternatively regular AJAX)Comet (Bayeux)/Long Poll style)
-
the server informs all connected clients about the selected image through a pushed message (background WebSocket based or alternatively Comet (Bayeux)/Long Poll style); these clients all synchronize that slide selection
-
a Java (server side) component can also connect to the server and listen in to image selection events as well as publish image selection messages of its own
-
bonus: it may also broadcast ‘new image available’ events to allow the web clients to update the list of images presented to the user
In this article, I will present an implementation using the Kaazing WebSocket Gateway. The application parts that I created or configured are a static HTML page with some JavaScript elements, the Kaazing gateway-config.xml file and a single Java Class. Maybe 50 lines of code in total, to get a fully operaional push style WebSocket application. Not a bad start for this series. Note: I would like to thank Matthias Wessendorf from Kaazing for his help.
Respond to end of download in ADF 11g – using poll, clientListener and fileDownloadActionListener
Nov 30th
The situation: in an ADF Faces 11g page, we have a popup with two buttons: one to start a download and one to cancel the popup. When the users presses the download button, a fileDownloadActionListener is activated, the corresponding server side method is invoked to start producing the content to be downloaded and eventually the browser will prompt the user to open or save (or cancel in the case of IE) the download.
The challenge: when the download commences, the download and cancel buttons should be disabled and perhaps an animated gif should be shown to suggest progress (we want to at least prevent the user from clicking the download button or getting frustrated in other ways while she is waiting for the report to be produced on the server side). When the download is complete – that means: when through the browser interaction the user has saved, opened or canceled the actual content download to the browser – the buttons should be enabled again and the animated gif can be removed.
In short: we want to be able to react – both to the beginning of the download as well as to the completion.
Leveraging HTML 5 Navigator API to show the browser’s current location on an ADF Faces 11gR2 Thematic Map component
Jun 15th
This article demonstrates how, through a bit of JavaScript interacting with the HTML 5 Navigator API, some more JavaScript using the ADF Faces Rich Components API and the ADF Faces 11gR2 Thematic Map component, it becomes quite easy to not only learn about the end user’s physical location but to also show that location on a map – and along with it typically the nearest branches of your company.
The page developed in this article will essentially look as is shown in the next figure:
The HTML 5 Navigator API is available in most modern browsers – including Firefox 3.5+, Chrome 5.0+, Safari 5.0+, IE 9, iPhone 3.0+ and Android 2.0+. Note that the user should explicitly allow an application to learn about his or her location – and not get a handle on it just like that.
See Dive into HTML 5 for more details: http://diveintohtml5.org/geolocation.html
Creating JSON document straight from SQL query – using LISTAGG and With Clause
Jun 14th
This very brief article demonstrates how a fairly complex, nested JSON document can be created using a single SQL query. The main features used in the SQL statement are the WITH clause to define the inline views per object (Department, Manager, Employee), Scalar Subquery to retrieve the result from an inline view as string into the overall JSON string and LISTAGG to collect multiple elements into a JSON list.
The article shows a very simple application of this JSON creation through a simple HTML page – served by a PL/SQL package. This page does not contain any data. Right after loading, the onLoad event triggers a listener that invokes – through AJAX – the PL/SQL package’s other procedure. This procedure returns the JSON object – courtesy of that fabulous SQL query – and uses it to write the company details on the fly into the page.
ADF 11g – Extend and Override standard client side behavior by manipulating the Javascript prototype
Dec 8th
This article describes a way to extend and override the standard behavior of ADF client side JavaScript libraries. In this particular case we needed to learn about the client side validation errors in order to feed our expertise manager: when the user submits the form, client side validations are performed and when errors are found, these are presented to the end user. We would like to intercept this standard flow and also listen in to the list of validation error messages that will be shown to the end user.
A little debugging using Firefox quickly made it clear that the submitForm() method is invoked when a command button is activated and that it in turn (indirectly) makes use of the function processValidators() on the AdfHtmlPage object. This function will return true or false, depending on whether any validation error messages were produced by the collected validators that fire.
We can extend this function – without having to change any of the source code. The standard JavaScript way of overriding a method on an object is through the prototype of that object – and a reference to the original function.
The steps are:
Using asynchronous mechanisms in Java and JavaScript for improving the user experience
Feb 23rd
In this article, we will continue a discussion on asynchronous processing started in a previous article that introduced asynchronous and parallel processing Java using Executors, Futures, Callable Objects and the underlying thread model in Java 5 and 6.
While a stand alone Java application – without UI – is a rare thing in my world, a Java Web application certainly is not. And performance, especially perceived performance, is pretty important in that world. The first page load is the most important measure I suppose for what the user feels is the performance of the web application. The fact that after the initial load, additional elements can be loaded into the page – asynchronously – is fine. The intial page load and the browser’s indication that the load is done (and the hourglass disappears) is what is most important for the happiness of the user.
We will see three stages in this article, of a very simple web page. It is a JSF (JavaServer Faces) page, that contains some very simple elements of which one displays an ‘expensive’ value – a value that takes some time to get hold of. Maybe because a database query is involved or web service is called. Whatever the cause, this one element is expensive. Read the rest of this entry »
