\r\n<% if (condition) { %>\r\n This is only shown if the condition is true<\/p>\r\n<% } %>\r\n<\/pre>\n
In the scriptlet elements, you can do more. For example, you can connect to a database, read a file, and get the data. Then you can handle this data, make some calculations and decide to show some certain HTML elements or how to show them. In this way, web pages gain high flexibility.<\/p>\n
1. Overview<\/h2>\n
In the example, we create a ‘Pizza Order’ form in a JSP page with the help of scriptlets. This form takes action to forward to the other JSP page that displays the order details. Our preferred IDE is Eclipse. We use \u2018Maven\u2019 for the dependency management. We create a dynamic web application and deploy it into the Tomcat server. In one of my previous examples, I have explained how to create a Maven dynamic web application in the Eclipse, how to define a \u201cTomcat\u201d server and add the application to it. You can examine: Logback Mapped Diagnostic Contexts (MDC) Example<\/a><\/p>\n2. JSP Code<\/h2>\n
You see the form in the Browser. The user can pick the pizza type and its size with single-selection radio buttons. If she would like to, she can add some extra toppings to the pizza using multiple-choice checkboxes. Also, the user is informed about the prices.<\/p>\n
![\"Pizza](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2015\/07\/jspScriptletExample1.jpg\")
<\/a>Pizza Order Form<\/figcaption><\/figure><\/p>\nAt the top of the JSP page, we add some scriptlet codes that define the data structures which keep the data in the JSP page. We create lists for pizza types and pizza toppings and add some data to them. Alternatively, you can read the data from database or files, then use and manipulate them in your JSP scriptlets. We put the lists in the Session Object after we initially create them. In the following requests, we get the list instances from the Session Object:<\/p>\n
\r\n<%@ page language=\"java\" contentType=\"text\/html; charset=ISO-8859-1\" pageEncoding=\"ISO-8859-1\"%>\r\n<%@ page import=\"com.javacodegeeks.examples.jspscriptletexample.Pizza\" %>\r\n<%@ page import=\"java.util.*\"%>\r\n\r\n<% \r\n\tObject sessionObj = request.getSession().getAttribute( \"pizzaTypeList\" );\r\n\r\n\tList pizzaTypes = null;\r\n\t\r\n\tif ( sessionObj == null ) {\r\n\t\t\r\n\t\tpizzaTypes = new ArrayList();\r\n\t\t\r\n\t\tpizzaTypes.add( new Pizza( \"Kebab\", 15.23f ) );\r\n\t\tpizzaTypes.add( new Pizza( \"Vegetarian\", 11.48f ) );\r\n\t\tpizzaTypes.add( new Pizza( \"Meat Feast\", 14.05f ) );\r\n\t\tpizzaTypes.add( new Pizza( \"Sea Food\", 17.82f ) );\r\n\t\t\r\n\t\trequest.getSession().setAttribute( \"pizzaTypeList\", pizzaTypes );\r\n\t\t\r\n\t} else {\t\t\r\n\t\tpizzaTypes = ( List ) sessionObj;\r\n\t}\r\n\t\r\n\tsessionObj = request.getSession().getAttribute( \"pizzaToppingsList\" );\r\n\t\r\n\tList pizzaToppings = null;\r\n\t\r\n\tif ( sessionObj == null ) {\r\n\t\t\r\n\t\tpizzaToppings = new ArrayList();\r\n\t\t\r\n\t\tpizzaToppings.add( \"Tomatoes\" );\r\n\t\tpizzaToppings.add( \"Green Onion\" );\r\n\t\tpizzaToppings.add( \"Broccoli\" );\r\n\t\tpizzaToppings.add( \"Green Peppers\" );\r\n\t\tpizzaToppings.add( \"Red Peppers\" );\r\n\t\tpizzaToppings.add( \"Mushroom\" );\r\n\t\tpizzaToppings.add( \"Ham\" );\r\n\t\tpizzaToppings.add( \"Chicken\" );\r\n\t\tpizzaToppings.add( \"Beef\" );\r\n\t\tpizzaToppings.add( \"Pepperoni\" );\r\n\t\tpizzaToppings.add( \"Salami\" );\r\n\t\tpizzaToppings.add( \"Parmesan Cheese\" );\r\n\t\tpizzaToppings.add( \"Mozzarella\" );\r\n\t\tpizzaToppings.add( \"Cheese\" );\r\n\t\t\r\n\t\trequest.getSession().setAttribute( \"pizzaToppingsList\", pizzaToppings );\r\n\t\t\r\n\t} else {\r\n\t\tpizzaToppings = ( List ) sessionObj;\r\n\t}\r\n ...\r\n<\/pre>\nPizza<\/b> is the model bean class that keeps the pizza attributes: <\/div> <\/div><\/p>\nPizza.java<\/em><\/span><\/p>\n\r\npublic class Pizza implements Serializable {\r\n\r\n\tprivate static final long\tserialVersionUID\t= -8549196728165055605L;\r\n\r\n\tprivate final String\t\tname;\r\n\r\n\tprivate final float\t\t\tprice;\r\n\r\n\tpublic Pizza( final String name, final float price ) {\r\n\t\tthis.name = name;\r\n\t\tthis.price = price;\r\n\t}\r\n\r\n\tpublic String getName() {\r\n\t\treturn name;\r\n\t}\r\n\r\n\tpublic float getPrice() {\r\n\t\treturn price;\r\n\t}\r\n}\r\n<\/pre>\nThe form section of the JSP page is shown below. In the lines of 09-15, the list items are produced in a for loop traversed in the pizza type list. With JSP scriptlet, you do not have to write all of the list items statically. If you retrieve the data to be shown, you can manipulate it in order to create and display HTML tags in a JSP page. Between the lines 30 – 56, you see the pizza extra toppings section in which the topping items are displayed with 3 columns grid form. In each column, there is a separate HTML list. At the top of the form, the size of each HTML list is calculated with division of the toppings list length by 3 and the result is stored in the sliceSize<\/b> variable. We also keep the remainder of this division calculation in order to use below. <\/p>\n
In this extra toppings section, we use two nested for loops: The outer one is for each column, the inner one is for the list items in its column. We divide the extra toppings List by there. The first part of the list is shown in the first column, the second part in the second column and the last part in the last column. If there is any remainder items after the division, we append them to the first and second lists. We design the allotment of the extra toppings items to the 3 column grid with this logic. Of course, different algorithms can be planned. <\/p>\n
\r\n...\r\n<%\r\n int sliceSize = pizzaToppings.size() \/ 3;\r\n int remainder = pizzaToppings.size() % 3;\r\n%>\r\n<form action=\"orderResult.jsp\" method=\"POST\">\r\n\t<h3>Pizza Types<\/h3>\r\n\t<div>\r\n\t\t<ul>\r\n\t\t\t<% for ( Pizza pizza : pizzaTypes ) { %>\r\n\t\t\t<li>\r\n\t\t\t\t<input type=\"radio\" name=\"pizzaTypeOptions\" value=\"<%=pizza.getName()%>\" checked \/>\r\n\t\t\t\t<span class=\"pizzaType\"><%=pizza.getName()%><\/span>\r\n\t\t\t\t<span class=\"pizzaPrice\"><%=pizza.getPrice()%>$<\/span>\r\n\t\t\t<\/li>\r\n\t\t\t<% } %>\r\n\t\t<\/ul>\r\n\t<\/div>\r\n\t<h3>Size<\/h3>\r\n\t<ul>\r\n\t\t<li id=\"li_1\">\r\n\t\t\t<input id=\"pizza_size1\" type=\"radio\" name=\"pizzaSizeOptions\" value=\"Small\" checked\/>\r\n\t\t\t<span class=\"pizzaSize\">Small<\/span>\r\n\t\t\t<input id=\"pizza_size2\" type=\"radio\" name=\"pizzaSizeOptions\" value=\"Medium\"\/>\r\n\t\t\t<span class=\"pizzaSize\">Medium ( + 2$ )<\/span>\r\n\t\t\t<input id=\"pizza_size3\" type=\"radio\" name=\"pizzaSizeOptions\" value=\"Large\"\/>\r\n\t\t\t<span class=\"pizzaSize\">Large ( + 3$ )<\/span>\r\n\t\t<\/li>\r\n\t<\/ul>\r\n\t<h3>Extra Toppings<\/h3>\r\n\t<div class=\"section group\">\r\n\t\t<% for ( int j = 0; j < 3; j++ ) { %>\r\n\t\t<div class=\"col span_1_of_3\">\r\n\t\t\t<ul class=\"ul_2\">\r\n\t\t\t\t<% for ( int i = sliceSize * j; i < ( j + 1 ) * sliceSize; i++ ) { %>\r\n\t\t\t\t<li class=\"li_2\">\t\t\t\t\t\t\r\n\t\t\t\t\t<input type=\"checkbox\" name=\"pizzaToppings\" value=\"<%=pizzaToppings.get( i )%>\"\/>\r\n\t\t\t\t\t<%=pizzaToppings.get( i )%>\r\n\t\t\t\t<\/li>\r\n\t\t\t\t<% } \r\n\t\t\t\t\t\r\n\t\t\t\tif ( j == 0 && remainder > 0 ) {\r\n\t\t\t\t%>\t\r\n\t\t\t\t<li class=\"li_2\">\t\t\t\t\t\t\r\n\t\t\t\t\t<input type=\"checkbox\" name=\"pizzaToppings\" value=\"<%=pizzaToppings.get( pizzaToppings.size() - 2 )%>\"\/>\r\n\t\t\t\t\t<%=pizzaToppings.get( pizzaToppings.size() - 2 )%>\r\n\t\t\t\t<\/li>\t\t\t\t\t\t\r\n\t\t\t\t<% } else if ( j == 1 && remainder > 1 ) { %>\r\n\t\t\t\t<li class=\"li_2\">\t\t\t\t\t\t\r\n\t\t\t\t\t<input type=\"checkbox\" name=\"pizzaToppings\" value=\"<%=pizzaToppings.get( pizzaToppings.size() - 1 )%>\"\/>\r\n\t\t\t\t\t<%=pizzaToppings.get( pizzaToppings.size() - 1 )%>\r\n\t\t\t\t<\/li>\t\t\t\t\t\t\r\n\t\t\t\t<% } %>\r\n\t\t\t<\/ul>\r\n\t\t<\/div>\r\n\t\t<% } %>\r\n\t<\/div>\t\r\n\t<h4>Each extra topping is 0.65$<\/h4>\t\r\n\t<input type=\"submit\" value=\"Order\"\/>\t\t\t\t\r\n<\/form>\r\n...\r\n<\/pre>\nPlease notice that this form is submitted to the other JSP page: orderResult.jsp<\/code>. <\/p>\n\r\n <form action=\"orderResult.jsp\" method=\"POST\">\r\n<\/pre>\nIn this page, we summarize the items the user preferred in the previous form. Also we calculate the total amount and display the result:<\/p>\n
![\"Order](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2015\/07\/jspScriptletExample2.jpg\")
<\/a>Order Result Page<\/figcaption><\/figure><\/p>\norderResult.jsp<\/em><\/span><\/p>\n\r\n<%@ page language=\"java\" contentType=\"text\/html; charset=ISO-8859-1\" pageEncoding=\"ISO-8859-1\"%>\r\n<%@ page import=\"com.javacodegeeks.examples.jspscriptletexample.Pizza\" %>\r\n<%@ page import=\"java.util.*\"%>\r\n\r\n<%! \r\n\tpublic String prepareOutput( final String[] toppings, final String pizzaSize, \r\n\t\tfinal String pizzaType ) {\r\n\t\t\r\n\t\tString output = pizzaSize + \" '\" + pizzaType + \r\n\t\t\t\"' pizza with these extra toppings : \";\r\n\t\t\r\n\t\tfor ( int i = 0; i < toppings.length; i++ ) {\r\n\t\t\toutput += toppings[ i ];\r\n\t\t\t\r\n\t\t\tif ( i != toppings.length - 1 ) {\r\n\t\t\t\toutput += \", \";\r\n\t\t\t}\r\n\t\t} \r\n\t\t\r\n\t\treturn output;\r\n\t}\t \r\n%>\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<meta charset=\"UTF-8\">\r\n\t<title>Jsp Scriptlet Example<\/title>\r\n\t<link rel=\"stylesheet\" href=\".\/static\/css\/pizzaorder.css\">\r\n<\/head>\r\n<body>\r\n\t<h3>Order Details<\/h3>\r\n\t<p><%=prepareOutput( request.getParameterValues( \"pizzaToppings\" ), request.getParameter( \"pizzaSizeOptions\" ), \r\n\t\trequest.getParameter( \"pizzaTypeOptions\" ) )%><\/p>\r\n\t<p>TOTAL:\r\n\t<% \r\n\t\tList<Pizza> pizzaTypes = ( List<Pizza> ) request.getSession().getAttribute( \"pizzaTypeList\" );\r\n\t\t\r\n\t\tfloat price = 0f;\r\n\t\t\r\n\t\tfor ( Pizza pizza : pizzaTypes ) {\r\n\t\t\tif ( pizza.getName().equals( request.getParameter( \"pizzaTypeOptions\" ) ) ) {\r\n\t\t\t\tprice = pizza.getPrice();\r\n\t\t\t\tbreak;\r\n\t\t\t}\r\n\t\t}\r\n\t\t\t\r\n\t\tString size = request.getParameter( \"pizzaSizeOptions\" );\r\n\t\t\r\n\t\tprice += size.equals( \"Medium\" ) ? 2f : ( size.equals( \"Large\" ) ? 3f : 0f );\r\n\t\t\r\n\t\tprice += request.getParameterValues( \"pizzaToppings\" ).length * 0.65f;\r\n\t\t\r\n\t\tout.print( price );\r\n\t%>\r\n\t$ \r\n\t<\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nWe build the summary string in a method ( prepareOutput ) that we create it in the JSP declaration tag ( <%! %>) at the top of the JSP page. Then we invoke this method in line 32 with the request parameters that posted in the previous form. As you see, we can declare any method and invoke them in the JSP scriptlets.<\/p>\n
In the next scriptlet, we calculate the total price amount. First we get the pizza type that the user select from the related request parameter. We get its price in its bean class stored in the Session. We add 2 or 3 dollars if the user prefers medium or large size, respectively. Finally, we count the extra toppings selected, multiply it by the fixed item price ( 0.65 ) and add the result to the sum. Then we output the total. Please notice that we locate the scriptlet immediately before the dollar sign ( $ ). It can be at the beginning of the JSP and we can store the result in a variable. But we prefer to locate it in the place that is displayed. You are free in the location decision of the scriptlets. But you should also take into account the code readability. <\/p>\n
3. JSP Scriptlet Debugging<\/h2>\n
In the modern IDEs like Eclipse, you are able to debug the JSP scriptlet code. After starting the application server ( Tomcat, Weblogic, … ) in debug mode, you can toggle any breakpoint, watch the variables in the scriptlet code. You see the debugging session in the orderSession.jsp<\/code> with the Eclipse.<\/p>\n
![\"Debugging](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2015\/07\/jspScriptletExample3.jpg\")
<\/a>![\"Debugging](\"http:\/\/examples.javacodegeeks.com\/wp-content\/uploads\/2015\/07\/jspScriptletExample4.jpg\")
<\/a>