St Hilaire Ajax Start Odtug Nov 2009


Published on

how to integrate ajax into apex and add more interactive effects

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • What we will not discuss All of the options – never enough time The only way to do something – There are other approaches Copyright © 2005 BAE Systems. All rights reserved.
  • St Hilaire Ajax Start Odtug Nov 2009

    1. 1. APEX and AJAX – Where to Start Nov 2009 Tim St. Hilaire
    2. 2. Introduction <ul><li>We will build a series of examples that achieve the basic components of dynamic actions within APEX </li></ul><ul><li>Partial Page Refresh reports </li></ul><ul><li>Calling On Demand Processes </li></ul><ul><li>Setting Session Variables with AJAX </li></ul><ul><li>Consuming Pages </li></ul><ul><li>Consuming Partial Pages </li></ul><ul><li>Debugging Notes </li></ul>
    3. 3. Report Refresh – Current Behavior <ul><li>Every button press will submit the entire page </li></ul><ul><li>When a page is submitted, it re-draws the entire content </li></ul><ul><li>NOTE – As APEX continues to improve, other components employ sophisticated partial page and dynamic refresh capabilities. Example – Pagination in PPR template reports and Interactive reports </li></ul>
    4. 4. Demonstration
    5. 5. Report Refresh – Basic Refresh <ul><li>Using a feature that is provided with APEX to provide partial page refresh capabilities for pagination. </li></ul><ul><li>The example shows how a java script call can re-query a report region. </li></ul><ul><li>Two important pieces are required </li></ul><ul><ul><li>Definition of the Refresh Capability </li></ul></ul><ul><ul><li>Initializing an Instance of the Object </li></ul></ul>Definition
    6. 6. Report Refresh – Basic Refresh <ul><li>Note: The initialize is easiest to place in the region header </li></ul><ul><li>Why? </li></ul><ul><li>The Template Substitution Variable #REGION_ID# will only work within the APEX region you are in. </li></ul>Initialize the Object Calling the Refresh
    7. 7. Demonstration
    8. 8. Report Refresh – Basic Refresh <ul><li>Issue: The report is refreshed, but the SEARCH box is not used in the report </li></ul>
    9. 9. Report Refresh – Session Variable <ul><li>Understanding the values of session variables is very important with AJAX inside of APEX. The frameworks session variable construct is very powerful and flexible. </li></ul><ul><li>Using an ON DEMAND process as a simple request to allow the session variable to be set </li></ul>
    10. 10. On Demand Processes – Basic Example <ul><li>An On Demand Process are officially located under Application Processes and can be called as part of page processing, but are defined at the APPLICATION level as a Shared Component </li></ul>
    11. 11. On Demand Processes – Basic Example <ul><li>The On Demand Process is an easy gateway for the PL/SQL developer to access their PL/SQL code </li></ul>
    12. 12. Demonstration of On-Demand Usage
    13. 13. Page, Application, or Global Session Variables? <ul><li>You may have noticed, in the last example, that the On-Demand Process used an undeclared type of variable. </li></ul><ul><li>In PL/SQL  wwv_flow.g_x01 through wwv_flow.g_x10 </li></ul><ul><li>In JavaScript  Parameter name x01 through x10 </li></ul><ul><li>Handy, but use carefully – generic placeholders with complex logic can get confusing </li></ul><ul><li>Page or Application items serve the same purpose, but need to be declared. A little extra time up front, but clarity in where and how used. </li></ul>
    14. 14. On Demand Processes – Naming <ul><li>As part of the design activity, keep in mind that you may have multiple On Demand Processes in an application. Take some time to name them in a way that is easy to understand and manage as your application grows. </li></ul><ul><li>Example Process name = AJAX_MULTI_INSERT </li></ul><ul><li>Example Process name = AJAX_MULTI_DELETE </li></ul><ul><li>How could these names be improved? </li></ul>
    15. 15. Note on JS Sources <ul><li>The sources for this code is available on the APEX installation media </li></ul><ul><li>Note: a_report actually calls htmldb_Get </li></ul>
    16. 16. On Demand Processes <ul><li>The flow used in the example shown is as follows: </li></ul><ul><li>The JavaScript call initiates the On Demand Process call </li></ul><ul><li>The On Demand process – contains the logic required to gather the session parameters and pass them to the PL/SQL layer </li></ul><ul><li>The PL/SQL layer contains the business logic to interact with the table data </li></ul><ul><li>After the On Demand process is completed, the previously shown feature to refresh the report in initiated by the JavaScript </li></ul>JavaScript On Demand Process PL/SQL Tables AJAX – Report Refresh
    17. 17. Debug Notes <ul><li>On Demand processes are not the easiest thing to debug… </li></ul><ul><li>Using the NET feature of Firebug makes the job much easier: </li></ul>
    18. 18. AJAX  HTML Injection <ul><li>No – Not Hacking </li></ul><ul><li>Modification of the DOM to change the user interface is the primary goal </li></ul><ul><li>It is necessary to understand where you desire the HTML injected into </li></ul>I want my HTML to go here
    19. 19. Demonstration
    20. 20. Consuming APEX Pages <ul><li>Using the HTMLDB_GET, it is possible to consume entire APEX pages. </li></ul><ul><li>Although you can, doesn’t mean you should…. There are issues with branching and processing using this method </li></ul><ul><li>Additional features inside the HTMLDB_GET package allows the partial retrieval of pages </li></ul>
    21. 21. Consuming APEX Pages (partial) <ul><li>Two settings helped make this example work </li></ul><ul><li>Custom Page Template </li></ul><ul><li>Option on the .get method </li></ul>
    22. 22. On Demand Processes – Design Notes <ul><li>As with any programming, it is easy to get caught up in the multiple places to put variables and code </li></ul><ul><ul><li>Where is JavaScript code placed? </li></ul></ul><ul><ul><ul><li>Per Page in the Header </li></ul></ul></ul><ul><ul><ul><li>Page 0 </li></ul></ul></ul><ul><ul><ul><li>Region Source with no template </li></ul></ul></ul><ul><ul><ul><li>Region Header </li></ul></ul></ul><ul><ul><ul><li>Region Footer </li></ul></ul></ul><ul><ul><li>Where is business Logic? </li></ul></ul><ul><ul><ul><li>PL/SQL Packages </li></ul></ul></ul><ul><ul><ul><li>Page Processes </li></ul></ul></ul><ul><ul><ul><li>On Demand Processes </li></ul></ul></ul><ul><ul><li>Where is UI Logic? </li></ul></ul><ul><li>Come up with a practice that works for you / your organization </li></ul><ul><ul><li>Document it </li></ul></ul><ul><ul><li>Communicate it </li></ul></ul><ul><ul><li>Follow it </li></ul></ul>
    23. 23. Questions?
    24. 24. References <ul><li>Many thanks to all those that have come before me, and for those that take the time to help others grow and improve their skills by sharing their time an knowledge. </li></ul><ul><li>APEX </li></ul><ul><li> – Forum, Docs, Hosted Workspace </li></ul><ul><li> - Carl Backstrom JSON & AJAX </li></ul><ul><li> – Carl Backstrom Variety Examples </li></ul><ul><li> – Denes Kubicek – Everything! </li></ul><ul><li>Other Notes </li></ul><ul><li>Syntax Highlighter </li></ul><ul><ul><li> </li></ul></ul><ul><li>ApexLib </li></ul><ul><ul><li> </li></ul></ul><ul><li>Author </li></ul><ul><li>Updated and corrected presentation will be available on my blog </li></ul><ul><li> – This example application </li></ul><ul><li>Tim St. Hilaire - </li></ul>
    25. 26. Disclaimer <ul><li>Marks and Brands are the property of their respective owners. Usage is for discussion purposes only. No ownership assumed or implied. </li></ul><ul><li>The comments and opinions expressed here are sole responsibility of the author and not of his employer or any other party </li></ul><ul><li>No trees were harmed during the creation of this presentation. However, a great number of electrons were terribly inconvenienced. </li></ul>