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
2
Instructions 2) double-click the green leaf icon on (Spring Tool Suite)
3) Right click on the krworkshop project and select refresh
Lab 0: Confirm Working Training Instance
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
Lab 0: Confirm Working Training Instance
4
Instructions 6) Open Chrome and Select ‘KRAD Workshop Page’ 7) Login as admin (only username is required)
Lab 0: Confirm Working Training Instance
5
Instructions 8) Click on the ‘Kuali University - Lab 1: Components and Containers’ link
9) Confirm a spare but working page
Lab 0: Confirm Working Training Instance
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
Lab 1 Containers and Groups
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
Lab 1 Containers and Groups
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)
Lab 1 Containers and Group
12
Instructions 4) Uncomment and add page title 'Application Info’
5) Uncomment Campus Info Section to your page
Lab 1 Containers and Group
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’
Lab 1 Containers and Group
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
Lab 1 Containers and Group
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
Lab 1 Containers and Group
16
At this point your page should approximately look like this (minus styling)
Lets continue to build this form out
Lab 1 Containers and Group
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’
Lab 1 Containers and Group
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
Lab 1 Containers and Group
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’
Lab 1 Containers and Group
Solution:
21
Your page should look approximately like this (yours will have different styling):
Lab 1 Containers and Group
Starting with our inputs, we will add some constraints to enable client-side validation
Kuali University: Apply Now
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)
Lab 2 Validation and Constraints
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.
Lab 2 Validation and Constraints
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:
Lab 2 Validation and Constraints
<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 :
Lab 2 Validation and Constraints
<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
Lab 2 Extra Info and Exercises
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
Lab 2 Extra Info and Exercises
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
Lab 2 Extra Info and Exercises
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
Lab 2 Extra Info and Exercises
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
Lab 2 Extra Info and Exercises
•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
Lab 2 Extra Info and Exercises
• 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
Kuali University: Apply Now
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
Partial Solution - Your code should look approximately like this:
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
Lab 3 Extra Info and Exercises
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
Lab 3 Extra Info and Exercises
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
Kuali University: Apply Now
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
Lab 4: Progressive Disclosure
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
Lab 4: Progressive Disclosure
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
Lab 4: Progressive Disclosure
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
Lab 4: Progressive Disclosure
Component Refreshes - What are they?
Allows component to be updated when the form changes
51
Lab 4: Progressive Disclosure
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
Lab 4: Progressive Disclosure
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
Lab 4: Progressive Disclosure
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
Lab 4: Progressive Disclosure
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
Lab 4: Progressive Disclosure
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
Lab 4: Progressive Disclosure
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
Lab 4: Progressive Disclosure
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
Kuali University: Apply Now
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
Partial Solution - Your code should look approximately like this:
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.
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
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
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
73
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
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
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'});">
78
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.
79
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.
80
Lab 6: Extra Exercises
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
Kuali University: Apply Now
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
Partial Solution - Your code should look approximately like this:
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