JavaFX Script : Moving Images (Code + Short Video)
posted Sunday, 30 November 2008
We are only a few days from the launch (if you want to be reminded you can set an SMS reminder for December 4th) of a really interesting clientside solution - JavaFX Script. Keep your eyes open for this. For starters I think many people will be pleasantly surprised. Octavian Tanase has already blogged about a new JavaFX Language Reference. I have been anticipating this release for some time and the teams working on this have done an excellent job - I think Java and non-Java developers will be universally impressed with what has been accomplished (I don't doubt that there will be some nay-sayers but the new stuff blows the doors off what was previously available and does some things that competing systems don't have) - and coupled with the new tear-able applet features and better Java Web Start experience it is a great clientside combination. I will be doing a lot of blogging about JavaFX Script - I'm looking forward to learning about the new improvements and features. I was reading Vaibhav's Blog Space and said, "Hey, I did this little exercise over a year ago". And I did ... in the blog, Learning JavaFX : Images and Mouse Events . Okay, but that was then, and this is now - things have changed. Thanks to his help - see his Blog comments - I 've now updated it. I've used his and Subrata's variable names to make it easier to go between the three examples. Here is the latest version with the updated language changes. Catching Mouse Events Within An Image. In this example, the idea is to display an image and move it about the screen using MouseDrag and click on it (MouseClick) to change the image. Here is a quick video (I created with Jing on my Mac) of it, followed by code. Source Code - /* * ImageMoveFXStage.fx * * Created on Nov 29, 2008, 8:11:04 PM */ package org.myimgmove; import javafx.scene.image.Image; import javafx.scene.image.ImageView; import javafx.scene.input.MouseEvent; import javafx.scene.Scene; import javafx.stage.Stage; Stage { title: "My Simple Image Move" width: 500 height:500 var keynum : Number = 0 var imgX : Number = 20 var imgY : Number = 20 var startX : Number = 0 var startY : Number = 0 var distX : Number = 0 var distY : Number = 0 var switchit : Boolean = false var pix = "http://files.blog-city.com/files/aa/1263/p/f/m3.jpg" scene: Scene { content: ImageView { x: bind imgX y: bind imgY image: bind Image { url: pix } onMousePressed: function(e:MouseEvent): Void { startX = e.x; startY = e.y; distX = startX - imgX; distY = startY - imgY; } onMouseDragged: function(e:MouseEvent):Void { imgX = e.x - distX; imgY = e.y - distY; } onMouseClicked: function(e:MouseEvent) { if (switchit == false) { pix = "http://files.blog-city.com//files/aa/1263/p/f/m2.jpg"; switchit = true; } else { pix = "http://files.blog-city.com//files/aa/1263/p/f/m3.jpg"; switchit = false; } } } } } | |
| |
links: digg this del.icio.us technorati