APEX 4.0 Plug-Ins: How to use them ..., How to build them ...
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 5,156 views

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

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

Statistics

Views

Total Views
5,156
Views on SlideShare
5,156
Embed Views
0

Actions

Likes
0
Downloads
82
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • your oracle solutions partnerAPEX 4.0: Plug-Ins How to use them, How to write them …. By Jan Huyzentruyt & Stijn Van Raes
  • iAdvise Started in 2004 (member of Cronos-group) > 55 consultants Since 2006: APEX Core Team O2U (the Nederlands) Oracle Gold Partner © 2011
  • 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 Increase reusability  Develop Once, Use Often Increase productivity Make javascript transportable  Exportable as separate/independent component © 2011
  • 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
  • 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/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
  • How to use them ? Once loaded, use in similar fashion to native components Not supported at workspace level Included in APEX application export © 2011
  • DEMO © 2011
  • Agenda Introduction How to use them ? How to write them ? © 2011
  • 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
  • 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
  • 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
  • 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
  • Step 0: Get the idea Start with an idea  It’s all in your head  Existing jquery plugin: Example © 2011
  • Step 1: Create render function Pl/sql function Get your plugin cheatsheet after the presentation © 2011
  • 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
  • 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
  • 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
  • Step 2: Add files APEX_JAVASCRIPT API  Add_library  Add_onload_code  Add_inline_code APEX_CSS API  Add_file  Add © 2011
  • 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
  • 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
  • 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
  • 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
  • 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
  • Q&A © 2011
  • 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