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

onclick Occurs on a mouse click

ondblclick Occurs on a mouse double clicked

onmousedown Occurs when mouse button is pressed

onmouseup Occurs when mouse is released

onmouseover Occurs when a mouse moves onto an element

onmouseout Occurs when a mouse pointer moves away from an element

onmousemove Occurse when a mouse moves while it is over the element

3

Lab 6: HTML Events

HTML Events- What are they?

Keyboard Eventsonkeydown Occurs when a key is pressed

onkeypress Occurs when the key is pressed and released

onkeyup Occurs when the key is released

Other Eventsonfocus Occurs when an elements gains focus

onblur Occurs when an element loses focus

onchange Occurs when a control loses foces and has been modified since gaining focus

onsubmit Occurs when a form is submitted

onload Occurs 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 tim

e, 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.

10

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.

11

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.

<bean id="Training-StudentInfo-Lab6" parent="Uif-HorizontalBoxSection" p:onMouseOverScript="jq(this).stop().css({ 'color': 'red'});" p:onMouseOutScript="jq(this).stop().css({ 'color': 'black'});">

12

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.

13

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.

14

Lab 6: Extra Exercises

Extra Exercise 3-n: Create your own events

Use your imagination to create your own event handlers!