Thursday Jun 18, 2009

Browser + Drag + Feature + JavaFX + Profile + Many more :)

Final destination for us is death and final destination of a JavaFX application is Browser. So, we should know what all things we can do with an application, JavaFX application, in browser.

Here are some :

1. Understand when our code will run on browser and when on Desktop/Mobile and optimize the code. Here is a small one :

package appletshow;

import javafx.scene.\*;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.\*;
import javafx.scene.shape.\*;
import javafx.scene.text.\*;
import javafx.stage.\*;

/\*\*
 \* @author Vaibhav Choudhary
 \*/

var textContent = "Hello JavaFX in applet World";
var subtext = "Drag me out for this example(Alt->Drag)";
var vis = false;
var s: Stage = Stage {
    title: "Applet Show"
    width : 600 height : 200
    style: StageStyle.TRANSPARENT
    scene : Scene {
            fill: Color.BLACK
            content: [
                Text { content: textContent
                       x: 25 y:35 fill: Color.WHITE
                       font: Font{size: 24}
                }
                Text { content:  subtext
                       x: 25 y:55 fill: Color.WHITE
                       font: Font{size: 14}
                }

                Rectangle { x: 560 y: 10 width: 20 height: 20
                            arcHeight:5
                            arcWidth: 5
                            stroke:Color.GRAY
                            strokeWidth: 2
                            fill: Color.TRANSPARENT
                            visible: bind ("{__PROFILE__}" != "browser")
                            onMouseClicked: function(e: MouseEvent): Void {
                                s.close();
                            }
                }
                Text {
                    fill: Color.WHITE
                    visible: bind ("{__PROFILE__}" != "browser")
                    font : Font {
                        name:"Arial Bold"
                        size: 14
                    }
                    x: 567, y: 25
                    content: "x"
                }
                ,
            ]
    }
}

Close button will be visible only in browser not in desktop/mobile. So, this is logical, close button should not be in Browser.

2. Remeber, we have draggable feature and things can change from applet inside the browser and when it has been dragged out :).

Now, I want again that when I dragged my applet out of the browser, I get a close button which is logical again, because a dragged application is like a desktop application. So, here we go :)


package appletshow2;

import javafx.scene.\*;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.\*;
import javafx.scene.shape.\*;
import javafx.scene.text.\*;
import javafx.stage.\*;

var textContent = "Hello JavaFX in applet World";
var subtext = "Drag me out for this example(Alt->Drag)";
var vis = false;
var s: Stage = Stage {
    title: "Applet Show"
    width : 600 height : 200
    style: StageStyle.TRANSPARENT
    scene : Scene {
            fill: Color.BLACK
            content: [
                Text { content: textContent
                       x: 25 y:35 fill: Color.WHITE
                       font: Font{size: 24}
                }
                Text { content:  subtext
                       x: 25 y:55 fill: Color.WHITE
                       font: Font{size: 14}
                }

                Rectangle { x: 560 y: 10 width: 20 height: 20
                            arcHeight:5
                            arcWidth: 5
                            stroke:Color.GRAY
                            strokeWidth: 2
                            fill: Color.TRANSPARENT

                    visible: bind vis
                            onMouseClicked: function(e: MouseEvent): Void {
                                s.close();
                            }
                }
                Text {
                    fill: Color.WHITE
                    visible: bind vis
                    font : Font {
                        name:"Arial Bold"
                        size: 14
                    }
                    x: 567, y: 25
                    content: "x"
                }
                ,
            ]
    }
    extensions: [
        AppletStageExtension {
            onDragStarted: function() {
                vis = true;
            }
            onAppletRestored: function() {
                vis  = false;
            }
            useDefaultClose: false
        }
    ]
}

Points to remember : a. useDefaultClose : false, it will vanish the default close button else it will be a mess, seeing too many close buttons. b. AppletStageExtension has lot of other features, please check the API. c. Close button should vanish once it goes back into the browser. 

3. Ah, now most important about dragging feature. I don't want to drag applet with Alt-> Drag feature, I want it should be draggable in simple style like we do with other application, NO COMPLICATION. Use this :)



package shoulddrag;

import javafx.lang.FX;
import javafx.scene.input.MouseEvent;
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.AppletStageExtension;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;

/\*\*
 \* @author Vaibhav Choudhary
 \*/

var isApplet = "true".equals
(FX.getArgument("isApplet") as String);
var inBrowser = isApplet;
var dragRect: Rectangle;
var draggable = AppletStageExtension.appletDragSupported;
dragRect = Rectangle {
    x: 0
    y: 0
    width: 240
    height: 40
    opacity: 0.5
    fill: LinearGradient {
        startX: 0.0
        startY: 0.0
        endX: 0.0
        endY: 1.0
        stops: [
            Stop {
                color: Color.BLACK
                offset: 0.0
            },
            Stop {
                color: Color.WHITE
                offset: 0.3
            },
            Stop {
                color: Color.BLACK
                offset: 1.0
            },

        ]
    }
    onMouseDragged: function(e:MouseEvent):Void {
        print(inBrowser);
        stage.x += e.dragX;
        stage.y += e.dragY;
    }
};
var dragTextVisible = bind draggable and dragRect.hover;
var can_drag_me_text: Text = Text {
    content: "You can drag me !"
    fill: Color.BLACK
    font: Font {
        size: 12
        embolden: true
        name: "Arial Bold"
    }

    opacity: 1.0
    visible: bind dragTextVisible
    y: 20
    x: 15
};
var stage = Stage {
    title: "Should Drag"
    width: 250
    height: 280
    style: StageStyle.TRANSPARENT
    scene: Scene {
        content: [
            dragRect,
            Rectangle {
                x: 0,
                y: 40
                width: 240,
                height: 290
                fill: Color.BLACK
            },
            can_drag_me_text
        ]
    }
    extensions: [
        AppletStageExtension {
            shouldDragStart: function(e): Boolean {
                return e.primaryButtonDown and dragRect.hover;
            }
            onDragStarted: function(): Void {
                inBrowser = false;
            }
            onAppletRestored: function(): Void {
                inBrowser = true;
            }
            useDefaultClose: true
        }
    ]
}

Some complication are in code, but be relaxed and see, too easy, RIGHT ? Alright ! What more we can add here...

Please let me know if there is any issue with any of the code. Thanks !

Saturday Nov 29, 2008

Image Drag with Mouse in JavaFX

So, we got a discussion here. Last week we(me, Subrata and Vikram, both my office colleagues) are discussing about dragging an image with mouse pointer in JavaFX. 

So,  this was the first code. Point is to drag an image from the same place where we first hit the mouse, like it happens when we drag a folder :

 
package sample5;

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;
import java.lang.System;

var x: Number;
var y: Number;

var im = Image {
       url: "{__DIR__}im2.PNG"
   };

var temp1:Number = 0;
var temp2: Number = 0;
var count: Integer = 1;
Stage {
   title: "Application title"
   width: 250
   height: 280
   scene: Scene {
       content: [
           ImageView {
               x: bind x - temp1
               y: bind y - temp2
               image: Image {
                   url: "{__DIR__}im2.PNG"
               }
               onMouseDragged: function( e: MouseEvent ):Void {
                   x = e.x;
                   y = e.y;
                   if(count <= 1) {
                       temp1 = e.x;
                       temp2 = e.y;
                   }
                   count++;
              }
            }
       ]

   }
}




You can see those patches of counts and flags which makes the code so unstable. And a bug, when you leave the mouse once, it cant grip the image from your mouse point again.

Subrata has written a cleaner code which works correct and here it is :

  
package mousedrag;
import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.image.ImageView; import javafx.scene.image.Image; import javafx.scene.input.MouseEvent;
/\*\* \* @author Subrata Nath \*/
var imgX : Number = 20; var imgY : Number = 20; var startX : Number; var startY : Number ; var distX : Number; var distY : Number ;
    Stage {         title: "Mouse smooth drag"         width: 250         height: 280         scene: Scene {             content: [                 ImageView {                     x : bind imgX                     y : bind imgY                     image: Image {url: "{__DIR__}Mail.png"                     }                     onMousePressed: function( e: MouseEvent ):Void {                         startX = e.x;                         startY = e.y;          // Calculate the distance of the mouse point from the image top-left corner          // which will always come out as positive value                         distX = startX - imgX;                         distY = startY - imgY;                     }                     onMouseDragged: function( e: MouseEvent ):Void {                         // Find out the new image postion by subtracting the distance part from the mouse point.                         imgX = e.x - distX;                         imgY = e.y - distY;                     }                 }             ]
        } }



About

Hi, I am Vaibhav Choudhary working in Sun. This blog is all about simple concept of Java and JavaFX.

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today