I want to layout three VerticalFieldManager in a screen with NO_VERTICAL_SCROLL. One manager should be aligned to TOP, one should be aligned to BOTTOM and the last one should consume the rest of the height between the former two.
Can it be achieved without overriding sublaout() for any Manager? The result I want to achieve is:
I layouted this screen with the following code. The problem is that I wasn't able to do it without overriding sublayout().
public class LayoutSandboxScreen extends MainScreen {
public LayoutSandboxScreen() {
super(NO_VERTICAL_SCROLL);
VerticalFieldManager vfmTop = new VerticalFieldManager(USE_ALL_WIDTH);
vfmTop.setBackground(BackgroundFactory.createSolidBackground(Color.GREEN));
vfmTop.add(new ButtonField("TOP", FIELD_HCENTER));
final VerticalFieldManager vfmCenter = new VerticalFieldManager(USE_ALL_WIDTH);
HorizontalFieldManager hfmCenter = new HorizontalFieldManager(USE_ALL_HEIGHT | FIELD_HCENTER);
vfmCenter.setBackground(BackgroundFactory.createSolidBackground(Color.RED));
hfmCenter.add(new ButtonField("CENTER", FIELD_VCENTER));
vfmCenter.add(hfmCenter);
final VerticalFieldManager vfmBottom = new VerticalFieldManager(USE_ALL_WIDTH);
vfmBottom.setBackground(BackgroundFactory.createSolidBackground(Color.BLUE));
final ButtonField btn = new ButtonField("BUTTOM", FIELD_HCENTER);
vfmBottom.add(btn);
VerticalFieldManager vfmSecond = new VerticalFieldManager(USE_ALL_HEIGHT) {
protected void sublayout(int maxWidth, int maxHeight) {
setExtent(maxWidth, maxHeight);
layoutChild(vfmBottom, maxWidth, maxHeight);
int bottomHeight = vfmBottom.getHeight();
layoutChild(vfmCenter, maxWidth, maxHeight - bottomHeight);
setPositionChild(vfmCenter, 0, 0);
setPositionChild(vfmBottom, 0, maxHeight - bottomHeight);
}
};
vfmSecond.add(vfmBottom);
vfmSecond.add(vfmCenter);
add(vfmTop);
add(vfmSecond);
}
}
Since you're already using a MainScreen, have you tried using setTitle() and setStatus() for the top and bottom VerticalFieldManager? I think that will do what you want.
Edit
If MainScreen is too specific, you can write your own MainManager, which supports the same layout components as MainScreen - banner, title, main content, status. You will have to write your own layout code though, so you'll still be implementing sublayout(), which you specifically wanted to avoid. The plus side is that this will be more composable - you won't be overriding the sublayout() method in an ad-hoc way on random UI components.
Related
In PySide you can override the paintEvent() method of a QWidget to control how the widget is painted on the screen. Is there an equivalent for Node in JavaFX?
In context: I'm in need of a way to display a custom image format on the screen. Constantly converting my format and JavaFX's Image so I can display it in an ImageView is too slow for me, in addition to being messier.
I've taken a look at ImageView.java and Canvas.java, but no luck. ImageView is using css, and Canvas appears to be doing something with the deprecated impl_ methods, for which I've found no documentation on.
Thanks!
Generally, the paint mechanisms in JavaFX changed towards a more event-based approach. To follow the JavaFX way, you should probably look at Timeline or AnimationTimer and only update the display when the actual image data changes.
However, you could use the old Swing way in JavaFX, if you like:
public class MyPane extends Pane {
private final Canvas canvas;
public MyPane() {
canvas = new Canvas(getWidth(), getHeight());
getChildren().add(canvas);
widthProperty().addListener(e -> canvas.setWidth(getWidth()));
heightProperty().addListener(e -> canvas.setHeight(getHeight()));
}
#Override
protected void layoutChildren() {
super.layoutChildren();
GraphicsContext gc = canvas.getGraphicsContext2D();
gc.clearRect(0, 0, getWidth(), getHeight());
gc.setFill(Color.RED);
gc.fillRect(10, 10, getWidth() - 20, getHeight() - 20);
// Paint your custom image here:
gc.drawImage(someImage, 0, 0);
}
}
The above code would be the equivalence of this Swing code:
public class MyPanel extends JPanel {
private static final long serialVersionUID = -969772195113348076L;
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
g.clearRect(0, 0, getWidth(), getHeight());
g.setColor(java.awt.Color.RED);
g.fillRect(10, 10, getWidth() - 20, getHeight() - 20);
// Paint your custom image here:
g.drawImage(someImage, 0, 0, null);
}
}
The following snippet contains a horizontal field manager to which five buttons are added.
1. I am unable to set horizontal scroll to the horizontal field manager because of which I am not able to access button 4 and button 5.
2. Usually we set horizontal scroll in the following manner
horizontalFieldManager =
new HorizontalFieldManager(USE_ALL_WIDTH|HorizontalFieldManager.FIELD_LEFT|HORIZONTAL_SCROLL);
but since I have added the buttons in the constructor of the horizontal field manager I am unable to use this.
3. I found this property : horizontalFieldManager.setHorizontalScroll(position);
which contains the Parameter:position where position is supposed to be the new horizontal scroll position. I tried passing the x-coordinate of the horizontal field manager but it's not working. What should i pass as the position parameter?
HorizontalFieldManager container = new HorizontalFieldManager()
{
protected void sublayout(int maxWidth, int maxHeight)
{
Field field = null;
int x = 0;
int y = 0;
int maxFieldHeight = 0;
for (int i = 0; i < getFieldCount(); i++)
{
field = getField(i);
layoutChild(field, maxWidth, maxHeight);
setPositionChild(field, x,y);
x+=field.getWidth();
if(i==0)
{
maxFieldHeight = field.getHeight(); // height set of the first button since all components have the same height
}
}
setExtent(Display.getWidth(), maxFieldHeight);
}
};
ButtonField button1 = new ButtonField("Button1");
ButtonField button2 = new ButtonField("Button2");
ButtonField button3 = new ButtonField("Button3");
ButtonField button4 = new ButtonField("Button4");
ButtonField button5 = new ButtonField("Button5");
container.add(button1);
container.add(button2);
container.add(button3);
container.add(button4);
container.add(button5);
add(container);
HorizontalFieldManager Constructor
If you simply change the way you call the HorizontalFieldManager constructor, from this:
HorizontalFieldManager container = new HorizontalFieldManager() {
protected void sublayout(int maxWidth, int maxHeight) {
to this:
HorizontalFieldManager container =
new HorizontalFieldManager(Manager.HORIZONTAL_SCROLL | Manager.HORIZONTAL_SCROLLBAR) {
protected void sublayout(int maxWidth, int maxHeight) {
then, you'll get the ability to scroll horizontally, and reach all five buttons.
sublayout()
In your sublayout() method, you appear to be laying out your fields just as HorizontalFieldManager would normally do. So, I don't think there's any point in adding that code. Simply do this:
HorizontalFieldManager container =
new HorizontalFieldManager(Manager.HORIZONTAL_SCROLL | Manager.HORIZONTAL_SCROLLBAR);
ButtonField button1 = new ButtonField("Button1");
/* the rest of your code is the same */
If you later want to control spacing between the buttons, do it with margins:
ButtonField button1 = new ButtonField("Button1");
button1.setMargin(10, 10, 10, 10);
ButtonField button2 = new ButtonField("Button2");
button2.setMargin(10, 10, 10, 10);
In general, it's usually not a good idea to use a HorizontalFieldManager, or a VerticalFieldManager and also override sublayout(). If you really want custom behavior there, you should probably just extend Manager directly with a subclass of your own.
Hello guys I am building a chat server where I use a textfield on the screen to type in the chat message that the user writes, the idea is that it works like a bubble over a persons head when he types a message.
my question is in order to not make a textbox that is too large or too small is there a way to make the textbox resize (trim if you will) so it adjust to the text written in the textfield?
P.S. I'm using JavaFx scenebuilder to do all of this.
You can use computeTextWidth method in the com.sun.javafx.scene.control.skin.Utils. the method is used in javafx.scene.control.Label class to calculate the minimum width for label content.
I solved my problem as below:
field.textProperty().addListener(new ChangeListener<String>() {
#Override
public void changed(ObservableValue<? extends String> ob, String o,
String n) {
// expand the textfield
field.setPrefWidth(TextUtils.computeTextWidth(field.getFont(),
field.getText(), 0.0D) + 10);
}
});
I have added a listener to textProperty, and with every text change i change the prefWidth of textfield.
Note: as long as the Utils.computeTextWidth() is not public, I have copied the source code to a new class (TextUtils).
Here is the full source code:
package me.jone30rw.fxcontrol;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.scene.text.TextBoundsType;
public class TextUtils {
static final Text helper;
static final double DEFAULT_WRAPPING_WIDTH;
static final double DEFAULT_LINE_SPACING;
static final String DEFAULT_TEXT;
static final TextBoundsType DEFAULT_BOUNDS_TYPE;
static {
helper = new Text();
DEFAULT_WRAPPING_WIDTH = helper.getWrappingWidth();
DEFAULT_LINE_SPACING = helper.getLineSpacing();
DEFAULT_TEXT = helper.getText();
DEFAULT_BOUNDS_TYPE = helper.getBoundsType();
}
public static double computeTextWidth(Font font, String text, double help0) {
// Toolkit.getToolkit().getFontLoader().computeStringWidth(field.getText(),
// field.getFont());
helper.setText(text);
helper.setFont(font);
helper.setWrappingWidth(0.0D);
helper.setLineSpacing(0.0D);
double d = Math.min(helper.prefWidth(-1.0D), help0);
helper.setWrappingWidth((int) Math.ceil(d));
d = Math.ceil(helper.getLayoutBounds().getWidth());
helper.setWrappingWidth(DEFAULT_WRAPPING_WIDTH);
helper.setLineSpacing(DEFAULT_LINE_SPACING);
helper.setText(DEFAULT_TEXT);
return d;
}
}
In JavaFX 8, there is a solution for that, here is the code:
TextField tf = new TextField();
// Set Max and Min Width to PREF_SIZE so that the TextField is always PREF
tf.setMinWidth(Region.USE_PREF_SIZE);
tf.setMaxWidth(Region.USE_PREF_SIZE);
tf.textProperty().addListener((ov, prevText, currText) -> {
// Do this in a Platform.runLater because of Textfield has no padding at first time and so on
Platform.runLater(() -> {
Text text = new Text(currText);
text.setFont(tf.getFont()); // Set the same font, so the size is the same
double width = text.getLayoutBounds().getWidth() // This big is the Text in the TextField
+ tf.getPadding().getLeft() + tf.getPadding().getRight() // Add the padding of the TextField
+ 2d; // Add some spacing
tf.setPrefWidth(width); // Set the width
tf.positionCaret(tf.getCaretPosition()); // If you remove this line, it flashes a little bit
});
});
tf.setText("Hello World!");
In JavaFX 2.2 this code works with little limitations. You can't set the Font(so if you do not use the std-font, you must set it manually).
You can't get the padding from a TextField(so if you know the padding, write it hardcoded).
Happy Coding,
Kalasch
Since JavaFX 8, this is by far the simplest:
textField.prefColumnCountProperty().bind(textField.textProperty().length());
It is time to do some coding behind the scenes(builder) :).
The following code chunk is not a neat solution but better than none. :)
// define width limits
textField.setMinWidth(50);
textField.setPrefWidth(50);
textField.setMaxWidth(400);
// add listner
textField.textProperty().addListener(new ChangeListener<String>() {
#Override
public void changed(ObservableValue<? extends String> observable, String oldValue, String newValue) {
textField.setPrefWidth(textField.getText().length() * 7); // why 7? Totally trial number.
}
});
No font dependent magic required if you use setPrefColumnCount
tf.textProperty().addListener(new ChangeListener<String>() {
#Override
public void changed(ObservableValue<? extends String> ob, String o, String n) {
tf.setPrefColumnCount(tf.getText().length() +1);
}
});
The best / easiest way to do this is to use JavaFX's "USE_COMPUTED_SIZE" option. You can either define it in the FXML, or programatically like this:
TextField textField = new TextField("hello");
textField.setPrefWidth(Control.USE_COMPUTED_SIZE);
I am using a loop to invoke double buffering painting. This, together with overriding my only Panel's repaint method, is designed to pass complete control of repaint to my loop and only render when it necessary (i.e. some change was made in the GUI).
This is my rendering routine:
Log.write("renderer painting");
setNeedsRendering(false);
Graphics g = frame.getBufferStrategy().getDrawGraphics();
g.setFont(font);
g.setColor(Color.BLACK);
g.fillRect(0, 0, window.getWidth(),window.getHeight());
if(frame != null)
window.paint(g);
g.dispose();
frame.getBufferStrategy().show();
As you can see, it is pretty standard. I get the grpahics object from the buffer strategy (initialized to 2), make it all black and pass it to the paint method of my "window" object.
After window is done using the graphics object, I dispose of it and invoke show on the buffer strategy to display the contents of the virtual buffer.
It is important to note that window passes the graphics object to many other children components the populate the window and each one, in turn, uses the same instance of the graphics object to draw something onto the screen: text, shapes, or images.
My problem begins to show when the system is running and a large image is rendered. The image appears to be cut into seveeal pieces and drawn again and again (3-4 times) with different offsets inside of where the image is supposed to be rendered. See my attached images:
This is the original image:
alt text http://img109.imageshack.us/img109/8308/controller.png
This is what I get:
alt text http://img258.imageshack.us/img258/3248/probv.png
Note that in the second picture, I am rendering shapes over the picture - these are always at the correct position.
Any idea why this is happening?
If I save the image to file, as it is in memory, right before the call to g.drawImage(...) it is identical to the original.
Uh, you are using Swing ?
Normally Swing automatically renders the image, you can't switch it off. The repaint()
method is out of bounds because Swing has a very complicated rendering routine due to
method compatibility for AWT widgets and several optimizations, inclusive drawing only
when necessary !
If you want to use the High-Speed Drawing API, you use a component with a BufferStrategy
like JFrame and Window, use
setIgnoreRepaint(false);
to switch off Swing rendering, set up a drawing loop and paint the content itself.
Or you can use JOGL for OpenGL rendering. The method you are using seems completely
at odds with correct Java2D usage.
Here the correct use:
public final class FastDraw extends JFrame {
private static final transient double NANO = 1.0e-9;
private BufferStrategy bs;
private BufferedImage frontImg;
private BufferedImage backImg;
private int PIC_WIDTH,
PIC_HEIGHT;
private Timer timer;
public FastDraw() {
timer = new Timer(true);
JMenu menu = new JMenu("Dummy");
menu.add(new JMenuItem("Display me !"));
menu.add(new JMenuItem("Display me, too !"));
JMenuBar menuBar = new JMenuBar();
menuBar.add(menu);
setJMenuBar(menuBar);
setIgnoreRepaint(true);
setVisible(true);
addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent evt) {
super.windowClosing(evt);
timer.cancel();
dispose();
System.exit(0);
}
});
try {
backImg = javax.imageio.ImageIO.read(new File("MyView"));
frontImg = javax.imageio.ImageIO.read(new File("MyView"));
}
catch (IOException e) {
System.out.println(e.getMessage());
}
PIC_WIDTH = backImg.getWidth();
PIC_HEIGHT = backImg.getHeight();
setSize(PIC_WIDTH, PIC_HEIGHT);
createBufferStrategy(1); // Double buffering
bs = getBufferStrategy();
timer.schedule(new Drawer(),0,20);
}
public static void main(String[] args) {
new FastDraw();
}
private class Drawer extends TimerTask {
private VolatileImage img;
private int count = 0;
private double time = 0;
public void run() {
long begin = System.nanoTime();
Graphics2D g = (Graphics2D) bs.getDrawGraphics();
GraphicsConfiguration gc = g.getDeviceConfiguration();
if (img == null)
img = gc.createCompatibleVolatileImage(PIC_WIDTH, PIC_HEIGHT);
Graphics2D g2 = img.createGraphics();
// Zeichenschleife
do {
int valStatus = img.validate(gc);
if (valStatus == VolatileImage.IMAGE_OK)
g2.drawImage(backImg,0,0,null);
else {
g.drawImage(frontImg, 0, 0, null);
}
// volatile image is ready
g.drawImage(img,0,50,null);
bs.show();
} while (img.contentsLost());
time = NANO*(System.nanoTime()-begin);
count++;
if (count % 100 == 0)
System.out.println(1.0/time);
}
}
I have created a customized BasicEditField with Border using Bitmap.Now while typing the text,it crosses the border of the BasicEditField.
This is my code
class customEditField1 extends EditField
{
Bitmap mBorder = null;
customEditField1(Bitmap borderBitmap)
{
mBorder = borderBitmap;
}
protected void paint(Graphics graphics)
{
graphics.drawBitmap(0, 0, mBorder.getWidth(),mBorder.getHeight(), mBorder, 0, 0);
super.paint(graphics);
}
}
I want to create a BasicEditField which should hide the previously entered text and displays the newly entered text and the typed text should be with in the border.It should not depends on the number of chars limit.And i want to Apply padding between the text and the border.
You can put BasicEditField into HorizontalFieldManager.
Don't forget to move border bitmap painting from BasicEditField to HorizontalFieldManager.
class ScrollEdit extends HorizontalFieldManager {
Bitmap mBorder = null;
public BasicEditField mEdit = null;
public ScrollEdit(Bitmap border) {
super(HORIZONTAL_SCROLL | NO_HORIZONTAL_SCROLLBAR);
mBorder = border;
mEdit = new EditField(BasicEditField.NO_NEWLINE);
add(mEdit);
}
protected void paint(Graphics graphics) {
graphics.drawBitmap(0, 0, mBorder.getWidth(), mBorder.getHeight(),
mBorder, 0, 0);
super.paint(graphics);
}
}
But you will have to play around with layout and setExtent to size manager and edit correctly. My advice is to try it without border bitmap first.
See Scroll BasicEditField instead of wrap
Talking about the wrap, set padding to BasicEditField within manager or add white space in border bitmap...