Web Technologies: July 2008

JavaScript frameworks

For a long time I was dying to put my hands into web application development and finally the day came. First thing I realized is that the foundations I have are sufficient only to make me feel at home, but are not at all sufficient to do some really useful stuff.

To start with we have put couple of servlets and a basic html and made the skeleton ready. Now its time to pick one javascript framework available for giving the web those special looks. I did googling for about couple of hours and got to know below frameworks:

jquery - Probably this is one of the recent (I know there is nothing like latest in our domain) frameworks out there. It provides various ways of manipulating DOM and event handling. Along with comes jquery ui, which provides some special effects like sliding, tabbed interfaces etc.

prototype - This is probably out there for quite some time. This also provides ways for manipulating DOM and handling events. There are other frameworks like scriptaculous/rico, developed over Prototype for developing special effects and animations.

mootools - This is all-in-one framework providing support for handling events, manipulating DOM, special effects, sorting of tables etc.

yui & ext - Both very rich in features, but could not understand what they are and how they work as my understanding of javascript is very limited as of now :-(

dojo - Yet another framework for DOM manipulation, dijit is developed over dojo for providing special effects.

Deciding on any of these frameworks would be a challenge, but fortunately other my job became simpler as there were other existing applications developed earlier using prototype/scriptaculous.

As I am skeptical about following practices (even standard ones, till I see the benefits), I did some research on jquery as an alternative to prototype. My understanding is that the way one collects a group of elements for special handling is different.

Jquery feels like a scripting language by the looks of its (non-object) syntax, uses CSS notations for forming collections and applying special effects whereas Prototype goes for object oriented notation. I also read some review which mentioned that Prototype also offers Jquery like syntax so it is all hazy at the moment for me. With this I am starting to learn Prototype/scriptaculous.

forward vs include of request dispatcher

Recently I was analyzing a web application along with my colleagues and came across an issue, which required us to be clear on the concepts of forward and include methods of RequestDispatcher. A brief on the application setup before I explain the problem and solution.

We have a filter, a servlet and a jsp. All requests coming for jsp shall go through the filter. Filter does a forward to servlet and then call the next one in the chain, which is jsp. With this setup we are getting the IllegalStateException when we invoke the jsp.

This issue helped to clear my basic understanding of forward & include. I always thought that with forward control does not come back to the invoker !! Wrong, control does come back.

Forward - control comes back to the invoker, but response shall be committed even if the invoked did not write anything to the output.

Include - control comes back to the invoker, but response shall not be committed. The invoked might add something to the response, to which invoker might add more.

Redirect - control does not come back to the invoker.

In our case the problem was after the forward call to the servlet from filter, response is committed. Then when the control reaches jsp, it is trying to create a session (we haven't disabled session creation) which is not allowed. To correct this we are creating the session before forwarding the request to the servlet so that when the control reaches the jsp, session shall be available.

DOCTYPE - syntax and purpose

!DOCTYPE is required and be the first line in HTML/XHTML documents as per the validation constraints of HTML 4.2 or XHTML 1.0. Below is the syntax:

Typical HTML DOCTYPE statement:

<!DOCTYPE	HTML	PUBLIC	"-//	W3C//	DTD	HTML 4.0 Transitional//	EN"	"http://www.w3.org/TR/html4/loose.dtd">
	⁽¹⁾	⁽²⁾	⁽³⁾	⁽⁴⁾	⁽⁵⁾	⁽⁶⁾	⁽⁷⁾	⁽⁸⁾

Annotated syntax:

<!DOCTYPE	[Top Element]	[Availability]	"[Registration]//	[Organization]//	[Type]	[Label]//	[Language]"	"[URL]">
	⁽¹⁾	⁽²⁾	⁽³⁾	⁽⁴⁾	⁽⁵⁾	⁽⁶⁾	⁽⁷⁾	⁽⁸⁾

Explanation:

General: A pair of forward slash characters ("//") is used as delimiters between keyword fields in the FPI declaration.

(1):[Top Element] - Indicates the top level element type declared in the DTD; for HTML it is <html>.

(2): [Availability] - field indicates whether the identifier is a publicly accessible object (PUBLIC) or a system resource (SYSTEM) such as a local file or URL. HTML/XHTML DTDs are specified by PUBLIC identifiers.

(3): [Registration] - Indicated by either a plus ("+") or minus ("-"). A plus symbol indicates that the organization name that follows is ISO-registered. A minus sign indicates the organization name is not registered. The IETF and W3C are not registered ISO organizations and thus use a "-".

(4): [Organization] - This is the "OwnerID" - a unique label indicating the name of the entity or organization responsible for the creation and/or maintenance of the artifact (DTD, etc.) being referenced by the DOCTYPE. The IETF and W3C are the two originating organizations of the official HTML/XHTML DTDs.

(5): [Type] - This is the "Public Text Class" - the type of object being referenced. There are many different keywords possible here, but in the case of an HTML/XHTML DTD, it is "DTD" - a Document Type Definition.

(6): [Label] - This is the "Public Text Description" - a unique descriptive name for the public text (DTD) being referenced. If the public text changes for any reason, a new Public Text Description string should be created for it.

(7): [Language] - This is the "Public Text Language"; the natural language encoding system used in the creation of the referenced object. It is written as an ISO 639 language code (uppercase, two letters.) HTML/XHTML DTDs are usually (always?) written in English ("EN".)

(8): [URL] - This is the optional explicit URL to the DTD being referenced.

Here are the links for more information:

http://www.blooberry.com/indexdot/html/tagpages/d/doctype.htm

http://www.searchwin.net/doctype.htm

http://www.freebsd.org/doc/en_US.ISO8859-1/books/fdp-primer/sgml-primer-doctype-declaration.html

Web Technologies

Saturday, July 19, 2008

JavaScript frameworks

forward vs include of request dispatcher

DOCTYPE - syntax and purpose

About Me

Followers