[Introduction to JSP + Servlet] A little animation ♬

This time, I tried to realize "I want to animate with JSP + Servlet". As it is, python is easier while running locally, and the conclusion is that you can go with js in the first place, but I played a lot so I will record it. The reference this time is as follows. 【reference】 ①js_arrays@JS [email protected]element.style.position --Display position setting @JavaScriptist@JS that switches images in a certain period of time Ready-to-use sample collectionDisplay image file in JSP

What i did

・ Display the specified image ·animation

・ Display the specified image

Last time, I was able to display the image already, so this time I made it possible to paste the image specified by screen input. For the time being, I refer to Reference ④. If you enter 12.png in the text area of the input and press the send button, The following is output. simple_pic.jpg

[Reference] If you get a server port used error, see below. Double-click on the local post Tomcat8 (Java8) and change the port number appropriately (increase by 10) ⑤ What to do if Tomcat cannot be started because "port is in use"

·code

The JSP is as follows

.jsp


<body>
	<br/>
        <p>From Servlet"foo"Display the corresponding string with</p>
	<%= request.getAttribute("foo") %><br/>
        <p>To Servlet"name"Send string</p>
	<form method="post" action="./helloPicture">
Enter something: <input type="text" name="name">
        <button type="submit">Send</button>
    </form>
    <br/>
    <p>From Servlet"userName"Get and display a string</p>
    <%= request.getAttribute("userName") %>
    <br/>
    <p>From Servlet"useName"Get the character string and display the corresponding image</p>
    <img src="${pageContext.request.contextPath}/media/<%= request.getAttribute("userName") %>" width="400px" height ="400" name="<%= request.getAttribute("userName") %>">
	<br/>
</body>

Servlet is as follows

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	    //Pass an appropriate string to JSP
		request.setAttribute("foo", "1.png,2.png,...15.png ");
	    //If there is no userName"1.png "To userName
	    String name = (String) request.getAttribute("userName");
		if (name == null || "".equals(name)) {
	        request.setAttribute("userName", "1.png ");
	    }
	    String view = "/WEB-INF/view/index_simple.jsp";
	    RequestDispatcher dispatcher = request.getRequestDispatcher(view);
	    //Dispatch userName to JSP
	    dispatcher.forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	    //Character code specification
	    request.setCharacterEncoding("utf-8");
	    String name = request.getParameter("name");
	    //Pass the contents of userName to name
	    request.setAttribute("userName", name);
   	    //Output name string to console
        System.out.println(name);
        doGet(request, response);
	}

By the way, the arrangement of each element is as follows simple_pic_config.jpg

·animation

First of all, the display of Gif animation is the same as a normal image, so if you put face_smile11.gif in the above text area and press it, the following will be displayed at the position of the above image. face_smile11.gif And full-scale? Animation If the picture does not move, it is exactly the same as above, so it is omitted ... Like this, the larger one at the bottom moves. simple_pic2.jpg

code

There is no change in Servlet. In other words, apart from the above story, it works in JSP without any interaction with Servlet.

.jsp


<body>
...
  	<img src="mayuyu.gif" width="400px" height ="400px" name="mayuyu">
	<div id="comment"></div>
</body>
<script type="text/javascript">
img_ = new Array("1.png ","2.png ","3.png ","4.png ","5.png ","6.png ","7.png ",...); //*1
com_ = new Array("1.png ","2.png ","3.png ","4.png ","5.png ","6.png ","7.png ",...); //*2
count_ = -1; //*2
mayuyuTimer();
function mayuyuTimer() {
	//Image number
	count_++; //*3
	//Check the number of images
	if (count_ == img_.length) count_ = 0; //*4
	//Image output
	document.mayuyu.src = "${pageContext.request.contextPath}/media/"+img_[count_]; //*5
	//Comment output
	document.getElementById("comment").innerHTML = com_[count_]; //*3
	//Next timer call
	setTimeout("mayuyuTimer()",500); //*6
}
</script>

Also, I'm tired of writing img_ = new Array (...) in the middle, so I found that I can do it with the following code.

.js


<script>
var fruits, text, fLen, i;
fruits = ["1.png ","2.png "];
fLen = fruits.length;
    
function myFunction() {
  fLen = 26; //fruits.length;
  for (i = 3; i < fLen; i++) {
      fruits.push( i + ".png ");
  }
  for (i = 1; i < fLen; i++) {
      fruits.push( fLen - i + ".png ");
  }
  return fruits;
}
</script>
<script type="text/javascript">
img_ = myFunction();
...

that? This code looks longer. However, repeating the same action is mentally tiring, so writing it in code and moving it is exceptional.

Summary

・ Display the designated image ・ Try animation -Set an array of animation using Javascript

・ I will try something with a little more movement

Recommended Posts

[Introduction to JSP + Servlet] A little animation ♬
[Introduction to JSP + Servlet] I played with it for a while ♬
How to use scope (JSP & Servlet)
[Introduction to Java] How to write a Java program
A little effort to eliminate complicated if-else
Introduction to Ruby 2
Introduction to Recursive Functions: What is a Recursive Function?
Introduction to SWING
Introduction to web3j
Introduction to Micronaut 1 ~ Introduction ~
[Java] Introduction to Java
Introduction to java
Introduction to Doma
Create a Java Servlet and JSP WAR file to deploy to Apache Tomcat 9 in Gradle
Memo to build a Servlet environment on AWS EC2
A brief introduction to terasoluna5, see the text below
I tried to decorate the simple calendar a little
Add a subview to your animation layer using lottie-ios
I want to use a little icon in Rails
[Introduction to Spring Boot] Submit a form using thymeleaf
How to download a file (Servlet, HTML, Apache, Tomcat)
Introduction to Programming for College Students: Making a Canvas
[Introduction to Android application development] Let's make a counter
Introduction to JAR files
Introduction to Ratpack (8)-Session
Introduction to RSpec 1. Test, RSpec
Introduction to bit operation
Introduction to Ratpack (6) --Promise
About [servlet] [JSP] [tomcat]
Introduction to PlayFramework 2.7 ① Overview
Introduction to Android Layout
Introduction to Practical Programming
Introduction to javadoc command
Introduction to jar command
Introduction to lambda expression
Introduction to java command
Introduction to RSpec 2. RSpec setup
What is a Servlet?
Introduction to Keycloak development
Introduction to javac command
How to deploy a simple Java Servlet app on Heroku
[JSP, Servlet] Launch a new project and check the connection !!
Until you create a Web application with Servlet / JSP (Part 1)
Reasons to use Servlet and JSP separately in Java development
A Simple CRUD Sample Using Java Servlet / JSP and MySQL
Introduction to Programming for College Students: Draw a Straight Line