Using the Kuali Student Configurable User Interface Framework

open source administration software for education

next generation student system

Using the Kuali Student Configurable User Interaction Model & Framework

Brian Smith - User Interaction Development Lead, San Joaquin Delta CollegeWilliam Washington - User Experience Architect, University of Washington

http://creativecommons.org/licenses/by/3.0/


Outline

• Kuali Student Needs: User Experience & Customization• Solution: Reusable Components• Implementation: User Interaction Model & Framework• User Interaction Model: Overview & examples• User Interaction Framework: Overview & examples• Next Steps



Kuali Student Needs

• A great user experience– Clear navigation, headers, input labels, instructions,

messaging, and help• Institutional configuration

– Fields and field labels• Customize fields• Add/Remove fields

– Headers – Sections (Pages)– Functionality



Solution

• Reusable & configurable user interface elements– Small “components”

• Buttons, Links• Input fields (e.g. radio button, checkbox, text input)

– Big “composites” • Tables• File Upload tool; Commenting tool

• Benefits– Consistent behavior across the application– Consistent look and feel– Reusable code



Implementation

• User Interaction Model (UIM)– Documentation that specifies the behavior of modular

user interface elements for the developers of the framework

– Interface design guide for implementers and code contributors.

• User Interaction Framework (UIF)– Leverages Google Web Toolkit (GWT), and is the

working code that will allow implementers to configure the user interface.



User Interaction Model (UIM)

• Specifies the behavior and display of modular user interface elements

• Evolving UI guide for implementers and contributors

• UIM doesn’t describe how to configure UI elements



UIM: Examples

• UIM structure - link• Individual page examples

– Example: Tables – Example: Search & Select, Search Results– Example: Multiplicity– Example: Sections and Fields

https://wiki.kuali.org/display/KULSTG/UIM+-+Table

https://wiki.kuali.org/display/KULSTG/UIM+-+Search+and+Select

https://wiki.kuali.org/display/KULSTG/UIM+-+Search+and+Select

https://wiki.kuali.org/download/attachments/146735306/results%20anatomy.jpg

https://wiki.kuali.org/display/KULSTG/UIM+-+Multiplicity



UIM: Example: Sections and Fields

Field (FieldDescriptor)

Section (GroupSection)

RequirednessExplanatory Help

Label

Input

Instructions

Watermark

Constraints

Requiredness (by state)



User Interaction Framework (UIF)

• The GWT framework for Kuali Student which presents and handles our layouts and data

• The UIF is responsible for navigation, controllers, views, and laying out fields and widgets on the screen – the functional requirements of the UI

• Also responsible for interacting with the data model, and services through RPC calls



UIF: Architecture


UIF: Components

SectionView (VerticalSectionView)

LayoutController (MenuSectionController)

Field (FieldDescriptor)

Section (GroupSection)



UIF: Components

• FieldDescriptors – Fields that map to a data element that exists in the data dictionary– Most fields are auto-generated based on their dictionary metadata, but can be

further customized• Section

– Contain sections, which themselves contain fields– SectionViews are sections that are also Views

• LayoutControllers– Contain Views– Handle the layout, navigation, and breadcrumbs for a defined section

automatically– The LayoutController is also responsible for sending and receiving data from the

server– An example of a LayoutController is the CourseProposalController



UIF: How To Configure

• Defining Fields and Sections on a screen– Course and Program screens use a configurer class to define the fields

displayed on the screen– To override: define a configurer which extends the default configurer and

override its methods to change the content that appears on the screen. Then, use GWT deferred binding to use your custom configurer instead.

• Customizing widgets– Similarly, some widgets in the UIF can be customized by institutions

through deferred binding • Visual Design Theme

– The existing Theme can also be overridden in a similar fashion through deferred binding



UIF: Examples

• Field Configuration– Change label– Add a new field– Advanced field configuration

• Section configuration– Change field location– Change section location



UIF: Changing Field Labels

• Changing a Label– A field is defined with a message key that

corresponds with messages in the DB

– You can change the value of the message in the DB using SQL or by using the Rice message utility for KS

– Alternatively, hardcode the text in the code when you override the configurer, if you do not need to change the text during runtime

addField(section, COURSE + "/" + COURSE_TITLE, generateMessageInfo(“courseTitle”));



UIF: Changing Field Labels - Example

• Before

• After



UIF: Changing Field Labels - Example



UIF: Additional Field Label changes - Example

• Change additional labels of a field– “-instruct” for instructions – “-help” for help – “-watermark” for watermarks in text fields– “-constraints” for constraint help text below the

input field



UIF: Add a new field

1. Add a new data field in your custom dictionary extension/override

<bean id="org.kuali.student.lum.course.dto.CourseInfo" parent="org.kuali.student.lum.course.dto.CourseInfo-parent" > <property name="attributes"> <list merge="true"> <ref bean="courseInfo.newField" /> </list> </property></bean><bean id="courseInfo.newField" parent="baseString"> <property name="name" value="newField" /> <property name="minOccurs" value="1" /> <property name="maxLength" value=“4" /> <property name="dynamic" value="true" /></bean>




2. Add the field using its field key to a section in your custom configurer

VerticalSectionView section = initSectionView(CourseSections.COURSE_INFO, LUConstants.INFORMATION_LABEL_KEY); …addField(section, COURSE + "/" + "newField", generateMessageInfo("New Field"));…




3. Use your custom configurer, instead of the default one, in your gwt module through deferred binding

<replace-with class="edu.kuali.config.lum.lu.ui.client.course.configuration.SampleCourseConfigurer"> <when-type-is class="org.kuali.student.lum.lu.ui.course.client.configuration.CourseConfigurer"/> </replace-with>




4. Test:

• Note the field’s size and required indicator – the field is generated based on its metadata: maxLength = 4 and minOccurs = 1



UIF: Advanced Field Configuration

• You can change the field’s widget:

• You can also change its binding (when there are differences between how data is stored and how it is represented in the UI; ie, the translation)

FieldDescriptor addField(Section section, String fieldKey, MessageKeyInfo messageKey, Widget widget)

fieldDescriptor.setModelWidgetBinding(myNewBinding);



UIF: Change Field Location

• Simply change the order of the fields in a section

• You can also delete fields from a section by removing the addField call

addField(section, COURSE + "/" + COURSE_TITLE, generateMessageInfo(LUConstants.COURSE_TITLE_LABEL_KEY)); addField(section, COURSE + "/" + TRANSCRIPT_TITLE, generateMessageInfo(LUConstants.SHORT_TITLE_LABEL_KEY));



UIF: Change Section Location

• Move a section by changing the order of the addSection calls on its parent section

• Change the menu items by moving/deleting the addMenuItem calls

• Result:

layout.addMenuItem(sections, generateCourseInfoSection());layout.addMenuItem(sections, generateGovernanceSection());layout.addMenuItem(sections, generateCourseLogisticsSection());



UIF: Configurable UI Areas

• Following similar configuration patterns shown, the following areas are also configurable (with some divergence)– Curriculum Management Home– Course Proposal– Course Summary Table– View Course– View and Edit Program Major– View and Edit Program Specialization



Next Steps

• Planned UIM improvements– General design principles– Page flow patterns & principles– Page layout templates and patterns

• Planned UIF improvements– Investigating GWT 2.1 and MVP framework– Improved documentation

• KS is looking at complementing the UIF with KNS/KRAD for the development of some KS administration screens in it’s next release



Q & A


Technology

Using the Kuali Student Configurable User Interface Framework