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.

Similar Messages

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

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.

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

Read Selected Tree Node value. Jdeveloper Jdeveloper 11.1.2.1.0 11.1.2.1.0

Version: Jdeveloper 11.1.2.1.0
how to get programmatically tree node value.
i have tried but cann't read value from selected node.
please help me.
here is my application creation steps:
1. New Application
2. Fusion Web Application (ADF) Template
3. Create View Object VOTreeMst
Query:
     Select Department_Name,Department_Id
     From Departments
4. Create View Object VOTreeChd
Query:
     Select Last_Name,Employee_Id,Department_Id
     From Employees
5. Create View Link VLTreeMstChd
     VOTreeMst.DepartmentId=VOTreeChd.DepartmentId
     And Add to Application Module
6. Create page page1 in ViewController
     New-->Web Tier-->JSF/Facelets-->Page
     Selected Document Type JSP XML
7. Drag VOTreeMst1 From Data Controls into page1
and select Tree-->ADF Tree
8. ADD java Code into selection Listener
public void nodeSelect(SelectionEvent selectionEvent) {
//original selection listener set by ADF
String adfSelectionListener = "#{bindings.VOTreeMst1.treeModel.makeCurrent}";
//make sure the default selection listener functionality is preserved.
//you don't need to do this for multi select trees as the ADF binding
//only supports single current row selection
/* START PRESERVER DEFAULT ADF SELECT BEHAVIOR */
FacesContext fctx = FacesContext.getCurrentInstance();
Application application = fctx.getApplication();
ELContext elCtx = fctx.getELContext();
ExpressionFactory exprFactory = application.getExpressionFactory();
MethodExpression me = null;
me = exprFactory.createMethodExpression(elCtx, adfSelectionListener, Object.class,
new Class[] { SelectionEvent.class });
me.invoke(elCtx, new Object[] { selectionEvent });
/* END PRESERVER DEFAULT ADF SELECT BEHAVIOR */
RichTree tree = (RichTree)selectionEvent.getSource();
TreeModel model = (TreeModel)tree.getValue();
//get selected nodes
RowKeySet rowKeySet = selectionEvent.getAddedSet();
Iterator rksIterator = rowKeySet.iterator();
//for single select configurations, thi sonly is called once
while (rksIterator.hasNext()) {
List key = (List)rksIterator.next();
JUCtrlHierBinding treeBinding = null;
CollectionModel collectionModel = (CollectionModel)tree.getValue();
treeBinding = (JUCtrlHierBinding)collectionModel.getWrappedData();
JUCtrlHierNodeBinding nodeBinding = treeBinding.findNodeByKeyPath(key);
Row rw = nodeBinding.getRow();
//print first row attribute. Note that in a tree you have to determine the node
//type if you want to select node attributes by name and not index
String rowType = rw.getStructureDef().getDefName();
if(rowType.equalsIgnoreCase("VOTreeMst")){
System.out.println("This row is a department: " + rw.getAttribute("DepartmentId"));
else if(rowType.equalsIgnoreCase("VOTreeChd")){
System.out.println("This row is an employee: " + rw.getAttribute("EmployeeId"));
else{
System.out.println("Huh ????");
// ... do more usefuls stuff here
9. when i click on first node it is working but i click on second node it is not working
error message::
<LifecycleImpl> <_handleException> ADF_FACES-60098:Faces lifecycle receives unhandled exceptions in phase INVOKE_APPLICATION 5
javax.el.ELException: java.lang.NullPointerException
     at com.sun.el.parser.AstValue.invoke(Unknown Source)
     at com.sun.el.MethodExpressionImpl.invoke(Unknown Source)
     at org.apache.myfaces.trinidad.component.UIXComponentBase.broadcastToMethodExpression(UIXComponentBase.java:1589)
     at org.apache.myfaces.trinidad.component.UIXTree.broadcast(UIXTree.java:237)
<RegistrationConfigurator> <handleError> ADF_FACES-60096:Server Exception during PPR, #1
javax.el.ELException: java.lang.NullPointerException
I have also tried using following code but same problem
public void onTreeSelect(SelectionEvent selectionEvent) {
//original selection listener set by ADF
String adfSelectionListener = "#{bindings.VOTreeMst1.treeModel.makeCurrent}";
//make sure the default selection listener functionality is preserved.
//you don't need to do this for multi select trees as the ADF binding
//only supports single current row selection
/* START PRESERVER DEFAULT ADF SELECT BEHAVIOR */
FacesContext fctx = FacesContext.getCurrentInstance();
Application application = fctx.getApplication();
ELContext elCtx = fctx.getELContext();
ExpressionFactory exprFactory = application.getExpressionFactory();
MethodExpression me = null;
me = exprFactory.createMethodExpression(elCtx, adfSelectionListener, Object.class,
new Class[] { SelectionEvent.class });
me.invoke(elCtx, new Object[] { selectionEvent });
/* END PRESERVER DEFAULT ADF SELECT BEHAVIOR */
RichTree tree = (RichTree)selectionEvent.getSource();
TreeModel model = (TreeModel)tree.getValue();
//get selected nodes
RowKeySet rowKeySet = selectionEvent.getAddedSet();
Iterator rksIterator = rowKeySet.iterator();
//for single select configurations, thi sonly is called once
while (rksIterator.hasNext()) {
List key = (List)rksIterator.next();
JUCtrlHierBinding treeBinding = null;
treeBinding = (JUCtrlHierBinding)((CollectionModel)tree.getValue()).getWrappedData();
JUCtrlHierNodeBinding nodeBinding = treeBinding.findNodeByKeyPath(key);
Row rw = nodeBinding.getRow();
//print first row attribute. Note that in a tree you have to determine the node
//type if you want to select node attributes by name and not index
System.out.println("row: " + rw.getAttribute(0));
But
If i create .jspx page From
Web Tier->Jsp->page Then it is working fine
when i create .jspx page From
Web Tier->JSF\Facelets->page Then it is not working
i need to get value from "Web Tier->JSF\Facelets->page"
is there any help please?

You should try Franks generic selectionListener http://www.oracle.com/technetwork/developer-tools/adf/learnmore/25-generic-tree-selection-listener-169164.pdf. For help on hoe to get the selected tree node data check http://www.oracle.com/technetwork/developer-tools/adf/learnmore/26-get-selected-tree-node-data-169165.pdf
Timo

Can I useADF Faces 10.1.3.05 skin used in Jdeveloper 10.1.3.4?

Hello,
I am using JDev 10.1.3 and would like to change skin in my adf application.
Help -> Check for updates -> Open Source and Partners -> Additional Skins for ADF Faces _10.1.3.*05*_
I am using JDeveloper 10.1.3.4. IS THIS OK? or is it that I cannot have updates from a newer version if I am using a lower version of JDev?
Thanks,

should be ok.

Is trinidad messages skinning broken in Jdeveloper 11.1.2.4.0 ?

I’m doing localization of ADF components and messages by skinning method with custom java resource bundle. For component keys (resource strings) part, localization is performing as expected.
The same file contains also localized org.apache.myfaces.trinidad. keys, but default English language trinidad messages are being displayed instead of localized, while keys related to the ADF components are displayed as correctly localized at the same time.
There was similar issue reported recently:
https://forums.oracle.com/message/11186222#11186222
Clearing browser cache, java cache, weblogic server cache doesn’t help. I’m testing this with af:inpuDate and the following keys:
{"org.apache.myfaces.trinidad.UIXEditableValue.REQUIRED", "A value is required."},
{"org.apache.myfaces.trinidad.UIXEditableValue.REQUIRED_detail", "You must enter a value."}, {"org.apache.myfaces.trinidad.UIXSelectMany.REQUIRED", "A selection is required."},
{"org.apache.myfaces.trinidad.UIXSelectMany.REQUIRED_detail", "You must make at least one selection."},
{"org.apache.myfaces.trinidad.UIXSelectOne.REQUIRED", "A selection is required."},
{"org.apache.myfaces.trinidad.validator.DateRestrictionValidator.WEEKDAY_HINT", "Enter a date that falls on one of the following days: {0}"},
{"org.apache.myfaces.trinidad.convert.DateTimeConverter.DATE_HINT", "Example: {0}"},
{"org.apache.myfaces.trinidad.convert.DateTimeConverter.TIME_HINT", "Example: {0}"},
{"org.apache.myfaces.trinidad.convert.DateTimeConverter.BOTH_HINT", "Example format: {0}"}
Are there any different steps required for tirinidad messages localization in comparison to localization of ADF resource strings?
Regards,
Boris

Hi,
these
af_inputDate.TIP_TITLE_SELECT_DATE
af_inputDate.TIP_TITLE_SELECT_DATE_AND_TIME
af_inputDate.TIP_CLICK_TO_LAUNCH_POPUP_SELECTOR
are definitively ADF Faces strings that should be filed against ADF if they don't work. My answer referred to strings like
{"org.apache.myfaces.trinidad.UIXEditableValue.REQUIRED", "A value is required."},
{"org.apache.myfaces.trinidad.UIXEditableValue.REQUIRED_detail", "You must enter a value."}, {"org.apache.myfaces.trinidad.UIXSelectMany.REQUIRED", "A selection is required."},
{"org.apache.myfaces.trinidad.UIXSelectMany.REQUIRED_detail", "You must make at least one selection."},
{"org.apache.myfaces.trinidad.UIXSelectOne.REQUIRED", "A selection is required."},
{"org.apache.myfaces.trinidad.validator.DateRestrictionValidator.WEEKDAY_HINT", "Enter a date that falls on one of the following days: {0}"},
{"org.apache.myfaces.trinidad.convert.DateTimeConverter.DATE_HINT", "Example: {0}"},
{"org.apache.myfaces.trinidad.convert.DateTimeConverter.TIME_HINT", "Example: {0}"},
{"org.apache.myfaces.trinidad.convert.DateTimeConverter.BOTH_HINT", "Example format: {0}"}
you had in your post, which are Trinidad strings
Frank

Tree skinning

Hi,
I created Tree component with XML data provider.
I want the open brunch and leafs have a different back-color
(some dark blue for the brunch and some pale blue for the leafs).
the Tree-class properties includ only select/non-select
styling.
I need a hint.
Thanks all

Here is a sample code
package
import mx.controls.treeClasses.TreeItemRenderer;
import mx.controls.treeClasses.TreeListData;
import flash.display.SpreadMethod;
import flash.display.Sprite;
import flash.display.Graphics;
public class CustomItemRenderer extends TreeItemRenderer
var background:Sprite;
override protected function createChildren():void
super.createChildren();
background = new Sprite;
addChildAt(background, 0);
override protected function updateDisplayList
(unscaledWidth:Number,
unscaledHeight:Number):void
super.updateDisplayList(unscaledWidth, unscaledHeight);
var gc:Graphics = background.graphics;
gc.clear();
if (TreeListData(listData).hasChildren)
gc.beginFill(0x0000FF, 0.5);
else
gc.beginFill(0x000088, 0.5);
gc.drawRect(0,0, unscaledWidth, unscaledHeight);
gc.endFill();
}

"walking" through a tree in javascript. JDeveloper 11g tp3

Is there a way (or some sample code) for walking down a tree and seeing which rows are disclosed (or expanded); in general getting the TreeState() on the client side using javascript?
Thanks Larry
Message was edited by:
glmason

Thanks Frank
Yes, I've read every bit of documentation that you have on the JavaScript API... there is a flaw with you short answer... The default selection mode is none and in our case the row selection is kept unenabled, we use a check box on the node instead for displaying choice, so where one could get a set of row keys from the selection listener... and the disclosure listener... there seems no way get a "complete" set of row keys from the tree. So if the program does not "know" the number of rows there is no way to check each row to see if it is an expanded path or not. And even if one could find the number of rows (which can be done in the RichTree java class), according to the documentation one can not just assume that RowKeys are going to be 0,1,etc... rather "explicit" row keys are needed because the system creates row keys by some magic.
Hence my question is there some way to get the tree state from the RichTree javascript object?
I would "love" it if you told me I was full of it and that if I wanted to know the state of a tree all I'd have to do is...
Larry

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

Why af|tree can't display icon

Hi,
I am working on Adf(with version :10_1_3_0_4) Tree Component using Page-definitions.
I am able to create the Tree structure but the issue are..
The tree have any icon ,just a blue triangle,can’t display folds icon as adf demo shows .
why?
Edited by: user6793310 on 2008-9-22 上午12:16

Hi,
tree icons are set with skinning
http://www.oracle.com/technology/products/adf/adffaces/11/doc/skin-selectors.html (JDeveloper 11 documentation)
af|treeTable::expanded-icon-style
Style of the expanded icon used with the tree and treeTable components. The expanded icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the expanded-icon-style and define the override icon for the expanceded-icon.
af|treeTable::expanded-icon
Style used to override the default expanded icon used with the tree and treeTable components.
af|treeTable::collapsed-icon-style
Style of the collapsed icon used with the tree and treeTable components. The collapsed icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the collapsed-icon-style and define the override icon for the collapsed-icon.
af|treeTable::collapsed-icon
Style used to override the default collapsed icon used with the tree and treeTable components.
af|treeTable::leaf-icon-style
Style of the leaf icon used with the tree and treeTable components. The leaf icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the leaf-icon-style and define the override icon for the leaf-icon.
af|treeTable::leaf-icon
Style used to override the default leaf icon used with the tree and treeTable components.
af|treeTable::selector-icon-style
Style of the selector icon used with the tree and treeTable components. The selector icon is specified as a background-image in this key. To override the default icon, set -tr-inhibit: background-image in the selector-icon-style and define the override icon for the selector-icon.
af|treeTable::selector-icon
Style used to override the default selector icon used with the tree and treeTable components.
Frank

Customizing the Tree Component inn ADF Faces..

HI,
I am using the ADF Faces Tree Component and was wondering wheteher we
can use a specific theme instead of the default one..
The scenario's i am looking at are
1) Changing the Style of the Selected Node
2) Programatically can i assign a different styling for a Specific
Node (Previously Selected) in the Tree ??
3) And any info reg Enabling the Drag and Drop functionality ?? As of
now i don't think it is supported. Are there any plans of it being
supported in the furture releases??
Thanks
Sateesh

Hi,
1) See tree skin selectors: http://www.oracle.com/technology/products/jdev/htdocs/partners/addins/exchange/jsf/doc/skin-selectors.html
2) You can reference a managed bean for providing the inline style sheet on a component. This however only works when the tree is re-drawn and not dynamically
3) Drag and drop doesn't work in 10.1.3.x. In 11 this may work - havent tested yet - using a client listener component
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

Stand Alone Skin Editor

Here is the scenario. I am strictly a front-end developer using HTML, CSS, Javascript etc. I have been brought onboard to work on a project that uses the Oracle Fusion Middleware ADF Framework. I am a total noob with this stuff!!
We are currently working a project using jDevleoper 11.1.1.4 (We cannot use a different/updated version - we are currently stuck with this version, and no I do not know why)
I am going to be responsible for ALL of the front-end look and feel. I thought, ok no biggie, I just work my CSS magic and that will create everything as needed... Boy was I absolutely wrong! So I checked the ADF Skin Editor (have to use the stand alone version due to project being worked on within 11.1.1.4). I am having an extremely hard time find tutorials just using the standalone version! Every tutorial or demo is using the integrated Skin Editor within jDeveloper 11.1.2.
Does anyone know of any good beginner tutorials for using the standalone Skin Editor? I am really struggling with this since I don't even know if I can actually use the editor to create the .css and then how to get into the jDeveloper 11.1.1.4 project!?
Again, I am totally new to this and back-end environment. What may seem like basic ideas/thoughts/language to you, is actually like me trying to read a foreign language that I have no understanding of. So think of me like ultimate dummy here! :)
I appreciate any feedback, suggestions on tutorials/demos/books and thoughts that anyone can provide for me to learn this.
Thank you and have a great day!
Michael

Hi,
just few inputs from me, just hoping it would be helpful, the easiest thing you can do are :
1) download jdev 11.1.2 version, there you can select new skin file, drag and drop component and play around, and then go to source, you will see code you made in design. see http://docs.oracle.com/cd/E16162_01/user.1112/e17456/adfsg_selectors.htm for more details.
2) use http://jdevadf.oracle.com/adf-richclient-demo/faces/components/skinningKeys/menu.jspx , and play around and and click print content to see the generated code.
You can copy generated code and use in your jdev 11.1.1.4 version or wtever version :)
The main idea here is, you have to know the skin selector for each component.
for example for af:menu component you css selector would be
af|menu {
and again, for menu bar item selector is :
af|menu::bar-item{
for hover :
af|menu::bar-item:highlighted{
background-color: #959595 !important;
Just to give me head up,
for af:commandButton => af|commandButton{ }
for af:breadcrumb => af|breadcrumb{}
and so forth
and each of these has psedo selector such as :selected , :highlighted ::menu-item-text but each component will have different different psedo selector ...
eg :
af|commandMenuItem::bar-item:depressed
af|commandMenuItem::bar-item:highlighted
af|commandMenuItem:highlighted::menu-item-open-indicator
af|menuBar::overflow-indicator
af|breadCrumbs::step:selected
af|breadCrumbs::step
go through this link for all different selector and psedo selectors
http://docs.oracle.com/cd/B25221_05/web.1013/e18745/skin-selectors.html
Raj

Af:tree skin selectors in JDeveloper 10.1.3.3

Similar Messages

Maybe you are looking for