A Designer's Intro to Oracle JET

A Designer's Intro to Oracle JET

• 1.
  Session ID: Prepared by: ADesigner’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 WeDeliver 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 isOracle 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 OracleJET? • 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 Basedon MVVM design: 9
• 10.
  JET’s Modularity JET isbuilt on a number of battle-tested JS libraries: 10
• 11.
  Knockout 11 • 2-way DataBinding: 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 fileand 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!
• 13.
  RequireJS Configuration 13
• 14.
  Top-level RequireJS 14 • InMain.js of QuickStart • Similar code in individual ViewModel JS files • Loads the components you need
• 15.
  Oracle JET QuickStartTemplate 15
• 16.
  90% of OracleJET
• 17.
  Download NetBeans 17
• 18.
  Oracle JET Plugin 18
• 19.
  Getting Started withOracle Jet npm install ALL OF THE THINGS! 19 • Grunt • Grunt-cli • Bower • Git • Yeoman • generator-oraclejet (Yeoman generator) Need help? http://www.npmjs.com
• 20.
  Create and Grunt!
• 21.
  OR: Create aNew JET Project in NetBeans 21
• 22.
  Video Magic 22
• 23.
  OOTB Project!
• 24.
  Responsive 24
• 25.
  Using The Cookbook Findthe UI Component: 25
• 26.
  Copy the HTML 26
• 27.
  Copy the JS 27
• 28.
  Pro tip! QS templatesyntax in ViewModel is different: “define” vs. “require” and just return the ViewModel 28
• 29.
  Routing for SPAin JET 29
• 30.
  Routing part II 30 index.html
• 31.
  Routing Part III 31 InHeader and off-canvas templates
• 32.
  Routing Part IV 32 Inheader.js
• 33.
  JET with OracleDocs API 33
• 34.
  Oracle DoCS RESTAPI
• 35.
  35
• 36.
  The ViewModel 36
• 37.
  The ViewModel PartII 37
• 38.
  The ViewModel PartIII 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 • Pleasecomplete the session evaluation • Use the mobile app • We appreciate your feedback and insight! Come Visit Fishbowl Solutions at Booth #1028!