CREATING A STUNNING

UI WITH ORACLE ADF

FACES, USING SASS
ADF SKINNING MADE EASY
Special thanks to

Created by Amr Gawish / gawi.sh / @agawish

WHO AM I
Amr Ismail Abdellatief Ibrahim Mostafa Hassan Mohammad Ali
El-Sayed Gawish
Oracle Middleware Consultant
Fullstack Middleware Developer
Oracle ACE associate

PUBLICATIONS

Since 2003
Based in United Kingdom
Oracle Platinum Partner
Oracle Middleware Partner of 2013
Specialist Reseller of 2014 by CRN
infomentum.co.uk

AGENDA
Oracle ADF has many Faces
Give ADF Faces a new skin
Skinning is not CSSing
Make skinning SASSy
Guide your SASS with a Compass
Maximize productivity with your skin
Skinning Tips and Tricks
Q/A

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

ORACLE ADF HAS MANY FACES

Great, but my customer want to be:
Flat
Responsive
Mobile First
Adaptive
Metro
The next facebook

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

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 CSSING

We all have been there!

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(#f06d0
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 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

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

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

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

MAKE SKINNING SASSY

Nesting example
af|column{
background-color: $background-color;
&::data-cell{
border: 0;
&:selected{
border: 1px solid $selected-color;
}
}
}

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

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

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

MAKE SKINNING SASSY

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

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

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

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

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

MAXIMIZE PRODUCTIVITY WITH YOUR SKIN

SASS can maximize productivity and reusability.

MAXIMIZE PRODUCTIVITY OF YOUR SKIN

By separating your skin into different files, you can achieve:
Modularity
Reusability
Productivity
All without sacrificing performance

MAXIMIZE PRODUCTIVITY WITH YOUR SKIN

Example of using SASS modules

MAXIMIZE PRODUCTIVITY WITH YOUR SKIN

Example of using SASS modules

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

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

SKINNING TIPS AND TRICKS

Minimize the use of !important. Only use it when you don't have
any choice

Q/A

THANK YOU
Special Thanks to:

Amr Gawish / gawi.sh / @agawish