a designer's intro to oracle jet
Post on 12-Apr-2017
425 Views
Preview:
TRANSCRIPT
PowerPoint Presentation
A Designers Introduction to the Oracle JET Framework4392@JRSim_UIX @LaurenBeatty13John Sim and Lauren Beatty
Session ID:Prepared by:
2About Fishbowl SolutionsExperience800+ projects since founding in 1999Oracle Gold PartnerOracle Cloud Standard PartnerGoogle for Work PartnerExpertisePortals and Content ManagementUser ExperienceEnterprise Search
3Fishbowl Consulting ServicesWebCenter ContentDocument MgmtRecords MgmtDigital Asset MgmtWeb Content MgmtWebCenter PortalEmployee IntranetsVendor or Partner ExtranetsCustomer PortalGoogle SearchConnectors for WebCenter, Liferay Portal and YouTubeResale, Implementations, OptimizationsEnterprise SupportInstallations, Configurations, Performance Tuning, Solution Design, Development, Implementations
Image & Process MgmtDocument CaptureForms RecognitionContent Consolidation
4Business Solutions We DeliverEnterprise Search across Business SystemsJumpstart services and software leveraging the Google Search ApplianceEnterprise Information StrategyConsulting services for discovery and go-forward recommendations on repositories, integrations, delivery channels, and business process flow Quality Document Management & ControlSimple, robust software to streamline document authoring and review and automate overall policy and procedure management
Self-Service PortalsJumpstart services and software for Employee Intranets, Partner Extranets and Global Customer/Supplier Portals
User Experience & Mobile Design and DevelopmentResponsive and adaptive design for desktop and mobile
Who we are:
John---Oracle ACESenior Developer at Fishbowl SolutionsExpertise in UX/UI
Associate Software ConsultantMEAN stackExpertise in Learning/Exploring
Overview
What is Oracle JET?
Features and Benefits
JETs modularity
Using Oracle JET QuickStart Template and Yeoman
JET app with Oracle Cloud Documents REST API
6
6
What is Oracle JET?JavaScript Extension Toolkit
Modular Front-End Framework
Tried and True JS Libraries
Pre-Built UI Components
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. 29Modular---use only the components you want---swap them out for others!Not re-inventing the wheel---using lightweight, tested frameworks and librariesPre-built UI Components---make building challenging items a snap---based on jQueryUI
7
Features and Benefits
Utilizes popular Open Source Libraries
Flexible!
Accessibility and Internationalization
70 UI Components
2-way Data Binding with Knockout
Powerful Routing System8
Flexible---as I said, no components of Oracle JET are required; use what you likeAccessibility: 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 locales8
Oracle JET FrameworkBased on MVVM design: 9
Model: the application data: oj.Model, oj.Collection, oj.Events, oj.KnockoutUtilsView: HTML and CSS (what we see); jQuery UI widgetsView-Model: How those two interact: the client-side logic; KnockoutJS implements the ViewModel9
JETs ModularityJET is built on a number of battle-tested JS libraries:10
Knockout
112-way Data Binding: Model View View-Model (MVVM)
Automatic UI refreshwhen the data changes, UI refreshes automatically (and vice-versa)
Straightforward, readable syntax
RequireJS
12JavaScript 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 theyre needed!
RequireJS Configuration
13
In Main.js of the QuickStart template13
Top-level RequireJS
14In Main.js of QuickStart
Similar code in individual ViewModel JS files
Loads the components you need
Oracle JET QuickStart Template
15
+
90% of Oracle JET
Download NetBeans
17
Oracle JET Plugin
18
Getting Started with Oracle Jetnpm install ALL OF THE THINGS!19
Grunt
Grunt-cli
Bower
Git
Yeoman
generator-oraclejet (Yeoman generator)Need help? http://www.npmjs.com
Youll need to install node first. You may have to update your node.js
19
Create and Grunt!
OR: Create a New JET Project in NetBeans
21
In NetBeans (not as much fun as Yeoman!)
21
Video Magic22
OOTB Project!
Responsive24
12-column Grid
Using The CookbookFind the UI Component:25
Copy the HTML
26
Copy the JS
27
Pro tip!QS template syntax in ViewModel is different:define vs. require and just return the ViewModel
28
Routing for SPA in JET29
In main.js file
Routing part II30
index.html
router.stateId() controls the loading of the appropriate module30
Routing Part III31
In Header and off-canvas templates
Refers to change handler set up in main.js31
Routing Part IV32
In header.js
Set idAttribute to the id of the applications navigation data32
JET with Oracle Docs API
33
Oracle DoCS REST API
35
The ViewModel
36
The ViewModel Part II37
The ViewModel Part III
38
The View
39
Learning ResourcesKnockoutjs.com
Knockmeout.net
Oracle JET cookbook!
Oracle JET QuickStart Template
JET videos
Oracle JET community
Oracle JET dev guide
Geertjan Wielengas blog
Github repo
40
Thank you!41Please complete the session evaluation
Use the mobile app
We appreciate your feedback and insight!Come Visit Fishbowl Solutions at Booth #1028!
top related