KRAD makes it easy to handle HTML events in your webpage. Kuali University: Apply Now Lab 6: Fun with HTML Events Lab Objectives HTML Events – what are they? How to add javascript event handlers to components Add some event handling flair to our web page

2 Lab 6: HTML Events HTML Events- What are they? Dynamic HTML allows for interactive web-pages. HTML can process events from the keyboard and mouse, and also some other special events. Mouse Events onclickOccurs on a mouse click ondblclickOccurs on a mouse double clicked onmousedownOccurs when mouse button is pressed onmouseupOccurs when mouse is released onmouseoverOccurs when a mouse moves onto an element onmouseoutOccurs when a mouse pointer moves away from an element onmousemoveOccurse when a mouse moves while it is over the element

3 Lab 6: HTML Events HTML Events- What are they? Keyboard Events onkeydownOccurs when a key is pressed onkeypressOccurs when the key is pressed and released onkeyupOccurs when the key is released Other Events onfocusOccurs when an elements gains focus onblurOccurs when an element loses focus onchangeOccurs when a control loses foces and has been modified since gaining focus onsubmitOccurs when a form is submitted onloadOccurs when a window or frame finishes loading

4 Lab 6: HTML Events For processing of events we use JavaScript. KRAD components have properties defined to make adding event handlers to your page elements easy. For each event, there is a corresponding property. For example, to display an alert box when an element is clicked, simply set the onClickScript property. Let’s add some event handling to our page to liven it up a bit…

5 Lab 6: Fun with HTML events Instructions 1) Open up the view definition file TrainingApplicationView-Lab6-Events.xml We’ll start with something simple but not so exciting. We’ll display an alert box when the “Gender” radio component is clicked. 2)Locate the InputField bean with the label=“Gender” 3)Add the onClickScript property to the component to display an alert box with a fixed message. (Tip: see the previous screen for an example) 4)Re-load the page and test it out

6 Lab 6: Fun with HTML events Let’s try something a little more exciting. 5) Add a drop down select box component labeled “Affiliation” into the CampusInfo section right after the “Campus” drop down box. Note that this select box uses a different approach to setting it’s options. The list of options is defined near the bottom of the TrainingApplicationView- Lab6-Events.xml file. 6) Add an onChangeScript property to the Uif-DropdownControl bean, with the following java script: 7) Re-load the page and test it out

7 Lab 6: Fun with HTML events Embedding JavaScript in your view definitions like that is a bit sloppy and not considered a “best practice”. It leads to maintenance hassles and isn’t re-usable. Let’s change our event to call a javascript function instead. 8) Go back to the “Affiliation” component in our view definition. 9) Let’s cut out the script and call a.js function instead. 10) Re-load the page and check it out

More Fun: If you have more time, Let’s add some other events

9 Lab 6 Extra Exercises With JQuery and CSS, you can quickly and easily add all sorts of animations to your page. Of course you could add serious business to your application, but for today, let’s try a couple of silly exercises.

Lab 6: Extra Exercises Extra Exercise 1: onMouseOver event 1) Change your page so that when the user moves the mouse over the “About Me” section, all of the text in the section changes to red (or some other color). 2) And change it back to black when the mouse leaves the section. Yep, most events apply to groups and sections as well as individual elements. 10

Lab 6: Extra Exercises Extra Exercise 1: Solution 1) Change your page so that when the user moves the mouse over the “About Me” section, all of the text in the section changes to red (or some other color). 2) And change it back to black when the mouse leaves the section. 11 <bean id="Training-StudentInfo-Lab6" parent="Uif-HorizontalBoxSection" p:onMouseOverScript="jq(this).stop().css({ 'color': 'red'});" p:onMouseOutScript="jq(this).stop().css({ 'color': 'black'});">

Lab 6: Extra Exercises Extra Exercise 2: onMouseOver event Add a trick button to the page. 1. Create a button offering “Click here for a free scholarship” 1a. Create a separate group for the button 1b. Add the button to the group. 2. Add a mouse over event handler to the button which moves the button before they get a change to select it. 12

Lab 6: Extra Exercises Extra Exercise 2: Solution Add a trick button to the page. 1. Create a button offering “Click here for a free scholarship” 1a. Create a separate group for the button 1b. Add the button to the group. 2. Add a mouse over event handler to the button which moves the button before they get a change to select it. 13

Lab 6: Extra Exercises Extra Exercise 3-n: Create your own events Use your imagination to create your own event handlers! 14