KRAD - New Features and Improvements for the Rice Application Development Framework

1. KRAD - New Features and Improvements for the Rice Application Development Framework

2. Introduction Scott Gibson Rice Development Manager University Of Maryland Jerry Neal Rice Developer Indiana University

3. Overview Why this Presentation? Benefits of the KNS (KRAD) Overview of KNS Components What is KRAD? Overview of KRAD Features Questionnaire & Questions

4. Why this Presentation? Community Involvement Early Feedback

5. Benefits of KNS (KRAD) Decreased development time Increased code reuse (more maintainble) Standard development paradigm (training) Standard Look and Feel Integration with other Rice modules (KEW, KIM) Accessibility Designed for Extensibility

6. Overview of KNS Components Concept Table Entity(POJO) Data Dictionary ORMMapping ENTITY_T Lookups and Inquiries MaintenanceDocuments TransactionalDocuments Workflow(KEW) IDM (KIM)

7. Overview of KNS Components Data Dictionary

8. Overview of KNS Components Data Dictionary

9. Overview of KNS Components Lookup

10. Overview of KNS Components Lookup

11. Overview of KNS Components Inquiry

12. Overview of KNS Components Inquiry

13. Overview of KNS Components Maintenance

14. Overview of KNS Components Maintenance

15. Overview of KNS Components Maintenance

16. Overview of KNS Components Maintenance

17. Overview of KNS Components Transactional

18. Overview of KNS Components Transactional

19. What is KRAD? • Stands for: “Kuali Rapid Application Development” • Major effort to enhance and improve the KNS • More Flexible, Richer … Faster! • Eventual rename of KNS Rice module

20. What is KRAD? • Major focus: • Rich UI Support • More UI Flexibility • Improved Configuration and Tooling • Better alignment with Kuali Student • Numerous smaller improvements • Lookups, Inquiries, & Maintenance Improvements

21. What is KRAD? • Inspiration • Numerous suggestions collected from projects and the community • TRC Working Group • Feedback from UI Designers • Kuali Student • Other Frameworks: Fluid, Rails, Roo, RSF, Seam • Timeline • First release scheduled for Rice 1.1 • Continued work on major enhancements through Rice 1.2

22. KRAD Features – Rich UI • Simplifies HTML Document Traversing & Event Handling • Built in Cross Browser support • Lightweight and Non-Impacting • Rich Widgets: • Dialog, Button, Accordion, Autocomplete … • Interactions and Effects: • Draggable, Droppable, Show, Hide, Toggle …

23. KRAD Features – Rich UI LightBox • Keeps user on page (reduces number of tabs/windows) • Display div content or iframe • Draggable, Resizable, Modal • Built using jQuery Dialog • Ex. $(selector).dialog([options])

24. KRAD Features – Rich UI LightBox Lightbox support for Inquiries, Lookups, Confirmations, and expanded Text Areas

25. KRAD Features – Rich UI Messages Ex. Constraint Message Constraint Message – displays field restrictions Defined in dictionary:

26. KRAD Features – Rich UI Messages Ex. Watermark Watermark – displays in text field (ex. date format) Defined in dictionary:

27. KRAD Features – Rich UI Messages Ex. Save Message Growls – notifications about events Built in growls for Save & Route Use jQuery for custom notifications:

28. KRAD Features – Rich UI Messages • Other Messages: • Roll over field level help • Always displayed field Summary • Page submit/load notification

29. Progressive Disclosure KRAD Features – Rich UI • Show information when needed • Show/Hide • Sections (Tabs) • Groups (Parts of Tab) • Fields • Field Group (Grouping of fields) • Server & Client side support

30. Progressive Disclosure KRAD Features – Rich UI Server Side • Implement PresentationController: • Also supports conditional read-only & required • Called on page submits, can define ‘trigger’ field in dictionary for more dynamic behavior:

31. Progressive Disclosure KRAD Features – Rich UI Client Side Declare as ‘progressiveDisclosure’ in dictionary: Configure show conditions on Field or write custom jQuery script:

32. KRAD Features – Rich UI Ajax Ex. Chart Description Dynamic Read-Only Content – additional read-only information displayed under a field Defined in the dictionary:

33. KRAD Features – Rich UI Themes

34. KRAD Features – Rich UI Themes

35. KRAD Features – Rich UI Themes

36. KRAD Features – Rich UI Themes

37. KRAD Features – Rich UI Themes

38. KRAD Features – Rich UI Themes

39. KRAD Features – Rich UI Other • Client side validation • Automatic translation of dictionary validation to client validation script • Improved Navigation (breadcrumbs) • Text based button generation • Auto-complete Fields • Improved Calendar widget

40. KRAD Features – UI Flexibility Goals More layout flexibility for Inquiry and Maintenance Screens Ability to generate all screens (transactional documents) Support different look and feels (e.g. KS) Extensible and Customizable , no ‘Black Box’

41. KRAD Features – UI Flexibility Architecture Built using existing pieces of functionality (generalizing maintenance framework) Simplified architecture with reduce layering (no ‘object translation’ layer) Uses fine grained tag files (‘HTML Templates’) for rendering view No hard-coded associations (object – tag ), everything configured through spring Allow code access to modify definitions when necessary

42. KRAD Features – UI Flexibility Architecture Object Dictionary Definition Template Dictionary Definition Template Object Object Dictionary Definition Template Dictionary Definition Template Custom Object Dictionary Definition Template Core Framework Comprised of ‘Building Blocks’

43. KRAD Features – UI Flexibility Concepts View – Rendering of information, fields, and other items to a user (the HTML page: header, body, footer, style, navigation) Group– Grouping of the items (conceptually have different levels: Page, Section, Group, Field Group) Field – An application attribute or action and related elements (label, control, lookup, constraint, …) Widget– A element that encompasses functionality within the UI (calendar, breadcrumbs, quickfinder)

44. KRAD Features – UI Flexibility Concepts Concept Wireframe

45. KRAD Features – UI Flexibility Concepts Ex. Disbursement Voucher

46. KRAD Features – UI Flexibility Views • Responsible for overall layout and style • Navigation, Header/Footer, Body (Sections) • Can be single or multi paged • KRAD View Types • StackedViewType: Renders sections in vertical flow (with optional tabs), single page • TabbedViewType: Provides page navigation with horizontal tabs

47. KRAD Features – UI Flexibility Views • MenuViewType: Provides page navigation through a menu • WizardViewType: Provides sequenced page navigation through the use of buttons • DocumentStackedViewType & DocumentTabbedViewType: Extends base view types for rendering standard document header/footer content and sections • View Type + Style = View

48. KRAD Features – UI Flexibility Views A view is associated with an application entity in the dictionary

49. Layout Managers KRAD Features – UI Flexibility • Layout content for a Section, Group, or Field Group • KRAD Layout Managers • GridLayoutManager: Arranges components in table cells with auto wrapping ([options: numberOfColumns, autoLabel, labelPlacement]) • BoxLayoutManager: Arranges components one after another vertically or horizontally

50. Layout Managers KRAD Features – UI Flexibility • TableLayoutManager: Arranges components in a collection table • MaintenanceLayoutManager: Special GridLayoutManager that adds additional fields • Custom Layout Managers can be created with dictionary definition and tag file handler