Sunday, July 5, 2015

Creation of Dynamic HTML using Javascript

I am going to concentrate on creation of dynamic HTML based on javascript in this post. Here I took a simple input tag and submit button in a form and the objective here is like, let's say when a user enters a number in input text box and clicks submit button, I am going to replace the whole page with a select tag that contains the number of drop down elements as the number entered in the input text box.

Try it for yourself, enter a number in the text field and click the submit button with name "Click".



Here is the code that I used:
 <html>  
 <head>  
 <script>  
 function function1() {  
      var a = parseInt(document.getElementById("id1").value);  
      var b = "<select>";  
      for(var c = 0;c<a;c++) {  
           b=b+"<option value=element"+c+">Element "+(parseInt(c)+1)+"</option>";  
      }  
      b=b+"</select>";  
      document.getElementById("id2").innerHTML=b;  
      return false;  
 }  
 </script>  
 </head>  
 <body>  
 <form>  
 <label id="id2"><input id="id1" type="text" />  
 <input onclick="return function1();" type="submit" value="Click" />  
 <label>  
 </label></label></form>  
 </body>  
 </html>  

Sunday, August 3, 2014

Program for creation of XML document using DOM4J

DOM4J is an open-source java library for programming XML in java. 

I used Eclipse as the IDE and Java SE 7 Update 25 for developing the program. 

One have to download the DOM4J jars to start with. It can be downloaded from here DOM4J archive Download link

Once downloaded Unrar the rar file and consolidate all the jars from the folders and browse them into the build path of the Eclipse that you're using. Click ALT+ENTER on the project and properties window will open up, navigate to the Java Build Path section, in the Libraries tab click the button Add external jars and browse all the consolidated jars.


 The Eclipse project can be a simple java project.

DOM4J Program:
You can use this program to create the xml document using DOM4J. 

 package com.dom4j.xml;  
 import java.io.BufferedWriter;  
 import java.io.File;  
 import java.io.FileNotFoundException;  
 import java.io.FileWriter;  
 import java.io.IOException;  
 import java.io.StringReader;  
 import java.io.StringWriter;  
 import javax.xml.transform.OutputKeys;  
 import javax.xml.transform.Source;  
 import javax.xml.transform.Transformer;  
 import javax.xml.transform.TransformerConfigurationException;  
 import javax.xml.transform.TransformerException;  
 import javax.xml.transform.TransformerFactory;  
 import javax.xml.transform.stream.StreamResult;  
 import javax.xml.transform.stream.StreamSource;  
 import org.dom4j.Document;  
 import org.dom4j.DocumentHelper;  
 import org.dom4j.Element;  
 public class XMLCreation {  
      /**  
       * This method creates XML document upon calling.  
       */  
      private void createXML() {  
           Document document = DocumentHelper.createDocument();  
           Element root = document.addElement("Root");  
           Element child1 = root.addElement("Child1")  
                     .addAttribute("attr1", "attr1val")  
                     .addAttribute("loopNode", "no");  
           Element child2 = child1.addElement("Child2").addAttribute("loopNode",  
                     "no");  
           {  
                for (int i = 0; i < 3; i++) {  
                     Element loopNode = child2.addElement("Loop" + i);  
                     loopNode.addAttribute("loopNode", "yes");  
                     loopNode.addText("Loop Child " + i);  
                }  
           }  
           Source source = new StreamSource(new StringReader(document.asXML()));  
           StringWriter stringWriter = new StringWriter();  
           StreamResult streamResult = new StreamResult(stringWriter);  
           File file = null;  
           BufferedWriter bufferedWriter = null;  
           try {  
                file = new File("C:/DemoXMLFile1.xml");  
                file.createNewFile();  
                TransformerFactory transformerFactory = TransformerFactory  
                          .newInstance();  
                Transformer transformer = transformerFactory.newTransformer();  
                transformer.setOutputProperty(OutputKeys.INDENT, "yes");  
                transformer.setOutputProperty(  
                          "{http://xml.apache.org/xslt}indent-amount", "9");  
                transformer.transform(source, streamResult);  
                bufferedWriter = new BufferedWriter(new FileWriter(  
                          file.getAbsoluteFile()));  
                bufferedWriter.write(streamResult.getWriter().toString());  
                bufferedWriter.flush();  
                bufferedWriter.close();  
           } catch (FileNotFoundException f) {  
                f.printStackTrace();  
           } catch (TransformerConfigurationException t) {  
                t.printStackTrace();  
           } catch (IOException i) {  
                i.printStackTrace();  
           } catch (TransformerException t) {  
                t.printStackTrace();  
           }  
      }  
      /**  
       * Main method  
       *   
       * @param args  
       */  
      public static void main(String args[]) {  
           new XMLCreation().createXML();  
      }  
 }  

1. The process is pretty straight forward. I used Document interface and created an instance to it. 
2. I used this instance to create a root element using Element interface. I added attributes to the node. 
3. Further I created another Element instance and added node as child to the above root element and attributes.
4. I created a loop and every time loop iterates it creates child node to the sub child node and adds text to the loop node. 
5. I made use of TransformerFactory and Transformer to format the xml document. 
6. The normal BufferedWriter to write the xml to the document. 
7. The interface Source stores the document xml details in StringReader, the StringReader creates characterstream. 
8. I created an object to StringWriter class and passed the instance to the StreamResult interface. 
9. The StringWriter converts character stream to the buffered stream. 
10. To the transformer we have included output properties to provide indent to the xml file using setOutputProperty.

One can also use the Scanner class to provide file paths and file names as dynamic parameters.

The output file I got with Indent 9:



Suggestions are welcome. Please feel free to comment.

Saturday, July 5, 2014

Creating a simple java servlet

For creating a simple servlet, all we need is a HTML/JSP file and a java class.

Below is the Eclipse project structure for the Dynamic Web Project I created:

Below is the web.xml config I used:
I used two child elements in xml under web-app namely:
1. servlet
2. servlet-mapping

The element servlet contains two child elements further namely:
1. servlet-name - to specify the name of the servlet (name can be anything)
2. servlet-class - to specify the name of java class including package name.

The element servlet-mapping contains two child elements further namely:
1. servlet-name: to specify name of the servlet (the name should be same as one specified in the child element servlet-name of element servlet).
2. url-pattern: to specify the url-pattern of the servlet.

 <?xml version="1.0" encoding="UTF-8"?>  
 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">  
  <servlet>  
  <servlet-name>Servlet1</servlet-name>  
  <servlet-class>com.servlets.ServletClass1</servlet-class>  
  </servlet>  
  <servlet-mapping>  
  <servlet-name>Servlet1</servlet-name>  
  <url-pattern>/Servlet1</url-pattern>  
  </servlet-mapping>  
 </web-app>  

Sample JSP 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>Insert title here</title>  
 </head>  
 <h1 align="center">Enter your details down below:</h1>  
 <body bgcolor="yellow">  
 <form method="post" action="ServletClass1">  
 <center>  
 <table border="1" bordercolor="red" bgcolor="lime" cellspacing="20" style="font-size: 20px;font-family:inherit;" cellpadding="3">  
 <tr bgcolor="yellow">  
 <td>Name: <input type="text" name="name"><br/></td>  
 </tr>  
 <tr bgcolor="yellow"><td>  
 Profession: <br/>  
 Developer: <input type="radio" name="Developer"/><br/>  
 Architect: <input type="radio" name="Architect"/><br/>  
 </td>  
 </tr>  
 <tr bgcolor="yellow">  
 <td>  
 Skills:<br/>  
 <select name="skills">  
 <option value="J2EE" label="J2EE"></option>  
 <option value="J2SE" label="J2SE"></option>  
 <option value="J2ME" label="J2ME"></option>  
 </select></td></tr>  
 </table>  
 <input type="submit" value="Submit" style="font-size:20px;font-family:inherit;"/>  
 </center>  
 </form>  
 </body>  
 </html>  

You can use above code either in a JSP file or HTML file. I created three types of fields - text, radio buttons, drop down fields.
In the html elements I used form fields and have given the servlet name in action tag and POST method in method tag which means when the servlet is called it invokes POST method.

I am trying to retrieve the values that comes out when certain fields are containing values or selected from a servlet.

Servlet:
 A servlet is a simple java file that communicates with the server. A java file that extends HttpServlet class is said to be a servlet.

Below is the  sample java code that I have used:
 package com.servlets;  
 import java.io.IOException;  
 import java.io.PrintWriter;  
 import javax.servlet.ServletException;  
 import javax.servlet.annotation.WebServlet;  
 import javax.servlet.http.HttpServlet;  
 import javax.servlet.http.HttpServletRequest;  
 import javax.servlet.http.HttpServletResponse;  
 /**  
  * Servlet implementation class ServletClass1  
  */  
 @WebServlet("/ServletClass1")  
 public class ServletClass1 extends HttpServlet {  
      private static final long serialVersionUID = 1L;  
      /**  
       * @see HttpServlet#HttpServlet()  
       */  
      public ServletClass1() {  
           super();  
      }  
      /**  
       * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse  
       *   response)  
       */  
      protected void doGet(HttpServletRequest request,  
                HttpServletResponse response) throws ServletException, IOException {  
      }  
      /**  
       * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse  
       *   response)  
       */  
      protected void doPost(HttpServletRequest request,  
                HttpServletResponse response) throws ServletException, IOException {  
           PrintWriter out = response.getWriter();  
           out.println("<p style='font-size:20px'> Name: "  
                     + request.getParameter("name") + "</p><br/>");  
           out.println("<p style='font-size:20px'> Developer: "  
                     + request.getParameter("Developer") + "</p><br/>");  
           out.println("<p style='font-size:20px'> Architect: "  
                     + request.getParameter("Architect") + "</p><br/>");  
           out.println("<p style='font-size:20px'> Skills: "  
                     + request.getParameter("skills") + "</ps>");  
      }  
 }  

In the above code, I have used PrintWriter to enable logging into response file that will be returned by the server. If you use System.out.println (SOP), we get outputs in log files of the server. I used tomcat server version 7. Once I ran the JSP/HTML file on the server, I got the form as below:



I filled the above from as below:
 
 and I clicked the submit button and the server returns the below response: 
Since I didn't select Architect radio button it is coming as null and the rest are as selected.

Any suggestions are welcome. Please feel free to comment.

Comments

blog comments powered by Disqus