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();
}

Similar Messages

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

  • 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

  • Skin Text of ADF Tree Node and Leaf separately

    Hi,
    Is it possible to skin a tree (ADF 11g), so that the text of a node is white on black, and text of a leaf is black on white?
    I know I can change the icons for a node and a leaf separately , but can't find how to change the styles of the text seperately.
    Groeten,
    HJH

    Hi,
    1. Thanks.. i did understand...I am creating a tree with region-countries-location... so when i drag and drop the region view as a tree ... I get a default code like this
    <af:tree value="#{bindings.RegionsView1.treeModel}" var="node"
    selectionListener="#{bindings.RegionsView1.treeModel.makeCurrent}"
    rowSelection="single" id="t1">
    <f:facet name="nodeStamp">
    <af:outputText value="#{node}" id="ot1" />
    </f:facet>
    </af:tree>
    In this i have used output text ... so how do i use the styleclass.... I am a new bie so can u also tel me how to use implement the same and alsohow to create a styleclass..........
    2. I have to display a seperate icons for parent node and leaf nodes.. can u tel me how to achieve this also...
    Can u provide me ur sample and also docs so that it would be helpful...
    Id: [email protected]
    Thx.. waiting for your reply

  • Skinning UIX tree component

    Are there any possibilities to skin tree component somehow?

    Changing the avatar size doesn't seem to have any affect. Do
    you know what the Avatar is for? It appears to be a bounding box of
    some sort, but resizing it doesn't seem to change anything.
    Actually, I notice that if I open the avatar, it says it is
    22x80, although the scaled version in the Slider is 3x80. It seems
    to be some sort of shared component. If I resize the contents of
    the avatar, all my buttons change, but the sliders don't actually
    change. Sadly, it seems like "3" is a hard coded value somewhere in
    the source. Blah.

  • Flex 4 skin  how to set tree control corner radius..?

    hi .,
         i have using flex4 mx tree control to reduce the corner radius.
    application using tree control code...
    <mx:Tree   contentBackgroundColor="#FFFFFF"  id="folderTree" labelField="documentFolderName" dataProvider="{folderTreeArray}" itemClick="clcikchanged(event)" height="650" borderColor="#FFFFFF">        </mx:Tree>
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
        @namespace mx1 "library://ns.adobe.com/flex/mx";
         mx|Tree
        border-skin: ClassReference('com.istmanagement.skins.Application.boaderskin');
        </fx:Style>
    borderskin.mxml coding here...
    <?xml version="1.0" encoding="utf-8"?>
    <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">
        <fx:Metadata>
    [HostComponent("spark.components.BorderContainer")]
    </fx:Metadata>
        <s:states>
            <s:State name="normal" />
            <s:State name="disabled" />
        </s:states>
          <s:Rect id="background"  left="0" right="0" top="0" bottom="0" >
            <s:fill>
                <s:SolidColor id="bgFill" color="#FFFFFF"/>
            </s:fill>
        </s:Rect>
       <s:BorderContainer cornerRadius="8" width="255" height="650">
        </s:BorderContainer>
        <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">
            <s:layout>
                <s:BasicLayout/>
            </s:layout>
        </s:Group>
    </s:Skin>
    tree control corner radius is reduced to display., after i have using  <mx:HDividedBox > to drag this to override a tree control...
    how to solve this problem.,
    With Regards.,
    LinFlex-

    Did you every solve this issue?

  • Problem with skin in a server

    I've created a skin for my project.. It works fine in embedded OC4J server. But when I deployed it on JBOSS server, my buttons' icons don't show... by the way and tree components' icons are hidden,.. instead oracle provides the default ones instead.. Where could be the problem?

    Hi,
    since all of your images don' show it seems either to be a general issue with images or a problem within your access path to the images. Lets continue this on your thread about buttons, which I asked a developer to have a look at.
    JBoss and buttons problem
    Frank

  • How to change the node's icon in a tree when the node collapse or expand?

    how to change the node's icon in a tree when the node collapse or expand?

    Hi,
    You may need to use custom skin for that.
    -Arun

  • Tree Table icons not getting cleared even after applying the CSS

    Hi,
    I need to change the tree table expanded and collapsed and the lead node icon.
    Leaf node icon is getting changed properly but the remaining two are appled improperly.
    In the background the old default image is getting redered and on top of that the newly given image is shown.
    These are .css statemets used for changing the icons.
    af|treeTable::expanded-icon{content:url(/org/calwin/ui/superweb/image/yellowBlueMarker-minus_trans.gif);
    background: none ;}
    af|treeTable::collapsed-icon{content:url(/org/calwin/ui/superweb/image/yellowBlueMarker_trans_plus.gif);
    background: none}
    af|treeTable::leaf-icon{content:url(/org/calwin/ui/superweb/image/blueCircleMarker_trans.gif);
                                 background: none}
    Can someone suggest a solution for this.
    Thanks,
    Praveen.

    Hi Frank,
    I tried including -tr-inhibit:all;
    but it didn't work.
    Here's my skin registration tag in trinidaad-skins.xml
    <skin>
    <id>customSkin.desktop</id>
    <family>CustomSkin</family>
    <extends>fusion.desktop</extends>
    <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
    <style-sheet-name>org/calwin/ui/superweb/skin/css/customFusion.css</style-sheet-name>
    </skin>
    Can there be any other reason for not being applied properly.
    The images mentioned in the css are properly rendered but in the background
    default images are still coming.
    Please suggest..

  • Trying to override the default af:tree expanded and collapsed icons

    Hi,
    I initially hijacked a thread from 2010 that was vaguely similar to what I need to ask, but a kind forum moderator split my post out to stand on its own merits.
    I am trying to override the default af:tree expanded and collapsed icons I am using the following styles for my af:tree but they are not reflecting any thing on my tree with the styleclass orgType.
    af|tree.orgType::expanded-icon {
    content: url("../images/ac-expand.png");
    cursor: default;
    af|tree.orgType::collapsed-icon {
    content: url("../images/ac-collapsed.png");
    cursor: default;
    af|tree::expanded-icon {
    content: url("../images/folder_open.png");
    cursor: default;
    af|tree::collapsed-icon {
    content: url("../images/folder_close.png");
    cursor: default;
    After working for long hours I realized that there is some problem with af:tree and treeTable. They are not taking the styles where as for the other components, every thing works fine. Is there any way to achieve the task. Could you suggest any alternative way to do this. Thanks in advance. Your suggestions for this task can really help me and my team a lot.
    Regards,
    Krishna Sumanth.

    Hi,
    do the icons show without the style class reference used in the skin file? If so, then the style class for this component might be rendered differently for the tree, e.g.
    .orgType af|tree ...
    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

  • Tree Component as swf

    I have a swf file that is a Tree Component... (So when it
    diplays it looks like a Directory structure with folders and files)
    Some nodes access url links... And some access .doc files on
    the network... This works fine when I run it from my local site,
    but when I run it on the remote site (Intranet server) the nodes
    that reference file paths so nothing, instead of opening the file,
    the url type links do work fine on the remote site.
    Any thoughts on why this might be occurring ? I am putting
    the swf and the associated xml file and html page on the remote
    site... Am I missing a file or setting on the server that I have
    locally? I am also including my .as file and xml file for review.
    Any help would be greatly appeciated.
    xml code:
    <node>
    <node label="Training Information" data="">
    <node label="HP Learning Center" url="
    http://h30187.www3.hp.com"
    />
    <node label="HP Class Schedule" url="
    http://h30187.www3.hp.com/all_courses.jsp"/>
    <node label="Excel Charting Tips" data="IT Web
    Docs/Advanced Tips and Tricks for Excel Charting.wmv" />
    <node label="Email Contacts" data="file:///P|/IT
    information/Tips/Contacts - Keeping track.doc" />
    <node label="Assigning Tasks in Outlook" data="IT Web
    Docs/Assigning and tracking tasks in Outlook.doc" />
    </node>
    <node label="Technical Documentation" data="">
    <node label="myMCC Info Guide" data="IT Web
    Docs/MyMccIntro.pdf" />
    <node label="MCC Webex Guide" data="IT Web
    Docs/MCCWebex.pdf" />
    <node label="Scudder Access Guide " data="IT Web
    Docs/AccessDWS-Scudder.pdf" />
    <node label="VPN Install Guide" data="IT Web
    Docs/MCCCitrixAccessGatewayVPN-Install.pdf" />
    <node label="VPN User Guide" data="IT Web
    Docs/MCCCitrixAccessGatewayVPN-Use.pdf" />
    <node label="Samsung i830 Guide" data="IT Web
    Docs/Samsung_i830_User_Guide.pdf" />
    <node label="Treo 700w Guide" data="IT Web
    Docs/treo_700w_user_manual.pdf" />
    </node>
    </node>
    Action Script code:
    import mx.controls.Tree;
    class TreeNavMenu extends MovieClip {
    var menuXML:XML;
    var menuTree:Tree;
    function TreeNavMenu() {
    // Set up the appearance of the tree and event handlers.
    menuTree.setStyle("fontFamily", "_sans");
    //menuTree.setStyle("fontSize", 6);
    menuTree.fontSize = 14;
    menuTree.setSize(250, 300);
    menuTree.move(0,0);
    // Load the menu XML.
    var treeNavMenu = this;
    menuXML = new XML();
    menuXML.ignoreWhite = true;
    menuXML.load("TreeNavMenu.xml");
    menuXML.onLoad = function() {
    treeNavMenu.onMenuLoaded();
    function change(event:Object) {
    if (menuTree == event.target) {
    var node = menuTree.selectedItem;
    // If this is a branch, expand/collapse it.
    if (menuTree.getIsBranch(node)) {
    menuTree.setIsOpen(node, !menuTree.getIsOpen(node), true);
    // If this is a hyperlink, jump to it.
    var url = node.attributes.url;
    var file = node.attributes.data;
    if (url) {
    getURL(url, "_blank");
    else {
    getURL(file, "_blank");
    // Clear any selection.
    menuTree.selectedNode = null;
    function onMenuLoaded() {
    menuTree.dataProvider = menuXML.firstChild;
    menuTree.addEventListener("change", this);
    This does work fine locally... But the file paths node do not
    work when I publish to the Intranet server.
    Thanks-Dave

    It is quite a pain in the rear to skin the AS2 components.
    And I don't know of many 3rd party components for AS2. I know of
    plenty AS3 3rd party components, but if you were using AS3
    components you wouldn't need a Tree to replicate the adobe video
    workshop type navigation, all you would need is the built in List
    component. If you can go sans icons, I would suggest using the AS2
    List to get the feel you're looking for.

  • ADF: Tree Refresh after Expanding a node. Please Frank have a look!

    About this post:
    Re: ADF: Tree Refresh after Expanding a node
    Frank answered that he doesn't notice that behavior. I found out that this happens if an appication uses a custom skin.
    In SRDemoSampleADFBC, SRManage.jspx (Management from menu), if you make the explorer window small enough not to cover the whole tree, you can notice this (the page jumps to the top).
    Now if you change in adf-faces-config.xml the "skin-family" tag to "oracle", you will see that the tree component has changed (it has no triangle icons why this happens) and the page doesn't refresh.
    Minas

    It seems that there's more to the tree expansion icon than the skin definition. We're using the minimal skin and ADF puts out a special character to represent the disclosure symbol (which by the way, renders differently on IE6, than IE7, than Safari or Firefox on Mac). However, switching to the Oracle skin, the disclosure symbol comes out as a full-on image (triangle including the +). We have found this frustrating because the triangles seem not sufficiently suggestive to our users - but switching to the Oracle skin has other issues with white-on-white text.
    But in any case, the tree refresh after node expansion is another annoyance as I described in the other thread linked here (including URL to see problem in action).
    Cheers, Mark

  • How can we set icon to a tree table

    Hi ADF Experts,
    The below is regarding skinning of af:tree table component.
    How can we set icon to a tree table
    Below is the af:tree component. When I run the application I see all the parent and child nodes as folder icon. My question is how can set a file icon to the elements present inside a parent node.
      <af:treeTable value="#{pageFlowScope.MerchandizeTreeModel.productTreeModel}"
                                      id="tt1" var="row"
                                      rowSelection="multiple"
                                      horizontalGridVisible="false"
                                      verticalGridVisible="false">
                          <f:facet name="nodeStamp">
                            <af:column sortable="false" headerText=""
                                       rowHeader="true" id="c11" width="200">
                     <af:panelGroupLayout id="pgl0">
       <af:image source="/images/folder.png" shortDesc="foldericon"
                                id="i1"/>
                      <af:outputText value="#{row.groceryItems}" id="ot11"/>
    </af:panelGroupLayout>
                            </af:column>
                          </f:facet>
                        </af:treeTable>
    Thanks in advance,
    Animesh

    Hi Experts,
    I am having a tree table component in adf. I have set a folder image for the parent node. How can we set a document image for contents inside a parent node.
    Thanks,
    Biswa

  • Trying to re-create our 10g custom skin in 11g

    Hi Everyone:
    We had a detailed custom skin and also utilized customized velocity templates that created a specific look and feel to our application in 10g. We used a header.jspx & leftside.jspx that were in the region-metadata.xml file. The JHeadstart team assisted a previous employee with setting all of this up.
    We are trying to convert our applications over from 10g to 11g and think that enhancements such as the "tree" layout will replace needing a leftside.jspx page that listed the menu links along the left side instead of folders across the top. We have gone through the 11g Tutorial and read chapter 19 "Applying Custom Skins to Applications" of the "Web User Interface Developer's Guide for Oracle Application Development Framework". While working on a simple webpage to start with in our application, we registered the custom skin as specified in "Applying Custom Skins to Applications", but things look very different, and I'm trying to get a handle on how to re-apply the look and feel now that this section of our application has been converted to 11g and properly utilize the new features of 11g that weren't available in 10g. To start with, we had a custom Logo on our Application that I would like to show up on the Header of the Application in the same spot where the "Oracle JHeadstart Demo" title is displayed. I am trying to study the custom_labels.vm velocity template, but am not sure where to apply this. The logo is in the form of a .gif file.
    Can someone tell me how to put our custom logo .gif file in the Header where the Oracle JHeadstart Demo title is displayed and have it generated through JHeadstart?
    Starting there can hopefully open up ideas on how to apply the rest of our look and feel utilizing all of the new features of 11g, not just replicating things as they were done in 10g.
    Thanks very much in advance.
    Mary
    UofW

    Hi Steven:
    Great to hear from you, I was hoping you'd reply :)
    I followed your instructions, and also changed the header and footer size attributes (headerGlobalSize & footerGlobalSize) to accommodate our larger .gif Logo. So far, so good. I made these changes in the default layout velocity template - jhsPageTemplate.vm which generates the JhsPageTemplate.jspx page. Starting to work toward the look and feel our users want. However, I was hoping to use the tree layout. I want to institute these changes in the JhsTreeMenuPageTemplate.jspx, but I am unable to find the velocity template that generates the JhsTreeMenuPageTemplate.jspx.
    Could you please tell me where it is?
    Thanks again, and Merry Christmas to you and yours.
    Mary
    UofW

Maybe you are looking for

  • How do I get Messages to show contact names instead of phone numbers in notifications?

    Originally, notifications from Messages.app would show the contact name sending the message. I'm not sure what caused it to stop, but now all notifications show up as the phone number of the contact. In the actual app, the names look fine. Is there s

  • Logica and Physical standby to the same Primary?

    Hi, I have a primary - standby setup operating in the production. i now have a requirement to configure a Logical standby to the primary server. Can I do that leaving the already existing physical standby intact? Thanks, Aswin.

  • Connecting iPhone to Mac Book

    I was wondering if anyone knew how to connect my iPhone to my Mac Book without the use of a router, through WiFi. I want to be able to connect through WiFi but don't want to get a router and was just wondering if anyone knew what I was doing wrong or

  • Linking issue

    Hi guys i have been struggling linking my webpage to my forum any ideas ??? i have done a few links but this one doesnt wanna go at all

  • PL/PDF bold words, strike-throughs

    Need help from those who have created complex reports/forms using PL/PDF. Has anybody done strike through sentences and words in bold within paragraphs? Pls share your knowledge.