ISO 8601 time stamp to Java time stamp using Joda-Time API

Hi Guys,

In this post we are going to see how to convert ISO time stamp to Java and oracle time stamp using Joda-Time API.

Joda-Time provides a quality replacement for the Java date and time classes.
Joda-Time is the de facto standard date and time library for Java. From Java SE 8 onwards, users are asked to migrate to java.time (JSR-310).

For more details on Joda-Time API refer http://www.joda.org/joda-time/.
Let's see how to implement Joda-Time API for converting ISO to Java time stamp. We need to include joda-time-1.6.jar or latest version of dependency for working with Joda-Time API. 

package in.jodatime;

import java.sql.Timestamp;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Locale;
import org.joda.time.DateTime;
import org.joda.time.format.*;

public class Jodatime{

public static void main(String[] args) throws ParseException {

DateTimeFormatter parser = ISODateTimeFormat.dateTimeNoMillis();
String jtdate = "2014-11-06T18:18:47+0000"; // ISO Timestamp
DateTime dateTime = parser.parseDateTime(jtdate); // Parse ISO timestamp
String tempDate = dateTime .toString();
System.out.println(tempDate);

  //Create SimpleDataFormat For converting from ISO to Java and to Oracle
SimpleDateFormat dateFormat = new SimpleDateFormat("yy-MM-dd'T'h:mm:ss");
Date date = dateFormat .parse(tempDate );
System.out.println(date);

dateFormat = new SimpleDateFormat("dd-MMM-yy h:mm:ss a", Locale.ENGLISH);
String formatDate = dateFormat .format(date);
System.out.println(formatDate );

}
}

Output:

That's all Folk's..

Jackson Ignore null / empty values in JSON serialization with @JsonInclude

Hi Guys,

In this post we are going to see how to ignore null and Empty values using Jackson @Include Annotations.
Jackson 2.x provides @JsonInclude annotation to specify the property that should be included during serialization based on its values.

@JsonInclude can have following values

• Include.ALWAYS indicates that property is serialized irrespective of its value
• Include.NON_DEFAULT indicates that property is serialized if its value is different from default settings
• Include.NON_EMPTY indicates that property is serialized if its value is not null and not empty
• Include.NON_NULL indicates that property is serialized if its value is not null

Jackson 2.x JAR Dependency

To serialize or unserialize JSON using Jackson 2.x requires following three jar files in classpath

• Core – jackson-core-2.2.3.jar
• Annotations – jackson-annotations-2.2.3.jar
• Databind – jackson-databind-2.2.3.jar

Jackson 2.x JAR Download URL
Download Jackson 2.x Libraries

Jackson Ignore null/empty values Example

User.java
In User Java Bean class, city is annotated with @JsonInclude(value=Include.NON_EMPTY) so it will be included in serialization only if its value is non null and non empty string. Similarly, height is annotated with @JsonInclude(value=Include.NON_NULL) so it will included in serialization only if its value is non null.

package in.binding
import com.fasterxml.jackson.annotation.JsonInclude;
import com.fasterxml.jackson.annotation.JsonInclude.Include;
/**
* @author Visakh
*/
public class User {

private String name;
@JsonInclude(value=Include.NON_EMPTY)
private String city;
private Integer age;
@JsonInclude(value=Include.NON_NULL)
private Double height;
private Boolean married;

public User() {
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public String getCity() {
return city;
}

public void setCity(String city) {
this.city = city;
}

public Integer getAge() {
return age;
}

public void setAge(Integer age) {
this.age = age;
}

public Double getHeight() {
return height;
}

public void setHeight(Double height) {
this.height = height;
}

public Boolean getMarried() {
return married;
}

public void setMarried(Boolean married) {
this.married = married;
}

@Override
public String toString() {
return "User [name=" + name + ", city=" + city + ", age=" + age
+ ", height=" + height + ", married=" + married + "]";
}
}

JsonSerializationExample.java

In JsonSerializationExample, city is set to empty string and height is not set i.e. eventually set to null.

package in.binding;

import java.io.IOException;

import com.fasterxml.jackson.databind.ObjectMapper;

/**
* @author Visakh
*/
public class JsonSerializationExample {

public static void main(String args[]) {

User user = new User();
user.setName("Visakh");
user.setCity(""); //city is set to empty string
user.setAge(23);
// user.setHeight(5.7); height is not set; hence it will be null
user.setMarried(Boolean.FALSE);
System.out.println("User: " + user);

try {
// ObjectMapper provides functionality for data binding between
// Java Bean Objects/POJO and JSON constructs/string
ObjectMapper mapper = new ObjectMapper();

// serialize userList to JSON format and write to file
String jsonString = mapper.writeValueAsString(user);

System.out.println("JSON string: " + jsonString);
} catch (IOException e) {
e.printStackTrace();
}
}
}

Example Output
As shown in log output, city and height are not serialized to JSON string.

• User: User [name=Visakh, city=, age=23, height=null, married=false]
• JSON string: {"name":"Visakh","age":23,"married":false}

If you want to ignore null or empty values globally you can set it using Mapper Serialization.
Instead of using @Include in all classes use Serialization in Main class.

• mapper.setSerializationInclusion(Include.NON_EMPTY);

By using setSerializationInclusion Method you can set it globally.

That's All Folks

Jackson Streaming API to Read JSON

Hi guys
In the previous post we saw how to write JSON using Jackson. Lets see how to read JSON using Jackson Streaming API.

1. JsonParser – Parse JSON.

JsonParser

On the other hand, use JsonParser to parse or read above file “data.json“, and display each of the values.

import java.io.File;
import java.io.IOException;
import com.fasterxml.jackson.core.JsonFactory;
import com.fasterxml.jackson.core.JsonGenerationException;
import com.fasterxml.jackson.core.JsonParser;
import com.fasterxml.jackson.core.JsonToken;
import com.fasterxml.jackson.databind.JsonMappingException;

public class Read {
public static void main(String[] args) {

try {

JsonFactory jfactory = new JsonFactory();

/*** read from file ***/
JsonParser jParser = jfactory.createJsonParser(new File("./src/data.json"));

// loop until token equal to "}"
while (jParser.nextToken() != JsonToken.END_OBJECT) {

String fieldname = jParser.getCurrentName();
if ("blogname".equals(fieldname)) {

// current token is "blogname",
// move to next, which is "name"'s value
jParser.nextToken();
System.out.println(jParser.getText()); // display oraclejavatechzone.com

}

if ("subject".equals(fieldname)) {

// current token is "subject",
// move to next, which is "name"'s value
jParser.nextToken();
System.out.println(jParser.getText()); // display java

}

if ("year".equals(fieldname)) {

// current token is "year",
// move to next, which is "name"'s value
jParser.nextToken();
System.out.println(jParser.getIntValue()); // display 2013

}

if ("posts".equals(fieldname)) {

jParser.nextToken(); // current token is "[", move next

// posts is array, loop until token equal to "]"
while (jParser.nextToken() != JsonToken.END_ARRAY) {

// display post11, post2, post3
System.out.println(jParser.getText());

}

}

}
jParser.close();

} catch (JsonGenerationException e) {

e.printStackTrace();

} catch (JsonMappingException e) {

e.printStackTrace();

} catch (IOException e) {

e.printStackTrace();

}
}
}

Output:

That's All guys..

Jackson Streaming API to Write JSON

Hi guys,
In this post i show you how to create JSON file using Jackson Streaming API.

Jackson supports read and write JSON via high-performance Jackson Streaming APIs, or incremental mode. Read this Jackson Streaming APIs document for detail explanation on the benefit of using streaming API.

Jackson’s streaming processing is high-performance, fast and convenient, but it’s also difficult to use, because you need to handle each and every detail of JSON data.

In this tutorial, i show you how to use following Jackson streaming APIs to read and write JSON data.

1. JsonGenerator – Write to JSON.
2. JsonParser – Parse JSON.

JsonGenerator

In this example, you use “JsonGenerator” to write JSON “field name”, “values” and “array of values” into a file name “file.json“. See code comments for self-explanatory.

import java.io.File;
import java.io.IOException;
import com.fasterxml.jackson.core.JsonEncoding;
import com.fasterxml.jackson.core.JsonFactory;
import com.fasterxml.jackson.core.JsonGenerationException;
import com.fasterxml.jackson.core.JsonGenerator;

public class WriteJson {
public static void main(String[] args) {

try {

JsonFactory jfactory = new JsonFactory();

/*** Write JSON TO FILE ***/
JsonGenerator jGenerator = jfactory.createGenerator(new File("./src/data.json"), JsonEncoding.UTF8);
jGenerator.writeStartObject();  //{

jGenerator.writeStringField("blogname", "oraclejavatechzone.com");
jGenerator.writeStringField("subject", "java");

jGenerator.writeNumberField("year", 2013);

jGenerator.writeFieldName("posts"); //"posts":

jGenerator.writeStartArray(); //[
jGenerator.writeString("post 1");
jGenerator.writeString("post 2");
jGenerator.writeString("post 3");

jGenerator.writeEndArray(); \\]
jGenerator.writeEndObject(); //}

jGenerator.close();
System.out.println("File write successfully");

} catch (JsonGenerationException e) {
e.printStackTrace();

} catch (IOException e) {
e.printStackTrace();

}

}
}

As result, following new file named “data.json” is created :

That's All Folks...

Send HTML Form Data as JSON via Ajax

Hi Guys,

There's a lot of confusion among new developers on which format they want to send the data to server. Some use JQuery API's and some use normal form data. In this post we will see how to send form data as JSON to server.

First question that would surely come to your mind is why to send JSON to server? Is there any advantage of sending data as JSON? it depends upon what your web app does and what data you are sending? If structure of data is really complex then JSON must be used in order to reduce parsing complexity.  Sometimes you have web application that accepts/prefers JSON data coming from client end so in such cases you need to convert your form’s data in JSON and post it to server.

So for sending data as JSON we need to use $('#formname').serializeObject() method in JQuery and process form ouput to JSON format. Lets see how to achieve this.

Step 1:

Create a Dynamic Web application project in Java. Create index.jsp under Web-content folder.Include jquery.serializeObject.js plugin. Refer https://github.com/hongymagic/jQuery.serializeObject for more details on plugin.
Once we serialize our Form data to JSON we need to use JSON.stringify() method for converting Object to JSON text and stores that in a string.
Once we get the JSON text as String we can able to send that data to our Servlet using Ajax Request.

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Insert title here</title>

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="js/jquery.serializeObject.js"></script>

<script>

$(document).ready(function(){

$("#simplepost").click(function(e)

{

var data = $('#ajaxform').serializeObject();

 $.ajax({

    type: 'POST',

    url: 'Json',

    dataType : 'json',

    data: JSON.stringify(data),

    success: function (response) {

    console.log(response);   

    },

    error:function(request, textStatus, errorThrown) {

        alert(errorThrown);

    }

}); 

});

});

</script>

</head>

<body>

<div id="message">

<form id="ajaxform" method="POST">

First Name: <input type="text" name="fname"> <br/>

Last Name: <input type="text" name="lname"> <br/>

Email : <input type="text" name="email"> <br/>

<input type="button" class="btn btn-info" id="simplepost" value="Run Code"></form>

 </div>

</body>

</html>

Step 2:
Create a Java bean called Data under src/package. In Java i am using Java Jackson Processor for mapping my JSON data with Java bean. You can refer http://jackson.codehaus.org/ for more details on Jackson processing.

@JsonIgnoreProperties(ignoreUnknown = true)
public class Data {

private String fname;
private String email;
private String lname;
public String getFname() {
return fname;
}
public void setFname(String fname) {
this.fname = fname;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getLname() {
return lname;
}
public void setLname(String lname) {
this.lname = lname;

}
}

Step 3:
Create another Java bean called Response for processing the response.

public class Response {

private String response;

public String getResponse() {
return response;
}

public void setResponse(String response) {
this.response = response;
}

}

Step 4:
Create Java Servlet called Json for processing our data which we send through Ajax Request from our client.

public class Json extends HttpServlet {
private static final long serialVersionUID = 1L;
       
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try{
BufferedReader br = new BufferedReader(new InputStreamReader(request.getInputStream()));

  String json = "";
        if(br != null){
            json = br.readLine();
        }
        
        ObjectMapper mapper = new ObjectMapper();
        Data data = mapper.readValue(json, Data.class);
        String fname = "Fname:"+data.getFname()+" ";
        String lname = "LNAme: "+data.getLname()+" ";
        String email = "E-Mail: "+data.getEmail()+" ";
        
        try
        {
        File file =new File("C:/Users/padmakvis/Desktop/data.txt");
        if(!file.exists()){
        System.out.println("Creating file...");
        file.createNewFile();
}
        System.out.println("Reading Data");
        FileWriter fileWriter = new FileWriter(file,true);
        BufferedWriter bufferWritter = new BufferedWriter(fileWriter);
        fileWriter.append(fname);
        fileWriter.append(lname);
        fileWriter.append(email);
        bufferWritter.newLine();
        bufferWritter.close();
        System.out.println("File write Successfully...");
        }catch(IOException e)
        {
        e.printStackTrace();
        }
        
        Response responseData = new Response();
        responseData.setResponse("Data Stored Successfully");
        response.setContentType("application/json");          
        mapper.writeValue(response.getOutputStream(), responseData);
        
}catch(Exception e)
{e.printStackTrace();}
}


}

I am using Object Mapper class for mapping my JSON data with Java bean. Once we map the data we can get all the fields what ever we are sending through Ajax request. After getting all the data i am writing the data to a text file using file-writer. Once the request got processed successfully we need to send response back to our client via Ajax. For that i am using mapper.writeValue() method from Jackson processor.

That's all Folk's

SOA12C - RCU Step by step installation

Hi guys,

In this post we will see how to install RCU 12c above Oracle 12c database.

RCU comes with Oracle SOA 12c installer, so you need not to download it separately.  You can find rcu file at below location.

Oracle_Home\oracle_common\bin\rcu.bat

Step 1: To run the rcu go to the above path from command prompt as Administrator

Before running the rcu file set path for JAVA_HOME under environment variables.

Go to MyComputer -> properties -> Advanced System Settings -> Environment Variables

Note: If you are not setting the java_home path, you will get an error like "oracle_home folder path\jdk\bin\javaw" is not a valid path.

Step 2: This will launch the RCU wizard. Choose "System Load and Product Load".

Step 3: Provide oracle database details and click on next.

Under Service Name you want to provide Service name of pluggable database.

Step 4: It check prerequisites. If all the three operations completed successfully, you are ready to create database schemas for SOA12c.

Step 5: Specify schema prefix and choose the components which you need.

Step 6: it will check prerequisites.

Step 7: choose same password for all the schemas.

Step 8: Once completed, Click on next.

Step 9: click on create to create required schemas.

Once the scheme get created successfully you will get the status "Success" for all Created schemas.

That's all Folks..

How to Create a Like and Share Button on Facebook

Hi guys,
Now a days we can able to see like and share button in all Websites. We can create a Facebook Like and Share button for our Facebook page or your own Websites.
Lets see how to create like and share button and how to integrate with JavaScript.

Step 1:
Log in to Facebook as a developer using https://developers.facebook.com.

Step 2:
Once you logged in go to https://developers.facebook.com/docs/plugins/like-button/

Provide the URL of your Facebook Page or your Website which you want to create Like and Share Button.

If you don't want the Share button just unchecked the Include Share Button option.

Once you done this Click on "Get Code" Button.

Step 3:

• Once you click on get code button you will get a window like above.
• Select the app from your facebook developer for initializing JS SDK.
• Copy the code and put it in your Webpage. You are now done with creating like and share button.
• If you already initialize the JS SDK in your code then you need only the html plugin code for like and share button. No need of JavaScript SDK shown in the screen shot.

That's All FOLKS....

How to Schedule a post to Facebook page using Javascript

Hi Guys,
For the past 2 days i am wondering how to schedule a post and schedule photo/video to Facebook page from our websites using JavaScript. Finally i got the solution for that.
Lets see how to implement that using JavaScript.

Step 1:
For implementing Facebook related stuff, first we need to create an Facebook App.
You can refer my previous post for creating an app in Facebook.
http://oraclejavazone.blogspot.com/2014/05/how-to-create-app-in-facebook-with-user.html

Step 2:
Load your JavaScript SDK in your JSP file.
You can refer my previous post for loading Facebook JavaScript SDK.
http://oraclejavazone.blogspot.com/2014/07/how-to-create-facebook-login-for-web.html

Step 3:
We need to get the Page Access Token for posting to Facebook page. For that we need to get the page access token once page owner get logged in to Web using Facebook App.
In previous post i explained how to get the user details when user get logged in. So instead of getting user details here we need to get the page access token. Follow the below code to get the Page Access token using FB.api() method.

var Access_Token;
FB.api('/me/accounts', function(response){
          Access_Token = response.data[0].access_token; //from the response pick the first data.
          console.log("Access Token:"+Access_Token); //getting page access token
          var p_name = response.data[0].name; // getting page name
          console.log(p_name);
          });

Once you get the Page Access Token use that for posting to your Facebook Page.

Step 4:
Now Schedule a post to Facebook. For Scheduling you need scheduled_publish_time="unixtime" and published="false" as parameter with Graph API URL request.

FB.api('/your pageid/feed', 'post',
{ 'message': Your message, 'scheduled_publish_time':unixtime ,'published': false,
           'access_token':Your PageAccessToken }, function(response) {
  if (!response && response.error) {
    //handle the response
  }
});

Use Unix time-stamp for scheduling post to Facebook, Facebook accept only Unix time-stamp. The time-stamp should be in between 10 minutes to 6 months.
For information on Unix time-stamp refer http://www.unixtimestamp.com/index.php
Instead of hard-coding the time-stamp use Calender for getting the time. Get the time from calender then convert it to Unix time-stamp.

Step 5:
If you are scheduling photo/video to facebook page, you need to use Ajax or XML HTTP request Object with Multipart File Upload. Because FB.api method doesn't support for uploading photo/video from your system. For information on Form data refer
https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects
So lets see how to schedule photo/video to facebook page using XML HTTP request Object.

oReq.open("POST", "https://graph.facebook.com/your page id/photos?access_token="+Page AccessToken+"&scheduled_publish_time="+unixtime+"&published=false",true);

For videos use page-id/videos. Once you schedule the post you will get object_id of the post. Once your post get posted successfully on your facebook page you will get notification from facebook.
Note: Only Facebook Page owner can schedule the post on page. Page users cant able to do this.

That's All Folks.

How to Create a Facebook Login for WEB using JavaScript SDK

Hi Guys,
Lets see how to create Facebook login in your website using JavaScript SDK

Step 1:
For implementing Facebook related stuff, first we need to create an Facebook App.
You can refer my previous post for creating an app in Facebook.
http://oraclejavazone.blogspot.com/2014/05/how-to-create-app-in-facebook-with-user.html

Step 2:
Load your JavaScript SDK in your JSP file. You can load SDK either Synchronously or Asynchronously.
I am loading the SDK Asynchronously.
Add the below code after opening <body> tag in your JSP file.

<div id="fb-root"></div>
<script>
var AccessToken;

window.fbAsyncInit = function() {
FB.init({
        appId: 'your app id',
        xfbml: true, //for parsing social plugins
        status: true, //for getting user status
        cookie: true, //save cookie
        version:'v2.0' //version of graph API
      });
   
FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
  });
};

(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/sdk.js";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));


  //checking login status of user
 function statusChangeCallback(response) {

        if(response && response.status == 'connected') {
          alert('User is authorized');
         AccessToken = response.authResponse.accessToken; //Get the user access token from the auth                         //response
         console.log('Welcome!  Fetching your information.... ');
         FB.api('/me', function(response) {
               console.log('Good to see you, ' + response.name + '.' +  response.id);
         });
         console.log(AccessToken);
       } else {
         alert('User is not authorized');
       }
}

 function checkLoginState() {
   FB.getLoginStatus(function(response) {
     statusChangeCallback(response);  });
 }
</script>

For more details refer https://developers.facebook.com/docs/facebook-login/login-flow-for-web/v2.0

Step 3:
Create the Facebook Login Button using <fb:login-button>.
Add the below code to your JSP file.

<fb:login-button scope="public_profile,email" onlogin="checkLoginState();" autologoutlink="true">
</fb:login-button>

• scope="public_profile,email" used to retrieve the data's that you wish to get from Facebook once user get logged in successfully.
• autologoutlink="true" enable log out button once user logged in to your website using Facebook.

While running the code open browser console finding the user id and name of the user.

That's All Folks...

How to create an app in Facebook with User access token.

Hi Guys,

Lets see how to create an App in Facebook with User access token.

Step 1:
Log in to Facebook as a developer using https://developers.facebook.com.

Step 2:
Click on the app tab and select Create New APP

Enter the display name and Choose the category you wish to Use. Once u complete this click on Create App Button.

Once your App is successfully Created you will get a APP Id and App Secret. Dont Share your App id and App Secret. App id and App Secret should be used when you go for Social Media Integration or Any other App works.

Step 3:

Once you completed this we want to make our app available to public. For this U want to provide E-Mail id in settings.

Select the Settings from left panel and Provide your E-Mail id in Contact E-Mail box. After this Select "Status and Review" from left panel and make the available to public Option as 'Yes'. Now your App is available to public with default permissions.

Step 4:
If you need more permissions go to App Details and Select Configure App Center Permissions
from App Center Listed Platforms and add your Extended permissions you need.

If your app asks for more than than public_profile, email and user_friends it will require review by Facebook before your app can be used by people other than the app's developers.

For more details refer to this https://developers.facebook.com/docs/facebook-login/permissions/v2.0

Step 4:

Adding Platform for your app. Go to Settings and Select Add Platform button. Select the platform you need.

Once you select the platform you want to provide Canvas URL or Website URL. Once you provide all these things your app is now ready with all settings.

Step 5:

Lets see how to create User Access Token for your App. For more information on Access Tokens refer this https://developers.facebook.com/docs/facebook-login/access-tokens/.

From the tools select Graph Explorer, it will take you to Graph API Explorer. Select the Application you want to generate User Access Token. Once you done this Click on Get Access Token, it will ask for the permissions you need select the permissions and click get Access token.

Now you can able to see your User Access Token in Access Token field. If you want to know the App token just click on Get App Token, You can see your App Token in the field.

Once you get the User Access Token click on submit button u can see your User id and name. If you need any additional information U can add extra fields to text field near to get button and You will get the data related to that.

That's All Folks....

JQX Window loader Example

Today I think to post something related to JQuery

Our Goal
To create a JQX Window using jquery with minimize and maximize options and show the loader inside jqx window when the page loads.

Here is Your Code.
Step 1: 
Add the following JS and css files in your project.

• jquery-1.10.2.min.js
• gettheme.js
• jqxcore.js
• jqxwindow.js
• jqxbuttons.js
• jqx.base.css

http://www.jqwidgets.com/download/    - Download the required files from this link.

Step 2:

Create index.jsp page and add the below code.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

    pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>JQx Window</title>

<link rel="stylesheet" href="css/jqx.base.css" type="text/css" />

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

<script type="text/javascript" src="js/gettheme.js"></script> 

<script type="text/javascript" src="js/jqxcore.js"></script>

<script type="text/javascript" src="js/jqxwindow.js"></script>

<script type="text/javascript" src="js/jqxbuttons.js"></script>

<script>

(function( $ ) { 

        $(function () {

            var theme = getDemoTheme();

      

            $("#jqxwindow").jqxWindow({

                    showCollapseButton: true, height:600, width: 1000, theme:theme, title:'JQX Window', resizable: false , autoOpen: false, zIndex: 0, isModal : true

                    });

      

            $('#openWindow').jqxButton({ theme:theme, width: '80px' }); 

            

            $("#jqxwindow").on("open", function () {

               loadPage('jsp/welcome.jsp'); //Load welcome.jsp inside jqx window

            });

            

            $("#jqxwindow").on("close", function () {

clearPage();

  });

   

            $('#jqxwindow').jqxWindow('focus');

         

            

            var loadPage = function (url) {

                $.get(url, function (data) {

                    $('#content').html(data); //load the page inside content div

                    

                });

            };

            

            var clearPage = function () {

                $('#content').html('<div>' + "<img src='images/loader.gif' style='margin-top: 50px;'>" +" <h4 style='color:gray;''>Loading please wait..</h4>"+ '</div>');

            };

            

            

            $("#openWindow").click(function() {

                $("#jqxwindow").jqxWindow('open'); // open jqx window on button click

                 

           

        });

});

})(jQuery);

</script>

</head>

<body class='default'>

<div align="center">

    <button id="openWindow">Show</button>

 </div>

<div id='jqxwindow'>

        

        <div>

            

                <div id="content">

                    <img src='images/loader.gif' style="margin-top: 50px;"/>

                    <h4 style="color:gray;">Loading please wait..</h4>

                </div>

        </div>

</div>

</body>

</html>

Add the loader.gif file in to your project under WEB-INF/images folder.

Step 3:

Create welcome.jsp file under Webcontent/jsp folder.

<%@ page isErrorPage="true" %>

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

    pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Welcome Page</title>

</head>

<body>

<div align="center" style="margin-top: 200px;">

<h3>Welcome You are done with JQX window Loader.</h3>

</div>

</body>

That's All Folk's