5 Replies Latest reply: Jun 10, 2011 5:00 AM by Darryl Burke RSS

    Update-To-Date CSS-Spec


      I'm wondering if there's somewhere even in code a more accurate CSS-Definition (best would be Backus-Naur-Form) because the one found [url http://download.oracle.com/docs/cd/E17802_01/javafx/javafx/1.3/docs/api/javafx.scene/doc-files/cssref.html]here is far from complete and even those elements that are specified are not always correct. E.g. does ensemble2.css using defining a linear gradient like this:

      linear (0%,0%) to (0%,100%) stops (0%,#a6aab1) (100%,#727782)

      although the spec defines it like this:

      linear ( <size> , <size> ) to ( <size> , <size> ) stops [ ( <number> , <color> ) ]+ [ repeat | reflect ]?

      I ask because I experimented a bit on writing a CSS-Editor for Eclipse ( [url http://tomsondev.bestsolution.at/2011/06/09/using-xtext-to-create-javafx-css-editor/]myblog)


      Edited by: Darryl Burke -- fixed the link

      Edited by: user5379643 on 10.06.2011 02:55

      Edited by: user5379643 on 10.06.2011 02:55
        • 1. Re: Update-To-Date CSS-Spec
          David Grieve
          Unfortunately, javadoc didn't pick up the CSS reference. This will be fixed soon.

          Linear Gradients <lineargradient>

          linear ( <size> , <size> ) to ( <size> , <size> ) stops [ ( <number> , <color> ) ]+ [ repeat | reflect ]?

          Linear gradient creates a gradient going though all the stop colors along the line between the two points specified by the first and second (<size>,<size>). If the sizes are percentages then they are relative to the size of the area being filled. Percentage and length sizes can not be mixed in a single gradient definition. This example will create a gradient from top left to bottom right of the filled area with red at the top left corner and black at the bottom right.

          linear (0%,0%) to (100%,100%) stops (0.0,red) (1.0,black)
          This more complex example will create a 50px high bar at the top with a 3 color gradient with white underneath for the rest of the filled area.

          linear (0,0) to (0,50px) stops (0.0,gray) (0.50,darkgray) (0.99,dimgray) (1.0,white)
          Radial Gradients <radialgradient>

          radial [focus-angle ]? [focus-distance ]? [center (<size> , <size>)]? stops [ ( <size> , <size> ) ]+ [ repeat | reflect ]?

          The defaults for optional values are as given in the javadoc for RadialGradient. The required is the radius value. Here is a simple and a more complex example:

          radial 100% stops (0.0,red) (0.50,darkgray) (1.0,black)
          radial focus-angle 20% focus-distance 20% center (25%,25%) 50% stops (0.0,gray) (0.50,darkgray) (1.0,dimgray) reflect

          Edited by: dgrieve on Jun 9, 2011 6:31 PM
          • 2. Re: Update-To-Date CSS-Spec
            Sorry but then something is wrong in your spec or the ensemble2.css:

            -fx-background-color: #52565d, #bfc2c7, linear (0%,0%) to (0%,100%) stops (0%,#a6aab1) (100%,#727782);

            Spec is really:
            linear ( <size> , <size> ) to ( <size> , <size> ) stops [ ( <number> , <color> ) ]+ [ repeat | reflect ]?

            Then ensemble2.css is wrong because 0% and 100% in the stop definitions are not numbers as speced [url http://download.oracle.com/docs/cd/E17802_01/javafx/javafx/1.3/docs/api/javafx.scene/doc-files/cssref.html#typenumber]here so if the spec you repeated in the reply is correct only this is correct:

            -fx-background-color: #52565d, #bfc2c7, linear (0%,0%) to (0%,100%) stops (0,#a6aab1) (1,#727782);

            Edited by: Darryl Burke -- fixed the link
            • 3. Re: Update-To-Date CSS-Spec
              Darryl Burke
              Please go through the forums FAQ linked from every page where you can find out how to post links.

              • 4. Re: Update-To-Date CSS-Spec
                Well then the link function in the toolbar is not working correct! Sorry next time i know it.
                • 5. Re: Update-To-Date CSS-Spec
                  Darryl Burke
                  Hey, don't shoot the messenger! <insert non-working smiley here>