® ibm software group © 2006 ibm corporation javascript – and egl and.jsp pages this learning...

®

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.

2Last 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, “useuse 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


Using JavaScript is a fairly straightforward process. Steps include:1. Getting (or writing ) the JavaScript function2. Understanding where JavaScript functions reside3. Creating JavaScript functions and embedding them in your pages4. 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


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/


Understanding Where JavaScript Elements Reside in Your .JSP PageFrom 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


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)


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


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)

CustomersCustomers

Note: customerID as an output field

siteUser1RecsiteUser1Rec siteUser2RecsiteUser2Rec


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


Creating and Calling JavaScript Functions – 4 of 6

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

Step 1Step 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();upperCase();

Run the page and enter some (lower-case) value in the siteUser1Rec.LastName field. Then tab or click out of the field.


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();upperCase(); function – when the browser/onblur event occurs at run-time

1.1.2.2.

5.5.4.4.

6.6.

3.3.

7.7.


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)


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.


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

® ibm software group © 2006 ibm corporation javascript – and egl and.jsp pages this learning...

Documents