Problem description: ADF application by default now renders in skyros skins. Before this it was FusionFx. Question is which all skins are provided by Oracle and how to see there look and feel. If we know them, then we can actually figure out which is best suited for us. In this blog I am going to show how do we get all skins provided by Oracle and how to use them in your project.
Solution: I would like to discuss about following topics
1. Overview of skins in ADF
2. trinidad-skins.xml
3. trinidad-config.xml
4. Oracle provided skins
-----------------------------------------------
1. Overview of skins in ADF: In normal web application we generally defind css file in <html> <head> section. In ADF we can always do that using af:resource tag but that may not be needed always. In ADF if we want to change (better to say extend) framework provided skins, we need to follow certain steps.
a. Define a skin-family in trinidad-skins.xml
b. Use skin-family using trinidad-config.xml
c. Add ADF selectors in css file to create styles for ADF components.
2. trinidad-skins.xml: This file is used to define a css skin family. This file can be placed under src/META-INF directory of your UI project. To define a skin you need to use following
<?xml version="1.0" encoding="UTF-8" ?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
<id>sanstyle-v1.desktop</id>
<family>sanStyle-v1</family>
<version>
<default>true</default>
<name>v1</name>
</version>
<extends>fusionFx-v1.desktop</extends>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>/skins/css/sanStyle-v1.css</style-sheet-name>
</skin>
</skins>
It means you are defining a new skin family 'sanStyle-v1', which has css at '/skins/css/sanStyle-v1.css'. You need to create that css file in your project. It extends fusionFx-v1.desktop skin family, which means any styles defined in that css will automatically be included. You can definitely override those styles in your css 'sanStyle-v1.css' to create style specific to your need.
There are two ways to identify skin-family
a. Using <id> tag: id of a family must be unique. So you can identify a skin family using id.
b. Using <family> and <version> tags: <family> and <version> tags also form unique combination and it can also be used to identify skin-family.
We see there are two ways to identify skin-family. Now catch is when to use what.
Theare two use cases when we want to refer a skin-family
a. When we want to extend it and create new skin family: In this case we should use <id> tag
b. When we want application to pick css styles from a particular skin-family: In this case we need to specify skin-family in trinidad-config.xml, but we should use <family> and <version> tag to uniquely identify a skin-family.
3. trinidad-config.xml: Now you want to use this style. For that you need to have a trinidad-config.xml file in WEB-INF directory. Its by default created in ADF ViewController project.
If you see its default entry now a days pointing to skyros.
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
<skin-family>skyros</skin-family>
<skin-version>v1</skin-version>
</trinidad-config>
If you want to use sanStyle-v1, you can make entry something like
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
<skin-family>sanStyle-v1</skin-family>
<skin-version>v1</skin-version>
</trinidad-config>
Few important entries are
Similarly there are other entries also.
You can even open css file and see different selectors.
Now you can try out different skin-family in trinidad-config.xml and see which skin is best for your project.
If you want to view a look of each skin-family you need to change trinidad-config.xml entry. Any change in this file will require a re-deployment. To avoid redeploymenet you can put expression in trinidad-config.xml as
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
<skin-family>#{param.skinFamily}</skin-family>
</trinidad-config>
Now in url pass skinFamily=<familyName> and you will see page in that skin-family.
For example
http://<server:port>/<context>/faces/<page.jspx>?skinFamily=fusionFx will render page in fusionFx skin and
http://<server:port>/<context>/faces/<page.jspx>?skinFamily=skyros will render page in skyros skin.
Solution: I would like to discuss about following topics
1. Overview of skins in ADF
2. trinidad-skins.xml
3. trinidad-config.xml
4. Oracle provided skins
-----------------------------------------------
1. Overview of skins in ADF: In normal web application we generally defind css file in <html> <head> section. In ADF we can always do that using af:resource tag but that may not be needed always. In ADF if we want to change (better to say extend) framework provided skins, we need to follow certain steps.
a. Define a skin-family in trinidad-skins.xml
b. Use skin-family using trinidad-config.xml
c. Add ADF selectors in css file to create styles for ADF components.
2. trinidad-skins.xml: This file is used to define a css skin family. This file can be placed under src/META-INF directory of your UI project. To define a skin you need to use following
<?xml version="1.0" encoding="UTF-8" ?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
<id>sanstyle-v1.desktop</id>
<family>sanStyle-v1</family>
<version>
<default>true</default>
<name>v1</name>
</version>
<extends>fusionFx-v1.desktop</extends>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>/skins/css/sanStyle-v1.css</style-sheet-name>
</skin>
</skins>
It means you are defining a new skin family 'sanStyle-v1', which has css at '/skins/css/sanStyle-v1.css'. You need to create that css file in your project. It extends fusionFx-v1.desktop skin family, which means any styles defined in that css will automatically be included. You can definitely override those styles in your css 'sanStyle-v1.css' to create style specific to your need.
There are two ways to identify skin-family
a. Using <id> tag: id of a family must be unique. So you can identify a skin family using id.
b. Using <family> and <version> tags: <family> and <version> tags also form unique combination and it can also be used to identify skin-family.
We see there are two ways to identify skin-family. Now catch is when to use what.
Theare two use cases when we want to refer a skin-family
a. When we want to extend it and create new skin family: In this case we should use <id> tag
b. When we want application to pick css styles from a particular skin-family: In this case we need to specify skin-family in trinidad-config.xml, but we should use <family> and <version> tag to uniquely identify a skin-family.
3. trinidad-config.xml: Now you want to use this style. For that you need to have a trinidad-config.xml file in WEB-INF directory. Its by default created in ADF ViewController project.
If you see its default entry now a days pointing to skyros.
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
<skin-family>skyros</skin-family>
<skin-version>v1</skin-version>
</trinidad-config>
If you want to use sanStyle-v1, you can make entry something like
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
<skin-family>sanStyle-v1</skin-family>
<skin-version>v1</skin-version>
</trinidad-config>
4. Oracle provided skins
Before creating any custome skin family we should be knowing that which skin we should extend. And even at times we may want to directly use Oracle provided skin other than skyros-v1. To do that, we need to know which all skin families are provided by Oracle. One way to to read documentation but I believe better is just open oracle libraries.
a. Open 'ADF Faces Runtime 11' library in Jdeveloper
b. Open trinidad-skins.xml file and you will find all skin families provided by Oracle.
Family
|
Version
|
Extends
|
css
|
Usage in Trinidad-config.xml
|
skyros
|
v1
|
simple.desktop
|
adf/styles/skyros-v1-desktop.css
|
<skin-family>skyros</skin-family>
<skin-version>v1</skin-version>
|
fusionFx
|
fusion-11.1.1.3.0.desktop
|
adf/styles/fusionFx-v1-desktop.css
|
<skin-family> fusionFx </skin-family>
|
|
fusionFx
|
v1.1
|
fusionFx-v1.desktop
|
adf/styles/fusionFx-v1.1-desktop.css
|
<skin-family> fusionFx </skin-family>
<skin-version>v1.1</skin-version>
|
fusion-simple
|
fusion-base.desktop
|
adf/styles/fusion-simple-desktop.css
|
<skin-family> fusion-simple
</skin-family>
|
|
fusionFx-simple
|
fusion-simple.desktop
|
adf/styles/fusionFx-simple-v1-desktop.css
|
<skin-family> fusionFx-simple
</skin-family>
|
Similarly there are other entries also.
You can even open css file and see different selectors.
Now you can try out different skin-family in trinidad-config.xml and see which skin is best for your project.
If you want to view a look of each skin-family you need to change trinidad-config.xml entry. Any change in this file will require a re-deployment. To avoid redeploymenet you can put expression in trinidad-config.xml as
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
<skin-family>#{param.skinFamily}</skin-family>
</trinidad-config>
Now in url pass skinFamily=<familyName> and you will see page in that skin-family.
For example
http://<server:port>/<context>/faces/<page.jspx>?skinFamily=fusionFx will render page in fusionFx skin and
http://<server:port>/<context>/faces/<page.jspx>?skinFamily=skyros will render page in skyros skin.
1 comment:
Nice Article, thanks for this information
Also check this out
Laptops, Mobiles, Games, Tv, Smartwatches etc Daily Tech News Updates.
Post a Comment