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.

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. WHO AM I
Amr Ismail Abdellatief Ibrahim Mostafa Hassan Mohammad Ali
El-Sayed Gawish
Oracle Middleware Consultant
Fullstack Middleware Developer
Oracle ACE associate

3. PUBLICATIONS

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. 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. ORACLE ADF HAS MANY FACES
Great, but my customer want to be:
Flat
Responsive
Mobile First
Adaptive
Metro
The next facebook

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. 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. SKINNING IS NOT CSSING
We all have been there!

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. 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. 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. 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. 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. MAKE SKINNING SASSY
Nesting example
af|column{
background-color: $background-color;
&::data-cell{
border: 0;
&:selected{
border: 1px solid $selected-color;
}
}
}

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. 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. 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. MAKE SKINNING SASSY
Loop example
@for $i from 1 through 4{
af|button.style-#{$i} {
width: 60px + ($i * 10);
}
}

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. 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. 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. 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. MAXIMIZE PRODUCTIVITY WITH YOUR SKIN
SASS can maximize productivity and reusability.

25. MAXIMIZE PRODUCTIVITY OF YOUR SKIN
By separating your skin into different files, you can achieve:
Modularity
Reusability
Productivity
All without sacrificing performance

26. MAXIMIZE PRODUCTIVITY WITH YOUR SKIN
Example of using SASS modules

27. MAXIMIZE PRODUCTIVITY WITH YOUR SKIN
Example of using SASS modules

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. 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. SKINNING TIPS AND TRICKS
Minimize the use of !important. Only use it when you don't have
any choice

31. Q/A

32. THANK YOU
Provided by:
Amr Gawish / gawi.sh / @agawish