BPEL HelloWorld Example with Eclipse and Apache ODE

Hi Guys as i explained in my previous post how to install Apache ODE and Eclipse BPEL Designer now im here to explain how to deploy the first BPEL process flow

Objective: deploying a BPEL process which receives an input string from a client and responses it exactly that input.
Tools: Eclipse 3.6.2, BPEL Designer 0.5.0 Plugin, Tomcat 7.0.12, ODE 1.3.5

step1.Create new BPEL project: File→New→Others→BPEL 2.0→BPEL Project.
step2.Name it BPEL_HelloWorld. Select the Target Runtime as Apache ODE 1.x Runtime and Configuration as Defaut Configuration for Apache ODE 1.x Runtime. Click Finish.

bpel_hello_world

step3.In the folder BPEL_HelloWorld\bpelContent, File → New → Other → BPEL 2.0 → New BPEL process file.
step4.Name it HelloWorld, Namespace http://helloworld.localhost and select Template Synchronous BPEL Process. Click Next.

bpel_hello_world1

step5.Edit the Service Address to : http://localhost:8080/ode/processes/HelloWorld (suppose that your Tomcat environment runs at port 8080) and keep other default declarations. Click Finish.

bpel_hello_world2

step6. Three files are created in the folder bpelContent and the HelloWorld.bpel is opened for editing the BPEL process.
step7. Click to open the Palette panel on the right of the canvas. (or right click on the canvas, select Show Pallette on Palette View)

bpel_hello_world3

step8. Drag the Assign action next to the receiveInput action and delete the FIX_ME-Add_Business_Logic_Here.

bpel_hello_world7

step9. Right click on the Assign activity. Select Show in properties.
step10.In the Properties tab, select Details. Click on the New button to define an assign operator.
step11.Assign from input→payload→input to output→payload→result. An Initializer popup dialog appear. Click Yes to initialize the output variable and save the process.

3ca9f195f7403fcc0bcb9f5a3029db16.media.900x433

step12. It’s time now to deploy the BPEL project. Click on the folder bpelContent, select File→New→Others→BPEL 2.0→Apache ODE Deployment Descriptor.
step13. Click Next. Verify the BPEL Project name as BPEL_HelloWorld. Click Finish.

bpel_hello_world5

step14 .Double click on the deploy.xml file in the bpelContent folder.
step15. In the Inbound Interfaces table, select the Partner Link as client, Associate Port as HelloWorldPort. Click on Related Service then other fields will be automatically filled. Save the deploy.xml file.

bpel_hello_world6

step16. To deploy the project on the server, right click on the Ode v1.x Server at localhost, select Add and Remove Projects.
step17.Select the BPEL_HelloWorld/HelloWorld in the Available projects box and click Add. Then, click Finish

bpel_hello_world8

step18. Start the ODE server. If the deployment was successful, you will see the following output in the console tab.

bpel_hello_world9

step19. We will test the project with Web Services Explorer provided by Eclipse. Right click on the HelloWorldArtifacts.wsdl file. Select Web Services→Test with Web Services Explorer.
step20. Select the operation process. Then, type Hello ODE in the input textbox. If your deployment was success, you will get the same string in the SOAP response.

bpel_hello_world10

We are Done
Happy Coding 🙂

SOA part-1 Installing BPEL Designer and Apache ODE

Hi all, in my last project i was trying some BPEL process to execute from Eclipse and Apache ODE and finally i made the process to work so here is my experience and my tutorial to install BPEL designer in Eclipse3.6 and Apache ODE

Installing Eclipse BPEL designer
1.Suppose that you have already downloaded and installed your Eclipse > v3.6.2(Helios,or Indigo), version for Java EE Developers and JDK (version > 1.5).
2.Open the Eclipse, go to the menu Help→Install New SoftWare.
3.Click on the button Add and define a new Eclipe update site with the location:
http://download.eclipse.org/bpel/site/
4.Now you have the update-site of BPEL available on the eclipse. Select the check box to BPEL Visual Designer and click on the button Next.
5.Follow the installation windows, you will now have your BPEL installed on Eclipse. Note that: the BPEL dependencies(WTP, EMF, GEF, JEM) should be installed before the BPEL designer. Fortunately, with Eclipse Helios for JavaEE, you have all.
6.After finishing the installation, restart it.
7.To verify the installation was successful, after the restart, click on File→New→Other, you will see the BPEL 2.0 is on the list.
The BPEL designer is now ready to use. However, to run the BPEL process, you should have the server’s environment. Now, we are going to install the Apache ODE for the BPEL deployment.

Installing Apache ODE

1.Download and extract the latest ODE from the Apache web site. The current stable version is the ODE 1.3.5.
2.Inside the “apache-ode-war-1.3.5” folder, you will see an “ode.war” file. Deploy this file on your Tomcat server.
3.The simple way to do this is extracting the “ode.war” file to get the ode folder.
4.Copy this ode folder to your TOMCAT_DIR/webapps directory.
That’s all.

Setting up the ODE server on Eclipse
1.Show the “Servers” view by selecting the menu Windows→Show View→Servers.
2.Right click on the empty space of the “Servers” view, select New→Server.
3.Leave the server host name as localhost and select the server type as the Apache→Ode v1.x Server. Rename the server’s name if you want. In my installation, I keep the default name. Then click on the button Next.
4. Show the “Servers” view by selecting the menu Windows→Show View→Servers.
Right click on the empty space of the “Servers” view, select New→Server.
Leave the server host name as localhost and select the server type as the Apache→Ode v1.x Server. Rename the server’s name if you want. In my installation, I keep the default name. Then click on the button Next.

Note that: the ODE Runtime configuration above can also be added or editted using the menu Windows→Preferences→Server→Runtime Environments.

5. Click Finish. You now have the ODE server which is ready to run on the Eclipse. You can see this server on the Server View.
6.Now, you should test the server’s configuration by right click on the ODE server entry and select Start. Or you can click on the Start button on the Server View. If the server is sucessfully started, you will see the status like this.

Note:If you are using Tomcat v.6 or v.7, you probably get the error

Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/juli/logging/LogFactory
  at org.apache.catalina.startup.Bootstrap.<clinit>(Bootstrap.java:54)
Caused by: java.lang.ClassNotFoundException: org.apache.juli.logging.LogFactory
  at java.net.URLClassLoader$1.run(URLClassLoader.java:217)
  at java.security.AccessController.doPrivileged(Native Method)
  at java.net.URLClassLoader.findClass(URLClassLoader.java:205)
  at java.lang.ClassLoader.loadClass(ClassLoader.java:323)
  at sun.misc.Launcher$AppClassLoader.loadClass(Launcher.java:294)
  at java.lang.ClassLoader.loadClass(ClassLoader.java:268)
  at java.lang.ClassLoader.loadClassInternal(ClassLoader.java:336)
  ... 1 more
Could not find the main class: org.apache.catalina.startup.Bootstrap. Program will exit.

7. This error occurs maybe because it misses the tomcat-juli.jar in the Launch environment.
8. To fix this, double click on the installed Ode v1.x Server in the Server View to see the configuration.
9. k on Open launch configuration → Classpath tab → Add External JARs → [your TOMCAT_DIR]\bin\tomcat-juli.jar. Then Ok
10. Now try to start your ODE server in the Server View.
11.Terminate the server by clicking on the Stop button or right click on the server and select Stop. Every thing is

Ready now for the first BPEL program. i will be teaching the first HelloWorld BPEL Process in SOA-2 tutorial
Happy Coding 🙂

JavaScript Templating

Hi all as said in my previous post here i am to explain you how to write the java script templating and render UI with content dynamically.
sincere thanks to John Resig for his micro templating.
well the template engine is simple and it converts the dynamic scripts into pure javascript at runtime and the code is as follows. Please add the below script to a file and name it as “templating.js”

/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

// Simple JavaScript Templating
// John Resig - http://ejohn.org/ - MIT Licensed
(function() {

    var cache = {};

    this.tmpl = function tmpl(str, data) {
        // Figure out if we're getting a template, or if we need to
        // load the template - and be sure to cache the result.
        var fn = !/\W/.test(str) ? cache[str] = cache[str]
                || tmpl(document.getElementById(str).innerHTML) :
                // Generate a reusable function that will serve as a template
                // generator (and which will be cached).
                new Function("obj",
                "var p=[],print=function(){p.push.apply(p,arguments);};"
                +
                // Introduce the data as local variables using with(){}
                "with(obj){p.push('"
                +
                // Convert the template into pure JavaScript
                str.replace(/[\r\t\n]/g, " ").split("<%").join("\t")
                .replace(/((^|%>)[^\t]*)'/g, "$1\r").replace(
                /\t=(.*?)%>/g, "',$1,'").split("\t")
                .join("');").split("%>").join("p.push('")
                .split("\r").join("\\'")
                + "');}return p.join('');");

        // Provide some basic currying to the user
        return data ? fn(data) : fn;
    };
})();

After this my index page looks like this:

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" charset="utf-8" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" charset="utf-8"
        src="js/templating.js"></script>
        
    </head>
    <body>
        <div id="TempalateHolder"></div>
	<div id="PageHolder"></div>
    </body>
</html>

In the “TemplateHolder” div all the templates gets loaded and dymanically the content gets loaded in “PageHolder” div.
and my templates look like this, and name the file as templates.html

<script type="text/html" id="displayDates_tmpl">
    
    <% for(i=0;i<10;i++){ %>
        <h4>Sample <%=i%> .</h4>
    <% } %>
</script>

now inorder to render this template in the page please add the below script to the templating.js file as follows.

var ObjectManager = {
    Version: '1.0',
    init: function() {
        $(document).ready(function() {
            try { // fix IE background image flicker (credit:
                // www.mister-pixel.com)

                $(document).ready(function() {
                    // Load Templates here to store all template in
                    // TempalateHolder Div
                    $("#TempalateHolder").load("Templates.html", function() {
                        ObjectManager.ShowDatesPage();

                    });

                });

            } catch (err) {
                console.log(err);
            }
        });
    },
    ShowDatesPage: function() {
        this.ShowPage("displayDates", "");
    },
    ShowPage: function(PageName, DataObject) {
        var TemplateContent = tmpl(PageName + "_tmpl", DataObject);
        $("#PageHolder").html(TemplateContent);
    }
};

ObjectManager.init();

Happy Coding 🙂

CustomDate.js open-source JavaScript Date library

It’s a long time i made a post in the blog,I was completely busy working on a project where i should render the dynamic data into HTML and the data is in JSON format.. I started using JavaScript Templating (from JavaScript Micro-Templating) ref: JavaScript Micro-Templating.I will post a topic on JavaScript Templating in my next post, Here i am going to give you a JavaScript which i developed for my project. This script contain all useful functions of Date.

I made this script Open Source(GPL v3), please copy the below script in a file and name it as “CustomDate-1.0.js” and include in your HTML document as shown “<script type=”text/javascript” src=”js/CustomDate-1.0.js” >” and start using all the functions of the file.Netbeans > 7.x provide the API Assistance of the script once included into the project.

/**
 * @author Mantha Pavan Kumar
 * @version 1.0
 * 
 * @description 
 * Copyright (C) 2013 - 2014 SparkSoftware
 * 
 * This script is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as
 * published by the Free Software Foundation, either version 3 of the 
 * License, or (at your option) any later version.
 * 
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 * 
 * You should have received a copy of the GNU General Public 
 * License along with this program.  If not, see
 * <http://www.gnu.org/licenses/gpl-3.0.html>.
 *
 */
var CustomDateObject = {
    /**
     * @returns {Date}
     * @description
     * Returns the current date as Date Object.
     */
    today: function() {
        return new Date();
    },
    /**
     * 
     * @returns {String}
     * Returns the current date as String date in the format 'mm/dd/yyyy'.
     */
    getSysDate: function() {
        var d = new Date();
        var strDate = (d.getMonth() + 1) + "/" + d.getDate() + "/"
                + d.getFullYear();
        // alert(strDate);
        return strDate;
    },
    /**
     * 
     * @param {type} date 
     * date parameter can be a date object or mm/dd/yyyy format.
     * @returns {String} The day of the date passed
     */
    getDay: function(date) {
        var d_names = new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat");
        var l_date = new Date(date);
        return d_names[l_date.getDay()];
    },
    /**
     * 
     * @param {type} date
     * date parameter can be a date object or mm/dd/yyyy format.
     * @returns {String} The Month of the date passed
     */
    getMonth: function(date) {
        var m_names = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun",
                "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
        var l_date = new Date(date);
        return m_names[l_date.getMonth()];
    },
    /**
     * @description function under development.
     * @returns {undefined}
     */
    getDayNumberFromName: function() {

    },
    /**
     * 
     * @param {String} monthName
     * @description pass the month name as 'jan' | 'JAN' | 'january' | 'JANUARY'
     * @returns {Number}, The month number.
     */
    getMonthNumberFromName: function(monthName) {
        var m_names = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun",
                "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
        var month = "";
        if (monthName === "jan" || monthName === "JAN" || monthName === "january" || monthName === "JANUARY") {
            month = "Jan";
        } else if (monthName === "feb" || monthName === "FEB" || monthName === "february" || monthName === "FEBRUARY") {
            month = "Feb";
        } else if (monthName === "mar" || monthName === "MAR" || monthName === "MARCH" || monthName === "march") {
            month = "Mar";
        } else if (monthName === "apr" || monthName === "APR" || monthName === "april" || monthName === "APRIL") {
            month = "Apr";
        } else if (monthName === "may" || monthName === "MAY" || monthName === "May") {
            month = "May";
        } else if (monthName === "jun" || monthName === "JUN" || monthName === "june" || monthName === "JUNE") {
            month = "Jun";
        } else if (monthName === "jul" || monthName === "JUL" || monthName === "july" || monthName === "JULY") {
            month = "Jul";
        } else if (monthName === "aug" || monthName === "AUG" || monthName === "august" || monthName === "AUGUST") {
            month = "Aug";
        } else if (monthName === "sep" || monthName === "SEP" || monthName === "september" || monthName === "SEPTEMBER") {
            month = "Sep";
        } else if (monthName === "oct" || monthName === "OCT" || monthName === "october" || monthName === "OCTOBER") {
            month = "Oct";
        } else if (monthName === "nov" || monthName === "NOV" || monthName === "november" || monthName === "NOVEMBER") {
            month = "Nov";
        } else if (monthName === "dec" || monthName === "DEC" || monthName === "december" || monthName === "DECEMBER") {
            month = "Dec";
        }

        var monthNumber = m_names.indexOf(month);
        return monthNumber + 1;
    },
    /**
     * 
     * @param {number} year
     * @param {number} month
     * @returns {number} no of days in month
     * @description Pass the month and year in number format
     */
    getDaysInMonth: function(year, month) {
        return new Date(year, month, 0).getDate();
    },
    /**
     * 
     * @param {type} date, format{Date Object | 'mm/dd/yyyy'}
     * @returns {Array} of Start and End date of the week with respect to parameter passed
     * If date is null the function consider sysdate.
     */
    getStartandEndDates: function(date) {
        start = 0;
        if (date === undefined) {
            var today = new Date();
            var day = today.getDay() - start;
            var date = today.getDate() - day;

            var StartDate = new Date(today.setDate(date + 1));
            var EndDate = new Date(today.setDate(date + 5));
            var startingDate = (new Date(StartDate).getMonth() + 1) + "/" + new Date(StartDate).getDate() + "/" + new Date(StartDate).getFullYear();
            var endingDate = (new Date(EndDate).getMonth() + 1) + "/" + new Date(EndDate).getDate() + "/" + new Date(EndDate).getFullYear();
            return [startingDate, endingDate];
        } else {
            var today = new Date(date);
            var day = today.getDay() - start;
            var date = today.getDate() - day;

            var StartDate = new Date(today.setDate(date + 1));
            var EndDate = new Date(today.setDate(date + 5));
            var startingDate = (new Date(StartDate).getMonth() + 1) + "/" + new Date(StartDate).getDate() + "/" + new Date(StartDate).getFullYear();
            var endingDate = (new Date(EndDate).getMonth() + 1) + "/" + new Date(EndDate).getDate() + "/" + new Date(EndDate).getFullYear();
            return [startingDate, endingDate];
        }

    },
    /**
     * 
     * @param {type} date1 format: Date object | 'mm/dd/yyyy'
     * @param {type} date2 format: Date object | 'mm/dd/yyyy'
     * @returns {Number}
     * @description this function returns 1 if d1 > d2,-1 if d1 < d2
     * else returns 0 if d1 = d2
     */
    compareDates: function(date1, date2) {
        var d1 = new Date(date1).getTime();
        var d2 = new Date(date2).getTime();
        var result = 0;
        if (d1 < d2) {
            result = -1;
        } else if (d1 > d2) {
            result = 1;
        } else {
            result = 0;
        }
        return result;
    },
    /**
     * 
     * @param {type} date1 format: Date object | 'mm/dd/yyyy'
     * @param {type} date2 format: Date object | 'mm/dd/yyyy'
     * @returns {Number}
     * @description this function returns 0 if d1 = d2
     */
    isEqual: function(date1, date2) {
        var d1 = new Date(date1).getTime();
        var d2 = new Date(date2).getTime();
        var result = false;
        if (d1 === d2) {
            result = true;
        }
        return result;
    },
    /**
     * 
     * @param {number}
     * @returns {boolean} true | false
     * @description this function returns true | false
     */
    isLeapYear: function(year) {
        var days = new Date(year, 2, 0).getDate();
        if (days === 29) {
            return true;
        } else {
            return false;
        }
    },
    /**
     * 
     * @param {type} date
     * @returns {Date}
     * @description function takes date object or 'mm/dd/yyyy' as parameter and returns the next date of that.
     */
    nextDate: function(date) {
        var nextDate;
        nextDate = new Date(new Date(date).getFullYear(), new Date(date).getMonth(), new Date(date).getDate() + 1);
        if (date instanceof Date) {
            return nextDate;
        } else {
            return (new Date(nextDate).getMonth() + 1) + "/" + new Date(nextDate).getDate() + "/" + new Date(nextDate).getFullYear();
        }
    },
    /**
     * 
     * @param {type} date
     * @returns {Date}
     * @description function takes date object or 'mm/dd/yyyy' as parameter and returns the previous date of that.
     */
    previousDate: function(date) {
        var previousDate;
        previousDate = new Date(new Date(date).getFullYear(), new Date(date).getMonth(), new Date(date).getDate() - 1);
        if (date instanceof Date) {
            return previousDate;
        } else {
            return (new Date(previousDate).getMonth() + 1) + "/" + new Date(previousDate).getDate() + "/" + new Date(previousDate).getFullYear();
        }
    },
    /**
     * 
     * @param {type} pattern
     * @returns {undefined}
     * Sample : {'days':5,'months':2,'years':6,'date':new Date()} | {'days':5,'months':2,'years':6,'date':"mm/dd/yyyy"}
     */
    add: function(pattern) {

        days = pattern.days;
        months = pattern.months;
        years = pattern.years;
        date = pattern.date;

        var modifiedDate;

        if (date === undefined || date == "" || date == null) {
            alert("date is mandatory !");
        } else {
            if (days === undefined || months === undefined || years === undefined) {
                alert("nothing to add for given date !")
            } else {
                var temp_date = new Date(date);
                var temp_year = temp_date.getFullYear() + years;

                var yearChange = new Date(temp_year, temp_date.getMonth(), temp_date.getDate());
                var yearChange_monthChange = new Date(new Date(yearChange).getFullYear(), new Date(yearChange).getMonth() + months, new Date(yearChange).getDate());
                modifiedDate = new Date(new Date(yearChange_monthChange).getFullYear(), new Date(yearChange_monthChange).getMonth(), new Date(yearChange_monthChange).getDate() + days);

                return modifiedDate;
            }
        }
    },
    /**
     * 
     * @param {type} date
     * @param {type} noOfDays
     * @returns {Date}
     */
    addDays: function(date, noOfDays) {
        return new Date(new Date(date).getFullYear(), new Date().getMonth(), new Date(date).getDate() + noOfDays);
    },
    /**
     * 
     * @param {type} date
     * @param {type} noOfMonths
     * @returns {Date}
     */
    addMonths: function(date, noOfMonths) {
        return new Date(new Date(date).getFullYear(), new Date().getMonth() + noOfMonths, new Date(date).getDate());
    },
    /**
     * 
     * @param {type} date
     * @param {type} noOfyears
     * @returns {Date}
     */
    addYears: function(date, noOfyears) {
        return new Date(new Date(date).getFullYear() + noOfyears, new Date().getMonth(), new Date(date).getDate());
    },
    /**
     * 
     * @param {type} date | can be of a Date Object or 'mm/dd/yy' format
     * @returns {number} first date of the month
     */
    getFirstDayofMonth: function(date) {
        var x = new Date(date);
        var year = x.getFullYear();
        var month = x.getMonth();
        var day = x.getDate();

        var monthFirstDay = new Date(year, month, 1);
        return monthFirstDay;
    },
    /**
     * 
     * @param {type} date | can be of a Date Object or 'mm/dd/yy' format
     * @returns {number} last date of the month
     */
    getLastDayOfMonth: function(date) {

        var x = new Date(date);
        var year = x.getFullYear();
        var month = x.getMonth();
        var day = x.getDate();

        var monthLastDay = new Date(year + (month == 12 ? 1 : 0), (month == 1 ? 12 : month + 1), 0);
        return monthLastDay;
    }
};

Suggestions are welcome on the API.
soon source code will be available on Github …

Wait for my next post on JavaScript Templating
Happy Coding 🙂