Example: Customized Segmented ToolBar Buttons

Question

Hi,
I have some mistake when I tried the example [Customized Segmented ToolBar Buttons|http://fxexperience.com/2012/02/customized-segmented-toolbar-buttons/] from Richard Bair.
My css
#background {
    -light-black: rgb(74, 75, 78);
    -dark-highlight: rgb(87, 89, 92);
    -dark-black: rgb(39, 40, 40);
    -darkest-black: rgb(5, 5, 5);
    -mid-gray: rgb(216, 222, 227);
    -fx-background-color: -mid-gray;
.segmented-button-bar .button {
    -fx-background-color:
        -darkest-black,
        -dark-highlight,
        linear-gradient(to bottom, -light-black 2%, -dark-black 98%);
    -fx-background-insets: 0, 1 1 1 0, 2 1 1 1;
    -fx-background-radius: 0;
    -fx-padding: 0.4em 1.833333em 0.4em 1.833333em;
.segmented-button-bar .button.first {
    -fx-background-insets: 0, 1, 2 1 1 1;
    -fx-background-radius: 3 0 0 3, 2 0 0 2, 2 0 0 2;
.segmented-button-bar .button.last {
    -fx-background-insets: 0, 1 1 1 0, 2 1 1 1;
    -fx-background-radius: 0 3 3 0, 0 2 2 0, 0 2 2 0;
.segmented-button-bar .button:pressed {
    -fx-background-color:
        -darkest-black,
        rgb(55, 57, 58),
        linear-gradient(to top, -light-black 2%, -dark-black 98%);
}My fxml
<BorderPane
    fx:controller="de.pro.typwriter.welcome.WelcomeActivity"
    xmlns:fx="http://javafx.com/fxml">
    <top>
        <HBox alignment="top_right" styleClass="segmented-button-bar">
            <children>
                <Button text="About" onAction="#onActionGoToAbout" styleClass="first" />
                <Button text="Help" onAction="#onActionGoToHelp" styleClass="last" />
            </children>
        </HBox>
    </top>
</BorderPane>When I have the links styleClass="first" and styleClass="last" in the css-file this exception is thrown:
SEVERE: javafx.scene.control.Control impl_processCSS The -fx-skin property has not been defined in CSS for Button@100bac2[styleClass=first]
SEVERE: javafx.scene.control.Control impl_processCSS The -fx-skin property has not been defined in CSS for Button@e51b2c[styleClass=last]After removing the links in the buttons the following exception is thrown:
WARNING: com.sun.javafx.css.StyleHelper lookup caught:
java.lang.ClassCastException: java.lang.String cannot be cast to javafx.scene.paint.Paint
     at com.sun.javafx.css.converters.PaintConverter$SequenceConverter.convert(Unknown Source)
     at com.sun.javafx.css.converters.PaintConverter$SequenceConverter.convert(Unknown Source)
     at com.sun.javafx.css.Value.convert(Unknown Source)
     at com.sun.javafx.css.StyleHelper.lookup(Unknown Source)
     at com.sun.javafx.css.StyleHelper.lookup(Unknown Source)
     at com.sun.javafx.css.StyleHelper.transitionToState(Unknown Source)
     at javafx.scene.Node.impl_processCSS(Unknown Source)
     at javafx.scene.Parent.impl_processCSS(Unknown Source)
     at javafx.scene.Parent.impl_processCSS(Unknown Source)
     at javafx.scene.control.Control.impl_processCSS(Unknown Source)
     at javafx.scene.Parent.impl_processCSS(Unknown Source)
     at javafx.scene.Parent.impl_processCSS(Unknown Source)
     at javafx.scene.Parent.impl_processCSS(Unknown Source)
     at javafx.scene.Parent.impl_processCSS(Unknown Source)
     at javafx.scene.Parent.impl_processCSS(Unknown Source)
     at javafx.scene.Parent.impl_processCSS(Unknown Source)
     at javafx.scene.Parent.impl_processCSS(Unknown Source)
     at javafx.scene.Node.processCSS(Unknown Source)
     at javafx.scene.Scene.doCSSPass(Unknown Source)
     at javafx.scene.Scene.preferredSize(Unknown Source)
     at javafx.scene.Scene.impl_preferredSize(Unknown Source)
     at javafx.stage.Window.adjustSize(Unknown Source)
     at javafx.stage.Window.access$700(Unknown Source)
     at javafx.stage.Window$13.invalidated(Unknown Source)
     at javafx.beans.property.BooleanPropertyBase.markInvalid(Unknown Source)
     at javafx.beans.property.BooleanPropertyBase.set(Unknown Source)
     at javafx.stage.Window.setShowing(Unknown Source)
     at javafx.stage.Window.show(Unknown Source)
     at javafx.stage.Stage.show(Unknown Source)
     at de.pro.typwriter.manager.TypWriterManager.initApplication(TypWriterManager.java:122)
     at de.pro.typwriter.TypWriter.start(TypWriter.java:34)
     at com.sun.javafx.application.LauncherImpl$5.run(Unknown Source)
     at com.sun.javafx.application.PlatformImpl$4.run(Unknown Source)
     at com.sun.javafx.application.PlatformImpl$3.run(Unknown Source)
     at com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
     at com.sun.glass.ui.win.WinApplication.access$100(Unknown Source)
     at com.sun.glass.ui.win.WinApplication$2$1.run(Unknown Source)
     at java.lang.Thread.run(Thread.java:662)
WARNING: com.sun.javafx.css.StyleHelper lookup styleable = 'artificial' StyleableProperty {property: -fx-background-color, converter: Paint.SequenceConverter, initialValue: <Value>
  <value values="1">
    <Value>
      <value>Color[red=0,green=0,blue=0,opacity=1.0]</value>
      <converter>null</converter>
    </Value>
  </value>
  <converter>Paint.SequenceConverter</converter>
</Value>
WARNING: com.sun.javafx.css.StyleHelper lookup resolved = <Value>
  <value values="3">
    <Value lookup="true">
      <value>-darkest-black</value>
      <converter>null</converter>
    </Value>
    <Value lookup="true">
      <value>-dark-highlight</value>
      <converter>null</converter>
    </Value>
    <Value>
      <value values="7">
        <Value>
          <value>0.0%</value>
          <converter>null</converter>
        </Value>
        <Value>
          <value>0.0%</value>
          <converter>null</converter>
        </Value>
        <Value>
          <value>0.0%</value>
          <converter>null</converter>
        </Value>
        <Value>
          <value>100.0%</value>
          <converter>null</converter>
        </Value>
        <Value>
          <value>NO_CYCLE</value>
          <converter>null</converter>
        </Value>
        <Value>
          <value values="2">
            <Value>
              <value>2.0%</value>
              <converter>null</converter>
            </Value>
            <Value lookup="true">
              <value>-light-black</value>
              <converter>null</converter>
            </Value>
          </value>
          <converter>StopConverter</converter>
        </Value>
        <Value>
          <value values="2">
            <Value>
              <value>98.0%</value>
              <converter>null</converter>
            </Value>
            <Value lookup="true">
              <value>-dark-black</value>
              <converter>null</converter>
            </Value>
          </value>
          <converter>StopConverter</converter>
        </Value>
      </value>
      <converter>LinearGradientConverter</converter>
    </Value>
  </value>
  <converter>Paint.SequenceConverter</converter>
</Value>
WARNING: com.sun.javafx.css.StyleHelper lookup node = ButtonSkin[id=null, styleClass=button]Any idea?
NetBeans 7.1, Windows XP, JavaFX 2.0.2

Answer 1

I haven't tried the code locally, but I'm sure that this is due to Richard building his demo with the developer preview JavaFX 2.1, which features numerous improvements to FXML. I note you're using the JavaFX 2.0.2 GA release. If you are in a developer environment (i.e. you aren't deploying to end users), you may want to consider upgrading to JavaFX 2.1 Developer Preview builds. You can go here to download the builds (and note that the builds are updated weekly):
http://www.oracle.com/technetwork/java/javafx/downloads/devpreview-1429449.html
-- Jonathan