Goal: Ensure you have a working environment for the project 1 Lab 0: Confirm Working Training...

1

Goal: Ensure you have a working environment for the project

Lab 0: Confirm Working Training Instance

Instructions 1) Install a copy of virtualbox (www.virtualbox.org) 2) Download a copy of virtual box image (vm-krtrain.0*.ova)

3) Click on the File -> Import Appliance 4) From the Import Wizard Select Choose 5) Select the vm-krtrain.ova from the proper file location and select Open

6) On the appliance Import Settings, select the import button.

- You may need to lower the RAM based on your system

7) double click the new VM appearing in your VM Manager

http://www.virtualbox.org/

2

Instructions 2) double-click the green leaf icon on (Spring Tool Suite)

3) Right click on the krworkshop project and select refresh


3

Instructions4) Right click on the ‘Spring Tomcat Server’ in the Servers Tab (bottom left) and select clean then publish

5) Double Click on the server start button (green button with arrow) located in the Server Tab


4

Instructions 6) Open Chrome and Select ‘KRAD Workshop Page’ 7) Login as admin (only username is required)


5

Instructions 8) Click on the ‘Kuali University - Lab 1: Components and Containers’ link

9) Confirm a spare but working page


Starting from a blank page we will setup the basic pieces for our application

Kuali University: Apply Now

Lab 1: Containers and Groups

Lab Objectives

Configure the application view and theme

Setup the page and sections

Add and modify input fields for the application

7

Lab 1 Containers and Groups

Main job of containers is to hold a list of components and render them using a layout.

For today we will discuss Views and Groups A container is divided into three parts:

8


Views are a top level component as well as a container May not be included in any other component

Quick overview on View Made up of Pages (a type of Group) Pages are made up of Sections (another type of Group) Groups are made up of fields, content elements, and groups

9


Overview of Lab 1 View

Add a new title Update the theme

Page Modify Title Add a section components

Groups Add fields to group Modify Group Types

Fields Add basic input fields Modify look and feel of field through with small changes

At the end of each step you can refresh your page and see your changes

10

Instructions 1) Add a title 'Kuali University Student Application Form’ to the View xml

2) Take a look at the TrainingApplicationForm.java (Shortcut - Ctrl-Shift-R ) If you’re familiar with Spring MVC, think of this as the form backing object

3) Update theme from Uif-ClassicKnsTheme to Uif-KradTheme and uncomment additionalCssFiles (this will add special styling for this view)

Lab 1 Containers and Group

11

At this point your page should look like (minus styling)


12

Instructions 4) Uncomment and add page title 'Application Info’

5) Uncomment Campus Info Section to your page


13

At this point your page should look like

Notice that our list include bean with a reference a parent. For the sections in this lab we’re already included all the parent beans.

6) Create new sections with parent 'Training-StudentInfo-Lab1' and 'Training-StudentAddress-Lab1’


14

At this point your page should approximately look like (minus styling)

You should have two new sections for ‘About Me’ and ‘Address’.

Lets add some input to this form


15

Instructions 7) Uncomment Dropdown Fields inside ’Training-CampusInfo-Lab1’

Update the term and college beans to use ‘Uif-InputField-LabelTop’

8) Add a new dropdown field labeled ‘Campus’, its label placed on top.

Add field values ‘east’ and ‘west’ representing ‘East Campus’ and ‘West Campus’ respectively


16

At this point your page should approximately look like this (minus styling)

Lets continue to build this form out


17

Instructions 9) Uncomment first, last, and email list fields inside ‘Training-StudentInfo-Group1-Lab1’ bean

10) Add field with id ‘email’ with label 'Email Address’


18

Instructions 11) Uncomment Training-StudentInfo-Group2-Lab1 fields and Training-StudentAddress input fields

12) Change Uif-DropdownControl to Uif-HorizontalRadioControl

13) Add a new 'Uif-DateControl' control to Date of Birth Field


19

14) Add instructionalText property to the ethnicity field to:'Please select the ethnicity/race(s) you most closely identify yourself as’ and change: ‘Uif-DropdownControl’ to 'Uif-VerticalCheckboxesControl’


Solution:

21

Your page should look approximately like this (yours will have different styling):


Starting with our inputs, we will add some constraints to enable client-side validation


Lab 2: Validation and Constraints

Lab Objectives

Understand how validation works in the UI

Setup some constraints

Demonstrate different types of constraints

23

Lab 2 Validation and Constraints

Now that we have the sections and InputFields set up, lets add some constraints

Constraints allow us to apply validations to our InputFields

All validations performed by constraints are supported on the client-side (as well as the server side through a validation service)

The user will immediately see the result of constraint validation when they make a mistake, allowing them to fix it easily

Attempting to submit a form without fixing errors will halt that action and give the user a summary of fields/sections that have errors

All of this functionality is automatic by just setting up your constraints on your InputFields!

24

Instructions

1) Open up the file view definition file TrainingApplicationView-Lab2.xml 2) Find the field that has a validCharactersConstraint on it (the firstName property field). This InputField is applying an AlphaPatternConstraint to its input (users can only enter alpha charactersfor this field)


3) Copy the validCharactersConstraint property (and its inner content)

4) Let’s put this same constraint on other InputFields where it makes sense: Add it to the lastName, city, and state InputFields.

25

Instructions 5) Let’s add some more validCharactersConstraints to the other fields. Following the same validCharactersConstraint property process, add different constraints for:

email - EmailAddressPatternConstraint zip – ZipcodePatternConstraint address1 - AlphaNumericWithBasicPunc address2 – AlphaNumericWithBasicPunc dob - BasicDatePatternConstraint

6) Now find the firstName field again. You may have noticed a property called “required” set with “true”. This constraint property means that this field is required by the user to fill out before the form can be submitted.

Add this property to every InputField on the View besides the field campus, address2, and emailList.


7) Additionally, add the property minLength and maxLength to the zip InputField and set both minLength to “5” and maxLength to “10”. These constraints will ensure the user enters only 5-10 characters in this field. Do the same for the state InputField, but set both the values to “2”.

8) Start up your application and see the result of the validation constraints you added by typing in invalid input or skipping required fields. Then see the result of correcting the invalid input.

Solution:

27

Partial Solution - Your code should look approximately like this:


<bean parent="Uif-InputField" p:label="First Name" p:propertyName="firstName" p:required="true">

<property name="validCharactersConstraint"> <bean parent="AlphaPatternConstraint"/> </property> </bean> <bean parent="Uif-InputField" p:label="Last Name" p:propertyName="lastName" p:required="true"> <property name="validCharactersConstraint"> <bean parent="AlphaPatternConstraint"/> </property> </bean> <bean parent="Uif-InputField" p:label="Email Address" p:propertyName="email" p:required="true"> <property name="validCharactersConstraint"> <bean parent="EmailAddressPatternConstraint"/> </property> </bean>

28

Partial Solution - Your code should look approximately like this :


<bean parent="Uif-InputField" p:label="State" p:propertyName="state" p:required="true" p:maxLength="2“ p:minLength="2"> <property name="validCharactersConstraint"> <bean parent="AlphaPatternConstraint"/> </property> </bean> <bean parent="Uif-InputField" p:label="Zip" p:propertyName="zip" p:required="true" p:maxLength="10“ p:minLength="5"> <property name="validCharactersConstraint"> <bean parent="NumericPatternConstraint"/> </property> </bean>

Advanced Features:

30

Lab 2 Extra Info and Exercises

There are additional constraints that you can apply for even more types of validations:

exclusiveMin, inclusiveMax (for minimum and maximum numeric values)

Prerequisite Constraints Must Occur Constraints Case Constraints Additional validCharactersConstraint options

You can even apply constraints based on the “state” of an object through State-based Validation

31


Prerequisite Constraints A prerequisite constraint defines what fields must be filled out WITH this field.

Extra Exercise 1: 1) Let’s add a PrerequisiteConstraint for address2, requiring that address1 be filled out before you can fill out address2.

2) Set the “dependencyConstraints” property on the InputField to the following:

3) Start the app and see what happens when you try to fill out address2 after putting nothing in address1

<property name="dependencyConstraints"> <list> <bean parent="PrerequisiteConstraint" p:propertyName=“address2"/> </list> </property>

32


Must Occur Constraints MustOccurConstraint is used to identify fields that are required before this field can be filled out. This differs from PrerequisiteConstraints because the number of fields required from different sets of fields can be defined.

<bean parent="MustOccurConstraint"> <property name="min" value="1" /> <property name="max" value="2" /> <property name="prerequisiteConstraints"> <list> <bean parent="PrerequisiteConstraint" p:propertyName="field11"/> </list> </property> <property name="mustOccurConstraints"> <list> <bean parent="MustOccurConstraint"> <property name="min" value="2" /> <property name="max" value="2" /> <property name="prerequisiteConstraints"> <list> <bean parent="PrerequisiteConstraint" p:propertyName="field12" /> <bean parent="PrerequisiteConstraint" p:propertyName="field13" /> </list> </property> </bean> </list> </property> </bean>

This means that field11 OR field12 with field13 must be filled out before the field this constraint applies to can have a value. This particular constraint as defined here also allows all 3 fields to be filled out.

However, if max at the top level was 1 instead, it would mean: either field11 OR field12 with field13 must be filled out (all 3 together not allowed).

33


Case Constraints A CaseConstraint provides the ability to only apply a certain constraint when a defined case/condition is satisfied.

The constraint or constraints used can be any of the constraints discussed, in addition to nesting another CaseConstraint within itself.

Extra Exercise 2: 1) Let’s add a CaseConstraint for campus, making it required when college equals “csc” or “art”.

2) By default, CaseConstraint does an equals comparison. We set the propertyName on CaseConstraint to “college” and fill out the rest of the constraint to look like this

3) Start up the app and see that campus

is required when you select csc or art.

<property name="caseConstraint"> <bean parent="CaseConstraint"> <property name="propertyName" value="college"/> <property name="whenConstraint"> <list> <bean parent="WhenConstraint"> <property name="values"> <list> <value>art</value> <value>csc</value> </list> </property> <property name="constraint"> <bean parent="RequiredConstraint"/> </property> </bean> </list> </property> </bean> </property>

34


Notes on Case Constraints• There is a list of WhenConstraints in case constraints, by adding additional WhenConstraints, it is equivalent to OR (if this property equals value A apply this constraint OR if this property equals value B apply this other constraint).

• By adding nested CaseConstraints within WhenConstraints it is equivalent to AND (if this property equals value A AND this other property equals value B, then apply this constraint)

• CaseConstraint also allows other operators other than equals:

•NOT_EQUAL, GREATER_THAN_EQUAL, LESS_THAN_EQUAL, GREATER_THAN, LESS_THAN, and HAS_VALUE (has value means has any value)

35


•AlphaNumericPatternConstraint •AlphaPatternConstraint •AnyCharacterPatternConstraint •CharsetPatternConstraint •NumericPatternConstraint •AlphaNumericWithBasicPunc •AlphaWithBasicPunc •NumericWithOperators •FixedPointPatternConstraint • IntegerPatternConstraint•DatePatternConstraint•BasicDatePatternConstraint•FloatingPointPatternConstraint

•PhoneNumberPatternConstraint •TimePatternConstraint •Time24HPatternConstraint •UrlPatternConstraint •NoWhitespacePatternConstraint •JavaClassPatternConstraint •EmailAddressPatternConstraint •TimestampPatternConstraint •YearPatternConstraint •MonthPatternConstraint •ZipcodePatternConstraint

All Available default ValidCharactersConstraints (many have options to customize further):

36


• In addition to the above defined ValidCharacterConstraints, you can define your own ValidCharactersConstraint by defining the regex property “value” directly. Custom configurations must have a messageKey defined.

All Available default ValidCharactersConstraints (many have options to customize further):

<bean parent="Uif-InputField" p:instructionalText="custom valid characters constraint - this one accepts only 1 alpha character followed by a period and then followed by a number (a.8, b.0, etc)" p:propertyName="field1"> <property name="validCharactersConstraint"> <bean parent="ValidCharactersConstraint" p:value="^[a-zA-Z]\.[0-9]$" p:messageKey="validation.aDotNumTest"/> </property></bean>

Bonus Exercise: Change one of your InputFields to use a customized ValidCharactersConstraint that you define the regex for (just set messageKey anything – configuring messages and messageKeys is an different topic entirely)

Let’s demonstrate some KRAD Action Components


Lab 3: Actions

Lab Objectives

Understand how to setup an action that invokes a method on the server in our Controller

Setup an action that calls a simple js function

Learn about different action options

38

Lab 3 Actions

Now that we have the page setup with some controls and validation lets set up some buttons

Due to time constraints this lab will not save to a db, invoke any service, or submit to workflow on the controller, as you would normally do in a real scenario

However, we will be manipulating the form on the server and sending it back

KRAD Actions can be• A server call to the method on your controller• A call to a javascript function• A mixture of both – js before server call, the server call, and js after

the server call

39

Instructions

1) Open up the file view definition file TrainingApplicationView-Lab3.xml 2) Find the commented out “footer” property in the Page Training-CollegeApplicationPage (these are items of the Page’s footer – this is where we will be placing our actions, but Action components can be placed in ANY group) . Uncomment out the footer.

3) You’ll notice we have two items here a “Uif-PrimaryActionButton” and a “Uif-ActionLink” – these are both Action components; we are going to add some properties to them. For the button we want to make a call to a method on the server, give it an appropriate label, and turn on client-side validation for this button.

Set the following properties:p:methodToCall=“submit” - we will be calling the “submit” method on the

controllerp:actionLabel=“Submit” – the name of the buttonp:performClientSideValidation="true“ - this will perform client-side

validation on all fields we are submitting to catch validation issues before anything is sent to the server

(sidenote: the @{!#view.readOnly} expression means only show this component when the view is not readOnly)

Lab 3 Actions

40

Instructions 4) For the actionLink lets add:

p:actionLabel=“Clear All”p:actionScript=“clearAll()” – this will be a method defined in our javascript file

5) Now find the additonalScriptFiles property and uncomment it. This property is pointing to an additional javascript file that we want the view to use. This javascript file will contain our clearAll function.

6) Open up the script file and find the clearAll() function. Uncomment the code inside the function – this code is a js call that uses jQuery to select the form’s fields and clears them.

7) Now lets open of the Controller class “TrainingApplicationController.java” . In here there is a method called submit, uncomment this method. The method does the following: changes the View to readOnly and adds a message to the messageMap (this will display this message on the screen). Now add the following tag directly above the method:

@RequestMapping(method = RequestMethod.POST, params = "methodToCall=submit")

This tag is important! This method expects data to come from a post, and its methodToCall name to be submit. When this methodToCall name is a match this is the method that will be called on the controller. Note that the method to call name is the same as the Java method signature name.

8) Start your server and click on your new action components – the button should invoke the method on the server and the link should clear all your form data.

Lab 3 Actions

Solution:

42


Lab 3 Actions

<property name="footer"> <bean parent="Uif-FooterBase"> <property name="items"> <list> <bean parent="Uif-PrimaryActionButton" p:render="@{!#view.readOnly}" p:actionLabel="Submit" p:methodToCall="submit" p:performClientSideValidation="true"/> <bean parent="Uif-ActionLink" p:render="@{!#view.readOnly}" p:actionLabel="Clear all" p:actionScript="clearAll()"/> </list> </property> </bean> </property>

Advanced Features:

44


You can add a pre and post callback scripts to the action. This allows you to put any javascript functionality before or after a call to the server (or both – as seen below).

Extra Exercise 1: 1) Let’s add a preSubmitCall our “submit” button. Add the preSubmitCall property with the value “function(){return confirm(‘Submit?’);}”. preSubmitCall expects a return that returns true to continue proceeding with the action, and false if you need to halt processing.

2) Let’s add a successCallback with the value “alert(‘Submit Successful!’)”

3) Start the app and see what happens when you click the submit button with the new property options set

45


KRAD supplies a few different looks for actions by using the following parent beans:

Uif-PrimaryActionButton Uif-SecondaryActionButton Uif-PrimaryActionButton-Small Uif-SecondaryActionButton-Small Uif-ActionLink

Actions can even have images in them by setting the actionImage property (url) and actionImagePlacement property (string - TOP, BOTTOM, LEFT, RIGHT, or IMAGE_ONLY) to place the image in relation to your actionLabel.

Extra Exercise 2: 1) Using what you have learned about actions create your own Action component of your choosing that does anything!

2) Start the app and see what happens when you click your new action

Making things appear and disappear like a magician


Lab 4: Progressive Disclosure

Lab Objectives

We’ll cover Progressive Disclosures and Conditional Refreshes

What are they and how can they be used

Hands-on: Adding a progressive disclosure to the form

Configuration options

47


Progressive Disclosures - What are they?

Allows fields and groups to be shown or hidden based on some condition (i.e. a different field’s value)

48


Progressive Disclosures - How can they be used?

Displaying fields and groups only when they are needed

Delay sending of data until it’s needed

49


Progressive Disclosures - How to use them?

<bean parent="Uif-InputField" p:label="Are you on a diet " p:propertyName="field34"> <property name="control"> <bean parent="Uif-HorizontalRadioControl"> <property name="options"> <list> <bean parent="Uif-KeyLabelPair" p:key="yes " p:value="Yes" /> <bean parent="Uif-KeyLabelPair" p:key="no " p:value="No" /> </list> </property> </bean> </property></bean>

<bean parent="GenericTextField" p:label="Describe your Diet:"p:progressiveRender="field34 eq 'yes'" p:propertyName="field35" />

50


Component Refreshes - What are they?

Allows component to be updated when the form changes

51


Component Refreshes - How can they be used?

Change the disabled or read-only state of a component

Change the options for a control

Refresh content for a control when another control changes

use simpler refreshWhenChanged

52


Component Refreshes - How to use them?<bean parent="GenericTextField" p:propertyName="field88" p:label="Food Type">

<property name="control"> <bean parent="Uif-DropdownControl"> <property name="options"> <list> <bean parent="Uif-KeyLabelPair" p:key="Fruits" p:value="Fruits"/> <bean parent="Uif-KeyLabelPair" p:key="Vegetables" p:value="Vegetables"/> </list> </property> </bean> </property></bean>

<bean parent="GenericTextField" p:propertyName="field89" p:label="Food Item"p:optionsFinderClass=“…FoodKeyValuesFinder“p:conditionalRefresh="field88 eq 'Fruits' or field88 eq 'Vegetables' "> <property name="control"> <bean parent="Uif-DropdownControl"/> </property></bean>

53


Component Refreshes - How to use them?<bean parent="GenericTextField" p:propertyName="field88" p:label="Food Type">

<property name="control"> <bean parent="Uif-DropdownControl"> <property name="options"> <list> <bean parent="Uif-KeyLabelPair" p:key="Fruits" p:value="Fruits"/> <bean parent="Uif-KeyLabelPair" p:key="Vegetables" p:value="Vegetables"/> </list> </property> </bean> </property></bean>

<bean parent="GenericTextField" p:propertyName="field89" p:label="Food Item"p:optionsFinderClass=“…FoodKeyValuesFinder“ p:refreshWhenChanged="field88"> <property name="control"> <bean parent="Uif-DropdownControl"/> </property></bean>

54


Instructions1) Open up the view definition file TrainingApplicationView-

Lab4.xml

2) Locate the bean with the label=“Campus”

3) Add a progressiveRender property so that this field is only rendered when the college is Art or Computer Science

55


Instructions1) Open up the view definition file TrainingApplicationView-

Lab4.xml

2) Locate the bean with the label=“Campus”

3) Add a progressiveRender property so that this field is only rendered when the college is Art or Computer Science

4) Hint: p:progressiveRender=“@{college eq 'art' or college eq 'csc‘}"

Solution:

57


Solution

Your code should look approximately like this: <bean parent="Uif-InputField-LabelTop" p:label="College" p:propertyName="college" p:required="true"> <property name="control"> <bean parent="Uif-DropdownControl"> <property name="options"> <list> <bean parent="Uif-KeyLabelPair" p:key="" p:value=""/> <bean parent="Uif-KeyLabelPair" p:key="art" p:value="Art"/> <bean parent="Uif-KeyLabelPair" p:key="bus" p:value="Business"/> <bean parent="Uif-KeyLabelPair" p:key="csc" p:value="Computer Science"/> <bean parent="Uif-KeyLabelPair" p:key="hist" p:value="History"/> <bean parent="Uif-KeyLabelPair" p:key="math" p:value="Math"/> </list> </property> </bean> </property> </bean>

<bean parent="Uif-InputField-LabelTop" p:label="Campus" p:propertyName="campus" p:progressiveRender=“@{college eq 'art' or college eq 'csc‘}"> <property name="control">

Advance Features:

59


progressiveRender

default (no other flags set)Content is sent initially and rendered as hidden on page load (if progressiveRender condition is false)

progressiveRenderViaAJAX=“true”Content is retrieved when component is rendered for the first time, then kept for future hide/show operations

progressiveRenderAndRefresh=“true”Content is retrieved each time the component is shown

Looking at various Collection layouts and options in KRAD


Lab : Collections

Lab Objectives

Understand what Collections are and how they can be used in UI

Setup Table Layout Collection

Configure some Collection options

61

Lab: Collections

Collections are lists of objects that are grouped together.There are 2 predefined layouts for collection groups in KRAD : TableLayout and StackedLayout.The layout managers for these different layouts has many options to change the way the collection groups behaveFunctions like adding and deleting from collections are already built in the KRAD frameworkTableLayout Collections allow for paging, sorting, grouping of rows, and totaling of numeric columns on the clientExample of TableLayout with a separate add line :

62

Instructions 1) Open up the view definition file TrainingApplicationView-Lab6.xml

2) Create a new bean named Training-StudentReferences using Uif-TableCollectionSection as parent. The Uif-TableCollectionSection uses a TableLayoutManager and has the RichTable widget set by default.

3) Set the following properties :•collectionObjectClass to the TrainingApplicationReference class (include package)•propertyName to ‘references’ – this must be a collection property on the collectionObjectClass

•headerText to ‘References’ •instructionalText to ‘Please list any references we can contact’•layoutManager.generateAutoSequence to ‘true’

4) Now we need to add the TrainingApplicationReference fields to the list of items in the collection group. Add an Uif-InputField in the items list of Training-StudentReferences the for each of the fields in the TrainingApplicationReference class.

5) Add this bean to the list of items in the Training-CollegeApplicationPage

6) Start the application and test the collection group

Lab: Collections

Solution:

64


Lab: Collections

<bean id="Training-StudentReferences" parent="Uif-TableCollectionSection"> <property name="headerText" value="References"/> <property name="instructionalText" value="Please list any references we can contact"/> <property name="layoutManager.generateAutoSequence" value="true"/> <property name="propertyName" value="references"/> <property name="collectionObjectClass" value="edu.sampleu.demo.kitchensink.TrainingApplicationReference"/> <property name="items"> <list> <bean parent="Uif-InputField" p:label="Name" p:propertyName="name" p:required="true"/> <bean parent="Uif-InputField" p:label="Phone" p:propertyName="phone" p:required="true"/> <bean parent="Uif-InputField" p:label="Address" p:propertyName="address"/> <bean parent="Uif-InputField" p:label="Relationship" p:propertyName="relationship" p:required="true"/> </list> </property> </bean>

Advanced Features:

66

Lab: Advanced Features

1) Set the property on the Training-StudentReferences collection to display the add line outside of the table.Hint : use the ‘layoutManager.separateAddLine’ and ‘layoutManager.addLineGroup.layoutManager.numberOfColumns’ properties

2) Add watermark text to the ‘phone’ item and validate the value with a consraint.Hint : use ‘watermarkText’ on the control property of the InputField add a PhoneNumberPatternConstraint.

3) Add a drop down control on the ‘relationship’ field. Add the following options : <property name="options"> <list> <bean parent="Uif-KeyLabelPair" p:key="friend" p:value="Friend"/> <bean parent="Uif-KeyLabelPair" p:key="co-worker" p:value="Co-Worker"/> <bean parent="Uif-KeyLabelPair" p:key="teacher" p:value="Teacher"/> </list> </property>

4) Add a StackedCollectionGroup for the ‘previousEducation’ property. Hint: Use Uif-Disclosure-StackedCollectionSection

KRAD makes it easy to handle HTML events in your webpage.


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

68

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

69

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

70

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…

71

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

72


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

73


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

75

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.

76

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.

77


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'});">

78


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.

79


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.

80


Extra Exercise 3-n: Create your own events

Use your imagination to create your own event handlers!

Looking at various Rich Message options in KRAD


Extra Lab : Rich Messages

Lab Objectives

Understand what Rich Messages are and how they can be used in UI

Setup some Rich Messages

Demonstrate different types of Rich Messages

82

Extra Lab: Rich Messages

Messages can be styled, including capability to support line breaks, rich text (fonts, colors, and other css) and images

Messages can include active links to other information (urls) or to other functions (actions) within the Kuali application or Rice infrastructure

Messages can include input fields (e.g. a dropdown choice embedded in a sentence).

This functionality is provided through the use of special tags wrapped with brackets (“[]”) within the message text (these characters must be escaped if needed within the message text)

Here are some of the places where Rich message text can be used

text (message) constraint and Instructional text checkbox and radio button items error messages (includes inline validation messages) - styling and links only hover help (tooltips) - styling and links only other help content (from help icon) - styling and links only headers (section titles, view header, page header, application header and footer content, banner content)

83

Instructions 1) Open up the view definition file TrainingApplicationView-Lab-RM.xml

2) Find the field that has a label p:label=“zip”

3) Add the following to the constraintText property of the input field "Only [color=red]digits[/color] allowed.“

This should add a constraint text for Zip with ‘digits’ in red color

4) Let’s add some more rich messagesFind the bean with label "Race/Ethnicity“ and change the instructional text to “Please select the [link='http://kuali.org']ethnicity/race(s)[/link] you most closely identify yourself as”

This should add an instructional text with a link in it

Extra Lab: rich messages

84

5) Now lets try a message with inlineComponent. Inline component allows for using placeholders in the message with the patternof [n]. With inline component we can then refer to a text field, link field, images, input fields

Find the bean with id=“Training-CollegeApplicationPage” and add the following bean as the last element after

<bean parent="Training-StudentReferences"/>

6) Start up your application and see the result of the rich messages you added

Lab: Rich Messages

<bean parent="Uif-Message"> <property name="messageText" value="Click [0] to get a full list of additional documents required."/> <property name="inlineComponents"> <list> <bean parent="Uif-Link" p:href="http://www.kuali.org" p:linkText="here"/> </list> </property> </bean>

Solution:

86


Lab: rich messages

<bean id="Training-CollegeApplicationPage" parent="Uif-Page"> <property name="headerText" value="Application Info"/> <property name="items"> <list> <bean parent="Training-CampusInfo"/> <bean parent="Training-StudentInfo"/> <bean parent="Training-StudentAddress"/> <bean parent="Training-StudentReferences"/>

<bean parent="Uif-Message"> <property name="messageText" value="Click [0] to get a full list of additional documents required."/> <property name="inlineComponents"> <list> <bean parent="Uif-Link" p:href="http://www.kuali.org" p:linkText="here"/> </list> </property> </bean>

Advanced Features:

88

Lab: Advanced Features

Within Rich Message text you can reference an external bean using an id. The pattern used is [id=‘beanId’]. This will put the component inline with the message content.

Besides the id, you can also specify other property values to override in the referenced bean. E.g

[id='Demo-SampleMessageInput3' propertyName=field12 required=false label='Label Text']

Look at the “other” checkbox option (that was added for this exercise) inside the race/ethnicity InputField for an example of this pattern.

You may have also noticed [b][/b] In one of the instructionalText properties. This is an example of html content tags.

See the next slide for a full description of all Rich Message text options available

89

[id=<component id> property1=value property2=value] insert component with id specified at that location in the message. You can also set/override properties of the component referenced through by specifying those additional properties (must be separated by spaces). Textual properties must be wrapped in single quotes.

[n] insert component at index n from the inlineComponent list.

[<html tag and properties>][/<html tag>] insert html content directly into the message content at that location, without the need to escape the <> characters in xml.

[color=<html color code/name>][/color] wrap content in color tags to make text that color in the message. This is the same as wrapping the content in a span with color style set.

[css=<css classes>][/css] apply css classes specified to the wrapped content . This is the same as wrapping the content in a span with the class property set.

[link=<href src>][/link] an easy way to create an anchor that will open in a new page to the href specified. This is the same as wrapping the content in an a tag with the target set as “_blank”.

[action=<action settings> data=<extra data>][/action] create an action link inline without having to specify a component by id or index. The options below MUST be in a comma separated list in the order specified. Specify 1-4 always in this order – for example, options CANNOT be skipped if you would like to only set methodToCall and ajaxSubmit, you must still set validateClientSide to its default value (note: this is parallel to how javascript functions with optional parameters are passed).

The options (in order) are: methodToCall(String) validateClientSide(boolean) - true if not set ajaxSubmit(boolean) - true if not set successCallback(js function or function declaration) - this only works when ajaxSubmit is

true

Goal: Ensure you have a working environment for the project 1 Lab 0: Confirm Working Training...

Documents

Transcript of Goal: Ensure you have a working environment for the project 1 Lab 0: Confirm Working Training...