F1488647857 sewtz


Published on

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

F1488647857 sewtz

  1. 1. ORACLE APPLICATION EXPRESS 4.0USER INTERFACE DESIGN & THEMESMarc Sewtz, Oracle Corp.IntroductionOracle Application Express (APEX) is a Web application development tool included at no extra cost with all editions of theOracle Database 11g. Customers can use Oracle Application Express to build applications quickly and easily right in theirbrowsers without having to know HTML, Java, or any other code. Oracle Application Express, or Oracle HTML DB, as itwas known originally, was first introduced with the Oracle Database 10g in 2004. In June of 2010, Oracle released OracleApplication Express 4.0. As one of the largest new releases yet, APEX 4.0 further streamlines the development of database-centric Web applications and helps reducing the time and complexity of building Web 2.0 applications and reports.Developing functional, easy-to-use, secure, and fast Web applications requires many different skills. From a good databasedesign to building a modern and well designed user interface, in most projects, these steps are typically done by differentdevelopers. Often though, the developers in charge for building the user interface is also expected to come up with a goodlooking UI. Chances are, these developers may be well versed in the latest Web 2.0 techniques, Ajax, and JavaScript, butusing Photoshop or CSS might not be their area of expertise. For this reason, APEX provides a user interface themeframework and ships with twenty built-in themes, so that developers can focus on what they do best, and have graphic artistsprovide the user interface design. Figure 1 – Oracle Application Express User Interface ThemesThis paper outlines the basic architecture behind themes and the composition of a template, it covers the user interface designand usability of applications built with Oracle Application Express and the steps involved in getting from the user interfacemock-up created by a graphic artist to an actual APEX user interface theme that every developer can incorporate into theirown applications. The Oracle Online Store, which was built with APEX, is used as a showcase to illustrate the user interfacedevelopment process.www.rmoug.org 1 RMOUG Training Days 2011
  2. 2. Oracle APEX 4.0 – User Interface Design & Themes SewtzOracle Store Overview – http://www.oracle.com/storeLaunched in 2009, the Oracle Online Store is designed to make it easier for customers to buy Oracle products online. Thesore provides an intuitive user interface and incorporates best practice e-commerce capabilities. It also has a single,multilingual, multicurrency platform, capable of providing high-performance global customer self-service. The store wasbuilt with Oracle Application Express and showcases of the power, flexibility, and rapid deployment capabilities of Oracle’sdevelopment tools. Figure 2 - Oracle StoreThe Oracle Store makes use of many of APEX’s built in Web 2.0 features such as AJAX, partial page refresh and interactivereports, which are used for the intuitive and powerful store search functionality. The store’s user interfaces takes advantage ofAPEX’s support for XHTML, which was introduced in APEX 3.2. The store user interface is based on XHTML 1.0 Strict,which greatly enhances cross browser compatibility and takes advantage of a table-less page layout, using DIV tags and CSSstyle sheets to define the page structure and apply the look & feel. The store works in all modern browsers capable ofrendering XHTML, incl. Firefox, Safari, and Internet Explorer.Other APEX features used by the Oracle store are the built-in globalization capabilities, allowing for standards based(XLIFF) translation into currently twelve languages and the selection of a variety of store countries with local currencysupport. The store also makes use of the built-in support for web services, for instance during the checkout process to validatethe shipping and billing addresses.www.rmoug.org 2 RMOUG Training Days 2011
  3. 3. Oracle APEX 4.0 – User Interface Design & Themes SewtzWeb Presentation TechniquesOracle Application Express uses standard HTML and CSS style sheets to define the user interface of an application. The userinterface of the APEX IDE and the templates in the themes, which were modernized in APEX 4.0, use a modern DIV based,table-less web design. Previous versions of APEX as well as older themes used a table-based design to define the structure ofa page, i.e. components such as the header and footer of a page, the tab bars, navigation bars, sidebar regions, etc were alldefined as nested HTML tables. This method of defining the structure of a page has been common practice ever since HTMLtables were standardized in HTML 4.0.Today it is becoming increasingly common to define the structure of a page using DIV tags along with CSS style sheets andto limit the use of HTML tables to the display of actual tabular data. Besides a much smaller page weight, improvedmaintainability and cross-browser compatibility, using a DIV based structure and moving as many layout definitions aspossible into CSS style sheets also allows for quickly adapting pages to be used with other devices such as mobile phone andtablets. With APEX 4.0 Oracle transitioned the APEX IDE as well as 12 UI themes to a DIV based page structure. Thistransition continues in APEX 4.1 with additional themes, as well as templates for mobile devices.XHTMLXHTML (Extensible Hypertext Markup Language) is a markup language that conforms to the XML syntax and has the samedepth of expression as HTML. XML is a more restrictive subset of SGML than HTML is and needs to be well-formed. Assuch, XHTML documents allow for automated processing using standard XML tools. XHTML 1.0 is essentially areformulation of HTML 4.01. The syntax of XHTML is defined using a DTD (Document Type Definition). XHTML 1.0 usesthree formal DTDs corresponding to the three different versions of HTML 4.01.The Oracle Store uses XHTML 1.0 strict, which is the equivalent to strict HTML 4.01, and includes elements and attributesthat have not been marked deprecated in the HTML 4.01 specification. XHTML 1.0 Transitional is the equivalent of HTML4.01 Transitional, and includes the presentational elements excluded from the strict version. XHTML 1.0 Frameset is theequivalent of HTML 4.01 Frameset, and allows for the definition of frameset documents, which had been popular on sites inthe early days of the Web, but are no longer commonly used today.CSSCSS (Cascading Style Sheets) is a style sheet language that is used to describe the formatting of a document written in amarkup language such as HTML or XHTML. Its primary use is to enable the separation of the content of a web page from itspresentation. Presentation elements such as colors, fonts, alignment, layout, etc are defined in a CSS file rather than in thedirectly in the HTML/XHTML document. This separation provides a more flexible way to control the page layout and allowsfor sharing layout definitions across multiple pages. Complexity and repetition in the page structure are reduced. With CSS itis also possible to present the page content in different styles, making the content readable on a variety of different devices,including screen readers, which allows for making the content more accessible for users with disabilities, and ideally allowsall users equal access to the information and functionality of the application. CSS was introduced by the World Wide WebConsortium (W3C) to improve web accessibility and to make HTML code semantic rather than presentational.Table-less Web DesignTable-less web design is a method of web design and development without using HTML tables to define the structure of aweb page. Often web pages are designed with nested tables within tables. Resulting HTML documents are generally largerthan documents with a simpler formatting and require more bandwidth. A nested table based structure is also more difficult toprocess by screen readers and search engines.With a table-less design, DIV tags are used to define the structure of a page, incl. navigational components, regions, sidebars,etc. A table-less design does not however exclude the use of tables. There are many places where the use of tables is stillconsidered appropriate, such as the display of tabular data and displaying content, such as form elements in a grid. APEXcurrently displays form elements in a table grid, which allows for easy drag and drop form layout by the developer.www.rmoug.org 3 RMOUG Training Days 2011
  4. 4. Oracle APEX 4.0 – User Interface Design & Themes SewtzThe use of a table-less web design provides a number of advantages: • Accessibility: Section 508 and other legislation require applications to be accessibly to people with disabilities. And while APEX allows for building section 508 compliant applications, a table-less web design is a way to considerably improve accessibility and usability by providing a more logical page structure that is easier to process for screen readers and other devices. • Bandwidth: A table-less web design can potentially decrease the bandwidth requirements when loading a web page. Performance improvements can be realized mainly by moving formatting elements into external style sheets, where the browser can cache them. Additionally, a table-less design generally requires less mark-up code in the document itself. • Maintainability: With a table-less web design most if not all formatting information can be stored in one place, the CSS document. This makes changes to the user interface much easier to implement and propagate across multiple applications and instances using the same user interface theme.Oracle Application Express User Interface DesignOracle Application Express ThemesAPEX themes are collections of templates that can be used to define the layout and style of an entire application. The ideabehind a theme is to provide a complete set of templates that accommodate every UI pattern that may be needed in anapplication. Templates are organized first by type (breadcrumb, button, calendar, label, list, page, popup list of values, region,and report) and then by template classes, identifying the purpose of the each template within that type. Each template typeprovides a group of standard classes and eight custom classes. These classifications enable APEX to map templates amongthemes, making it easy to quickly change the entire look and feel of an application.Oracle Application Express ships with an extensive theme repository. Themes can be added to the theme repository asfollows: • Workspace administrators can create Workspace themes. Workspace themes are available to all developers within the workspace. • Instance administrators can create public themes. Public themes are added using the APEX administration services. Once added, these themes are available to all workspaces and developers.Page LayoutAPEX renders pages by combining templates with application components defined by the developer and data in the database.The overall framework (or structure of a page) is determined by the page template. For example, the page template controls ifa page uses tabs and a navigation bar. It can also define if a page includes a bar on the left side that serves as a placeholderfor navigation or secondary content. Finally, a page template can include definitions of region positions, which enable precisecontrol over placement of regions using HTML tables or DIV tags with CSS style sheet definitions. The page template itselfis composed of standard HTML mark-up combined with substitution strings, which are substituted with the appropriatecomponents at run time.Developers add content to a page by creating a region. A region is an area of a page that serves as a container for content.Each region contains a different type of content such as HTML, a report, a form, a chart, a list, a breadcrumb, PL/SQL, a tree,a URL, or a calendar. Each page can have any number of regions. The appearance of a region is defined through a specificregion template. The region template controls the look of the region, the size, determines whether there will be a border or abackground color, and what type of fonts to display. A region template also determines the standard placement for anybuttons placed in region positions.www.rmoug.org 4 RMOUG Training Days 2011
  5. 5. Oracle APEX 4.0 – User Interface Design & Themes SewtzRegions can be used to group page controls such as items and buttons, they can contain very little additional HTML and onlydisplay the actual content, or they can contain elaborate formatting to frame content within tables, DIV tags or images.Regions are displayed in the page body, following the region display sequence. They can also be explicitly placed inpositions defined in the page template. As with all components in APEX, regions can be shown conditionally, based on awide variety of condition types and authorization schemes.Incorporating images and style sheetsMost templates in APEX reference classes defined in a CSS style sheet and often also include images references. Style sheetsand image files that ship with APEX are generally stored in an images directory in the middle tier. Custom images and stylesheets can be loaded into the middle tier as well, or loaded directly into APEX through the browser and stored in the OracleDatabase. Depending on the configuration of APEX and the version of the Oracle database, the images directory is eitherlocated on the file system of the HTTP Server or in Oracle XDB when using then PL/SQL Gateway as the web server inOracle XE and Oracle 11g.Images can be included in a number of places throughout an application. Most commonly, images are referenced as part oftemplates but can also be embedded in specific regions. For images stored on the file system, the image reference is typicallyprefixed by #IMAGE_PREFIX#. The physical location of #IMAGE_PREFIX# is defined in the application attributes, and inmost cases points to a location like this:http://host.domain:port/i/The following syntax can be used to reference an image in a template or region:<img src="#IMAGE_PREFIX#go.gif">When referencing custom images that are loaded to the file system, such as those used for the Oracle Store theme, the#IMAGE_PREFIX# is followed by the directory where the custom images are stored:<img src="#IMAGE_PREFIX#oracle_store/banner.gif">Alternatively images and style sheets can be loaded into the database under shared components of an APEX application.Loading images as shared components has the advantage that they can be bundled with the application export file, so whendeploying in APEX application from one instance to another or when distributing an APEX application to a customer, theimages are brought across. Another advantage is that the developer does not require access to the web server’s file system.This is particularly important in hosted environments such as apex.oracle.com, where typically access to the file system is notavailable.APEX images that are stored as shared components are divided into two categories: • Workspace images, which are available to all applications for a given workspace, they are prefixed with #WORKSPACE_IMAGES# • Application images, which are available for only one application, they are prefixed with #APPLICATION_IMAGES#www.rmoug.org 5 RMOUG Training Days 2011
  6. 6. Oracle APEX 4.0 – User Interface Design & Themes SewtzDesigning and building the Oracle Store UI with Oracle Application ExpressDesigning the user interface of a Web applicationWhen developing applications with APEX, developers have a choice of 20 built-in user interface themes that ship with theproduct, customers can customize these themes to meet their needs and they can also create new themes from scratch toachieve specific looks, e.g. to match a company’s corporate design or implement the mock-up provided by a graphics artist.For the Oracle Store the user interface was created in a multi-step process. The initial layout was created using AdobePhotoshop. Using Photoshop the main store pages were mocked-up and stored as static images. The images were thentransformed into static HTML files. And lastly these static HTML pages were translated into APEX templates and CSS stylesheets. Figure 3 – Photoshop layered Store Mock-UpWhen creating Web site mock-ups using Photoshop it is helpful to take advantage of nested layers and use these layers tomimic the intended document structure of the final HTML page. This way the different graphical elements can already beorganized by position on the page, like header, sidebar, main content area, etc. This makes is much easier to create theindividual images later when transforming the mock-up into static HTML. This technique also allows to more easily createdifferent mock-ups for different pages, i.e. starting with the homepage mockup, it will be much easier to remove thehomepage specific elements and add elements for e.g. checkout pages, search pages, etc.www.rmoug.org 6 RMOUG Training Days 2011
  7. 7. Oracle APEX 4.0 – User Interface Design & Themes SewtzTransforming a design mock-up into APEX TemplatesDefining the page structurePage templates in APEX define the appearance of individual pages, including the placement of page controls andcomponents. Each page template is divided into three sections: Header, Body, and Footer. The most basic template mustinclude the substitution string #BOX_BODY# in the Body attribute. When the page is rendered, the Application Expressengine replaces #BOX_BODY# with HTML to display the regions on that page.The Oracle Store mock-up defines two types of general page layouts, one layout with a main content area and a left-handsidebar and another layout with a main content area and sidebars both on the left and right-hand side. The left-hand sidebar inthe store is used to display a search box and a product category menu. Both are shown on all pages that include this sidebar.The right-hand sidebar is used to show the contents of the shopping cart – once items have been put into the cart, and alsocustomer service contact information and in some cases, banner ads.Sidebars are typically defined by dividing a page into multiple columns. A multi-column page can be created by using a pagetemplate that contains either a multi-column table or uses CSS and DIV tags. The following example demonstrates how tocreate a page with sidebars on the left and ride using HTML tables and specify a region position using the#REGION_POSITION_XX# substitution string in each column. This code is defined in the body section of a page-leveltemplate.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body #ONLOAD#> #FORM_OPEN# <table style="width:100%"> <tr> <td style="width:200px;padding:5px;">#REGION_POSITION_01#</td> <td style="padding:5px;">#REGION_POSITION_02##BOX_BODY#</td> <td style="width:200px;padding:5px;">#REGION_POSITION_02#</td> </tr> </table> <br /> #FORM_CLOSE# </body></html>The region positions that are defined in a page template are substituted by the actual content at runtime and are also used toderive display points when running the create region wizards and when editing a region. There are up to eight specific regionpositions available. Additionally, content can be placed into the #BOX_BODY#. The #BOX_BODY# positions regionsrelative to each other. When placing regions into the box body there are three sections available for vertical separation.Regions in the box body can also specify a column IDs for displaying columns horizontally aligned. Additional substitutionstrings are documented on the page template edit page. Depending on the structure of the page, substitution stings can beused to allocate space for navigation, tabs and message, like notifications and errors.An alternative to the table based page structure shown above is using DIV tags with CSS style sheets. A DIV tag baseddesign is easier to process by a variety of clients and devices, such as for example screen readers. This design allows foreasier modification of an application’s user interface by updating the CSS style sheet, rather than editing multiple templatesand propagating template changes across subscribed applications on potentially multiple instances.www.rmoug.org 7 RMOUG Training Days 2011
  8. 8. Oracle APEX 4.0 – User Interface Design & Themes SewtzThe following HTML code sample produces a very similar page structure to the table based sample shown above. There’s aleft-hand sidebar for #REGION_POSTION_01#, a right-hand sidebar for #REGION_POSITION_03# and a main contentarea for #REGION_POSITION_02# and #BOX_BODY#. The actual positioning of the regions, and layout attributes aredefined in an external style sheet called demo.css and thus can be easily modified and adapted for different clients.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="demo.css" type="text/css" /> </head> <body> <div id="main"> <div id="left-sidebar">#REGION_POSITION_01#</div> <div id="body"> <div id="two-col"> <div id="right-sidebar">#REGION_POSITION_02##BOX_BODY#</div> <div id="content">#REGION_POSITION_03#</div> </div> </div> </div> </body></html>Using the CSS definitions below, the following page structure can be implemented, with fixed-width left and right-handsidebar and a variable width main content area. Figure 4 - CSS based three column layout#main { height: 1%; overflow: hidden; padding: 10px 10px 10px 250px;}#left-sidebar { display: inline; float: left; width: 180px; margin: 0 0 0 -240px; padding: 10px}#body { float: right; width: 100%; padding: 10px;}#two-col { height: 1%; overflow: hidden; padding: 10px 250px 10px 10px;}#content { float: left; width: 100%; padding: 10px;}#right-sidebar { display: inline; float: right; width: 180px; overflow:hidden; margin: 0 -240px 0 0; padding: 10px}www.rmoug.org 8 RMOUG Training Days 2011
  9. 9. Oracle APEX 4.0 – User Interface Design & Themes SewtzRounded Corner RegionsThe following graphic shows a rounded corner region as it is used in the Oracle Store. This particular type of region is usedas a fixed-width sidebar, with variable height for the content. This sample illustrates how the HTML used for the actual webpage can be minimized and how CSS can be used to achieve visual effects, such as gradients, borders, etc. Figure 5 - Sample Rounded Corner Region using CSSThe following code snippet from the web page constitutes the entire HTML mark-up and text needed to render the regionshown above:<div class="region"><div> <h2>Sample Region</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempo incididunt ut labore et dolore magna aliqua.</p></div></div>To achieve the rounded corner region look, the following CSS classes are defined in a separate CSS file. The first class called.region defines a background image that draws the left and right borders of the region. The next section defines a backgroundimages for DIV areas within the context of .region. This background images is placed at the bottom of the DIV area anddraws a gradient background. And for H2 tags used within the context of .region, another background image is defined todraw the region header. The other attributes show below define margines, fonts, etc..region { background: url(bg-menu.gif); margin: 8px 0 0; overflow: hidden; width: 183px;}.region div { background: url(bg-menu-b.gif) no-repeat 0 100%; padding: 0 0 4px;}.region h2 { background: url(bg-h3.gif); margin: 0; width: 183px; height: 26px; overflow: hidden;line-height: 26px; text-indent: 11px; font-size: 11px;color: #000; }.region p { margin: 0; padding: 4px 10px;}Category Menu using CSS Sprites When working with CSS style sheets, images for buttons, gradient backgrounds, etc are typically defined as backgroundimages in the CSS file. Often each image corresponds to a file on the server’s file system. In some cases, where mouse-overeffects are used, several image files might be required for a single element. Each image shown on a web page results into anadditional HTTP request, so in addition to the HTTP request returning the page, there will be HTTP requests for the CSSstyle sheets, Java Script files and each image used on the current page.CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by a web page. Using thistechnique, images are combined into one large image at defined X and Y positions. The single image file is then assigned towww.rmoug.org 9 RMOUG Training Days 2011
  10. 10. Oracle APEX 4.0 – User Interface Design & Themes Sewtzseveral CSS classes, and using the CSS background property, the visible area is shifted to only display the required portion ofthe image. This technique can be very effective for improving site performance, particularly in situations where many smallimages, such as menu icons, are used.The following is an example how CSS sprites can be used for a sidebar navigation, such as the product category menu on theOracle Store home page. The menu in this example shows two categories, “Virtualization” and “Enterprise Linux”. Whenhovering over the menu with the mouse, the category located below the mouse cursor gets highlighted by applying a differentbackground image. Figure 6 - Oracle Store Category MenuTypically two background image files would be created and stored on the server. When loading the page, both image fileswould be requestes as well, resulting into two HTTP requests. Using sprites, both background images can be stored in thesingle image shown below: Figure 7 - Two background images in a single fileIn the past this type of hover-over effect used to be implemented using Java Script, calling different functions to change theappearance of a graphic when a user rolls over or clicks an image or button. Today developers often use CSS instead, usingthe :link, :visited, :hover, and :active pseudo-classes to swap out images in the links background - without having to programa single line of scripting code.The following code sample shows the HTML code used to implement the menu shown above:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html> <head> <link rel="stylesheet" href="sample.css" type="text/css" /> </head> <body> <div class="menu"> <div> <h3>Product Categories</h3> <ul> <li><a href="/virtualization">Virtualization</a></li> <li><a href="/linux">Enterprise Linux</a></li> </ul> </div> </div> </body></html>www.rmoug.org 10 RMOUG Training Days 2011
  11. 11. Oracle APEX 4.0 – User Interface Design & Themes SewtzThe CSS class definitions below take care of displaying either the active (orange) or inactive portion of the image shownabove. The image is 44px in height, and by shifting the visible portion of the image up by 22px, only the grey portion isshown when the menu item is inactive. Once the user moves his mouse over an item, the upper orange portion of the image isshown, and the lower part is not visible:.menu a { background: url(bg-nav.gif) no-repeat 0 -22px;}.menu .active a, .menu a:hover {background: url(bg-nav.gif) no-repeat 0 0;}This concept can be extended further to include additional images used on a page, yet developers should carefully weigh theadvantages of fewer HTTP requests vs. large image files, if images are included that are not shown on the current page. Agood practice is to group images that are typically shown together, such as images used to render a region or a menu such asthe one show above.ConclusionOracle Application Express makes it easy for developers to develop professional looking applications, thanks to its built-inselection of 22 user interface themes. Yet often developers find themselves in a position where they’re asked to developapplications that seamlessly integrate with the corporate infrastructure and provide the same user experience and securitymodel as existing applications. APEX’s authentication and authorization model provide a wide variety of integration pointsthrough shared authentication via LDAP, Oracle Single-Sign On, support for the Oracle E-Business Suite and other Oracleand Non-Oracle authentication models. Using APEX’s extensible and customizable user interface theme and templateframework, it is possible to replicate the UI of existing applications for a more seamless integration. This paper outlinedsome of the steps involved in building a new user interface theme, using the Oracle Online Store as an example. While itwould be impossible to provide an exhaustive guide that covers every possible variation of web based user interfaceimplementations, this paper touched on many of the basic concepts, defined some of the most commonly used techniques andUI programming languages and provided some specific examples for getting started with replicating existing web interfacesand designing new interfaces.About the AuthorMarc Sewtz is a Senior Software Development Manager for Oracle Application Express in the Oracle Database Tools Group,which is part of Oracle Server Technologies. Marc has over sixteen years of industry experience, including roles inConsulting, Sales, and Product Development. He joined Oracle Corporation in 1998.Marc lives in New York and manages a global team of Oracle Application Express developers and product managers. Marcand his team are responsible for the Oracle Application Express user interface and product features such as Oracle Forms toOracle Application Express conversion, the Oracle Application Express Reporting Engine, Tabular Forms, Flash Charts andPDF printing incl. the integration with Oracle BI Publisher.Marc regularly presents Oracle Application Express at various industry events including Oracle Open World, ODTUGKaleidoscope, DOAG, RMOUG, NYOUG, BIWA SIG and Oracle Develop conference at various locations around theworld. Marc has a Masters degree in Computer Science from the University of Applied Sciences in Wedel, Germany.www.rmoug.org 11 RMOUG Training Days 2011