plugins unplugged
TRANSCRIPT
PLUG-INS UNPLUGGEDChristian Rokitta
Berlin 2016
Content
what context structure details exercise
APEX Versions vs Plug-in Features
5
4
APEX Page States
APEX Page States
Generate HTMLTemplates, Definitions
Resources
CSS, JS, Images
Dynamic Actions
Inline JSAJAX Calls (DB)
Submitting Form
Validating
Processing
Reasons for Using APEX
declarative: hiding complexity behind properties; especially HTML, CSS and JavaScript
catalogue of build-in components
Limitations
common components
evolving standards
evolving browser/device capabilities
users expectations
APEX is an Extensible Framework
Add additional declarative
functionality
Plug-in Types
Item
Region
Dynamic Action
Process
Authentication
Authorization
Plug-in Types vs Page States
Item Type Plug-in
validations
Region Type Plug-in
static vs dynamic
Dynamic Action Type Plug-in
Process Type Plug-in
Authorization Type Plug-in
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.
When to use Plug-ins
not possible with standard declarative APEX
hiding complexity
reusability (application, instance, public)
maintainability
Skills to build APEX Plug-ins
SQLPL/SQL
Declarative vs Extended Skills
Ideal APEX Team
Inspiration
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
https://select2.github.io/
Inspiration
jQuery Plug-in Wishlist
• JS/CSS files/library
• Doc, HTML Example, how-to, …
• Options (Configuration)
• Methods (API)
• Events
http://felicegattuso.com/projects/timedropper/
$('#id').timeDropper({mousewheel:true,meridians:true,init_animation:'dropdown',setCurrentTime:false});
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• …
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
apex_plugin.t_<type>
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
apex_plugin.t_plugin
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)
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
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));
Coding the Render Function
generate HTML for object
include assets (JS, CSS, …)
generate JS snippets
Coding the 3 Simple Steps
sys.htp.p('<input type="text" id="'||p_page_item.id||
' name="'||p_page_item.name||'" />');
apex_javascript.add_onload_code (
p_code => '$( "#'||p_page_item.id||'" ).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 );
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
is
v_result apex_plugin.t_page_item_render_result;
begin
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="' || p_page_item.id || '" name="' || p_page_item || '" />');
apex_javascript.add_onload_code(p_code => '$( "#' || p_page_item.id || '" ).timeDropper();', p_key => null);
return v_result;
end;
Beyond Basic Render Function
item (component) std. attributes
validation (for item type plugin)
AJAX Callback
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)
);
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
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,
});
sponsered demo
Q&A