Here And There: javascript

This is a very basic tutorial for the installation of Struts 2.0. This tutorial is intended for newbies and beginners.

First of all download Struts 2.0 at http://apache.mirrors.pair.com//struts/binaries/struts-2.2.1.1-all.zip
Unzip to a folder.
Go to lib folder in it. Copy the following jars and add those to the lib folder in your project as shown in the figure. The jars to be copied are as under.

1) commons-fileupload-1.2.1.jar
2) commons-io-1.3.2.jar
3) freemarker-2.3.16.jar
4) ognl-3.0.jar
5) struts2-core-2.2.1.1.jar
6) xwork-core-2.2.1.1.jar
Also make sure that your project contains javassist-3.7.ga.jar. If not, you can download it from here http://mirrors.ibiblio.org/pub/mirrors/maven2/jboss/javassist/3.7.ga/javassist-3.7.ga.jar
Open web.xml and paste the following lines to it.

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_9" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

<display-name>Struts Blank</display-name>

<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>

<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

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

</web-app>
Make a file named struts.xml and place it at the root of the src folder as shown in figure. Copy the following lines to it.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
<package name="default" namespace="/" extends="struts-default">
<default-action-ref name="index" />
<action name="view" class="com.soft.struts.actions.ExampleAction" method="execute">
<result name="view" >view.jsp</result>
</action>
</package>



</struts>
I have named the action as view. Now we need to make a class named com.soft.struts.actions.ExampleAction.java and a jsp file named view.jsp. So make a package named com.soft.struts.actions.
Create a class named ExampleAction.java and copy the following lines of code to it.

package com.soft.struts.actions;
import com.opensymphony.xwork2.ActionSupport;
public class ExampleAction extends ActionSupport {
private String message;
public String execute() throws Exception {
message="Hello World";
return "view";
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
}

The action class should always extend com.opensymphony.xwork2.ActionSupport
Now, make a jsp page named view.jsp at the root of the webRoot folder and copy these lines of code.
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
</head>
<body>
<s:property value="message"/>
</body>
</html>

To use struts tags we must always have this line in our jsps
<%@ taglib prefix="s" uri="/struts-tags" %>
Now, we need to make a link to the view.action. So make a jsp named index.jsp, place it at the root of webRoot and copy the following lines to it.
<html>
<head>
<title>index.jsp</title>
</head>
<body>
<a href="view.action">Test the struts action.</a>
</body>
</html>
That is it. Now make a war file of it and deploy it to a tomcat server. When you visit index.jsp, you will see a link, click on that link and it will take you to the view.action.

This simple application declares a string named message(getters and setters are necessary) in class ExampleAction.java and shows it on view.jsp through the struts tag <s:property value="message"/>.

Hope it helps someone.

Hey All,
I was asked to develop a popup for a client, that should disappear on mouseout, but when I placed the onmouseout event on the parent container div of the popup, it triggered even entering into its child divs or elements, although it has never left the boundary of the parent container div.
If you want to understand the whole process look at the Example otherwise got to the solution section.

EXAMPLE:

<div id="parentDiv" onmousseout="closeDiv();">

in only one div

in only one div

in only one div

in only one div
</div>

When you bring your mouse to the parentdiv, nothing happens. When you leave this parentdiv the closeDiv function is called, which is perfectly right.

Now consider the following situation:

<div id="parentDiv" onmousseout="closeDiv();">
in Parent div

in Parent div

in Parent div

in Parent div

<div id="childDiv">
in Child

in Child

in Child

in Child

</div>
</div>

In this situation the onmouseout event does not work properly due to a phenomenon called bubbling. When you bring mouse to the parentDiv, nothing happens. When the mouse enters to the childDiv area the onmouseout event of the parentDiv is triggered and the popup closes which is not the desired behaviour.

SOLUTION:

I thought a bit on this and came up with this work around.

<script type="text/javascript">
var inPopUp=0;
function setIn(){
inPopUp=1;
}
function setOut(){
inPopUp=0;
}
function closeDiv() {
if (inPopUp==0){
alert("close");
}
}
</script>
<div id="parentDiv" onmousseout="setOut();setTimeout('closeDiv();',1000)">
in Parent div

in Parent div

in Parent div

in Parent div

<div id="childDiv" onmouseover="setIn();">
in Child

in Child

in Child

in Child

</div>
</div>

Hope this solution may help someone out there :) .

NOTE: All the above details are also valid for tables and rows instead of divs.

Here And There

Tuesday, April 26, 2011

Struts 2.0 Installation Tutorial

Tuesday, April 6, 2010

onMouseOut Problem Solved

About Me