It's a long time being blogging. Actually not done anything new from long time :). Here is one simple concept which some guys asked me. We have provided hyperlink API in JavaFX 1.2 but some of us struggled to open a URL using hyperlink API.
Hmm, 2 ways to do it actually.
No1 : Use the Desktop API of JDK6. It's simple to use. One example is here....
[Read More]
So, finally sweat materialized into product. JavaOne announced the new release of JavaFX 1.2. You are welcome to visit the new cool site of javafx.com.
Also visit the sample section, fully loaded with new samples.
JavaFX 1.2 release is loaded with enormous features. Detailed list here.
Little bit what I know, let me speak about the changes and the corresponding samples.
1. Set of new UI Controls : Buttons, Sliders, Texts ... bla bla... many more. Please figure out in this nice sample :
ProjectManager. Other new samples are also using it like FXAddressBook, StockQuote
2. Chart API : LineChart, AreaChart, BarChart(2D,3D), PieChart(2D,3D), Bubble Chart and many more. Please see the detail in Chart API doc.
Samples : Shopping Mashup, Weather Forecasting
3. Persistence Storage: Resource and Storage class has been added.
Samples: StickyNotes
4. Start-up performance has been increased around 40 percent. No Sample for it :) or we can saw all sample for it :).
5. Lot of changes in Graphics API's
6. O yes, adding of Asynchronous Operations, last time I was struggling running process in Parallel in JavaFX as it is a single threaded application.
Some more things you would like to see :
2 FullScreen Games has been added into samples repo, Reversi Game and SnakesLadders.
IMPORTANT POINT : Many times I talk about RIA, and now if you see the sample repo, there are only few samples which are not using any Web Services. Most of it, are taking Data dynamically from Web Services.
More things to come ....
|
|
|
|
Finally we got this published too. Here is the new article on javafx.com :
http://javafx.com/docs/articles/barchart/
Special thanks to Nancy. She has written most of the articles on JavaFX Production Suite. Our basic idea for this article was to depict the way we can use JavaFX for RIA. One of the common features most of the website using these days are representing the data in graphical mode, very much data in the form of charts and bar graphs.
This one show how petrol cost varies across the globe. Just a fictious data. And another one
Show the usages of Programming languages by developers. For animation please visit the article section of javafx.com
In the previous article, we showed how to make Point-Line Graph with a simple example of temperature arcoss some of the major cities on the globe.
For techinical details, source code, animation and point to point tutorial visit the main site article section (javafx.com -> Overview -> Articles).
|
|
|
|
So, finally we kicked off the new Article section on javafx.com. Go to the "Explore section". Hit "Overview", see "Overview and New Articles". We have 3 articles there right now.
3. Improve startup time for FX Apps.
and many more to come.
I don't know if there is a link where we can request for articles but you can definetely leave a comment here, we will take care of it :).
|
|
|
|
Today, we have launched a new site for JavaFX Application Development. You all are welcome to join http://jfxstudio.org with your FX application. My contribution is very little on this site but in future I am hoping to put more and more samples here.
These are sample list till now :
JavaFX - Swing Binding (this is very good and simple)
Data Visualization From JavaFX
Experimenting with Form Factor
Why you are waiting for :), add your sample in the list. Even if you have a half written or idea of some great sample please share with us, we will work on it further.
|
|
|
|
So, its a short wait. JavaFX for mobile is here. I have tried quite a good number of application on FX Mobile and its running smooth. But why to take my words, download and give a try.
New sample section is updated too + some nice new samples like Calculator, Ripple Effect and many more...
For Student, Developer, Coder or in one word for Learner(we all come in this section), have a look at JavaFX with Passion
Some of the industrial leader committed to FX, have a look : http://www.javafx.com/partners/
So, "The most pervasive and powerful mobile platform is now the most expressive" - Feel it :).
|
|
|
|
Ah, finally I got JNLP working on my blog, thanks to Sergey and Vikram. I am posting some of my samples with JNLP as we can use as repository for JavaFX samples :). These all are old samples but just with JNLP, so that we can run and see the effect.
1. Spring Motion : We can create n no. of instance of Spring class. Detail is here. This example deals with Motion, Gradient and Physics Equations.
2. 3D Button Effect: This example is about PressButton and 3D shadow effect. Detail is here. Basic deals with Shadow Effect, Gradient, and Animation.
3. Glowing Stars in Sky: This example I have created with JavaFX Production Suite. So, we made a home in Photoshop and imported that in JavaFX and then star animation is written in JavaFX. Detail is here. This sample deals with JavaFX Production Suite, Animation, Timelines and Shapes.
4. Colliding Balls: This we have blogged some 4-5 days back. This is again a physics motion with a transparent window. Detail is here. Sample deals with Motion, Equation, Timelines and Gradient. Initial positions and colors are random, so can be wired at sometime + style: StageStyle.TRANSPARENT has been used, so we will not see any frame and so close button will be missing, please press Ctrl + F4 to close the application :). I guess, the good practice is to write esc. key event and call FX.exit().
5. Image Depth support in JavaFX: Image depth setting or in some language we call it Z-Ordering is supported in JavaFX too. Last to last blog is about that, so here is detail. This sample basically deals with toFront and toBack API of Node and Animation(nothing cool in terms of Animation :D).
6. Pendulum Motion with Gravity Controller: This is just the last blog. Detail is here. This sample deals with Motion, Gradient and Complex Equations, Binding Feature. I have changed the code little from the prev. blog. Now, it is transparent, so it will give us a better look :)
Feel free to share your experience. I hope all JNLP should work, if not please let me know. Some more I will add soon, actually all these are older samples, just tried to make repoistory, so that easy to find :).
While writing some of the samples in which we have to play with images, we sometimes has to manage the depth of the images. Like for the Carousel example, every image has a depth. In that example, actually images are not overlapping with each other, so we never need to write the Z-Order concept. But if someone want to write a Carousel or some application in which Images are residing over other images, we need to set the Z-order of Images. Z-Order in literal term means depth-ness of images. JavaFX gracefully provide API's to set the Z-order of images. With a simple call, you can set the images toFront or toBack features.
In this example, I have taken 3 images and try to set the depth-ness of images on the event of Buttons.
First Image on Top Second Image on Top
Third Image on Top
Here is the code to set the Z-Order :
package zorder;
import javafx.scene.Group;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.shape.Rectangle;
import javafx.scene.input.MouseEvent;
import javafx.ext.swing.SwingButton;
var im1 = ImageView {
x: 100
y: 100
image: Image {
url: "{__DIR__}im1.PNG"
}
opacity: 0.8
};
var im2 = ImageView {
x: 130
y: 130
image: Image {
url: "{__DIR__}im2.PNG"
}
opacity: 0.8
};
var im3 = ImageView {
x: 160
y: 160
image: Image {
url: "{__DIR__}im3.PNG"
}
opacity: 0.8
};
var gp = Group {
content:[
im1, im2,im3
]
}
Stage {
title: "Application title"
width: 400
height: 400
scene: Scene {
fill: Color.BLACK
content: [
gp,
SwingButton {
translateX: 10
translateY: 10
text: "Image 1"
action: function() {
im1.toFront();
}
}
SwingButton {
translateX: 90
translateY: 10
text: "Image 2"
action: function() {
im2.toFront();
}
}
SwingButton {
translateX: 170
translateY: 10
text: "Image 3"
action: function() {
im3.toFront();
}
}
]
}
}
From next blog, I will use applet or JNLP in place of images, as suggested by Dmitry in last blog. Pictures make it bulky and uneasy to load. But I was getting some problem in deploying the application on Sun blog which will be rectified soon.
Here is an example of one more physics system - Colliding Balls. This is one of the most common examples we find everywhere. I have written this on transparent window. And so, if we increase the width and height of the stage + width, height variable in MotionBall.fx, it will give us a feeling like FlyingSaucer which keep on running all the way on Desktop. Here it looks on top of my code :D.
So, the netbeans window on back and application is running on top of it. Actually dragged out of the browser and running. Just for adding information, we can run an application from netbeans on browser by Properties -> Run -> Run in Browser. Remeber to set the size of applet correct else the application display will not full.
Initially position in this application has been generated randomly + Damping motion has been applied. So, in sometime all the balls will settle down on base. These all parameters can be adjusted in the file. Ball Effect has been generated as usual by Gradient Effect. Some variable may be unused because of future plan :D.
Here goes the code:
MotionBall.fx :
package collidingballs; import java.lang.*; import javafx.scene.CustomNode; import javafx.scene.Group; import javafx.scene.Node; import javafx.scene.paint.*; import javafx.scene.shape.*; var spring : Number = 0.05; var gravity : Number = 0.05; var width : Number = 240; var height: Number = 320; var start: Number = 0; public class MotionBall extends CustomNode { public var x: Number; public var y: Number; public var velocityX: Number; public var velocityY: Number; public var mass: Number; public var radius: Number; public var color: Color; public function collision( balls: MotionBall[]) { for(ball in balls) { var dx : Number = ball.x - x; var dy : Number = ball.y - y; var distance : Number = Math.sqrt( dx * dx + dy * dy ); var minDist : Number = ball.radius + radius; if( distance < minDist ) { var angle : Number = Math.atan2( dy, dx ); var tx : Number = x + Math.cos( angle ) * minDist; var ty : Number = y + Math.sin( angle ) * minDist; var ax : Number = ( tx - ball.x ) * spring; var ay : Number = ( ty - ball.y ) * spring; velocityX -= ax; velocityY -= ay; ball.velocityX += ax; ball.velocityY += ay; } } } public function move(balls: MotionBall[]) { velocityY += gravity; x += velocityX; y += velocityY; if( x + radius >= width ) { x = width + start - radius; velocityX *= - 0.9; } if( x - radius <= start ) { x = start + radius; velocityX *= -0.9; } if( y + radius >= height ) { y = height - radius; velocityY *= -0.9; } if( y - radius <= 40 ) { y = 40 + radius; velocityY *= -0.9; } } public override function create(): Node { return Group { content: [ Circle { centerX: bind x, centerY: bind y, radius: bind radius fill: bind RadialGradient { centerX: 0.25 centerY: 0.25 proportional: true stops: [ Stop { offset: 0.0 color: color }, Stop { offset: 1.0 color: Color.BLACK }, ] } } ] }; }
package collidingballs; import collidingballs.MotionBall; import java.util.Random; import javafx.animation.KeyFrame; import javafx.animation.Timeline; import javafx.scene.paint.Color; import javafx.scene.Scene; import javafx.stage.Stage; import javafx.stage.StageStyle;
var balls: MotionBall[]; var rnd : Random = new Random(); for( i in [1..5] ) { insert MotionBall { x: rnd.nextInt( 240 ), y: rnd.nextInt( 320 ), radius: 30 color: Color.rgb(rnd.nextInt(255),rnd.nextInt(255),rnd.nextInt(255)) } into balls; } // timeline for colliding balls var t_collide = Timeline { repeatCount: Timeline.INDEFINITE keyFrames: [ KeyFrame { time: 30ms action: function() { for(ball in balls) { ball.collision(balls); ball.move(balls); } } } ] } t_collide.play(); Stage { title: "Collding Balls" style: StageStyle.TRANSPARENT width: 240 height: 320 scene: Scene { fill: Color.TRANSPARENT content: [ balls ] } }
I tried to write a very rough Tool Tip feature. Actually in JavaFX, we can write our own cool Tool tip. But in the meantime, we need to take care of boundary conditions of Tool tip. Here how it looks :
A shadow effect.
Right now its just a bad code, we will make it good in next post :D. Here it is :
package tooltip;
import javafx.scene.CustomNode;
import javafx.scene.effect.DropShadow;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.ShapeIntersect;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
public class ToolTip extends CustomNode {
public var x: Number;
public var y: Number;
//useless - content should decide
public var width: Number = 100;
public var height: Number = 50;
//useless-Tooltip instance should be
//added dynamically
public var op: Number = 0.0;
public var content: String;
public override function create(): Node {
return Group {
content: [
ShapeIntersect {
effect: DropShadow {
offsetY: -5
offsetX: -5
color: Color.color(0.4, 0.4, 0.4)
};
translateX: bind x
translateY: bind y
opacity: bind op
stroke: Color.GRAY
strokeWidth: 2
fill: Color.GREEN
a: [
Rectangle {
arcHeight:10
arcWidth:10
x: 0
y: 0
width: bind width
height: bind height
}
Rectangle {
rotate: 45
x: 40
y: 40
width: bind width / 5
height: bind 2 * height / 5
}
]
},
Text {
font: Font {
size: 14
}
translateX: bind x
translateY: bind y
opacity: bind op
x: 10,
y: 12
content: bind content
}
]
};
}
}
Main Code for this example :
package tooltip;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;
import tooltip.ToolTip;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.input.MouseEvent;
var tt = new ToolTip;
var rect = Rectangle {
x: 10,
y: 10
width: 180,
height: 70
stroke: Color.WHITE
strokeWidth: 4
fill: Color.YELLOWGREEN
opacity: 0.8
};
var text = Text {
font: Font {
size: 14
name: "Arial"
}
x: 14,
y: 30
content: "HelloWorld - Beginning of a \nnew technology always say\n - Hello World "
};
var gp = Group {
translateX: 60
translateY: 260
onMouseMoved: function( e: MouseEvent ):Void {
tt.x = rect.x + tt.width;
tt.y = rect.y - tt.height - 20;
tt.op = 0.8;
tt.content = "You can see \n the help of \nHelloWorld !";
}
onMouseExited: function( e: MouseEvent ):Void {
tt.op = 0.0;
}
content: [
rect, text,tt
]
}
Stage {
title: "Tool-Tip"
width: 450
height: 480
scene: Scene {
fill:Color.BLACK
content:[
gp
]
}
}⁞
If you are writing a generic tool tip take care of :
1. Scene size - it should not go off screen.
2. Height and Width of tool tip - Most of the tool tip has unit height but it depends on us, we can set it.
If you are in JavaFX and looking for more samples, please visit : https://javafxexamples.dev.java.net/
You can see nice projects like RSSReader, GameScreenFlow and many more. Welcome to the party :).
Hi, I am Vaibhav. I am working in Java and JavaFX group. This blog is about writing simple code and application in Java and newly launched JavaFX. I am working in Bangalore, India. Today's Page Hits: 52
-d64 3.0 3d 6u10 animation api applet arrays article bean binding blog bojug book bug builder calendar classloader code compiler complier core days depth desktop download drag earth effect example examples feature features final finalization firefox flickr framwork gridlayout guassian hyperlink image internals java javac javacompiler javafx javafx.com javahome javaone jconsole jdk jdk5 jdk6 jfilechooser jnlp jre jvm maps mobile motion netbeans openjdk optimization perpective photoshop physics plug-in presentation production project reflection registry ria runtime sample samples sdk search secondlife shapeinteresct site solaris sorting suggestions suite sun swing synchronized talk tech timeline tomcat tools ui web webservice windows ws yahoo
This theme brought to you by the Sun Green Team.
Go Green!
Nice article :O) , rather on *nx machine i was usi...
:D Thank you. your is complicated one :)
It seems that java.awt.Desktop.getDesktop() method...
Nice. I guess in place of bug you can move it into...
Good tip. Also you can try the more complex but fl...
ah i see. yes, this also sounds good :). Thanks fo...
Vaibhav,
Thanks for posting this. Per your sugg...