taking control of the client side apex javascript apis€¦ · thank you twitter: @j_snyders blog:...

16
Taking Control of the Client Side APEX JavaScript APIs John Snyders Consulting Member of Technical Staff Oracle Application Express Development Team December 2019 #orclapex Copyright © 2019 Oracle and/or its affiliates.

Upload: others

Post on 27-Jul-2020

3 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Taking Control of the Client Side APEX JavaScript APIs€¦ · Thank You Twitter: @J_Snyders Blog: Copyright © 2019 Oracle and/or its affiliates. Title: PowerPoint Presentation Author:

Taking Control of the Client SideAPEX JavaScript APIs

John Snyders

Consulting Member of Technical StaffOracle Application Express Development TeamDecember 2019#orclapex

Copyright © 2019 Oracle and/or its affiliates.

Page 2: Taking Control of the Client Side APEX JavaScript APIs€¦ · Thank You Twitter: @J_Snyders Blog: Copyright © 2019 Oracle and/or its affiliates. Title: PowerPoint Presentation Author:

John Snyders

Focus Area: JavaScriptProjects: Faceted Search, New Popup LOV, Interactive Grid, Page Designer, JavaScript WidgetsTwitter: @J_SnydersBlog: http://hardlikesoftware.com

Copyright © 2019 Oracle and/or its affiliates.

At Oracle since 2008 (WebLogic)Joined APEX Team in 2012

Page 3: Taking Control of the Client Side APEX JavaScript APIs€¦ · Thank You Twitter: @J_Snyders Blog: Copyright © 2019 Oracle and/or its affiliates. Title: PowerPoint Presentation Author:

Agenda

• Setting the stage• Concepts and tour of the JavaScript APIs• Example with code walk through• Q&A

Copyright © 2019 Oracle and/or its affiliates.

Page 4: Taking Control of the Client Side APEX JavaScript APIs€¦ · Thank You Twitter: @J_Snyders Blog: Copyright © 2019 Oracle and/or its affiliates. Title: PowerPoint Presentation Author:

Low Code to Full Control; the value of APEX

• Focused optimized core vs. Supporting functionality• Stock vs. Custom pages• Declarative vs. Imperative• In many cases just a few lines of JavaScript is all that is needed

Copyright © 2019 Oracle and/or its affiliates.

Page 5: Taking Control of the Client Side APEX JavaScript APIs€¦ · Thank You Twitter: @J_Snyders Blog: Copyright © 2019 Oracle and/or its affiliates. Title: PowerPoint Presentation Author:

API Tour

Copyright © 2019 Oracle and/or its affiliates.

Page 6: Taking Control of the Client Side APEX JavaScript APIs€¦ · Thank You Twitter: @J_Snyders Blog: Copyright © 2019 Oracle and/or its affiliates. Title: PowerPoint Presentation Author:

New in 19.2 (1)

• Actions: apex.actions.getKeyCaps, apex.actions.setKeyCaps– new key names: Keypad =, Keypad Clear, F13-F15– pWithMarkup added to actions.listShortcuts and actions.shortcutDisplay methods

• grid widget options allowSelectHidden, skipReadonlyCells• new method finishEditing added to grid, recordView and

tableModelView• Missing: grid refresh, model moveRecords and transform• Menu widget new option callout.

Copyright © 2019 Oracle and/or its affiliates.

Page 7: Taking Control of the Client Side APEX JavaScript APIs€¦ · Thank You Twitter: @J_Snyders Blog: Copyright © 2019 Oracle and/or its affiliates. Title: PowerPoint Presentation Author:

New in 19.2 (2)

● grid widget option collapsibleControlBreaks (19.1 but not in release notes)

● iconList widget new options noNavKeyContent, tabbableContent● tableModelView widget new option constrainNavigation● interactiveGridView properties cssClass, icon, singleRowMode, and

singleRowView$ are now documented. InteractiveGridView method getContextRecord is now documented.

Copyright © 2019 Oracle and/or its affiliates.

Page 8: Taking Control of the Client Side APEX JavaScript APIs€¦ · Thank You Twitter: @J_Snyders Blog: Copyright © 2019 Oracle and/or its affiliates. Title: PowerPoint Presentation Author:

Namespace

● Keeps names from colliding● Its just an object● Ideally one global symbol per library: apex● Object with properties that are functions● Can also have properties that are not functions● Property can be an object which is a sub namespace: apex.util

Copyright © 2019 Oracle and/or its affiliates.

Page 9: Taking Control of the Client Side APEX JavaScript APIs€¦ · Thank You Twitter: @J_Snyders Blog: Copyright © 2019 Oracle and/or its affiliates. Title: PowerPoint Presentation Author:

Interface

● Somewhat like a class in OO programming● “Maker” functions return an object that implements an interface● Object with properties● When the property value is a function we call it a method of the

interface● var myRegion = apex.region("myRegion");

Copyright © 2019 Oracle and/or its affiliates.

Page 10: Taking Control of the Client Side APEX JavaScript APIs€¦ · Thank You Twitter: @J_Snyders Blog: Copyright © 2019 Oracle and/or its affiliates. Title: PowerPoint Presentation Author:

Widget

● Specifically a jQuery UI widget– https://api.jqueryui.com/jQuery.widget/

● Programmatic access to a UI control● Widgets have state● $(selector).widgetName("methodName", ...args);

Copyright © 2019 Oracle and/or its affiliates.

Page 11: Taking Control of the Client Side APEX JavaScript APIs€¦ · Thank You Twitter: @J_Snyders Blog: Copyright © 2019 Oracle and/or its affiliates. Title: PowerPoint Presentation Author:

APEX Actions

Copyright © 2019 Oracle and/or its affiliates.

State+

Behavior

ButtonMenu itemCheckbox/radio/selectKeyboard shortcut

2-way

binding

Page 12: Taking Control of the Client Side APEX JavaScript APIs€¦ · Thank You Twitter: @J_Snyders Blog: Copyright © 2019 Oracle and/or its affiliates. Title: PowerPoint Presentation Author:

Model View Separation

Copyright © 2019 Oracle and/or its affiliates.

MyView

My ModelMy Model

apex.model

AnotherViewajax requests to serverfor data

Presentation

Data

ViewX

ModelX

Page 13: Taking Control of the Client Side APEX JavaScript APIs€¦ · Thank You Twitter: @J_Snyders Blog: Copyright © 2019 Oracle and/or its affiliates. Title: PowerPoint Presentation Author:

Example

Copyright © 2019 Oracle and/or its affiliates.

Page 14: Taking Control of the Client Side APEX JavaScript APIs€¦ · Thank You Twitter: @J_Snyders Blog: Copyright © 2019 Oracle and/or its affiliates. Title: PowerPoint Presentation Author:

Questions?

Copyright © 2019 Oracle and/or its affiliates.

Page 15: Taking Control of the Client Side APEX JavaScript APIs€¦ · Thank You Twitter: @J_Snyders Blog: Copyright © 2019 Oracle and/or its affiliates. Title: PowerPoint Presentation Author:

Resources

• Custom Menus http://hardlikesoftware.com/weblog/2015/07/13/apex-5-0-custom-menus/

• Media List Mega Menu http://hardlikesoftware.com/weblog/2018/05/03/apex-media-list-mega-menu/

• More Menu Fun http://hardlikesoftware.com/weblog/2019/03/02/more-apex-menu-fun/

• Keyboard Shortcuts http://hardlikesoftware.com/weblog/2015/04/19/apex-5-0-and-keyboard-shortcuts/

• Menu Widget API https://docs.oracle.com/en/database/oracle/application-express/19.2/aexjs/menu.html

Copyright © 2019 Oracle and/or its affiliates.