J2EE Tutorials: JSP API

Showing posts with label JSP API. Show all posts

Saturday, 26 October 2013

Insert Pi chart In JSP Page

Use Google Pi Chart API

Step 1

Add lib
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

Step 2

google.load('visualization', '1.0', {'packages':['corechart']});

google.setOnLoadCallback(drawChart);

Step 3

Write Script Function

function pichart(admin_pending,late,regular,admin_verify)

/* function pichart() */

{

// Create the data table.

var data = new google.visualization.DataTable();

data.addColumn('string', 'Topping');

data.addColumn('number', 'Slices');

data.addRows([

['Admin Pending', admin_pending],

['Late', late],

['Regular', regular],

['Admin Verify', admin_verify]

]);

// Create the data table.

// Set chart options

var options = {'title':'Analysis Report',

'width':500,

'height':200,

};

// Instantiate and draw our chart, passing in some options.

var chart = new google.visualization.PieChart(document.getElementById('pichart_div'))

chart.draw(data, options);

}

output

Tuesday, 23 April 2013

Google App Engine Simple tutorial

Step 1:

In Eclipse

Help->install new Application->Work With

Google application - http://dl.google.com/eclipse/plugin/3.7

Step 2:

Create Google App Web Project.

Name this Project And select Check box

Finish

Step 3:

Ctreate Simple JSP Page and Place control on it.

for eg Tax.Jsp

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Tax Project</title>
</head>
<body>
<h1>Tax Calculation</h1>
<center>
<form action="taxcalulation" method="get">
Enter Amount <input type="text" id="amount" name="amount"/>
<input type="submit" value="Tax">
</form>
</center>
</body>
</html>

Step 4:

Create Servlet And Mapping to web.xml

Step 5:

Write code on Servlet
for eg.

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
System.out.println("out");
int tax=Integer.parseInt(request.getParameter("amount"));
System.out.println(tax);
int val=0;
if(tax <= 20000)
{
val=0;
}
else
if(tax >= 20000 && tax <= 30000)
{
val=tax/10;
}
else
{
val=tax/30;
}
response.setContentType("text/plain");
response.getWriter().println("Tax Amount="+val);

}

Step 6:

Run the program on (G) Web Application

Console output Lite this

Dev App Server is running.....

Step 7:

Open Browser
And write into address bar
http://Localhost:8888

Show the home page

Click Tax Calculation

Open tax.jsp

Enter Amount And Click Tax button

Show the result

Done......

Friday, 5 April 2013

Add Event in Calender using JSP Page

Step 1:
create jsp and

<div id='calendar'></div>

Step 2:
add js file into the JSP
for eg:

<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.print.css' media='print' />
<script type='text/javascript' src='extensions/jquery-1.3.2.min.js'></script>

Step 3:
Add .css in JSP

<style type='text/css'>

body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}

#loading {
position: absolute;
top: 5px;
right: 5px;
}

#calendar {
width: 900px;
margin: 0 auto;
}

</style>

Step 4:
write code on script

<script type='text/javascript'>

$(document).ready(function() {

var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {

calendar.fullCalendar('unselect');
},
editable: true,

});

Step 5:

Create servlet to getting event on table
or u direct Post the event on calender
i am useint table for event

write code on AJAX

$.ajax({ type: "Post", url: "Calender_Event",
data:{name:$("#Uname").val()},
cache:false,
success : function(data){

var objArray=JSON.parse(data);
$.each(objArray, function(index,jsonObject){

var subject = jsonObject.Description; //the title of the event
var dateStart = jsonObject.complDate; // the day the event takes place
var events=new Array();
event = new Object();
event.title = subject;
event.start = dateStart; // its a date string
//event.end = dateEnd; // its a date string.
event.color = jsonObject.color;
event.allDay = false;
event.url="Calender_Add_Report.jsp";
events.push(event);
$('#calendar').fullCalendar('addEventSource',events);

});

var altField = $( ".selector" ).datepicker( "option", "altField" );
alert(altField);
}
});

Step 6:
Out Put

J2EE Tutorials