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

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

Do It Yourself Java Profiling

This article is a free translation of the Russian one that is a transcript of the Russian video lecture done by Roman Elizarov at the Application Developer Days 2011 conference. The lecturer talked about profiling of Java applications without any standalone tools. Instead, it's suggested to use internal JVM features (i.e. threaddumps, java agents, bytecode manipulation) to implement profiling quickly and efficiently. Moreover, it can be applied on Production environments with minimal overhead. This concept is called DIY or "Do It Yourself". Below the lecture's text and slides begin. Today I'm giving a lecture "Do It Yourself Java Profiling". It's based on the real life experience that was gained during more than 10 years of developing high-loaded finance applications that work with huge amounts of data, millions currency rate changes per second and thousands of online users. As a result, we have to deal with profiling. Application pro

Using Oracle impdp utility to reload database

Here I'll show an example of using Oracle Data Pump Import (impdp) utility. It allows importing Oracle data dumps. Specifically, below is the list of steps I used on an existing Oracle schema to reload the data from a dump. Steps to reload the data from an Oracle dump We start with logging into SQL Plus as sysdba to be able to manage users. sqlplus sys/password@test as sysdba Dropping the existing user. CASCADE clause will ensure that all schema objects are removed before the user. SQL> DROP USER test CASCADE; Creating a fresh user will automatically create an empty schema with the same name. SQL> CREATE USER test IDENTIFIED BY "testpassword"; Granting DBA role to the user to load the dump later. Actually, it's an overkill and loading the dump can be permitted using a more granular role IMP_FULL_DATABASE . SQL> GRANT DBA TO test; Registering the directory where the dump is located. SQL> CREATE DIRECTORY dump_dir AS '/home/test/dumpd