ugf3777_gawish-creating a stunning ui with oracle adf faces, using sass

CREATING A STUNNINGUI WITH ORACLE ADFFACES, USING SASS

ADF SKINNING MADE EASYSpecial thanks to

Created by Amr Gawish / / gawi.sh @agawish

WHO AM IAmr Ismail Abdellatief Ibrahim Mostafa Hassan Mohammad Ali

El-Sayed Gawish

Oracle Middleware ConsultantFullstack Middleware DeveloperOracle ACE associate

PUBLICATIONS

Since 2003Based in United KingdomOracle Platinum PartnerOracle Middleware Partner of 2013Specialist Reseller of 2014 by CRNinfomentum.co.uk

AGENDAOracle ADF has many FacesGive ADF Faces a new skinSkinning is not CSSingMake skinning SASSyGuide your SASS with a CompassMaximize productivity with your skinSkinning Tips and TricksQ/A

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...

ORACLE ADF HAS MANY FACESGreat, but my customer want to be:

FlatResponsiveMobile FirstAdaptiveMetroThe next facebook

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

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; } }}

SKINNING IS NOT CSSINGWe all have been there!

SKINNING IS NOT CSSINGProblems you face when working with ADF Skinning as a CSS file:

Component generated HTML doesn't match the front-end visionDifferent 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);}

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

SKINNING IS NOT CSSINGStill there are difficulties for ADF Developers to do skinning

CSS can be intimidatingCSS is not DRY enoughHarder to maintain

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

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;}

MAKE SKINNING SASSYNesting example

af|column{

background-color: $background-color;

&::data-cell{

border: 0;

&:selected{ border: 1px solid $selected-color; } }}

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);}

MAKE SKINNING SASSYInheritance example

.reset-border { border:0;}

af|messages{ @extend .reset-border ; border: 1px solid #ccc;}

af|table{ @extend .reset-border ; background: #cecece;}

MAKE SKINNING SASSYOperators example

$page-width: 960px;

.main-content{ width: $page-width / 100 * 65; //width: 624px;}.sidebar{ width: $page-width / 100 * 35; //width: 336px;}

MAKE SKINNING SASSYLoop example

@for $i from 1 through 4{ af|button.style-#{$i} { width: 60px + ($i * 10); }}

GUIDE YOUR SASS WITH A COMPASSCompass: A SASS framework that includes web's best reusable

patterns

Border radius

OpacityBox shadowText Shadowand more...

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; */}

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; */}

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); */}

MAXIMIZE PRODUCTIVITY WITH YOUR SKINSASS can maximize productivity and reusability.

MAXIMIZE PRODUCTIVITY OF YOUR SKINBy separating your skin into different files, you can achieve:

ModularityReusabilityProductivity

All without sacrificing performance

MAXIMIZE PRODUCTIVITY WITH YOUR SKINExample of using SASS modules

MAXIMIZE PRODUCTIVITY WITH YOUR SKINExample of using SASS modules

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 fileUse a secondary native SASS/CSS file whenever you useversion lower than 12.1.3Be friend with Skin editor, it can provide you great information

SKINNING TIPS AND TRICKSKnow all AF global aliases very well, they will save you a lot of

time

Use SASS variables within your aliases

SKINNING TIPS AND TRICKSMinimize the use of !important. Only use it when you don't have

any choice

Q/A

THANK YOUSpecial Thanks to:

Amr Gawish / / gawi.sh @agawish