creating a business oriented ui in apex
DESCRIPTION
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.TRANSCRIPT
![Page 1: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/1.jpg)
Creating a Business-Oriented UI in APEX
Jorge Rimblas & Scott Spendolini
!1
![Page 2: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/2.jpg)
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
![Page 3: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/3.jpg)
� @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
Jorge Rimblas
!3
![Page 4: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/4.jpg)
� @sspendol
� Ex-Oracle Employee of 10 years
� Senior Product Manager for Oracle APEXfrom 2002 through 2005
� Founded Sumner Technologiesin 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
Scott Spendolini
!4
![Page 5: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/5.jpg)
Agenda� Introduction
� Strategic
� Tactical
� Summary
!5
![Page 6: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/6.jpg)
INTRODUCTION
!6
![Page 7: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/7.jpg)
Question
!7
� How many of you design APEX applications that are Internet-facing and used for commercial purposes?
![Page 8: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/8.jpg)
Question� Which looks more like the applications that
you’re tasked to build with APEX?
!8
![Page 9: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/9.jpg)
Question� What device do your end users use when running
most APEX applications?
!9
![Page 10: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/10.jpg)
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
![Page 11: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/11.jpg)
“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”
!11
From http://en.wikipedia.org/wiki/Responsive_design
![Page 12: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/12.jpg)
apex.oracle.com
!12
![Page 13: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/13.jpg)
Is Responsive Design for You?
!13
![Page 14: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/14.jpg)
Is Responsive Design for You?
!14
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
Top 100 Tablet Screen Sizes
![Page 15: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/15.jpg)
Is Responsive Design for You?
!15
Slide from http://apex.shak.us/post/37807712185/responsive-web-design-in-apex-updated-for-nyoug
![Page 16: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/16.jpg)
Unresponsive
!16
� 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
![Page 17: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/17.jpg)
STRATEGIC
!17
![Page 18: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/18.jpg)
Strategic Tips
!18
� Theme Selection & Modification
� Screen Design Patterns
� Template Consolidation
� Subscriptions
� Just Say No
![Page 19: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/19.jpg)
THEME SELECTION & MODIFICATION
!19
![Page 20: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/20.jpg)
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
![Page 21: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/21.jpg)
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
![Page 22: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/22.jpg)
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
![Page 23: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/23.jpg)
Augmenting the CSS� Before:
� After:
!23
![Page 24: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/24.jpg)
Augmenting the CSS
!24
![Page 25: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/25.jpg)
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
![Page 26: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/26.jpg)
D E M O N S T R A T I O N
AUGMENTING A THEME CSS
!26
![Page 27: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/27.jpg)
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
![Page 28: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/28.jpg)
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
![Page 29: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/29.jpg)
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
![Page 30: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/30.jpg)
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
![Page 31: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/31.jpg)
D E M O N S T R A T I O N
CUSTOM THEME CSS FILES
!31
![Page 32: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/32.jpg)
SCREEN DESIGN PATTERNS
!32
![Page 33: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/33.jpg)
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
![Page 34: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/34.jpg)
Screen Design Patterns� Examples of common screen design patterns
!34
From http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns
![Page 35: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/35.jpg)
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
![Page 36: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/36.jpg)
TEMPLATE CONSOLIDATION
!36
![Page 37: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/37.jpg)
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
![Page 38: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/38.jpg)
Deleting Templates
!38
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
![Page 39: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/39.jpg)
SUBSCRIPTIONS
!39
![Page 40: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/40.jpg)
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
![Page 41: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/41.jpg)
Subscriptions
!41
!!
Template A App 100
!!
Template A App 200
!!
Template A App 300
!!
Template A App 400
![Page 42: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/42.jpg)
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
![Page 43: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/43.jpg)
D E M O N S T R A T I O N
SUBSCRIPTIONS
!43
![Page 44: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/44.jpg)
JUST SAY NO
!44
![Page 45: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/45.jpg)
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
![Page 46: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/46.jpg)
TACTICAL
!46
![Page 47: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/47.jpg)
HTML/CSS FRAMEWORKS
!47
![Page 48: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/48.jpg)
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
![Page 49: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/49.jpg)
… and APEX Themes!
� Don’t forget, you do have APEX Themes
!49
![Page 50: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/50.jpg)
GROUPING TECHNIQUES
!50
![Page 51: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/51.jpg)
Why group?� Guide the eye
� Communicate which things are related
� The more elements on the page, the more important grouping becomes
!51
![Page 52: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/52.jpg)
jQuery Tabs
!52
![Page 53: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/53.jpg)
jQuery Tabs
!53
![Page 54: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/54.jpg)
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
![Page 55: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/55.jpg)
jQuery Tabs: How To
<div id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES# class="jQueryTabsWide">
#BODY#
</div>
!55
� Define a new template
![Page 56: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/56.jpg)
jQuery Tabs: How To
<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
� Opening jQuery Tabs container in an HTML Region:TABS - OPEN
![Page 57: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/57.jpg)
jQuery Tabs: How To
!57
� Add your regions in between “TABS - OPEN” and “TABS - CLOSE”
� Region IDs need to match the IDs on your list
</div>
� Opening jQuery Tabs container in an HTML Region:TABS - CLOSE
� Visit ARC: http://www.enkitec.com/resources/apex
![Page 58: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/58.jpg)
REGIONS AND SUB REGIONS
!58
![Page 59: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/59.jpg)
Regions and Subregions
!59
![Page 60: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/60.jpg)
Regions and Subregions
!60
![Page 61: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/61.jpg)
Regions and Subregions
!61
parent tab
![Page 62: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/62.jpg)
WIZARDS
!62
![Page 63: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/63.jpg)
Wizards Inside APEX
!63
![Page 64: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/64.jpg)
Implementing Wizards (easy)� Use APEX session state to “remember” values
� On your final step, reference the items from other pages
!64
![Page 65: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/65.jpg)
Implementing Wizards (easy)
insert into inventory_items ( name , description , status , category , {30 other fields}) values ( :P10_NAME, :P20_DESCRIPTION, :P30_STATUS, :P40_CATEGORY);
!65
![Page 66: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/66.jpg)
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
![Page 67: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/67.jpg)
ALIGNMENT OF ITEMS/REGIONS
!67
![Page 68: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/68.jpg)
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
![Page 69: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/69.jpg)
Why is alignment important?
!69
![Page 70: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/70.jpg)
Why is alignment important?
!70
![Page 71: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/71.jpg)
SPACING
!71
![Page 72: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/72.jpg)
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
![Page 73: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/73.jpg)
Spacing
!73
![Page 74: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/74.jpg)
Spacing
!74
![Page 75: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/75.jpg)
Spacing
!75
![Page 76: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/76.jpg)
Spacing
!76
![Page 77: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/77.jpg)
OTHER TECHNIQUES
!77
![Page 78: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/78.jpg)
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
![Page 79: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/79.jpg)
Long text� Use an ellipsis (…) or other indicator where
appropriate
� Use three dots or … 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
![Page 80: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/80.jpg)
Long text
!80
![Page 81: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/81.jpg)
Long text
!81
![Page 82: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/82.jpg)
Ellipsis example
decode(sign(length(t.notes)-50) , null, null , -1, t.notes , substr(t.notes,1,50) ||'…') note
!82
-1 for negative values 0 +1 for positive values
![Page 83: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/83.jpg)
Ellipsis example w/link
decode(sign(length(t.notes)-40) , -1, t.notes , substr(t.notes,1,40) || '… ' || '<a href=“f?p=&APP_ID.:2:&SESSION.::NO:::#'||t.id || '">read more</a>') note
!83
![Page 84: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/84.jpg)
Ellipsis example: CLOB
decode(sign(dbms_lob.getlength(t.notes)-50) , -1, t.notes , dbms_lob.substr(t.notes,1,50) ||'…' ) note
!84
![Page 85: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/85.jpg)
Long text (Icon)
!85
![Page 86: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/86.jpg)
Long text (Icon)
!86
![Page 87: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/87.jpg)
Long text (Icon)
!
!
!
</a>
<img src="chk_#ACTIVE#.png" alt=“#ACTIVE#"/>
<a href="#" class=“hideMe508">
!87
<a href="#"
</a>
Added by APEX
![Page 88: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/88.jpg)
Icons
!88
Theme by Nick Buytaert http://apexplained.wordpress.com/2013/11/20/front-end-frameworks-in-oracle-apex/
![Page 89: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/89.jpg)
Icons
!89
Bootstrap
Font Awesome
![Page 90: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/90.jpg)
SUMMARY
!90
![Page 91: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/91.jpg)
“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
![Page 92: Creating a Business Oriented UI in APEX](https://reader034.vdocuments.us/reader034/viewer/2022051817/5480b506b4795937578b4752/html5/thumbnails/92.jpg)
http://www.enkitec.com
!92