E-book details

Oracle Application Express 4.0 with Ext JS. Deliver rich desktop-styled Oracle APEX applications using the powerful Ext JS JavaScript library

Oracle Application Express 4.0 with Ext JS. Deliver rich desktop-styled Oracle APEX applications using the powerful Ext JS JavaScript library

Mark Lancaster

Ebook
Modern web-based applications are moving rapidly away from simple HTML pages, with users expecting desktop styled rich internet applications. Oracle Application Express includes multiple built-in interfaces especially designed for adding JavaScript libraries and components. Ext JS is a polished, high performance set of customizable UI widgets with a well designed and extensible Component model. Combining Ext JS components with the well engineered server side processing provided by Oracle APEX is a recipe for success. Written by Oracle ACE, Mark Lancaster, this book is a complete practical guide to building robust desktop-styled web applications using Oracle Application Express and the powerful Ext JS JavaScript library This book starts off by setting up a productive environment for Oracle APEX and Ext JS, preparing you to get ready to code, and then gradually introducing you to the Ext JS API. You then create a theme based on Ext JS into APEX from scratch, starting with integrating the Ext JS library into the page template, then covering all the template types. You further enrich your interface by integrating Ext JS form components and Ext JS layout elements. You are shown how to integrate components including tab panels, toolbars and menus. Existing components are also enhanced, transforming select lists into auto-completing combo boxes and text-areas auto-sizing as you type.Using exciting new Plug-ins feature, you will learn how to develop custom APEX components that can be used declaritively. This book extends native APEX functionality by integrating Ext JS widgets and components with integrated server-side JavaScript generation, AJAX processing and validation.The book then covers integrating Plug-ins with APEX provided Dynamic Actions JavaScript. You proceed further to build advanced interactive components using AJAX enabled trees and grids. Then you will see how to use the iFrames component along with page templates to build a multi-page interface and also deal with JavaScript communication between iFrames. Finally, you will integrate Ext JS with jQuery using the Ext jQuery adaptor. This book also covers examples of jQuery functionality interacting with Ext JS. By the end of this book you will also learn to improve the performance of your JavaScripts.
  • Oracle Application Express 4.0 with Ext JS
    • Table of Contents
    • Oracle Application Express 4.0 with Ext JS
    • Credits
    • About the Author
    • About the Reviewer
    • www.PacktPub.com
      • Support files, eBooks, discount offers and more
      • Why Subscribe?
      • Free Access for Packt account holders
      • Instant Updates on New Packt Books
    • Preface
      • What this book covers
      • What you need for this book
      • Who this book is for
      • Conventions
      • Reader feedback
      • Customer support
        • Downloading the example code
        • Errata
        • Piracy
        • Questions
    • 1. Setting up an Oracle APEX and Ext JS Environment
      • Setting up for success
      • Installing Oracle APEX
      • Downloading Ext JS
      • Which web server to use?
        • Storing your web assets
        • Customizing application builder files
      • Oracle HTTP Server
        • Loading Ext JS onto the Oracle HTTP Server
      • Embedded PL/SQL Gateway
        • Loading Ext JS onto the Embedded PL/SQL Gateway
      • Oracle APEX listener
        • Loading Ext JS for the Oracle APEX listener
      • Overviewing the production setup
      • Using Ext JS in a hosted APEX environment
      • Installing a source code repository
      • Automating the build process
        • Configuring and using APEXExport
        • More ideas for automating the build process
      • Setting up a local web server
      • Summary
    • 2. Getting Acquainted with Ext
      • Building a sandbox
      • Cross-browser DOM manipulation with Ext.Element
        • Heavyweight versus flyweight
        • Sizing and positioning
        • CSS classes and styling
        • DOM traversal
        • Selecting multiple elements
        • DOM manipulation
      • Defining event handlers
        • Using event delegation to reduce memory consumption
        • One-off events
      • Parameter passing using object notation
        • Old-school parameters
        • Using object notation
        • Basic syntax
      • Use namespacing to avoid collisions
        • Ext.namespace
      • Ext.BLANK_IMAGE_URL
      • Summary
    • 3. Building a Ext JS Theme into APEX
      • Theme basics
        • Separation of concerns
        • Standard themes
      • Creating a theme
      • Building a Viewport Page template
        • Starting with a standalone template
        • Loading the page template into APEX
      • Issue when input items are outside the form
        • Ensuring that input items always remain with the form
      • Summary
    • 4. Ext Themed Regions, Labels, and Lists
      • Region templates
        • Report Region
        • Form Region
        • Additional region templates
      • Label templates
        • Optional label
          • QuickTips for error messages
        • Optional label with help
        • Mandatory label
        • Mandatory label with help
        • Hidden label
      • List templates
        • Vertical unordered list without bullets
        • Vertical unordered list with bullets
        • Building an Ext JS tree template using lists
          • APEX 4.0 tree template
          • Prior APEX versions tree template
          • Highlighting the current node
          • Customizing individual nodes
      • Summary
    • 5. Ext Themed Buttons, Popups, Calendars, and Reports
      • Button templates
        • Sliding doors meet CSS sprites
          • APEX sliding door CSS sprite button template
        • Building a hideous Ext.Button
        • Converting our buttons
      • Popup List of Values template
      • Breadcrumb templates
        • Benefits of using breadcrumbs
        • When not to use breadcrumbs
        • Basic horizontal breadcrumb template
      • Report templates
        • Its a classic
          • A better sorting indicator
          • CSS for the standard report
      • Calendar templates
        • Removing unused templates quickly
      • Publishing your theme
      • Summary
    • 6. Adding Ext Layout Elements
      • Speed dating with a Date Picker
        • Converting Classic Dates to the Ext.DatePicker
      • Resizable text areas
      • Auto-sizing text areas
      • Auto-completing text fields
        • Adding auto-complete to select lists
      • Building tab panels using subregions
        • Building the tab panel template
        • Configuring the tab panel template
      • Toolbars and menus
        • Attaching the toolbar to the center panel
      • Summary
    • 7. Working with Plug-ins and Dynamic Actions
      • A home for your plug-ins and dynamic actions
      • Building a better Number Field
        • Creating a plug-in item
        • Defining the plug-in Callback functions
        • Creating a page item based on the Number Field plug-in
        • Render functionality for the Number Field plug-in
        • Validation functionality for the Number Field plug-in
      • Summary
    • 8. Data Stores, AJAX-enabled Plug-ins, and Dynamic Actions
      • Storing data on the browser client
        • Using Data Stores with large datasets
      • Building a ComboBox plug-in
        • Defining the ComboBox plug-in
        • Defining the ComboBox plug-in callback functions
        • Rendering functionality for the ComboBox plug-in
        • AJAX functionality for the ComboBox plug-in
        • Using the Ext.XTemplate to provide enhanced formatting
        • Validation functionality for the ComboBox plug-in
      • Mixing ComboBoxes with Dynamic Actions
        • Integrating plugins with the Dynamic Action framework
        • Defining custom events for the ComboBox
      • Summary
    • 9. Getting Interactive with GridPanels
      • Components making up a GridPanel
        • Defining the Data Store
        • Configuring the Column Model
        • Defining the GridView
        • Defining the Selection Model
        • Built-in features
      • Getting the GridPanel into APEX
        • Testing the concepts first
          • Converting APEX-generated table into a GridPanel
            • Idea: Use APEX report table as local Data Store
          • GridPanel pagination using APEX Partial Page Refreshes
      • GridPanel as a region plug-in
        • Plug-in definition
        • Plug-in package
        • Render functionality for the GridPanel plug-in
          • Minor pagination issue
        • AJAX functionality for the GridPanel plug-in
        • Building a custom DataReader
        • Creating a custom TableGrid component
        • Making the TableGrid Stateful
      • Using the TableGrid
        • TableGrid template
        • Convert Classic Reports to TableGrids
      • Summary
    • 10. IFrame Tabs, Panels, and Popup Windows
      • Embedding pages using iFrame panels
        • Reusable iFrameComponent
        • Resizable iFrame panel
        • Pre-configured components using the factory pattern
        • IFrame panel factory pattern
      • IFrame panel plug-in
        • Plug-in package
        • Render functionality for the iFrame panel plug-in
      • Modal popup windows
        • Modal iFramed window
        • Popup window component
        • Ext.apex.PopupWindow example
          • Link Column settings
            • Classic Report link settings
          • Create Button settings
          • Closing the PopupWindow
          • Cancel Button functionality
          • Apply Changes functionality
      • Creating a tabbed document interface
        • Examining the HTML page
        • Examining the JavaScript
        • Adding the tabbed document interface to APEX
      • Summary
    • 11. Performance Tuning Your JavaScript
      • Best practices for JavaScript and CSS
        • HTTP compression
        • Externalize JavaScript and CSS
        • Combining JavaScript and CSS files
        • Minifying JavaScript and CSS files
        • Ordering CSS and JavaScript files
      • JSBuilder2 installation and usage
        • Installation
        • JSBuilder2 usage
        • JSB2 file format
      • Eliminating unused Ext JS library components
        • Removing duplicate functionality
        • Removing unused components
      • Minimizing Application JavaScript
      • Summary
    • Index
  • Title: Oracle Application Express 4.0 with Ext JS. Deliver rich desktop-styled Oracle APEX applications using the powerful Ext JS JavaScript library
  • Author: Mark Lancaster
  • Original title: Oracle Application Express 4.0 with Ext JS. Deliver rich desktop-styled Oracle APEX applications using the powerful Ext JS JavaScript library
  • ISBN: 9781849681070, 9781849681070
  • Date of issue: 2011-03-23
  • Format: Ebook
  • Item ID: e_3azr
  • Publisher: Packt Publishing