Slide 1

Download Report

Transcript Slide 1 

®
IBM Software Group
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.
© 2006 IBM Corporation
JavaScript and JSF and EGL
 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
Last update: 12/04/2007
2
Using JavaScript (in your .JSP Pages) – The Background

Using JavaScript is a fairly straightforward process. Steps include:
1.
2.
3.
4.
Getting (or writing ) the JavaScript function
Understanding where JavaScript functions reside
Creating JavaScript functions and embedding them in your pages
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
Last update: 12/04/2007
3
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/
Last update: 12/04/2007
4
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
Last update: 12/04/2007
5
 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)
Last update: 12/04/2007
6
 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
Last update: 12/04/2007
7
 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:
siteUser1Rec

siteUser2Rec
Run the page
(Ensure it works)
Customers
Note: customerID
as an output field
Last update: 12/04/2007
8
 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
Last update: 12/04/2007
9
 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.
Last update: 12/04/2007
10
Let’s Have a Closer Look at this Function (and Call) – Breakdown of the Elements
1.
2.
3.
4.
5.
6.
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
7.
Last update: 12/04/2007
11
 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)
Last update: 12/04/2007
12
 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.
Last update: 12/04/2007
13
JavaScript Topic Summary
 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
Last update: 12/04/2007
14