Use static resource folder in Tomcat

In this post I will explain how to use static resource folder in tomcat application server. Normally resources like Cascading Style Sheet (CSS) files, JavaScript files and images store inside the web application. That means when we deploy WAR file in to application server that WAR file contains resources inside it. It here I will explain how to access resources from static folder outside from WAR file.

Prerequisites 

1. You should have install java(It requires to have JVM 6 or higher version ) in your PC and set path variable correctly (JAVA_HOME, PATH)
2. You should have install Eclipse Java EE IDE in your PC
3. You should have Apache Tomcat in your machine and it should be added to Run Time Environments in Eclipse

Step 1 Create Dynamic web project
As first step lets create simple Dynamic Web Project using Eclipse. Go to File->New->New Dynamic Web Project. Give prefered name to the project (Here I will user project name as SharedResourceWeb as Figure 1) Then click finish. 

Figure 1: Provide project name

Then click next and next interface also click next and last interface tick box "Generate Web.xml for deployment descriptor". Then Click Finish button.

Figure 2 : Folder structure of new project

Then right click on WEBContent folder under your project node and go to New->HTML File then provide file name as "index.html". Then add some content to index.html. I will add following content

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Shared Web</title>
</head>
<body>
My Test web project
</body>
</html>

Then lets check all the things work correctly by deploy this web app into tomcat. First right click project you create and go to Export->WAR file the next interface provide WAR file name and location you need to create file. I will use "webapps" folder inside the tomcat folder stucture as WAR file creation location. Then select appropriate  target run time. If you have the tomcat v6 or v7 select correct run time. I'm using tomcat v7 (Figure 3)

Figure 3: Create WAR file using Eclipse

Then click on Finish you can see generated WAR file inside the selected location. If you not generated inside the webapps folder in tomcat folder structure copy WAR file in to
"webapps" folder.
Then start the tomcat server and you will be able to access your web project according to following URL format.

http://localhost:[tomcat running port]/[ProjectName]/

for my project it's

http://localhost:8888/SharedResourceWeb/

You can see interface similar to figure 4.

Figure 4: Project I deployed to tomcat

Then go to conf folder inside the tomcat directory and open server.xml file. Then add following line in between <HOST></HOST>.
        <Context docBase="/SharedResource" path="/SharedResource" reloadable="true"/>
Then go to webapps folder and create SharedResource folder and create anther folder as css then add new styles.css file with following content.

b {
    font-size : 16 px ;
}
.div1 {
    background-color: yellow;
    font-size: large;
}
.div2 {
    background-color: lime;
    font-size: x-large;
}
i {
    color : red ;
}

Then restart the tomcat server and try to access the css file through following link.

http://localhost:[tomcat running port]/SharedResource/css/styles.css

for my project link will be http://localhost:8888/SharedResource/css/styles.css



Then lets add some content and styles in to index.html. I will add following content in to index.html.

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Shared Web</title>
<link rel="stylesheet" href="http://localhost:8888/SharedResource/css/styles.css">
</head>
<body>
<b>This is Title</b>
<div class="div1">
<p>This is first paragraph in the web page</p>
<p>This is second paragraph in the web page</p>
</div>
<div class="div2">
<p class="p3">This is last paragraph in the web page</p>
<i>EXIT</i>

</div>
</body>
</html>

Then create the new war file and placed it inside the webapps folder. Then restart tomcat after that refresh the web page (http://localhost:8888/SharedResourceWeb/) you created. It will show the content with styles. You can see similar page to Figure 5.

Figure 5: Web page with Styles

This kind of shared folder will help to change the styles of project without deploying project.

Enable click event on disabled html element

This post will explain steps to trigger click event on disable html elements. Generally disable HTML elements will not fire any javascripts events but some times we needs to disable HTML elements initially and then in click event we may need to enable element. That kind of scenarios we can use following steps to archive it.

Whole example will be available in JSFiddle and you can try it your self. 

For this example I will use simple button to change a select field enable/disable function. Initially select field will be disabled and on the click event it will get enable. But actually user click on a another div placed in front of the select field but user will not have any idea about that. This div will be enable only when select field is disable.

<button id="enbDesBtn">Enable Passengers</button>

<div id="wrapper">

    <select id="passengers" disabled>

        <option value="1">Lakshan</option>

        <option value="2">Udara</option>

        <option value="3">Devmini</option>

        <option value="4">Nimasha</option>

    </select>

    <div id="overlay"></div>

</div>

Figure 1: HTML file view

Then we have to add following CSS and JavaScript in to HTML to archive our target. 

Javascript

var button = document.getElementById('enbDesBtn'),

    cars = document.getElementById('passengers'),

    overlay = document.getElementById('overlay');

button.addEventListener('click', function () {

    cars.disabled = !cars.disabled;

    var value="";

    if (cars.disabled) {

        button.textContent = 'Enable';

        value = 'Disable';

    } else {

        button.textContent = 'Disable';

        value = 'Enable';

    }

    alert(value);

}, true);

cars.addEventListener('change', function (evt) {

    console.log(evt.target.value);

}, true);

overlay.addEventListener('click', function () {

    alert('Disabled');

}, true);

CSS

#wrapper {

    display:inline-block;

    position:relative;

}

#overlay {

    display:none;

    width:100%;

    height:100%;

    position:absolute;

    top:0

    left:0;

    bottom:0;

    right:0;

}

#passengers:disabled + #overlay {

    display:block;

}

After adding above CSS and Javascripts in to HTML whole file will be similar to following.

<html>

<head>

<script>

window.onload=function(){

var button = document.getElementById('enbDesBtn'),

    cars = document.getElementById('passengers'),

    overlay = document.getElementById('overlay');

button.addEventListener('click', function () {

    cars.disabled = !cars.disabled;

    var value="";

    if (cars.disabled) {

        button.textContent = 'Enable';

        value = 'Disable';

    } else {

        button.textContent = 'Disable';

        value = 'Enable';

    }

    alert(value);

}, true);

cars.addEventListener('change', function (evt) {

    console.log(evt.target.value);

}, true);

overlay.addEventListener('click', function () {

    alert('Disabled');

}, true);

}

</script>

<style>

#wrapper {

    display:inline-block;

    position:relative;

}

#overlay {

    display:none;

    width:100%;

    height:100%;

    position:absolute;

    top:0

    left:0;

    bottom:0;

    right:0;

}

#passengers:disabled + #overlay {

    display:block;

}

</style>

</head>

<body>

<button id="enbDesBtn">Enable Passengers</button>

<div id="wrapper">

    <select id="passengers" disabled>

        <option value="1">Lakshan</option>

        <option value="2">Udara</option>

        <option value="3">Devmini</option>

        <option value="4">Nimasha</option>

    </select>

    <div id="overlay"></div>

</div>

</body>

</html>

As above example shows this functionality can be integrate with any other kind of HTML elements such as input fields, radio buttons etc.