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.

@Agawish creating a stunning ui with oracle adf faces, using sass

2,380 views

Published on

Oracle Application Development Framework (Oracle ADF) provides developers and end users with create functionality, but without a great user interface to show off these features, the client might be driven away from Oracle ADF applications. Come to this session to see a demonstration of how to easily create a stunning user interface with Oracle ADF skinning by using the power of Sass and Compass. You will learn how to create responsive and adaptive user interfaces.

Published in: Technology

@Agawish creating a stunning ui with oracle adf faces, using sass

  1. 1. CREATING A STUNNING UI WITH ORACLE ADF FACES, USING SASS ADF SKINNING MADE EASY Provided by Created by Amr Gawish / gawi.sh / @agawish
  2. 2. WHO AM I Amr Ismail Abdellatief Ibrahim Mostafa Hassan Mohammad Ali El-Sayed Gawish Oracle Middleware Consultant Fullstack Middleware Developer Oracle ACE associate
  3. 3. PUBLICATIONS
  4. 4. Since 2003 Based in United Kingdom Oracle Platinum Partner Oracle Middleware Partner of 2013 Specialist Reseller of 2014 by CRN infomentum.co.uk
  5. 5. ORACLE ADF HAS MANY FACES Part of Oracle ADF Family, but can be used on its own One of the richest component-based framework More than 150+ Ajaxed component Charts and Graphs without the fuzz Great JavaScript companion library Can be optimized for caching Has a free version with all that glory Much much more...
  6. 6. ORACLE ADF HAS MANY FACES Great, but my customer want to be: Flat Responsive Mobile First Adaptive Metro The next facebook
  7. 7. GIVE ADF FACES A NEW SKIN Can target all instances of the component for a consistent look Obfuscated and optimized for your web use Dynamically create different styles for different browsers Cacheable Great JavaScript companion library Can be optimized for caching Visual tool for easy editing Can extend other skins More than just CSS One file to rule them all Can target agents / accessibility profiles / platform and recently viewports Optimised for resuabilitiyu using aliases
  8. 8. GIVE ADF FACES A NEW SKIN .MyColor:alias{ color: #fefefe; } .AFDefaultColor:alias { -tr-inhibit: color; color: -tr-property-ref(".MyColor:alias","color"); } af|selectOneChoice::label { -tr-rule-ref: selector(".AFLabel:alias"); } @platform window, linux { @agent ie and (version: 7) and (version: 8), gecko and (version: 1.9) { af|inputText::content:rtl { background-color:pink; } } }
  9. 9. SKINNING IS NOT CSSING We all have been there!
  10. 10. SKINNING IS NOT CSSING Problems you face when working with ADF Skinning as a CSS file: Component generated HTML doesn't match the front-end vision Different syntax of CSS Can't use browser's prefixed values CSS Version .my-style{ background-image: -moz-linear-gradient(left, red, #f06d06); background-image: -webkit-gradient(linear, left top, right top, from(red), to(#f06d06)); background-image: -o-linear-gradient(left, red, #f06d06); background-image: linear-gradient(to right, red, #f06d06); } ADF End Result .ps20{ background-image: linear-gradient(to right, red, #f06d06); }
  11. 11. SKINNING IS NOT CSSING Why Front-end developers can't create ADF compatible skin They need to use JDeveloper and Create ADF application to work with ADF Skinning style can be intimidating Can't work offline Adapted CSS may require changing the ADF page components structure
  12. 12. SKINNING IS NOT CSSING Still there are difficulties for ADF Developers to do skinning CSS can be intimidating CSS is not DRY enough Harder to maintain
  13. 13. MAKE SKINNING SASSY SASS (Syntactically Awesome Style Sheets) is an Extension of CSS Makes very DRY Code Can reuse variables Can create nested styles Can create mixin (methods) and inheritance Can use operators Can use Loops Can use Conditions Can use lists and maps (newest version of SASS) Works well with ADF skin css syntax Mature with great community support Generates well formatted CSS
  14. 14. MAKE SKINNING SASSY Variables example $font-stack: Helvetica, sans-serif; $primary-color: darken(#666, 50%); .AFDefaultFontFamily:alias { font: 100% $font-stack; } .AFTextColor:alias{ color: $primary-color; }
  15. 15. MAKE SKINNING SASSY Nesting example af|column{ background-color: $background-color; &::data-cell{ border: 0; &:selected{ border: 1px solid $selected-color; } } }
  16. 16. MAKE SKINNING SASSY Mixins example @mixin colors($text, $background, $border) { color: $text; background-color: $background; border-color: $border; } af|button.cancel-button{ @include colors(#fff, #c9302c, #ac2925); }
  17. 17. MAKE SKINNING SASSY Inheritance example .reset-border { border:0; } af|messages{ @extend .reset-border ; border: 1px solid #ccc; } af|table{ @extend .reset-border ; background: #cecece; }
  18. 18. MAKE SKINNING SASSY Operators example $page-width: 960px; .main-content{ width: $page-width / 100 * 65; //width: 624px; } .sidebar{ width: $page-width / 100 * 35; //width: 336px; }
  19. 19. MAKE SKINNING SASSY Loop example @for $i from 1 through 4{ af|button.style-#{$i} { width: 60px + ($i * 10); } }
  20. 20. GUIDE YOUR SASS WITH A COMPASS Compass: A SASS framework that includes web's best reusable patterns Border radius Opacity Box shadow Text Shadow and more...
  21. 21. GUIDE YOUR SASS WITH A COMPASS Border box example @import "compass/css3"; @import "compass/utilities"; af|button{ @include border-radius(25px); /* This will generate: -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; */ }
  22. 22. GUIDE YOUR SASS WITH A COMPASS Opacity example @import "compass/css3"; af|panelTabbed{ @include transparent; /* This will generate: filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; */ } af|button:disabled{ @include opacity(0.2); /* This will generate: filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20); opacity: 0.2; */ }
  23. 23. GUIDE YOUR SASS WITH A COMPASS Text shadow example $default-text-shadow-color: rgba(red, 0.6); $default-text-shadow-blur: 3px; $default-text-shadow-v-offset: 1px; .main-title{ @include single-text-shadow;; /* This will generate: text-shadow: 0px 1px 3px rgba(255, 0, 0, 0.6); */ }
  24. 24. MAXIMIZE PRODUCTIVITY WITH YOUR SKIN SASS can maximize productivity and reusability.
  25. 25. MAXIMIZE PRODUCTIVITY OF YOUR SKIN By separating your skin into different files, you can achieve: Modularity Reusability Productivity All without sacrificing performance
  26. 26. MAXIMIZE PRODUCTIVITY WITH YOUR SKIN Example of using SASS modules
  27. 27. MAXIMIZE PRODUCTIVITY WITH YOUR SKIN Example of using SASS modules
  28. 28. SKINNING TIPS AND TRICKS Through our experiences, here is a small list of things that can save you a lot of troubles in the future Use non-stretching layout components for responsive design Separate global variables of SASS in its own file Make sure org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION equals false whenever you are developing your skin Make sure org.apache.myfaces.trinidad.CHECK_FILE_MODIFICATION equals true whenever you are developing your skin Use a secondary native SASS/CSS file whenever you use version lower than 12.1.3 Be friend with Skin editor, it can provide you great information
  29. 29. SKINNING TIPS AND TRICKS Know all AF global aliases very well, they will save you a lot of time Use SASS variables within your aliases
  30. 30. SKINNING TIPS AND TRICKS Minimize the use of !important. Only use it when you don't have any choice
  31. 31. Q/A
  32. 32. THANK YOU Provided by: Amr Gawish / gawi.sh / @agawish

×