If you’re building Oracle APEX applications, there’s a good chance that they are business-centric applications that will mostly be used by employees of your organization. The main goal of the user interface of these applications is to be functional and intuitive, not flashy and eccentric. Throw in the challenges of cross-browser compatibility and mobile support, and designing a user interface gets pretty complex. This session will outline some techniques and tools that can be applied when designing user interfaces for these business-centric applications. All solutions will be presented in a format that does not require advanced graphics design experience.

1. Creating a Business-Oriented
UI in APEX
Jorge Rimblas & Scott Spendolini
!1

2. 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
!2

3. Jorge Rimblas
— jorge.rimblas@enkitec.com
—
@rimblas
rimblas.com/blog
— Using Oracle since 1995
— Focused on Web Technologies
— OWA, Web DB, HTML-DB, APEX
— Using APEX since 2006
— Joined Enkitec in June 2012
— “jrimblas” on OTN Forums
!3

4. Scott Spendolini
— 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, Expert Oracle Application Express Security
— “Scott” on OTN Forums
!4

5. Agenda
— Introduction
— Strategic
— Tactical
— Summary
!5

6. INTRODUCTION
!6

7. Question
— How many of you design APEX applications that
are Internet-facing and used for commercial
purposes?
!7

8. Question
— Which looks more like the applications that
you’re tasked to build with APEX?
!8

9. Question
— What device do your end users use when running
most APEX applications?
!9

10. Realities
— The majority of APEX developers build:
— Applications that are used internally
— Which consist of multiple, complex forms & reports
— That are run from desktop computers
!10

11. “Responsive web design is a web
design approach aimed at crafting
sites to provide an optimal
viewing experience—easy reading
and navigation with a minimum of
resizing, panning, and scrolling—
across a wide range of devices”
From http://en.wikipedia.org/wiki/Responsive_design
!11

12. apex.oracle.com
!12

13. Is Responsive Design for You?
!13

14. Is Responsive Design for You?
Top 100 Tablet Screen Sizes
2560 x 1600
2048 x 1536
1920 x 1280
1920 x 1200
1920 x 1080
1440 x 900
1366 x 768
1280 x 800
1024 x 786
1024 x 600
0
6
12
18
24
30
Data from http://www.tabletpccomparison.net
!14

15. Is Responsive Design for You?
Slide from http://apex.shak.us/post/37807712185/responsive-web-design-in-apex-updated-for-nyoug
!15

16. Unresponsive
— Not being responsive does not mean that your
applications have to suck
— There’s quite a bit of practical & easy
enhancements that can be made to enhance the
UI of your business applications
— No Photoshop or Advanced HTML/CSS Skills Required
— Keep in mind that the reality is your application
is likely run on a standard desktop PC and is
internal to your organization and doesn’t need
to be responsive
!16

17. STRATEGIC
!17

18. Strategic Tips
— Theme Selection & Modification
— Screen Design Patterns
— Template Consolidation
— Subscriptions
— Just Say No
!18

19. THEME SELECTION & MODIFICATION
!19

20. Theme Selection
— Most developers will simply pick an embedded
APEX theme and stick with that
— And that’s perfectly fine for most applications, especially
those that are internal-only
— However, it is important to
standardize on a single
theme vs. allowing any
developer to pick their
favorite
— Consistency is key
!20

21. Theme Selection
— Avoid Themes 1 through 23
— These are older, less optimal and generally dated
— Unless you have to support IE6 (see “Just Say No”)
— Best to use Theme 24, 25 or 26
— All are responsive and differ only slightly
— Should standardize one and stick with it for all
applications
!21

22. Theme Modification Rules
— Never modify the core CSS or images associated
with a theme
— Other applications may use the same theme and assume
that no modifications were made
— Instead, either work with copies of the media or
augment it with your changes
— Acceptable to put a region with CSS overrides on the
global page or use an image from the Shared Components
!22

23. Augmenting the CSS
— Before:
— After:
!23

24. Augmenting the CSS
!24

25. Augmenting the CSS
<style type=“text/css">
header#uHeader {
background-image: linear-gradient(rgb(255,
165, 0), rgb(255, 222, 163));
}
header#uHeader nav {
background-image: linear-gradient(rgb(0, 15,
229), rgb(34, 40, 127));
}
header#uHeader nav ul.uMainNav li a {
color: rgba(255, 255, 255, 0.75);
text-shadow: none;
}
</style>
!25

26. AUGMENTING A THEME CSS
D E M O N S T R A T I O N
!26

27. Working with CSS Copies
— Optimal to put a new CSS or image on the web
server and include that in your theme
— This way, it will be cached by the browser
— Easier to change in one place and reference from multiple
applications
!27

28. APEX Theme CSS
— All APEX theme assets (CSS, JS, Images) are
stored in this location: /i/themes/theme_XX
— Where XX is the Theme Number
— It’s best to copy the required assets to a custom
directory - for example: /c/themes/theme_XX
— All changes can be made to the copy without impacting
any other application that relies on the same theme
!28

29. Page Template Updates
— Once copied, the corresponding Page Templates
will need to be altered to look at the new CSS file
location
— Page Templates > Cascading Style Sheet > File URLs
— Change #IMAGE_PREFIX# to /c/
— Will have to do this for each Page Template used
!29

30. Beautifying CSS
— All APEX Theme CSS files have been minified,
which makes them difficult to work with
— It’s best to “Beautify” them, as they will be much
easier to work with
— CSS Beautifier: http://html.fwpolice.com/css/
!30

31. CUSTOM THEME CSS FILES
D E M O N S T R A T I O N
!31

32. SCREEN DESIGN PATTERNS
!32

33. Screen Design Patterns
— A Screen Design Pattern is a fixed set of content
regions that make up a page
— Establishing - and adhering to - a set of Screen
Design Patterns is essential for a good Business UI
!33

34. Screen Design Patterns
— Examples of common screen design patterns
From http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns
!34

35. Balsamiq Mockups
— Screen Mockup tool that focuses on the
structure of the page, not the style
— Allows most of the design & layout of screens to
be done by the business users, not developers
— Think of it as a blueprint
— Desktop & Web versions
— $79 or $12/month
!35

36. TEMPLATE CONSOLIDATION
!36

37. Too Many Templates
— Theme 25 contains 75 templates
— Of which you need about 20 or so
— Consolidate and remove any extraneous ones
— If you need a specific template in the future, you can
always re-install the theme in a new application and copy
it back over
— Consider renaming to more intuitive names
— Content Region vs. Form/Report/Wizard Region
!37

38. Deleting Templates
Included
Ideal
Deleted
Breadcrumb
1
1
0
Button
6
2
4
Calendar
1
1
0
Label
7
2
5
List
14
2
12
Page
17
3
14
Popup LOV
1
1
0
Region
17
2
15
Report
11
1
10
TOTAL
75
15
60
!38

39. SUBSCRIPTIONS
!39

40. Subscriptions
— APEX Subscriptions link the content of some
Shared Components across applications within a
workspace
— Once linked, content can be either pushed to all
subscribers or pulled by individual subscribers
— Push will refresh all; pull can refresh on an individual basis
— Using subscriptions takes some getting used to
— Changes will take longer to implement, but over time will
be more efficient
!40

41. Subscriptions
!
!
Template A
App 200
!
!
Template A
!
!
Template A
App 100
App 300
!
!
Template A
App 400
!41

42. Subscriptions
— Its a good idea to create a application exclusively
for storing all of the master copies of templates
— All other applications can subscribe to those templates
— In the case of a change, make it at the master and publish
to all other apps
— Caution: Subscriptions only work within a single
workspace
— Other Shared Components can be subscribed to:
— Lists, LOVs, Authentication Schemes, Authorization
Schemes & Shortcuts
!42

43. SUBSCRIPTIONS
D E M O N S T R A T I O N
!43

44. JUST SAY NO
!44

45. Just Say No
— “No.” is a complete sentence
— Should be exercised with good judgement, as it is not the
answer to each and every question - but it is to many
— Be ready to justify with facts
— Device Types common to your
organization
— Page Views
— Time to Complete vs. Alternatives
— Opportunity Costs
!45

46. TACTICAL
!46

47. HTML/CSS FRAMEWORKS
!47

48. HTML/CSS Frameworks
— Also called Boilerplates
— They help you with consistency
— They do the leg work for you
— Responsive
— Compatibility across browsers
— Usually “easy” to customize via CSS
!
— Bootstrap, ZURB Foundation, Responsive Grid
Systems
!48

49. … and APEX Themes
!
— Don’t forget, you do have APEX Themes
!49

50. GROUPING TECHNIQUES
!50

51. Why group?
— Guide the eye
— Communicate which things are related
— The more elements on the page, the more
important grouping becomes
!51

52. jQuery Tabs
!52

53. jQuery Tabs
!53

54. jQuery Tabs: How To
— Need some CSS for styling
#IMAGE_PREFIX#libraries/jquery-ui/1.8/themes/base/
jquery.ui.tabs.css
— Need some JavaScript for functionality
#IMAGE_PREFIX#libraries/jquery-ui/1.8/ui/minified/
jquery.ui.tabs.min.js
— Need HTML as a container for each tab
!54

55. jQuery Tabs: How To
— Define a new template
<div id="#REGION_STATIC_ID#"
#REGION_ATTRIBUTES# class="jQueryTabsWide">
#BODY#
</div>
!55

56. jQuery Tabs: How To
— Opening jQuery Tabs container in an HTML Region:
TABS - OPEN
<div id="tabs_start_reg"
style="display:none;width:750px;">
<ul>
<li><a href="#region1">Region 1</a></li>
<li><a href="#region2">Region 2</a></li>
</ul>
!56

57. jQuery Tabs: How To
— Add your regions in between “TABS - OPEN” and
“TABS - CLOSE”
— Region IDs need to match the IDs on your list
— Opening jQuery Tabs container in an HTML Region:
TABS - CLOSE
</div>
— Visit ARC: http://www.enkitec.com/resources/apex
!57

58. REGIONS AND SUB REGIONS
!58

59. Regions and Subregions
!59

60. Regions and Subregions
!60

61. Regions and Subregions
parent tab
!61

62. WIZARDS
!62

63. Wizards Inside APEX
!63

64. Implementing Wizards (easy)
— Use APEX session state to “remember” values
— On your final step, reference the items from
other pages
!64

65. Implementing Wizards (easy)
insert into inventory_items (
name
, description
, status
, category
, {30 other fields}
)
values (
:P10_NAME
, :P20_DESCRIPTION
, :P30_STATUS
, :P40_CATEGORY);
!65

66. Implementing Wizards (option 2)
— After each step capture your values in a
collection
— Use a collection for each page
or
— Use the same collection for all values
!66

67. ALIGNMENT OF ITEMS/REGIONS
!67

68. Why is alignment important?
— Sits in the background, but provides a backbone
to your design
— Broken alignment interrupts the eye scanning
— Alignment is a form of grouping (the oposite is
also true)
!68

69. Why is alignment important?
!69

70. Why is alignment important?
!70

71. SPACING
!71

72. Spacing
— Don’t think of white space as “empty space”
— Space is not just tabs, carriage return and spaces
— Space between elements
— Margins and padding
— Space doesn’t have to be white
— Provides
— Legibility: micro level
— Tone: macro level
!72

73. Spacing
!73

74. Spacing
!74

75. Spacing
!75

76. Spacing
!76

77. OTHER TECHNIQUES
!77

78. Error Messages
— Don’t be a developer, be a user
— Is the message useful to the end user?
— Will the user know what to do?
!78

79. Long text
— Use an ellipsis (…) or other indicator where
appropriate
— Use three dots or &#0133; or the ellipsis character
— Optionally have a link to see the rest of the text
— Use an image and use the title attribute as the
text (good option when mouse hover is a
available)
!79

80. Long text
!80

81. Long text
!81

82. Ellipsis example
-1 for negative values
0
+1 for positive values
decode(sign(length(t.notes)-50)
, null, null
, -1, t.notes
, substr(t.notes,1,50) ||'…') note
!82

83. Ellipsis example w/link
decode(sign(length(t.notes)-40)
, -1, t.notes
, substr(t.notes,1,40) || '&#0133; '
|| '<a href=“f?p=&APP_ID.:
2:&SESSION.::NO:::#'||t.id
|| '">read more</a>') note
!83

84. Ellipsis example: CLOB
decode(sign(dbms_lob.getlength(t.notes)-50)
, -1, t.notes
, dbms_lob.substr(t.notes,1,50) ||'…'
) note
!84

85. Long text (Icon)
!85

86. Long text (Icon)
!86

87. Long text (Icon)
!
!
!
<a href="#"
Added by APEX
</a>
<img src="chk_#ACTIVE#.png" alt=“#ACTIVE#"/>
<a href="#" class=“hideMe508">
</a>
!87

88. Icons
Theme by Nick Buytaert http://apexplained.wordpress.com/2013/11/20/front-end-frameworks-in-oracle-apex/
!88

89. Icons
Bootstrap
Font Awesome
!89

90. SUMMARY
!90

91. “Perfection is achieved, not
when there is nothing more to
add, but when there is nothing
left to take away.”
!
― Antoine de Saint-Exupéry, Airman's Odyssey
!91

92. http://www.enkitec.com
!92