Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Get the Look and Feel You Want in Oracle APEX

5,327 views

Published on

You just received an image or layered file from marketing with the design for an application you need to build. You're wondering what to do. How do I translate this into a usable APEX template? APEX provides great flexibility that allows your applications to fit within your corporate visual theme, but many people don't realize that the APEX built-in themes are not static or your only option. HTML and CSS can be daunting when your expertise lies within the database realm. This session will show you that a little understanding goes a long way.

Published in: Technology, Business
  • Be the first to comment

Get the Look and Feel You Want in Oracle APEX

  1. 1. #Kscope Get the look and feel you want in your APEX Applications Jorge Rimblas Rimblas Consulting ! jorge@rimblas.com
  2. 2. #Kscope About the speaker • Using Oracle since1995 • eBusiness Suite , SQL, PL/SQL, Forms, C, UNIX, web technologies • Using APEX since 2005 • Exclusively APEX since 2008 • Consulting • Training • One on One help
  3. 3. Now what? • You just got a JPG or PSD file • Assignment:
 Make APEX use it
  4. 4. Now what? • Client shows you their Corporate Website • Assignment:
 Make APEX use it Or
  5. 5. If we’re lucky • Grab the logo from their Corporate Website • Upload and use it in APEX • Choose the closest theme from the gallery
  6. 6. If we’re lucky • Grab the logo from their Corporate Website • Upload and use it in APEX • Choose the closest theme from the gallery Usually not that lucky! Plan B
  7. 7. • Understand themes and templates • Identify and map page elements • Build your own “on/off” state components Agenda
  8. 8. Themes • Determine look & feel • Themes are just a skin
  9. 9. Themes
  10. 10. Themes
  11. 11. Themes
  12. 12. Themes
  13. 13. Themes
  14. 14. How do Themes Do it? TEMPLATES
  15. 15. Templates
  16. 16. Templates
  17. 17. Templates
  18. 18. Templates
  19. 19. Templates
  20. 20. Templates
  21. 21. Templates
  22. 22. Templates
  23. 23. Templates are Hard • Page, Region, Report, Label, List, Popup List, Calendar, Breadcrumb, Button • 70+ to 90+ templates
  24. 24. Templates can be overwhelming
  25. 25. Templates can be overwhelming
  26. 26. • We need to simplify • One bite at a time Drink or Cry?
  27. 27. Simplify
  28. 28. Remove Extras
  29. 29. Remove Extras • We go from 25 to 2 • Change the names • If you need more, add them!
  30. 30. Templates & Substitutions • Templates work by expanding substitutions • Many may be empty • The end result is sent to the page
  31. 31. Templates & Substitutions S u b s t i t u t i o n S t r i n g Va l u e #LABEL# Save Record <button> <span>#LABEL#</span> </button> Template Before Substitution <button> <span>Save Record</span> </button> Template After Substitution
  32. 32. Templates & Substitutions S u b s t i t u t i o n S t r i n g Va l u e s #JAVASCRIPT# apex.submit(‘SAVE’) #BUTTON_ATTRIBUTES# #BUTTON_ID# 2345654 #LABEL# Save Record <button onclick="#JAVASCRIPT#" class="button" #BUTTON_ATTRIBUTES# id="#BUTTON_ID#"> <span>#LABEL#</span> </button> Template <button onclick="apex.submit(‘SAVE’)" class="button" id="2345654"> <span>Save Record</span> </button> After Substitution
  33. 33. Sorting Things Out • Identify major components • Map elements to UI counterparts • Find similar APEX theme
  34. 34. Major Components
  35. 35. Major Components • Logo • Nav Bar • Tabs • Breadcrumbs • Content Region • Buttons • Report w/Alt Rows
  36. 36. Major Components • Logo • Nav Bar • Tabs • Breadcrumbs • Content Region • Buttons • Report w/Alt Rows First: • Header • Body • Footer
  37. 37. Major Components Page Header ! not the same as ! HTML Header
  38. 38. Header: CSS and Javascript All page content in Body ! ! ! ! ! ! ! and Footer
  39. 39. Body • HTML & Substitution Strings
  40. 40. Body • Substitution Strings
  41. 41. Body • HTML Structure
  42. 42. Body: Tabs <div id="tabs"> <div class="frame"> <div class="bg"> <div class="tab-holder"> #TAB_CELLS# </div> </div> </div> </div> #TAB_STATUS# classes: •first-current •current •first-non-current •non-current
  43. 43. Body: Tabs Tab Base first-current & current first-non-current! non-current non-current:hover #TAB_STATUS# classes: •first-current •current •first-non-current •non-current
  44. 44. Body: Tabs One Single Image Breadcrumb Sprite...
  45. 45. SpritesCommodore ?
  46. 46. Sprites Similar to one image for “on” and “off” states Sprites aren’t little images, a sprite is one big image! Reference: http://css-tricks.com/css-sprites/ and popular social media site that recently hand an IPO
  47. 47. Sprites “Reducing the number of HTTP requests has the biggest impact on reducing [page loading] response time and is often the easiest performance improvement to make.” "Performance Research, Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests" by Tenni Theurer on the Yahoo! User Interface Blog
  48. 48. Sprites • Combine multiple images into one • Build your own sprites • Search for services that create sprites
  49. 49. Styling two state elements • You require two images! 1.normal 2.hover! • Alignment and size must be exact! • But we’ll combine them into one file (sprites)
  50. 50. Styling state elements • Add multiple state images to your file! 1.normal 2.hover! 3.selected 4.selected hover 5.alternative 6.etc... !
  51. 51. Styling buttons Make it long enough to fit large text End Cap 400 px
  52. 52. Styling buttons class="button-alt1" class="button-default" class="button-alt2"
  53. 53. <button class="button-alt1" type="button"> <span>#LABEL#</span> </button> Styling buttons <button class="button-alt1" type="button"> <span>#LABEL#</span> </button> <button ! 59 class="button-alt1"
  54. 54. <button class="button-alt1" type="button"> <span>#LABEL#</span> </button> Styling buttons <button class="button-alt1" type="button"> <span>#LABEL#</span> </button> 60 <button id="#BUTTON_ID#" onclick="#LINK#" class="button-alt1" #BUTTON_ATTRIBUTES# type="button"> <span>#LABEL#</span> </button> <button id="#BUTTON_ID#" onclick="#LINK#" class="button-alt1" #BUTTON_ATTRIBUTES# type="button"> <span>#LABEL#</span> </button>
  55. 55. The CSS button.button-default { padding: 0 11px 0 0; margin-left: 4px;
 background: transparent url(sButtons.png) no-repeat right -50px; } button.button-default span { padding: 5px 4px 4px 14px; height: 16px; color: #ffffff; font: normal 15px/16px Arial, sans-serif !important; background: transparent url(sButtons.png) no-repeat left 0; } ! ! button.button-default:hover { background-position:right -150px; } button.button-default:hover span { background-position:0 -100px; } 0 px -50 px -100 px -150 px
  56. 56. The CSS
  57. 57. DEMO
  58. 58. Q & A jorge@rimblas.com @rimblas

×