Skins selectors

Hi
why there is no equivalent skin selectors for tableLayout,rowLayout,commandButton
and few others components
why they are making some features opaque
we are in the process of converting JSP pages to JSF JSP using ADF faces
but we can able to do as it is
for example, in my old jsp i have used tables inside that i have placed some components but when i try to migrate it i cann't able to find equivalent component in ADF
and also while i am going to make skins there to i am getting into problems
Using skin i cann't able distinguish one component from another component
what's the solution to this

Hi,
Skins for command button
Button Selectors
We do not support component-level selectors for buttons. For example, you cannot customize a goButton differently from a commandButton. You can customize buttons in general, and following is the description in how to do that.
Skinning supports two very different button implementations. By default, standard browser buttons are used. However, the skinn ing also supports dynamic generation of image-based buttons. In order to enable image-based buttons, the following four button icon must be specified:
* .AFButtonStartIcon:alias
* .AFButtonEndIcon:alias
* .AFButtonTopBackgroundIcon:alias
* .AFButtonBottomBackgroundIcon:alias
When these four icons are specified, ADF Faces combines the images specified by these icons into a single button image. (Note: These icons must be specified using either context-image or resource-image icons. Text-based icons are not allowed.)
http://www.oracle.com/technology/products/jdev/htdocs/partners/addins/exchange/jsf/doc/skin-selectors.html
in my old jsp i have used tables inside that i have placed some components but when i try to migrate it i cann't able to find equivalent component in ADF
JavaServer Faces uses containers (panels) to define the layout, no longer HTML tables (which is the JSP way of doing this). Its not a limitation of ADF Faces, its the way JSf is spec'ed
i am going to make skins there to i am getting into problems
Maybe you want to share these problems in a separate thread
Frank

Similar Messages

ADF Skinning - How to identify Skinning Selector Name

When we do skinning, in the CSS file that is generated by ADF Framework, we are seeing a style named
af_commandMenuItem_menu-itemIn order to define, custom properties to this above style, we would need to modify in the custom skinning file as
af|commandMenuItem::menu-item {
background-color: #17375E;
}I would like to know, how the skinning selector in CSS file generated by ADF Framework - can be converted into the actual style name that is to be specified in the Custom Skin CSS file.
In above, how can we get
af|commandMenuItem::menu-itemfrom
af_commandMenuItem_menu-itemIs there any general guideline for this?
Thanks in advance,
Navaneeth

:: is a pseudo class and defines an area within a component e.g. af|inputText::content
: is a pseudo element and describes a behavior. e.g. af|inputText:hover (this is the default CSS syntax)
Frank

Af:tree skin selectors in JDeveloper 10.1.3.3

Hi,
i've read that in JDeveloper release 10.1.3.3 the af:tree component can now be skinned. Does anyone know of any documentation or examples in relation to this? The af:treeTable component is documented in http://www.oracle.com/technology/products/jdev/htdocs/partners/addins/exchange/jsf/doc/skin-selectors.html and i've attempted to use these skin selectors for the af:tree component. However the only ones that seem to have any effect are af|tree::expanded-icon and af|tree::collapsed-icon. Are these the only skin selectors available for the af:tree component? Or are there others?
Thanks,
Michael.

Hi Frank,
i was going by what was said in Re: ADF &CSS :overriding the default ADF:tree icons and CSSs (In the fix list it is listed as bug number 5682799). After re-reading this, i guess it just mentions the tree icons. So does this mean the only part of the af:tree component we can customize is the af|tree::expanded-icon and af|tree::collapsed-icon?
Thanks,
Michael.

What are the default skin selectors applied for af:commandButton,

Hi Experts,
Please let me know where i can get the default skin applying for ADF Faces Core Components like af:commandButton, af:selectOneChoice, af:outputText etc..
Please let me know where i can get detailed skin selectors for ADF Faces Core Components in 10g, As per this link, [http://www.oracle.com/technology/products/jdev/htdocs/partners/addins/exchange/jsf/doc/skin-selectors.html#Component-level Selectors] only some of the components has selectors, but for others there are no specific selectors..
Regards,
R N V Prasad.

Hi Folks
Can anyone reply or suggest some ideas on how to get or modify the skins of core components like af:commandButton, af:outputText, af:selectOneChoice etc...
regards,
R N V Prasad.

Which Skin Selector Controls SelectOneChoice Highlight?

This is for JDeveloper 11.1.1.6
I have tried to identify in the Skin Editor (stand alone) but have not found the correct selector that would modify the highlighted text of a selectOneChoice drop down.
The current default is a medium blue color for each item that the cursor hovers over.
I have been extending the fusionFx-simple-v1.2.desktop skin.
What controls this?

Hi,
there is no skin selector for this. If you debug the skin then you see that the select one choice component has a selector, but the select items are added as <option>. So if you wanted to skin the item then probably a combination of
skin-selector option:focus { ... }
would work. However, I did not test this markup oriented addressing and also assume this to be error prone.
Frank

Adf skin selectors

Hi.. I am writing a css wherein i wish to style the adf faces components in my application. I am developing WebCenter 11g application. But while writing the css I am unable to get any option for defining styles for these components, like v have for html components. Is there anything special v need to include in order to do the same???? Plz help... Thanks in advance :)
Edited by: ab1986 on Apr 7, 2010 3:30 AM

Check / search the dos for 'skin' or 'skinning'. Chapter 20 of the 'Web User Interface Developer's Guide for Oracle ADF' give some input.
ADF uses skins to change their appearance.
Timo

How do I apply programmatic skins for completely custom drawn components of a Flex library project?

Hello folks,
I am looking for best practices advice when (1) creating
custom components and (2) styling and skinning.
I already know how to skin a component part of the Flex
framework. I can make a class extending ProgrammaticSkin and have
my component skinned using CSS to link the component with the
reference to my custom class.
However what about those cases when you are completely
creating a component from scratch?
Imagine a "Freehand Drawing Canvas" component that allows the
user to draw on it and has some buttons to set color styles, line
styles, etc., or imagine a "Screen Flow Gallery" component that
displays visual objects in a fashion similar to Cover Flow in the
Mac.
In many components I am aware you may reuse other components
part of the Flex framework but I am trying to picture an scenario
where you would need to draw everything yourself because there just
isn't something to base it upon so you will end up drawing it from
scratch.
To learn how instead of building one of those components I
mentioned previously I decided to start with something simple that
would illustrate this like a LiteButton component that will behave
just like the Flex mx.controls.Button but will extend UIComponent
and be completely custom drawn.
The component will have a default look and will also be
style-able and skin-able. I will provide styles for users of the
component to modify and regarding skinning anyone can create a
custom ProgrammaticSkin adding its own drawing logic and link it to
the component via CSS with the ClassReference applied to the skin
selector.
So far so good and it's clear what I want to achieve. I
actually know how to do most of the stuff here but I have one
single problem.
Here is my question, where should I put my custom drawing
logic? If I do it in the updateDisplayList inside the class
extending UIComponent it works, however I thought that it would be
a better practice to do it using programmatic skins, that way I
could provide different skin themes for my component set.
The problem is that I can't make the programmatic work in
this scenario. I tried instantiating the custom programmatic skin
during the updateDisplayList of the LiteButton component and adding
it to my display object via addChild but that didn't do anything. I
also tried creating a "default.css" stylesheet and tried to use
ClassReference as I would normally do to skin an already existing
component (or composite component as well) but that didn't do
anything either.
So how do I apply programmatic skins for completely custom
drawn components of my Flex library project?
I could do it inside the updateDisplayList of the LiteButton
class extending UIComponent but again I would like to provide
different theme sets for my components so it makes sense using
programmatic skins.

"jbucaran" <[email protected]> wrote in
message
news:[email protected]...
> Hello folks,
>
> I am looking for best practices advice when (1) creating
custom components
> and
> (2) styling and skinning.
>
> I already know how to skin a component part of the Flex
framework. I can
> make
> a class extending ProgrammaticSkin and have my component
skinned using CSS
> to
> link the component with the reference to my custom
class.
>
> However what about those cases when you are completely
creating a
> component
> from scratch?
>
> Imagine a "Freehand Drawing Canvas" component that
allows the user to draw
> on
> it and has some buttons to set color styles, line
styles, etc., or imagine
> a
> "Screen Flow Gallery" component that displays visual
objects in a fashion
> similar to Cover Flow in the Mac.
>
> In many components I am aware you may reuse other
components part of the
> Flex
> framework but I am trying to picture an scenario where
you would need to
> draw
> everything yourself because there just isn't something
to base it upon so
> you
> will end up drawing it from scratch.
This may help with that
http://livedocs.adobe.com/flex/3/html/help.html?content=skinstyle_3.html
> To learn how instead of building one of those components
I mentioned
> previously I decided to start with something simple that
would illustrate
> this
> like a LiteButton component that will behave just like
the Flex
> mx.controls.Button but will extend UIComponent and be
completely custom
> drawn.
>
> The component will have a default look and will also be
style-able and
> skin-able. I will provide styles for users of the
component to modify and
> regarding skinning anyone can create a custom
ProgrammaticSkin adding its
> own
> drawing logic and link it to the component via CSS with
the ClassReference
> applied to the skin selector.
>
> So far so good and it's clear what I want to achieve.
Actually after
> playing
> with the weekend and today I know how to do most of the
stuff but I have
> one
> single problem. So here is my question, where should I
provide my custom
> drawing logic? If I do it in the updateDisplayList
inside the class
> extending
> UIComponent it works, however I thought that it would be
a better practice
> to
> do it using programmatic skins, that way I could provide
different skin
> themes
> for my component set.
These aren't mutually exclusive. When you provide a skin with
a
TypeSelector, you have to add it to the display list
somewhere, and this is
typically done in updateDisplayList or addChildren. I prefer
to do it in
updateDisplayList, because you can then change it if the
style changes.
> The problem is that I can't make the programmatic work
in this scenario. I
> tried instantiating the custom programmatic skin during
the
> updateDisplayList
> of the LiteButton component and adding it to my display
object via
> addChild but
> that didn't do anything.
Exactly what did you do?
> I also tried creating a "default.css" stylesheet and
> tried to use ClassReference as I would normally do to
skin an already
> existing
> component (or composite component as well) but that
didn't do anything
> either.
I've never had any problem using an approach similar to
this...but I will
say that I couldn't see any advantage in creating a
default.css style sheet,
since it's not really default in the way that the one that
comes with Flex
is. It's much more obvious to anyone using your component
what's going on
there if you create a style sheet where they're likely to
spot it.
> So how do I apply programmatic skins with the default
look for custom
> drawn
> components?
It seems like your approach is fine, but maybe you've made a
mistake in your
implementation.
> I could do it inside the updateDisplayList of the
LiteButton class
> extending
> UIComponent but again I would like to provide different
theme sets for my
> components so it makes sense using programmatic skins.
You might want to consider also adding an instance of
HaloBorder to your
component. That brings a lot of functionality with it.
HTH;
Amy

Skin or change color of selected radio button or selected checkbox

I'm creating a custom CSS and I want to change the color of the checkmark (or the icon used) for selected radio buttons/checkboxes. Right now it's green (because it's using the simple stylesheet) but I don't know what element I can use to change the color or skin it. I've tried the af:selectBooleanCheckbox and af:selectBooleanRadio (even though they say they are only for disabled and read-only) but they don't appear to do anything... what do I use?

Have a look at
http://www.oracle.com/technology/products/jdev/htdocs/partners/addins/exchange/jsf/doc/skin-selectors.html
Searh e.g for
af:selectBooleanCheckbox Component
to learn how to work with custom images
Frank

Af|treetable skinning issue

I have a treetable that I use for page navigation and I would like to change the expand/collapse icons.
My skin looks like this
af|treeTable.navTree::expanded-icon {content: url('/images/hsd.gif');}
af|treeTable.navTree::collapsed-icon-style {-tr-inhibit: background-image;padding-right: 0px;}
af|treeTable.navTree::expanded-icon-style {-tr-inhibit: background-image;padding-right: 0px;}
af|treeTable.navTree::collapsed-icon {content: url('/images/hsu.gif');}
The default icons are inhibited but the new ones do not show up :(
If I try the same as
af|treeTable::expanded-icon {content: url('/images/hsd.gif');}
af|treeTable::collapsed-icon-style {-tr-inhibit: background-image;padding-right: 0px;}
af|treeTable::expanded-icon-style {-tr-inhibit: background-image;padding-right: 0px;}
af|treeTable::collapsed-icon {content: url('/images/hsu.gif');}
All treetables have the new icons but I want to replace it for only the navigation tree.
What am I doing wrong? Any help is appreciated.
Regards,
Suneetha

Hi,
did you verify with Firebug or similar that
af|treeTable.navTree is a valid address ? Note that its not always that the style class is directly added to the skin selector.
Frank

ADF Faces 11g Skins

Hi!
How should we create ADF Faces 11g Skins ?
does the mentioning the skin family used in trinidad-config.xml file reflect for the ADF Rich Faces as well?
What about the new RC Components ;They do not have any similar components in Trinidad,I suppose.
so where can we get the complete information of all CSS Classes that are to be used with new ADF Rich Faces Componenents?
Can you point me to source where I can get the information about all CSS Classes for RC Components , and how to change Skins in 11g for RC Components and Trinidad Components , for I use a mixture of Both,some times.
Thanking you in advance,
Samba

Sassira,
Here is an article to get you started:
http://jdj.sys-con.com/read/273945.htm
This link oulines all of the skinning key:
http://www.oracle.com/technology/products/adf/adffaces/11/doc/skin-selectors.html
And here is a thread that outlines how to get started:
Could not get resource key af_componentX.XXX from skin
Hope that helps.
--RiC

ADF Skin commandButton background color

HI I use Jdev 11.1.2.3.0 I want to change the color of a commandButton I used:
af|commandButton {color: orange;
background-image: none;
background-color:green;
in (http://jdevadf.oracle.com/adf-richclient-demo/faces/components/skinningKeys/commandButton.jspx)
and followed this tutorial (https://blogs.oracle.com/shay/entry/styling_specific_adf_components_with)
as shown in this picture (http://img820.imageshack.us/img820/7456/avc8.png)
the icon button gets colored but not the actual commandButton obviously is not shown when I run it.
My skin code:
af|commandButton
background-image: none;
background-color: Fuchsia;

A: ADF Skin commandButton background color

Yeah, that skin selector will apply to all buttons with those classes. If you need to limit the styling based on EL, I would do something like this
styleClass="#{condition ? 'trueClass' : 'falseClass'}"
and in the skin this should be specific enough
af|commandButton.trueClass {}
If not, you would have to do something like this, but not 100% sure if that dot shouldn't have a space before it or be a colon possibly off the top of my head
af|commandButton:text-only.trueClass

How to override oracle skin in jdev 10

Hi people.
I need to use oracle skin but I´d like to change some components...
is that possible in Jdev 10?
Thanks....

Hi,
Yes you can in pretty much the same way as with 11g except that some important features won't work, the most notable one being -tr-inhibit. See
Selectors:
http://www.oracle.com/technology/products/jdev/htdocs/partners/addins/exchange/jsf/doc/skin-selectors.html
How to:
http://www.oracle.com/technology/products/jdev/101/howtos/adfskins/index.html
Regards,
~ Simon

Skinning of parameter "empty text " in table.

hi everyone,
How to do styling of empty text of default text in table .(It comes when there is no data in the table)
such as "No data to display" ,I want to change its font ,font size etc.
Please help.

try some thing like this.
<af:inputtext value = "#{pageflowScope.it1.inputvalue == null ? 'no data to display' : 'some thing as your needed' } " >
</af:inputext>
<af:table emptyText="#{bindings.ApplicationsView1.viewable ? 'No data to display.' : 'Access Denied.'}" >
</af:table>
by default adf provides u can use the style class.
http://jdevadf.oracle.com/adf-richclient-demo/docs/skin-selectors.html
Edited by: Erp on Oct 3, 2011 4:09 AM

Unable to use two af:tables with differing coloring (skins)?

Im trying to configure the Siebel Self-Services application and customize the skinning. I have some problems though, because i need to show two af:tables on the same page, but with different coloring. One with black background and white text (both header and body) and one with white background and black text. I have tried to use styleClass:es, but the css parameters set for the af table are overriding the ones set in the stylesheets.
Anyone having an idea how to overcome this?
Thanks
/Jon-Erik

Hi,
if the styleClass name is table1 then the skin selector would be something like
.table1 af|table
or .afTable.af|table
I don't see how this can be overriden. If you assumption is that the style class reference must be to a CSS definition on the page then this indeed does not work. The styleClass name is kind of a named identifier for the component to skin and is used to further qualify the component to skin
Frank

Query panel style selectors

Hi,
I am using a custom skin for my ADF application,but for query panel I couldn't change the color of Saved Search label and Match label (in query panel match label is before all and any radio buttons )I have changed other query panel styles in my css file but I don't know what style selectors I must use for changing the color of those labels?
Thanks in advance.
Edited by: user632361 on Sep 13, 2009 4:49 AM

Hi,
set the following parameter in web.xml and use firebug in firefox to determine the skin selector configured for this label (its what gets written out as the styleClass attribute value).
<context-param>
<param-name>
org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION
</param-name>
<param-value>true</param-value>
</context-param>
Frank

Skins selectors

Similar Messages

Maybe you are looking for