X

Vaibhav's Blog Space

  • Java
    July 15, 2008

JavaFX small Examples.

Guest Author

java2s.com is one of my loving sites, yes because I got all types of code on this site. And the best part it will show you different view of codes like API based, Application based and many more. Don't know how a JFileChooser works!! Just go on the site and check for the smallest code for JFileChooser. It contains code of Java, C++, .Net, JavaScript, HTML, Python... whatever language I heard of:-). 

I have not seen any repository regarding JavaFX, probably because of being very new. I proposed the site owner to add JavaFX codes as well. For adding the support of JavaFX, I have started writing small JavaFX code. Small means very small. 

Here are some of the codes I have written. Please have a look and feel free to use it.

1. MapNavigation_MouseEvent.fx:  It will navigate into the map. I have not yet checked the boundary condition. Simple 14-15 line of code.

2. CarAcrossRoad.fx: Running car across road with easeboth style. This is different from linear motion. This motion smooth the object at the end. Have a look ! Some 10-11 lines of code.

3. PolygonInsideFrame.fx: Shapes are easy to make in JavaFX. I have just made one polygon(Octagone) inside a frame. Actually, I wanted to make the STOP symbol of traffic light. 

4. RotatingImage.fx: Rotation of Image or any transformation is very easy in JavaFX. This example depicts a normal image rotation.

5. MoreComponentsInFrame.fx: This example will show how to add components like Button, CheckBox, RadionButton and many more inside Frame of JavaFX.

6. FullScreenExample.fx: How to run a application in full screen. There is a feature of making undecorated value : true which remove the frame border,close button in the application. It can give you a feeling like the start up screen of Netbeans. This example is for full screen but we can manage the frame size anytime. It gives you a nice look for startup. I have used the same in first navigation example.

All these examples are very trivial but I guess can help for someone who is getting started with JavaFX like me.

Join the discussion

Comments ( 30 )
  • fernando Wednesday, July 16, 2008

    Hi, I want to resize a loaded picture, but I can't manage it.

    This won't work to resize the image

    Canvas {

    content: ImageView {

    size:new java.awt.Dimension(20, 20)

    image: Image { size: url: "http://afternoonsun.net/wp-content/uploads/2008/05/javafx.jpg" }

    transform: [translate (200.0,10.0),rotate(61,100,100)]

    }

    }


  • Vaibhav Choudhary Thursday, July 17, 2008

    transform: [translate (200.0,10.0),rotate(61,100,100)]

    Why you are rotating the image, scale it !

    transform: [translate (200.0,10.0),scale(2,2)] - it will resize the image 2 times.


  • Rahul Saturday, March 21, 2009

    Hi,Im creating a sidebar to embed the yahoo portals,and here is where im stuck..

    ImageView{

    x:bind imgX + 50

    y: bind imgY + 80

    image: bind wid11

    onMouseEntered: function(e:MouseEvent){

    wid11=wid1[1];

    }

    onMouseExited: function( e: MouseEvent ):Void {

    wid11=wid1[0];

    }

    onMouseClicked: function( e: MouseEvent ):Void {

    wid11=wid1[2];

    }

    }

    imgX and imgY are the coordinates of the side bar ans the above image is a widget one...now wen i click on the widget image another image should appear but at a different location...how do i do this??i need to use the translateX and translateY for this,but i dont know how to use it..please could u assist me on this..


  • Vaibhav Saturday, March 21, 2009

    yes you can use translateX and translateY and bind then with the new position where you want to put it. Something like

    var xc= 0.0;

    var yc=0.0;

    ImageViewer {

    translateX: bind xc

    translateY: bind yc

    onMouseClick(.......) {

    xc = 100;

    yc = 100;

    }

    Something of this sort .... !


  • Rahul Monday, March 23, 2009

    hi,im done with the image thing..thanks a lot for that...

    now i on clicking the widget image im able to get the other image on the left hand side but wen i move the mouse it disappears.i need this image to be available till i close it...what should i do??


  • Vaibhav Monday, March 23, 2009

    you must have written something wrong on mouseMove :)

    Check that out... I need to see code for understanding it !


  • Rahul Monday, March 23, 2009

    ImageView{

    translateX:bind imgX + c

    translateY:bind imgY + d

    image: bind wid11

    onMouseEntered: function(e:MouseEvent){

    c=50;

    d=80;

    wid11=wid1[1];

    }

    onMouseExited: function( e: MouseEvent ):Void {

    c=50;

    d=80;

    wid11=wid1[0];

    }

    onMouseClicked: function( e: MouseEvent ):Void {

    println("1");

    c=-1050;

    d=80;

    wid11=wid1[2];

    println("2");

    }

    onMouseMoved: function(e:MouseEvent):Void{

    c=-1050;

    d=80;

    wid11=wid1[2];

    }

    }

    this is my image view which has a widget image..on clicking this image other image comes on left but disappears as soon as i move the mouse.


  • Vaibhav Choudhary Monday, March 23, 2009

    yes thats true... because your mouseClick option and different image and mouseMove option attached to this image, so when you move mouse, the image will disappear.

    you need to change mouseMove code as well according to mouseClick


  • Rahul Tuesday, March 24, 2009

    Could u help me out on this....could tell me wat exactly i need to do??


  • Vaibhav Choudhary Tuesday, March 24, 2009

    without source code i cant ..

    Better do one thing, you tell me what to make. I can write a separate code and give you.

    Is it click on a image, another image should come and what you want in mouse move and exit ?


  • Rahul Tuesday, March 24, 2009

    Hi,im creating a side bar which is an image.on top of the side bar there are four small images(squares)..on clicking any of the small image another image should open on the left hand side..now this image on the left hand side is nothing but kind of a popup in which i would display the news through api..instead of opening a browser or something im creating a rich graphical rectangle(popup) which wud do the browser job..i have done till here but wen i click on the small square the image comes on left but disappears wen i move the mouse....the image that appears on the left hand side shud remain there till i click on the close button on that image....

    Thanks a lot for whatever u are doing for me...


  • Rahul Wednesday, March 25, 2009

    Hi...

    Just tell me how to do the following..

    on clicking one image 2nd image shud open.the second image shud not disappear on moving the mouse..


  • Ambuj Jauhari Sunday, April 19, 2009

    Hi....vaibhav actually i am trying to make a paint application but the point is i am unable to make the fill tool i have tried a lot over it but i am not able to make it

    Please help me out.


  • Vaibhav Choudhary Sunday, April 19, 2009
  • Cutter Wednesday, June 10, 2009

    I get mouse events to click and open an image, but what if you clicked the image and wanted it to open a new tab in the browser, or pop up a new browser window - I can not seem to find how to do this... I would like to add this to the media browser example.

    1) click image

    2) expand image

    3) click expanded image and have it open a new browser obtaining tag info from the image.

    -cutter


  • Vaibhav Thursday, June 11, 2009

    I didn't get the problem. Can you please explain me for which code you are talking off.


  • cutter Thursday, June 11, 2009

    ok, so in the media browser, you have multiple images pulled from flickr or yahoo....

    You mouse over the image you want, it highlights, click on it, it enlarges, to put it back you can either click on the enlarged image or click on another image and it will return.

    What I want to do is when the image is enlarged, ( say the pix is of a yamaha guitar ) give the user the ability to click the image and have it go to a pre-determined yamaha guitar dealers web site, upon clicking the image, it should open a new window or tab.

    -cutter


  • banita Friday, June 12, 2009

    hi...

    i am starter in javafx .i was using same frame like u used in example in netbean 6.5.1 but its not working . its giving error .even it is not accepting javafx ui package .


  • Vaibhav Choudhary Friday, June 12, 2009

    @ Banita :

    javafx.ui is too old now. Please use the new package. See some new examples in the latest post :)


  • Vaibhav Choudhary Friday, June 12, 2009

    @ cutter :

    means you want to open a browser from JavaFX Application ?

    if so, you can use JDK6 feature but that will not run your application on JDK5, which is fine i guess :)

    Please let me know if you want code, just for API, use Desktop API of JDK6


  • banita Friday, June 12, 2009

    iam a java developer and i want to make widget in javafx which can connect to mysql and show the query result . you suggest me how to do this .


  • Vaibhav Choudhary Friday, June 12, 2009
  • banita Monday, June 15, 2009

    hi

    i have created a javafx widget which uses rss feed and show the news,

    now i want to use it in our website or i want to be embedded with my website.. can you please tell me the procedure in detail how to run widget from my website


  • Vaibhav Choudhary Monday, June 15, 2009

    embed the JavaFX applet tag in ur website .. like we are doing in most of the article pages. Like check out the applet tag here :

    http://javafx.com/docs/articles/barchart/

    You will get some idea.


  • Himanshu Monday, June 15, 2009

    Hi.... can you please tell how to make an exe file from my javafx code created on Netbeans environment...

    Regards,

    Himanshu.


  • Vaibhav Monday, June 15, 2009

    JavaFX follow the same rule as of Java. So, there is no concept of exe files. it the concept of jar files for security reasons. You can make executable jar file in the same way you do it in java.


  • Tag Heuer watches Sunday, December 20, 2009
  • Amit Wednesday, January 20, 2010

    We are facing following issue. Any recommendations to resolve this issue is highly appreciated.

    1. Not able to access javaFx charts from a remote system (More details at the end of mail).This is high priority requirement as we have a web based reporting application and users access it over our static IP address.

    .

    We are using Java Fx charts in our web application where we built jnlp and jar files in a separate fx project and kept jar and jnlp’s inside our web project.

    It is working fine when we did not used any external jar files and remotely it is accessible. But when we used external jars our project is running on local

    system but remotely it is not working due to some path settings. We modified jnlp files where entry of jar files exists and modified the jar path as per our

    project. But still it did not work.

    Before using external jars inside our java fx project my jnlp looks like:

    <?xml version="1.0" encoding="UTF-8"?>

    <jnlp spec="1.0+" codebase="http://localhost:8083/servlet/org.netbeans.modules.javafx.project.JnlpDownloadServlet/F%3A/New+FX+Projects+08-12-

    2009/JavaFXApplication3/dist/" href="JavaFXApplication3.jnlp">

    <information>

    <title>JavaFXApplication3</title>

    <vendor>Saurabh</vendor>

    <homepage href="http://localhost:8083/servlet/org.netbeans.modules.javafx.project.JnlpDownloadServlet/F%3A/New+FX+Projects+08-12-

    2009/JavaFXApplication3/dist/"/>

    <description>JavaFXApplication3</description>

    <offline-allowed/>

    <shortcut>

    <desktop/>

    </shortcut>

    </information>

    <resources>

    <j2se version="1.5+"/>

    <extension name="JavaFX Runtime" href="http://dl.javafx.com/1.2/javafx-rt.jnlp"/>

    <jar href="JavaFXApplication3.jar" main="true"/>

    </resources>

    <application-desc main-class="com.sun.javafx.runtime.main.Main">

    <argument>MainJavaFXScript=misc.Test</argument>

    </application-desc>

    <update check="background">

    </jnlp>

    After modifying my jnlp as per my project as

    <?xml version="1.0" encoding="UTF-8"?>

    <jnlp spec="1.0+" codebase="/PiFx/FxFiles/" href="JavaFXApplication3_browser.jnlp">

    <information>

    <title>JavaFXApplication3</title>

    <vendor>Saurabh</vendor>

    <homepage href="/PiFx/FxFiles/"/>

    <description>JavaFXApplication3</description>

    <offline-allowed/>

    <shortcut>

    <desktop/>

    </shortcut>

    </information>

    <resources>

    <j2se version="1.5+"/>

    <extension name="JavaFX Runtime" href="/PiFx/FxFiles/javafx-rt.jnlp"/>

    <jar href="/PiFx/FxFiles/JavaFXApplication3.jar" main="true"/>

    </resources>

    <applet-desc name="JavaFXApplication3" main-class="com.sun.javafx.runtime.adapter.Applet" width="500" height="500">

    <param name="MainJavaFXScript" value="misc.MyChart">

    </applet-desc>

    <update check="background">

    </jnlp>

    After adding external jars my jnlp looks like this :

    <?xml version="1.0" encoding="UTF-8"?>

    <jnlp spec="1.0+" codebase="http://localhost:8083/servlet/org.netbeans.modules.javafx.project.JnlpDownloadServlet/F%3A/New+FX+Projects+08-12-

    2009/JavaFXApplication3/dist/" href="JavaFXApplication3.jnlp">

    <information>

    <title>JavaFXApplication3</title>

    <vendor>Saurabh</vendor>

    <homepage href="http://localhost:8083/servlet/org.netbeans.modules.javafx.project.JnlpDownloadServlet/F%3A/New+FX+Projects+08-12-

    2009/JavaFXApplication3/dist/"/>

    <description>JavaFXApplication3</description>

    <offline-allowed/>

    <shortcut>

    <desktop/>

    </shortcut>

    </information>

    <resources>

    <j2se version="1.5+"/>

    <extension name="JavaFX Runtime" href="http://dl.javafx.com/1.2/javafx-rt.jnlp"/>

    <jar href="JavaFXApplication3.jar" main="true"/>

    <jar href="lib/jdom.jar"/>

    </resources>

    <application-desc main-class="com.sun.javafx.runtime.main.Main">

    <argument>MainJavaFXScript=misc.Test</argument>

    </application-desc>

    <update check="background">

    </jnlp>

    I have modified the jnlp as per my project :

    <?xml version="1.0" encoding="UTF-8"?>

    <jnlp spec="1.0+" codebase="/PiFx/FxFiles/" href="JavaFXApplication3_browser.jnlp">

    <information>

    <title>JavaFXApplication3</title>

    <vendor>Saurabh</vendor>

    <homepage href="/PiFx/FxFiles/"/>

    <description>JavaFXApplication3</description>

    <offline-allowed/>

    <shortcut>

    <desktop/>

    </shortcut>

    </information>

    <resources>

    <j2se version="1.5+"/>

    <extension name="JavaFX Runtime" href="/PiFx/FxFiles/javafx-rt.jnlp"/>

    <jar href="/PiFx/FxFiles/JavaFXApplication3.jar" main="true"/>

    <jar href="/PiFx/FxFiles/lib/jdom.jar"/>

    </resources>

    <applet-desc name="JavaFXApplication3" main-class="com.sun.javafx.runtime.adapter.Applet" width="500" height="500">

    <param name="MainJavaFXScript" value="misc.MyChart">

    </applet-desc>

    <update check="background">

    </jnlp>

    where PiFx is our project Name

    we are using relative path in jnlp files .

    For javafx applet call we are using complete path

    Ex---

    javafx({

    archive: "<%=request.getContextPath()%>/FxFiles/JavaFXApplication3.jar",

    draggable: true,

    height:hgt,

    width:wdt,

    code: "misc.MyChart",

    name: appletName,

    id: appletName

    });

    myApp = document.getElementById(appletName);

    myApp.script.xmlStr = xmlStr;

    When we were not using jom , we were able to access our application remotely.


  • chaitanya Tuesday, June 1, 2010

    hey..can u give me the javafx code for creating array of hyperlinks to different images


  • Amit Thursday, December 2, 2010

    Hi Vaibhav,

    I was looking at your carousel fx script. I want to create something similar, where I stack number of images behind every visible image in the carousel. And then on click the center image of the carousel ( the active image at front ) , it should expand all the images behind it in the area below the carousel. I am new to FX. If you can guide me, it would be great. If you can give me some basic working code with above functionality , I can develop on that further.


Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.