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.

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:

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.

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.

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows: "In the earlier custom build I've kept the pkg-grid-editor.js package for editable grids"

A block of code is set as follows:

function createMyPanel(config) {
return new Ext.Panel(Ext.apply({
// Pre-configured config options go here
width: 300,
height: 300,
plugins: [ new Ext.ux.MyPluginClass() ]
}, config));
};

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

listeners: {
render: function(p){
new Ext.Resizable(p.getEl(), {
handles: 'all',
pinned: true,
transparent: true,
resizeElement: function(){
var box = this.proxy.getBox();
p.updateBox(box);
if (p.layout) {
p.doLayout();
}
if (Ext.isIE) {
this.syncHandleHeight();
}
return box;
}
});
}
}

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "It also includes a Create button which opens the same DML form page to insert new records."

"A good reference discussing creating custom components by extending, over-riding or using factory patterns can be found at: http://www.sencha.com/learn/Tutorial:Creating_new_UI_controls"

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.

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.