Wednesday Jun 03, 2009
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 ....
Friday May 29, 2009
Straightaway to JavaOne : http://java.sun.com/javaone/
Best wished to all the presenters and attendees. JavaOne going to rock :).
PS: Sorry, no technical writing in this post.
Friday May 22, 2009
Extremely sorry for not responding to the question in few of the last blog posts. Here is the Yahoo Map navigation. I started liking Yahoo Web Service, it is so cool.
Please use your App-ID, if you are putting this code somewhere else, because this code uses default Yahoo Key. Now, any web service work need these API use :
PullParser - A parser for structured Data. JDK6 can also do parsing in same way.
HttpRequest - Can use for Async HTTP or RestFul web services.
This code is so easy and monotonous that you will start copying it after 2-3 go :). Here it goes for Yahoo Map + Navigation code I have added addition here for both key and mouse.
JNLP for the same :
Main.fx :
package yahoomapnavigation;
import java.lang.Math;
import javafx.scene.Cursor;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import javafx.scene.input.MouseEvent;
import javafx.scene.Scene;
import javafx.stage.Stage;
import yahoomapnavigation.MapLocate;
/**
* @author Vaibhav
*/
var ml: MapLocate = MapLocate{zip:"10001"}; // 10001 - Newyork, i guess
var x1: Number = 0;
var y1: Number = 0;
var im: Image = bind Image {
url: ml.location
}
/* Image of the map from Yahoo WS */
var imview = ImageView {
cache: true
translateX: bind x1
translateY: bind y1
image: bind im
cursor: Cursor.MOVE
/* Navigation from Mouse event*/
onMouseDragged: function( e: MouseEvent ):Void {
if(e.dragX < 0 and x1 < 0) {
x1 = x1 + 5;
}
if(e.dragX > 0 and Math.abs(x1 - 240) < im.width) {
x1 = x1 - 5;
}
if(e.dragY < 0 and y1 < 0 ) {
y1 = y1 + 5;
}
if(e.dragY > 0 and Math.abs(y1 - 320) < im.height) {
y1 = y1 - 5;
}
}
/* Navigation from key event */
onKeyPressed: function( e: KeyEvent ):Void {
if(e.code == KeyCode.VK_LEFT)
{
if(x1 < 0) {
x1+=10;
}
}
if(
e.code == KeyCode.VK_RIGHT)
{
if(Math.abs(x1 - 240) < im.width) {
x1-=10;
}
}
if(
e.code == KeyCode.VK_DOWN)
{
if(Math.abs(y1 - 320) < im.height) {
y1-=10;
}
}
if(e.code == KeyCode.VK_UP)
{
if(y1 < 0) {
y1+=10;
}
}
}
};
Stage {
title: "Yahoo Map Navigation"
width: 240
height: 320
scene: Scene {
content: [
imview
]
}
}
MapLocate.fx :
package yahoomapnavigation;
import java.lang.Exception;
import javafx.data.pull.PullParser;
import javafx.io.http.HttpRequest;
/**
* @author Vaibhav
*/
/* Class to show Map from Yahoo Web service, input zip code */
public class MapLocate {
public var location: String;
public var zip: String;
public var isguid: Boolean = false;
var url = bind "http://local.yahooapis.com/MapsService/V1/mapImage?appid=P6pToNnV34GfP9zgTALgVW3CUTL5qHTnKjz5bLXPikqNjcMZTkF6h1xsnhm.P1WIs3U-&zip={zip}";
var p: PullParser;
var h: HttpRequest;
init {
if (url.length() > 0) {
h = HttpRequest {
location: url
onException: function(exception: Exception) {
print("Please check the internet connectivity/Data Input");
}
onInput: function(input) {
p = PullParser {
input: input
onEvent: function(event) {
if ((event.type == PullParser.END_ELEMENT)) {
if (event.qname.name == "Result") {
isguid = true;
location = event.text;
}
}
}
};
p.parse();
p.input.close();
}
onDone: function() {
}
};
h.enqueue();
}
}
}
</pre>
Please let me know if there is any issue, with JNLP or code :). Have fun !
Tuesday May 12, 2009
In last blog entry, we talked to have some blogs on Web Service to show how things go. Here is one of the simplest.
JavaFX is moving towards it's next release and work is ON. One of my friends came to my desk and he saw some animation of weather going here and there. He asked me " Is it some scientific data, data from NASA or something like that, if not what is this animation all about". Meantime, I checked the RSS feeds/WebService by NASA and I use one here to get something called "Image of the Day".
Its a big size image and so decide to showcase fullscreen example as well. Here goes the small code :
//Main.fx
package nasaimage;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.input.MouseEvent;
import javafx.scene.Node;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.scene.text.TextAlignment;
/**
* @author Vaibhav
*/
var s: Stage;
public var vText: Boolean = true;
var ly: LocationY = LocationY{};
var im = ImageView {
fitHeight: bind s.height
fitWidth: bind s.width
image: bind Image {
url: ly.urlImage
}
}
var rect = Rectangle {
blocksMouse: true
x: bind s.width - 25
y: 20
arcHeight: 4
arcWidth: 4
width: 20,
height: 20
stroke: Color.GRAY
strokeWidth: 2
onMouseClicked: function( e: MouseEvent ):Void {
FX.exit();
}
}
/* close button 'x' in title bar */
var close = Text {
fill: Color.WHITE
font: Font {
name: "Arial Bold"
size: 18
}
x: bind s.width - 20
y: 35
content: "x"
}
var loadingText = Text {
visible: bind vText
fill: Color.BLACK
font: Font {
name: "Arial Bold"
size: 20
}
x: 20
y: 20
content: "Loading Image from NASA WebService..."
}
function run() {
s = Stage {
title: "Nasa Image"
width: 300
height: 300
fullScreen: true
scene: Scene {
content: [
loadingText,im, rect, close
]
}
}
}
//LocationY.fx
package nasaimage;
import java.lang.Exception;
import javafx.data.pull.PullParser;
import javafx.data.xml.QName;
import javafx.io.http.HttpRequest;
/**
* @author Vaibhav
*/
public class LocationY {
public var urlImage:String;
var url = bind "http://www.nasa.gov/rss/lg_image_of_the_day.rss";
var p: PullParser;
var h: HttpRequest;
init {
if (url.length() > 0) {
h = HttpRequest {
location: url
onException: function(exception: Exception) {
print("Please check the internet connectivity or Data Input");
}
onInput: function(input) {
p = PullParser {
input: input
onEvent: function(event) {
if ((event.type == PullParser.END_ELEMENT)) /* and (event.qname.name == "current_conditions")) */{
if (event.qname.name == "enclosure") {
urlImage = event.getAttributeValue(QName{name:"url"});
}
}
}
};
p.parse();
p.input.close();
}
onDone: function() {
Main.vText = false;
}
};
h.start();
}
}
}
Don't ask me why I am using LocationY.fx as filename. Sometime back, I made my first webservice with name LocationY and from that time, I am copying the same file.
Last day Photo was more awesome than this. I guess it was something related with stars :). As talked in the prev. blog about the use of OnDone() method, here it is. Before loading of image, you will see a text 'Loading Image from NASA WebService...'. This text vanishes when image get loaded because we have called its visible: false in OnDone() method of HTTP.
I hope you love this short code and start of webservices. Thanks to NASA website to provide this RSS feed :).
Sunday May 10, 2009
For a developer perspective, I always appreciate the work of Graphics Designer. Immense level of smoothness, simple though beautiful, delicacy in every movement and most important fulfill the functionality in most easier way. Though we all can't think like a UE or a Graphics Designer but we can maintain the correct functionality in code. Some code which I have seen in last one month are awesome but some simple points are missing not because they are tough to write but because we forgot to write.
1. Use the correct cursor when required : Like if its a button or a Hyperlink, cursor should be Cursor.HAND like this code :
package cursorsample;
import javafx.scene.Cursor;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;
Stage{
title: "Button Cursor"
width: 250
height: 280
scene: Scene{
content: [
Rectangle {
cursor: Cursor.HAND
x: 10,
y: 10
arcHeight: 10
arcWidth: 10
width: 100,
height: 30
fill: Color.BLACK
},
Text {
fill: Color.WHITE
font: Font {
name: "Arial Bold"
size: 14
}
x: 15,
y: 30
content: "Hand Cursor"
}
]
}
}
If you are navigating inside the map or graph or if you are dragging things out. Cursor is supposed to be Cursor.MOVE. Please check the complete list supported in FX: http://java.sun.com/javafx/1.1/docs/api/javafx.scene/javafx.scene.Cursor.html
2. Simple opacity Game : Changing the opacity with simple values can make the UI rich. Simple code like this :
var opacity = 0.6;
onMouseEntered: function( e: MouseEvent ):Void {
opacity = 1.0;
}
onMouseExited: function( e: MouseEvent ):Void {
opacity = 0.6;
}
and bind the opacity of rectangle with opacity variable.
3. Gradient give life : "My Button" is simple but you will find it much better than only Black or only GRAY. Same way, you can make it more rich with filling correct gradient. Most of the time we find it a problem in setting Gradient color. My simple formula says, take 2 color of same family and try to mix. Never mix color like RED and GREEN. Mix LIGHTGREEN and DARKGREEN, RED and DARKRED, BLUE and AQUA. Using these, we can see effects like this :
4. Gradient at title bar -> I love to write custom title bar in place of OS defaults which always gives a feeling that I am living in old age. Color in title bar can be made cool with gradient like :
This is simple DARKGREEN, BLACK and DARKGREEN linear gradient. Though, I am misusing the close button concept here. Close button should not be green in color, preferable color is RED.
5. If we want it to be simple: If application itself is too complex and we want to minimize the cost of gradient, colors. Best is to go with simplicity. A black background with white text is one of the awesome combination.
6. Web services or HTTP request : If we are using PullParser and HTTP, onDone method is one of the important places for everything. Consider on a button click you called a web service and web service takes sometime and showed the output. In the middle, you need to show a screen to user saying "We called this web service and it will take sometime", else user will impatiently close the window.
So, waitingText.visible = true when mouse click ! In onDone() { waitingText.visible = false; }
Soon, we will have more example on this :).
That's it.
Have fun with JavaFX !
Thursday Apr 30, 2009
Some developers ask me "what is the future of JavaFX". Actually I can't say, because I am not a future maker. But yes it depends how honest your effort is, how consistent your effort is. We are doing best from our side. Talks apart, we have published some more article on JavaFX official site. Basic and awesome :).
1. In any RIA language which provide a great easiness for developer, one of the most important things you know is how to manage animation and so, timeline. Nancy, has written detailed article on how to play with timeline : "Animation Basics for JavaFX Beginners"
2. She has written one more article on Reloading Data. Actually reloading is a tricky part not in terms of mind but in terms of ways to do. Sometime, you want ball to be at initial position, sometime you want it to be at random position, sometime final position is initial position.
These 2 articles are related and both as one give a good picture of animation.
3. Very important to know this. How to run JavaFX Application offline. Thomas, guru of JWS, has written one article speaking about what all things to take care when you want JavaFX Appliation to run offline. As most of us know, JavaFX has lot to do with deployJava.js, Java Logo Image.
Have Fun !
Friday Apr 17, 2009
Finally we are able to finish one more article on Data Representation. My special thanks to Stephen Few who has written the concept of Bullet Graph. An awesome way to represent lot of data in one screen. Basically used on Executive Dashboard to compare between predicted value and actual done.
In terms of Animation, this is different in comparison with other Data Rep. Articles. Here the data loading is sequential in nature. Actually if someone is making it for presentation purpose, the best way is to show the animation on Key hit, very similar to what we do in ODP or PPT presentations.Some small code of AppletExtension is also there, which will show you the power of JavaFX API. When you drag this applet out of Browser, you will not see the custom close button.
Feel free to comment or add anything you want in this.
Wednesday Apr 15, 2009
Just a small demo of JavaFX + Web Services. From JavaFX, its quite easy to work on Web Services like maps, search, pictures .. There are lot of Web services demo in the sample space.
Here I have contact list of person, which has name, email ID, phone no, address and thumbnail images. Everything has a different work but here we are willing to see the address work. On clicking contact list's, will show me his location in maps. Actually there are two ways to do that, fast way and good way. We can store the maps in Database and use it when required, other is we call the web service and take the map on demand from Yahoo or Google API, which will be slow. So, we will go with good way.
Considering only one contact.
Some fancy stuff, like clicking the + sign will open address option. Now, on clicking the address, we will call the yahoo maps API for showing the location of the person Joseph J.
Actually its a mobile application, and can be viewed in mobile as well(just that I am not putting image). So, in basic code of Map show, we did :
// in place of Sunnyvale and CA, it will be {city} and {state} which will be the variables and passed from main code.
var url = bind "http://local.yahooapis.com/MapsService/V1/mapImage?appid=GetApp;city=Sunnyvale&state=CA";
var p: PullParser;
var h: HttpRequest;
init {
if (url.length() > 0) {
h = HttpRequest {
location: url
onException: function(exception: Exception) {
}
onInput: function(input) {
p = PullParser {
input: input
onEvent: function(event) {
if ((event.type == PullParser.END_ELEMENT)) {
if (event.qname.name == "Result") {
location = event.text; //this will give a URL for image
}
}
}
};
p.parse();
p.input.close();
.......
Lot of further code. Important of it is OnDone method where we have to write some code of cleaning or loading prev. data. I have also embed my long back code of navigation, which will help us into navigation in the map.
Ignore some minor mistakes, have a look at the jnlp:
Soon, I will post the whole application with code, but the basic idea is simple and can be doable.
Saturday Apr 11, 2009
Often we required some shapes which are not in the list of Basic Shapes available in JavaFX. I mean this is true with any language. A month back, I wanted to make a tube in JavaFX and Tube has very awesome cut at the top which can't be done with basic shapes. We can easily tackle these conditions by intersecting and subtracting the shapes. Have a look :
Now, this is very easy to make. 1 subtraction and that's it. This is just 2 ellipses and 1 Shape subtraction ! Find the code :
Shapes.fx
Even in this, we can play more and make it as real as it is desired. If you see my tube closely, you will find a green color on the top which gives a feeling that the inside color or liquid inside the tube is green in color. Rotating this tube with 90 and removing the lower base can be helped in the simulation of Pipes. With this only, I had written one small code, showing how light travel in pipes. I will post that code as well in few days.
Point is JavaFX has a strong support for basic shapes but if your desired shape doesn't resides in the list. Use ShapeIntersect and ShapeSubtract for acheiving the desired result.
If you are interest in seeing the liquid filling in this tube, please visit this article.
Thursday Apr 09, 2009
I just love to see the enthu towards JavaFX. Since technology is so vast, we always want to compare it with other and try to find out the interoperability with other language, basically the language which we know :-).
Developers are talking from small applications to vast applications. One of my friends was talking of a car race on Google earth road in JavaFX, which looks like awesome work(if doable). In our next release, the main focus is on RIA, because this is the only reason why JavaFX born.
JavaFX Communities are also growing rapidly. I remember, I made one Orkut community on JavaFX, 2 months back and now we have more than 140 members and quite an active one. Engineers are asking questions which are quite awesome.
You must be interesting in seeing some of the valid questions and their answers. Rakesh has done a great post for that. Thanks !
Friday Mar 27, 2009
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).
Wednesday Mar 25, 2009
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.
1. Making a Point-Line Graph.
2. Write an app on Mobile.
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 :).
Monday Mar 23, 2009
Some great news for JavaFX developers.
1. JavaFX Coding Challenge starting from today, 23rd March.
For more please visit : http://javafx.com/challenge/
Some eye catching stuff : Prizes, 25000, 10000, 5000, 1500, 100 $. Have a look !
2. Another Challenge Josh has announced today on jfxstudio.org. Winners of JavaFX Application developer will get new upcoming book of JavaFX. Hava a look here as well.
So, its like writing one application and chance for getting lot of prizes :).
All the best to the competitors.
Friday Mar 20, 2009
JavaFX being an easy language, one complex part is to write proper timeline for animation. Though its quite easy but as beginner I feel problem sometime. And sometime as a Java Developer, we start demanding those things which are generally done by the concept of multi-threading in Java. Remember, JavaFX is single threaded application.
So, this is what I generally follow. Say, If I have a class Ball, which has a circle and every ball has a timeline for its own. Now, if you want One ball move after another ball, I write a master timeline in Main file and there we write something like this :
var t = Timeline {
repeatCount: 1
keyFrames: [
KeyFrame { time:0s action: function(){ t1.t.playFromStart(); } },
KeyFrame { time:1s action: function(){ t2.t.playFromStart(); } },
]
}
Where there is an animation of 1s in t1.t.playFromStart(); So, the next timeline call goes at 1s, means finishing at first one. If you want some initial delay, you can write :
var t = Timeline {
repeatCount: 1
keyFrames: [
KeyFrame { time:1s action: function(){ t1.t.playFromStart(); } },
KeyFrame { time:2s action: function(){ t2.t.playFromStart(); } },
]
}
Means, dont do anything from 0s to 1s.
But, It is possible that you messed up after sometime. For that, you need to check the "javafx.animation.transition" package, one of the awesome packages in FX API's.
Though, example is everywhere in API Doc. I just show a small one, copied from the API' example itself. First car will fade, then move left and right, then rotate, then move again and then zoom.
Code for assistance :
1. Main for timeline problem.
2. Time class for timeline problem
3. Transitions Main Class.
Tuesday Mar 17, 2009
Spring season is about to come and one can feel the coldness in air. Last week, I went to my home and that week was quite good for my sample writing. Able to finish some of my pending job.
Back to JavaFX Samples, last week I saw a nice sample written in flash about the ball motion in 3-D space. I try to implement that idea in JavaFX. Code is little dirty, so I will post it later.
This is how it looks (animation is important) :
To watch the animation, please launch this JNLP.
I hope, you will enjoy it !
1. There are 4 polygon, which covers the space, looks like a cricket net practice place :).
2. Launch button will give motion to ball, since the motion is not restored, pressing it again will not work.
3. var scale = z0 / (z0 + z); Scaling with proper value will provide the Z-Camera.
4. Gaussian Blur for shadow, which translate in 2-D and with same timeline.
--
Change in Blog : Adding source code :
1. Main File
2. Ball Throw
This will allow you to relaunch the animation.
|
|
|
|
Is the JavaFX chart stuff a wrapper around JFreeCh...
I didn't try it yet, but I don't think is based on...
How come that you get a scary security dialog when...
Yes Fabrizio, you are correct. Its not writte...
@last comment: Not in Browser setting, it is ...
Java tray icon is for the user, to quickly ac...
You should seriously reconsider to remove this Jav...