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!