JavaScript Events

JavaScript Events are items that transpire based on an action. A document event is the loading of an HTML document. A form event is the clicking on a button. Events are objects with properties.

Event Properties

• x -Mouse x coordinate when the event happened.
• y -Mouse y coordinate when the event happened.

JavaScript defines five types of events which are form, image, image map, link, and window events. Events are associated with HTML tags. The definitions of the events described below are as follows:

Form Events

• blur - The input focus was lost.
• change - An element lost the focus since it was changed.
• focus - The input focus was obtained.
• reset - The user reset the object, usually a form.
• select - Some text is selected
• submit - The user submitted an object, usually a form.

Image Events

• abort - A user action caused an abort.
• error - An error occurred.
• load - The object was loaded.

Image Map Events

• mouseOut - The mouse is moved from on top a link.
• mouseOver - The mouse is moved over a link.

Link Events

• click - An object was clicked.
• mouseOut - The mouse is moved from on top a link.
• mouseOver - The mouse is moved over a link.

Window Events

• blur - The input focus was lost.
• error - An error occurred.
• focus - The input focus was obtained.
• load - The object was loaded.
• unload - The object was exited.

Author
Kazi Masudul Alam

Introduction to AJAX

Description: Everybody till now must have atleast heard about AJAX (Asynchronous JavaScript And XML). This example will give you an idea about how you can implement simple AJAX interaction in your web application.

Purpose of using AJAX

The main purpose of using AJAX is to asynchronously get the information from the server and update only that area of the web page where this information fetched needs to be displayed, avoiding refresh of the entire page. The other advantage of this is, the web page can hold minimal required data and retrieve rest as needed based of events.

How is all this possible.

Its possible by writing a JavaScript code in your web application, which uses XMLHttpRequest object to communicate with the server and get the data asynchronously.

The first step is to create and configure the XMLHttpRequest object.

• Currently there are two implementations of this object, ActiveXObject is Internet ExplorerXMLHttpRequest works with other browsers. So a check is made before creating the object, like this,
  
  var httpRequest;
  specific, and if (window.ActiveXObject) // for IE
  {
  httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
  }
  else if (window.XMLHttpRequest) // for other browsers
  {
  httpRequest = new XMLHttpRequest();
  }
• Now configure the object by setting the HTTP method, GET or POST, the URL of the server side element, like a servlet or cgi script, which this object will communicate with, and the third parameter is a boolean value which decides whether the interaction should be synchronous or asynchronous, where true means asynchronous.
  
  httpRequest.open("GET", url, true);
• Then set the name of the JavaScript function, which will handle the callback from the server side element.
  
  httpRequest.onreadystatechange = function() {processRequest(); } ;
• Now make the call,
  
  httpRequest.send(null);

Second step is to handle the response from the server which is always in XML form.

The server element can return the actual data in XML form or the formatted HTML code. This processing is done in the JavaScript function, which is specified as the callback function. The first thing to do in this method is to check the XMLHttpRequest object's readyState, value 4 indicates that the call is complete. Then check for the status, which is the HTTP status code, value 200 means HTTP is successful. Following is how the method looks,

function processRequest()
{
if (httpRequest.readyState == 4)
{
if(httpRequest.status == 200)
{
//process the response
}
else
{
alert("Error loading page\n"+ httpRequest.status +":"+ httpRequest.statusText);
}
}
}

The third step is to process the response received.

The response is stored in responseText of the XMLHttpRequest object. The response is always in the XML form and the object representation of this XML is stored in responseXML
Following code shows how this is done.

of the XMLHttpRequest object. This XML can be parsed in the JavaScript itself using the DOM API to obtain the actual data. //The method getElementsByTagName, gets the element defined by the given tag
var profileXML = httpRequest.responseXML.getElementsByTagName("Profile")[0];

//The node value will give you actual data
var profileText = profileXML.childNodes[0].nodeValue;

Once we get the actual data, now the last step is to update the HTML.

The way to do that is by modifying the DOM (Document Object Model) of the HTML page. This can be done within JavaScript using the DOM API. JavaScript can get access to any element in the HTML DOM and modify it after the HML is loaded. This ability to dynamically modify the HTML DOM object within JavaScript plays very important role in AJAX interaction. The document.getElementById(id) method is used to get reference of the element in DOM. Where id, is the ID attribute of the element you want to modify. In this example the element is DIV with the ID attribute "profileSection".
Following code shows how to modify this DOM element with the data received,

//Create the Text Node with the data received
var profileBody = document.createTextNode(profileText);

//Get the reference of the DIV in the HTML DOM by passing the ID
var profileSection = document.getElementById("profileSection");

//Check if the TextNode already exist
if(profileSection.childNodes[0])
{
//If yes then replace the existing node with the new one
profileSection.replaceChild(profileBody, profileSection.childNodes[0]);
}
else
{
//If not then append the new Text node
profileSection.appendChild(profileBody);
}

How does web page interact with this JavaScript

To tie this interaction with your web page, you need to first identify the part of your web page which will be updated dynamically and mark it with DIV tag and provide it an id, like,

="profileSection">

Identify what event will update the marked area, like clicking on a link, mouseover a image etc. trap this events using JavaScript and call the JavaScript function which creates the XMLHttpRequest object.

What does server side element need to take care of?

While sending the response back the server should set the Content-Type to text/xml, since the XMLHttpRequest object will process this type of request. Also you can set the Cache-Control to no- cache to avoid the browser caching the response locally. The server should always send back data in XML format. The data should be a valid XML format and parse able by the JavaScript. If your data contains characters not friendly with the XML parsers, use the CDATA section in your XML

Author
Kazi Masudul Alam

Deployment of WebLogic Server Applications

Weblogic directory structure or deployment of weblogic server application, the best article is

Deployment of Weblogic Server Application

JBoss Directory Structure

The binary distribution unpacks into a top-level JBoss install directory, often referred to as the JBOSS_DIST directory. There are four sub-directories immediately below this:

NOTE: Some directories are dynamically created when you start JBoss. Some directories may not exist in older versions.

• bin: contains various scripts and associated files. This is where the run and shutdown scripts, which start and stop JBoss, reside.
• client: stores configuration and jar files which may be needed by a Java client application or an external web container. You can select archives as required or use jbossall-client.jar.
• docs: contains useful information
• docs/dtd: contains the XML DTD used in JBoss for reference (these are also a useful source of documentation on JBoss configuration specifics).
• examples: contains optional configurations:
• bindingmanager: example configuration for the binding service for running multiple copies on jboss with different ports on the same machine.
• jca: example JCA configuration files for setting up datasources for different databases (such as MySQL, Oracle, Postgres) and access to legacy EIS systems.
• jms: example configurations for different jbossmq persistence, state manager and connection factorys
• standalone: a script to make a minimal jbossmq server configuration
• jmx: additional and legacy management deployments
• netboot: a web application used when netbooting jboss
• remoting: an early access of the remoting service from JBoss4
• tomcat: scripts for installing different versions of Tomcat
• varia: additional services
• loadbalancer: a deployment for running jboss as a http loadbalancer
• lib: jar files which are needed to run the JBoss microkernel. You should never add any of your own jar files here.
• server: each of the subdirectories in here is a different server configuration. The configuration is selected by passing the option -c to the run script.
• : a server configuration started with the -c option
• conf: configuration files including the bootstrap services in jboss-service.xml
• props: default users/roles properties files for the jmx console (from 4.0.2)
• xmdesc: XMBean descriptors for those MBeans with extended descriptions
• lib: static jar files for the services
• deploy: services and applications that are hot deployed
• data: data files that survive reboot
• tmp: temporary files that do not survive reboot
• work: work files for Tomcat
• minimal: a minimal jndi and jmx kernel
• default: the default configuration (does not include clustering or corba)
• all: all services including clustering and corba
• farm: deployments in here are hot deployed across the cluster
• deploy-hasingleton: deployments in here are only run on one node in the cluster at a time

When one application will be deployed it can be deployed in \\server\\deploy or it can deployed in \\server\\deploy

Deployment Structure

Enterprise Archive Contents

Enterprise Archive (.ear) component follows the standard directory structure defined in the J2EE specification.

Directory Structure of .ear archive

/

.war and .jar files

|_Meta-inf

-----|_ application.xml

In the .ear file .war,.jar and application.xml file are packaged in the above format.

Enterprise Archive Contents

Web component follows the standard directory structure defined in the J2EE specification.

Directory Structure of Web Component

/

index.htm, JSP, Images etc..

|_Web-inf

-----web.xml

-----|_ classes

-----|_ servlet classes

-----|_ lib

----- jar files

/Kazi Masudul Alam
Software Engineer