Forms  can  do  that,why  can’t  APEX?

09.04.2013APEX World

Matt Nolan, Peter RaganitschDonnerstag, 11. April 13

Peter  RaganitschFOEX GmbH

peter.raganitsch@tryfoexnow.comh7p://www.oracle-­‐and-­‐apex.com

@PeterRaganitsch

Donnerstag, 11. April 13

Ma7  NolanFOEX GmbH

ma7.nolan@tryfoexnow.comh7p://blog.theapexfreelancer.com/

@apex_freelancer

Donnerstag, 11. April 13

Forms  can  do  that...

...why  can’t  APEX?

Donnerstag, 11. April 13

What  is  Oracle  Forms?

• proven• efficient• old-­‐style

Oracle  Forms  11gR2

=Weblogic  Server

Donnerstag, 11. April 13

Forms  Examples

Donnerstag, 11. April 13

Forms  Examples

Donnerstag, 11. April 13

Forms  Examples

Donnerstag, 11. April 13

Forms  Examples

h7p://www.dot.state.mn.us/bridge/hydraulics/hydinfra/pdf/expipeinspform.gifDonnerstag, 11. April 13

Forms  Examples

h7p://forums.asp.net/t/1781747.aspx/1Donnerstag, 11. April 13

Forms  Examples

h7p://www.ibm.com/developerworks/data/library/techarTcle/dm-­‐0907oracleappsondb2/OracleForms1.jpgDonnerstag, 11. April 13

What  is  Oracle  APEX?

Donnerstag, 11. April 13

What  is  Oracle  APEX?

• light-­‐weight  HTML  interface• generated  in  the  DB  • modern  layout• PL/SQL• efficient  development• no  cost  OpTon

Donnerstag, 11. April 13

APEX  Examples

Donnerstag, 11. April 13

APEX  Examples

Donnerstag, 11. April 13

APEX  Examples

Donnerstag, 11. April 13

APEX  Examples

Donnerstag, 11. April 13

APEX  Examples

Donnerstag, 11. April 13

APEX  Examples

Donnerstag, 11. April 13

Why  leave  Forms?

• unclear  future• incompaTble  (6i  under  latest  Windows)• not  modern• not  enough  forms  specialists• costs

Donnerstag, 11. April 13

Gartner-­‐Study

• Oracle  Forms  is  one  of  the  oldest  (if  not  the  oldest)  toolsets  for  client/server  applica7on  development  (AD)  on  the  market  ...  and  is  s7ll  widely  deployed• Gartner  believes  it  is  not  best  posi7oned  for  many  next-­‐genera7on  AD  challenges

Quelle:  h7p://www.gartner.com/technology/reprints.do?id=1-­‐198LN9P&ct=120208&st=sbDonnerstag, 11. April 13

Gartner-­‐Study

• the  least  risky  (and  oBen  the  least  costly)  migra7on  path  forward  from  Oracle  Forms  is  Oracle's  JDeveloper  IDE  and  ADF• APEX  ...  fits  the  needs  for  basic  Web-­‐based  "maintenance  forms"• However,  Oracle  APEX  is  less  suited  for  elements  of  Oracle  Forms  applica7ons  with  more  complex  business  logic  requirements

Quelle:  h7p://www.gartner.com/technology/reprints.do?id=1-­‐198LN9P&ct=120208&st=sbDonnerstag, 11. April 13

Oracle  Tools  SOD

• Oracle  ADF  is  the  tool  of  choice  for  building  applica7ons  on  Fusion  Middleware• Oracle  Applica7on  Express  (APEX)  may  provide  a  fit  as  it  leverages  PL/SQL  for  business  logic  scrip7ng,  and  offers  a  produc7ve  environment  for  simple  HTML  forms.

Quelle:  h7p://www.oracle.com/technetwork/issue-­‐archive/2010/toolssod-­‐3-­‐129969.pdfDonnerstag, 11. April 13

Forms  vs.    APEX

=

Donnerstag, 11. April 13

Forms  =  APEX

language

concepts

close  to  DB

producTvityDonnerstag, 11. April 13

Forms  =  APEX

LanguageSQL PL/SQL

Donnerstag, 11. April 13

Forms  =  APEX

Concepts

Donnerstag, 11. April 13

Forms  =  APEX

close  to  the  database

Donnerstag, 11. April 13

Forms  =  APEX

ProducTvity

1  Minute  !Donnerstag, 11. April 13

Forms  vs.    APEX

=

Donnerstag, 11. April 13

Forms  <>  APEX

Architecture

UI

Extensibility

Donnerstag, 11. April 13

Forms  <>  APEX

Architecture

Forms

Client/Server

APEX

Web

Donnerstag, 11. April 13

Forms  <>  APEX

UI

Fixed

Absolute  

Variable

HTML/CSS

Donnerstag, 11. April 13

Forms  <>  APEX

Extensibility

Java Plugins

Javascript

HTML/CSSDonnerstag, 11. April 13

Forms  like  Richness

Donnerstag, 11. April 13

Typical  Forms

• MulT-­‐Record  Blocks• List  of  Values  (mulT-­‐column)• Master-­‐Detail(s)• huge  Forms  spli7ed  into  Tabs•Windows

Donnerstag, 11. April 13

Typical  Forms  in  APEX

Donnerstag, 11. April 13

APEX:  MulT-­‐Record-­‐Block

Donnerstag, 11. April 13

APEX:  List  of  Values

Donnerstag, 11. April 13

APEX:  Master-­‐Detail(s)

Donnerstag, 11. April 13

APEX:  Form  with  Tabs

Donnerstag, 11. April 13

APEX:  Windows

javascript:popupURL('f?p=&APP_ID.:5:&SESSION.')Donnerstag, 11. April 13

Happy?

Donnerstag, 11. April 13

Improve  this  with  APEX  Plugins

and  Dynamic  AcTons  !

Donnerstag, 11. April 13

Plugin  Planorm

Donnerstag, 11. April 13

Plugin  Planorm

• Shared  Components  -­‐>  Plugins• www.apex-­‐plugin.com• BUT• doesn’t  serve  all  needs...

Donnerstag, 11. April 13

Plugins:  MulT-­‐Record-­‐Block

• jQuery  Extension• jQGrid• no  plugin  available• very  complicated

h7p://theapexfreelancer.blogspot.co.at/2010/01/jqgrid-­‐apex-­‐integraTon-­‐progress-­‐update.html  und  h7p://code.google.com/p/jqgrid-­‐for-­‐plsql/Donnerstag, 11. April 13

Plugins:  List  of  Values

h7p://www.apex-­‐plugin.com/oracle-­‐apex-­‐plugins/item-­‐plugin/skillbuilders-­‐super-­‐lov_75.htmlDonnerstag, 11. April 13

Template:  Form  with  Tabs

h7p://blog.warp11.nl/2011/04/tabs-­‐within-­‐apex-­‐using-­‐jquery/Donnerstag, 11. April 13

Plugins:  Windows

h7p://www.apex-­‐plugin.com/oracle-­‐apex-­‐plugins/dynamic-­‐acTon-­‐plugin/skillbuilders-­‐modal-­‐page_138.htmlDonnerstag, 11. April 13

DA:  Master-­‐Detail(s)

Dynamic  AcTon  on  Report  sets  hidden  Item  and  triggers  Refresh  of  TabFormDonnerstag, 11. April 13

Now  happy?

Donnerstag, 11. April 13

Welcome  to  the  Plugin  Jungle• Many  isolated  soluTons• Different  sources/authors/standards/versions• Security?• Maintenance?• Performance?• Upgrade?• Support?

Donnerstag, 11. April 13

Consistent  SoluTonJavascript  UI  Frameworks–Dojo–DhtmlX–Ext  JS–Twi7er  Bootstrap–jQuery  UI–....

Donnerstag, 11. April 13

Sencha  Ext  JSresponsiveall  components  we  needsimilar  to  forms

Donnerstag, 11. April 13

• Region'Plugins'–  'Grid'–  'Toolbar'–  'Tree'– Form'

•  Item'Plugins'– 'LOV'–  'Date'– HTML'Editor'– Text'Area'

Mapping  Widgets  to  Plugins

Donnerstag, 11. April 13

Ext  JS:  MulT-­‐Record-­‐Block

Donnerstag, 11. April 13

Ext  JS:  List  of  Values

Donnerstag, 11. April 13

Ext  JS:  Master-­‐Detail(s)

Donnerstag, 11. April 13

Ext  JS:  Form  with  Tabs

Donnerstag, 11. April 13

Ext  JS:  Windows

Donnerstag, 11. April 13

Plugin  Design

• Problem:  many  Plugins  need  to  interoperate• SoluTon:  

• Region  Hierarchy  can  dictate  who  does  what•Query  Meta  Data  to  idenTfy  relaTonships•Widgets  unique  ID  =  region/item  ID• Plugins  will  communicate  by  triggering  events•Dynamic  AcTons  listen  to  events  and  call  plugin  methods  using  event  data–Abstract  widget  javascript  methods  with  dynamic  acTon  plugins

Donnerstag, 11. April 13

Hierarchy• Top-­‐Level  Plugins  can  render  and  control  sub-­‐ordinates

Donnerstag, 11. April 13

Meta  Data

• Easily  locate  dependencies  between  plugins• Knowledge  =  Power

Donnerstag, 11. April 13

Plugin  LimitaTons  &  Workarounds

IssueLimit  of  number  of  plugin  a7ributes

• Use  child  regions  &  Query  meta  data

• Use  Text  Areas  and  JSON  objects  to  combine  several  a7ributes

Workarounds

Donnerstag, 11. April 13

Plugin  Design• Re-­‐Use  what  APEX  provides

•Meta  Data:  e.g.  “Page  Items  to  Submit”• Standard  DA  Events  and  AcTons

»apexrefresh»change»show»hide»Refresh  

init: function (options) { var me = this;

doSomething;

apex.jQuery('#' + me.id).live('apexrefresh', function (evtObj) { me.refresh(); });

}

Donnerstag, 11. April 13

Plugin  Design

Item  Plugins  (SupporTng  Common  AcTons)

»$s,  $v,  show,  hide,  enable,  disableinit: function (options) { var me = this;

// setup APEX dynamic actions apex.widget.initPageItem(me.id, { setValue: function (value, displayValue) { me.setValue(value); }, getValue: function () { return me.getValue(); }, show: function () { me.show(); }, hide: function () { me.hide(); }, enable: function () { me.enable(); }, disable: function () { me.disable(); }, nullValue: "" });}

Donnerstag, 11. April 13

Plugin  Design

Ext.applyIf(grid.listeners, { select: function (rowModel, record, index, eOpts) { apex.jQuery("#" + grid.id).trigger("gridselect.COM_PLUGIN_GRID", [{ "widget": grid, "record": record, "action": "SELECT", "index": index } ]); }});

Triggering  plugin  events

Using  Parametersthis.data.parameter

In DA Expressions

In DA Javascript Code

In DA Plugins

Donnerstag, 11. April 13

AJAXwwv_flow.showprocedure show ( p_request in varchar2 default null, p_instance in varchar2 default null, p_flow_id in varchar2 default null, p_flow_step_id in varchar2 default null, p_debug in varchar2 default 'NO', p_arg_names in wwv_flow_global.vc_arr2 default empty_vc_arr, p_arg_values in wwv_flow_global.vc_arr2 default empty_vc_arr, p_clear_cache in wwv_flow_global.vc_arr2 default empty_vc_arr, p_printer_friendly in varchar2 default 'NO', p_trace in varchar2 default 'NO', p_company in number default null, p_md5_checksum in varchar2 default '0', p_last_button_pressed in varchar2 default null, p_arg_name in varchar2 default null, p_arg_value in varchar2 default null, f01 in wwv_flow_global.vc_arr2 default empty_vc_arr, ... f20 in wwv_flow_global.vc_arr2 default empty_vc_arr, p_widget_name in varchar2 default null, p_widget_mod in varchar2 default null, p_widget_action in varchar2 default null, p_widget_action_mod in varchar2 default null, p_widget_num_return in varchar2 default null, p_widget_view_mode in varchar2 default null, p_time_zone in varchar2 default null, x01 in varchar2 default null, ... x10 in varchar2 default null, p_clob_01 in clob default null, p_lang in varchar2 default null, p_territory in varchar2 default null );

Donnerstag, 11. April 13

AJAX  API’sapex.server.process('demoProcess', { "pageItems": "P18_EMPNO", "f01": lArray, "x01": "somedata"}, { "dataType": "text", "success": function (data) { console.log(data); }});

On  Demand

Custom Ext.Ajax.request({ url: "wwv_flow.show", disableCaching: false, method: "POST", params: { "p_flow_id": Ext.getDom("pFlowId").value, "p_flow_step_id": Ext.getDom("pFlowStepId").value, "p_instance": Ext.getDom("pInstance").value, "p_request": "PLUGIN="+this.pluginAjaxId, "p_debug": this.debug, "p_widget_name": "TreeGrid", "p_widget_action": "submitCheckedNodes", “f01": nodes, // array "x01": checked, "x10": Math.random() // added to disable caching }, success: function (response, opts) { }, failure: function (response, opts) { }});

Donnerstag, 11. April 13

AJAXHandling multiple AJAX operations

CASE apex_application.g_widget_action

WHEN 'submit' THEN l_submit_result := plugin_form_dml.accept ( p_region => p_region ); WHEN 'load' THEN ....

ELSE

raise_application_error ( -20001 , 'Invalid AJAX operation: '||apex_application.g_widget_action ); END CASE;

Donnerstag, 11. April 13

AJAXAvoid Callback Nightmares (new in 4.2)

Donnerstag, 11. April 13

Important  APIs

• APEX• APEX_PLUGIN_UTIL• APEX_DEBUG• APEX_WEB_SERVICES• APEX_ERROR

• Database

• DBMS_LOB

• UTL_HTTP

• 3rd  Party

• PLJSON

• LOGGER

Donnerstag, 11. April 13

Plugin  Security

• Plugin  AJAX  Handler  is  be7er  than  an  ApplicaTon  Process  -­‐>  request  encrypted• APEX_PLUGIN_UTIL  provides  great  and  secure  FuncTons  to  execute  dynamic  SQL• Use  Binds  aka  items  e.g.  :P1_FILTER• Always  escape  Data  (transmit  and  output)• Validate  Input,  ie.  with  DBMS_ASSERT• Use  professional  Security-­‐Checkers

h7p://www.recx.co.uk/apexsec-­‐security-­‐for-­‐oracle-­‐apex.php

Donnerstag, 11. April 13

Plugin  Benefits

• Increases  Speed  of  Development

• Improves  Portability

• Separates  ResponsibiliTes• Isolates  Unit  Tests• Version  Controlable• Improves  DocumentaTon

Donnerstag, 11. April 13

Ext  JS:  combined

Donnerstag, 11. April 13

Ext  JS:  combined

Donnerstag, 11. April 13

Wait,  there  is  more  !

Donnerstag, 11. April 13

Web  Desktop

Donnerstag, 11. April 13

Conclusion

• Gartner  is  wrong• APEX  can  do  way  more  than  simple  HTML-­‐Forms  and  on-­‐screen-­‐reports• complex  screens  are  possible

Donnerstag, 11. April 13

www.tryfoexnow.com

Donnerstag, 11. April 13