Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Plugins unplugged

DOAG APEX Connect, Berlin 2016

  • Identifiez-vous pour voir les commentaires

Plugins unplugged

  1. 1. PLUG-INS UNPLUGGED Christian Rokitta Berlin 2016
  2. 2. Content what context structure details exercise
  3. 3. APEX Versions vs Plug-in Features 5 4
  4. 4. APEX Page States
  5. 5. APEX Page States Generate HTML Templates, Definitions Resources CSS, JS, Images Dynamic Actions Inline JS AJAX Calls (DB) Submitting Form Validating Processing
  6. 6. Reasons for Using APEX declarative: hiding complexity behind properties; especially HTML, CSS and JavaScript catalogue of build-in components
  7. 7. Limitations common components evolving standards evolving browser/device capabilities users expectations
  8. 8. APEX is an Extensible Framework Add additional declarative functionality
  9. 9. Plug-in Types Item Region Dynamic Action Process Authentication Authorization
  10. 10. Plug-in Types vs Page States
  11. 11. Item Type Plug-in validations
  12. 12. Region Type Plug-in static vs dynamic
  13. 13. Dynamic Action Type Plug-in
  14. 14. Process Type Plug-in
  15. 15. Authorization Type Plug-in
  16. 16. Authentication Type Plug-in Authentication schemes are used to determine if the user can access the application. As such it is not run on a page or component level.
  17. 17. When to use Plug-ins not possible with standard declarative APEX hiding complexity reusability (application, instance, public) maintainability
  18. 18. Skills to build APEX Plug-ins SQL PL/SQL
  19. 19. Declarative vs Extended Skills
  20. 20. Ideal APEX Team
  21. 21. 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
  22. 22. https://select2.github.io/
  23. 23. Inspiration
  24. 24. jQuery Plug-in Wishlist • JS/CSS files/library • Doc, HTML Example, how-to, … • Options (Configuration) • Methods (API) • Events
  25. 25. http://felicegattuso.com/projects/timedropper/
  26. 26. $('#id').timeDropper({mousewheel:true,meridians:true,init_animation:'dropdown',setCurrentTime:false});
  27. 27. Common Plug-in Structure Plugin 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 • …
  28. 28. 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
  29. 29. 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
  30. 30. 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)
  31. 31. 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
  32. 32. t_page_item type 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));
  33. 33. Coding the Render Function generate HTML for object include assets (JS, CSS, …) generate JS snippets
  34. 34. 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 );
  35. 35. Basic Demo Render Function function 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;
  36. 36. Beyond Basic Render Function item (component) std. attributes validation (for item type plugin) AJAX Callback
  37. 37. 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) );
  38. 38. 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
  39. 39. 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, });
  40. 40. sponsered demo
  41. 41. Q&A

×