Controls, Skins, CSS and Custom "psuedoclass" (beyond :hover, :pressed...)

Hi All,
If you haven't experienced control skinning via css, read about it here: http://forums.sun.com/thread.jspa?threadID=5357325&tstart=0 (thanks to tamerkarakan).
Turns out Control has some stateful information stored in it such as hover, pressed, focused. When these are TRUE you can associated a style with that stateful presence of your Control.
The CSS to turn MyControl from RED to GREEN when hover is (programaticaly) set to true would look something like:
"com.myjavafxapp.control.MyControl" {
fill: RED;
"com.myjavafxapp.control.MyControl":hover {
fill: GREEN;
}What I would like to know is can I add my own "hover" equivalent? If I create a control that has stateful setting of "state"="Low:Medium:High" and I want these represented in the CSS by "Yellow, Orange, Red" how can this be done? Ideally all styling logic should be outside the control in JavaFX CSS. What I would really like to see from a CSS perspective is this....
"com.myjavafxapp.control.MyControl" {
"com.myjavafxapp.control.MyControl":state=low {
fill: YELLOW;
"com.myjavafxapp.control.MyControl":state=med {
fill: ORANGE;
"com.myjavafxapp.control.MyControl":state=high {
fill: RED;
}Can this be done?
Cheers

Thanks topley, that's what the fan's want alright.
According to that I need...
"com.myjavafxapp.control.MyControl":${state == LOW} {
fill: YELLOW;
"com.myjavafxapp.control.MyControl":${state == MED} {
fill: ORAGE;
"com.myjavafxapp.control.MyControl":${state == HIGH} {
fill: RED;
}But this css syntax is NOT supported in JavaFX :'( and neither is :state==High or :state=High eta. I tried adding state as a boolean and just :state {} but this gives the following exception....
com.sun.stylesheet.UnsupportedPropertyException: java.lang.IllegalArgumentException: state
at com.sun.stylesheet.javafx.FXObjectStyleSupport.addPseudoclassListener(FXObjectStyleSupport.java:430)
at com.sun.stylesheet.styleable.DefaultStyleable.addPseudoclassListener(DefaultStyleable.java:184)
at com.sun.stylesheet.PropertyManager.addPseudoclassListener(PropertyManager.java:447)
at com.sun.stylesheet.Rule.applyTo(Rule.java:226)
at com.sun.stylesheet.Stylesheet.applyTo(Stylesheet.java:277)
at com.sun.stylesheet.Stylesheet.applyTo(Stylesheet.java:282)
at com.sun.stylesheet.Stylesheet.applyTo(Stylesheet.java:257)
at javafx.scene.Scene.applyStylesheets$impl(Scene.fx:235)
at javafx.scene.Scene.applyStylesheets(Scene.fx:43)
at javafx.scene.Scene.userInit$(Scene.fx:220)
at javafx.scene.Scene.initialize$(Scene.fx:43)
Things would probably be a little easier for me to work out if I could look at the source of Control and determine how hover, pressed and focused are implemented... even if I am limited to just discrete Boolean values for now.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               

Similar Messages

  • SSRS 2008 R2 Calendar Control not working and report not refreshing on pressing enter in Chrome.

    SSRS 2008 R2 Calendar Control not working and report not refreshing on pressing enter in Chrome.

    SSRS reports are always best viewed in IE and the report result what you see in IE always will not be same and consistent in thirdy party browswers.
    So consider using IE as workaround.
    Also please refer:
    https://social.msdn.microsoft.com/Forums/vstudio/en-US/2188de10-cff9-4e24-b14f-da5121f1c4a4/ssrs-calender-control-not-visible-in-chorme-on-server?forum=sqlreportingservices
    Workaround here:
    http://www.rajbandi.net/Fixing-SSRS-Report-Viewer-control-date-picker-in-Google-chrome/
    -Vaibhav Chaudhari

  • After deleteing Custom CSS and Custom Functions, cannot get FireFox to recognize audio player. Works in IE and Safari. Site is https and using bluehost.

    Using the Genesis Framework on my WordPress site. I can use Safari and IE. However, when I try to use Fire Fox, it will not appear. I deleted all of my Custom CSS and Functions. Still, nothing is working. Contacted bluehost, the representative there was not able to help me out and also emailed CD Baby to see what might work. I am not sure if it is something with my site using HTTPS instead of HTTP of why this is not working? I am told the plugin works on Fire Fox but I cannot for the life of me figure out what's going on. Also changed themes and used Twenty Thirteen among others. Still the same thing. Fire Fox will not work. Tried in Text widget, and pasting on a page, and still not working. IE and Safari it is fine. Do I need to add something else within my site? Thanks ahead of time for any way to solve this situation.

    There is mixed active content loaded in an iframe that Firefox is blocking as you can see by the shield icon at the left end of the location/address bar.
    *https://developer.mozilla.org/Security/MixedContent
    *https://developer.mozilla.org/Tools/Web_Console

  • Spark skins, modules and custom themes: linking issues?

    I've read some other threads on this topic that were related to the pre-release versions, but I can't get a complete answer get. I also opened an issue in the bug tracker (https://bugs.adobe.com/jira/browse/SDK-30748), but I'm also posting here, hoping to get some help.
    Basically, I have a bunch of skin classes for the standard Spark controls (e.g. s:Button), as well as other skin classes for my custom SkinnableComponent objects. I need to reuse those skins in many projects, so I created a theme: I put in a Flex Library Project all my skin classes, all related graphical assets, and a defaults.css stylesheet that associates each component with its correct skinClass.
    Now, in my modular application project, what is the correct method to link this compiled theme SWC? I tried different ways, and found some issue for each one:
    In <app>-config.xml, using the <theme> compiler option: this way, modules don't pick up the skinClass correctly (default components use the standard Spark skin, and for custom components I get many skinNotFound errors).. its a pity, I like this method because command-line invocations of MXMLC (build scripts) automatically apply the settings in the config.xml file, while I have to manually keep in sync any additional compiler argument.
    In <app>-config.xml, using the <theme> compiler option and add -compiler.isolated-styles=false: seems to work, but not always.. moreover, the option must be put in additional compiler argument, and not in <app>-config.xml, to have effect... I understand that the config.xml file, in a modular application, is only applied to the main application (or that it must replicated with correct name for each module)?
    In additional compiler arguments, using the theme+= option.. these arguments should be used also for modules compilation, and this seems the most effective solution at the moment (swf size of compiled modules has slightly increased), but skinNotFound errors still happens sometimes, usually going away after a clean build.. maybe this has something with the incremental build performed by Flash Builder and/or optimization of modules?
    Right now, I've tried adding also -keep-all-type-selectors in the compiler arguments to see how it goes...
    Is my scenario supported by Flex 4? How should I setup my environment? I read how to create custom themes in the official documentation (http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7f85.html) and a specific help section exists about using styles with modules (http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-799a.html#WSda 78ed3a750d6b8f1b97f82d12508050aa0-8000), but it only cover simple style sheets, no specific information about compiled themes and the suggested linking strategy.
    I'm using Flash Builder 4.5.1 and compiling with Flex SDK 4.5.0 (both application and theme), the project use some Halo components (e.g. DateField) but almost all components are Spark, and I use Spark component for <s:Application> and <s:Module>. Modules are optimized for the main application, and are loaded using the ModuleManager.
    Thanks in advance for any help.
    Cosma Colanicchia

    I'm not sure Spark components will work if the compatibility mode is set to
    3.

  • Problem with css reload (custom adf skin)

    I have defined a custom skin but changes in the css does not immediately show in the page. I have not figured out what triggers a rreload of the css. When I delete the generated css from the embedded OC4J a new one i immediately created but with the old values.

    Hello,
    This depends on the version of ADF your using.
    If its 10G, as far as I know, changes will only get picked up after a redeploy and even then you need to force the browser to re download the css (using a force refresh, shift + F5 or the refresh key normally)
    If its 11G, the redeploy should not be needed as long as you force a browser refresh.
    As long as the previously mentioned context parameter is present:
      <context-param>
        <description>If this parameter is true, there will be an automatic check of the modification date of your JSPs, and saved state will be discarded when JSP's change. It will also automatically check if your skinning css files have changed without you having to restart the server. This makes development easier, but adds overhead. For this reason this parameter should be set to false when your application is deployed.</description>
        <param-name>org.apache.myfaces.trinidad.CHECK_FILE_MODIFICATION</param-name>
        <param-value>true</param-value>
      </context-param>-Anton

  • JSF: Using own custom styles in skin css file?

    I have created custom skin by defining custom css file and implementing predefined ADF style definitions (aliases).
    Also, I need some other styles for use on specific parts i application, and my idea was to put these styles in same css file which is used in skin definition.
    For example:
    .footer_txt     {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #FFFFFF}
    My intention was to use this styles in styleClass attribute of various
    adf faces components
    But after starting application, I can't find my additional styles in generated css file (pfmskin-desktop-10_1_3_1_0-ie).
    Looks like that css generator is ignoring any styles which are not ADF predefined styles?
    I was thinking that this is possible, because at the end of srdemo.css file (in SRDemo application) there is one part like this
    /* custom styles that I made up and set on the styleClass attribute of various
    adf faces components */
    .adfFacesDemoSearchPanelGroup
    width:100%;
    padding:6px 6px 6px 26px;
    background-color: #0099CC;
    I can put my styles in separate css file, but then I have to include this file in every application page...
    Is it possible to have custom defined styles in skin css file, and use them in styleClass attribute?

    Hi,
    skinning only works with the ADF faces skin selectors. There are plans to support custom selectors in a future version
    Frank

  • Dynamic screen and custom control

    Hi,
    I have to create a screen and custom control dynamically within a method and display alv grid. Is this possible?
    regards,
    Madhu

    hi,
    this is a smple program just try in this way.plz do reward points if it is of some use
    data:obj type ref to zcl_test_alv.
    parameter:p_mblnr type zbshd-mblnr.
    start-of-selection.
    set screen 100.
    *&      Module  STATUS_0100  OUTPUT
          text
    module STATUS_0100 output.
    SET PF-STATUS 'xxxxxxxx'.
    SET TITLEBAR 'xxx'.
    if obj is initial.
    create object obj
    exporting p_con = 'MATERIAL_DOC'.
    endif.
    CALL METHOD obj->get_data
        exporting p_mat = p_mblnr.
    endmodule.                 " STATUS_0100  OUTPUT
    The above is an executable program.
    zcl_test_alv is a class which u need to create in se24 according to ur requirement
    u need to define methods and attributes.
    for example there are 3 methods
    constructor
    get_data
    put_data
    method GET_DATA.
    SELECT mblnr
             mblpo
             matnr
             maktx
             meins
             menge
             waers
             dmbtr
             INTO corresponding fields of TABLE it_mm
             FROM  zbsit
             WHERE mblnr = p_mat.
    if sy-subrc = 0.
    call method put_data.
    endif.
    endmethod.
    method PUT_DATA.
    DATA : it_fldcat TYPE lvc_t_fcat.
      DATA : wa_fldcat LIKE LINE OF it_fldcat.
      DATA : it_sort TYPE lvc_t_sort,
             wa_sort LIKE LINE OF it_sort.
    CALL FUNCTION 'LVC_FIELDCATALOG_MERGE'
    EXPORTING
      I_BUFFER_ACTIVE              =
       I_STRUCTURE_NAME             = 'ZBMDC'
      I_CLIENT_NEVER_DISPLAY       = 'X'
      I_BYPASSING_BUFFER           =
      I_INTERNAL_TABNAME           = 'ZBSIT'
      CHANGING
        ct_fieldcat                  = it_fldcat[]
    EXCEPTIONS
      INCONSISTENT_INTERFACE       = 1
      PROGRAM_ERROR                = 2
      OTHERS                       = 3
    IF sy-subrc <> 0.
    MESSAGE ID SY-MSGID TYPE SY-MSGTY NUMBER SY-MSGNO
            WITH SY-MSGV1 SY-MSGV2 SY-MSGV3 SY-MSGV4.
      EXIT.
      ELSE.
        LOOP AT it_fldcat INTO wa_fldcat.
          CASE wa_fldcat-fieldname.
            WHEN 'MBLNR'.
              wa_fldcat-reptext   = 'Material Doc no'.
            WHEN 'MBLPO'.
              wa_fldcat-reptext   = 'Item Material Doc'.
              wa_fldcat-ref_table = 'X'.
            WHEN 'MATNR'.
              wa_fldcat-reptext   = 'Material No'.
              wa_fldcat-ref_table = 'X'.
            WHEN 'MAKTX'.
              wa_fldcat-reptext   = 'Description'.
              wa_fldcat-do_sum    = 'X'.
            WHEN 'MEINS'.
              wa_fldcat-reptext   = 'UOM'.
              wa_fldcat-do_sum    = 'X'.
            WHEN 'MENGE'.
              wa_fldcat-reptext   = 'QUAN'.
              wa_fldcat-do_sum    = 'X'.
            WHEN 'WAERS'.
              wa_fldcat-reptext   = 'CurrKey'.
              wa_fldcat-do_sum    = 'X'.
            WHEN 'DMBTR'.
              wa_fldcat-reptext   = 'curr'.
              wa_fldcat-do_sum    = 'X'.
          ENDCASE.
          MODIFY it_fldcat FROM wa_fldcat INDEX sy-tabix.
        ENDLOOP.
        wa_sort-fieldname = 'MBLNR'.
        wa_sort-up        = 'X'.
        wa_sort-subtot    = 'X'.
        APPEND wa_sort TO it_sort.
    ENDIF.
    CALL METHOD o_grid->set_table_for_first_display
    EXPORTING
       i_buffer_active               =
       i_bypassing_buffer            =
       i_consistency_check           =
       i_structure_name              =
       is_variant                    =
       i_save                        =
       i_default                     = 'x'
       is_layout                     =
       is_print                      =
       it_special_groups             =
       it_toolbar_excluding          =
       it_hyperlink                  =
       it_alv_graphics               =
       it_except_qinfo               =
       ir_salv_adapter               =
      CHANGING
        it_outtab                     = it_mm[]
        it_fieldcatalog               = it_fldcat[]
        it_sort                       = it_sort
       it_filter                     =
    EXCEPTIONS
       invalid_parameter_combination = 1
       program_error                 = 2
       too_many_lines                = 3
       others                        = 4
    IF sy-subrc <> 0.
    MESSAGE ID SY-MSGID TYPE SY-MSGTY NUMBER SY-MSGNO
               WITH SY-MSGV1 SY-MSGV2 SY-MSGV3 SY-MSGV4.
    ENDIF.
    endmethod.
    method CONSTRUCTOR.
    CREATE OBJECT o_con
        EXPORTING
           container_name      = p_con .
      IF sy-subrc = 0.
        CREATE OBJECT o_grid
          EXPORTING
             i_parent          = o_con .
      ENDIF.
    endmethod.
    Attributes are
    o_con type ref to CL_GUI_CUSTOM_CONTAINER
    o_grid type ref to CL_GUI_ALV_GRID
    it_mm type zmdoc
    to get alv grid ,in layout editor u need to create custom control
    for constructor method u should have a parameter p_con with default value as 'MATERIAL_DOC'
    Im just explaining the above program use this as reference and try.

  • Configuring Custom JavaScript/CSS and YUI in WSRP Producer Portlet

    I am trying to find information on how to setup/configure WebCenter for WSRP Producer Portlets that have YUI and custom javascript/CSS. While we have gotten some of the YUI features and custom javascript/CSS to work, we find that some references are not loading such as custom CSS and images. This appears to be a result of the URL rewrite not occuring for some of these references. It appears that WebLogic Portal supports this capability and can be configured using a dependency file for such needs but I have been unable to find a equivalent for WebCenter.
    Any help would be greatly appreciated.
    Best Regards.
    Carl

    When you are providing javascript or css path,provide the absolute path.
    like src="http://<server>:<port>/portlet context root/images/some.png".
    In that way custom javascript/css will work.
    Regards,
    Hoque

  • How to embed Flash video and control skin using HTML?

    I am trying to use HTML to embed a flash video, however I encounter the following errors:
    Error #2044: Unhandled skinError:. text=[IOErrorEvent type="ioError" bubbles=false cancelable=false eventPhase=2 text="
    Error #2035: URL Not Found. URL: SkinOverPlaySeekStop.swf"]
    Here is my HTML code:
    <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
         width="640" height="480" >
         <param name="movie" value="Content/example.swf">
         <param name="quality" value="high">
         <param name="play" value="true">
         <param name="loop" value="false">
         <embed src="Content/example.swf" width="640" height="480" play="false" loop="false" quality="high"></embed>
    </OBJECT>
    Whenever I open the page I'll get a popup window with the above errors and once I click "continue" it will go ahead and play the video, but without the control skin.  Can anyone tell me how to get the skin to show up?

    I found a solution at this thread.  Basically, you just have to move your skin file (ie. SkinOverPlayStopSeekMuteVol.swf) to the same directory as your index.html file.
    doghouseJim, thanks for the link.  Although I didn't have to use swfobject in this case it is still good to know.  Also, I didn't know that Flash can generate the HTML.  This is a quick and easy way to see the video in a web browser and if you're using Firefox you can go to View > Page Source to see the code.  If you just want to see the HTML, then all you have to do is go to File > Publish Preview > HTML and it will open a web browser where you can view the page source.

  • LabVIEW and custom controls

    Hi all,
    I'm an italian PhD student working with Polytechnic of Bari.
    I'd like to submit to this forum a question about LabVIEW and custom controls in form of ActiveX components.
    Some introductory word about my problem will be helpful: in the past few months here at Polytechnic of Bari my colleagues and I developed some useful ActiveX controls with custom functionalities to use in LabVIEW.
    For example we developed a "contraves", an
    "endless knob" and a useful counter with a scale very similar to that of standard gazometers or energy counters.
    However we are experimenting some difficulties with the integration of these controls in LabVIEW; the controls are correctly imported in our VIs with using the ActiveX Container but...
    in the block diagram they appear as ActiveX references and we must use property nodes to access even their most useful property (value).
    Please, do someone of you know if (and eventually how) is it possible to integrate more deeply the controls in the LabVIEW environment?
    Do someone of you know if it exist an hypothetical "Custom Controls SDK" for LabVIEW more advanced of that integrated in LabVIEW 6.0?
    Any hint would be appreciated.

    > Please can you specify in more detail how I can obtain the ActiveX
    > refnum input automatically wired to a constant (I have observed this
    > behaviour with the 3D-Graph control as you suggested). I haven't found
    > any reference in the LabVIEW on-line help about the topic "merge-VI".
    >
    The first step is to build a VI that contains the panel and diagram
    elements that you want to drop all at once. In your case, drop the
    ActiveX control at a good size, and on the diagram, you can wire it to
    helper VIs, property nodes, etc. The VI's icon and name are important
    as that is what will show up in the palette menu representing your
    control. The connector pane isn't used.
    With the VI constructed, you want to add it to the palette menu. In the
    Tools menu, Advanced, there is an item about half way down for
    Customizing the Palette menu. You will need to build a New Palette Set
    using the ring and name it whatever you like. You can now add your VI
    wherever you like. Most likely you will want to right click to add a
    new subMenu in the Controls palette and place it in a new .mnu file. In
    the subMenu, right click to add Control. The file dialog will open
    allowing you to select a control file to add to the palette. By
    changing the filter from .ctl to all, you can insert VIs into the
    controls palette.
    All VIs inserted into the Control palette will act as merge VIs, meaning
    that when dragged to a panel, the panel elements will be merged into the
    destination panel, and the diagram elements will be merged into the
    destination diagram.
    For others that want to have these on the Functions palette rather than
    the Controls, you add the VI to the Functions palette, then popup on the
    palette item and check the menu item to make it a Merge VI.
    When it comes time to distribute, you will want to give out your .mnu
    file and the VI of course. Easiest is to place both of them in
    user.lib. If you want the items to go at the top level of the palettes,
    then you can add them to add-ons inside of vi.lib, but this causes more
    upgrade challenges.
    Hope that helps.
    Greg McKaskle

  • CSS and JS version control is causing issues with the Application Cache.

    Hi there,
    I am creating a Web App for use on an iPad and I have been using Adobe Muse to do this.
    The Web App needs to work offline for the most part so I have been using the Application Cache in HTML5 to do this. Everything is caching correctly to the iPad (Safari Browser), however, after a while, the browser is unable to retrieve the CSS and JS complonents of the site from the Application Cache. I have deduced after much mucking around, that the HTML references to the CSS and JS files have version control stuck on the end of it. This seems to work fine when online as the version number after the ? is ignored by the browser.
    When the browser is accessing the CSS and JS files from the application cache, it appears to require the version control number as well. This is where the entire site falls over. It sometimes takes about a day of being offline but eventually, the CSS and JS files must be purged from the browser cache and then they are unable to be resolved from the Application Cache.
    This is really annoying as I am having to go through every HTML file to remove the CSS and JS version numbers.
    Does anyone know if this Muse feature can be switched off (no version controlling on JS and CSS file) or will I have to use another product such as Dreamweaver?

    just to let you know, it turns out not to be the JVM (at least directly).
    the real problem seems to be the order of loading specific dll's. I noticed that the only differences (other than the blow up) was that MSVCRT.dll was being loaded far earlier than without the dummy dll.
    I removed the dummy dll I mentioned before, and went into the project workspace properties. I moved the .lib file for the dll that was actually pulling MSVCRT in to be first in the list, then in the driver program moved the .lib file for the new dll to be first in it's list.
    Everything worked.
    I'm not sure the exact bug there, but my current thought is: The MSVCRT.dll must be loaded prior to the .NET runtime dll (MSVCRT70) or say bye-bye.

  • 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

  • [SOLVED] ADF skin CSS works properly in FF, IE7 but not in IE6

    Hi
    I have an ADF BC application written in jdev 10.1.3 that has a custom skin. The main pages in the app each have an af:menuBar with af:commandMenuItem items within it. The menubar is skinned to be transparent other than a top and bottom border while the af:commandMenuItems are skinned to be a particular colour with a hover colour.
    This works great in Firefox and IE7 but in IE6 the af:commandMenuItems are the same colour as the menubar background. They are only visible on mouse hover (see screenshot linked)
    http://i249.photobucket.com/albums/gg219/pschweig/ie6cssscreen2.jpg
    I noticed that the css file used by the different browsers are different e.g. for firefox
    B2B-desktop-10_1_3_3_0-en-gecko.css
    and for IE6 B2B-desktop-10_1_3_3_0-en-ie-6-windows-s.css
    Could there be some error in the IE6 css generated by ADF? Or is it an IE6 bug? Either way any info on how I can progress with this would be much appreciated.
    thanks
    paul schweiger

    After working with support found that the following css selectors do the job in IE6
    af|menuBar::selected-link{ background: none; color: #661047; }
    af|menuBar::enabled-link{ background: none; color: #661047; }

  • Drawing and some layout help for a simple control: thin lines and application start

    I am trying to create a new, simple control. The control should act as a grouping marker much like that found in the Mathematica notebook interface. It is designed to sit to the right of a node and draw a simple bracket. The look of the bracket changes depending on whether the node is logically marked open or closed.
    After looking at some blogs and searching, I tried setting the snapToPixels to true in the container holding the marker control as well as the strokewidth but I am still finding that the bracket line is too thick. I am trying to draw a thin line. Also, I am unable to get the layout to work when the test application is first opened. One of the outer brackets is cut-off. I hardcoded some numbers into the skin just to get something to work.
    Is there a better way to implement this control?
    How can I get the fine line drawn as well as the layout correct at application start?
    package org.notebook;
    import javafx.beans.property.BooleanProperty;
    import javafx.beans.property.IntegerProperty;
    import javafx.beans.property.SimpleBooleanProperty;
    import javafx.beans.property.SimpleIntegerProperty;
    import javafx.scene.control.Control;
    * Provide a simple and thin bracket that changes
    * it appearance based on whether its closed or open.
    public class GroupingMarker extends Control {
      private final static String DEFAULT_STYLE_CLASS = "grouping-marker";
      private BooleanProperty open;
      private IntegerProperty depth;
      public BooleanProperty openProperty() { return open; }
      public IntegerProperty depthProperty() { return depth; }
      public GroupingMarker(boolean open) {
      this();
      setOpen(open);
      public GroupingMarker() {
      open = new SimpleBooleanProperty(true);
      depth = new SimpleIntegerProperty(0);
      getStyleClass().add(DEFAULT_STYLE_CLASS);
      // TODO: Change to use CSS directly
      setSkin(new GroupingMarkerSkin(this));
      public boolean isOpen() {
      return open.get();
      public void setOpen(boolean flag) {
      open.set(flag);
      public int getDepth() {
      return depth.get();
      public void setDepth(int depth) {
      this.depth.set(depth);
    package org.notebook;
    import javafx.scene.Group;
    import javafx.scene.paint.Color;
    import javafx.scene.shape.FillRule;
    import javafx.scene.shape.LineTo;
    import javafx.scene.shape.MoveTo;
    import javafx.scene.shape.Path;
    import com.sun.javafx.scene.control.skin.SkinBase;
    * The skin draws some simple lines on the right hand side of
    * the control. The lines reflect whether the control is considered
    * open or closed. Since there is no content, there is no
    * content handling code needed.
    public class GroupingMarkerSkin extends SkinBase<GroupingMarker, GroupingMarkerBehavior> {
      GroupingMarker control;
      Color lineColor;
      double shelfLength;
      double thickness;
      private Group lines;
      public GroupingMarkerSkin(GroupingMarker control) {
      super(control, new GroupingMarkerBehavior(control));
      this.control = control;
      lineColor = Color.BLUE;
      shelfLength = 5.0;
      thickness = 1.0;
      init();
      * Attached listeners to the properties in the control.
      protected void init() {
      registerChangeListener(control.openProperty(), "OPEN");
      registerChangeListener(control.depthProperty(), "DEPTH");
      lines = new Group();
      repaint();
      @Override
      protected void handleControlPropertyChanged(String arg0) {
      super.handleControlPropertyChanged(arg0);
        @Override public final GroupingMarker getSkinnable() {
            return control;
        @Override public final void dispose() {
        super.dispose();
            control = null;
        @Override
        protected double computePrefHeight(double arg0) {
        System.out.println("ph: " + arg0);
        return super.computePrefHeight(arg0);
        @Override
        protected double computePrefWidth(double arg0) {
        System.out.println("pw: " + arg0);
        return super.computePrefWidth(40.0);
         * Call this if a property changes that affects the visible
         * control.
        public void repaint() {
        requestLayout();
        @Override
        protected void layoutChildren() {
        if(control.getScene() != null) {
        drawLines();
        getChildren().setAll(lines);
        super.layoutChildren();
        protected void drawLines() {
        lines.getChildren().clear();
        System.out.println("bounds local: " + control.getBoundsInLocal());
        System.out.println("bounds parent: " + control.getBoundsInParent());
        System.out.println("bounds layout: " + control.getLayoutBounds());
        System.out.println("pref wxh: " + control.getPrefWidth() + "x" + control.getPrefHeight());
        double width = Math.max(0, 20.0 - 2 * 2.0);
        double height = control.getPrefHeight() - 4.0;
        height = Math.max(0, control.getBoundsInLocal().getHeight()-4.0);
        System.out.println("w: " + width + ", h: " + height);
        double margin = 4.0;
        final Path VERTICAL = new Path();
        VERTICAL.setFillRule(FillRule.EVEN_ODD);
        VERTICAL.getElements().add(new MoveTo(margin, margin)); // start
        VERTICAL.getElements().add(new LineTo(margin + shelfLength, margin)); // top horz line
        VERTICAL.getElements().add(new LineTo(margin + shelfLength, height - margin)); // vert line
        if(control.isOpen()) {
        VERTICAL.getElements().add(new LineTo(margin, height - margin)); // bottom horz line
        } else {
        VERTICAL.getElements().add(new LineTo(margin, height-margin-4.0));
        //VERTICAL.getElements().add(new ClosePath());
        VERTICAL.setStrokeWidth(thickness);
        VERTICAL.setStroke(lineColor);
        lines.getChildren().addAll(VERTICAL);
        lines.setCache(true);
    package org.notebook;
    import com.sun.javafx.scene.control.behavior.BehaviorBase;
    public class GroupingMarkerBehavior extends BehaviorBase<GroupingMarker> {
      public GroupingMarkerBehavior(final GroupingMarker control) {
      super(control);
    package org.notebook;
    import javafx.application.Application;
    import javafx.scene.Node;
    import javafx.scene.Scene;
    import javafx.scene.control.Label;
    import javafx.scene.control.TextArea;
    import javafx.scene.layout.BorderPane;
    import javafx.scene.layout.VBox;
    import javafx.stage.Stage;
    public class TestGroupingMarker extends Application {
      public static void main(String args[]) {
      launch(TestGroupingMarker.class, args);
      @Override
      public void start(Stage stage) throws Exception {
      VBox vbox = new VBox();
      BorderPane p = new BorderPane();
      VBox first = new VBox();
      first.getChildren().add(makeEntry("In[1]=", "my label", 200.0, true));
      first.getChildren().add(makeEntry("Out[1]=", "the output!", 200.0, true));
      p.setCenter(first);
      p.setRight(new GroupingMarker(true));
      vbox.getChildren().add(p);
      vbox.getChildren().add(makeEntry("In[2]=", "my label 2", 100.0, false));
      Scene scene = new Scene(vbox,500,700);
      scene.getStylesheets().add(TestGroupingMarker.class.getResource("main.css").toExternalForm());
      stage.setScene(scene);
      stage.setTitle("GroupingMarker test");
      stage.show();
      protected Node makeEntry(String io, String text, double height, boolean open) {
      BorderPane pane2 = new BorderPane();
      pane2.setSnapToPixel(true);
      Label label2 = new Label(io);
      label2.getStyleClass().add("io-label");
      pane2.setLeft(label2);
      TextArea area2 = new TextArea(text);
      area2.getStyleClass().add("io-content");
      area2.setPrefHeight(height);
      pane2.setCenter(area2);
      GroupingMarker marker2 = new GroupingMarker();
      marker2.setOpen(open);
      pane2.setRight(marker2);
      return pane2;

    The test interfaces are already defined for you - the 3rd party session bean remote/local interfaces.
    It is pretty trivial to create implementations of those interfaces to return the test data from your XML files.
    There are a number of ways to handle the switching, if you have used the service locator pattern, then I would personally slot the logic in to the service locator, to either look up the 3rd party bean or return a POJO test implementation of the interface according to configuration.
    Without the service locator, you are forced to do a little more work, you will have to implement your own test session beans to the same interfaces as the 3rd party session beans.
    You can then either deploy them instead of the 3rd party beans or you can deploy both the test and the 3rd party beans under different JNDI names,and use ejb-ref tags and allow you to switch between test and real versions by changing the ejb-link value.
    Hope this helps.
    Bob B.

  • Setting width/height of a control with CSS

    Hi,
    I am styling a button a button in CSS and set a background-image for the button in my stylesheet.
    The problem is, that the button should scale to the width/height of the image.
    I added:
    -fx-width: 32px;
    -fx-height: 32px;
    but it has no effect.
    I also tried it with
    -fx-min-width: 32px;
    -fx-min-height: 32px;
    If I use setMinWidth(32); in Java, it works.
    But I rather want to set it in my stylesheets, because the image can change, if we use another skin.

    CSS documentation (http://docs.oracle.com/javafx/2.0/api/javafx/scene/doc-files/cssref.html) states:
    "JavaFX CSS does not support CSS layout properties such as float, position, overflow, and width. However, the CSS padding and margins properties are supported on some JavaFX scene graph objects. All other aspects of layout are handled programmatically in JavaFX code."
    I thought you might be able to do something using the -fx-shape property, but the shape does not affect the size of the button - so that didn't work.
    I had more luck with the -fx-graphic property - you could try to enhance the stylesheet below to get what you want.
    .root   { -fx-background-color: azure; -fx-padding: 20; }
    #smurf-button { -fx-graphic: url("http://bluebuddies.com/smurf_fun/smurf_race/jpg/Smurf_Race_100x100.jpg"); -fx-background-color: transparent; }
    #smurf-button:hover { -fx-effect: dropshadow( three-pass-box , rgba(184,134,11,0.6) , 20, 0.0 , 0 , 0 ); }
    #smurf-button:armed { -fx-effect: innershadow( three-pass-box , rgba(0,200,0,0.6) , 30, 0.0 , 0 , 0 ); }
    public class ButtonStyle extends Application {
      public static void main(String[] args) throws Exception { launch(args); }
      public void start(final Stage stage) throws Exception {
        final Button button = new Button();
        button.setId("smurf-button");
        final Scene scene = new Scene(StackPaneBuilder.create().children(button).build());
        scene.getStylesheets().add(this.getClass().getResource("style.css").toExternalForm());
        stage.setScene(scene);
        stage.show();
    }

Maybe you are looking for

  • How do I enable double-click on toolbar to open new tab?

    I used to open a new empty tab by double clicking next to already opened tabs. This caused opening new one. This was removed in one of the updates :( I miss it a lot.

  • Is the time column in VA05 the time the sales order created?

    i have added a time column in VA05. May i know whether it is the time the sales order is created? How do i know if it it the created time? Need to know the sales order created time, for example at 7:00. Thank you

  • Faces/JSF vs Forms Application ?

    Hi All, I need to compare Forms based application with Faces/JSF based application, in term of performance. (The fact of proprietary vs open standard is not the consideration) Could any body please give comments on the points below : 1) Initial Load,

  • PS CS6 crashes since update

    On my PC (WIndows 7) Photoshop CS6 has been crashing since updating though Adobe Application Manager a couple of days ago. What is the best practice to uninstall and reinstall PS? I've had serious issues uninstalling before, so it's not necessarily a

  • Blackberry Desktop manager won't start

    I cannot get desktop manager to run on a Vista Business machine.  DM appears in task manager but seems to hang and never appear.  There are no error messages or events in any logs that I can find. I have completely removed DM and clean up any remaini