JavaFX Brush for SyntaxHighlighter

I wanted to display well-formatted JavaFX Script source code using Alex Gorbatchev's SyntaxHighlighter. But the current version of SyntaxHighlighter does not include a JavaFX brush. So I wrote one. A sample of highlighted code is below. Note that some of the code is a bit silly. It is written that way to exemplify the highlighting features.

import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.transform.Scale;
import javafx.stage.Stage;

/**
 * @author Patrick Webster
 */
var mouseX: Number;
var mouseY: Number;
var scale: Float = (-2.3 - 1.0) * -1.;
var egg: Circle;

Stage {
   title: "Easing Raw Egg"
   scene: Scene {
      fill: Color.BLACK
      height: 0x2EB  width: 0X30C
      content:
         egg = Circle {
            fill: Color.WHITE
            centerX: bind mouseX
            centerY: bind mouseY
            radius: 323.456e-02
            transforms: Scale {
               // Egg eases to moving mouse cursor
               pivotX: bind mouseX
               pivotY: bind mouseY
               x: bind scale * .02298E3
               y: bind scale *  32.56789
            }

            onMouseMoved: function( me: MouseEvent ) {
               updateMousePosition(me);
            }
            onMouseWheelMoved: function( we: MouseEvent ) {
               updateMousePosition(we);
               updateScale(we);
            }
         }
   }
}

function updateMousePosition(me : MouseEvent) : Void {
   mouseX = me.x;
   mouseY = me.y;
}

function updateScale(we: MouseEvent) : Float {
   var newScale = scale + (we.wheelRotation * -0.1);
   if (newScale < 1.0)
      return scale = 1.0000000e+00;
   return scale = newScale;
}

There are others who have written JavaFX brushes for SyntaxHighlighter, but they all lack the functionality that I desire. My implementation differs from others by including these additional features:

1. Negative signs for constants are highlighted.
2. Constants with scientific notation are highlighted.
3. Leading and trailing decimal points are highlighted.
4. Keywords are up-to-date for JavaFX 1.1.1.
5. Deprecated keywords are supported.
6. JavaFX built-in data types are highlighted differently than keywords.

Constants
In order to recognize all number formats for constants in JavaFX Script, I wrote the following horrendous regular expression:

/(-?\.?)(\b(\d*\.?\d+|\d+\.?\d*)(e[+-]?\d+)?|0x[a-f\d]+)\b\.?/gi

I am not going to explain every little detail of the above mess, but I will say that there are basically three parts. The first part matches on regular numbers with an optional leading negative sign and decimal point. The middle part looks for scientific notation. The last part checks for hexadecimal format. The major assumption is that correct JavaFX Script is the input. It is possible for the above expression to match on illegal code, but the hope is that people will not be highlighting incorrect code on their blogs. One small problem is that the above regular expression will match on the binary subtraction operator if there is no space between the operator and the subtrahend:

def b: Double = a-4;

I would prefer if the minus operator were not highlighted. But in general, it is good style to surround binary operators with a space, so this is really not a big problem.


Keywords
As the JavaFX Script language evolves, keywords come and go. The latest JavaFX Script 1.1.1 keywords are listed here. I'm sure this list will need to be updated again after the next language revision. I also include a separate list of deprecated keywords that is easily commented-out if desired.


Built-In Types
There are several built-in data types in JavaFX Script. I chose to highlight the following types in their own distinct color:

Boolean Byte Character Double Duration Float Integer Long Number Short String Void

Blogger Usage
If you followed my instructions on how to install SyntaxHighlighter into Blogger, then getting the JavaFX highlighter working will be a simple task. First you will need to download my brush file here. Expand it and place it somewhere on the internet. Then insert a link to the brush file in your Blogger HTML template. For example, I inserted this line in my template:

<script src='http://patrickwebster.googlepages.com/shBrushJavaFX.js' type='text/javascript'/>

I do not recommend that you link to my file because the file may move or change names at any time. Once the template is edited, new JavaFX code can be highlighted by wrapping it in the <pre class="brush: javafx"> and </pre> tags. The brush aliases 'jfx' or 'javafx' may be used within the <pre> tag.


Update: May 3rd, 2009
The newly released version 2.0.320 of SyntaxHighlighter includes a JavaFX brush! So you do not need to download my script. Simply upgrade to the new release and wrap your JavaFX code in the <pre> tag as explained above. You can link to the hosted version of the brush file by adding the following line to the appropriate section of your Blogger template:

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/>

Scalable JFreeChart JavaFX Applet

A previous post demonstrated an applet written in Swing that showed how to scale a JFreeChart using the mouse wheel. That applet lacked the ability to scroll and explore the chart when zoomed-in. This post presents a similar applet, but with the added scrolling ability. Rather than using Swing exclusively, the applet below harnesses the power of JavaFX. The mouse wheel adjusts the zoom level. When zoomed in, the chart moves continuously with the pointer, allowing the user to scroll to any part of the chart simply by moving the mouse. Holding down the Control and Shift keys while moving the scroll wheel down returns the chart to unity scale. Mac users may have to click the “Trust” or “Allow” button in order to use the applet. Less-paranoid operating systems like Linux and Windows do not require any security confirmations. Scaling may not work in Safari on a Mac.

Note: Windows users may need to right-click on the chart to enable the mouse wheel adjustments. For some reason, the popup menu that appears after a right-click causes the applet to start listening to mouse wheel events. This is most noticeable when dragging the applet out of the browser and then closing the dragged-out applet and returning to the browser window. This problem does not occur on Mac or Linux.

The Code
Unlike my previous Swing applets, the code for this applet consumes only one file. JavaFX gets a lot done in only a few lines of code. I'll run through the highlights of the code. The complete source file is available to download.

First, constants and variables are declared:

def SCALING_INCREMENT: Number = 0.1;
def MINIMUM_SCALE: Number = 1.0;

var mouseX: Number;
var mouseY: Number;
var scale: Number = 1.0;

var chartPanel = new ChartPanel(createChart());
chartPanel.setPreferredSize(new Dimension(466, 288));
var chartComponent = SwingComponent.wrap(chartPanel);

The ChartPanel is declared just as in Swing, but with type var. The key to getting the Swing ChartPanel component into JavaFX is wrapping it in the SwingComponent.wrap() method. This wrapped component will be the only content in a Group, which is the only content of the Scene as shown here:

Stage {
  title: "JFreeChart in JavaFX"
  scene: Scene {
    content: [
      Group {
        content: {
          chartComponent
        }
        transforms: Scale {
          // Bind pivot point to mouse position so
          // zooming is always centered at the pointer
          pivotX: bind mouseX
          pivotY: bind mouseY
          x: bind scale
          y: bind scale
        }
        onMouseMoved: function( me: MouseEvent ) {
          updateMousePosition(me);
        }
        onMouseWheelMoved: function( we: MouseEvent ) {
          updateMousePosition(we);
          updateScale(we);
        }
        onMouseEntered: function( me: MouseEvent ) {
          windowsHack();
        }
      }
    ]
  }
}

The power of JavaFX is revealed in the bindings within the transforms variable of the Group. These four bindings update the scale of the chart whenever the variable scale changes. Scaling is centered about a pivot point which is the current pointer position. So zooming is always centered at the mouse pointer.

There are two mouse handlers that update the bindings. The onMouseMoved and onMouseWheelMoved handlers call appropriate functions to maintain the mouse position and scaling factor variables. These functions are:

function updateMousePosition(me : MouseEvent) {
  mouseX = me.x;
  mouseY = me.y;
}

function updateScale(we: MouseEvent) : Void {
  var rotation = we.wheelRotation;
  // Control-Shift zoom-out scales back to MINIMUM_SCALE
  if (we.controlDown and we.shiftDown and rotation > 0) {
    scale = MINIMUM_SCALE;
    return;
  }
  var newScale = scale - (rotation * SCALING_INCREMENT);
  // Don't allow scaling below MINIMUM_SCALE
  if (newScale < MINIMUM_SCALE) {
    scale = MINIMUM_SCALE;
    return;
  }
  scale = newScale;
}

The mouse coordinates mouseX and mouseY are kept up-to-date in updateMousePosition(). The updateScale() function adjusts the scaling factor according to the sign and number of mouse wheel rotation units. If the Control and Shift key modifiers are enabled on the mouse event, scale is reset to its minimum value. A check ensures that less-than-unity scaling is not allowed.

Unfortunately, JavaFX applets are not immune to the annoying Windows behavior that plagued my previous applets. When the applet is first displayed on a page, it won't listen to mouse wheel events. But if a tooltip or popup menu is displayed and then hidden, mouse wheel events become active. Here is the hack to get this working:

function windowsHack() {
  // simulate right-mouse click to bring-up popup menu
  chartPanel.mousePressed(new java.awt.event.MouseEvent(chartPanel,
    0, 0,
    java.awt.event.InputEvent.BUTTON3_DOWN_MASK,
    0, 0, 1, true));
  // immediately hide the popup menu
  chartPanel.getPopupMenu().setVisible(false);
}

The onMouseEntered function calls the above method the first time the mouse hovers over the applet. A right-click is simulated and a popup menu is shown and immediately hidden. This hack only fixes the situation when the applet is first displayed in the browser. If the applet is dragged out of the browser and then returned to the browser, the user will have to manually right-click and dismiss the popup menu in order to restore correct mouse wheel behavior.

JavaFX
Unlike my previous applets, this applet does not require Java SE 6. I do not use JXLayer or any other nifty Swing libraries; therefore, it will run on J2SE 5.0. This is the latest version of Java that will run applets within a web browser on my 32-bit Intel Mac, so testing is much easier than before. Performance does suffer on Java versions prior to SE 6 update 10, but not significantly due to the simplicity of this applet.

As a first impression, I'm quite pleased with the ability to get so much out of so few lines of code. It is nice not having to write listeners and just letting the bindings take care of everything. I look forward to working with JavaFX on future projects.

Resources
To build the applet, you will need these:

1. My code
2. JFreeChart library (I use version 1.0.12)
3. JFree JCommon library (I use version 1.0.15)