Using the Kuali Student Configurable User Interface Framework

1,437 views
1,373 views

Published on

Kuali Student provides a rich, modular, and configurable user interface to support unique institutional needs surfaced on the user interface--data fields, headings, and groupings can be added, removed, progressively disclosed, etc. This configurability is supported by a User Interaction Framework (UIF) and a User Interaction Model (UIM). The framework (UIF) leverages Google Web Toolkit (GWT), and is the working code that will allow implementers to configure the user interface. The model (UIM) is documentation that specifies the behavior of modular user interface elements for the developers of the UIF; but also, for implementers of Kuali Student, it serves as an interface design guide for new functionality using the UIF. This session will give examples of and describe how the UIF and UIM support the work of the Kuali Student User Interface (UI) developers, Kuali Student User Experience Designers, and User Experience Designers for implementing institutions.

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,437
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • William: provide an example screen shot? Mention breadcrumbs
    User knowing where they are: breadcrumbs, page title, clearly indicated navigation
    Once the begin working, meaningful labels on forms, good instructions and clean messaging, and help when they need it.

    Configuration
    Customize field:
    Change label
    Change widget (to a widget that supports the data type)
    Constraints – requiredness, min/max chars.
    Remove fields
    Add fields – Thru dynamic attributes
    Change field labels - Change "Course Number" to say "Subject Number" on the Course Id component for
    Remove/change headers
    Sections: Take almost all the fields and put them on a single screen for data entry so it is more like MIT's current course screen.
    Functionality: versioning, LO categories
  • On a wiki
    Not a configuration guide
    Defines how things behave and look
    UIM TOC (v2)
    Page template
    UIF takes UIM and based on configuration needs, makes some components configurable.
  • What’s in it?
    On a wiki
    Not a configuration guide
    Defines how things behave and look
    UIM TOC (v2)
    Page template
    UIF takes UIM and based on configuration needs, makes some components configurable.
    In-depth example: Sections and fields
    Screenshots with call outs
    Show UIM evolved page
    Show specific UIM pages for above
    Show real working example
  • What are the pieces
    Where the UIF fits in the “grand scheme”
    What does the UIF contain?
    Where are the boundaries of the UIF?
  • Simple View of our technical architecture for Kuali Student UIF fits at the top of this stack and interacts directly with the user It contains the controllers, views, configurers. It also contains theming such as css and images. It also talks to underlying business services and additional utility services such as the message service These business services talk to our core entity services such as the lu service Everything on the diagram that has the wrench and screwdriver icon is configurable within KS I will be talking about how to configure some aspects the UIF today
  • This is a screenshot of KS as it will appear in R1.1 I have highlighted the different parts of the screen, and their respective controller The LayoutController controls the display of the views, but also provides the object header and menu for navigation
  • You do this easily by using the Rice Message utility without touching any code
  • Once you have your intitution’s configuration project created
  • Changes to the constraints also give you on the fly UI validation against those constraints when the user interacts with your new field
  • CurriculumHomeConfigurer
    CourseConfigurer
    ViewCourseConfigurer
    CourseSummaryConfigurer
    MajorEditConfigurer
    MajorViewConfigurer
    VariationEditConfigurer
    VariationViewConfigurer
  • Using the Kuali Student Configurable User Interface Framework

    1. 1. 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 College William Washington - User Experience Architect, University of Washington
    2. 2. open source administration software for education 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
    3. 3. open source administration software for education 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
    4. 4. open source administration software for education 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
    5. 5. open source administration software for education 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.
    6. 6. open source administration software for education 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
    7. 7. open source administration software for education UIM: Examples • UIM structure - link • Individual page examples – Example: Tables – Example: Search & Select, Search Results – Example: Multiplicity – Example: Sections and Fields
    8. 8. open source administration software for education UIM: Example: Sections and Fields Field (FieldDescriptor) Section (GroupSection) Requiredness Explanatory Help Label Input Instructions Watermark Constraints Requiredness (by state)
    9. 9. open source administration software for education 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
    10. 10. open source administration software for education UIF: Architecture
    11. 11. open source administration software for education UIF: Components SectionView (VerticalSectionView) LayoutController (MenuSectionController) Field (FieldDescriptor) Section (GroupSection)
    12. 12. open source administration software for education 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
    13. 13. open source administration software for education 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
    14. 14. open source administration software for education UIF: Examples • Field Configuration – Change label – Add a new field – Advanced field configuration • Section configuration – Change field location – Change section location
    15. 15. open source administration software for education 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”));
    16. 16. open source administration software for education UIF: Changing Field Labels - Example • Before • After
    17. 17. open source administration software for education UIF: Changing Field Labels - Example
    18. 18. open source administration software for education 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
    19. 19. open source administration software for education 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>
    20. 20. open source administration software for education UIF: Add a new field 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")); …
    21. 21. open source administration software for education UIF: Add a 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>
    22. 22. open source administration software for education UIF: Add a new field 4. Test: • Note the field’s size and required indicator – the field is generated based on its metadata: maxLength = 4 and minOccurs = 1
    23. 23. open source administration software for education 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);
    24. 24. open source administration software for education 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));
    25. 25. open source administration software for education 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());
    26. 26. open source administration software for education 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
    27. 27. open source administration software for education 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
    28. 28. open source administration software for education Q & A

    ×