Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
your oracle solutions partnerAPEX 4.0: Plug-Ins           How to use them,           How to write them ….           By Jan...
iAdvise Started in 2004  (member of Cronos-group) > 55 consultants Since 2006:  APEX Core Team O2U (the Nederlands) O...
Agenda Introduction How to use them ? How to write them ?                        © 2011
PLUG-INS           © 2011
Why Plug-Ins ? Make javascript declarative   Structured way of implementing   Encapsulated for developer community Inc...
Plug-In Types There are four types of plug-ins:   Item type plug-ins     Example: Star Rating, Color Picker, …   Regio...
Agenda Introduction How to use them ? How to write them ?                        © 2011
How to use them ? Download a plugin   http://www.oracle.com/technetwork/developer-    tools/apex/application-express/ape...
How to use them ? Once loaded, use in similar fashion  to native components Not supported at workspace level Included i...
DEMO       © 2011
Agenda Introduction How to use them ? How to write them ?                        © 2011
Plug-In EnginePage                                         Rendered by                                          Rendered b...
Plug-In builder What’s in a name   DOMAIN.COMPANY.APEX.PLUGIN_NAME   Ex: BE.IADVISE.APEX.CLEARABLETEXTFIELD Type   Ca...
Plug-In builder Callbacks       Render function (region, item, dyn. action)       Ajax function (region, item, dyn. act...
How to write them ? Five+ Steps     Step   0:   Get the idea     Step   1:   Create a render function     Step   2:   ...
Step 0: Get the idea Start with an idea   It’s all in your head   Existing jquery plugin:   Example                    ...
Step 1: Create render function Pl/sql function Get your plugin cheatsheet after the  presentation                       ...
Step 1: Create render function APEX_PLUGIN API   get_input_name_for_page_item Print input item   HTP.P   Don’t trust ...
Step 1: Create render function Add debug   apex_plugin_util.debug_page_item Add readonly   apex_plugin_util.print_hidd...
Step 2: Add files Javascript, css, images,... Include them into your plug-in   apex_javascript.add_library   apex_css....
Step 2: Add files APEX_JAVASCRIPT API   Add_library   Add_onload_code   Add_inline_code APEX_CSS API   Add_file   A...
Step 3: Add standard attributes Attributes you can select for your  item, region, dynamic action plug-ins Possibility to...
Step 4: Add custom attributes Define your own plugin ‘parameters’ Use the values that are filled in by the  Apex develop...
Step 5: Add events Add your event Use jquery .trigger in the plug-in  source   Ex:   $("#||p_item.name||").trigger("cle...
Tips Make plug-in development easier:   Put your files on your server, and use    p_plugin.file_prefix to reference them...
Tips Test with multiple instances! Read Only and Printer Friendly Mode Secure? XSS & Data Validation Help Text for Plu...
Q&A      © 2011
Thank You Email:   stijn.vanraes@iadvise.be   jan.huyzentruyt@iadvise.be Blogs:   http://iadviseblog.wordpress.com/  ...
Upcoming SlideShare
Loading in …5
×

APEX 4.0 Plug-Ins: How to use them ..., How to build them ...

6,710 views

Published on

Presentation given by iAdvise @ OBUG APEX SIG (24 May 2011). Read more here: http://iadviseblog.wordpress.com/2011/05/24/obug-apex-sig/

Published in: Technology
  • Be the first to comment

APEX 4.0 Plug-Ins: How to use them ..., How to build them ...

  1. 1. your oracle solutions partnerAPEX 4.0: Plug-Ins How to use them, How to write them …. By Jan Huyzentruyt & Stijn Van Raes
  2. 2. iAdvise Started in 2004 (member of Cronos-group) > 55 consultants Since 2006: APEX Core Team O2U (the Nederlands) Oracle Gold Partner © 2011
  3. 3. Agenda Introduction How to use them ? How to write them ? © 2011
  4. 4. PLUG-INS © 2011
  5. 5. Why Plug-Ins ? Make javascript declarative  Structured way of implementing  Encapsulated for developer community Increase reusability  Develop Once, Use Often Increase productivity Make javascript transportable  Exportable as separate/independent component © 2011
  6. 6. Plug-In Types There are four types of plug-ins:  Item type plug-ins  Example: Star Rating, Color Picker, …  Region type plug-ins  Example: Google Maps, Google Visualizations, …  Dynamic action plug-ins  Example: Twitter Status update, Yahoo Stock Quote  Process type plug-ins  Example: Get Data © 2011
  7. 7. Agenda Introduction How to use them ? How to write them ? © 2011
  8. 8. How to use them ? Download a plugin  http://www.oracle.com/technetwork/developer- tools/apex/application-express/apex-plug-ins- 182042.html  http://www.apex-plugin.com/ Import the plugin  Shared Components > Plug-ins > Import Create an item  Select plugins  Select your plugin  [Fill in settings] Run your page © 2011
  9. 9. How to use them ? Once loaded, use in similar fashion to native components Not supported at workspace level Included in APEX application export © 2011
  10. 10. DEMO © 2011
  11. 11. Agenda Introduction How to use them ? How to write them ? © 2011
  12. 12. Plug-In EnginePage Rendered by Rendered by plugin apex engine Region Star Pre element Post element Clear Pre element Post element Standard Element Pre element Post element © 2011
  13. 13. Plug-In builder What’s in a name  DOMAIN.COMPANY.APEX.PLUGIN_NAME  Ex: BE.IADVISE.APEX.CLEARABLETEXTFIELD Type  Category Subscription Settings  File prefix Source © 2011
  14. 14. Plug-In builder Callbacks  Render function (region, item, dyn. action)  Ajax function (region, item, dyn. action)  Validation function (item)  Execute function (process) Standard Attributes Custom Attributes Files Events © 2011
  15. 15. How to write them ? Five+ Steps  Step 0: Get the idea  Step 1: Create a render function  Step 2: Add files  Step 3: Add standard attributes  Step 4: Add custom attributes  Step 5: Add events © 2011
  16. 16. Step 0: Get the idea Start with an idea  It’s all in your head  Existing jquery plugin: Example © 2011
  17. 17. Step 1: Create render function Pl/sql function Get your plugin cheatsheet after the presentation © 2011
  18. 18. Step 1: Create render function APEX_PLUGIN API  get_input_name_for_page_item Print input item  HTP.P  Don’t trust the user use: apex_plugin_util.escape © 2011
  19. 19. Step 1: Create render function Add debug  apex_plugin_util.debug_page_item Add readonly  apex_plugin_util.print_hidden_if_readonly Add printer friendly  apex_plugin_util.print_display_only © 2011
  20. 20. Step 2: Add files Javascript, css, images,... Include them into your plug-in  apex_javascript.add_library  apex_css.add_file Use the plugin file prefix  t_plugin.file_prefix  #IMAGE_PREFIX#, #PLUGIN_PREFIX# © 2011
  21. 21. Step 2: Add files APEX_JAVASCRIPT API  Add_library  Add_onload_code  Add_inline_code APEX_CSS API  Add_file  Add © 2011
  22. 22. Step 3: Add standard attributes Attributes you can select for your item, region, dynamic action plug-ins Possibility to use the values that are filled in by the apex developer in your plug-in  Apex_plugin.t_page_item  Lov_definition  Element_width  Element_height  ... Use them when you print your plug-in © 2011
  23. 23. Step 4: Add custom attributes Define your own plugin ‘parameters’ Use the values that are filled in by the Apex developer in your plugin  Apex_plugin.t_page_item  Attribute_01, Attribute_02,... Attribute_10 Give them a scope  Application, component Make required, conditions Help text! © 2011
  24. 24. Step 5: Add events Add your event Use jquery .trigger in the plug-in source  Ex: $("#||p_item.name||").trigger("clear");}) Your plug-in events will appear as dynamic action events © 2011
  25. 25. Tips Make plug-in development easier:  Put your files on your server, and use p_plugin.file_prefix to reference them  Put the plugin pl/sql functions in a package on your db scheme  Reference them in the callbacks [package_name.]function_name Firebug is your friend Use jquery Avoid excessive inline js & css code © 2011
  26. 26. Tips Test with multiple instances! Read Only and Printer Friendly Mode Secure? XSS & Data Validation Help Text for Plug-In and Attributes! Check the code of plug-ins you use © 2011
  27. 27. Q&A © 2011
  28. 28. Thank You Email:  stijn.vanraes@iadvise.be  jan.huyzentruyt@iadvise.be Blogs:  http://iadviseblog.wordpress.com/  http://apexcommunity.wordpress.com/ More APEX info on:  http://www.apexcommunity.be © 2011

×