plugins unplugged

of 47 /47
PLUG-INS UNPLUGGED Christian Rokitta Berlin 2016

Upload: christian-rokitta

Post on 24-Jan-2018




0 download


Page 1: Plugins unplugged


Berlin 2016

Page 2: Plugins unplugged
Page 3: Plugins unplugged


what context structure details exercise

Page 4: Plugins unplugged

APEX Versions vs Plug-in Features



Page 5: Plugins unplugged

APEX Page States

Page 6: Plugins unplugged

APEX Page States

Generate HTMLTemplates, Definitions


CSS, JS, Images

Dynamic Actions

Inline JSAJAX Calls (DB)

Submitting Form



Page 7: Plugins unplugged

Reasons for Using APEX

declarative: hiding complexity behind properties; especially HTML, CSS and JavaScript

catalogue of build-in components

Page 8: Plugins unplugged


common components

evolving standards

evolving browser/device capabilities

users expectations

Page 9: Plugins unplugged

APEX is an Extensible Framework

Add additional declarative


Page 10: Plugins unplugged

Plug-in Types



Dynamic Action




Page 11: Plugins unplugged

Plug-in Types vs Page States

Page 12: Plugins unplugged

Item Type Plug-in


Page 13: Plugins unplugged

Region Type Plug-in

static vs dynamic

Page 14: Plugins unplugged

Dynamic Action Type Plug-in

Page 15: Plugins unplugged

Process Type Plug-in

Page 16: Plugins unplugged

Authorization Type Plug-in

Page 17: Plugins unplugged

Authentication Type Plug-in

Authentication schemes are used to determine ifthe user can access the application. As such it is

not run on a page or component level.

Page 18: Plugins unplugged

When to use Plug-ins

not possible with standard declarative APEX

hiding complexity

reusability (application, instance, public)


Page 19: Plugins unplugged

Skills to build APEX Plug-ins


Page 20: Plugins unplugged

Declarative vs Extended Skills

Page 21: Plugins unplugged

Ideal APEX Team

Page 22: Plugins unplugged


write your own

cut-n-paste code

libraries/jQuery Plug-ins

Lots of well-know public available APEX plug-ins are based on existing JS/jQ solutions

Page 23: Plugins unplugged
Page 24: Plugins unplugged

Page 25: Plugins unplugged


Page 26: Plugins unplugged

jQuery Plug-in Wishlist

• JS/CSS files/library

• Doc, HTML Example, how-to, …

• Options (Configuration)

• Methods (API)

• Events

Page 27: Plugins unplugged

Page 28: Plugins unplugged
Page 29: Plugins unplugged


Page 30: Plugins unplugged

Common Plug-in StructurePlugin PL/SQL function signature• render• AJAX-callback

PL/SQL Types• configuration• state• parameter passing

APEX PL/SQL API helper• include JS and CSS files• …

APEX JavaScript API• initiate AJAX calls• …

Page 31: Plugins unplugged

Render Function

function <name of function> (

p_<type> in apex_plugin.t_<type>

, p_plugin in apex_plugin.t_plugin

[, p_...]

) return apex_plugin.t_<type>_render_result

Page 32: Plugins unplugged


type t_<type> is record (

<param n>

, <param n>

, attribute_01 varchar2(32767)

, attribute_NN varchar2(32767)


std. declarative attributes

additional plug-in specific attributes(page component)

APEX Version dependencies

Page 33: Plugins unplugged


type t_plugin is record (

name varchar2(45),

file_prefix varchar2(4000),

attribute_01 varchar2(32767),

… ,

attribute_15 varchar2(32767) );

APEX 4 max 10 attr.

additional plug-in specific attributes

application level(Component Settings)

Page 34: Plugins unplugged

Item Type Render Function

function <name of function> (

p_item in apex_plugin.t_item_item

, p_plugin in apex_plugin.t_plugin

, p_value in varchar2

, p_is_readonly in boolean

, p_is_printer_friendly in boolean

) return apex_plugin.t_page_item_render_result

Page 35: Plugins unplugged

t_page_itemtype t_page_item is record ( id number

, name varchar2(255)

, label varchar2(4000)

, plain_label varchar2(4000)

, label_id varchar2(255)

, placeholder varchar2(255)

, format_mask varchar2(255)

, is_required boolean

, lov_definition varchar2(4000)

, lov_display_extra boolean

, lov_display_null boolean

, lov_null_text varchar2(255)

, lov_null_value varchar2(255)

, lov_cascade_parent_items varchar2(255)

, ajax_items_to_submit varchar2(255)

, ajax_optimize_refresh boolean

, element_width number

, element_max_length number

, element_height number

, element_css_classes varchar2(255)

, element_attributes varchar2(2000)

, element_option_attributes varchar2(4000)

, escape_output boolean

, attribute_01 varchar2(32767)

, …

, attribute_15 varchar2(32767));

Page 36: Plugins unplugged

Coding the Render Function

generate HTML for object

include assets (JS, CSS, …)

generate JS snippets

Page 37: Plugins unplugged

Coding the 3 Simple Steps

sys.htp.p('<input type="text" id="'||||

' name="'||||'" />');

apex_javascript.add_onload_code (

p_code => '$( "#'||||'" ).timeDropper();'

,p_key => null );

apex_javascript.add_library (p_name => 'timedropper'

, p_directory => p_plugin.file_prefix

, p_check_to_add_minified => true );

apex_css.add_file (p_name => 'timefropper'

, p_directory => p_plugin.file_prefix );

Page 38: Plugins unplugged

Basic Demo Render Functionfunction render_timedropper(p_item in apex_plugin.t_page_item

, p_plugin in apex_plugin.t_plugin

, p_value in varchar2

, p_is_readonly in boolean

, p_is_printer_friendly in boolean)

return apex_plugin.t_page_item_render_result


v_result apex_plugin.t_page_item_render_result;


apex_javascript.add_library(p_name => 'timedropper‘

, p_directory => p_plugin.file_prefix, p_check_to_add_minified => true);

apex_css.add_file(p_name => 'timefropper', p_directory => p_plugin.file_prefix);

sys.htp.p('<input type="text" id="' || || '" name="' || p_page_item || '" />');

apex_javascript.add_onload_code(p_code => '$( "#' || || '" ).timeDropper();', p_key => null);

return v_result;


Page 39: Plugins unplugged
Page 40: Plugins unplugged

Beyond Basic Render Function

item (component) std. attributes

validation (for item type plugin)

AJAX Callback

Page 41: Plugins unplugged

Page Item Type Validation Callback

type t_page_item_validation_result is record(

message varchar2(32767)

, display_location varchar2(40)

, page_item_name varchar2(255)


Page 42: Plugins unplugged

Plug-in AJAX Callback

function <name of function> (

p_<type> in apex_plugin.t_<type>,

p_plugin in apex_plugin.t_plugin )

return apex_plugin.t_<type>_ajax_result

Page 43: Plugins unplugged

Callin the AJAX Callback

apex.server.plugin ( pAjaxIdentifier, { /*apex_plugin.get_ajax_identifier*/

x01-10: "...",

pageItems: "#P1_DEPTNO,#P1_EMPNO"

}, {

refreshObject: "#P1_MY_LIST",

loadingIndicator: "#P1_MY_LIST",

success: function( pData ) { ... do something ... },

any jQuery.ajax option,


Page 44: Plugins unplugged

sponsered demo

Page 45: Plugins unplugged
Page 46: Plugins unplugged


Page 47: Plugins unplugged