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 !

I will upload the applets in a day or two.

Posted in animation, utility