Working with jQuery UI Widgets

21.06.18 Working with jQuery UI Widgets 5

21.06.18 Working with jQuery UI Widgets 6

What do they have in common?

The widget factory

21.06.18 Working with jQuery UI Widgets 9

https://learn.jquery.com/jquery-ui/widget-factory/

Hey Dude, where’s my widget?

Getting all widget instances on a page

Widgets in jQuery UI have their own selectors. These selectors allow the developer to select widgets by type.

21.06.18 Working with jQuery UI Widgets 11

$(':<namespace>-<widgetname>');//Examples$(':apex-interactivegrid');$(':ui-datepicker');

Widgets are placed under a namespace

21.06.18 Working with jQuery UI Widgets 12

Namespace Purpose Widgets

$.ui Native jQuery UI widgets

datepicker, dialog, …

$.apex Oracle APEX Widgets treeView, menu, interactiveGrid, …

$.fullCalendar The calendar region widget

fullCalendar

$.oj Oracle JET widgets ojChart, ojGantt, …

$.kscope Our own widgets for Kscope

none

And has many public methods and functions

21.06.18 Customizing the Interactive Grid with plug-ins 13

$.apex.interactiveGrid.prototype

Using a page region widget method

21.06.18 Working with jQuery UI Widgets 14

letview=apex.region('task_due_dates').widget().fullCalendar('getView');//orin18.1letview=apex.region('task_due_dates').call('getView');

Using a page item widget

21.06.18 Working with jQuery UI Widgets 15

$('#P1_DATE').datepicker('getDate');//returns:ThuJun14201800:00:00GMT+0200(CentralEuropeDaylightTime)

When to use them

21.06.18 Working with jQuery UI Widgets 16

Changing options

Executing methods

Acting on events

Changing options

The options are part of the widget's state, so we can set options after initialization as well.

21.06.18 Working with jQuery UI Widgets 17

apex.region('mychart').call('option','orientation','horizontal');

Executing methods

21.06.18 Working with jQuery UI Widgets 18

apex.region('emp').call('refresh');

Acting on events

21.06.18 Working with jQuery UI Widgets 19

Event names always start with the widget name in lowercase All widgets have a create event

$('#emp').on('interactivegridcreate',function(event,data){});$('#emp').on('interactivegridselectionchange',function(event,data){console.log(data);});

Advanced usage

Extending a widget

21.06.18 jQuery UI Widgets in APEX 18.1 20

$(document).ready(function(){$.widget('apex.interactiveGrid',$.apex.interactiveGrid,{refresh:function(){alert('HelloKscope,Ishouldrefreshnow..');this._super();}});});

Thank you