A Designer's Intro to Oracle JET
- 1. Session ID: Prepared by: A Designer’s Introduction to the Oracle JET Framework 4392 @JRSim_UIX @LaurenBeatty13 John Sim and Lauren Beatty
- 2. 2 About Fishbowl Solutions Experience ■ 800+ projects since founding in 1999 ■ Oracle Gold Partner ■ Oracle Cloud Standard Partner ■ Google for Work Partner Expertise ■ Portals and Content Management ■ User Experience ■ Enterprise Search
- 3. 3 Fishbowl Consulting Services + WebCenter Content ̶ Document Mgmt ̶ Records Mgmt ̶ Digital Asset Mgmt ̶ Web Content Mgmt + WebCenter Portal ̶ Employee Intranets ̶ Vendor or Partner Extranets ̶ Customer Portal + Google Search – Connectors for WebCenter, Liferay Portal and YouTube – Resale, Implementations, Optimizations + Enterprise Support + Installations, Configurations, Performance Tuning, Solution Design, Development, Implementations… ̶ Image & Process Mgmt ̶ Document Capture ̶ Forms Recognition ̶ Content Consolidation
- 4. 4 Business Solutions We Deliver Enterprise Search across Business Systems Jumpstart services and software leveraging the Google Search Appliance Enterprise Information Strategy Consulting services for discovery and go-forward recommendations on repositories, integrations, delivery channels, and business process flow Quality Document Management & Control Simple, robust software to streamline document authoring and review and automate overall policy and procedure management Self-Service Portals Jumpstart services and software for Employee Intranets, Partner Extranets and Global Customer/Supplier Portals User Experience & Mobile Design and Development Responsive and adaptive design for desktop and mobile
- 5. Who we are: • John---Oracle ACE • Senior Developer at Fishbowl Solutions • Expertise in UX/UI • Associate Software Consultant • MEAN stack • Expertise in Learning/Exploring
- 6. Overview • What is Oracle JET? • Features and Benefits • JET’s modularity • Using Oracle JET QuickStart Template and Yeoman • JET app with Oracle Cloud Documents REST API 6
- 7. What is Oracle JET? • JavaScript Extension Toolkit • Modular Front-End Framework • Tried and True JS Libraries • Pre-Built UI Components
- 8. Features and Benefits • Utilizes popular Open Source Libraries • Flexible! • Accessibility and Internationalization • 70 UI Components • 2-way Data Binding with Knockout • Powerful Routing System 8
- 9. Oracle JET Framework Based on MVVM design: 9
- 10. JET’s Modularity JET is built on a number of battle-tested JS libraries: 10
- 11. Knockout 11 • 2-way Data Binding: Model View View-Model (MVVM) • Automatic UI refresh—when the data changes, UI refreshes automatically (and vice-versa) • Straightforward, readable syntax
- 12. RequireJS 12 • JavaScript file and module loader • Loads only the libraries and modules needed • As applications get larger, loading of resources gets more complicated • Improves speed and quality of code • Essentially: loads your modules and files only when they’re needed!
- 14. Top-level RequireJS 14 • In Main.js of QuickStart • Similar code in individual ViewModel JS files • Loads the components you need
- 15. Oracle JET QuickStart Template 15
- 16. 90% of Oracle JET
- 19. Getting Started with Oracle Jet npm install ALL OF THE THINGS! 19 • Grunt • Grunt-cli • Bower • Git • Yeoman • generator-oraclejet (Yeoman generator) Need help? http://www.npmjs.com
- 21. OR: Create a New JET Project in NetBeans 21
- 22. Video Magic 22
- 23. OOTB Project!
- 24. Responsive 24
- 25. Using The Cookbook Find the UI Component: 25
- 26. Copy the HTML 26
- 27. Copy the JS 27
- 28. Pro tip! QS template syntax in ViewModel is different: “define” vs. “require” and just return the ViewModel 28
- 29. Routing for SPA in JET 29
- 31. Routing Part III 31 In Header and off-canvas templates
- 32. Routing Part IV 32 In header.js
- 33. JET with Oracle Docs API 33
- 34. Oracle DoCS REST API
- 35. 35
- 36. The ViewModel 36
- 37. The ViewModel Part II 37
- 38. The ViewModel Part III 38
- 39. The View 39
- 40. Learning Resources • Knockoutjs.com • Knockmeout.net • Oracle JET cookbook! • Oracle JET QuickStart Template • JET videos • Oracle JET community • Oracle JET dev guide • Geertjan Wielenga’s blog • Github repo 40
- 41. Thank you! 41 • Please complete the session evaluation • Use the mobile app • We appreciate your feedback and insight! Come Visit Fishbowl Solutions at Booth #1028!
Editor's Notes
- #8: JET is a collection of Oracle and open-sourced JS libraries that make it as efficient as possible to build client-side applications that interact with (especially, but not limited to) Oracle products and services JET---developed for in-house use at Oracle---Open Source on Feb. 29 Modular---use only the components you want---swap them out for others! Not re-inventing the wheel---using lightweight, tested frameworks and libraries Pre-built UI Components---make building challenging items a snap---based on jQueryUI
- #9: Flexible---as I said, no components of Oracle JET are required; use what you like Accessibility: WCAG 2.0 (web content access. Guidelines) Internationalization: Compliance with Oracle National Language Support standards (i18n) Built in support for localization standards: Oracle translation services, bi-directional locales
- #10: Model: the application data: oj.Model, oj.Collection, oj.Events, oj.KnockoutUtils View: HTML and CSS (what we see); jQuery UI widgets View-Model: How those two interact: the client-side logic; KnockoutJS implements the ViewModel
- #14: In Main.js of the QuickStart template
- #20: You’ll need to install node first. You may have to update your node.js
- #22: In NetBeans (not as much fun as Yeoman!)
- #31: router.stateId() controls the loading of the appropriate module
- #32: Refers to change handler set up in main.js
- #33: Set idAttribute to the ‘id’ of the application’s navigation data