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

1. your oracle solutions partner
APEX 4.0: Plug-Ins
How to use them,
How to write them ….
By Jan Huyzentruyt & Stijn Van Raes

2. iAdvise
 Started in 2004
(member of Cronos-group)
 > 55 consultants
 Since 2006:
APEX Core Team
 O2U (the Nederlands)
 Oracle Gold Partner
© 2011

3. Agenda
 Introduction
 How to use them ?
 How to write them ?
© 2011

4. PLUG-INS
© 2011

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. 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. Agenda
 Introduction
 How to use them ?
 How to write them ?
© 2011

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. 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. DEMO
© 2011

11. Agenda
 Introduction
 How to use them ?
 How to write them ?
© 2011

12. Plug-In Engine
Page 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. 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. 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. 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. Step 0: Get the idea
 Start with an idea
 It’s all in your head
 Existing jquery plugin: Example
© 2011

17. Step 1: Create render function
 Pl/sql function
 Get your plugin cheatsheet after the
presentation
© 2011

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. 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. 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. Step 2: Add files
 APEX_JAVASCRIPT API
 Add_library
 Add_onload_code
 Add_inline_code
 APEX_CSS API
 Add_file
 Add
© 2011

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. 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. 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. 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. 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. Q&A
© 2011

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