@agawish creating a stunning ui with oracle adf faces, using sass
DESCRIPTION
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.TRANSCRIPT
![Page 1: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/1.jpg)
CREATING A STUNNINGUI WITH ORACLE ADFFACES, USING SASS
ADF SKINNING MADE EASYProvided by
Created by Amr Gawish / / gawi.sh @agawish
![Page 2: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/2.jpg)
WHO AM IAmr Ismail Abdellatief Ibrahim Mostafa Hassan Mohammad Ali
El-Sayed Gawish
Oracle Middleware ConsultantFullstack Middleware DeveloperOracle ACE associate
![Page 3: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/3.jpg)
PUBLICATIONS
![Page 4: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/4.jpg)
Since 2003Based in United KingdomOracle Platinum PartnerOracle Middleware Partner of 2013Specialist Reseller of 2014 by CRNinfomentum.co.uk
![Page 5: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/5.jpg)
ORACLE ADF HAS MANY FACESPart of Oracle ADF Family, but can be used on its ownOne of the richest component-based frameworkMore than 150+ Ajaxed componentCharts and Graphs without the fuzzGreat JavaScript companion libraryCan be optimized for cachingHas a free version with all that gloryMuch much more...
![Page 6: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/6.jpg)
ORACLE ADF HAS MANY FACESGreat, but my customer want to be:
FlatResponsiveMobile FirstAdaptiveMetroThe next facebook
![Page 7: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/7.jpg)
GIVE ADF FACES A NEW SKINCan target all instances of the component for a consistent lookObfuscated and optimized for your web useDynamically create different styles for different browsersCacheableGreat JavaScript companion libraryCan be optimized for cachingVisual tool for easy editingCan extend other skinsMore than just CSSOne file to rule them allCan target agents / accessibility profiles / platform andrecently viewportsOptimised for resuabilitiyu using aliases
![Page 8: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/8.jpg)
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; } }}
![Page 9: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/9.jpg)
SKINNING IS NOT CSSINGWe all have been there!
![Page 10: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/10.jpg)
SKINNING IS NOT CSSINGProblems you face when working with ADF Skinning as a CSS file:
Component generated HTML doesn't match the front-endvisionDifferent syntax of CSSCan'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);}
![Page 11: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/11.jpg)
SKINNING IS NOT CSSINGWhy Front-end developers can't create ADF compatible skin
They need to use JDeveloper and Create ADF application towork withADF Skinning style can be intimidatingCan't work offlineAdapted CSS may require changing the ADF page componentsstructure
![Page 12: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/12.jpg)
SKINNING IS NOT CSSINGStill there are difficulties for ADF Developers to do skinning
CSS can be intimidatingCSS is not DRY enoughHarder to maintain
![Page 13: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/13.jpg)
MAKE SKINNING SASSYSASS (Syntactically Awesome Style Sheets) is an Extension of
CSS
Makes very DRY CodeCan reuse variablesCan create nested stylesCan create mixin (methods) and inheritanceCan use operatorsCan use LoopsCan use ConditionsCan use lists and maps (newest version of SASS)Works well with ADF skin css syntaxMature with great community supportGenerates well formatted CSS
![Page 14: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/14.jpg)
MAKE SKINNING SASSYVariables example
$font-stack: Helvetica, sans-serif;$primary-color: darken(#666, 50%);
.AFDefaultFontFamily:alias { font: 100% $font-stack;}.AFTextColor:alias{ color: $primary-color;}
![Page 15: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/15.jpg)
MAKE SKINNING SASSYNesting example
af|column{
background-color: $background-color;
&::data-cell{
border: 0;
&:selected{ border: 1px solid $selected-color; } }}
![Page 16: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/16.jpg)
MAKE SKINNING SASSYMixins example
@mixin colors($text, $background, $border) { color: $text; background-color: $background; border-color: $border;}
af|button.cancel-button{ @include colors(#fff, #c9302c, #ac2925);}
![Page 17: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/17.jpg)
MAKE SKINNING SASSYInheritance example
.reset-border { border:0;}
af|messages{ @extend .reset-border ; border: 1px solid #ccc;}
af|table{ @extend .reset-border ; background: #cecece;}
![Page 18: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/18.jpg)
MAKE SKINNING SASSYOperators example
$page-width: 960px;
.main-content{ width: $page-width / 100 * 65; //width: 624px;}.sidebar{ width: $page-width / 100 * 35; //width: 336px;}
![Page 19: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/19.jpg)
MAKE SKINNING SASSYLoop example
@for $i from 1 through 4{ af|button.style-#{$i} { width: 60px + ($i * 10); }}
![Page 20: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/20.jpg)
GUIDE YOUR SASS WITH A COMPASSCompass: A SASS framework that includes web's best reusable
patterns
Border radius
OpacityBox shadowText Shadowand more...
![Page 21: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/21.jpg)
GUIDE YOUR SASS WITH A COMPASSBorder 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; */}
![Page 22: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/22.jpg)
GUIDE YOUR SASS WITH A COMPASSOpacity 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; */}
![Page 23: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/23.jpg)
GUIDE YOUR SASS WITH A COMPASSText 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); */}
![Page 24: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/24.jpg)
MAXIMIZE PRODUCTIVITY WITH YOUR SKINSASS can maximize productivity and reusability.
![Page 25: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/25.jpg)
MAXIMIZE PRODUCTIVITY OF YOUR SKINBy separating your skin into different files, you can achieve:
ModularityReusabilityProductivity
All without sacrificing performance
![Page 26: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/26.jpg)
MAXIMIZE PRODUCTIVITY WITH YOUR SKINExample of using SASS modules
![Page 27: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/27.jpg)
MAXIMIZE PRODUCTIVITY WITH YOUR SKINExample of using SASS modules
![Page 28: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/28.jpg)
SKINNING TIPS AND TRICKSThrough 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 designSeparate global variables of SASS in its own fileMake sureorg.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSIONequals false whenever you are developing your skinMake sureorg.apache.myfaces.trinidad.CHECK_FILE_MODIFICATION equalstrue whenever you are developing your skinUse a secondary native SASS/CSS file whenever you use versionlower than 12.1.3Be friend with Skin editor, it can provide you great information
![Page 29: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/29.jpg)
SKINNING TIPS AND TRICKSKnow all AF global aliases very well, they will save you a lot oftimeUse SASS variables within your aliases
![Page 30: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/30.jpg)
SKINNING TIPS AND TRICKSMinimize the use of !important. Only use it when you don't have
any choice
![Page 31: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/31.jpg)
Q/A
![Page 32: @Agawish creating a stunning ui with oracle adf faces, using sass](https://reader034.vdocuments.us/reader034/viewer/2022051610/549833bdb479593d4d8b53c1/html5/thumbnails/32.jpg)
THANK YOUProvided by:
Amr Gawish / / gawi.sh @agawish