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 Developer 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 Beyond KRAD 1.1, 1.2

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 Entity(POJO) Data Dictionary ORMMapping ENTITY_T Lookups and Inquiries MaintenanceDocuments TransactionalDocuments Workflow(KEW)

7. Overview of KNS Components Data Dictionary <bean id="Country" parent="BusinessObjectEntry"> <property name="businessObjectClass" value="org.kuali.rice.kns.bo.CountryImpl"/> <property name="inquiryDefinition"> <ref bean="Country-inquiryDefinition"/> </property> <property name="lookupDefinition"> <ref bean="Country-lookupDefinition"/> </property> <property name="titleAttribute" value="postalCountryCode"/> <property name="objectLabel" value="Country"/> <property name="attributes"> <list> <ref bean="Country-postalCountryCode"/> <ref bean="Country-postalCountryName"/> <ref bean="Country-alternatePostalCountryCode"/> <ref bean="Country-postalCountryRestrictedIndicator"/> <ref bean="Country-active"/> </list> </property> </bean>

8. Overview of KNS Components Data Dictionary <bean id="Country-postalCountryCode" parent="AttributeDefinition"> <property name="name" value="postalCountryCode"/> <property name="forceUppercase" value="true"/> <property name="label" value="Country Code"/> <property name="shortLabel" value="Country Code"/> <property name="maxLength" value="2"/> <property name="summary" value="Postal Country Code"/> <property name="description" value="The code uniquely identify a country."/> <property name="required" value="true"/> <property name="validationPattern"> <bean parent="AlphaNumericValidationPattern"/> </property> <property name="control"> <bean parent="TextControlDefinition" p:size="2"/> </property> </bean>

9. Overview of KNS Components Lookup

10. Overview of KNS Components Inquiry

11. Overview of KNS Components Maintenance

12. Overview of KNS Components Maintenance

13. Overview of KNS Components Transactional <kul:documentPagedocumentTypeName="KualiGeneralErrorCorrectionDocument“ htmlFormAction="financialGeneralErrorCorrection" renderMultipart="true" showTabButtons="true"> <html:hidden property="document.nextSourceLineNumber"/> <html:hidden property="document.nextTargetLineNumber"/> <kul:hiddenDocumentFields /> <kul:documentOverview editingMode="${KualiForm.editingMode}"/> <fin:accountingLines editingMode="${KualiForm.editingMode}“ editableAccounts="${KualiForm.editableAccounts}"/> <fin:generalLedgerPendingEntries/> <kul:notes/> <kul:adHocRecipients/> <kul:routeLog/> <kul:panelFooter/> <kul:documentControlstransactionalDocument="true" /> </kul:documentPage>

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

15. What is KRAD? • Major focus: • Rich UI Support • More UI Flexibility • Improved Configuration and Tooling • Numerous smaller improvements • Lookups, Inquiries, & Maintenance Improvements • Improved Navigation

16. What is KRAD? • Inspiration • Numerous suggestions collected from projects and the community • Feedback from UI Designers • Kuali Student • Other Frameworks: Rails, Roo, Seam • Timeline • First release scheduled for Rice 1.1 (November 2011) • Continued work on major enhancements through Rice 1.2

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

18. KRAD Features – Rich UI jQuery in 3 minutes! • Just JavaScript! Place in <script> tag or script file • Selectors • select one or more DOM elements • Placed inside $() or jQuery() • Ex. ‘*’, ‘#id’, ‘.class’, ‘document’, ‘this’, ‘:text’ … • Methods • Syntax: $(selector).method() • html, val, css, width … • each, first, last, parent, children … • Events • Syntax: $(selector).bind(event, [data], fn) • blur, change, focus, … • Effects • Syntax: ${selector).effect • fadeIn, fadeOut, slideDown, show, hide • Miscellaneous • jQuery.get, jQuery.ajax, jQuery.getJSON, jquery.getScript, jquery.post …

19. 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])

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

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

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

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

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

25. 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

26. 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:

27. Progressive Disclosure KRAD Features – Rich UI Client Side Declare as ‘progressiveDisclosure’ in dictionary: Implement jQuery script to show/hide:

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

29. KRAD Features – Rich UI Other • Client side validation • Automatic translation of dictionary validation to client validation script • Text based button generation • Improved Calendar widget

30. 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 (without modifying core code)

31. KRAD Features – UI Flexibility Architecture Built using existing pieces of functionality No ‘object translation’ layer (dictionary->definitions->view) Uses fine grained tag files for rendering view Configured tag file and view object association Allow code access to modify definitions when necessary

32. KRAD Features – UI Flexibility Concepts * With the exception of Elements, all concepts are containers that hold certain items View – Rendering of information, fields, and other items to a user (the HTML page: header, body, footer, style, navigation) Section – Grouping within the view (usually associated with a menu item, horizontal/vertical tab) Group – Grouping of the Sections items Field – An application attribute or action and related elements (label, control, lookup, constraint, …) Field Group – A grouping of Fields Element – The basic renderable items (text, control, button, image, link, …) *

33. KRAD Features – UI Flexibility Concepts Concept Wireframe

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

35. 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 • StackedView: Renders sections in vertical flow (with optional tabs), single page • TabbedView: Provides page navigation with horizontal tabs

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

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

38. Layout Managers KRAD Features – UI Flexibility • Renders 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

39. 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 spring definition and tag file handler

40. KRAD Features – UI Flexibility Sections Contain a title, one or more groups, and zero or more actions Associated errors and rollup of group errors

41. KRAD Features – UI Flexibility Groups Contain a title, sub-title, one or more fields, zero or more actions Associated errors and rollup of field errors

42. KRAD Features – UI Flexibility Fields • Usually associated with an attribute • Pull in information from dictionary attribute entry, but can override any settings (label, control, lookup, …) • Include many additional properties: • hidden, readOnly, lookupReadOnly, colspan, width, align, labelPlacement, required, total, triggerOnChange, …

43. KRAD Features – UI Flexibility Fields • Examples: • FieldDefinition, LabelFieldDefinition (attribute) • ActionFieldDefinition • TextFieldDefinition, HeaderFieldDefinition • BlankFieldDefinition • Custom Fields can be created with Spring definition and associated tag file handler

44. Field Groups KRAD Features – UI Flexibility Contains a label and one or more fields By default uses BoxLayoutManager (Horizontal or Vertical layout, single table cell for fields)

45. KRAD Features – UI Flexibility Elements • LinkDefinition – HTML Link MessageDefinition – HTML Text

46. KRAD Features – UI Flexibility Elements • ControlDefinition – HTML Control • ImageDefinition – HTML Image ActionDefinition – HTML Image Submit

47. KRAD Features – UI Flexibility Elements New Elements can be added with Spring definition and tag file handler

48. KRAD Features Config & Tools • Use ‘convention over configuration’ where possible • Provide better error checking and reporting • Standalone dictionary startup & validation • Support dictionary reload • Dictionary GUI • Graphical interface to dictionary • Provides searches, auto-complete, …

49. KRAD Features Config & Tools • Tools • Create entity (bo class, dictionary, mapping) • Create document (document class, dictionary, mapping, action class & form, optional authorizer or presentation controller) • Generate Constraints • Message GUI • Graphical interface for specifying messages (keys, text, constants, …)

50. KRAD Features Other Improvements • Multiple Lookups & Inquiries for an entity • Lookup – ‘basic’, ‘advanced’, … • Inquiry – ‘short’, ‘full’, … • Dynamic Attributes • Define attribute in dictionary without entity/table changes • Table support for labels