Swarm of XeBees

If you want to have Marquee effect i.e automatic scrolling of text from left to right or down to up in JavaFx, you need to write a custom component of your own.

Using a Marquee tag of HTML doesn't work, if you try to use directly in a label text or a swing component in JavaFx, unlike other html tags which works fine.

The easiest way is to extend your ScrollingText class with javafx.scene.CustomNode class and animate it by changing the component's co-ordinates using javafx.animation.Timeline and javafx.animation.KeyFrame classes;

The following TextScroll.fx file acts a scrolling text custom class :

import javafx.animation.KeyFrame;
import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.paint.Paint;
import javafx.scene.text.Text;
import javafx.scene.text.TextOrigin;
import javafx.scene.shape.Rectangle;
import javafx.animation.Timeline;

public class TextScroll extends CustomNode
{
    public var x: Number;
    public var y: Number;
    public var width: Number;
    public var height: Number;
    public var stroke: Paint;
    public var strokeWidth: Number;
    public var delay = 10ms;
    var scrollingText: Text;

    public var text: String on replace
    {
        if (isScrollingText ())
            scrollingText.translateY = 0.0;
    }
    override public function create(): Node
    {
        Group
        {
            content:
            [
                scrollingText = Text
                {
                    content: bind text
                    textOrigin: TextOrigin.TOP
                    x: bind x
                    y: bind y+(height-10)/2
                }
            ]
            clip: Rectangle
            {
                x: x
                y: y
                width: bind width
                height: bind height
            }
        }
    }

    public function isScrollingText ()
    {
        autoTimer.running
    }

    public function scrollUp ()
    {
       autoTimer.play();
    }

    public function stopScrolling ()
    {
        autoTimer.stop ()
    }

     var autoTimer = Timeline
    {
        repeatCount: Timeline.INDEFINITE

        keyFrames:
        [
            KeyFrame
            {
                time: delay
                action: function ()
                {
                    if (scrollingText.translateY+height < 0)
                    {
                        scrollingText.translateY = 0.0;
                        return
                    }
                    scrollingText.translateY -= 0.5
                }
            }
        ]
    }

}

Variable delay (line number 19 in TextScroll.fx) controls the speed of the scrolling.
Now, to use this animation, you can use the following code snippet which declares a text line that you want to scroll up automatically.

file DemoScrollingText.fx

import com.utility.TextScroll;
...
var textScrollerObj = TextScroll
{
     text: "Hi!! This text scrolls down to up automatically...";
     width: 500;
     height: 200;
     stroke: Color.BLACK
     strokeWidth: 1.0
     fill: Color.BLACK
}
....
...

after that, just initiate the scrolling of your text by calling the scrollUp() and stop by stopScrolling() function of your TextScroll class.

button = Button {
     strong:true;
     text :"Scroll Text"'
     action: function(){
     textScrollerObj.scrollUp();
  }
}

You can change the direction of text scroll from right to left by changing the TextScroll file as:

...
textRef = Text
{
...
x: bind x+width
y: bind y+(height-10)/2
}
...
action: function ()
{
if (scrollingText.translateX+width < 0)
{
     scrollingText.translateX = 0.0;
     return
}
     scrollingText.translateX -= 0.5
}

Optionally, you can add text effects like shadow to this text and encapsulate this in a Frame or Rectangle and bind its coordinates with your TextScroll's coordinates.

Filed under: Creativity, HTML, Java, JavaFX, UI