Skip to main content

Problem with javafx.ui.canvas.View

1 reply [Last post]
Joined: 2006-03-29

I am trying to create resizeable textfield on a Canvas. It is basically, a TextField placed in a View with a little rectangle attached at the bottom edge to allow resizing. The code seems to do what I want it to do, but the TextField does not appear on the canvas until I click on the little rectangle I use to resize it. I know it has to do with initializing the size of the View but I tried everything and just cant fix the problem. In Java i know u set the size and revalidate or repaint the component, but how is it done in javafx. Attached is my code. Can somebody have a look and advise what I m doing wrong. Many thanks!


import javafx.ui.canvas.CompositeNode;
import javafx.ui.canvas.Node;
import javafx.ui.canvas.View;
import javafx.ui.Canvas;
import javafx.ui.BorderPanel;
import javafx.ui.Panel;
import javafx.ui.TextField;
import javafx.ui.Label;
import javafx.ui.EmptyBorder;
import javafx.ui.LineBorder;
import javafx.ui.Color;
import javafx.ui.Widget;
import javafx.ui.Border;
import javafx.ui.Cursor;
import javafx.ui.canvas.Group;
import javafx.ui.canvas.Rect;
import javafx.ui.canvas.CanvasMouseEvent;
import javafx.ui.canvas.Scale;
import javafx.ui.canvas.Translate;
import java.awt.Dimension;
import java.lang.System;
import javax.swing.JComponent;

import javafx.ui.Font;

public class ResizeableTextField extends CompositeNode{
public attribute x: Number on replace{
translateX = x;
public attribute y: Number on replace{
translateY = y;
public attribute height: Number = 100 on replace {
System.out.println("1-Width "+this.width+" Height "+this.height);
public attribute width : Number = 200 on replace{
// this.compView.setSize(this.width,this.height);
System.out.println("2-Width "+this.width+" Height "+this.height);
public attribute text: String;
public attribute resizeable: Boolean = true;
public attribute fontSize: Integer = 20;
public attribute parent: Canvas = null;
private attribute thisNode: Node;
private attribute grab: Rect;
private attribute startWidth: Number;
private attribute startHeight: Number;
private attribute startX: Number;
private attribute startY: Number;
private attribute translateX: Number = 0;
private attribute translateY: Number = 0;

private attribute compView: View;
private attribute comp: Widget;


this.translateX = this.x;
this.translateY = this.y;
this.compView.setSize(this.width, this.height);

//System.out.println("Width "+this.width.intValue());
//System.out.println("Height "+this.height.intValue());


function composeNode():Node{

var grab: Rect =bind Rect{
width : 10
height: 10
visible: bind resizeable

x : bind this.width - grab.width
y : bind this.height - grab.height
fill : Color.RED
cursor: Cursor.SE_RESIZE

onMousePressed: function (e: CanvasMouseEvent) {
this.startWidth = this.width;
this.startHeight = this.height;

}// onMousePressed

onMouseDragged: function (e: CanvasMouseEvent) {
if(this.startWidth + e.dragTranslation.x > 0) {

this.width = this.startWidth + e.dragTranslation.x;

this.startWidth = width;

if(this.startHeight + e.dragTranslation.y > 0) {

this.height = this.startHeight + e.dragTranslation.y;

this.startHeight = height;

}// onMouseDragged
}// Rectangle (SE_RESIZE)

this.comp = TextField {

x: 0
y: 0
preferredSize: bind Dimension{
width: bind this.width.intValue();
height: bind this.height.intValue();


value: bind text with inverse
visible: true
background: Color{
blue: 1
green: 1
red: 1
opacity: 0

border: LineBorder{
lineColor : Color.BLACK;
thickness: 2

font: Font{
size: bind fontSize
opaque : true
}//end TextField

var compV: View = bind View{

cursor: Cursor.HAND
visible: true
onMousePressed: function (e: CanvasMouseEvent) {
this.x= thisNode.currentX;
this.y = thisNode.currentY;

onMouseDragged: function (e: CanvasMouseEvent) {
if(e.dragTranslation.x <> 0 and this.x + e.dragTranslation.x > 0){

this.translateX = this.x + e.dragTranslation.x;

}//end if

this.x = thisNode.currentX;
if(e.dragTranslation.y <> 0 and this.y + e.dragTranslation.y > 0){

this.translateY = this.y + e.dragTranslation.y;

}//end if

this.y= thisNode.currentY;


/*size: bind Dimension{
width: bind this.width.intValue();
height: bind this.height.intValue();

content: bind this.comp

}//end View

thisNode = Group{

visible: true
content: bind [ compV,

]//end content
transform: bind[
x: bind this.translateX
y: bind this.translateY

}//end Group

this.compView = compV;
return thisNode;



public class TestResizeableTextField {


Frame {
onClose: function(): Void {System.exit(0);}

title : 'Resize textfield with mouse'
background : Color.WHITE;
width : 600
height : 400
visible : true

content: Canvas {
opaque: false;
content: [ResizeableTextField {
x : 50
y : 100
width : 100
height: 200
}// textfieldResize
]// content (Canvas)
}// Canvas
}// Frame

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
Joined: 2006-03-29

Can somebody please help me out here. I have been working on this for days now and just can't find a fix for it. Thanks!