The Illustrated Guide to Chickens: How to Choose Them — How to Keep Them
APEX 4.0 Plug-Ins: How to use them ..., How to build them ...
-
Upload
jan-huyzentruyt -
Category
Technology
-
view
4.997 -
download
2
description
Transcript of APEX 4.0 Plug-Ins: How to use them ..., How to build them ...
APEX 4.0: Plug-Ins
How to use them, How to write them ….
By Jan Huyzentruyt & Stijn Van Raes
your oracle solutions partner
© 2011
iAdvise
Started in 2004 (member of Cronos-group)
> 55 consultants
Since 2006: APEX Core Team
O2U (the Nederlands)
Oracle Gold Partner
3
© 2011
Agenda
Introduction
How to use them ?
How to write them ?
4
© 2011
PLUG-INS
5
© 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
6
© 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
7
© 2011
Agenda
Introduction
How to use them ?
How to write them ?
8
© 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
9
© 2011
How to use them ?
Once loaded, use in similar fashion to native components
Not supported at workspace level
Included in APEX application export
10
© 2011
DEMO
11
© 2011
Agenda
Introduction
How to use them ?
How to write them ?
12
© 2011
Plug-In Engine
13
Page
Region
Standard Element
Clear
Star
Pre element
Pre element
Pre element
Post element
Post element
Post element
Rendered by apex
Rendered by plugin engine
© 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
14
© 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
15
© 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
16
© 2011
Step 0: Get the idea
Start with an idea
It’s all in your head
Existing jquery plugin: Example
17
© 2011
Pl/sql function
Get your plugin cheatsheet after the presentation
Step 1: Create render function
18
© 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
19
© 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
20
© 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#
21
© 2011
Step 2: Add files
APEX_JAVASCRIPT API
Add_library
Add_onload_code
Add_inline_code
APEX_CSS API
Add_file
Add
22
© 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
23
© 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!
24
© 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
25
© 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
26
© 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
27
© 2011
Q & A
28
© 2011
Thank You
Email:
Blogs:
http://iadviseblog.wordpress.com/
http://apexcommunity.wordpress.com/
More APEX info on:
http://www.apexcommunity.be
29