Oct 27, 2009

Intro to Struts (1.x) - Practical Example

This would be simple and easy tutorial on how to use Apache Struts in Java web projects.

What do you need for this tutorial?
  • Java
  • Tomcat
  • Java IDE (For example Eclipse or NetBeans)
  • Struts 1.x version http://struts.apache.org/download.cgi#struts1310

I’ll write another document for Struts 2.x. They are different frameworks with somehow different ideas but both are excellent choice.

For clearness it would be very simple code - I won’t use packages or other good practices. Consider this only as an introduction not a reference.

Struts programming is centered at the MVC pattern. MVC stands for Model-View-Controller, an idea to separate the business logic, application data and the presentation layer. I won’t discuss here what the advantages of using MVC architecture in web application are – just make a fast search, there is plenty of information out there.

Let’s start with creating a new project. Our web application would ask visitors for a name and redirect them to a Hi! page. At part 2 it won’t like some of the visitors and will return back them with an error message.

Here is my directory and file structure for Struts1Example project:
Struts1Example
 src
  NameAction.java
  NameActionForm.java
 webroot
  WEB-INF
   classes
   lib
   struts-config.xml
   web.xml
  ask.jsp
  greet.jsp

Lets start with writing our ActionForm – I’ll name the class NameActionForm. It would be very plain – only one field and a setter-getter pair. Here is the code:

NameActionForm.java
import javax.servlet.http.HttpServletRequest;

import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionMapping;


public class NameActionForm extends ActionForm {
 private String name = null;

 
 public void reset(ActionMapping mapping, 
    HttpServletRequest request) {

        this.name = null;
 }

 public String getName() {

  return name;
 }

 public void setName(String name) {

  this.name = name;
 }
}

And our action:

NameAction.java
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;

import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;

public class NameAction extends Action {

 public ActionForward execute(ActionMapping mapping, 
    ActionForm form,
    HttpServletRequest request, 
    HttpServletResponse response) {
  return mapping.findForward("success");
 }
}

In Struts the Action class goal is to process a request, do the logic and pass a forward object (ActionForward). Our Action is very simple – it is doing nothing, just passes our forward object. The “success” forward is defined in our struts-config.xml.

We will have two jsp files – ask.jsp and greet.jsp. In ask.jsp we will ask visitors for a name.
ask.jsp
<%@ page language="java" contentType="text/html; 
  charset=utf-8" %>

<%@ taglib uri="http://struts.apache.org/tags-html" 
  prefix="html" %>

<html:html>

<head>
<title>Say Hi!</title>
</head>
<body>
 <html:form action="nameAction">
  What's your name?
  <html:text property="name"></html:text>

  <html:submit>Send!</html:submit>
 </html:form>
</body>
</html:html>

greet.jsp
<%@ page language="java" contentType="text/html; 
  charset=utf-8" %>

<%@ taglib uri="http://struts.apache.org/tags-bean" 
  prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" 

  prefix="html" %>
<html:html>
<head>
<title>Say Hi!</title>
</head>
<body>

Hi, <bean:write name="nameForm" property="name" />
</body>
</html:html>

And now the cool part – web.xml

web.xml
<?xml version="1.0"?>
<web-app>
  <display-name>Struts 1x Example</display-name>

  <servlet>
    <servlet-name>action</servlet-name>
    <servlet-class>
     org.apache.struts.action.ActionServlet
    </servlet-class>
    <init-param>

      <param-name>config</param-name>
      <param-value>
       /WEB-INF/struts-config.xml
      </param-value>
    </init-param>
    <load-on-startup>2</load-on-startup>

 </servlet>
  <servlet-mapping>
    <servlet-name>action</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>

  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

And our struts configuration – struts-config.xml

struts-config.xml
<?xml version="1.0" ?>
<struts-config>

    <form-beans>
     <form-bean 
      name="nameForm" 
      type="NameActionForm"/>

    </form-beans>

    <global-forwards>
        <forward
            name="/nameAction"
            path="/nameAction.do"/>

    </global-forwards>
    
    <action-mappings>         
       <action path="/nameAction" 
         type="NameAction" 

         input="ask.jsp" 
          name="nameForm" >
        <forward name="success" 

          path="/greet.jsp"/>
        <forward name="failure" 
          path="/ask.jsp"/>

       </action>
    </action-mappings>
</struts-config>

struts-config.xml is used to initialize Struts. It describes the action mappings for the project and must be placed in the WEB-INF directory. We have a form-bean tag describing our NameActionForm and an action-mapping for our NameAction.

This is our base code. In some future post I’ll add field validation, error handling and some other good stuff.

Oct 22, 2009

Fun with JQuery Effects – few examples

You can use JQuery Effects in many different ways. I'll write few examples just to show how cool and fun is to work with this API.

Using toggle:

toggle.html
<html>
<head>
<title>JQuery examples</title>
<style>
</style>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$("#our_button").click(function() {
$("#our_image").toggle();
});
});
</script>
</head>
<body>

<button id="our_button">Hide/Show</button> the image.
<br /><br />
<div id="our_image">
<img border="0" src="http://1.bp.blogspot.com/_qfg-tuDgxAc/SuAki9DDU3I/AAAAAAAABJ4/M38IBtd3FJo/s320/flower.jpg" />
</div>
</body>
</html>


And the result:


the image.



Using slide toggle:

slide.html
<html>
<head>
<title>JQuery examples</title>
<style>
</style>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$("#our_button").click(function() {
$("#our_image").slideToggle("slow");
});
});
</script>
</head>
<body>

<button id="our_button">Hide/Show</button> the image.
<br /><br />
<div id="our_image">
<img border="0" src="http://1.bp.blogspot.com/_qfg-tuDgxAc/SuAki9DDU3I/AAAAAAAABJ4/M38IBtd3FJo/s320/flower.jpg" />
</div>
</body>
</html>


And the result:


the image.



Easy, isn't it? Tomorrow I'll continue with animate function.

Oct 12, 2009

More JQuery examples - Intro to JQuery - part 3

How to use JQuery filter? (Easy example)



Filter is used to filter some results from a set. (of course) For example let’s have a document with many divs in it. We want to select only the ones with css class “.text” and hide them. We can do this using filter.

At the beginning lets write some dummy html file with the basics in it. Here it is our filter.htm:

<html>
<head>
<title>Our JQuery examples</title>
<style>
.text {
}
.comment {
}
</style>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
// our javascript examples will go here
});
</script>
</head>
<body>
<!-- our text will go here -->
</body>
</html>


Let’s make some divs and set class text to some of them and comment to the others.

<div class="comment">
123
</div>
<div class="text">
This will be selected.
</div>
<div class="comment">
This wont be selected.
</div>
<div class="text">
This div will be selected.
</div>
<div class="text">
Selected!
</div>

This row will hide all divs with class text.

$("div").filter(".text").hide();

It would be easy to make a button that shows and hides these divs. Here is the full source:

<html>
<head>
<title>Our JQuery examples</title>
<style>
.text {

}

.comment {

}
</style>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$("#toggle").click(function() {
$("div").filter(".text").toggle();
});

});
</script>
</head>
<body>
Show and hide filtered divs. <br />
<button id="toggle">Toggle Show/Hide</button>
<div class="comment">
123
</div>
<div class="text">
This will be selected.
</div>
<div class="comment">
This wont be selected.
</div>
<div class="text">
This div will be selected.
</div>
<div class="text">
Selected!
</div>
</body>
</html>


Here is our work:


Show and hide filtered divs.

123
This will be selected.
This wont be selected.
This div will be selected.
Selected!

Intro to JQuery - part 1
Intro to JQuery - part 2

Popular Posts