Heba Fouad - Oracle - ADF Skinning & JavaScript.pdf
Heba Fouad - Oracle - ADF Skinning & JavaScript.pdf
Heba Fouad - Oracle - ADF Skinning & JavaScript.pdf
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
1<br />
Copyright © 2012, <strong>Oracle</strong> and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12
<strong>ADF</strong> - <strong>Skinning</strong> & <strong>JavaScript</strong><br />
<strong>Heba</strong> <strong>Fouad</strong> (heba.fouad@oracle.com)<br />
A&C Fusion Middleware Specialist<br />
2<br />
Copyright © 2012, <strong>Oracle</strong> and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12
Agenda<br />
• Skins Overview<br />
• Working with <strong>Oracle</strong> <strong>ADF</strong> <strong>Skinning</strong><br />
• <strong>JavaScript</strong> with <strong>ADF</strong> Faces<br />
• Demonstration<br />
• Summary and Q&A<br />
3<br />
Copyright © 2012, <strong>Oracle</strong> and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12
Skins<br />
What are SKINS?<br />
4<br />
Copyright © 2012, <strong>Oracle</strong> and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12
Skins<br />
5<br />
Copyright © 2012, <strong>Oracle</strong> and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12
Skins Overview<br />
• Developers can change the styles, icons, properties, and text of <strong>ADF</strong><br />
Faces components by creating a new skin<br />
• A skin is a style sheet based on the CSS 3.0 syntax that is specified in<br />
one place for an entire application<br />
• Skins use CSS to define the layout of <strong>ADF</strong> Faces and Trinidad<br />
components<br />
– Do not operate on HTML elements<br />
– Use component selectors<br />
6<br />
Copyright © 2012, <strong>Oracle</strong> and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12
Creating a Skin<br />
• When creating a skin, one always extends a delivered skin<br />
• You can create multiple skins to serve different purposes<br />
• Skins can be dynamically applied at runtime<br />
• A skin consists of the following artifacts:<br />
– An <strong>ADF</strong> Skin file (.css) that defines the actual look of the components<br />
– A configuration file - “trinidad-skins.xml” - that lists all skins available for the<br />
application<br />
– An entry in the <strong>ADF</strong> Faces configuration file - “trinidad-config.xml”<br />
– Any other resources need to create the actual look of the components<br />
additional CSS files, Images<br />
7<br />
Copyright © 2012, <strong>Oracle</strong> and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12
Working with <strong>ADF</strong> Skin Selectors<br />
The <strong>ADF</strong> skinning framework provides a range of selectors:<br />
• There are two types of selectors:<br />
– Global selectors<br />
– Component-specific selectors.<br />
• A global selector defines style properties that you apply to one or more<br />
selectors.<br />
• A component-specific selector defines style properties that apply to one<br />
selector.<br />
8<br />
Copyright © 2012, <strong>Oracle</strong> and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12
Working with <strong>Oracle</strong> <strong>ADF</strong> Skin Editor<br />
9<br />
Copyright © 2012, <strong>Oracle</strong> and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12
Firebug<br />
• Use within FireFox<br />
• Inspect and edit HTML<br />
• View and Visualize CSS<br />
• Instantly change CSS definitions<br />
• Exploring the DOM tree<br />
• Execute <strong>JavaScript</strong><br />
10<br />
Copyright © 2012, <strong>Oracle</strong> and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12
Why use <strong>Skinning</strong>?<br />
Solutions<br />
• Component aware, Server Side<br />
Styling<br />
• Create one skin for the entire<br />
application<br />
• Every component automatically<br />
uses the styles as described by<br />
the skin<br />
• The server side skin is converted<br />
to a client side CSS stylesheet –<br />
on the fly<br />
11<br />
Copyright © 2012, <strong>Oracle</strong> and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12
<strong>JavaScript</strong> with <strong>ADF</strong> Faces<br />
When to use <strong>JavaScript</strong>?<br />
12<br />
Copyright © 2012, <strong>Oracle</strong> and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12
<strong>JavaScript</strong> with <strong>ADF</strong> Faces<br />
• If a use case requires <strong>JavaScript</strong><br />
• If there is no native solution to a problem<br />
• For client side integration<br />
13<br />
Copyright © 2012, <strong>Oracle</strong> and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12
Demonstration<br />
14<br />
Copyright © 2012, <strong>Oracle</strong> and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12
Summary<br />
<strong>ADF</strong> Faces <strong>Skinning</strong> & <strong>JavaScript</strong><br />
• A skin is a style sheet based on the CSS 3.0 syntax specified in one<br />
place for an entire application.<br />
• Instead of providing a style sheet for each component, or inserting a<br />
style sheet on each page, you can create one skin for the entire<br />
application.<br />
• <strong>JavaScript</strong> in <strong>ADF</strong> Faces should only be used if it has to be used and<br />
never only because it can be used.<br />
15<br />
Copyright © 2012, <strong>Oracle</strong> and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12
Takeaways<br />
Suit up<br />
your APPLICATIONS<br />
With <strong>ADF</strong> Faces!<br />
16<br />
Copyright © 2012, <strong>Oracle</strong> and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12
<strong>Oracle</strong> <strong>ADF</strong> Essentials<br />
A "FREEMIUM" VERSION OF<br />
ORACLE APPLICATION<br />
DEVELOPMENT<br />
FRAMEWORK (<strong>ADF</strong>) FOR<br />
CREATING WEB<br />
APPLICATIONS.<br />
17<br />
Copyright © 2012, <strong>Oracle</strong> and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12
References<br />
• If you have any further questions please don’t hesitate to contact the<br />
<strong>Oracle</strong> partner hub – ISV Migration Center in South Africa<br />
www.blogs.oracle.com/imc<br />
Partner.imc@beehiveonline.oracle.com<br />
18<br />
Copyright © 2012, <strong>Oracle</strong> and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12
If you have any further questions please don’t hesitate to contact the<br />
<strong>Oracle</strong> partner hub – ISV Migration Center in South Africa<br />
blogs.oracle.com/imc<br />
Partner.imc@beehiveonline.oracle.com<br />
19<br />
Copyright © 2012, <strong>Oracle</strong> and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12
20<br />
Copyright © 2012, <strong>Oracle</strong> and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12
21<br />
Copyright © 2012, <strong>Oracle</strong> and/or its affiliates. All rights reserved. Insert Information Protection Policy Classification from Slide 12
Change language