Download - Creating a Business Oriented UI in APEX
![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