krad makes it easy to handle html events in your webpage. kuali university: apply now lab 6: fun...
TRANSCRIPT
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!