1. ® 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. 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. use  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. 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. 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://www.javascriptmall.com/learn/contents.htm  http://javascript.internet.com/ http://javascript.internet.com/  http://www.quirksmode.org/js/contents.html http://www.quirksmode.org/js/contents.html  http://www.java2s.com/Code/JavaScript/CatalogJavaScript.htm http://www.java2s.com/Code/JavaScript/CatalogJavaScript.htm  http://www.javascript-coder.com/tutorials.phtml http://www.javascript-coder.com/tutorials.phtml  http://www.geocities.com/SiliconValley/Station/4320/index.htm http://www.geocities.com/SiliconValley/Station/4320/index.htm  http://www.mcli.dist.maricopa.edu/tut/ http://www.mcli.dist.maricopa.edu/tut/  http://www.geekpedia.com/language9_JavaScript.html http://www.geekpedia.com/language9_JavaScript.html  http://www.dyn-web.com/ http://www.dyn-web.com/

5. 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. 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 tag (onload event)

7. 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. 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 siteUser1RecsiteUser2Rec

9. 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. 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  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 upperCase();  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. 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) upperCase(); 7 – The call to the upperCase(); function – when the browser/onblur event occurs at run-time 1. 2. 5.4. 6. 3. 7.

12. 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. 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 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. 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