Exception occurred when iterating though for loop that includes mouseEvent action - for-loop

the following exception message appears when I iterate using NORMAL for-loop that includes mouseEvent action through radioButtons.
Message:
Exception in thread "JavaFX Application Thread" java.lang.ArrayIndexOutOfBoundsException
But when I iterate using for-each loop, there is no problem!
please help me, thank you
Concerned code part:
HBox p1 = new HBox();
RadioButton Red = new RadioButton("RED");
RadioButton Blue = new RadioButton("Blue");
RadioButton Black = new RadioButton("Black");
ToggleGroup tg = new ToggleGroup();
Red.setToggleGroup(tg);
Blue.setToggleGroup(tg);
Black.setToggleGroup(tg);
RadioButton [] array = {Red,Blue,Black};
p1.getChildren().addAll(Red,Blue,Black);
i = 0;
for(i = 0; i< array.length; i++){
array[i].setOnAction(e->{
System.out.println(array[i].getText());
});
}

I'm guessing, because your question is incomplete, that you made the loop index i an instance variable, for some reason. I.e. you have something like:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.RadioButton;
import javafx.scene.control.ToggleGroup;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
public class Demo extends Application {
// Guessing:
private int i ;
#Override
public void start(Stage primaryStage) throws Exception {
HBox p1 = new HBox();
RadioButton red = new RadioButton("RED");
RadioButton blue = new RadioButton("Blue");
RadioButton black = new RadioButton("Black");
ToggleGroup tg = new ToggleGroup();
red.setToggleGroup(tg);
blue.setToggleGroup(tg);
black.setToggleGroup(tg);
RadioButton[] array = { red, blue, black };
p1.getChildren().addAll(red, blue, black);
i = 0;
for (i = 0; i < array.length; i++) {
array[i].setOnAction(e -> {
System.out.println(array[i].getText());
});
}
Scene scene = new Scene(p1, 400, 250);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
Application.launch(args);
}
}
Here i is a property of the Demo instance (i.e. the application instance on which start() is invoked). In the start() method, i is initialized to 0 and then incremented each time you iterate the for loop. The for loop exits when i is no longer less than array.length (which is 3), so when the for loop exits, i==3.
Consequently, when you press one of the buttons, the code
System.out.println(array[i].getText());
is executed. The value of i hasn't changed since the completion of the for loop, so this is equivalent to
System.out.println(array[3].getText());
and this throws an IndexOutOfBoundsException, because the value indexes in the array are 0, 1, and 2. Indeed, the complete error message is
Exception in thread "JavaFX Application Thread" java.lang.ArrayIndexOutOfBoundsException: Index 3 out of bounds for length 3
Instead, you need to use a local variable for the index in the loop:
for (int i = 0; i < array.length; i++) {
array[i].setOnAction(e -> { /* ... */ });
}
The problem now is that the lambda expression in the event handler cannot access the local variable i because it is not final (or "effectively final"). The solution to this is to "capture" the value of i on each iteration of the loop in a final variable:
for (int i = 0; i < array.length; i++) {
final int index = i ;
array[i].setOnAction(e -> {
System.out.println(array[index].getText());
});
}
Of course, you don't actually need the index; you just need the element of the array, so you could capture that instead:
for (int i = 0; i < array.length; i++) {
final RadioButton button = array[i] ;
button.setOnAction(e -> {
System.out.println(button.getText());
});
}
This code is completely identical (in the sense that the compiler converts the following to the same thing) to:
for (RadioButton button : array) {
button.setOnAction(e -> {
System.out.println(button.getText());
});
}
which is by far the preferred form for a for loop.
Here's a fully-cleaned and working version of the code:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.RadioButton;
import javafx.scene.control.ToggleGroup;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
public class Demo extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
HBox p1 = new HBox();
RadioButton red = new RadioButton("RED");
RadioButton blue = new RadioButton("Blue");
RadioButton black = new RadioButton("Black");
ToggleGroup tg = new ToggleGroup();
RadioButton[] buttons = { red, blue, black };
tg.getToggles().setAll(buttons);
p1.getChildren().addAll(buttons);
for (RadioButton button : buttons) {
button.setOnAction(e -> {
System.out.println(button.getText());
});
}
Scene scene = new Scene(p1, 400, 250);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
Application.launch(args);
}
}

Related

Whenever I use the Text object in JavaFX, all object overlap the text, even subsequent text objects

Update: I am using JavaFX 13
This problem happens across all my JavaFX programs, but this is one example. A user is supposed to be able to select options for a custom milkshake then get a receipt when they checkout. All of the object referencing and MVC works as it is supposed to, but when displaying the information using Text objects (javafx.scene.text.Text), they are overlapped by other objects around them. In the second and third images, I have the occurrences circled.
First launch of the program. The first image
Here is the code for the text pane in the second image:
After adding a few selections. The second Image
import Controllers.Controller;
import Entities.Milkshake;
import Interfaces.Observer;
import javafx.scene.control.Button;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.VBox;
import javafx.scene.text.Text;
import java.util.ArrayList;;
public class TextSummaryView extends AnchorPane implements Observer<Milkshake> {
private Milkshake model;
private Controller controller;
private VBox iceCreamOptions;
private VBox toppingOptions;
private Text totalCost;
private final double minHeight = 100.0;
private final double minWidth = 50.0;
public TextSummaryView() {
super();
iceCreamOptions = new VBox();
toppingOptions = new VBox();
totalCost = new Text("$0.00");
Button checkout = new Button("Checkout");
checkout.setOnAction(e -> controller.checkout());
Text iceCreamText = new Text("Click '-' to remove\nCurrent Ice Cream Selections:");
Text toppingText = new Text("Current Topping Selections");
iceCreamOptions.getChildren().add(iceCreamText);
toppingOptions.getChildren().add(toppingText);
this.getChildren().addAll(checkout, iceCreamOptions, toppingOptions, totalCost);
// Setting position of elements
setBottomAnchor(checkout, this.getHeight()-5.0);
setRightAnchor(checkout, this.getWidth()-5.0);
setLeftAnchor(totalCost, 5.0);
setBottomAnchor(totalCost, this.getHeight()-5.0);
setTopAnchor(iceCreamOptions, 5.0);
setLeftAnchor(iceCreamOptions, 5.0);
setTopAnchor(toppingOptions, Math.max(40.0, iceCreamOptions.getHeight() + 10.0));
setLeftAnchor(toppingOptions, 5.0);
this.setMinHeight(minHeight);
this.setMinWidth(minWidth);
}
/**
* Sets what the observer will watch
* #param obs An object that extends the Observable interface
*/
public void setTarget(Milkshake obs){
this.model = obs;
}
/**
* Removes the object from target
*/
public void removeTarget(){
this.model = null;
}
/**
* Called by observables to update the observer's data
*/
public void update(){
this.iceCreamOptions.getChildren().remove(1, this.iceCreamOptions.getChildren().size());
this.toppingOptions.getChildren().remove(1, this.toppingOptions.getChildren().size());
// Get Data
ArrayList<String> iceCreams = model.getIceCreams();
ArrayList<String> toppings = model.getToppings();
// Update the ice cream selections
int iceCreamIndex = 0;
for (String ic: iceCreams) {
AnchorPane selection = new AnchorPane();
Button removeButton = new Button("-");
Text iceCream = new Text(ic + ":");
Text cost = new Text("$1.00");
final int iceIndexFin = iceCreamIndex;
removeButton.setOnAction(e -> controller.removeIceCream(iceIndexFin));
selection.getChildren().addAll(removeButton, iceCream, cost);
setLeftAnchor(removeButton, 5.0);
setLeftAnchor(iceCream, 50.0);
setTopAnchor(iceCream, selection.getHeight()/3);
setLeftAnchor(cost, selection.getWidth()-5.0);
setTopAnchor(cost, selection.getHeight()/3);
this.iceCreamOptions.getChildren().add(selection);
iceCreamIndex ++;
}
// Update the topping selections
int toppingIndex = 0;
for (String top: toppings) {
AnchorPane selection = new AnchorPane();
Button removeButton = new Button("-");
Text topping = new Text(top + ":");
Text cost = new Text("$0.50");
final int topIndexFin = toppingIndex;
removeButton.setOnAction(e -> controller.removeTopping(topIndexFin));
selection.getChildren().addAll(removeButton, topping, cost);
setLeftAnchor(removeButton, 5.0);
setLeftAnchor(topping, 50.0);
setTopAnchor(topping, selection.getHeight()/3);
setLeftAnchor(cost, selection.getWidth()-5.0);
setTopAnchor(cost, selection.getHeight()/3);
this.toppingOptions.getChildren().add(selection);
toppingIndex ++;
}
setTopAnchor(iceCreamOptions, 5.0);
setLeftAnchor(iceCreamOptions, 5.0);
setTopAnchor(toppingOptions, Math.max(40.0, iceCreamOptions.getHeight() + 10.0));
setLeftAnchor(toppingOptions, 5.0);
this.totalCost.setText( "$" + this.model.getCost() + "0");
}
public void setController(Controller controller){
this.controller = controller;
}
}
Here is the code for the checkout screen. Pressing the checkout button. All are different text objects in a VBox. The third image
import Entities.Milkshake;
import javafx.application.Platform;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.VBox;
import javafx.scene.text.Text;
import javafx.stage.Stage;
import java.util.ArrayList;
public class CheckoutView extends Stage {
VBox root = new VBox();
public CheckoutView(Milkshake ms) {
super();
// Get Data
ArrayList<String> iceCreams = ms.getIceCreams();
ArrayList<String> toppings = ms.getToppings();
// Update the ice cream selections
int iceCreamIndex = 0;
for (String ic: iceCreams) {
AnchorPane selection = new AnchorPane();
Text iceCream = new Text(ic + ":");
Text cost = new Text("$1.00");
final int iceIndexFin = iceCreamIndex;
selection.getChildren().addAll(iceCream, cost);
AnchorPane.setLeftAnchor(iceCream, 50.0);
AnchorPane.setLeftAnchor(cost, this.getWidth()-5.0);
this.root.getChildren().add(selection);
iceCreamIndex ++;
}
// Update the topping selections
int toppingIndex = 0;
for (String top: toppings) {
AnchorPane selection = new AnchorPane();
Text topping = new Text(top + ":");
Text cost = new Text("$0.50");
selection.getChildren().addAll(topping, cost);
AnchorPane.setLeftAnchor(topping, 50.0);
AnchorPane.setLeftAnchor(cost, this.getWidth()-5.0);
this.root.getChildren().add(selection);
toppingIndex ++;
}
AnchorPane total = new AnchorPane();
Text costTotal = new Text("$" +ms.getCost() + "0");
total.getChildren().add(costTotal);
AnchorPane.setLeftAnchor(total, this.getMaxWidth()-costTotal.getX());
BorderPane exitOptions = new BorderPane();
Button pay = new Button("Finish and Pay");
Button ret = new Button("Return to Order");
pay.setOnAction(e -> Platform.exit());
ret.setOnAction(e -> this.close());
exitOptions.setLeft(ret);
exitOptions.setRight(pay);
root.getChildren().add(exitOptions);
this.setTitle("Checkout");
this.setScene(new Scene(root));
}
public static void checkout(Milkshake ms) {
CheckoutView check = new CheckoutView(ms);
check.show();
}
}
Thank you in advance for all your help! :)

JavaFX: When the user presses the mouse within a panel, its color should be changed randomly?

I am having trouble with my code. I had to make a chessboard for a previous problem. Now I have to use that same code to display 8X8 grids which are initially white. Once clicked on, they should, they should change color randomly. Can someone please help, here is a copy of my code.
import javafx.application.Application;
import javafx.geometry.HPos;
import javafx.geometry.VPos;
import javafx.scene.Scene;
import javafx.scene.control.Control;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Priority;
import javafx.scene.layout.RowConstraints;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import javafx.scene.layout.Pane;
import javafx.scene.input.MouseEvent;
import javafx.scene.shape.Rectangle;
import javafx.event.EventHandler;
import javafx.scene.paint.Paint;
import javafx.scene.paint.Color;
public class ChessBoardColor extends Application {
#Override
public void start(Stage primaryStage) {
GridPane pane = new GridPane();
int size = 8 ;
for (int row = 0; row < size; row++) {
for (int color = 0; color < size; color ++) {
StackPane panel = new StackPane();
String boxcolor ;
if ((row + color) % 2 == 0) {
boxcolor = "red";
} else {
boxcolor = "black";
}
panel.setStyle("-fx-background-color:#FFFFFF;");
pane.add(panel, color, row);
pane.setOnMouseClicked(e -> {
pane.setStroke();
});
}
}
}
for (int i = 0; i < size; i++) {
pane.getColumnConstraints().add(new ColumnConstraints(5, Control.USE_COMPUTED_SIZE, Double.POSITIVE_INFINITY, Priority.ALWAYS, HPos.CENTER, true));
pane.getRowConstraints().add(new RowConstraints(5, Control.USE_COMPUTED_SIZE, Double.POSITIVE_INFINITY, Priority.ALWAYS, VPos.CENTER, true));
}
primaryStage.setScene(new Scene(pane, 500, 500));
primaryStage.show();
public static void main(String[] args) {
launch(args);
}
}
look at this code simply find the node where the user click and apply style like you know:
public class ChessBoardColor extends Application {
#Override
public void start(Stage primaryStage) {
GridPane pane = new GridPane();
int size = 8;
for (int row = 0; row < size; row++) {
for (int color = 0; color < size; color++) {
StackPane panel = new StackPane();
String boxcolor; //initial box color = "white" if you want it white initialy
if ((row + color) % 2 == 0) {//I suppose it's your chessboard color
boxcolor = "red";
} else {
boxcolor = "black";
}
panel.setStyle("-fx-background-color:" + boxcolor + ";");
pane.add(panel, color, row);
pane.setOnMouseClicked(e -> {
Node target = (Node) e.getTarget(); // you find where the user click
if (target instanceof StackPane) {
String radomColor = getRandomColor(); // choose a random color
((StackPane) target).setStyle("-fx-background-color:" + radomColor + ";"); // apply it like you already know
}
});
}
}
for (int i = 0; i < size; i++) {
pane.getColumnConstraints().add(new ColumnConstraints(5, Control.USE_COMPUTED_SIZE,
Double.POSITIVE_INFINITY, Priority.ALWAYS, HPos.CENTER, true));
pane.getRowConstraints().add(new RowConstraints(5, Control.USE_COMPUTED_SIZE, Double.POSITIVE_INFINITY,
Priority.ALWAYS, VPos.CENTER, true));
}
primaryStage.setScene(new Scene(pane, 500, 500));
primaryStage.show();
}
private String getRandomColor() { // simple random color generator
String colors[] = new String[] {"blue", "yellow", "green", "purple"};
Random ran = new Random();
int randomColourIndex = ran.nextInt(4);
return colors[randomColourIndex];
}
public static void main(String[] args) {
launch(args);
}
}

TableView#scrollTo(int index) but show row in bottom

I would like to scroll down to a specific row in a TableView. TableView#scrollTo(int index) puts the row on the specified index in the top of the view, but I would like the specified index to be in the bottom of the view. This is because the specified row will always be the row below the currently focused row for me, and I just want to scroll as much as needed to show that next row. I.e: I want the behaviour you get when you change the row selection by using the UP and DOWN keys. Is this possible? Here's an MCVE:
import javafx.application.Application;
import javafx.beans.property.SimpleStringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class TestScrollToTable extends Application {
#Override
public void start(Stage stage) {
TableView<ObservableList<String>> table = new TableView<>();
table.getSelectionModel().setCellSelectionEnabled(true);
ObservableList<String> columns = FXCollections.observableArrayList();
for (int i = 0; i < 10; i++) {
columns.add("column " + i);
}
ObservableList<ObservableList<String>> data = FXCollections.observableArrayList();
for (int rowIndex = 0; rowIndex < 100; rowIndex++) {
ObservableList<String> row = FXCollections.observableArrayList();
for (int colIndex = 0; colIndex < columns.size(); colIndex++) {
row.add("row" + rowIndex + "col" + colIndex);
}
data.add(row);
}
for (int colIndex = 0; colIndex < columns.size(); colIndex++) {
final int j = colIndex;
TableColumn<ObservableList<String>, String> col = new TableColumn<ObservableList<String>, String>(
columns.get(colIndex));
col.setCellValueFactory(param -> new SimpleStringProperty(param.getValue().get(j)));
table.getColumns().add(col);
}
table.setItems(data);
Button scrollToButton = new Button("Focus next row");
scrollToButton.setOnAction(e -> {
if (table.getFocusModel().getFocusedItem() != null) {
int nextIndex = table.getFocusModel().getFocusedIndex()+1;
table.getFocusModel().focus(nextIndex);
table.scrollTo(nextIndex);
}
});
VBox root = new VBox();
root.getChildren().addAll(table, scrollToButton);
stage.setScene(new Scene(root));
stage.show();
}
public static void main(String[] args) {
launch();
}
}
you can use this function
private void scrollToUpAndBottom(int indexToScroll, VirtualFlow vf) {//scroll to up
if (indexToScroll < vf.getFirstVisibleCell().getIndex()) {
TableView.this.scrollTo(indexToScroll);
} else if (indexToScroll > vf.getLastVisibleCell().getIndex()) {//scroll to down
int delta = vf.getLastVisibleCell().getIndex() - vf.getFirstVisibleCell().getIndex();
TableView.this.scrollTo(indexToScroll - delta + 2); // +2 is margin
}
}
to get virtualFlow from TableView, you can use TableViewSkin which has a protected attribute "flow" so you have to create your own skin which make this attribute pulic
public VirtualFlow getVirtualFlow(){ return flow;}

JLabel array for a checkerboard design

I simply cannot get my checkerboard graphic to appear using JLabels. I am not sure why it is not working. I did get it to work when I created it without using arrays, but the code was extremely long. What am I doing wrong?
import javax.swing.*;
import java.awt.*;
public class GuiProgramTwo_1 extends JFrame {
public GuiProgramTwo_1() {
JPanel p1 = new JPanel();
p1.setLayout(new GridLayout(6, 6));
JLabel[] array = new JLabel[69];
JLabel a1 = new JLabel();
a1.setBackground(Color.BLACK);
a1.setOpaque(true);
JLabel a2 = new JLabel();
a2.setBackground(Color.WHITE);
a2.setOpaque(true);
array[0] = new JLabel();
array[0] = a1;
p1.add(array[0]);
for(int i = 1; i < 69; i++) {
int x = i - 1;
array[i] = new JLabel();
if(array[x] == a1) {
array[i] = a2;
}
else {
array[i] = a1;
}
p1.add(array[i]);
}
add(p1, BorderLayout.CENTER);
}
public static void main(String[] args) {
GuiProgramTwo_1 frame = new GuiProgramTwo_1();
frame.setTitle("ShowFlowLayout");
frame.setSize(575, 400);
frame.setLocationRelativeTo(null);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);
}
}
You need a unique JLabel for each position in your layout, you cannot reuse components and have them displayed in different areas of the application at the same time.
Also, your construction of your GridLayout may be wrong, you are specifying 6 rows and 6 columns which specifies room for 36 components, but it looks like you want to add a total of 69 JLabels.
p1.setLayout(new GridLayout(6, 6));

gwt ClientBundle context.drawImage doesn't show image? my 2D engine

My code has not errors but I don't see the image. The image is located at the same place as the ClientBundle file is. Sorry for a chunk of code. In fact I am newbie in GWT (and in Java as well). And I teach myself. I made debugging and I saw the image was loaded, all classes was initialized, but the canvas was empty so far. I use NetBeans IDE 7.3.
I will be happy if somebody could give me any advice how to launch this code.
Thanks you upfront!
______ResourseInspector (nothing special)______________
The image is located at the same folder.
package info.alexpi.client.engine2D;
import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.ImageResource;
public interface ResourseInspector extends ClientBundle {
public static final ResourseInspector INSTANCE = GWT.create(ResourseInspector.class);
#ClientBundle.Source("image1.png")
//GWT.getHostPageBaseURL() or GWT.getModuleBaseURL() - By the way, why it's not allowed to use here?
ImageResource Img();
}
_____Point2D____
package info.alexpi.client.engine2D;
public class Point2D {
public int x = 0;
public int y = 0;
}
___Rect2D____
package info.alexpi.client.engine2D;
public class Rect2D {
public int x;
public int y;
public int w;
public int h;
public Rect2D(){
x = 0;
y = 0;
w = 100;
h = 100;
}
public Rect2D(int x, int y, int w, int h){
this.x = x;
this.y = y;
this.w = w;
this.h = h;
}
}
______ImgElement2D_______
I need this class to keep width and high of the original image
package info.alexpi.client.engine2D;
import com.google.gwt.dom.client.ImageElement;
import com.google.gwt.event.dom.client.ErrorEvent;
import com.google.gwt.event.dom.client.ErrorHandler;
import com.google.gwt.event.dom.client.LoadEvent;
import com.google.gwt.event.dom.client.LoadHandler;
import com.google.gwt.resources.client.ImageResource;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
public class ImgElement2D {
private Rect2D rect = new Rect2D();
private ImageElement imgElement;
private Image tempImg;
public ImgElement2D(String imgAddress){
try {
Image.prefetch(imgAddress);
tempImg = new Image(imgAddress);
// SafeUri fromString = UriUtils.fromString(imgAddress);
// tempImg.setUrl(fromString); //SafeUri url
// this method doesn't trigger
tempImg.addLoadHandler(new LoadHandler(){
#Override
public void onLoad(LoadEvent event) {
imgElement = (ImageElement) tempImg.getElement().cast();
rect.x = 0;
rect.y = 0;
rect.h = tempImg.getHeight();
rect.w = tempImg.getWidth();
//RootPanel.get().remove(image);
}
});
public ImgElement2D(ImageResource resource){
tempImg = new Image(resource);
rect.x = 0;
rect.y = 0;
rect.h = tempImg.getHeight();
rect.w = tempImg.getWidth();
imgElement = (ImageElement) tempImg.getElement().cast();
}
______Sprite2D_______
package info.alexpi.client.engine2D;
import com.google.gwt.canvas.dom.client.Context2d;
import com.google.gwt.dom.client.ImageElement;
public class Sprite2D {
private Point2D pos = new Point2D();
private ImgElement2D img;
private double scale;
private Rect2D rect = new Rect2D();
public Sprite2D(ImgElement2D image2D){
this.img = image2D;
this.rect = image2D.getRect();
this.scale = 1.0;
this.pos.x = 0;
this.pos.y = 0;
}
public void setImage(ImgElement2D image2D){
this.img = image2D;
}
public ImgElement2D getImgElement(){
return this.img;
}
________________DRAWING ______________________
public void draw(Context2d context){
ImageElement el = this.img.getImg();
if( el != null) {
context.drawImage(el, rect.x, rect.y,
rect.w, rect.h, pos.x, pos.y, rect.w*scale, rect.h*scale);
}
}
_____________Main entry point_________________
package info.alexpi.client;
import com.google.gwt.canvas.client.Canvas;
import com.google.gwt.canvas.dom.client.Context2d;
import com.google.gwt.canvas.dom.client.CssColor;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import info.alexpi.client.engine2D.ImgElement2D;
import info.alexpi.client.engine2D.Point2D;
import info.alexpi.client.engine2D.Rect2D;
import info.alexpi.client.engine2D.ResourseInspector;
import info.alexpi.client.engine2D.Sprite2D;
import java.util.ArrayList;
import java.util.List;
public class gwtEntryPoint implements EntryPoint {
static final String holderId = "canvasholder";
static final String upgradeMessage = "Your browser does not support the HTML5 Canvas. "
+ "Please upgrade your browser to view this demo.";
Canvas canvas;
Canvas backBuffer;
Context2d context;
Context2d backBufferContext;
final CssColor redrawColor = CssColor.make("rgba(255,255,255,0.0)");
// canvas size, in px
static final int height = 712;
static final int width = 800;
boolean isFirstLoading = true;
// mouse positions relative to canvas
int mouseX, mouseY;
//timer refresh rate, in milliseconds
static final int refreshRate = 25;
String imgAddress = GWT.getHostPageBaseURL() + "resources/images/Anthony-Catwalk-Dress.png";
//String imgAddress = "resources/images/image1.png"; //Second place of image
String cssAddress = GWT.getHostPageBaseURL() + "resources/myStyle.css";
double scale = 0.7;
List<Sprite2D> spriteList = new ArrayList<Sprite2D>();
ImgElement2D im;
public gwtEntryPoint() {
}
// init the canvases-------------------------------------------------------------------------
void initCanvas(){
canvas = Canvas.createIfSupported();
backBuffer = Canvas.createIfSupported();
if (canvas == null) {
RootPanel.get(holderId).add(new Label(upgradeMessage));
return;
}
canvas.setWidth(width + "px");
canvas.setHeight(height + "px");
canvas.setCoordinateSpaceWidth(width);
canvas.setCoordinateSpaceHeight(height);
backBuffer.setCoordinateSpaceWidth(width);
backBuffer.setCoordinateSpaceHeight(height);
canvas.setStyleName(cssAddress); //apply css style
canvas.getElement().getStyle().setProperty("border", "3px solid #00F");
RootPanel.get(holderId).add(canvas);
context = canvas.getContext2d();
backBufferContext = backBuffer.getContext2d();
}
// draw backBuffer ----------------------------------------------------------------------------
public void drawBuffer(Context2d back, Context2d front){
front.drawImage(back.getCanvas(), 0, 0);
}
void initElements(){
im = new ImgElement2D(ResourseInspector.INSTANCE.Img()); //ImageResource loading
Sprite2D sprite = new Sprite2D(im);
Rect2D r = new Rect2D(0,0, 228, 720); //man
sprite.setRect(r);
spriteList.add(sprite);
//im = new ImgElement2D(imgAddress); //another way of image loading (doesn't trigger)
sprite = new Sprite2D(im);
r = new Rect2D(226,12, 230, 283); //white T-shirt
sprite.setRect(r);
spriteList.add(sprite);
}
void doUpdate(){
// update the back canvas
backBufferContext.setFillStyle(redrawColor);
backBufferContext.fillRect(0, 0, width, height);
for(int x = 0; x < spriteList.size(); ++x){
spriteList.get(x).draw(backBufferContext);
// spriteList.get(x).draw(context);
}
drawBuffer(backBufferContext, context);
}
// init Assets & Timer -----------------------------------------------------------------------
void initAssets(){
initElements();
final Timer timer = new Timer() {
#Override
public void run() {
doUpdate();
}
};
timer.scheduleRepeating(refreshRate);
}
#Override
public void onModuleLoad() {
initCanvas();
initAssets();
}
}
See https://code.google.com/p/google-web-toolkit/issues/detail?id=8180
This is because, currently, new Image(imageResource) uses a blank GIF and puts the ImageResource as a background image. This is fixed in master and will ship in GWT 2.6 later this year.
The workaround is to use new Image(imageResource.getSafeUri()). It's not safe to do it in IE6/7 where a sprited image is used, but canvas is not supported there so it's not really an issue in this case (note that you could configure any permutation to use a sprited image rather than a data: URL, so technically it's not safe to use getSafeUri() in any browser; GWT 2.6 will add an isStandalone() method to tell you when it's safe to use it, and this is how new Image(imageResource) will be fixed)

Resources