For debugging a Java application remotely with Eclipse we need three things:

1. Run the application indicating to the JVM that it has to be executed in debug mode.
2. The source code of the application we want to debug.
3. Configure Eclipse to debug the application.

Starting Apache Tomcat in debug mode

First of all we have to restart the Tomcat with debug option for this purpose we need to pass to JVM (Java Virtual Machine) the options

-Xdebug -Xrunjdwp:transport=dt_socket,address=8000,server=y,suspend=n

JVM opens a port in current machine allowing external applications (like Eclipse) to connect for debugging purposes.

To do that with Tomcat we have to set the environment variable JAVA_OPTS that is read by Tomcat in startup.sh file.

1) Set variable and make it available. we can choose the port number, in this example is used 8000 number.

export JAVA_OPTS="-Xdebug -Xrunjdwp:transport=dt_socket,address=8000,server=y,suspend=n"

2) Start Tomcat (from bin folder):

./startup.sh

Configuring Eclipse to remote debugging

First of all, we have to open or import the project with the source code of the application we want to debug. Afterward we have to setup the debug from Eclipse:

1) Clicking on the right side (arrow facing to above) of the “Debug” button (the button with the bug) that is in the toolbar and the clicking on “Debug configurations…” or in the menu Run > Debug configurations… Then a new window with the different debug configuration will be opened.

Debug configuration

2) Select “Remote Java Application” in the left menu and then press on “New launch configuration” button (the button with the folder icon in the top-left corner).

New debug configuration

3) Fill the configuration with the data corresponding with our Tomcat instance:

• Project: The project we want to debug: it has to contain the source code for the application we want to debug.
• Connection Type: Standard (Socket Attach).
• Host: IP of the server in which is Tomcat installed.
• Port: Port indicated to JVM in address parameter. Port 8000 in our example

Remote Debugging of Tomcat with Eclipse

4) Execute the debug. We have to click on the button “Debug” and Eclipse will connect with Tomcat (it had to be previously running as I mentioned in this post). Now we have to put the breakpoints inside the Eclipse project to debug as we do with a regular project running in a local Tomcat.

And that’s all, if everything works well you can debug your Tomcat remotely. Now there is a long work to do debugging your app. Good luck!

For this example we’re going to use MySQL as database management system. We’re going to operate over testdb database which contains the people table:

And the following tuples:

+----+---------+-----+------------+
| id | name    | age | bornPlace  |
+----+---------+-----+------------+
|  1 | John    |  34 | London, UK |
|  2 | Patrick |  28 | NY, USA    |
+----+---------+-----+------------+

This is the MySQL SQL script for generating the testdb database:

create database testdb;
use testdb;
create table people(id INT, name varchar(100),
                    age INT, bornPlace varchar(100));
insert into people values(1,"John",   34,"London, UK");
insert into people values(2,"Patrick",28,"NY, USA");

Understanding execution of SQL Query from Shell

MySQL allows user to execute queries from the shell with MySQL command. The query can be passed as input using a pipe, like in this example:

echo "select name, age, bornPlace FROM people" | mysql -u david --password=1234 --database=testdb

The database system returns the data and the fields names of the table as first row. This is the result:

name    age     bornPlace
John    34      London, UK
Patrick 28      NY, USA

Shell script

This is the script for retrieving the registries from the database (download it):

USER_NAME=david
USER_PWD=1234

DB_NAME=test

flag=0
delimiter="a3f4g52"

echo "select name, '"$delimiter"', age, '"$delimiter"', bornPlace FROM people" | \
mysql -u $USER_NAME --password=$USER_PWD --database=$DB_NAME | \
while read row ;
do
  if [ $flag == 0 ]; then
    flag=1
  else
    name=`     echo $row | \
               awk -F "$delimiter" '{print $1}' | \
               sed -e 's/ *$//' | sed 's/^ *//'`
    age=`      echo $row | \
               awk -F "$delimiter" '{print $2}' | \
               sed -e 's/ *$//' | sed 's/^ *//'`
    bornPlace=`echo $row | \
               awk -F "$delimiter" '{print $3}' | \
               sed -e 's/ *$//' | sed 's/^ *//'`

    echo ">$name<"
    echo ">$age<"
    echo ">$bornPlace<"
  fi
done

To can split later the fields returned by the query, in select query is inserted a delimiter between each field to retrieve. This will help us later to split the line up with this delimiter. This is the select query and the result of its execution with mysql command command.

david@david$ echo "select name, 'a3f4g52', age, 'a3f4g52', bornPlace FROM people" | mysql -u david --password=1234 --database=testdb
name    a3f4g52 age     a3f4g52 bornPlace
John    a3f4g52 34      a3f4g52 London, UK
Patrick a3f4g52 28      a3f4g52 NY, USA

The while loop reads each line:

• if-else sentence with flag variable avoid reading the first row which contains the name of the fields
• awk command to separate each row by the delimiter.
• sed command to remove the spaces in beginning and end of the fields with the s command ‘s/regexp/replacement/flags’:
• Trailing spaces: sed -e ‘s/ *$//’
  
• Beginning spaces: sed -e ‘s/^ *//’

And this is the output of the shell script, it shows each field in a new line and cleaned of spaces.

>John<
>34<
>London, UK<
>Patrick<
>28<
>NY, USA<

In this post is presented how to make a select query an retrieve the results. I hopeyou can adapt this simple example to create most complex programs.

Google Code Playground

Google Code Playground is very powerful tool provided by Google in order to help developers “playing” with its APIs such as Language, Maps, Visualization, etc. You can navigate between a wide quantity of examples for each API, each example comes with the source code for implementing them.

Google Code Playground

But actually Google Playground is more than this. It is a kind of web IDE (Integrated Development Environment), you can edit the example source code and program your own JavaScript snippets for the different APIs. This tools allows you to edit code, run or even debug the code and then see the results from the browser.

You can start from a example, adapt it to your needs and then copy the code to insert in your page. If you are used to use Google APIs I am sure that this tool will be very useful for you.

Google OAuth 2.0 Playground

Google OAuth 2.0 Playground is another playground more complex for end users, but developers can to take advantage of it. It lets you play with OAuth 2.0 protocol and Google APIs that supports it, like Google+, Google Contacts, Google Spreadsheet, etc. You can make HTTP requests and the playground shows you the request header and the response header and body. This playground lets you:

• Select and authorize Google APIs through OAuth 2.0 protocol.
• Exchange authorization code for tokens
• Construct your HTTP request and invoke Google services by specifying the URI, HTTP Method, headers, content type and request body.

I highly recommend you these playgrounds if you someday you develop some application using the Google APIs.  I hope you enjoy these playgrounds playing like children.

To demostrate how to use JSONP with jQuery let’s take the same REST service of my latest post about JSONP, the Google Geocoding API (V2).

jQuery has a function called ajax() which allows developers to invoke AJAX for calls between same domain and JSONP for calls between cross domains.

At least four options have to be set as argument of jQuery ajax function:

• url: the URL of the service. This argument is going to be filled dynamically to take the place from the input field of the form. (See more details in the post  JSONP: JSON with padding complex example)
• dataType: for JSONP calls must always be ‘jsonp’, we are handling JSONP format.
• crossDomain: for JSONP calls must always be ‘true’ if we are making a call to a different domain. (We also can make JSONP calls in the same domain, but in this case is much more simple to use AJAX and JSON as return format).
• success: the function where the JSON passed as argument of the JSONP is processed. In it should be implemented the logic for processing the JSON.

Another clarifications about the code:

• Lines 14-26: A function is defined for executing when user makes click on search button.
• Line 15: $(“#place”).val() extracts the value introduced by the user in the text field. This value is used to construct the URL for invoking the service.
• Line 22: In it is selected the coordinates from the JSON returned by the service and is stored in coordinates variable.
• Line 23: The coordintates are inserted in the <p> with id coordinates using the function text().

<html>
  <head>
    <title>Coordinates Search</title>
  </head>
  <body>
    <h1>Search the coordinates of your favourite place</h1>
    <input type="text" id="place" value="" />
    <input type="button" id="search" value="Search "/>
    <p id="coordinates"></p>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" >
      $(document).ready(function() {
        $("#search").click(function() {
          var url = "http://maps.google.com/maps/geo?output=json&sensor=false&q=" + $("#place").val();

          $.ajax({
            url: url,
            dataType: 'jsonp',
            crossDomain: true,
            success: function(response) {
              var coordinates = response["Placemark"][0]["Point"]["coordinates"];
              $("#coordinates").text(coordinates[0] + ", " + coordinates[1]);
            }
          });
        });
      });
    </script>
  </body>
</html>

You can see the example working here. Enjoy it!

JSONP (JSON with padding) is a method for making asynchronous requests in different domains, it is commonly used for invoking RESTful Services. JSONP is conceived because of the lack of AJAX for performing requests to resources that are in different domain. The same origin policy prevents that AJAX from being used across domain. A web page which is placed under davidsblog.eu can only access (through AJAX) to data which is under the domain davidsblog.eu and in the same port (in this case the port 80).

JSON

For understanding JSONP, the first requirement is to understand JSON. JSON (JavaScript Object Notation) is a lightweight data interchange format. This format is copied from the way for representing associative arrays (objects) in JavaScript.

This is a JSON which represents a person with three properties: name, age and sex.

{
    "name" : "John"
    "age" : 23,
    "sex": "MALE"
}

In JavaScript this type of structures can be accessed in two ways:

• Associative array style:

var name = json["name"];

• Through point operator:

var name = json.name;

Once JSON is understood, JSONP format is just “function(json)”, a function whose unique parameter is a JSON. Example:

processPerson({ "name" : "John", "age" : 23, "sex": "MALE" });

Yes, it is not too complicated at all.

How can we do a JSONP call?

We have to include the URL of the service in a <script> HTML tag:

<script type="text/javascript" src="URL"></script>

When the <script> tag is read by the browser, it loads the JavaScript file indicated in the URL, in this case a service which returns JSONP. When the browser interprets the JavaScript, the function indicated in the JSONP code is invoked with the JSON as argument.

Simple Example: JSONP for dummies

This is an example of JSONP (jsonp.js):

printName({"name":"John"});

The following example is an HTML page which a JavaScript script. A function called printName is defined. This function retrieves the heading h2 with id “userName” and inserts text. This text is extracted from the JSON parameter, the property “name” of the object. This is the file index.html

<html>
  <head>
    <title>JSONP Example</title>
  </head>
  <body>
    <h1>JSONP Example</h1>
    <h2 id="userName"></h2>
    <script type="text/javascript">
      function printName(json) {
        var el = document.getElementById("userName");
        el.innerHTML = "Hello " + json.name;
      }
    </script>
    <script type="text/javascript" src="jsonp.js"></script>
  </body>
</html>

You can see the example working here. Enjoy it!

JSONP Example
Hello John

Complex Example: JSONP for experts

This time I am going to use a real REST service from Internet, Google Geocoding API (V2). This service returns a JSON, XML o JSONP with the coordinates of a place given its name.

This is the URL of the service http://maps.google.com/maps/geo, these are the query parameters we are going to use:

• output: output format (json)
• sensor: indicates whether or not the geocoding request comes from a device with a location sensor (false)
• q: the place’s name (this argument is going to be filled dynamically to take it from the input field of the form)
• callback: for JSONP, the name of the function you want to invoke (showCoordinates)
• key: key for using Google API. It is not necessary if you test it from localhost.

Example: http://maps.google.com/maps/geo?output=json&sensor=false&q=Madrid&callback=showCoordinates

This is the HTML file (download it) with the HTML and JavaScript code:

<html>
  <head>
    <title>Coordinates Search</title>
  </head>
  <body>
    <h1>Search the coordinates of your favourite place</h1>
    <input type="text" id="place" value="" />
    <input type="button" onclick="searchCoordinates();" value="Search "/>
    <p id="coordinates"></p>

    <script type="text/javascript">
      function showCoordinates(response) {
        var p = document.getElementById("coordinates");
        var coordinates = response["Placemark"][0]["Point"]["coordinates"];
        p.innerHTML = coordinates[0] + ", " + coordinates[1];
      }

      function searchCoordinates() {
        var place = document.getElementById("place").value;
        var url = "http://maps.google.com/maps/geo?output=json&sensor=false&q=" +
                  place + "&callback=showCoordinates";

        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.charset = 'utf-8';
        script.src = url;
        document.getElementById("scripts").appendChild(script);
      }
    </script>

    <div id="scripts"></div>
  </body>
</html>

The HTML has mainly these three components:

• A form with an input field to introduce the place to search its coordinates (line 7).
• A button to submit the search request (line 8): calls the searchCoordinates JavaScript function.
• A <p> to display the coordinates once they are retrieved with Google’s service (line 9).

The JavaScript contains two functions:

• searchCoordinates: Invokes the Google Geocoding API to retrieve the coordinates:
  • It extracts the text from the input field (line 19)
  • Uses it to construct the URL to invoke the service (line 20), the callback function is showCoordinates. Notice: You also have to include the Google key if you test it in a server instead of localhost (see complete example).
  • Inserts a <script> with the URL of the service.
• showCoordinates: It selects the coordinates from the JSON returned by the service and inserts it in the <p> of line 9.

You can see the example working here. Enjoy it!