Skip to main content

Using YUI3 Panel to send server transaction request from client-side

This article presents a nice way how to save some user-defined input on server and make browser wait for it before proceeding with navigation. This will be shown in a context of my use case that consists in a Cocoon Java application that allows exporting page in PDF format. Exported page is being generated by a specific Java Servlet as soon as the client browser redirects to the corresponding URL. Now assume that the end user wants to set a custom title for the exported page. Thus, we need some kind of interruption when the user clicks on the 'Export' link. It'll be implemented using nice YUI3-based Transaction utility and YUI3 Panel shown below:

Initialize YUI3
To get started with YUI3, you should perform two steps:
  1. Load the YUI javascript file on your web page.
  2. Create and configure a new YUI instance.
Please refer to this manual for code snippets. The only difference is that we'll use two modules: io and panel. Module io is required for transaction utility that will be used later.
YUI().use('io', 'panel', 
function(yui3) {
// Panel code will be here

Initialize Panel
First let's add html stub for YUI3 panel:
<div id="input-params-container">
    <div class="yui3-widget-bd">
            <td><label for="export_title">Title</label></td>
            <td><input type="text" name="export_title" id="export_title"/></td>
Second let's initialize YUI3 Panel instance (check official documentation example for panel constructor parameters and this article about transaction utility). See inline comments for details.
panel = new yui3.Panel({
    srcNode: '#input-params-container',
    headerContent: 'Input export title',
    width: 250,
    zIndex: 5,
    centered: true,
    modal: true,
    render: true,
    visible: false

    value: 'OK',
    section: yui3.WidgetStdMod.FOOTER,
    action: function (e) {
        // Loading user input of export title
        var title ="#export_title").get("value");
        // Sending a transaction using YUI3 io
        var uri = "setExportParameters.xml?title=" + title;
        new Transaction({"uri": uri, "sync": true}).execute();
        // Closing modal panel
        // Redirecting browser to export servlet URL
        // (that is saved in event handler - see below)
        window.location.href = this.get("exportLinkHrefValue");

Register event handler functions
Here is the html code snippet of linking image that redirects browser to the export servlet. I added exportLinks id attribute to locate this node from within javascript later as we would like to block redirection until our server transaction is completed.
<span id="exportLinks" style="float: right;">
    <a title="Export to PDF" href="{$contextPath}/export?type=pdf">
        <img style="border: none;" src="resource/external/icons/mimetypes/pdf_16.png" />
This is a click event handler that substitutes default link navigation and show our panel instead. Check official documentation about preventDefault function. See inline comments for details.
yui3.on("click", function (e) {
    // Disabling redirection
    // Saving export servlet URL in panel instance for later usage
    // (we'll do manual redirection instead - see above)
    // Showing the panel to user;
}, "#exportLinks img");

Implement Cocoon pipeline and flowscript for transaction
Finally we need to add server-side code. The following Cocoon pipeline will process a transaction call when the end used presses 'OK' button in the modal panel.
<map:match pattern="setExportParameters.xml">
    <map:call function="setExportParameters"/>
Actually the pipeline simply redirects call to a flowscript function. See the official Cocoon documentation about sitemap and flowscript for more details.
// Saves export parameters in ExportDataSource Spring bean
function setExportParameters() {
    var exportDataSource = cocoon.getComponent("exportDataSource");
That's it! YUI version used is 3.4.1. You may also want to review this article about DynamicReports and Cocoon integration as it's closely related and based on the same Cocoon application.


Popular posts from this blog

Connection to Amazon Neptune endpoint from EKS during development

This small article will describe how to connect to Amazon Neptune database endpoint from your PC during development. Amazon Neptune is a fully managed graph database service from Amazon. Due to security reasons direct connections to Neptune are not allowed, so it's impossible to attach a public IP address or load balancer to that service. Instead access is restricted to the same VPC where Neptune is set up, so applications should be deployed in the same VPC to be able to access the database. That's a great idea for Production however it makes it very difficult to develop, debug and test applications locally. The instructions below will help you to create a tunnel towards Neptune endpoint considering you use Amazon EKS - a managed Kubernetes service from Amazon. As a side note, if you don't use EKS, the same idea of creating a tunnel can be implemented using a Bastion server . In Kubernetes we'll create a dedicated proxying pod. Prerequisites. Setting up a tunnel.

Extracting XML comments with XQuery

I've just discovered that it's possible to process comment nodes using XQuery. Ideally it should not be the case if you take part in designing your data formats, then you should simply store valuable data in plain xml. But I have to deal with OntoML data source that uses a bit peculiar format while export to XML, i.e. some data fields are stored inside XML comments. So here is an example how to solve this problem. XML example This is an example stub of one real xml with irrelevant data omitted. There are several thousands of xmls like this stored in Sedna XML DB collection. Finally, I need to extract the list of pairs for the complete collection: identifier (i.e. SOT1209 ) and saved timestamp (i.e. 2012-12-12 23:58:13.118 GMT ). <?xml version="1.0" standalone="yes"?> <!--EXPORT_PROGRAM:=eptos-iso29002-10-Export-V10--> <!--File saved on: 2012-12-12 23:58:13.118 GMT--> <!--XML Schema used: V099--> <cat:catalogue xmlns:cat=

DynamicReports and Spring MVC integration

This is a tutorial on how to exploit DynamicReports reporting library in an existing  Spring MVC based web application. It's a continuation to the previous post where DynamicReports has been chosen as the most appropriate solution to implement an export feature in a web application (for my specific use case). The complete code won't be provided here but only the essential code snippets together with usage remarks. Also I've widely used this tutorial that describes a similar problem for an alternative reporting library. So let's turn to the implementation description and start with a short plan of this how-to: Adding project dependencies. Implementing the Controller part of the MVC pattern. Modifying the View part of the MVC pattern. Modifying web.xml. Adding project dependencies I used to apply Maven Project Builder throughout my Java applications, thus the dependencies will be provided in the Maven format. Maven project pom.xml file: net.sourcefo