Alt tab - better apex tabs

ALT-TAB:
Better APEX Tabs Scott Spendolini
Director & Co-Founder
1

— scott.spendolini@enkitec.com
— @sspendol
— Ex-Oracle Employee of 10 years
— Senior Product Manager for Oracle APEX
from 2002 through 2005
— Founded Sumner Technologies
in October 2005
— Co-Founded Sumneva in January 2010
— Joined Enkitec in June 2012
— Oracle Ace Director
— Co-Author, Pro Oracle Application Express
— Author, Secure APEX Development Best
Practices
— “Scott” on OTN Forums
Scott Spendolini
3

About Enkitec
— Oracle Platinum Partner
— Established in 2004
— Headquartered in Dallas, TX
— Locations throughout the US & EMEA
— Specialties include
— Exadata Implementations
— Development Services
— PL/SQL / Java / APEX
— DBA/Data Warehouse/RAC
— Business Intelligence
4

Agenda
— Overview
— Alternative Tabs
— jQuery UI
— CSS Dropdown Menu Framework
— APEX 4.0 UI Changes
— Summary
5

New APEX 4.0 Themes
— Several new themes included in APEX 4.0
— Total of 20 Interchangeable Themes
7

Themes
8
— All new themes are DIV-
based
— Only 5 are IE6 Compatible
— Denoted by the * next to their
names
— Most themes have been
“cleaned up” to better
meet standards and/or to
fix bugs

Backward Compatibility
— Five Themes still use HTML tables for their layout
— Ensures compatibility with older browsers
— Table-friendly themes include:
— Theme 13
— Theme 15
— Theme 16
— Theme 18
— Theme 20
9

New Features in APEX 4.0 Templates
10
— “Embedded” Regions
— Can now easily have a Region within another Region
— Part of the Region properties

DIV-Based Layout
— Most of the new APEX 4.0 Themes use a DIV-
based layout model
— What is a DIV?
— A container for blocks of content
— More practical than TABLEs for overall design
— Can and do still use TABLEs for row/column reports
— Easier to manipulate & manage with JavaScript/jQuery
11

D E M O N S T R A T I O N
DIVS
12

— Each page is made up of several DIVs
— header
— tabs
— topbar
— messages
— body
— footer
— Each DIV has sub-DIVs
— And those DIVs may also have sub-DIVs
Structure of an APEX 4.0 Template
13

Page Header
19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtd">
<html lang="&BROWSER_LANGUAGE." xmlns="http://www.w3.org/1999/xhtml"
xmlns:htmldb="http://htmldb.oracle.com" xmlns:apex="http://apex.oracle.com">
<head>
<title>#TITLE#</title>
<link rel="icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="#IMAGE_PREFIX#favicon.ico" type="image/x-
icon">
#HEAD#
<link rel="stylesheet" href="#IMAGE_PREFIX#themes/theme_4/css/theme_4_0.css"
type="text/css" />



</head>
<body #ONLOAD#>
<!--[if lte IE 6]><div id="outdated-browser">#OUTDATED_BROWSER#</div><![endif]--
>
#FORM_OPEN#

Page Body
20
<div id="header">
<div id="logo"><a href="#HOME_LINK#">#LOGO##REGION_POSITION_06#</a></div>
#REGION_POSITION_07#
<div id="navbar">
<div class="app-user">#WELCOME_USER#</div>
#NAVIGATION_BAR#
</div>
</div>
<div id="tabs">
<div class="frame">
<div class="bg">
<div class="tab-holder">
#TAB_CELLS#
</div>
</div>
</div>
</div>
<div id="topbar">#REGION_POSITION_01##REGION_POSITION_04#</div>
<div id="messages">#SUCCESS_MESSAGE##NOTIFICATION_MESSAGE##GLOBAL_NOTIFICATION#</div>
<div id="body">
<table class="tbl-body" cellspacing="0" cellpadding="0" border="0" summary="">
<tbody>
<tr>
<td class="tbl-main" width="100%">#REGION_POSITION_02##BOX_BODY#</td>
<td class="tbl-sidebar">#REGION_POSITION_03#</td>
</tr>
</tbody>
</table>
</div>

Page Footer
21
<div id="footer"><div class="content">
<div id="customize">#CUSTOMIZE#</div> 
</div></div>
#FORM_CLOSE#
</body>
</html>

Sprite Maps
22
— Sprite Maps consolidate several
smaller images into one large image
— Faster to load one larger image vs. several
smaller images
— Only a portion of the image is
displayed on the page
— Controlled by CSS background-position
attribute
Tabs Sprite Map Image
Actual Tabs

SPRITE MAPS
23

History of Tabs
26
— The first tab was developed in 1962 by IBM &
DARPA
— Data was stored on over 2,000 punch cards
— Took over 3 hours just to load
— Used all 16KB of RAM
— End Result:
|--------|
| Home |

History of Tabs
— Tabs have been a common navigational device
since the early days of client-server applications
— Once HTML-based applications became popular, it wasn’t
long before the tab followed
— Most web sites today - both large
& small - make some use of
tabs in one way or another
— Google, Amazon, Twitter,
Facebook, Yahoo, etc.
27

Amazon.com circa 1999
28
— When Amazon.com
launched in 1995, it
didn’t look very good
— At least not by today’s
standards
— It also didn’t have any
tabs
— As did many sites of that
time period

— However, its UI quickly evolved over the years
— As the site expanded, so did the number of tabs used:
Amazon.com circa 2000’s
29

Amazon.com Today
— Today, Amazon.com opts for a navigation list on
the left side in lieu of tabs on its home page
30

Amazon.com Today
— Once you select a department, you will see a
subtle line of sub-navigation tabs
31

Google’s Tabs
— Simplicity + Consistency > Complexity
32

Apple’s Tabs
— (Simplicity + Consistency) * Style > Complexity
33

Microsoft’s Tabs
34

Microsoft’s Tabs
35
+ = 0

APEX & Tabs
— Almost every APEX application ever written makes use of
some form of tabs
— Why is this so?
— Default option when creating an application
— Tabs are a de-facto navigation control
— “Easier” to use than
other types of navigation
controls
— Why Not?
36

APEX Built-in Tabs
37
— APEX’s tab mechanism has
changed little over time
— Almost the same in APEX 4.0 as it was in
HTML DB 1.6
— APEX provides support for no, one
or two levels of tabs
— Overall UI used to make up tabs is
in need of a refresh
— APEX 4.0 helps, but the underlying
infrastructure is the same

— To say that APEX’s built-in tabs are frustrating to use
would be a vast understatement...
PC LOAD LETTER
38

Upside Down
39
•One-LevelAPEXtabs-themostcommontype-areactually
createdupside-down
•WhatseemtobetheParentTabsareactually
somethingcalledtheStandardTabs
•WhichisanothernameforDetailTabs
•AllStandardTabswillhaveapseudo-tabastheir
ParentorMastertab
•Thus,you’reessentiallycreatingorphanedtabs
•Veryconfusingwhenconvertingfromonetotwolevels
oftabs,asyouneedtocreatenewmasterorparent
tabs

One Level of Tabs
Two Levels of Tabs
Upside Down
Standard Tabs
Parent Tabs
Standard Tabs
40
Pseudo Parent Tab

APEX Tab Deficiencies
— Several things have to line up just right for tabs
to work properly:
— Correct Page Template must be selected
— Tab must be current for the corresponding Page
— Page must be mapped to the corresponding Standard Tab
Set
— Standard Tab must be mapped to the corresponding
Standard Tab Set
— Standard Tab must map to the corresponding Parent Tab
Set or Pseudo Parent Tab Set
41

APEX Tab Deficiencies
— APEX uses a JavaScript function to submit the page when
tabs are clicked
—APEX 3.2: doSubmit('TabName');
—APEX 4.0: apex.submit('TabName');
— Deficient for a couple of reasons
— JavaScript was required for basic navigation
— Issue with some mobile devices
— Google would not follow or index the tab’s links
— Harder to get a site indexed
42

WORKING
WITH APEX TABS
43
Getting Frustrated

APEX 4.0 Tab Enhancements
— Little has changed in the way tabs are
implemented in APEX 4.0
— Still just as confusing
— There are a couple new reports and several new
regions that attempt to make tabs easier to use
— Found under Shared Components > Tabs
44

http://www.enkitec.com
45

APEX 4.0 Tabs Management Page
46

jQuery UI
53
— Provides a set of UI components that sit on top of
jQuery
— Tabs, Calendars, Widgets, Buttons, Effects, etc.
— APEX 4.0 will have both jQuery & jQuery UI
included
— Can easily be installed to work with APEX 3.x as well

jQuery UI Tabs
— Robust, configurable jQuery IU component that
can be styled to match almost any UI theme
— Contain hooks into jQuery to capture all types of events
— Support for loading content via Ajax
54

jQuery UI Tab Drawbacks
— No easy support for sub-tabs
— Require jQuery & jQuery UI
— Not an issue with APEX 4.0+
— Involves working knowledge of jQuery & JavaScript to
implement
— Must make modifications to existing templates in order to
properly integrate
— In APEX, jQuery UI Tabs are better suited to hide &
show regions; not pages
55

jQuery Tabs: Get ‘Em While They’re Hot
— Blog entry by Dan McGhan on how to integrate
jQuery UI Tabs & APEX
— Concise, easy to follow steps
— Takes only minutes to implement
— http://www.danielmcghan.us/2009/07/jquery-tabs-get-
while-they-hot.html
56

JQUERY UI TABS
57

CSS DROP-DOWN
MENU FRAMEWORK
58

CSS Drop-down Menu Framework
60
— Free framework for CSS-based menus
— Licensed under GNU GPL; donation requested
— http://www.lwis.net/free-css-drop-down-menu/
— Modular Design with support for themes
— Easy to Deploy & Transform
— Cross-Browser
— Only IE6 requires JavaScript; all modern browsers do not
— Extremely Lightweight & Fast!

Theme Support
— Support for Themes
— Easily modifiable via CSS
— Included Themes:
— General Purpose
— Flickr
— NVIDIA
— Adobe
— MTV
— VIMEO
61

CSS DROP-DOWN
MENU FRAMEWORK
62

63
Structure vs. Style
— All structure & style are completely separated
— Structure: HTML
— Style: CSS
— This approach has a number of benefits
— Style of a site can quickly & easily be changed
— Structure of a site is much simpler & easier to maintain
— Site will be more Section 508 Compliant

In general, separating the
structure from the style is a good
design principle that should be
applied everywhere.
64

How It Works
66
— CSS Drop Down Menus simply use an HTML list to
create the structure used for the tabs
— Simple & Uncluttered
— Cascading Styles are then applied to the list to
give them their style or user interface
— Developer has complete control over the styles used
— And never has to modify the corresponding HTML

The Result
— Thus, this HTML Code:
— When combined with a CSS file or files...
— Yields this Menu:
67

HTML Lists
— <ul> and <li> are HTML tags that make up
bulleted “lists” when rendered on the page
— Each will also require a closing tag after its corresponding
content
68
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
• One
• Two
• Three

— By embedding additional <ul> tags, we can
create a hierarchical list with any number of
levels:
<ul>
<li>One</li>
<ul>
<li>Two</li>
<li>Three</li>
</ul>
</ul>
Multiple Level Hierarchies
69
• One
• Two
• Three

72
Style
— All style definitions are stored in Cascading Style
Sheets or CSS files
— Visual attributes of the list elements, such as:
— Width
— Background Color
— Font & Font Size
— Margins & Padding

CSS Zen Garden
— Example site which illustrates how the same
HTML file can look dramatically different by only
changing the contents of the CSS
— Different graphic artists submitted only a CSS file &
associated images and the best are on display
— Dramatic illustration as to what can be achieved using
only Cascading Style Sheets
— View all of the designs online:
— http://csszengarden.com
73

74

75

CSS Dropdown Menus CSS
— CSS Dropdown Menus requires three CSS files:
— dropdown.css
— Sets high level element attributes, such as <ul> & <li>
— default.advanced.css
— References default.css
— default.css
— Almost all formatting changes made here
— Each of these can be modified as needed to
match your graphic design specifications
76

Integration with APEX
— It’s fairly simple to integrate CSS Dropdown
Menus with APEX
— Done using an APEX list & custom template
— List will contain the structure for the tabs
— Can be as many levels deep as you like
— Template will be 100% HTML and reference the
corresponding CSS files, which contain the style
— The List template will take care of creating the hierarchy
automatically
78

Steps to Integrate
79
1.Create a List
— Add an entry to the list for each tab & sub-tab that you
want to include
2.Crete a List Template
— Using the CSS Dropdown Menu HTML files as a guide
3.Create a List Region on Page Zero
— May want to alter the page template and use a custom
region position for better alignment/control

Lists: Best Practices
— Group Pages in blocks of 100 or 1000 based on
which “tab” will be current
— Set the Current List Entry attributes as follows:
— List Entry Current for Pages Type
— Exists SQL Query
— List Entry Current for Condition
—SELECT 1 FROM DUAL
WHERE :APP_PAGE_ID BETWEEN 600 AND 699
— Thus, any page from 600-699 will set this tab to
the current tab
80

CREATING A LIST
& LIST TEMPLATE
81

Before List Entry
— List Template Before Rows
— <link href="/c/css/dropdown/
dropdown.css" rel="stylesheet"
type="text/css" />
<link href="/c/css/dropdown/themes/default/
default.advanced.css" rel="stylesheet"
type="text/css" />
<ul id="nav" class="dropdown dropdown-
horizontal">
82

Template Definition
— List Template Current
— <li><a href="#LINK#"
class="currentTab">#TEXT#</a></li>
— List Template Current w/Sub Links
— <li><a href="#LINK#"
class="currentTab">#TEXT# ▼</a>
83

Template Definition
— List Template Non-Current
— <li><a href="#LINK#">#TEXT#</a></li>
— List Template Non-Current with Sub List
Items
— <li><a href="#LINK#">#TEXT# ▼</a>
— ListSub List Template Before Rows
— <ul>
84

Sub List Entry
— Sub List Template Current
— Sub List Template Current w/Sub List
Items
— <li><a href="#LINK#">#TEXT# ▶</a>
85

Sub List Entry
— Sub List Template Noncurrent
— Sub List Template Noncurrent w/Sub List Items
— <li><a href="#LINK#">#TEXT# ▶</a>
— Sub List Template After Rows
— </ul></li>
86

After List Entry
— List Template After Rows
— </li></ul>
87

Summary
89
— APEX’s tab mechanism is dated and hard to use
— Most applications do, however, use it
— But it’s easy to retrofit Lists to work as tabs
— Implementing new tabs gives your application a
bit of sizzle that will make it stand out among
other applications
— While also allowing older browsers to be able to still view
your site

90

Alt tab - better apex tabs

Recommended

More Related Content

What's hot (20)

Similar to Alt tab - better apex tabs (20)

More from Enkitec (20)

Recently uploaded (20)

Alt tab - better apex tabs