www.it-ebooks.info Oracle Application Express 4.0 with Ext JS Deliver rich, desktop-styled Oracle APEX applications using the powerful Ext JS JavaScript library Mark Lancaster N professional expertise distilled BIRMINGHAM - MUMBAI www.it-ebooks.info 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 (bilbaorocker@yahoo.co.uk) www.it-ebooks.info 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 www.it-ebooks.info 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 shery 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 . www.it-ebooks.info 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-prole 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.it-ebooks.info www.PacktPub.com Support les, eBooks, discount offers and more You might want to visit www.PacktPub.com for support les and downloads related to your book. Did you know that Packt offers eBook versions of every book published, with PDF and ePub les 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 service@packtpub.com 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 Packt • Copy and paste, print and bookmark content • On 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 notied! Find out when new books are published by following @PacktEnterprise on Twitter, or the Packt Enterprise Facebook page. www.it-ebooks.info Table of Contents Preface 1 Chapter 1: Setting up an Oracle APEX and Ext JS Environment 11 Setting up for success 12 Installing Oracle APEX 13 Downloading Ext JS 14 Which web server to use? 16 Storing your web assets 16 Customizing application builder les 17 Oracle HTTP Server 17 Loading Ext JS onto the Oracle HTTP Server 19 Embedded PL/SQL Gateway 20 Loading Ext JS onto the Embedded PL/SQL Gateway 21 Oracle APEX listener 23 Loading Ext JS for the Oracle APEX listener 24 Overviewing the production setup 25 Using Ext JS in a hosted APEX environment 27 Installing a source code repository 27 Automating the build process 30 Conguring and using APEXExport 30 More ideas for automating the build process 35 Setting up a local web server 36 Summary 37 Chapter 2: Getting Acquainted with Ext 39 Building a sandbox 39 Cross-browser DOM manipulation with Ext.Element 44 Heavyweight versus yweight 46 www.it-ebooks.info Table of Contents [ ii ] Sizing and positioning 47 CSS classes and styling 48 DOM traversal 50 Selecting multiple elements 52 DOM manipulation 54 Dening event handlers 58 Using event delegation to reduce memory consumption 61 One-off events 62 Parameter passing using object notation 63 Old-school parameters 63 Using object notation 63 Basic syntax 64 Use namespacing to avoid collisions 65 Ext.namespace 67 Ext.BLANK_IMAGE_URL 67 Summary 68 Chapter 3: Building a Ext JS Theme into APEX 69 Theme basics 69 Separation of concerns 70 Standard themes 71 Creating a theme 72 Building a Viewport Page template 73 Starting with a standalone template 74 Loading the page template into APEX 80 Issue when input items are outside the form 85 Ensuring that input items always remain with the form 88 Summary 92 Chapter 4: Ext Themed Regions, Labels, and Lists 95 Region templates 96 Report Region 96 Form Region 98 Additional region templates 101 Label templates 101 Optional label 102 QuickTips for error messages 103 Optional label with help 105 Mandatory label 106 Mandatory label with help 107 Hidden label 107 www.it-ebooks.info Table of Contents [ iii ] List templates 108 Vertical unordered list without bullets 109 Vertical unordered list with bullets 112 Building an Ext JS tree template using lists 113 APEX 4.0 tree template 115 Prior APEX versions tree template 119 Highlighting the current node 121 Customizing individual nodes 124 Summary 125 Chapter 5: Ext Themed Buttons, Popups, Calendars, and Reports 127 Button templates 128 Sliding doors meet CSS sprites 128 APEX sliding door CSS sprite button template 132 Building a hideous Ext.Button 134 Converting our buttons 138 Popup List of Values template 146 Breadcrumb templates 149 Benets of using breadcrumbs 150 When not to use breadcrumbs 150 Basic horizontal breadcrumb template 150 Report templates 152 It's a classic 153 A better sorting indicator 158 CSS for the standard report 159 Calendar templates 159 Removing unused templates quickly 164 Publishing your theme 166 Summary 167 Chapter 6: Adding Ext Layout Elements 169 Speed dating with a Date Picker 170 Converting Classic Dates to the Ext.DatePicker 171 Resizable text areas 174 Auto-sizing text areas 176 Auto-completing text elds 177 Adding auto-complete to select lists 179 Building tab panels using subregions 185 Building the tab panel template 187 Conguring the tab panel template 192 Toolbars and menus 194 Attaching the toolbar to the center panel 198 Summary 199 www.it-ebooks.info [...]... 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. .. 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... 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. .. www.it-ebooks.info www.it-ebooks.info 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... 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 workspace • Sencha 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 chapter covers: • APEX installation considerations • Brief overview of the Ext JS SDK • Merits of each of the web tier options: Oracle APEX Listener, Oracle HTTP Server with the mod_plsql plug-in, and the Embedded PL/SQL Gateway www.it-ebooks.info Setting up an Oracle APEX and Ext JS Environment • Loading the Ext JS SDK on each of the web tier options, and also onto hosted environments where you... 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... Setting up an Oracle APEX and Ext JS Environment 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... 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 [ 14 ] www.it-ebooks.info Chapter 1 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,... 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 . www.it-ebooks.info Oracle Application Express 4. 0 with Ext JS Deliver rich, desktop-styled Oracle APEX applications using the powerful Ext JS JavaScript library Mark. access to an Oracle Application Express development environment through a web browser, and the Ext JS library. Oracle Application Express and Ext JS library