Oracle Application Express 4.0 with Ext JS - Mark Lancaster - E-Book

Oracle Application Express 4.0 with Ext JS E-Book

Mark Lancaster

0,0
44,39 €

-100%
Sammeln Sie Punkte in unserem Gutscheinprogramm und kaufen Sie E-Books und Hörbücher mit bis zu 100% Rabatt.

Mehr erfahren.
Beschreibung

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.

Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:

EPUB
MOBI

Seitenzahl: 346

Veröffentlichungsjahr: 2011

Bewertungen
0,0
0
0
0
0
0
Mehr Informationen
Mehr Informationen
Legimi prüft nicht, ob Rezensionen von Nutzern stammen, die den betreffenden Titel tatsächlich gekauft oder gelesen/gehört haben. Wir entfernen aber gefälschte Rezensionen.



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
It's 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

Oracle Application Express 4.0 with Ext JS

Oracle Application Express 4.0 with Ext JS

Copyright © 2011 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: March 2011

Production Reference: 1180311

Published by Packt Publishing Ltd.

32 Lincoln Road

Olton

Birmingham, B27 6PA, UK.

ISBN 978-1-849681-06-3

www.packtpub.com

Cover Image by David Guettirrez ( <[email protected]> )

Credits

Author

Mark Lancaster

Reviewer

Vincent Stanislaus

Acquisition Editor

Amey Kanse

Development Editors

Reshma Sundaresan

Roger D'souza

Technical Editors

Gaurav Datar

Azharuddin Sheikh

Indexer

Monica Ajmera Mehta

Editorial Team Leader

Vinodhan Nair

Project Team Leader

Lata Basantani

Project Coordinator

Leena Purkait

Proofreader

Clyde Jenkins

Graphics

Geetanjali Sawant

Production Coordinator

Arvindkumar Gupta

Cover Work

Arvindkumar Gupta

About the Author

Mark Lancaster has been delivering business solutions using Oracle tools and technology since 1995. He switched to using Oracle APEX in 2007 after using MOD_PLSQL for years - "APEX is much better".

He has had the good fortune of consulting for a wide variety of organizations in industries, including commercial fishery management, mineral resources, superannuation regulation, property asset management, distance education, casinos, and debt collection.

Mark is an Oracle ACE, having been actively involved in the Oracle community for many years on national and state committees, as well as writing articles and presenting at conferences.

He is the AUSOUG QLD Branch President, and maintains a blog at http://oracleinsights.blogspot.com.

One of the really nice things about working with Oracle APEX is the sense of community you gain through the forums with people scattered all over the globe.

I've had the good fortune to have met face to face with several members of the APEX development team and APEX enthusiasts after communicating with them via forums and e-mails. It's really surprising how much personality comes through in the written word.

One of the strengths of APEX is how accessible the APEX development team is to the development community. They really are interested in your feedback and making the APEX better. It's a real buzz when one of your suggestions is incorporated into the product.

Finally, I'd like to thank my beautiful wife Jackie for giving me the time and support to write this book. Oh, and for continuing to put up with me for over twenty years now. You rock my world.

About the Reviewer

Vincent Stanislaus has been working in the IT industry for over 12 years, with half of this time spent in the Finance Industry (especially around the Global Wealth Management area) as Technical Team Leader/Senior Application Development Analyst involved in several high-profile projects.

In the last couple of years, he has been focusing on enforcing standards within the development team and is involved extensively in reviewing code to ensure that they conform to technology standards.

Early on in his career, he focused on various projects involving government organizations and universities, focusing on developing/enhancing their management systems.

He currently resides in Melbourne, Australia with his wife Robina and his two children, Jonathan and Marilyn.

www.PacktPub.com

Support files, eBooks, discount offers and more

You might want to visit www.PacktPub.com for support files and downloads related to your book.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at <[email protected]> for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

http://PacktLib.PacktPub.com

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books.

Why Subscribe?

Fully searchable across every book published by PacktCopy and paste, print and bookmark contentOn demand and accessible via web browser

Free Access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.

Instant Updates on New Packt Books

Get notified! Find out when new books are published by following @PacktEnterprise on Twitter, or the Packt Enterprise Facebook page.

Preface

Oracle Application Express (APEX) is a rapid web application development tool integrated directly into the Oracle database. APEX is a completely web-based application featuring many ready to use components, allowing developers to build and deploy professional web applications rapidly. Using SQL and PL/SQL as the development language it provides a number of advanced features out of the box, including several authentication mechanisms such as Lightweight Directory Access Protocol (LDAP), Data Access Descriptors (DAD), Single Sign-On (SSO), authorization services, built-in session state management, and logging functionality.

Modern websites are moving towards Rich Internet Applications (RIA), where web applications have many characteristics of desktop applications. This has led to the growing popularity in JavaScript libraries to provide that rich interactivity and ease the burden of providing support for multiple web browsers.

There are several excellent JavaScript libraries which provide functionality to retrieve, traverse, and manipulate the Document Object Model (DOM) using cross-browser compatible code. They also provide cross-browser event handling and Asynchronous JavaScript and XML (AJAX) functionality, for request and response objects to exchange data between the browser and server, avoiding full page reloads.

The story is very different when you examine the User Interface (UI) and User Experience (UX) enhancements currently offered by JavaScript libraries. Major libraries such as jQuery, Prototype, and MooTools choose to limit the UI and UX functionality offered. Developers are forced to integrate officially sanctioned UI extension libraries with limited sets of UI components, such as jQuery UI, Prototypes Scripty2, and MooTools.More.js extension, or integrate third-party unsupported widgets.

The notable exceptions here are the Yahoo! User Interface library (YUI) and Ext JS.

YUI provides a large collection of UI widgets in version 2, including buttons, tabs, trees, menus, sliders, charting, dialogs, rich text editors, and more. YUI released YUI 3 in September 2009, completely rebuilding the library from the ground up. In 2011, some of the major widgets have been migrated to YUI 3, with many more still to be migrated. YUI widgets have basic CSS styling only, requiring you to modify the CSS to achieve a professional finish. While YUI is a mature library, its UI components and documentation feel unfinished.

Ext JS also provides the UI widgets including tabs, charts, windows, trees, desktop styled toolbars, menus, rich text editors, calendars, layout managers, ComboBoxes, and many more. All the Ext JS widgets are styled to a very high standard, giving a professional interface out of the box. They are designed to be customizable, and at the same time, allow you to re-theme them to suit your own requirements.

The Ext JS widgets are built using an advanced JavaScript application development framework, with components constructed using object-oriented design principles. This allows you to modify the existing components easily, or combine and extend them to develop custom components.

Documentation of the Ext JS API is well organized, with clear descriptions of configuration options, properties, methods, and events for each of the components and classes making up the library. Support services include an extensive library of examples, showing individual and combined samples, very active public forums, and premium support forums.

Combining APEX with the very professional Ext JS UI components allows developers to build amazing web applications rapidly using the latest Rich Internet Application functionality.

What this book covers

Chapter 1, Setting up an Oracle APEX and Ext JS Environment, takes you through the process of setting up a productive development environment for both Oracle Application Express (APEX) and Ext JS options for setting up a local installation, where you have direct access to the database. Web servers are covered, including the Oracle HTTP Server, the Embedded PL/SQL Gateway, and the Oracle APEX Listener. Setting up on a hosted environment, where you only have web browser access, is also covered.

Automating your build processes is a great way to improve productivity. We set up a source code repository, integrating an automated backup and commit process as the first step to aid your development. A number of other automation opportunities are also discussed. By the end of the chapter, you will be fully set up and ready to code.

Chapter 2, Getting Acquainted with Ext, introduces the Ext JS API, spending time familiarizing you with some of the functionality Ext JS provides for manipulating the Document Object Model (DOM). Topics covered include how to build a standalone testing page, cross-browser element manipulation using the Ext.Element class, DOM traversal using the Ext.DomQuery class, and defining event handlers to add interactivity to your web pages.

Many of the examples are run using the Mozilla Firefox browser with the Firebug Plug-in. Firebug provides fantastic debugging tools for inspecting and editing the HTML, DOM, JavaScript, and CSS components that make up a web page. It also includes a JavaScript console, allowing you to inspect JavaScript errors and execute JavaScript code. This chapter shows you how to make use of the Firebug command-line console for quick prototyping and testing.

Chapter 3, Building a Ext JS Theme into APEX, provides a background on APEX themes and how to create a theme from scratch. A page template is developed based on the Ext.Viewport component, starting with a standalone prototype, before integrating it into an APEX page template.

Applying JavaScript DOM manipulation to page elements can result in input items appearing outside the form element, with some very nasty side effects. This chapter demonstrates the issue and shows the consequences, before providing a solution to ensure that this never happens to you.

Chapter 4, Ext Themed Regions, Labels, and Lists, develops templates for regions, labels, and lists using Ext JS components. Static region templates based on Ext.Panel are created, and then collapsible versions are added with a few lines of JavaScript to the templates. Inline error messages for labels can cause issues with page layout, so you are shown how Ext.QuickTips can be used to neatly solve the problem. Simple list templates are developed before a more complex example implementing a TreePanel is developed, showing how templates can also be used to produce JavaScript code and JSON objects, and not just HTML.

Chapter 5, Ext Themed Buttons, Popups, Calendars, and Reports, develops templates for the remaining template types: Buttons, popup list of values, breadcrumbs, calendars, and reports. The Ext JS Grid component is one of the most advanced and widely used components in the library. For the report template, you will learn how to "fake it", using the built-in functionality of an APEX Classic report and combining it with some CSS, so it looks like a read-only Ext JS Grid with AJAX paging.

Once the template types are completed, you are shown how to remove unused templates quickly using the APEXExportSplitter Java class, before publishing the theme.

Chapter 6, Adding Ext Layout Elements, offers a number of "low-hanging fruit" solutions, providing you with functionality that can significantly and broadly improve parts of your application with minimal implementation effort.

Some of the solutions improve existing HTML components, such as automatically replacing the APEX Classic DatePicker with the advanced Ext.DatePicker component, a solution to make all text areas resizable, or better still, auto-sizing so that text areas automatically grow as you type. Select lists are automatically transformed to combo boxes allowing lists to filter data progressively as more keys are typed. Completely new functionality using Ext JS components includes a tab panel template using APEX 4.0 nested sub regions, along with a toolbar and menu template.

Chapter 7, Working with Plug-ins and Dynamic Actions, introduces Plug-ins and Dynamic Actions, two of the most exciting new features in APEX 4.0 for developers. For the first time, you have the ability to add custom "widgets" easily and directly into APEX that can be used declaratively in the same way as native APEX components. Plug-ins and Dynamic Actions are supported with back-end integration, allowing developers to make use of APEX provided PL/SQL APIs to simplify component development.

APEX 4.0 introduced the Number Field as a new item type, allowing you to configure number range checks by optionally specifying minimum and maximum value attributes. This chapter provides a gentle introduction to the Plug-ins and Dynamic Actions, building a better Number Field than the native APEX item type.

Chapter 8, Data Stores, AJAX-enabled Plug-ins, and Dynamic Actions, continues working with Plug-ins, creating a complex ComboBox Plug-in, dealing with more advanced Plug-in concepts, including AJAX processing and interacting with Dynamic Actions.

ComboBoxes use data stores, providing the Ext JS framework with the ability to store data on the client browser, acting much as an in-memory database. This makes the process of integrating AJAX functionality into Plug-ins far simpler, because AJAX processes are focused on just passing data between the client browser and the database. The Ext components already contain the client-side functionality to update the display.

For the ComboBox, you are taken through the process of modifying the Ext JS components to work within the Dynamic Actions framework.

Chapter 9, Getting Interactive with GridPanels, integrates the Ext JS GridPanel, one of the most powerful and widely used components in Ext JS, into APEX. Taking the approach of extending existing functionality in APEX, the GridPanel is integrated as a Plug-in for classic reports.

The GridPanel Plug-in includes column management features including sorting, resizing, drag-and-drop column reordering, and show/hide columns. APEX functionality is combined to make the GridPanel stateful, saving user settings back into APEX preferences.

Chapter 10, IFrame Tabs, Panels, and Popup Windows, shows you how iFrames can completely transform the way your APEX applications work. This chapter looks at using iFrames in three different ways: Embedding other pages within a page using iFramed Panels, making modal popup windows, and creating a tabbed document interface, allowing users to easily switch backward and forward between pages without opening multiple browser tabs.

Chapter 11, Performance Tuning your JavaScript, rounds out the book by looking at performance tuning your JavaScript. Topics look at ways of keeping JavaScript lightweight, using recommendations from Yahoo! and Google add-ons for Firebug.

Reducing file size at the source is also covered, learning how to use JSBuilder2 to build a customized lighter version of the Ext Library with unused components removed. JSBuilder2 is also used to combine and minify custom application JavaScript.

What you need for this book

At the absolute minimum, this book requires basic skills in Oracle Application Express, access to an Oracle Application Express development environment through a web browser, and the Ext JS library.

Oracle Application Express and Ext JS library are both directly accessible on the Internet:

Oracle provides an online Application Express evaluation instance, where you can request a workspaceSencha provides free CDN hosting (cache delivery network) for the Ext JS framework

Productivity wise, a better approach is to set yourself up properly with a local environment. Typically this will be a development database and web server, set up by your company's database administrators, but could just as easily be Oracle Database Express Edition (XE), a free edition of the database running on your computer.

Running a local web server on your computer will greatly assist with JavaScript development, saving time by editing the file directly on the web server, rather than the save-deploy-test cycle. It also reduces friction in a team environment, when that little change you make breaks every page in the application. You can happily work in isolation until you are ready to deploy to a wider audience.

Having good editing and debugging tools makes any developer more productive. Long gone are the days where Oracle database development was done using SQL*Plus and Notepad (or vi). Most developers will already have their favorite editor, either one of the excellent free tools SQL Developer or JDeveloper provided by Oracle, or an equivalent commercial product.

Similarly, you can do web development using any plain text editor to edit your HTML, CSS, and JavaScript. A more powerful open source environment is Aptana Studio.

Aptana Studio is a complete web development environment that combines powerful authoring tools for HTML, CSS, and JavaScript. It provides JavaScript code completion for all the popular JavaScript libraries including Ext JS, and even provides code completion for your own JavaScript libraries.

Mozilla Firefox and Firebug are an absolute must have for working on your live application. Firebug allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Many of the examples in this book depend entirely on Firebug, either issuing commands from the console, inspecting HTML, and CSS, or inspecting and debugging AJAX requests from the browser to the server.

You'll also need other tools such as image editors, version control, and FTP tools, but they are less essential at the beginning.

Who this book is for

This book is intended for application developers who are building web applications using the Oracle Application Express development environment.

In combination with Ext JS, a cross-browser JavaScript library for building rich internet applications, you will learn how to create an innovative, visually appealing web user interface with most of the characteristics of the desktop applications.

The majority of Oracle Application Express developers come from a database development background, so they already have the necessary database skills, but are less familiar with web development HTML, CSS, and JavaScript syntax.

You may already be an experienced Application Express developer, looking to take your applications to the next level, to go beyond the "out of the box" functionality.

If so, this book is for you.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.

If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or e-mail <[email protected]>.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.

Piracy

Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at <[email protected]> with a link to the suspected pirated material.

We appreciate your help in protecting our authors, and our ability to bring you valuable content.

Questions

You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.

Chapter 1. Setting up an Oracle APEX and Ext JS Environment

In this chapter, we will go through the process of setting up a productive development environment for both Oracle Application Express (APEX) and Ext JS.

APEX applications are accessed by a web browser via an HTTP Server, which may use the Oracle APEX Listener, Oracle HTTP Server with the mod_plsql plug-in, or the Embedded PL/SQL Gateway to act as the web server.

Each of the web server options has advantages and disadvantages. We will examine the relevant merits of each option separately, before showing how to configure them to support development with Ext JS.

Setting up a development environment is more than just installing the relevant software. It's also about managing versioning and dependencies of your code, and configuration files and other project assets. Automating your backup and build processes ensures that you are able to deliver your software in a repeatable and consistent manner. Regular software releases should be a straightforward activity and not a major issue.

Making good choices setting up your development environment at the beginning of a project can be enormously beneficial for the entire lifecycle of the project. Getting it wrong can be equally as bad!

This chapter covers:

APEX installation considerationsBrief overview of the Ext JS SDKMerits of each of the web tier options: Oracle APEX Listener, Oracle HTTP Server with the mod_plsql plug-in, and the Embedded PL/SQL GatewayLoading the Ext JS SDK on each of the web tier options, and also onto hosted environments where you don't have direct access to the web serverSetting up a Subversion source code repository for project assetsAutomating backup and build processes to simplify application deployments and reduce errors

By the end of the chapter, you will be fully set up and ready to code.

Setting up for success

One of the reasons for the outstanding success of Oracle APEX is that you can build applications really quickly. Within a couple of hours, you can have a development database set up, and using the built-in themes, you've started building an application.

This can be really dangerous for us as developers. At the beginning of a project, particularly when you're using a new or unfamiliar technology, there is a pressure to prove yourself—either as an individual starting a new role or as a team proving a technology to management.

Experienced programmers recognize this; the challenge is convincing everyone involved on what the ultimate goals of the project are, and not just take a short-term, short-sighted approach.

While not a dedicated practitioner of the methodology, some of the principles behind the Agile Manifesto (http://agilemanifesto.org/principles.html) are a great reminder of on what we should be focusing.

The ultimate goal of any project is to write valuable software, and by valuable I mean software that is going to be used and is useful. There is no point writing software unless it delivers real business outcomes—either tangibly in increasing business revenue, streamlining business processes, or less directly by reducing time spent on non-productive activities.

Working software is the primary measure of progress. The more time that we, as developers, can spend on regularly delivering valuable software in short time periods, the more successful our project is.

Regularly deploying working software implies that we need an efficient build process. This is the art of maximizing the amount of work not done! By taking a little extra time at the beginning to set up our development environment properly, it should be largely self sustaining and require almost no ongoing maintenance.

Installing Oracle APEX

Oracle APEX 4.0 requires a minimum database edition of 10.2.0.3, or Oracle XE, which, despite reporting as being 10.2.0.1, includes additional features that didn't make it into the supported versions of the database.

Note

This book won't be going into the details on how to install Oracle APEX into the database, as that is very well covered by the documentation provided with the product and available online at http://download.oracle.com/docs/cd/E17556_01/doc/install.40/e15513/toc.htm.

Oracle APEX now comes pre-installed on all editions of Oracle database 11.1 upwards, and is also pre-installed in Oracle XE the free edition of the database. In both cases, you will need to upgrade your Oracle APEX installation to Oracle APEX 4.0 the version covered in this book. Go to Oracle Application Express on the Oracle Technology Network (OTN) at http://www.oracle.com/technetwork/developer-tools/apex/index.html, and download the latest production version of Oracle APEX.

Regardless of whether you're installing or upgrading Oracle APEX, there is one important decision you need to consider before you proceed. By default, Oracle APEX is installed into the SYSAUX tablespace.

Note

You have the option when installing or upgrading to specify an alternative tablespace.

The SYSAUX tablespace is installed as an auxiliary tablespace to the SYSTEM tablespace when the database is created. It holds a number of database components that you may or may not use, depending on the nature of your applications, such as Oracle Text, Oracle Spatial, and Oracle interMedia.

It also contains components such as Enterprise Manager and Automatic Workload Repository which, depending on several factors, such as number of active sessions, data retention period, and snapshot intervals, can require significant storage volumes and contain highly volatile data, leading to disk I/O contention.

By installing Oracle APEX into its own tablespace, database administrators (DBAs) are able to manage it in isolation from other database components, allowing more flexibility in performing database operations. For example, you can reduce I/O contention by storing the underlying data files of the APEX tablespace on different disk drives to the SYSAUX tablespace.

Similarly, taking the individual Oracle APEX tablespace offline to perform a data recovery operation allows other applications to remain online, providing better overall availability. Or in another scenario, take advantage of transportable tablespaces to copy your Oracle APEX environment to another database quickly.

Downloading Ext JS

The Ext JS SDK (software development toolkit) can be downloaded as a single zipped file from the Sencha website at http://www.sencha.com/products/extjs/download. This book is based on version 3.3.1, the latest release at the time of writing. As the Ext framework is now quite mature, you should be safe to use later releases of version 3 with this book, should they be available.

Ext JS is released under both open source and commercial licenses to suit both implementations and provides support to developers through community support forums, as well as subscription-based support and maintenance.

The download of the Ext JS SDK is nearly 15MB, and once extracted, is roughly 105MB. The reason for the large size becomes apparent once we start examining the extracted files.

The screenshot shows the contents of the top directory within the Ext JS SDK zip file. It comprises everything you need to work with Ext JS, including documentation, resources, and examples.

Let's briefly go through the directories shown in the screenshot.

File/folder

Description

adapter

Contains the ext-base.js file used to provide browser-independent base-level DOM and AJAX functions for use by the main Ext JS library. It also contains adapter files that allow you to work with other JavaScript libraries, including jQuery, Dojo, and YUI.

docs

Documentation for the library.

examples

Individual component and combination examples. This is a veritable treasure trove of information and working solutions to be integrated into Oracle APEX.

pkgs

Assembled subsets of the JavaScript library, designed to assist building customized versions of Ext JS.

resources

Images, CSS files, and Flash objects used by Ext JS.

src

JavaScript source code for Ext JS.

test

Test cases used by Sencha for automated testing harness.

ext.jsb2

Control file used to merge JavaScript files from src into pkgs files, and also ext-all.js and ext-all-debug.js. Merged files have the comments stripped and code minified. Merged files with the -debug suffix are a non-compressed version, preferred during development so that debugging is easier.

ext-all.js

Full Ext JS library, excluding the adapter, compressed and minified.

The uncompressed version without comments, ext-all-debug.js, is useful for debugging during development. The uncompressed with comments version is ext-all-debug-w-comments.js.

*other

Other files not described: index.html, gpl-3.0.txt, INCLUDE_ORDER.txt, license.txt, and so on.

As you can see from the relative sizes of the folders, the Ext JS SDK has placed an emphasis on documentation and examples. This greatly assists in learning to use the library and is a real credit to the Ext JS developers.

The ext-all.js file and the adapter and resources folders are the only files you need to deploy to your production web server. While saying this, my preference is to deploy the entire SDK. That way all the documentation and examples are on hand.

Note

Many of the examples need to be run from a web server and cannot be run directly from your computer. This is also true of the documentation. So if you're wondering why you just see a spinning image when you open the documentation file locally, now you know.

Which web server to use?

Oracle APEX is accessed through a browser via a HTTP server, which may be the Oracle HTTP Server (OHS) with the mod_plsql plug-in, the Embedded PL/SQL gateway (EPG), or most recently the Oracle APEX Listener certified against Oracle WebLogic Server, OC4J, and Oracle Glassfish Server. The APEX Listener can be installed on any modern J2EE Server, such as Tomcat.

Note

The APEX 4.0 Installation Guide covering each of the web server options is available at http://download.oracle.com/docs/cd/E17556_01/doc/install.40/e15513/toc.htm.

Here, I'm assuming you're working in a team environment, and we're setting up a dedicated development web server, only accessible within the intranet.

I'll go through the relevant merits of each option separately, before showing how to configure them to support development with Ext JS. Once again, rather than repeat the standard installation documentation provided by Oracle, I will simply assume that you have made your choice and installed your preferred web server into your development environment together with Oracle APEX.

Storing your web assets

The virtual path the web server uses to point to the images directory distributed with the Application Builder in Oracle APEX defaults to the alias /i/.

Regardless of which web server you use, it's a good idea to keep your web assets in a different location from where Oracle stores them. Later sections in this chapter for each of the web server options will cover storing assets in a different location and configuring the web server to reference your assets with the alias /ux/, which stands for user extensions.

Storing your web assets in a different location makes life a whole lot easier when it comes to upgrading Oracle APEX again. All you have to do is follow the upgrade notes, secure in the knowledge that you are not going to delete any of your application files accidentally.

It allows your server administrator to secure the Oracle APEX directories, preventing anyone from making changes to the standard Application Builder configuration. Similarly, your application directory can be accessed only by the necessary people.

Customizing application builder files

If you ever have the need to modify some of the CSS rules or JavaScript provided by Oracle, here is one way to do it. By copying the Oracle APEX directories from the /i/ location to your /ux/ location, you can customize the standard Application Builder files without impacting anyone else.

To use your customized version, you need to update the application preferences image prefix to point to your alias, as shown in the following screenshot. To edit application properties, log into Oracle Application Express, and then select the appropriate application from the Application Builder. Click the Edit Application Properties button, top right on the Application Definition page.

Oracle HTTP Server

The Oracle HTTP Server (OHS) is the most mature of the three web server options available, and is the typical choice for Oracle APEX production and development environments today. OHS is based on the proven Apache web server, with the Apache code base dependant on which version of the database you are using. Oracle HTTP Server, distributed with Oracle Database 11g, uses the Apache 2.2 code base; on the other hand, Oracle Application Server 10g is based on Apache 1.3 or Apache 2.0 for the standalone version.

Apart from the proven reliability and broad support available for the Apache web server software, the other main advantage cited for using OHS is the ability to separate the application server tier from the database tier, allowing the web server to be installed on a different server from the database.

Note

For production environments, where factors such as security, performance, and load balancing have a much higher priority, the ability to separate the application server tier from the database tier is an important consideration.

However, as we are looking at a development environment, the restricted-use license for OHS will probably be a deciding factor. Included with the Oracle Database 10g and 11g releases is a restricted use licence for OHS for all editions except Oracle XE, which allows OHS to be used, provided it is on the same server as the database. Running OHS on another server requires the other server to be licensed to use OHS either through a database licence or an Oracle Application Server licence.

One of the most confusing aspects of OHS is which version to install, as Oracle has released over 10 different versions of OHS, (see My Oracle Support Note 260449.1 for the complete list).

Note

Do not blindly install the version supplied with the database. You should carefully decide the version you'd like to install.