JavaScript and EGL and .JSP Pages

tacitmarigoldInternet και Εφαρμογές Web

25 Ιαν 2014 (πριν από 3 χρόνια και 2 μήνες)

316 εμφανίσεις

®


IBM Software Group

© 2006 IBM Corporation

JavaScript


and EGL and .JSP Pages

This learning module describes the use of JavaScript in your EGL and .JSP pages


to provide enhanced, dynamic U.I. behavior.

2

Last update: 12/04/2007


You will most likely


in the course of your application
development, need to learn how to use JavaScript, to do certain
standard web
-
U.I. functions. These would be things like:


In the user’s browser (that is, on the client’s machine, NOT on the
server):


Validate data entry values


Move (copy) field values entered (ex. Shipping address = home address for an
online retail store)


Do not allow users to click Submit twice,


Etc.



Notice that we’re saying, “
use

JavaScript”
-

not write JavaScript (why’s that?)



JavaScript is a fairly deep and lengthy study (certainly to learn how to write to the level of
production standards)


and while it’s not something would kill you to know (

), for the vast
majority of your needs, you can usually find what you want on the Internet (often for free),
and you can a few techniques in the tooling as well.



So in this section, you will learn how to use JavaScript inside of your .JSP pages


and to connect JavaScript with the data values rendered from your EGL server
-
side
business logic

JavaScript and JSF and EGL

3

Last update: 12/04/2007


Using JavaScript is a fairly straightforward process. Steps include:

1.
Getting (or writing

) the JavaScript function

2.
Understanding where JavaScript functions reside

3.
Creating JavaScript functions and embedding them in your pages

4.
Calling JavaScript functions from a user/browser action (event), such as:


Onclick


Onblur


Onchange


Etc.

5.
Learning how to reference:


JSF components


JSF component values

6.
Debugging your JavaScript functionality


Using JavaScript (in your .JSP Pages)


The Background

4

Last update: 12/04/2007

Getting JavaScript Functionality (from the Internet)

There are dozens (maybe even hundreds) of
high
-
quality sources for JavaScripts on the
Internet.


We’ve included a few links


but you might
be just as well served using GOOGLE to
search for specific JavaScript functionality:


Learn JavaScript




Here are a few good starter
-
sites:



http://www.javascriptmall.com/learn/contents.htm




http://javascript.internet.com/




http://www.quirksmode.org/js/contents.html




http://www.java2s.com/Code/JavaScript/CatalogJavaScript.htm




http://www.javascript
-
coder.com/tutorials.phtml




http://www.geocities.com/SiliconValley/Station/4320/index.htm




http://www.mcli.dist.maricopa.edu/tut/




http://www.geekpedia.com/language9_JavaScript.html




http://www.dyn
-
web.com/


5

Last update: 12/04/2007

Understanding Where JavaScript Elements Reside
in Your .JSP Page

From the tooling, you can enter JavaScript functions
through the Script element, under HTML Tags in the
Palette


To call these functions


or to create new functions for
specific user/browser events, you will: 1. Set focus to
the JSF component you wish to code for, 2. Go to the
Quick Edit view, select an event and code your
JavaScript…which will end up in your .JSP source


6

Last update: 12/04/2007



Creating and Calling JavaScript
Functions


1 of 6


Create a new page, named:
jscriptPage.jsp


Edit the page heading boiler
-
plate text


From Project Explorer:


Right
-
click over the new page


Select:


Page Template


Merge Template into Page


Click OK at the prompt








The reason you are merging the template
into the page is so you can over
-
ride a
reserved function in the page’s HTML
<BODY>

tag (onload event)

7

Last update: 12/04/2007



Creating and Calling JavaScript Functions


2 of 6


Edit the Page’s EGL JSFHandler, and
add the variables and functions
shown here:



Comments optional



Source code in the *** Notes
section of the slide










Save (Ctrl/S) your code

8

Last update: 12/04/2007



Creating and Calling JavaScript Functions


3 of 6


From Page Designer, Add an HTML Table to the page (2 rows/2 columns).


Drag the
siteUser1Rec

into the top left row/column (all input fields


except for:


SiteUserID


output field


SuType


Radio button, with Properties/Choices hard
-
coded as: Manager | 1, Admin | 2, User | 3


ReceiveUpdates


checkBox


note that you may need to declare the ReceiveUpdates DataItem with the isBoolean=yes property


Drag the
repeatPwd

string field into the inner HTML table, below PassWord


Drag the
siteUser2Rec

into the top right row/column


and create the controls as shown


Drag the
Customers

array into the bottom row of the HTML table, and create the controls in the dataTable as shown below:







Run the page


(Ensure it works)

Customers


Note: customerID

as an output field

siteUser1Rec

siteUser2Rec

9

Last update: 12/04/2007



JavaScript Functions


How do they work?

There are quite a few things that people use JavaScript for. And as mentioned at the
beginning of this section, you can learn about this on the web.

For our purposes (and for the purpose of entry
-
level business U.I. JavaScript
development, you need to understand the:


User/Browser events…that fire off calls to…


JavaScript functions



Essentially
-

you will:


Code a JavaScript function

…which is…


Called from some user/browser event


What are these user/browser events?


Windows keyboard or mouse actions


Available from the Quick Edit view


Defined to JavaScript (as reserved words)


More or less self
-
explanatory by their names


Can research on the web:

GOOGLE: JavaScript
onblur

event



So:


You will code a JavaScript function


And make it part of your


And call that function from

10

Last update: 12/04/2007



Creating and Calling JavaScript Functions


4 of 6

Let’s create a simple JavaScript function that makes changes a field to upper case



Step 1



Create the JavaScript Function


Copy the JavaScript code in the ***Notes section of this slide


From the Palette/HTML Tags


drag a Script tag onto the bottom of the page


(With the Script in focus) From the Quick Edit view


Click into the edit area


Completely replace the contents of the Quick Edit, with the copied JavaScript









Step 2


invoke (call) the JavaScript function from a user/browser event:


Select the LastName field in the siteUser1Rec


From Quick Edit


For the onblur event, click in the edit area, and code the following:
upperCase();



Run the page and enter some (lower
-
case) value in the siteUser1Rec.
LastName

field. Then tab or click out of the field
.

11

Last update: 12/04/2007

Let’s Have a Closer Look at this Function (and Call)


Breakdown of the Elements

1


Boilerplate


identifies the beginning of a JavaScript to the browser


2


Unique JavaScript function name
(unique within the .JSP file)


3


{ … } curly braces mark and bound statement blocks


4


document.getElementById(“form:JSFIDFieldname”)



used to refer to a fully
-
qualifed
HTML field on the page
(by its JSF ID


not by its EGL variable name)


5


.value;
-

returns the value part of the field
(this would be as opposed to a property)


6


toUpperCase()


is a call to a JavaScript language
(built
-
in function)


7


The call to the
upperCase();

function


when the browser/onblur event occurs at run
-
time

1.

2.

5.

4.

6.

3.

7.

12

Last update: 12/04/2007



Creating JavaScript Functions


5 of 6


Let’s have a look at some of the
tooling for JavaScript:


Each form field has two reserved
identifiers you can use to simplify
one
-
off JavaScript behavior:


thisObj


thisEvent



You can refer to either of these
inside of Quick Edit browser/user
events and simplify coding (see this
example


where we call a built
-
in
JavaScript function to do what we
did in the previous example, calling a
custom JavaScript function)



Try this example out


and see




Note that the only down
-
side to doing
this sort of work, is that it ties your
business logic to form fields


making
subsequent maintenance, testing and
support potentially more complicated
(than if you centralized your U.I.
business rules in EGL JSFHandler code)

13

Last update: 12/04/2007



Creating JavaScript Functions


6 of 6


So


now we’ll add a large number of JavaScript
functions that could be of use in your production
requirements


including:


Input
-
Required field validation


Comparing values (for equality)


Moving values (from one fields in a form to
another)



To do this:


Copy the enormous JavaScript function set in
the Slide Notes


Enter your Page in Source mode


Scroll down to the bottom of the file, and
paste the JavaScript below the
<f:view>

tag
as shown


Save your changes


Read through the comments



Run the page and note the various
JavaScript messages and functionality




Important Final Note on JavaScript: In this section you learned how to use,


not how to code JavaScript. Coding JavaScript is a challenging


discipline in and of itself, and will require you to spend many hours


learning this complex and O
-
O language.

14

Last update: 12/04/2007


Now that you have completed this unit, you should have:




Described the concepts and functions of AJAX and JavaScript




Used different types of AJAX to make your pages respond faster


Request Refresh


Submit Refresh


External Refresh




Leveraged JavaScript to invoke Ajax engine for


creating better response web applications



JavaScript Topic Summary