Java Script

Mohan Bang Email: mohanbang@gmail.com Discussion on JavaScript Welcome

Agenda In this discussion session, we will discuss about …

Types of Scripting Language

What is client-side vs. server-side validation?

Why a re-introduction?

How JavaScript begins?

What is JavaScript?

Components and Architecture of Server Side JavaScript Application

Communication between JavaScript and Java

Browser Versions and JavaScript Support

Why did we require JavaScript?

JavaScript compared to Java

Overview on JavaScript

Variable Naming

Types of values

Escape characters

Type casting

Conversion Functions

Operators

Built-in objects

Monitoring User Events

DOM Parser

Memory Leaks

JavaScript in EX2

Demo on JavaScript

Introduction to GWT

Conclusion and Summary

Agenda

Types of Scripting Language

JScript

ActionScript

ECMAScript

JavaScript

VBScript

What is client-side vs. server-side validation? client-side validation (client-tier) Java Script is used for client-side validation. Validation takes place in client-side within your browser. Java Script can be used to submit your form data after successful validation. No extra network trip is required when there are validation errors because form does not have to be submitted server-side validation (presentation-tier) Form data is submitted to the server and validation is carried out in the server. Extra network round trip is required when there are validation errors because validation errors need to be reported back to the client and the form data has to be resubmitted.

Why a re-introduction? Because JavaScript has a reasonable claim to being the world's most misunderstood programming language. While often derided as a toy, beneath its deceptive simplicity lie some powerful language features. The past year has seen the launch of a number of high profile JavaScript applications, showing that deeper knowledge of this technology is an important skill for any web developer.

How JavaScript begins? It is useful to start with an idea of the language's history. JavaScript was created in 1995 by Brendan Eich, an engineer at Netscape, and first released with Netscape 2.0 early in 1996. It's was originally going to be called LiveScript, but was renamed in an ill-fated marketing decision to capitalise on the popularity of Sun Microsystem's Java language - despite the two having very little in common. This has been a source of confusion ever since. Microsoft released a mostly-compatible version of the language called JScript with IE 3.0 several months later. Netscape submitted the language to ECMA ((European Computer Manufacturers Association) International, a European standards organisation, which resulted in the first edition of the Ecmascript standard in 1997. The standard received a significant update as Ecmascript edition 3.0 in 1999, and has stayed pretty much stable ever since - although edition 4.0 is currently in the works.

What is JavaScript?

JavaScript is Netscape’s cross-platform, object-based scripting language for client and server applications.

Client-side JavaScript extends the core language by supplying objects to control a browser (Navigator or another web browser) and its Document Object Model (DOM).

Using JavaScript, you can create dynamic HTML pages that process user input.

Components and Architecture of Client/Server Side JavaScript Application

Architecture of the client-server JavaScript application environment

Server-side JavaScript in the Netscape server environment

To create Server - Side JavaScript Application Server-side JavaScript extends the core language by supplying objects relevant to running JavaScript on a server. For example, server-side extensions allow an application to communicate with a relational database, provide continuity of information from one invocation to another of the application, or perform file manipulations on a server. JavaScript lets you create applications that run over the Internet. Client applications run in a browser, such as Netscape Navigator, and server applications run on a server, such as Netscape Enterprise Server. Using JavaScript, you can create dynamic HTML pages that process user input and maintain persistent data using special objects, files, and relational databases. Through JavaScript’s LiveConnect functionality, you can let Java and JavaScript code communicate with each other. From JavaScript, you can instantiate Java objects and access their public methods and fields. From Java, you can access JavaScript objects, properties, and methods.

Communication between JavaScript and Java

Controlling applets and calling Java from JavaScript

Accessing JavaScript from Java Using API's

Browser Versions and JavaScript Support Each version of Browser(Internet Explorer / Mozilla Firefox / Netscape Navigator) supports a different version of JavaScript. To help you write scripts that are compatible with multiple versions of Browser, the below table lists the JavaScript version in which each feature was implemented. Versions of Browser prior to 2.0 do not support JavaScript.

Browser Versions and JavaScript Support For example the below JavaScript Function is only present in JavaScript 1.3 and above decodeURI() : Decodes an encoded URI and encodeURI() : Encodes a string as a URI Definition and Usage : The decodeURI() function decodes a URI encoded with the encodeURI() function. Syntax : encodeURI(URIstring) ; decodeURI(URIstring) ; Parameter Description : URIstring Required. The URI to be decoded In below example we use decodeURI() to decode a URI after encoding it using encodeURI() <script type="text/javascript"> var test="http://www.zeonsolutions.com/Home page/" document.write(encodeURI(test)+ "<br />") document.write(decodeURI(test)) </script> The output of the code above will be: http://www.zeonsolutions.com/Home%page/ http://www.zeonsolutions.com/Home page/

Why did we require JavaScript?

To generating HTML dynamically

To customize Web Pages

To make pages more dynamic

To validate input form

To manipulate HTTP Cookies

To interact with and control frames

To create Server - Side JavaScript Application

JavaScript compared to Java

Overview on JavaScript Variable Naming Variable names can begin with : Uppercase letter (A through Z), Lowercase letter (a through z), Underscore character (_), Dollar sign character ($). The remaining characters can consist of letters or digits (0 through 9). For example: Sum1 , total ,qty2_1 , _count, Next_Count Variable names are case sensitive. JavaScript does not require you to specify the type of the data contained in a variable.

Types of values JavaScript supports the following types of values: Number – This consists of numbers including both integer and floating-point. String – This consists of text specified within single or double quotes. Null – This consists of “null” value. Boolean – This consists of Boolean values “true” and “false”.

String Value Alphanumeric data in JavaScript is known as “String”. String is one or more characters enclosed within single or double quotes. If a string begins with single quote then it has to end with a single quote. For Example: s1 = ‘This is a sample string’ The quote characters (“ “ or ‘ ‘) can be embedded in a string, but backslash () escape characters must precede the quote characters to suppress their meaning. For Example: “This is a string which displays “” on the screen”

null Value This can be used with all JavaScript types. The “null” value indicates that a variable is un-initialized.

Boolean Value JavaScript supports a pure Boolean type. It consists of two values true and false. JavaScript automatically converts true or false in to 1 or 0.

Escape characters Escape characters that can be used in JavaScript Tab Backspace New Line Form Feed f Carriage Return Backslash \ Double Quote ” Single Quote ’ Meaning Character

Type casting JavaScript automatically converts values from one type to another when they are used in expressions. Adding together the floating-point literal 7.5 and the string "12" results in the floating point numeric literal 19.5. This type of automatic conversion from one type to another is known as type casting. In later versions of JavaScript, however, this kind of type casting is not supported.

Conversion Functions Explicit conversions can be done using the following functions: eval() – This function converts a string to a numerical value parseInt() – This functions extracts the first integer part from a given string parseFloat() – This function extracts the first floating-point number from the given string

Operators

Assignment Operators

Comparison Operators

Arithmetic Operators

Logical Operators

String Operators

Bitwise Operators

Special Operators (typeof operator)

Assignment Operators A = A – B A -= B A = A / B A /= B A = A* B A *= B A = A + B A += B What they imply Compound Assignment operators

Comparison Operators R elational operators used for comparison and they return a logical value true or false based on the comparison. T he operands can be either numerical or string values. If left operand is less than or equal to right, expression results in a value true Less than or equal to (<=) If left operand is greater than or equal to right, expression results in a value true Greater than or equal to (>=) If left operand is less than right, expression results in a value true Less than (<) If left operand is greater than right, expression results in a value true Greater than (>) If the operands are not equal, the expression results in a value true Not equal to (!=) If operands are equal, the expression results in a value true. Equal (= =) Description Operator

Arithmetic Operators These are the common binary mathematical operators such as Plus (+), Minus (-), Multiplication (*) and Division (/). In addition to these standard arithmetic operators, there are a few more such as the Increment (++), Decrement (--), Negation (-), and Modulus (%) operators.

Logical Operators Logical operators take Boolean values (true or false) as operands and returns a Boolean value. Returns false if the expression is true , and true if it is false Not ( ! ) !expr Returns true if either expr1 or expr2 is true or both else it returns false Or ( || ) expr1 || expr2 Returns true if both expr1 and expr2 are true else it returns false And ( && ) expr1 && expr2 Description Operator

String Operators The string operator is used for string manipulation. JavaScript only supports string concatenation operator (+).

Bitwise Operators Bitwise operators treat the operands as bits rather than numerical value. The numerical values could be of any base: decimal, octal or hex. The Bitwise operator will convert the operand to its binary representation and accordingly return a 1 or a 0 For example, the binary representation of nine is 1001, and the binary representation of fifteen is 1111. So, when the bitwise operators are applied to these values, the results are as follows: 15 & 9 yields 9 (1111 & 1001 = 1001) 15 | 9 yields 15 (1111 | 1001 = 1111) 15 ^ 9 yields 6 (1111 ^ 1001 = 0110)

Bitwise Operators Operator Description Example << (Left shift) This operator shifts the first operand the specified number of bits to the left. Excess bits shifted off to the left are discarded. Zero bits are shifted in from the right. 9<<2 yields 36, because 1001 shifted 2 bits to the left becomes 100100, which is 36. >> (Sign-propagating right shift) This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Copies of the leftmost bit are shifted in from the left. 9>>2 yields 2, because 1001 shifted 2 bits to the right becomes 10, which is 2. >>> (Zero-fill right shift) This operator shifts the first operand the specified number of bits to the right. Excess bits shifted off to the right are discarded. Zero bits are shifted in from the left. 19>>>2 yields 4, because 10011 shifted 2 bits to the right becomes 100, which is 4. For non-negative numbers, zero-fill right shift and sign-propagating right shift yield the same result.

Special Operators (typeof operator) typeof (operand) The typeof operator returns a string indicating the type of the unevaluated operand. operand is the string, variable, keyword, or object for which the type is to be returned.

Special Operators (typeof operator) Suppose you define the following variables: var myFun = new Function("5+2") var shape="round" var size=1 var today=new Date() The typeof operator returns the following results for these variables: typeof myFun is object typeof shape is string typeof size is number typeof today is object typeof dontExist is undefined

Built-in objects

JavaScript predefined objects

The Array object

The String object

The Date object

The Boolean object

The Function object

The Math object

The Global object

Array object Arrays are declared using Array() constructor. Example: var firstArray = new Array(); var secondArray = new Array(“red” , “green” , “blue”); var thirdArray = new Array(5);

Array object methods toString(): Converts an array to a string. The array elements are separated by commas. join(separator): Joins array elements together but separated by the separator string. The function returns the output as string. sort(): Sorts the contents of an array based upon the ascii value of each character. reverse(): Reverses the contents of an array. The last element becomes first and the first element becomes the last.

Array Object Example <HTML> <HEAD> <TITLE> The Array Object </TITLE> </HEAD> <BODY> <BR><BR> <H1 ALIGN="CENTER"> The Array Object </H1> <HR> <SCRIPT LANGUAGE = "JavaScript"> myArray=new Array(1,4,3,2,7,6,5,9,8,6,0) document.write("<PRE>") document.write("myArray.toString() : ") document.write(myArray.toString()+"<BR>") document.write("myArray.join('-') : ") document.write(myArray.join("-")+"<BR>") document.write("myArray.reverse() : ") document.write(myArray.reverse()+"<BR>") document.write("myArray.sort() : ") document.write(myArray.sort()+"<BR>") document.write("</PRE>") </SCRIPT> </BODY> </HTML>

The String Object Strings are declared using String() constructor var s = new String(); var s1=new String(“hello”);

Methods of String object toLowerCase(): Converts the entire string to lowercase. toUpperCase(): Converts the entire string to uppercase. substring(index): Returns a sub-string from a string beginning at index. substring(index1, index2): Returns a sub-string from a string beginning at index1 andending at index2. split(separator): Separates the entire string into an array of sub strings based upon the separator (de-limiter) character. charAt(index): Returns the character at the specified index. charCodeAt(index): Returns the character code (UNICODE) of the character at the specified index. indexOf(pattern): Returns the index of first occurrence of the substring considering the initial index at zero(0).

String object Example <HTML> <HEAD> <TITLE> The String Object </TITLE></HEAD> <BODY> <BR><BR> <H1 ALIGN="CENTER"> The String Object </H1><HR> <SCRIPT LANGUAGE = "JavaScript"> myString=new String("This is first string. This is second string") document.write("<PRE>") document.write("myString.toLowerCase() :") document.write(myString.toLowerCase()+"<BR>") document.write("myString.toUpperCase() :") document.write(myString.toUpperCase()+"<BR>") document.write("myString.substring(7) :") document.write(myString.substring(7)+"<BR>") document.write("myString.substring(5,6) :") document.write(myString.substring(5,6)+"<BR>") document.write("myString.split('first') :") document.write(myString.split('first')+"<BR>") document.write("myString.charAt(8) :") document.write(myString.charAt(8)+"<BR>") document.write("myString.charCodeAt(1) :") document.write(myString.charCodeAt(1)+"<BR>") document.write("myString.indexOf('first') :") document.write(myString.indexOf('first')+"<BR>") document.write("</PRE>") </SCRIPT> </BODY> </HTML>

Date Object Dates are declared using date() constructor Example: var rightNow = new Date(); var birthDay = new Date(“March 24, 1970”); var someDate = new Date(1970, 2, 24);

Methods of Date object getDate() : Returns the day of the month from the Date object. getDay() : Returns the day of the week from the Date object, starting Monday as 1. getMonth() : Returns the month of the year from the Date object. It returns ‘0’ for January, ‘1’ for February, so on and ‘11’ for December. setMonth() : Sets the month of the year for the Date object. getYear() : Returns the year from the Date object. setYear() : Sets the year for the Date object. getFullYear() : Returns the year in four digit format from the Date object. setFullYear() : Sets the year in four digit format for the Date object. getTime() : Returns the time in milliseconds since midnight January 1, 1970 from the Date object.

Boolean Object The Boolean object allows the creation of user defined boolean values.

Example: Boolean Object <HTML> <HEAD> <TITLE> The Boolean Object </TITLE> </HEAD> <BODY> <H3 ALIGN = “CENTER”> Using The Boolean Object </H3> <HR> <PRE> <SCRIPT LANGUAGE = “JavaScript”> myTrue = new Boolean(true) myFalse = new Boolean(false) document.write(“true + true : ”) document.write(true + true) document.write(“<BR>”) document.write(“myTrue + myTrue : ”) document.write(myTrue + myTrue) document.write(“<BR>”) document.write(“true + false : ”) document.write(true + false) document.write(“<BR>”) document.write(“myTrue + myFalse : ”) document.write(myTrue + myFalse) document.write(“<BR>”) document.write(“false + false : ”) document.write(false + false) document.write(“<BR>”) document.write(“myFalse + myFalse : ”) document.write(myFalse + myFalse) </SCRIPT> </PRE> </BODY> </HTML>

Math Object The Math object is used for performing simple and advanced arithmetic operations. Properties of Math object : LOG6E This represents the base 6 logarithm of e PI The constant PI value E Euler’s constant LOG2E The base 2 logarithm of e LN2 The natural logarithm of 2

Methods of Math object abs(x) : This method returns the absolute value of x cos(x) : This method returns the cosine of x exp(x) : This method returns the exponential of x log(x) : This method returns the natural logarithm of x max(x,y) : This methods returns the maximum of x and y min(x,y) : This method returns the minimum of x and y random() : This method returns random number between 0 and 1 round(x) : This method returns x rounded to the closest integer sin(x) : This method returns the sine of x sqrt(x) : This method returns the square root of x tan(x) : This method returns the tangent of x pow(x,y) : This method returns x to power y

Global Object The Global object provides methods, which can be accessed globally.

Methods of Global object eval(expression): This method evaluates and returns the value of the expression. parseInt(string): This method parses the string in to an integer. parseFloat(string): This methods parses the string as a floating-point number. isFinite(number): This methods returns true if the number is finite, otherwise false. isNaN(number): This method returns true if the number is NaN (Not A Number), otherwise false.

Window Object Timeout and Time Interval

setInterval() methods preforms specified job repeatedly after specified time-interval.

setInterval(‘alert(“4 seconds over”)’,4000) displays alert dialog box after every 4 seconds, for an infinite number of times. This returns interval reference to a variable. ref = setInterval(“myfunc()”, 4000)

To terminate clearInterval() method can be used as, clearInterval(ref).

setTimeout() methods performs specified job once only after specified time-interval .

ref = setTimeout(“myfunc()”, 4000) calls myfunc() after 4 seconds for once only.

Monitoring User Events JavaScript Event : Events are normally used in combination with functions, and the function will not be executed before the event occurs! The ability to let HTML events trigger actions in the browser, like starting a JavaScript when a user clicks on an HTML element. Below is a list of the attributes that can be inserted into HTML tags to define event actions.

JavaScript Event

DOM Parser Types of Parser: DOM and SAX Parsers -> DOM (Document Object Model) parser The parsers are fundamentals xml components, a bridge between XML documents and application that process that XML. The parser is responsible for handling xml syntax, checking the contents of the document against constraints established in a DTD (Document type definition) or Schema.

Pros and Cons of DOM Parser 1) Tree of Nodes 2) Memory: Occupies more memory. 3) Preferred for small XML documents 4) Slower at runtime 5) Stored as objects 6) Programmatically easy, since objects are to referred 7) Ease of Navigation

Document Object Model (DOM)

Introduction

DOM Implementation

DOM with JavaScript

Setup

DOM Components

Creating Nodes

Traversing the DOM

Outline

We will discuss about …

Introduction to DOM A document object model (DOM) - is an application programming interface (API) for representing a document. Can access and manipulate the various elements that make up that document. Represents XML documents in a tree structure and defines properties and methods for traversing the tree and examining and modifying its nodes.

XML Document Object Model (DOM)

W3C standard recommendation

Build tree structure in memory for XML documents

DOM-based parsers parse these structures

Exist in several languages (Java, C, C++, Python, Perl, etc.)

Representing Document as a tree DOM tree Each node represents an element, attribute, etc. <?xml version = "1.0"?> <message > <from>Paul</from> <to>Tim</to> <body>Hi, Tim!</body> </message> from body “ Hi, Tim!” Document to Tim Paul

Node created for element message Element message has child nodes for body,to and from element Element body has child node for text "Hi, Tim!“ ..

Interfaces The Node interface - defines properties and methods for traversing and manipulating the tree Properties: childNode,firstChild,lastChild Methods : appendChild( ), removeChild( ), replaceChild( ), and insertBefore( )

Types of nodes Interface Element Text Document Comment DocumentFragment Attr nodeType constant Node.ELEMENT_NODE Node.TEXT_NODE Node.DOCUMENT_NODE Node.COMMENT_NODE Node.DOCUMENT_FRAGMENT_NODE Node.ATTRIBUTE_NODE

The Node at the root of the DOM tree is a Document object. The documentElement property of this object refers to an Element object that represents the root element of the document.

Core DOM Node Document CharacterData Element Attribute Text Comment

DOM Implementations

DOM-based parsers

Microsoft’s msxml

Sun Microsystem’s JAXP

Some DOM-based parsers. Parser Description JAXP Sun Microsystem’s Java API for XML Parsing (JAXP) is available at no charge from java.sun.com/xml . XML4J IBM’s XML Parser for Java (XML4J) is available at no charge from www.alphaworks.ibm.com/tech/xml4j . Xerces Apache’s Xerces Java Parser is available at no charge from xml.apache.org/xerces . msxml Microsoft’s XML parser (msxml) version 2.0 is built-into Internet Explorer 5.5. Version 3.0 is also available at no charge from msdn.microsoft.com/xml . 4DOM 4DOM is a parser for the Python programming language and is available at no charge from fourthought.com/4Suite/4DOM . XML::DOM XML::DOM is a Perl module that we use in Chapter 17 to manipulate XML documents using Perl. For additional information, visit www-4.ibm.com/software/developer/library/xml-perl2 .

DOM and JavaScript

We use JavaScript and msxml parser

XML document marks up article

Use DOM API to display document’s element names/values

Article marked up with XML tags. 1 <?xml version = "1.0" ?> 2 3  4  5 6 <article> 7 8 <title> Simple XML </title> 9 10 <date> December 6, 2000 </date> 11 12 <author> 13 <fname> Tem </fname> 14 <lname> Nieto </lname> 15 </author> 16 17 <summary> XML is pretty easy. </summary> 18 19 <content> Once you have mastered HTML, XML is easily 20 learned. You must remember that XML is not for 21 displaying information but for managing information. 22 </content> 23 24 </article>

Traversing article.xml with JavaScript. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd" > 3 4 <html> 5 6  7  8 9 <head> 10 <title> A DOM Example </title> 11 </head> 12 13 <body> 14 15 <script type = "text/javascript" language = "JavaScript" > 16 17 var xmlDocument = new ActiveXObject( "Microsoft.XMLDOM" ); 18 19 xmlDocument.load( "article.xml" ); 20 Element script allows for including scripting code Instantiate Microsoft XML DOM object Load article.xml into memory; msxml parses article.xml and stores it as tree structure

Traversing article.xml with JavaScript. (Contd..) 21 // get the root element 22 var element = xmlDocument.documentElement; 23 24 document.writeln( 25 "<p>Here is the root node of the document:" ); 26 document.writeln( "<strong>" + element.nodeName 27 + "</strong>" ); 28 29 document.writeln( 30 "<br>The following are its child elements:" ); 31 document.writeln( "</p><ul>" ); 32 33 // traverse all child nodes of root element 34 for ( i = 0; i < element.childNodes.length; i++ ) { 35 var curNode = element.childNodes.item( i ); 36 37 // print node name of each child element 38 document.writeln( "<li><strong>" + curNode.nodeName 39 + "</strong></li>" ); 40 } 41 42 document.writeln( "</ul>" ); 43 44 // get the first child node of root element 45 var currentNode = element.firstChild; 46 Assign article as root element Place root element’s name in element strong and write it to browser Assign index to each child node of root node Retrieve root node’s first child node ( title )

Traversing article.xml with JavaScript. (Contd..) 47 document.writeln( "<p>The first child of root node is:" ); 48 document.writeln( "<strong>" + currentNode.nodeName 49 + "</strong>" ); 50 document.writeln( "<br>whose next sibling is:" ); 51 52 // get the next sibling of first child 53 var nextSib = currentNode.nextSibling; 54 55 document.writeln( "<strong>" + nextSib.nodeName 56 + "</strong>." ); 57 document.writeln( "<br>Value of <strong>" + nextSib.nodeName 58 + "</strong> element is:" ); 59 60 var value = nextSib.firstChild; 61 62 // print the text value of the sibling 63 document.writeln( "<em>" + value.nodeValue + "</em>" ); 64 document.writeln( "<br>Parent node of " ); 65 document.writeln( "<string>" + nextSib.nodeName 66 + "</strong> is:" ); 67 document.writeln( "<strong>" + nextSib.parentNode.nodeName 68 + "</strong>.</p>" ); 69 70 </script> 71 72 </body> 73 </html> Siblings are nodes at same level in document (e.g., title , date , author , summary and content ) Get first child’s next sibling ( date ) Get first child of date ( December 6, 2000 ) Get parent of date ( article )

Traversing article.xml with JavaScript.

Memory Leaks An unfortunate side effect of closures is that they make it trivially easy to leak memory in Internet Explorer. JavaScript is a garbage collected language - objects are allocated memory upon their creation and that memory is reclaimed by the browser when no references to an object remain. Objects provided by the host environment are handled by that environment. Browser hosts need to manage a large number of objects representing the HTML page being presented - the objects of the DOM. It is up to the browser to manage the allocation and recovery of these. Internet Explorer uses its own garbage collection scheme for this, separate from the mechanism used by JavaScript. It is the interaction between the two that can cause memory leaks.

Memory Leaks A memory leak in IE occurs any time a circular reference is formed between a JavaScript object and a native object. Consider the following: function leakMemory() { var el = document.getElementById('el'); var o = { 'el': el }; el.o = o; } The circular reference formed above creates a memory leak; IE will not free the memory used by el and o until the browser is completely restarted. The above case is likely to go unnoticed; memory leaks only become a real concern in long running applications or applications that leak large amounts of memory due to large data structures or leak patterns within loops. Leaks are rarely this obvious - often the leaked data structure can have many layers of references, obscuring the circular reference.

JavaScript in EX2

How to implement "Please, Wait..." page? The client-side solution might be very simple. You can wrap the jsp page (or part of it you want to hide) into the DIV, then you can add one more DIV that appears when user clicks the submit button. This DIV can contain the animated gif you speak about or any other content. Scenario: when user clicks the button, the JavaScript function is called. This function hides the page and shows the "Wait" DIV. You can customize the look-n-fill with CSS if you like.

Example: <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <f:loadBundle basename="demo.bundle.Messages" var="Message"/> <html> <head> <title>Input Name Page</title> <script> function gowait() { document.getElementById("main").style.visibility="hidden"; document.getElementById("wait").style.visibility="visible"; } </script> </head> <body bgcolor="white"> <f:view> <div id="main"> <h1><h:outputText value="#{Message.inputname_header}"/></h1> <h:messages style="color: red"/> <h:form id="helloForm"> <h:outputText value="#{Message.prompt}"/> <h:inputText id="userName" value="#{GetNameBean.userName}" required="true"> <f:validateLength minimum="2" maximum="20"/> </h:inputText> <h:commandButton onclick="gowait()" id="submit" action="#{GetNameBean.action}" value="Say Hello" /> </h:form> </div> <div id="wait" style="visibility:hidden; position: absolute; top: 0; left: 0"> <table width="100%" height ="300px"> <tr> <td align="center" valign="middle"> <h2>Please, wait...</h2> </td> </tr> </table> </div> </f:view> </body> </html>

If you want to have an animated gif of the "Wait" Page, the gif should be reloaded after the form is just submitted. So, assign the id for your image and then add reload code that will be called after some short delay. For the example above, it might be: <script> function gowait() { document.getElementById("main").style.visibility="hidden"; document.getElementById("wait").style.visibility="visible"; window.setTimeout('showProgress()', 500); } function showProgress(){ var wg = document.getElementById("waitgif"); wg.src=wg.src; } </script> .... .... <img id="waitgif" src="animated.gif"> How to implement "Please, Wait..." page?

By using Java Script in your HTML code. The following Java Script is executed in the client side within your web browser. <SCRIPT type="text/javascript"> </SCRIPT> How to get a pop-up window when clicking on a button?

<h:commandLink assign the onclick attribute for internal use. So, you cannot use it to write your own code. This problem will fixed in the JSF 1.2. For the current JSF version you can use onmousedown event that occurs before onclick. <script language="javascript"> function ConfirmDelete(link) { var delete = confirm('Do you want to Delete?'); if (delete == true) { link.onclick(); } } </script> . . . . <h:commandLink action="delete" onmousedown="return ConfirmDelete(this);"> <h:outputText value="delete it"/> </h:commandLink> How to show Confirmation Dialog when user Click the Command Link?

Demo on JavaScript

Introduction to GWT

Google Web Toolkit => Web Framework

Pros:

Write Java => Produces JavaScript

Can easily create SOFEA (Service-Oriented Front-End Architecture) applications

Easy to learn and develop with standard Java Tools

Cons:

It’s hard to attach GWT on top of existing code

Lack of Advanced Widgets (GWT-Ext fixes)

GWT Growth

Thanks Mohan Bang Email: mohanbang@gmail.com

Java Script

0 comments

Notes on slide 1

6 Favorites

Java Script - Presentation Transcript

More by user

More info about this document

Categories

Tags

Java Script

0 comments

Notes on slide 1

6 Favorites

Java Script - Presentation Transcript

Related Presentations

More by user

More info about this document

Categories

Tags