w3hJava

With me, it happens most of the time. The basic code is over and I stuck in giving a good color to a button or a text. Now a day, a good UI is as required as basic functionality. In my 7 year of Computer life including college + work I always ran away from animations and coloring. 

Last day, I was making a button and it took me pretty much time to finish it off. But, I find a good observation from it. A simple and quick way to color a button or giving a glossy effect. Have a look at these buttons. 

If you are not a grahics designer, then you probably like these buttons. These buttons has been made with very simple effort, just a small work of Linear Gradient. But the fight is which color to put in Linear Gradient. So, here is my observation, you need to put the color which are close to each other and can be easily merged with each other. Like .. hmm :

LIGHTBLUE, DARKBLUE, LIGHTBLUE.(3rd button)

This is actually the best pattern. 

2nd button is also the result of same :

LIGHTGREEN, DARKGREEN, LIGHTGREEN.

So, check more with this simple code :

Stage {
    title: "Some Cool Buttons"
    width: 250
    height: 280
    scene: Scene {
        fill:Color.BLACK
        content: [
            Rectangle {
                x: 10,
                y: 10
                width: 90,
                height: 30
                fill: LinearGradient {
                    startX: 0.0
                    startY: 0.0
                    endX: 0.0
                    endY: 1.0
                    proportional: true
                    stops: [
                        //   Stop { offset: 0.0 color: Color.BLACK },
                      Stop {
                            offset: 0.0
                        color: Color.LIGHTGREEN },
                        Stop {
                            offset: 0.5
                        color: Color.DARKGREEN },
                        Stop {
                            offset: 1.0
                        color: Color.LIGHTGREEN }
                    ]

                }
                opacity:0.6
                arcHeight:5
                arcWidth:5
            },
            Text {
                font: Font {
                size: 12
                name: "Arial Bold"
                letterSpacing: 0.15

            }
                fill:Color.WHITE
                x: 18,
                y: 30
                content: "HelloWorld"
            } ] }

Some of my fav. combinations(2 already mentioned) :

1. Stop {
                            offset: 0.0
                        color: Color.LIME },
                        Stop {
                            offset: 0.5
                        color: Color.DARKGREEN },
                        Stop {
                            offset: 1.0
                        color: Color.LIME }

This will look awesome, if you are writing a flashy application. Very vibrant in color.

2.  Stop {
                                offset: 0.0
                            color: Color.ALICEBLUE },
                            Stop {
                                offset: 0.5
                            color: Color.BLUE },
                            Stop {
                                offset: 1.0
                            color: Color.ALICEBLUE }

3. Stop {
                                offset: 0.0
                            color: Color.ORANGE },
                            Stop {
                                offset: 0.5
                            color: Color.RED },
                            Stop {
                                offset: 1.0
                            color: Color.ORANGE }

4. A very plain and descent effect :

Stop {
                                offset: 0.0
                            color: Color.LIGHTYELLOW },
                            Stop {
                                offset: 0.5
                            color: Color.YELLOWGREEN },
                            Stop {
                                offset: 1.0
                            color: Color.LIGHTYELLOW }

Enough, please let me know your choice. Is there any pattern, you follow !

If liked it, then why not share!

In my last blog, I have added jnlp files of JavaFX samples. These are the simple steps how to do it with the help of netbeans.

Step 1: Compile the Project after this change(here my project name is Carousel) :

Project -> Properties - > Run -> Web Start Execution.

Step 2: It will generate some files :
- Project.jar
- Project.jnlp
- Project_Browser.jnlp.
- Project.html

Step 3: Open jnlp file in editpad, and you need to do some changes:

Here it will look originally:

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

 <jnlp spec="1.0+" codebase="http://localhost:8082/servlet/

 org.netbeans.modules.javafx.project.JnlpDownloadServlet/D%3A/

 NetBeansProjects/Carousel/dist/” href=”Carousel.jnlp”>

     <information>

         <title>Carousel</title>

         <vendor>Vaibhav Choudhary</vendor>

         <homepage href=”http://localhost:8082/servlet/

 org.netbeans.modules.javafx.project.JnlpDownloadServlet/D%3A/

 NetBeansProjects/Carousel/dist/”/>

         <description>Carousel</description>

         <offline-allowed/>

         <shortcut>

             <desktop/>

         </shortcut>

     </information>

     <security>

         <all-permissions/>

     </security>

     <resources>

         <j2se version=”1.5+”/>

         <property name=”jnlp.packEnabled” value=”true”/>

         <property name=”jnlp.versionEnabled” value=”true”/>

         <extension name=”JavaFX Runtime” href=”http://dl.javafx.com/

 javafx-rt.jnlp”/>

         <jar href=”Carousel.jar” main=”true”/>

     </resources>

     <application-desc main-class=”carousel.Main”/>

 </jnlp>

Step 4: You need to change: CodeBase with what is required(means where you
uploaded the file, you need to upload jar file and jnlp(modified
file). In my case it is : http://blogs.sun.com/vaibhav/resources/.
this is where we upload file in Sun blog

Step 5: So, after change :

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

 <jnlp spec="1.0+" codebase="http://blogs.sun.com/vaibhav/resources/”

 href=”Carousel.jnlp”>

     <information>

         <title>Carousel</title>

         <vendor>Vaibhav Choudhary</vendor>

         <homepage href=”http://blogs.sun.com/vaibhav/“/>

         <description>Carousel</description>

         <offline-allowed/>

         <shortcut>

             <desktop/>

         </shortcut>

     </information>

     <security>

         <all-permissions/>

     </security>

     <resources>

         <j2se version=”1.5+”/>

         <property name=”jnlp.packEnabled” value=”true”/>

         <property name=”jnlp.versionEnabled” value=”true”/>

         <extension name=”JavaFX Runtime” href=”http://dl.javafx.com/

 javafx-rt.jnlp”/>

         <jar href=”Carousel.jar” main=”true”/>

     </resources>

     <application-desc main-class=”carousel.Main”/>

 </jnlp>

Step 6: Look at the href: http://dl.javafx.com/javafx-rt.jnlp, this will take
care of the responsible jar or jnlp files which is required by JavaFX
Runtime. Just a word of caution, look at your lib folder as well,
which will be there in your dist directory along with jnlp and jar
files. If it has something, then upload that as well in lib/files(most
of the time it will be empty). But if you have used Java Production
Suite, there will be files like javafx-fxd.jar files :).

Step 7: In blog now just add a line(in html) :

<p style="width: 500px;"><a href="blogs.sun.com/vaibhav/resource/

 Carousel.jnlp"><img border="0" src="http://java.sun.com/products/jfc/

 tsc/sightings/images/webstart.small.jpg” /></a></p>

That’s it !

If liked it, then why not share!

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 :).

If liked it, then why not share!

For JavaFX enthusiastic developer and designers, I have created one Orkut community, please feel free to share your experience or problem.

Here is the link for “JavaFX Developers And Designers”

For Java, I already have a 4-5 year old community. Feel free to discuss Java topics here.
I am very happy with the strength of this community now, which is around 20000. We worked continuously to remove all spams and useless topics.

If liked it, then why not share!

So, finally we got a new site for http://donateyourpc.in. We had started our website 2 months back and now we hhttp://w3hjava.com/wp-admin/post.php?action=edit&post=48ave migrated on JSF. Thanks to Abhishek for putting awesome effort.

The cause for creating this site and work is all clean and social : DonateYourPC.in is a unique platform to bring together Indian PC and Computer Peripheral donors with NGOs/Schools and people who need computers for education and empowerment.

From this site, we can donate our computers which are no more in use for us because of the CPU strength or because of obsolete technology.

I request everyone of us to give a thought about their old PC’s residing in your home. Believe me donating such PC is a very good social cause. What say !

If liked it, then why not share!

Long back, I had written one blog on how to list Java Process running on System by Java Code. But with the new features of JDK6, you can not only see the list but can manage the other running Java Process. This is possible using class LocalVirtualMachine. This class has a list of methods :

connectorAddress,
displayName,
getAllVirtualMachines,
getLocalVirtualMachine,
isAttachable,
isManageable,
startManagementAgent,
toString,
vmid

Here I am just showing a simple code, which will again tell you all the running Java Process.

import sun.tools.jconsole.*;
import java.util.*;
public class Main {

public static void main(String[] args) {
Map map = LocalVirtualMachine.getAllVirtualMachines();
Iterator iter = map.values().iterator();
LocalVirtualMachine vm = null;
while (iter.hasNext()) {
vm = (LocalVirtualMachine)iter.next();
System.out.println(vm.displayName());
}
}
}

A very very small code :). Note that this class is not in rt.jar so we need to add jconsole.jar and tools.jar in the classpath section.
So, here how you can run this code :

D:Program FilesJavajdk1.6.0_11binControlJavaApp>..javac -cp "D:Program Fi
lesJavajdk1.6.0_11libjconsole.jar" Main.java

D:Program FilesJavajdk1.6.0_11binControlJavaApp>..java -cp .;"D:Program F
ilesJavajdk1.6.0_11libjconsole.jar";"D:Program FilesJavajdk1.6.0_11libt
ools.jar" Main

Right now, in my system it is displaying:

Main
org/netbeans/modules/javafx/preview/Main 1

which mean this code itself and netbeans code.

In next blog, I will try to show how to manage other running java code from a java code.

If liked it, then why not share!

Here is the little discussion on Designer + Developer workflow in JavaFX. Powered with Project Nile, we can export data from PhotoShop or Illustrator. Actually the complete production suite is awesome and provide developer and designer to work in parallel. Here how it is :

So, Developer can work on the business logic and till that time designer can design the actually content for developer. Finally it will merge in a great style. 

 Basic Requirement to do :

1. JavaFX Production Suite : Download from the start section of javafx.com.

2. For Designer : Any tool, either PhotoShop CS3 or Illustrator CS3. Officially CS3 is the supported platform but it works for CS4 as well.

3. For Developer : Java FX SDK: Download from the start section of javafx.com

Now, I am going ahead with PhotoShop. Copy the plugin from JavaFX production suite to PhotoShop. Run the PhotoShop, in export it will give you a save option in JavaFX, which basically saves the file in fxz format(a new format, why Sun need a new format, there is a lot of discussion and Jeet has pointed some reason in his blog).

Alright, so work started : 

I was watching the batman movie, so decide to take his awesome car, which is here :

In photoshop, I have changed the hue and exported all in fxz format.

Then I made a Netbeans Project, Copy the fxz file into the project space. We can now click on fxz file, we can see the preview and code as well. Right now, if we put some of the complex features of PhotoShop, I am afaird to say JavaFX will not catch those changes.

So, my fxz file(JavaFX.fxz) looks like this :

  /*
 * Generated by JavaFX plugin for Adobe Photoshop.
 * Created on Fri Dec 19 19:17:33 2008
 */
//@version 1.0

Group {
    clip: Rectangle { x:0 y:0 width:576 height:432 }
    content: [
        ImageView {
            opacity: 1.0
            x: 0
            y: 0
            image: Image {
                url: "{__DIR__}Background.png"
            },
        },
    ]
}

Actually in my case there was nothing, so it generated a simple code :).

Now, I have made another file, calling it CarRotate.fx :

package psfx;

import java.lang.*;
import javafx.fxd.FXDLoader;
import javafx.scene.*;
import javafx.scene.input.*;
import javafx.scene.paint.Color;
import javafx.scene.shape.*;
import javafx.stage.*;

var group = Group {
    content: []
};
var fxdContent = FXDLoader.load(”{__DIR__}JavaFX.fxz”); // loads the content
insert fxdContent into group.content; // inserts the fxd content into the group

Stage {
    title: “JavaFX Invaders”
    resizable: true
    width: 700
    height: 700
    onClose: function() {
        System.exit (0);

    }
    scene: Scene {
        content: [
            group
            Rectangle {
                x: 330,
                y: 500
                width: 60,
                height: 30
                fill: Color.GRAY
                onMouseClicked: function( e: MouseEvent ):Void {
                    fxdContent.rotate = 90;
                }
            }
        ]
    }
};

Some part of the code is point of interest :

  var group = Group {

    content: []

};

var fxdContent = FXDLoader.load(”{__DIR__}JavaFX.fxz”); // loads the content

insert fxdContent into group.content; // inserts the fxd content into the group

Here I have loaded the .fxz file into var fxdContent which is a node and node means things are in our hand. I have simply written a rotate equation on a button click which is working nicely.

We can see the rotated car and hue which is the asset of PhotoShop in Green color. Huh, finally its done. Sorry, for posting bad example.

If liked it, then why not share!

3 weeks back, we were thinking of some cool application to make. I am a guy who has seen very less outside world, so coming up with some great idea is always tough for me. So, deciding that, I went back to my tenth class physics book and saw some of the cool physics motion. Its one of the tough subject and always screw me in exam. Searching some of the easy equation, I though to make one spring motion. Meantime, I though there is some spring motion residing in our repository. Actually one of the Josh applications do it in awesome way, but still we were missing the actual feel of Spring motion because of the gig-gag and spiral stuff attached to the wall and spring is going up and down in it, with a complete view of awesomeness :). This is what finally we achieve from this blog :

I can still bet this can be 3 times much better than what you are seeing here. So, little of good news here that this sample can be executed on mobile

Regret to say, ball will not look like a real 3D ball in FX Mobile because of Bug ID: RT-2205, which basically speaks that Mobile Runtime don’t understand Radial Gradient, hoping this will be fixed soon.

Here are the code files :

1. Main file.

2. Spring file.

3. SpringEquation file.

Enjoy FX’ing !

If liked it, then why not share!

Me and Vikram was looking today some of the cool flash examples and I have seen the button effect at some place, when you press the button it really goes like inside and coming out. But that was an effect achieved by the images(two different images, one unpressed button and one pressed button) and then we thought to simulate this effect by code. Somehow we are able to do that in FX, here is the final outcome:

What we have tried to do is pressing one button will put the other in unpressed mode and vice-versa. This has been achieved by some of the cool API’s of JavaFX. And we have used the DistantLight effect of JavaFX which gives a lighting effect in its awesome way. Actually this can be more cooler but I left that for developer to modify it according to their need :). But this is a modular code and can be used in any of the button place.

Here is the simple code for the same(again code is not written in the most optimized way but in the best way for understanding) :

package lighteff;

import javafx.scene.effect.light.DistantLight;
import javafx.scene.effect.Lighting;
import javafx.scene.Group;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;
import javafx.stage.StageStyle;

var factor = 5;
var scale = 1.0;
var factor1 = 10;
var scale1 = 0.85;

Stage {
    title: "Control Panel"
    width: 290
    height: 180
    style: StageStyle.UNDECORATED
    scene: Scene {
        fill: Color.BLACK
        content: [
            Group {
                effect: Lighting {
                    light: DistantLight {
                        azimuth: 90
                        elevation: 60
                    }
                    surfaceScale: bind factor
                }
                content: [
                    Circle {
                        centerX: 100,
                        centerY: 100
                        radius: 40
                        fill: Color.RED

                        onMousePressed: function( e: MouseEvent ):Void {
                            scale = 0.85;
                            factor = 10;
                            scale1 = 1.0;
                            factor1 = 5;
                        }
                    },
                    Text {
                        fill: Color.WHITE
                        scaleX: bind scale
                        scaleY: bind scale
                        font: Font {
                            size: 24
                        }
                        x: 71,
                        y: 105
                        content: "Press"
                    }
                ]
            },
            Group {
                effect: Lighting {
                    light: DistantLight {
                        azimuth: 90
                        elevation: 60
                    }
                    surfaceScale: bind factor1
                }
                content: [

                    Circle {
                        centerX: 200
                        centerY: 100
                        radius: 40
                        fill: Color.BLUE
                        onMousePressed: function( e: MouseEvent ):Void {
                            scale1 = 0.85;
                            factor1 = 10;
                            scale = 1.0;
                            factor = 5;
                        }
                    },
                    Text {
                        fill: Color.WHITE
                        scaleX: bind scale1
                        scaleY: bind scale1
                        font: Font {
                            size: 24
                        }
                        x: 171,
                        y: 105
                        content: "Press"
                    }
                ]
            }
        ]

    }
}  

If liked it, then why not share!

Any middle or big application demands to change one window to other at some point of time. A window type of thing in JavaFX is represented by Scene and its each to switch between scene or to run multiple scenes.

Here is a small application in which clicking on image will put you in another window, written “Hello World”

package sample6;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.input.MouseEvent;

var s_new:Scene;
var s = Scene {
   content: [
       Text {
           font: Font {
               size: 24
           }
           x: 10,
           y: 30
           content: "HelloWorld"
       }
   ]
};

var s1 = Scene {
   content: [
       ImageView {
           image: Image {
               url: "{__DIR__}im2.PNG"
           }
           onMouseClicked: function( e: MouseEvent ):Void {
               s_new = s;
           }
       }
   ]
};

s_new = s1;
Stage {
   title: “Application title”
   width: 250
   height: 280
   scene: bind s_new
}

So, its simple, on mouse click, I have bind a scene variable with a new scene. That’s it !

If liked it, then why not share!