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:

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

29