APEX 4.0 Plug-Ins: How to use them ..., How to build them ...
-
Upload
jan-huyzentruyt -
Category
Technology
-
view
4.992 -
download
2
description
Transcript of APEX 4.0 Plug-Ins: How to use them ..., How to build them ...
![Page 1: APEX 4.0 Plug-Ins: How to use them ..., How to build them ...](https://reader033.fdocuments.us/reader033/viewer/2022051616/554f8271b4c9052a518b4d6f/html5/thumbnails/1.jpg)
APEX 4.0: Plug-Ins
How to use them, How to write them ….
By Jan Huyzentruyt & Stijn Van Raes
your oracle solutions partner
![Page 2: APEX 4.0 Plug-Ins: How to use them ..., How to build them ...](https://reader033.fdocuments.us/reader033/viewer/2022051616/554f8271b4c9052a518b4d6f/html5/thumbnails/2.jpg)
© 2011
iAdvise
Started in 2004 (member of Cronos-group)
> 55 consultants
Since 2006: APEX Core Team
O2U (the Nederlands)
Oracle Gold Partner
3
![Page 3: APEX 4.0 Plug-Ins: How to use them ..., How to build them ...](https://reader033.fdocuments.us/reader033/viewer/2022051616/554f8271b4c9052a518b4d6f/html5/thumbnails/3.jpg)
© 2011
Agenda
Introduction
How to use them ?
How to write them ?
4
![Page 4: APEX 4.0 Plug-Ins: How to use them ..., How to build them ...](https://reader033.fdocuments.us/reader033/viewer/2022051616/554f8271b4c9052a518b4d6f/html5/thumbnails/4.jpg)
© 2011
PLUG-INS
5
![Page 5: APEX 4.0 Plug-Ins: How to use them ..., How to build them ...](https://reader033.fdocuments.us/reader033/viewer/2022051616/554f8271b4c9052a518b4d6f/html5/thumbnails/5.jpg)
© 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
![Page 6: APEX 4.0 Plug-Ins: How to use them ..., How to build them ...](https://reader033.fdocuments.us/reader033/viewer/2022051616/554f8271b4c9052a518b4d6f/html5/thumbnails/6.jpg)
© 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
![Page 7: APEX 4.0 Plug-Ins: How to use them ..., How to build them ...](https://reader033.fdocuments.us/reader033/viewer/2022051616/554f8271b4c9052a518b4d6f/html5/thumbnails/7.jpg)
© 2011
Agenda
Introduction
How to use them ?
How to write them ?
8
![Page 8: APEX 4.0 Plug-Ins: How to use them ..., How to build them ...](https://reader033.fdocuments.us/reader033/viewer/2022051616/554f8271b4c9052a518b4d6f/html5/thumbnails/8.jpg)
© 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
![Page 9: APEX 4.0 Plug-Ins: How to use them ..., How to build them ...](https://reader033.fdocuments.us/reader033/viewer/2022051616/554f8271b4c9052a518b4d6f/html5/thumbnails/9.jpg)
© 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
![Page 10: APEX 4.0 Plug-Ins: How to use them ..., How to build them ...](https://reader033.fdocuments.us/reader033/viewer/2022051616/554f8271b4c9052a518b4d6f/html5/thumbnails/10.jpg)
© 2011
DEMO
11
![Page 11: APEX 4.0 Plug-Ins: How to use them ..., How to build them ...](https://reader033.fdocuments.us/reader033/viewer/2022051616/554f8271b4c9052a518b4d6f/html5/thumbnails/11.jpg)
© 2011
Agenda
Introduction
How to use them ?
How to write them ?
12
![Page 12: APEX 4.0 Plug-Ins: How to use them ..., How to build them ...](https://reader033.fdocuments.us/reader033/viewer/2022051616/554f8271b4c9052a518b4d6f/html5/thumbnails/12.jpg)
© 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
![Page 13: APEX 4.0 Plug-Ins: How to use them ..., How to build them ...](https://reader033.fdocuments.us/reader033/viewer/2022051616/554f8271b4c9052a518b4d6f/html5/thumbnails/13.jpg)
© 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
![Page 14: APEX 4.0 Plug-Ins: How to use them ..., How to build them ...](https://reader033.fdocuments.us/reader033/viewer/2022051616/554f8271b4c9052a518b4d6f/html5/thumbnails/14.jpg)
© 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
![Page 15: APEX 4.0 Plug-Ins: How to use them ..., How to build them ...](https://reader033.fdocuments.us/reader033/viewer/2022051616/554f8271b4c9052a518b4d6f/html5/thumbnails/15.jpg)
© 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
![Page 16: APEX 4.0 Plug-Ins: How to use them ..., How to build them ...](https://reader033.fdocuments.us/reader033/viewer/2022051616/554f8271b4c9052a518b4d6f/html5/thumbnails/16.jpg)
© 2011
Step 0: Get the idea
Start with an idea
It’s all in your head
Existing jquery plugin: Example
17
![Page 17: APEX 4.0 Plug-Ins: How to use them ..., How to build them ...](https://reader033.fdocuments.us/reader033/viewer/2022051616/554f8271b4c9052a518b4d6f/html5/thumbnails/17.jpg)
© 2011
Pl/sql function
Get your plugin cheatsheet after the presentation
Step 1: Create render function
18
![Page 18: APEX 4.0 Plug-Ins: How to use them ..., How to build them ...](https://reader033.fdocuments.us/reader033/viewer/2022051616/554f8271b4c9052a518b4d6f/html5/thumbnails/18.jpg)
© 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
![Page 19: APEX 4.0 Plug-Ins: How to use them ..., How to build them ...](https://reader033.fdocuments.us/reader033/viewer/2022051616/554f8271b4c9052a518b4d6f/html5/thumbnails/19.jpg)
© 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
![Page 20: APEX 4.0 Plug-Ins: How to use them ..., How to build them ...](https://reader033.fdocuments.us/reader033/viewer/2022051616/554f8271b4c9052a518b4d6f/html5/thumbnails/20.jpg)
© 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
![Page 21: APEX 4.0 Plug-Ins: How to use them ..., How to build them ...](https://reader033.fdocuments.us/reader033/viewer/2022051616/554f8271b4c9052a518b4d6f/html5/thumbnails/21.jpg)
© 2011
Step 2: Add files
APEX_JAVASCRIPT API
Add_library
Add_onload_code
Add_inline_code
APEX_CSS API
Add_file
Add
22
![Page 22: APEX 4.0 Plug-Ins: How to use them ..., How to build them ...](https://reader033.fdocuments.us/reader033/viewer/2022051616/554f8271b4c9052a518b4d6f/html5/thumbnails/22.jpg)
© 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
![Page 23: APEX 4.0 Plug-Ins: How to use them ..., How to build them ...](https://reader033.fdocuments.us/reader033/viewer/2022051616/554f8271b4c9052a518b4d6f/html5/thumbnails/23.jpg)
© 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
![Page 24: APEX 4.0 Plug-Ins: How to use them ..., How to build them ...](https://reader033.fdocuments.us/reader033/viewer/2022051616/554f8271b4c9052a518b4d6f/html5/thumbnails/24.jpg)
© 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
![Page 25: APEX 4.0 Plug-Ins: How to use them ..., How to build them ...](https://reader033.fdocuments.us/reader033/viewer/2022051616/554f8271b4c9052a518b4d6f/html5/thumbnails/25.jpg)
© 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
![Page 26: APEX 4.0 Plug-Ins: How to use them ..., How to build them ...](https://reader033.fdocuments.us/reader033/viewer/2022051616/554f8271b4c9052a518b4d6f/html5/thumbnails/26.jpg)
© 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
![Page 27: APEX 4.0 Plug-Ins: How to use them ..., How to build them ...](https://reader033.fdocuments.us/reader033/viewer/2022051616/554f8271b4c9052a518b4d6f/html5/thumbnails/27.jpg)
© 2011
Q & A
28
![Page 28: APEX 4.0 Plug-Ins: How to use them ..., How to build them ...](https://reader033.fdocuments.us/reader033/viewer/2022051616/554f8271b4c9052a518b4d6f/html5/thumbnails/28.jpg)
© 2011
Thank You
Email:
Blogs:
http://iadviseblog.wordpress.com/
http://apexcommunity.wordpress.com/
More APEX info on:
http://www.apexcommunity.be
29