Forum Stats

  • 3,873,047 Users
  • 2,266,500 Discussions
  • 7,911,412 Comments

Discussions

Categories

FXML + DisplayShelf Example

866629
866629 Member Posts: 50
edited Mar 15, 2013 9:57PM in JavaFX 2.0 and Later
Hi There,

I'm playing around with the displayShelf sample that comes with Netbeans and I'm dabbling in FXML for the first time.
However, for the most part I'm coping with it, but one thing is pissing me off big time. No matter how hard I try
with using the example in conjunction with Scene Builder - FXML, for the life of me I cannot seem to get
setOnKeyPressed in this displayShelf example to work.

Basically I'm using the example as is, inside the controller class the only difference is that I do not use the init, or start
method from this displayShelf sample:

Shelf shelf = new Shelf(images);
displayShelf.getChildren().add(shelf);

whereby ...

@FXML
private HBox displayShelf;

This HBox is added to other layouts, hence the need to use it.

In FXML the displayShelf is a HBox, that has Focus Travsersable checked in Scene Builder. I even tried under the
Code Accordion tab in Scene Builder to assign a #handleKeyInput from my controller class. But even this has no
effect. Can anyone enlighten me on how to get this working?

Edited by: 863626 on 13/03/2013 16:19
· Share on TwitterShare on Facebook

Best Answer

  • jsmith
    jsmith Member Posts: 2,856
    edited Mar 14, 2013 3:49PM Answer ✓
    the setOnKeyPressed never seems to catch key events, or respond to the left or right keyboard button
    Your Shelf region does not have input focus. You can request input focus using: 
    displayShelf.requestFocus();
    To request focus when the mouse enters the displayShelf, you can use something like: 
    displayShelf.setOnMouseEntered(new EventHandler<MouseEvent>() {
  @Override public void handle(MouseEvent t) {
      displayShelf.requestFocus();
  }
});
    You could also trigger the focus request off of some other event if you wished, such as a mouse press, an app wide hot key or when some other control loses focus.

    Attached is a modified version of the DisplayShelf example. The modified version includes the code to focus the display shelf when the mouse enters it and remove focus from the display shelf when the mouse leaves it. When the shelf is focused it glows to provide a visual indication that it has focus. The modified version adds a TextField to the scene enclosing the shelf. This allows testing of the focus handling of the scene. Without the code which focuses the shelf on mouse enter, after you click on the TextField, it is difficult to get focus back to the DisplayShelf so that it will be able to process key events.

    As DisplayShelf is part of Ensemble and Ensemble is BSD licensed, I guess it's OK to post the modified version to the Oracle forums. The modifications are pretty minimal and all occur in the init method. I just include the whole thing here to make it easy to copy and paste in run (which I think is a useful thing in both questions and answers). 
    /**
 * Copyright (c) 2008, 2012 Oracle and/or its affiliates.
 * All rights reserved. Use is subject to license terms.
 * 
 * Some modifications for mouse handling, styling and default icon usage made by John Smith in 2013.
 *   image license: linkware - backlink to http://www.fasticon.com
 */
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.animation.*;
import javafx.beans.*;
import javafx.beans.property.*;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.collections.ObservableList;
import javafx.event.EventHandler;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.effect.*;
import javafx.scene.image.*;
import javafx.scene.input.*;
import javafx.scene.layout.*;
import javafx.scene.shape.Rectangle;
import javafx.util.Duration;

public class DisplayShelfSample extends Application {
    private static final double WIDTH = 450, HEIGHT = 300;

    String[] imageLocs = {
      "http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Blue-Fish-icon.png",
      "http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Red-Fish-icon.png",
      "http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Yellow-Fish-icon.png",
      "http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Green-Fish-icon.png"
    };
    
    private void init(Stage stage) {
        VBox root = new VBox(10);
        root.setStyle("-fx-background-color: cadetblue;");
        stage.setScene(new Scene(root));
         // load images
        Image[] images = new Image[imageLocs.length + 4];
        for (int i = 0; i < imageLocs.length; i++) {
            images[i] = new Image(imageLocs<em>);<br />
}<br />
// create display shelf<br />
final TextField fishCollectionName = new TextField("Mr Ray");<br />
final DisplayShelf displayShelf = new DisplayShelf(images);<br />
displayShelf.setPrefSize(WIDTH, HEIGHT);<br />
displayShelf.setOnMouseEntered(new EventHandler<MouseEvent>() {<br />
@Override public void handle(MouseEvent t) {<br />
displayShelf.requestFocus();<br />
}<br />
});<br />
displayShelf.setOnMouseExited(new EventHandler<MouseEvent>() {<br />
@Override public void handle(MouseEvent t) {<br />
fishCollectionName.requestFocus();<br />
fishCollectionName.deselect();<br />
}<br />
});<br />
final Glow glow = new Glow();<br />
displayShelf.focusedProperty().addListener(new ChangeListener<Boolean>() {<br />
@Override public void changed(ObservableValue<? extends Boolean> ov, Boolean wasFocused, Boolean focused) {<br />
if (focused) {<br />
displayShelf.setEffect(glow);<br />
} else {<br />
displayShelf.setEffect(null);<br />
} <br />
}<br />
});<br />
HBox.setHgrow(fishCollectionName, Priority.ALWAYS);<br />
root.getChildren().setAll(displayShelf, <br />
HBoxBuilder.create()<br />
.spacing(10)<br />
.style("-fx-padding: 10; -fx-background-color: cadetblue;")<br />
.children(<br />
new Label("Fish school name: "),<br />
fishCollectionName<br />
)<br />
.build()<br />
);<br />
}<br />
<br />
/**<br />
* A ui control which displays a browsable display shelf of images<br />
*/<br />
public static class DisplayShelf extends Region {<br />
private static final Duration DURATION = Duration.millis(500);<br />
private static final Interpolator INTERPOLATOR = Interpolator.EASE_BOTH;<br />
private static final double SPACING = 50;<br />
private static final double LEFT_OFFSET = -110;<br />
private static final double RIGHT_OFFSET = 110;<br />
private static final double SCALE_SMALL = 0.7;<br />
private PerspectiveImage[] items;<br />
private Group centered = new Group();<br />
private Group left = new Group();<br />
private Group center = new Group();<br />
private Group right = new Group();<br />
private int centerIndex = 0;<br />
private Timeline timeline;<br />
private ScrollBar scrollBar = new ScrollBar();<br />
private boolean localChange = false;<br />
private Rectangle clip = new Rectangle();<br />
<br />
public DisplayShelf(Image[] images) {<br />
// set clip<br />
setClip(clip);<br />
// set background gradient using css<br />
setStyle("-fx-background-color: linear-gradient(to bottom," +<br />
" cadetblue 60, darkseagreen 60.1%, cadetblue 100%);");<br />
// style scroll bar color<br />
scrollBar.setStyle("-fx-base: cadetblue; -fx-background: cadetblue;");<br />
// create items<br />
items = new PerspectiveImage[images.length];<br />
for (int i=0; i<images.length; i++) {<br />
final PerspectiveImage item =<br />
items[i] = new PerspectiveImage(images[i]);<br />
final double index = i;<br />
item.setOnMouseClicked(new EventHandler<MouseEvent>() {<br />
public void handle(MouseEvent me) {<br />
localChange = true;<br />
scrollBar.setValue(index);<br />
localChange = false;<br />
shiftToCenter(item);<br />
}<br />
});<br />
}<br />
// setup scroll bar<br />
scrollBar.setMax(items.length-1);<br />
scrollBar.setVisibleAmount(1);<br />
scrollBar.setUnitIncrement(1);<br />
scrollBar.setBlockIncrement(1);<br />
scrollBar.valueProperty().addListener(new InvalidationListener() {<br />
public void invalidated(Observable ov) {<br />
if(!localChange)<br />
shiftToCenter(items[(int)scrollBar.getValue()]);<br />
}<br />
});<br />
// create content<br />
centered.getChildren().addAll(left, right, center);<br />
getChildren().addAll(centered,scrollBar);<br />
// listen for keyboard events<br />
setFocusTraversable(true);<br />
setOnKeyPressed(new EventHandler<KeyEvent>() {<br />
public void handle(KeyEvent ke) {<br />
if (ke.getCode() == KeyCode.LEFT) {<br />
shift(1);<br />
localChange = true;<br />
scrollBar.setValue(centerIndex);<br />
localChange = false;<br />
} else if (ke.getCode() == KeyCode.RIGHT) {<br />
shift(-1);<br />
localChange = true;<br />
scrollBar.setValue(centerIndex);<br />
localChange = false;<br />
}<br />
}<br />
});<br />
// update<br />
update();<br />
}<br />
<br />
@Override protected void layoutChildren() {<br />
// update clip to our size<br />
clip.setWidth(getWidth());<br />
clip.setHeight(getHeight());<br />
// keep centered centered<br />
centered.setLayoutY((getHeight() - PerspectiveImage.HEIGHT) / 2);<br />
centered.setLayoutX((getWidth() - PerspectiveImage.WIDTH) / 2);<br />
// position scroll bar at bottom<br />
scrollBar.setLayoutX(10);<br />
scrollBar.setLayoutY(getHeight()-25);<br />
scrollBar.resize(getWidth()-20,15);<br />
}<br />
<br />
private void update() {<br />
// move items to new homes in groups<br />
left.getChildren().clear();<br />
center.getChildren().clear();<br />
right.getChildren().clear();<br />
for (int i = 0; i < centerIndex; i++) {<br />
left.getChildren().add(items[i]);<br />
}<br />
center.getChildren().add(items[centerIndex]);<br />
for (int i = items.length - 1; i > centerIndex; i--) {<br />
right.getChildren().add(items[i]);<br />
}<br />
// stop old timeline if there is one running<br />
if (timeline!=null) timeline.stop();<br />
// create timeline to animate to new positions<br />
timeline = new Timeline();<br />
// add keyframes for left items<br />
final ObservableList<KeyFrame> keyFrames = timeline.getKeyFrames();<br />
for (int i = 0; i < left.getChildren().size(); i++) {<br />
final PerspectiveImage it = items[i];<br />
double newX = -left.getChildren().size() *<br />
SPACING + SPACING * i + LEFT_OFFSET;<br />
keyFrames.add(new KeyFrame(DURATION,<br />
new KeyValue(it.translateXProperty(), newX, INTERPOLATOR),<br />
new KeyValue(it.scaleXProperty(), SCALE_SMALL, INTERPOLATOR),<br />
new KeyValue(it.scaleYProperty(), SCALE_SMALL, INTERPOLATOR),<br />
new KeyValue(it.angle, 45.0, INTERPOLATOR)));<br />
}<br />
// add keyframe for center item<br />
final PerspectiveImage centerItem = items[centerIndex];<br />
keyFrames.add(new KeyFrame(DURATION,<br />
new KeyValue(centerItem.translateXProperty(), 0, INTERPOLATOR),<br />
new KeyValue(centerItem.scaleXProperty(), 1.0, INTERPOLATOR),<br />
new KeyValue(centerItem.scaleYProperty(), 1.0, INTERPOLATOR),<br />
new KeyValue(centerItem.angle, 90.0, INTERPOLATOR)));<br />
// add keyframes for right items<br />
for (int i = 0; i < right.getChildren().size(); i++) {<br />
final PerspectiveImage it = items[items.length - i - 1];<br />
final double newX = right.getChildren().size() *<br />
SPACING - SPACING * i + RIGHT_OFFSET;<br />
keyFrames.add(new KeyFrame(DURATION,<br />
new KeyValue(it.translateXProperty(), newX, INTERPOLATOR),<br />
new KeyValue(it.scaleXProperty(), SCALE_SMALL, INTERPOLATOR),<br />
new KeyValue(it.scaleYProperty(), SCALE_SMALL, INTERPOLATOR),<br />
new KeyValue(it.angle, 135.0, INTERPOLATOR)));<br />
}<br />
// play animation<br />
timeline.play();<br />
}<br />
<br />
private void shiftToCenter(PerspectiveImage item) {<br />
for (int i = 0; i < left.getChildren().size(); i++) {<br />
if (left.getChildren().get(i) == item) {<br />
int shiftAmount = left.getChildren().size() - i;<br />
shift(shiftAmount);<br />
return;<br />
}<br />
}<br />
if (center.getChildren().get(0) == item) {<br />
return;<br />
}<br />
for (int i = 0; i < right.getChildren().size(); i++) {<br />
if (right.getChildren().get(i) == item) {<br />
int shiftAmount = -(right.getChildren().size() - i);<br />
shift(shiftAmount);<br />
return;<br />
}<br />
}<br />
}<br />
<br />
public void shift(int shiftAmount) {<br />
if (centerIndex <= 0 && shiftAmount > 0) return;<br />
if (centerIndex >= items.length - 1 && shiftAmount < 0) return;<br />
centerIndex -= shiftAmount;<br />
update();<br />
}<br />
}<br />
<br />
/**<br />
* A Node that displays a image with some 2.5D perspective rotation around the Y axis.<br />
*/<br />
public static class PerspectiveImage extends Parent {<br />
private static final double REFLECTION_SIZE = 0.25;<br />
private static final double WIDTH = 200;<br />
private static final double HEIGHT = WIDTH + (WIDTH*REFLECTION_SIZE);<br />
private static final double RADIUS_H = WIDTH / 2;<br />
private static final double BACK = WIDTH / 10;<br />
private PerspectiveTransform transform = new PerspectiveTransform();<br />
/** Angle Property */<br />
private final DoubleProperty angle = new SimpleDoubleProperty(45) {<br />
@Override protected void invalidated() {<br />
// when angle changes calculate new transform<br />
double lx = (RADIUS_H - Math.sin(Math.toRadians(angle.get())) * RADIUS_H - 1);<br />
double rx = (RADIUS_H + Math.sin(Math.toRadians(angle.get())) * RADIUS_H + 1);<br />
double uly = (-Math.cos(Math.toRadians(angle.get())) * BACK);<br />
double ury = -uly;<br />
transform.setUlx(lx);<br />
transform.setUly(uly);<br />
transform.setUrx(rx);<br />
transform.setUry(ury);<br />
transform.setLrx(rx);<br />
transform.setLry(HEIGHT + uly);<br />
transform.setLlx(lx);<br />
transform.setLly(HEIGHT + ury);<br />
}<br />
};<br />
public final double getAngle() { return angle.getValue(); }<br />
public final void setAngle(double value) { angle.setValue(value); }<br />
public final DoubleProperty angleModel() { return angle; }<br />
<br />
public PerspectiveImage(Image image) {<br />
ImageView imageView = new ImageView(image);<br />
imageView.setEffect(ReflectionBuilder.create().fraction(REFLECTION_SIZE).build());<br />
setEffect(transform);<br />
getChildren().addAll(imageView);<br />
}<br />
}<br />
<br />
public double getSampleWidth() { return 495; }<br />
<br />
public double getSampleHeight() { return 300; }<br />
<br />
@Override public void start(Stage primaryStage) throws Exception {<br />
init(primaryStage);<br />
primaryStage.show();<br />
}<br />
public static void main(String[] args) { launch(args); }<br />
}
<pre class="jive-pre"><code class="jive-code">
    · Share on TwitterShare on Facebook

Answers

  • shakir.gusaroff
    shakir.gusaroff Member Posts: 689 Gold Badge
    This HBox is added to other layouts, hence the need to use it.
    The scenegraph only allows for nodes to be in one place at a time.
    · Share on TwitterShare on Facebook
  • 866629
    866629 Member Posts: 50
    Sorry your answer does not really assist me in solving my problem, because it does not guide me in how things should or can be done differently
    to get the event handler working.
    · Share on TwitterShare on Facebook
  • jsmith
    jsmith Member Posts: 2,856
    I looked at the DisplayShelf code, there is no Shelf class, it does not use a HBox and there is no Accordion in it.
    http://download.oracle.com/otndocs/products/javafx/2.2/samples/Ensemble/index.html#SAMPLES/Graphics/Display%20Shelf

    Your answer is likely unanswerable as it is.
    Post all of your source code and fxml files if you would like somebody to replicate your issue and help you solve it.

    The comment "This HBox is added to other layouts, hence the need to use it." is suspect because the Node documentation (http://docs.oracle.com/javafx/2/api/javafx/scene/Node.html) states:
    A node may occur at most once anywhere in the scene graph. Specifically, a node must appear no more than once in all of the following: as the root node of a Scene, the children ObservableList of a Parent, or as the clip of a Node.
    ...
    If a program adds a child node to a Parent (including Group, Region, etc) and that node is already a child of a different Parent or the root of a Scene, the node is automatically (and silently) removed from its former parent. If a program attempts to modify the scene graph in any other way that violates the above rules, an exception is thrown, the modification attempt is ignored and the scene graph is restored to its previous state.

    It is possible to rearrange the structure of the scene graph, for example, to move a subtree from one location in the scene graph to another. In order to do this, one would normally remove the subtree from its old location before inserting it at the new location. However, the subtree will be automatically removed as described above if the application doesn't explicitly remove it.
    From your comment, it would seem that you want to take this same HBox instance and place it in multiple layouts simultaneously, which is not possible. Perhaps that is not what you mean, but that seemed to be the intent of the statement to me.
    · Share on TwitterShare on Facebook
  • 866629
    866629 Member Posts: 50
    edited Mar 14, 2013 2:14AM
    Hi J Smith,

    What I was trying to explain is that I'm using 90% of the code from the display shelf example 'as is' that comes in Netbeans.
    Including the portion of code in the Shelf class where it has setOnKeyPressed.

    The main difference is that I am not using the init and start methods of this example.

    I copied the remaining 90% of code into my controller class java file.

    Where the example has the following line:

    Shelf displayShelf = new Shelf(images);

    I'm instead trying to attach the region object that comes from the Shelf Class and adding it to an HBox layout that I have
    in the GUI I'm playing around with in the Scene Builder programme.

    Hence in the Controller file, I have:

    @FXML
    public void doSomething()
    { //Loop thru first to obtain the image files

    Shelf s = new Shelf(images);
    displayShelf.getChildren().add(s);
    }

    @FXML private HBox displayShelf;

    Now the HBox I call displayShelf is added to another layout object (another HBox) as it only represents a portion of my overall
    GUI if you catch my drift. So what I was trying to say is that I add this node to other nodes in the scenegraph. I'm only using
    ONE scenegraph and the displayShelf HBox is only added to one parent object. I can see and manipulate the image carousel,
    however, the setOnKeyPressed never seems to catch key events, or respond to the left or right keyboard buttons.

    Edited by: 863626 on 13/03/2013 23:11
    · Share on TwitterShare on Facebook
  • jsmith
    jsmith Member Posts: 2,856
    edited Mar 14, 2013 3:49PM Answer ✓
    the setOnKeyPressed never seems to catch key events, or respond to the left or right keyboard button
    Your Shelf region does not have input focus. You can request input focus using: 
    displayShelf.requestFocus();
    To request focus when the mouse enters the displayShelf, you can use something like: 
    displayShelf.setOnMouseEntered(new EventHandler<MouseEvent>() {
  @Override public void handle(MouseEvent t) {
      displayShelf.requestFocus();
  }
});
    You could also trigger the focus request off of some other event if you wished, such as a mouse press, an app wide hot key or when some other control loses focus.

    Attached is a modified version of the DisplayShelf example. The modified version includes the code to focus the display shelf when the mouse enters it and remove focus from the display shelf when the mouse leaves it. When the shelf is focused it glows to provide a visual indication that it has focus. The modified version adds a TextField to the scene enclosing the shelf. This allows testing of the focus handling of the scene. Without the code which focuses the shelf on mouse enter, after you click on the TextField, it is difficult to get focus back to the DisplayShelf so that it will be able to process key events.

    As DisplayShelf is part of Ensemble and Ensemble is BSD licensed, I guess it's OK to post the modified version to the Oracle forums. The modifications are pretty minimal and all occur in the init method. I just include the whole thing here to make it easy to copy and paste in run (which I think is a useful thing in both questions and answers). 
    /**
 * Copyright (c) 2008, 2012 Oracle and/or its affiliates.
 * All rights reserved. Use is subject to license terms.
 * 
 * Some modifications for mouse handling, styling and default icon usage made by John Smith in 2013.
 *   image license: linkware - backlink to http://www.fasticon.com
 */
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.animation.*;
import javafx.beans.*;
import javafx.beans.property.*;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.collections.ObservableList;
import javafx.event.EventHandler;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.effect.*;
import javafx.scene.image.*;
import javafx.scene.input.*;
import javafx.scene.layout.*;
import javafx.scene.shape.Rectangle;
import javafx.util.Duration;

public class DisplayShelfSample extends Application {
    private static final double WIDTH = 450, HEIGHT = 300;

    String[] imageLocs = {
      "http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Blue-Fish-icon.png",
      "http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Red-Fish-icon.png",
      "http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Yellow-Fish-icon.png",
      "http://icons.iconarchive.com/icons/fasticon/fish-toys/128/Green-Fish-icon.png"
    };
    
    private void init(Stage stage) {
        VBox root = new VBox(10);
        root.setStyle("-fx-background-color: cadetblue;");
        stage.setScene(new Scene(root));
         // load images
        Image[] images = new Image[imageLocs.length + 4];
        for (int i = 0; i < imageLocs.length; i++) {
            images[i] = new Image(imageLocs<em>);<br />
}<br />
// create display shelf<br />
final TextField fishCollectionName = new TextField("Mr Ray");<br />
final DisplayShelf displayShelf = new DisplayShelf(images);<br />
displayShelf.setPrefSize(WIDTH, HEIGHT);<br />
displayShelf.setOnMouseEntered(new EventHandler<MouseEvent>() {<br />
@Override public void handle(MouseEvent t) {<br />
displayShelf.requestFocus();<br />
}<br />
});<br />
displayShelf.setOnMouseExited(new EventHandler<MouseEvent>() {<br />
@Override public void handle(MouseEvent t) {<br />
fishCollectionName.requestFocus();<br />
fishCollectionName.deselect();<br />
}<br />
});<br />
final Glow glow = new Glow();<br />
displayShelf.focusedProperty().addListener(new ChangeListener<Boolean>() {<br />
@Override public void changed(ObservableValue<? extends Boolean> ov, Boolean wasFocused, Boolean focused) {<br />
if (focused) {<br />
displayShelf.setEffect(glow);<br />
} else {<br />
displayShelf.setEffect(null);<br />
} <br />
}<br />
});<br />
HBox.setHgrow(fishCollectionName, Priority.ALWAYS);<br />
root.getChildren().setAll(displayShelf, <br />
HBoxBuilder.create()<br />
.spacing(10)<br />
.style("-fx-padding: 10; -fx-background-color: cadetblue;")<br />
.children(<br />
new Label("Fish school name: "),<br />
fishCollectionName<br />
)<br />
.build()<br />
);<br />
}<br />
<br />
/**<br />
* A ui control which displays a browsable display shelf of images<br />
*/<br />
public static class DisplayShelf extends Region {<br />
private static final Duration DURATION = Duration.millis(500);<br />
private static final Interpolator INTERPOLATOR = Interpolator.EASE_BOTH;<br />
private static final double SPACING = 50;<br />
private static final double LEFT_OFFSET = -110;<br />
private static final double RIGHT_OFFSET = 110;<br />
private static final double SCALE_SMALL = 0.7;<br />
private PerspectiveImage[] items;<br />
private Group centered = new Group();<br />
private Group left = new Group();<br />
private Group center = new Group();<br />
private Group right = new Group();<br />
private int centerIndex = 0;<br />
private Timeline timeline;<br />
private ScrollBar scrollBar = new ScrollBar();<br />
private boolean localChange = false;<br />
private Rectangle clip = new Rectangle();<br />
<br />
public DisplayShelf(Image[] images) {<br />
// set clip<br />
setClip(clip);<br />
// set background gradient using css<br />
setStyle("-fx-background-color: linear-gradient(to bottom," +<br />
" cadetblue 60, darkseagreen 60.1%, cadetblue 100%);");<br />
// style scroll bar color<br />
scrollBar.setStyle("-fx-base: cadetblue; -fx-background: cadetblue;");<br />
// create items<br />
items = new PerspectiveImage[images.length];<br />
for (int i=0; i<images.length; i++) {<br />
final PerspectiveImage item =<br />
items[i] = new PerspectiveImage(images[i]);<br />
final double index = i;<br />
item.setOnMouseClicked(new EventHandler<MouseEvent>() {<br />
public void handle(MouseEvent me) {<br />
localChange = true;<br />
scrollBar.setValue(index);<br />
localChange = false;<br />
shiftToCenter(item);<br />
}<br />
});<br />
}<br />
// setup scroll bar<br />
scrollBar.setMax(items.length-1);<br />
scrollBar.setVisibleAmount(1);<br />
scrollBar.setUnitIncrement(1);<br />
scrollBar.setBlockIncrement(1);<br />
scrollBar.valueProperty().addListener(new InvalidationListener() {<br />
public void invalidated(Observable ov) {<br />
if(!localChange)<br />
shiftToCenter(items[(int)scrollBar.getValue()]);<br />
}<br />
});<br />
// create content<br />
centered.getChildren().addAll(left, right, center);<br />
getChildren().addAll(centered,scrollBar);<br />
// listen for keyboard events<br />
setFocusTraversable(true);<br />
setOnKeyPressed(new EventHandler<KeyEvent>() {<br />
public void handle(KeyEvent ke) {<br />
if (ke.getCode() == KeyCode.LEFT) {<br />
shift(1);<br />
localChange = true;<br />
scrollBar.setValue(centerIndex);<br />
localChange = false;<br />
} else if (ke.getCode() == KeyCode.RIGHT) {<br />
shift(-1);<br />
localChange = true;<br />
scrollBar.setValue(centerIndex);<br />
localChange = false;<br />
}<br />
}<br />
});<br />
// update<br />
update();<br />
}<br />
<br />
@Override protected void layoutChildren() {<br />
// update clip to our size<br />
clip.setWidth(getWidth());<br />
clip.setHeight(getHeight());<br />
// keep centered centered<br />
centered.setLayoutY((getHeight() - PerspectiveImage.HEIGHT) / 2);<br />
centered.setLayoutX((getWidth() - PerspectiveImage.WIDTH) / 2);<br />
// position scroll bar at bottom<br />
scrollBar.setLayoutX(10);<br />
scrollBar.setLayoutY(getHeight()-25);<br />
scrollBar.resize(getWidth()-20,15);<br />
}<br />
<br />
private void update() {<br />
// move items to new homes in groups<br />
left.getChildren().clear();<br />
center.getChildren().clear();<br />
right.getChildren().clear();<br />
for (int i = 0; i < centerIndex; i++) {<br />
left.getChildren().add(items[i]);<br />
}<br />
center.getChildren().add(items[centerIndex]);<br />
for (int i = items.length - 1; i > centerIndex; i--) {<br />
right.getChildren().add(items[i]);<br />
}<br />
// stop old timeline if there is one running<br />
if (timeline!=null) timeline.stop();<br />
// create timeline to animate to new positions<br />
timeline = new Timeline();<br />
// add keyframes for left items<br />
final ObservableList<KeyFrame> keyFrames = timeline.getKeyFrames();<br />
for (int i = 0; i < left.getChildren().size(); i++) {<br />
final PerspectiveImage it = items[i];<br />
double newX = -left.getChildren().size() *<br />
SPACING + SPACING * i + LEFT_OFFSET;<br />
keyFrames.add(new KeyFrame(DURATION,<br />
new KeyValue(it.translateXProperty(), newX, INTERPOLATOR),<br />
new KeyValue(it.scaleXProperty(), SCALE_SMALL, INTERPOLATOR),<br />
new KeyValue(it.scaleYProperty(), SCALE_SMALL, INTERPOLATOR),<br />
new KeyValue(it.angle, 45.0, INTERPOLATOR)));<br />
}<br />
// add keyframe for center item<br />
final PerspectiveImage centerItem = items[centerIndex];<br />
keyFrames.add(new KeyFrame(DURATION,<br />
new KeyValue(centerItem.translateXProperty(), 0, INTERPOLATOR),<br />
new KeyValue(centerItem.scaleXProperty(), 1.0, INTERPOLATOR),<br />
new KeyValue(centerItem.scaleYProperty(), 1.0, INTERPOLATOR),<br />
new KeyValue(centerItem.angle, 90.0, INTERPOLATOR)));<br />
// add keyframes for right items<br />
for (int i = 0; i < right.getChildren().size(); i++) {<br />
final PerspectiveImage it = items[items.length - i - 1];<br />
final double newX = right.getChildren().size() *<br />
SPACING - SPACING * i + RIGHT_OFFSET;<br />
keyFrames.add(new KeyFrame(DURATION,<br />
new KeyValue(it.translateXProperty(), newX, INTERPOLATOR),<br />
new KeyValue(it.scaleXProperty(), SCALE_SMALL, INTERPOLATOR),<br />
new KeyValue(it.scaleYProperty(), SCALE_SMALL, INTERPOLATOR),<br />
new KeyValue(it.angle, 135.0, INTERPOLATOR)));<br />
}<br />
// play animation<br />
timeline.play();<br />
}<br />
<br />
private void shiftToCenter(PerspectiveImage item) {<br />
for (int i = 0; i < left.getChildren().size(); i++) {<br />
if (left.getChildren().get(i) == item) {<br />
int shiftAmount = left.getChildren().size() - i;<br />
shift(shiftAmount);<br />
return;<br />
}<br />
}<br />
if (center.getChildren().get(0) == item) {<br />
return;<br />
}<br />
for (int i = 0; i < right.getChildren().size(); i++) {<br />
if (right.getChildren().get(i) == item) {<br />
int shiftAmount = -(right.getChildren().size() - i);<br />
shift(shiftAmount);<br />
return;<br />
}<br />
}<br />
}<br />
<br />
public void shift(int shiftAmount) {<br />
if (centerIndex <= 0 && shiftAmount > 0) return;<br />
if (centerIndex >= items.length - 1 && shiftAmount < 0) return;<br />
centerIndex -= shiftAmount;<br />
update();<br />
}<br />
}<br />
<br />
/**<br />
* A Node that displays a image with some 2.5D perspective rotation around the Y axis.<br />
*/<br />
public static class PerspectiveImage extends Parent {<br />
private static final double REFLECTION_SIZE = 0.25;<br />
private static final double WIDTH = 200;<br />
private static final double HEIGHT = WIDTH + (WIDTH*REFLECTION_SIZE);<br />
private static final double RADIUS_H = WIDTH / 2;<br />
private static final double BACK = WIDTH / 10;<br />
private PerspectiveTransform transform = new PerspectiveTransform();<br />
/** Angle Property */<br />
private final DoubleProperty angle = new SimpleDoubleProperty(45) {<br />
@Override protected void invalidated() {<br />
// when angle changes calculate new transform<br />
double lx = (RADIUS_H - Math.sin(Math.toRadians(angle.get())) * RADIUS_H - 1);<br />
double rx = (RADIUS_H + Math.sin(Math.toRadians(angle.get())) * RADIUS_H + 1);<br />
double uly = (-Math.cos(Math.toRadians(angle.get())) * BACK);<br />
double ury = -uly;<br />
transform.setUlx(lx);<br />
transform.setUly(uly);<br />
transform.setUrx(rx);<br />
transform.setUry(ury);<br />
transform.setLrx(rx);<br />
transform.setLry(HEIGHT + uly);<br />
transform.setLlx(lx);<br />
transform.setLly(HEIGHT + ury);<br />
}<br />
};<br />
public final double getAngle() { return angle.getValue(); }<br />
public final void setAngle(double value) { angle.setValue(value); }<br />
public final DoubleProperty angleModel() { return angle; }<br />
<br />
public PerspectiveImage(Image image) {<br />
ImageView imageView = new ImageView(image);<br />
imageView.setEffect(ReflectionBuilder.create().fraction(REFLECTION_SIZE).build());<br />
setEffect(transform);<br />
getChildren().addAll(imageView);<br />
}<br />
}<br />
<br />
public double getSampleWidth() { return 495; }<br />
<br />
public double getSampleHeight() { return 300; }<br />
<br />
@Override public void start(Stage primaryStage) throws Exception {<br />
init(primaryStage);<br />
primaryStage.show();<br />
}<br />
public static void main(String[] args) { launch(args); }<br />
}
<pre class="jive-pre"><code class="jive-code">
    · Share on TwitterShare on Facebook
  • 866629
    866629 Member Posts: 50
    Hi J Smith,

    You're a legend! Thank you for your suggestions, advice and perseverance...

    In my case the missing link for me was:

    To request focus when the mouse enters the displayShelf, you can use something like: 
    displayShelf.setOnMouseEntered(new EventHandler<MouseEvent>() {
  @Override public void handle(MouseEvent t) {
      displayShelf.requestFocus();
  }
});
    · Share on TwitterShare on Facebook
This discussion has been closed.