Step by Step guide for Hello World Page (HTML and JSP)

This post has been moved to http://srinichekuri.com/2016/01/14/step-by-step-guide-for-hello-world-html-and-jsp/

**********************************************************************

This post is a step by step guide to develop your first html and jsp. Traditionally, developers code ‘Hello World !!!’ as first page and I am sticking to this tradition.

I am using a Eclipse IDE and Apache Tomcat for this tutorial. I recommend going through ‘Step by Step guide to configure Eclipse and Apache Tomcat‘ before you proceed any further.

Step-1: Create Dynamic Web Application

Create a new Dynamic Web Project by clicking on FIle -> New -> Dynamic Web Project

dynamic_project.png

Give a project name and click on Finish.

dynamic_project_1

Step-2: Create a HTML page

Create a new html page by right clicking on WebContent and selecting New -> HTML File.

dynamic_project_2.png

Put in a filename helloWorld.html and click on Finish.

dynamic_project_3.png

Put in this code in helloWorld.html.

<!DOCTYPE html>
<html>
<head>
 <meta charset="ISO-8859-1">
 <title>Hello World</title>
</head>
<body>
 <h5>Hello World - html</h5>
</body>
</html>

Step-3: Create a JSP page

Create a new jsp page by right clicking on WEB-INF and selecting New -> JSP File.

dynamic_project_9

 

Put in a filename helloWorld.jsp and click on Finish.

dynamic_project_10

 

You are seeing any compilation errors then make sure that you have right Runtimes checked as shown below.

dynamic_project_5_1

Put in below code into the jsp.

<%@ 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>Hello World</title>
</head>
<body>
<h5>Hello World - jsp</h5>
</body>
</html>

Step-4: Add Project to Server.

Add Project server to Server.

dynamic_project_5_2

dynamic_project_5_3.png

Step-5: Access new pages.

Access html page by url in browser. Url will be in “http://localhost:<port>/HelloWorld/helloWorld.html&#8221; format

dynamic_project_6.png

Access jsp page by url in browser. Url will be in “http://localhost:<port>/HelloWorld/helloWorld.jsp&#8221; format

dynamic_project_7.png

 

 

Advertisements

Select2 – Jquery Plugin – examples

This post has been moved to http://srinichekuri.com/2016/01/09/select2-jquery-plugin/

**********************************************************************

Select2 is famous Jquery plugin that allows customization of select component with support for searching, tagging, remote data sets, infinite scrolling etc.

I had a chance to work on select2 plugin off late and I was able to use it with using various options. I faced some serious issues while working on these options and realized that there were lot of developers who inquired on web on how to use select2 in these scenarios but there are no proper responses/documentation with examples for these scenarios.

Below are the various examples for select2 that I have published.
Select2 3.5.2 version was used for below examples. Be advised to read through specs before you process any further.

Below are Select2 Parameters that I have used for examples :

  • minimumInputLength: minimum number of characters before starting a search.    Eg: 2.
  • minimumResultsForSearch: limit on the results to be displayed.
  • placeHolder: Place holder to be shown when there are no selections made.           Eg: ‘Select Employee’
  • tokenSeparators: Character set that can be used as delimeters to enter multiple values. Eg: [‘,’]
  • Multiple: Boolean value to indicate if multiple values can be selected
  • Id: function used to get id from the object that is selected
  • Ajax: Option to be used for built in ajax query selection.
    • url: url to make ajax call.
    • datatype: data type of request. Eg: ‘json’
    • params: Extra paramters to be passed on in request. Eg: ‘{contentType: “application/json”}’
    • data: query parameters for ajax request
    • results: builds query result object from ajax response.
  • formatSelection: format the selection that is shown.
  • formatResult:  Function used to render a result that is shown to user for selection. Eg: results that are shown in dropdown.

Select2 – Tags (Click Here for working code):select2_ajax_tags_selections

 

&lt;div id=&quot;maincontainer&quot; class=&quot;clearfix&quot;&gt;
    &lt;!-- main content s--&gt;
    &lt;div id=&quot;contentwrapper&quot;&gt;
        &lt;div class=&quot;main_content&quot;&gt;
            &lt;div class=&quot;row-fluid&quot;&gt;
                &lt;div class=&quot;span6&quot; id=&quot;employeeColumn&quot;&gt;
                    &lt;div class=&quot;control-group&quot;&gt;
                        &lt;label class=&quot;control-label&quot;&gt;Employee Name: &lt;/label&gt;
                        &lt;div class=&quot;controls&quot;&gt;
                            &lt;input type=&quot;text&quot; class=&quot;tags&quot; id=&quot;select2_tags_id&quot; /&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;!--control group --&gt;
                &lt;/div&gt;
                &lt;!-- Employee Column --&gt;
                &lt;button id=&quot;loadDataButton&quot; class=&quot;btn&quot; type=&quot;submit&quot;&gt;&lt;i class=&quot;icon-plus&quot; alt=&quot;OK&quot;&gt;&lt;/i&gt; Load Data &lt;/button&gt;
            &lt;/div&gt;
            &lt;!-- row-fluid --&gt;
        &lt;/div&gt;
        &lt;!-- main_content --&gt;
    &lt;/div&gt;
    &lt;!-- content wrapper --&gt;
&lt;/div&gt;

Java script for Select2 Tags.

$(document).ready(function() {
    $('#select2_tags_id').select2({
        tokenSeparators: [','],
        tags: true,
        maximumSelectionSize: 10,
        minimumResultsForSearch: Infinity,
        multiple: true,
        dropdownCss: {
            display: 'none'
        }
    });

    $('#loadDataButton').on('click', function() {
        $('#select2_tags_id').select2('val', ['Srinivas', 'Robert']);
    });
});

 

Select2 – Ajax – Single Selection (Click Here for working code):

select2_ajax_single_selections

 

Below code is for dynamic search using Ajax and for single selection.

&lt;div id=&quot;maincontainer&quot; class=&quot;clearfix&quot;&gt;
    &lt;!-- main content s--&gt;
    &lt;div id=&quot;contentwrapper&quot;&gt;
        &lt;div class=&quot;main_content&quot;&gt;
            &lt;div class=&quot;row-fluid&quot;&gt;
                &lt;div class=&quot;span6&quot; id=&quot;employeeColumn&quot;&gt;
                    &lt;div class=&quot;control-group&quot;&gt;
                        &lt;label class=&quot;control-label&quot;&gt;Employee Name (String): &lt;/label&gt;
                        &lt;div class=&quot;controls&quot;&gt;
                            &lt;input type=&quot;text&quot; id=&quot;select2_ajax_simple_id&quot; /&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;!--control group --&gt;
                &lt;/div&gt;
                &lt;!-- Employee Column --&gt;
                &lt;button id=&quot;preselectSimpleDataButton&quot; class=&quot;btn&quot; type=&quot;submit&quot;&gt;&lt;i class=&quot;icon-plus&quot; alt=&quot;OK&quot;&gt;&lt;/i&gt; PreSelect Simple Data &lt;/button&gt;
                &lt;label&gt;Selects String - Srinivas Chekuri &lt;/label&gt;
            &lt;/div&gt;
            &lt;!-- row-fluid --&gt;

            &lt;!--Code for Select2 Object --&gt;
            &lt;div class=&quot;row-fluid&quot;&gt;
                &lt;div class=&quot;span6&quot; id=&quot;employeeComplexColumn&quot;&gt;
                    &lt;div class=&quot;control-group&quot;&gt;
                        &lt;label class=&quot;control-label&quot;&gt;Employee Name (Object): &lt;/label&gt;
                        &lt;div class=&quot;controls&quot;&gt;
                            &lt;input type=&quot;text&quot; id=&quot;select2_ajax_complex_id&quot; /&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;!--control group --&gt;
                &lt;/div&gt;
                &lt;!-- Employee Column --&gt;
                &lt;button id=&quot;preselectObjectDataButton&quot; class=&quot;btn&quot; type=&quot;submit&quot;&gt;&lt;i class=&quot;icon-plus&quot; alt=&quot;OK&quot;&gt;&lt;/i&gt; PreSelect Object&lt;/button&gt;
                &lt;label&gt;Selects Object - Srinivas Chekuri With Role &lt;/label&gt;
            &lt;/div&gt;
            &lt;!-- row-fluid --&gt;
        &lt;/div&gt;
        &lt;!-- main_content --&gt;
    &lt;/div&gt;
    &lt;!-- content wrapper --&gt;
&lt;/div&gt;

Java script for Select2 configuration and selection for simple data (String).

 $('#select2_ajax_simple_id').select2({
            minimumInputLength: 1,
            placeholder: &amp;amp;amp;amp;amp;amp;quot;Search Employee&amp;amp;amp;amp;amp;amp;quot;,
            //data:o,
            id: function(i) {
                return i;
            },
            initSelection: function(element, callback) {

            },
            ajax: {
                type: 'post',
                url: &amp;amp;amp;amp;amp;amp;quot;/echo/json/&amp;amp;amp;amp;amp;amp;quot;,
                allowClear: true,
                dataType: 'json',
                delay: 250,
                params: {
                    contentType: &amp;amp;amp;amp;amp;amp;quot;application/json&amp;amp;amp;amp;amp;amp;quot;
                },
                data: function(term, page) {
                    //Code for dummy ajax response
                    return {
                        json: simple_employee_response,
                        delay: 0
                    };
                },
                results: function(data, page) {
                    return {
                        results: data
                    };
                },
                cache: false
            },
            formatResult: function(i) {
                return ' &amp;amp;amp;amp;amp;amp;lt; div &amp;amp;amp;amp;amp;amp;gt; '+i+' &amp;amp;amp;amp;amp;amp;lt; /div&amp;amp;amp;amp;amp;amp;gt;

                '; }, // Formats results in drop down
                formatSelection: function(i) {
                    return ' &amp;amp;amp;amp;amp;amp;lt; div &amp;amp;amp;amp;amp;amp;gt; '+i+' &amp;amp;amp;amp;amp;amp;lt; /div&amp;amp;amp;amp;amp;amp;gt;

                    '; }, //Formats result that is selected
                    dropdownCssClass: &amp;amp;amp;amp;amp;amp;quot;bigdrop&amp;amp;amp;amp;amp;amp;quot;, // apply css that makes the dropdown taller
                        escapeMarkup: function(m) {
                            return m;
                        } // we do not want to escape markup since we are displaying html in results
                });

Java script for Select2 configuration and selection based on Objects.
Note: Html is the same as shown above.

$('#select2_ajax_complex_id').select2({
            minimumInputLength: 1,
            placeholder: &amp;amp;amp;amp;amp;amp;quot;Search Employee&amp;amp;amp;amp;amp;amp;quot;,
            //data:o,
            id: function(i) {
                return i;
            },
            initSelection: function(element, callback) {

            },
            ajax: {
                type: 'post',
                url: &amp;amp;amp;amp;amp;amp;quot;/echo/json/&amp;amp;amp;amp;amp;amp;quot;,
                allowClear: true,
                dataType: 'json',
                delay: 250,
                params: {
                    contentType: &amp;amp;amp;amp;amp;amp;quot;application/json&amp;amp;amp;amp;amp;amp;quot;
                },
                data: function(term, page) {
                    //Code for dummy ajax response
                    return {
                        json: complex_employee_response,
                        delay: 0
                    };
                },
                results: function(data, page) {
                    return {
                        results: data
                    };
                },
                cache: false
            },
            formatResult: function(i) {
                return ' &amp;amp;amp;amp;amp;amp;lt; div &amp;amp;amp;amp;amp;amp;gt; '+i.name+' ('+i.role+')
                '+' &amp;amp;amp;amp;amp;amp;lt; /div&amp;amp;amp;amp;amp;amp;gt;

                '; }, // Formats results in drop down
                formatSelection: function(i) {
                    return ' &amp;amp;amp;amp;amp;amp;lt; div &amp;amp;amp;amp;amp;amp;gt; '+i.name+' ('+i.role+')
                    '+' &amp;amp;amp;amp;amp;amp;lt; /div&amp;amp;amp;amp;amp;amp;gt;

                    '; }, //Formats result that is selected
                    dropdownCssClass: &amp;amp;amp;amp;amp;amp;quot;bigdrop&amp;amp;amp;amp;amp;amp;quot;, // apply css that makes the dropdown taller
                        escapeMarkup: function(m) {
                            return m;
                        } // we do not want to escape markup since we are displaying html in results
                })

                $('#preselectSimpleDataButton').on('click', function() {
                // alert('I am here');
                $('#select2_ajax_simple_id').select2('data', 'Srinivas Chekuri');
            });

            $('#preselectObjectDataButton').on('click', function() {
                // alert('I am here');
                var o = new Object;
                o.id = &amp;amp;amp;amp;amp;amp;quot;1&amp;amp;amp;amp;amp;amp;quot;;
                o.name = &amp;amp;amp;amp;amp;amp;quot;Srinivas Chekuri&amp;amp;amp;amp;amp;amp;quot;;
                o.role = &amp;amp;amp;amp;amp;amp;quot;Architect&amp;amp;amp;amp;amp;amp;quot;;
                $('#select2_ajax_complex_id').select2('data', o);
            });

Select2 – Ajax – Single Selection (Click Here for working code):

select2_ajax_multiple_selections

 

Below code is for dynamic search using Ajax and to have multiple selections.

&lt;div id=&quot;maincontainer&quot; class=&quot;clearfix&quot;&gt;
    &lt;!-- main content s--&gt;
    &lt;div id=&quot;contentwrapper&quot;&gt;
        &lt;div class=&quot;main_content&quot;&gt;
            &lt;div class=&quot;row-fluid&quot;&gt;
                &lt;div class=&quot;span6&quot; id=&quot;employeeColumn&quot;&gt;
                    &lt;div class=&quot;control-group&quot;&gt;
                        &lt;label class=&quot;control-label&quot;&gt;Employee Name (String): &lt;/label&gt;
                        &lt;div class=&quot;controls&quot;&gt;
                            &lt;input type=&quot;text&quot; class=&quot;tags&quot; id=&quot;select2_ajax_simple_id&quot; /&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;!--control group --&gt;
                &lt;/div&gt;
                &lt;!-- Employee Column --&gt;
                &lt;button id=&quot;preselectSimpleDataButton&quot; class=&quot;btn&quot; type=&quot;submit&quot;&gt;&lt;i class=&quot;icon-plus&quot; alt=&quot;OK&quot;&gt;&lt;/i&gt; PreSelect Simple Data &lt;/button&gt;
                &lt;label&gt;Selects String - Srinivas Chekuri &lt;/label&gt;
            &lt;/div&gt;
            &lt;!-- row-fluid --&gt;

            &lt;!--Code for Select2 Object --&gt;
            &lt;div class=&quot;row-fluid&quot;&gt;
                &lt;div class=&quot;span6&quot; id=&quot;employeeComplexColumn&quot;&gt;
                    &lt;div class=&quot;control-group&quot;&gt;
                        &lt;label class=&quot;control-label&quot;&gt;Employee Name (Object): &lt;/label&gt;
                        &lt;div class=&quot;controls&quot;&gt;
                            &lt;input type=&quot;text&quot; class=&quot;tags&quot; id=&quot;select2_ajax_complex_id&quot; /&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;!--control group --&gt;
                &lt;/div&gt;
                &lt;!-- Employee Column --&gt;
                &lt;button id=&quot;preselectObjectDataButton&quot; class=&quot;btn&quot; type=&quot;submit&quot;&gt;&lt;i class=&quot;icon-plus&quot; alt=&quot;OK&quot;&gt;&lt;/i&gt; PreSelect Object&lt;/button&gt;
                &lt;label&gt;Selects Object - Srinivas Chekuri With Role &lt;/label&gt;
            &lt;/div&gt;
            &lt;!-- row-fluid --&gt;
        &lt;/div&gt;
        &lt;!-- main_content --&gt;
    &lt;/div&gt;
    &lt;!-- content wrapper --&gt;
&lt;/div&gt;

Java script for Select2 configuration and selection for simple data (Strings) with multiple selections.

 $('#select2_ajax_simple_id').select2({
    tags: true,
    maximumSelectionSize: 10,
    minimumResultsForSearch: Infinity,
    multiple: true,
    minimumInputLength: 1,
    placeholder: &amp;amp;amp;amp;amp;amp;quot;Search Employee&amp;amp;amp;amp;amp;amp;quot;,
    //data:o,
    id: function(i) {
        return i;
    },
    initSelection: function(element, callback) {

    },
    ajax: {
        type: 'post',
        url: &amp;amp;amp;amp;amp;amp;quot;/echo/json/&amp;amp;amp;amp;amp;amp;quot;,
        allowClear: true,
        dataType: 'json',
        delay: 250,
        params: {
            contentType: &amp;amp;amp;amp;amp;amp;quot;application/json&amp;amp;amp;amp;amp;amp;quot;
        },
        data: function(term, page) {
            //Code for dummy ajax response
            return {
                json: simple_employee_response,
                delay: 0
            };
        },
        results: function(data, page) {
            return {
                results: data
            };
        },
        cache: false
    },
    formatResult: function(i) {
        return ' &amp;amp;amp;amp;amp;amp;lt; div &amp;amp;amp;amp;amp;amp;gt; ' + i + ' &amp;amp;amp;amp;amp;amp;lt; /div&amp;amp;amp;amp;amp;amp;gt;

        ';
    }, // Formats results in drop down
    formatSelection: function(i) {
        return ' &amp;amp;amp;amp;amp;amp;lt; div &amp;amp;amp;amp;amp;amp;gt; ' + i + ' &amp;amp;amp;amp;amp;amp;lt; /div&amp;amp;amp;amp;amp;amp;gt;

        ';
    }, //Formats result that is selected
    dropdownCssClass: &amp;amp;amp;amp;amp;amp;quot;bigdrop&amp;amp;amp;amp;amp;amp;quot;, // apply css that makes the dropdown taller
    escapeMarkup: function(m) {
            return m;
        } // we do not want to escape markup since we are displaying html in results
});

$('#preselectSimpleDataButton').on('click', function() {
    $('#select2_ajax_simple_id').select2('data', ['Srinivas Chekuri']);
});

Java script for Select2 configuration and selection based on Objects.
Note: Html is the same as shown above.

 $('#select2_ajax_complex_id').select2({
    tags: true,
    maximumSelectionSize: 10,
    minimumResultsForSearch: Infinity,
    multiple: true,
    minimumInputLength: 1,
    placeholder: &amp;amp;amp;amp;amp;amp;quot;Search Employee&amp;amp;amp;amp;amp;amp;quot;,
    //data:o,
    id: function(i) {
        return i;
    },
    initSelection: function(element, callback) {

    },
    ajax: {
        type: 'post',
        url: &amp;amp;amp;amp;amp;amp;quot;/echo/json/&amp;amp;amp;amp;amp;amp;quot;,
        allowClear: true,
        dataType: 'json',
        delay: 250,
        params: {
            contentType: &amp;amp;amp;amp;amp;amp;quot;application/json&amp;amp;amp;amp;amp;amp;quot;
        },
        data: function(term, page) {
            //Code for dummy ajax response
            return {
                json: complex_employee_response,
                delay: 0
            };
        },
        results: function(data, page) {
            return {
                results: data
            };
        },
        cache: false
    },
    formatResult: function(i) {
        return ' &amp;amp;amp;amp;amp;amp;lt; div &amp;amp;amp;amp;amp;amp;gt; ' + i.name + ' (' + i.role + ')
        ' + ' &amp;amp;amp;amp;amp;amp;lt; /div&amp;amp;amp;amp;amp;amp;gt;

        ';
    }, // Formats results in drop down
    formatSelection: function(i) {
        return ' &amp;amp;amp;amp;amp;amp;lt; div &amp;amp;amp;amp;amp;amp;gt; ' + i.name + ' (' + i.role + ')
        ' + ' &amp;amp;amp;amp;amp;amp;lt; /div&amp;amp;amp;amp;amp;amp;gt;

        ';
    }, //Formats result that is selected
    dropdownCssClass: &amp;amp;amp;amp;amp;amp;quot;bigdrop&amp;amp;amp;amp;amp;amp;quot;, // apply css that makes the dropdown taller
    escapeMarkup: function(m) {
            return m;
        } // we do not want to escape markup since we are displaying html in results
})

$('#preselectObjectDataButton').on('click', function() {
    var _array = []
    var o = new Object;
    o.id = &amp;amp;amp;amp;amp;amp;quot;1&amp;amp;amp;amp;amp;amp;quot;;
    o.name = &amp;amp;amp;amp;amp;amp;quot;Srinivas Chekuri&amp;amp;amp;amp;amp;amp;quot;;
    o.role = &amp;amp;amp;amp;amp;amp;quot;Architect&amp;amp;amp;amp;amp;amp;quot;;
    _array.push(o);
    $('#select2_ajax_complex_id').select2('data', _array);
});