Feeds:
Posts
Comments

Archive for September, 2012

After a long time, i took some time to write the blog. This is my first blog on JavaFX 2.2.Got inspired after seeing some text field with close button like spotlight in mac and other applications.

The code in this blog can be improved using css.

TextField realized on the stage.


Image showing the close button in the text field after typing some characters.


Selected content of the textfield.

Functionality of the this textfield

  •  Show the textfield with close button when characters are typed.
  • Remove the content of the textfield when the close button is clicked & close button gets disappear.
  • Remove the content of the textfield when user selects the characters or delete the character by character , the close button gets disappear.
FileName : CustomTextField.java

package customtextfieldjavafx;

import javafx.event.EventHandler;
import javafx.geometry.HPos;
import javafx.scene.Group;
import javafx.scene.control.TextField;
import javafx.scene.input.KeyEvent;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.RectangleBuilder;

/**
 *
 * @author Lawrence PremKumar
 */
public class CustomTextField extends Group {

    TextField tc = null;
    Group closeButton = null;

    public CustomTextField() {
        tc = new TextField();
        tc.setStyle(".text-field,.text-field-focused");
        tc.setOnKeyTyped(new EventHandler() {
            @Override
            public void handle(KeyEvent event) {

                System.out.println(tc.getText().length());
                if ((tc.textProperty().get().length() < 0) || (tc.textProperty().get().equals(""))) {                     closeButton.setVisible(false);                 } else if (tc.textProperty().get().length() > -1) {
                    closeButton.setVisible(true);
                }
            }
        });

        closeButton = getCloseButton();
        closeButton.setOnMouseClicked(new EventHandler() {
            @Override
            public void handle(MouseEvent t) {
                closeButton.setVisible(false);
                tc.clear();
            }
        });

        GridPane grid = new GridPane();
        grid.setLayoutX(1.0);
        grid.setLayoutY(1.0);
        grid.setHgap(0.0);
        ColumnConstraints txtComponent = new ColumnConstraints();
        txtComponent.setHalignment(HPos.RIGHT);
        grid.getColumnConstraints().add(txtComponent);
        ColumnConstraints closeBtn = new ColumnConstraints();
        closeBtn.setHalignment(HPos.LEFT);
        grid.getColumnConstraints().add(closeBtn);
        grid.add(tc, 0, 0);
        grid.add(closeButton, 1, 0);

        Rectangle focusBorder = new Rectangle();
        focusBorder.setFill(null);
        focusBorder.setStrokeWidth(2.0);
        focusBorder.setStroke(Color.web("#097dda"));
        focusBorder.widthProperty().bind(grid.widthProperty().add(2));
        focusBorder.heightProperty().bind(grid.heightProperty().add(2));
        focusBorder.visibleProperty().bind(tc.focusedProperty());

        this.getChildren().addAll(focusBorder, grid);
    }

    private Group getCloseButton() {
        Group grp = new Group();
        final Circle circle = new Circle();
        circle.setRadius(7.0);
        final Rectangle r1 = getCard();
        r1.setRotate(-45);
        final Rectangle r2 = getCard();
        r2.setRotate(45);
        grp.setOnMouseEntered(new EventHandler() {
            @Override
            public void handle(MouseEvent t) {
                circle.setFill(Color.web("#097dda"));
                r1.setFill(Color.WHITE);
                r2.setFill(Color.WHITE);
            }
        });
        grp.setOnMouseExited(new EventHandler() {
            @Override
            public void handle(MouseEvent t) {
                circle.setFill(Color.web("#4c4c4c"));
                r1.setFill(Color.web("#868686"));
                r2.setFill(Color.web("#868686"));
            }
        });
        grp.setVisible(false);
        circle.setFill(Color.web("#4c4c4c"));
        grp.getChildren().addAll(circle, r1, r2);
        return grp;
    }

    private Rectangle getCard() {
        Rectangle card = RectangleBuilder.create()
                .x(-4)
                .y(-1)
                .width(8)
                .height(2)
                .strokeWidth(1.0)
                .fill(Color.web("#868686"))
                .build();
        return card;
    }
}

Usage of the Custom TextField
FileName : CustomTextFieldJavaFX.java

package customtextfieldjavafx;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

/**
 *
 * @author Lawrence PremKumar
 */
public class CustomTextFieldJavaFX extends Application {

    @Override
    public void start(Stage primaryStage) {

        CustomTextField custTextField = new CustomTextField();
        custTextField.setLayoutX(10.0);
        custTextField.setLayoutY(10.0);

        Scene scene = new Scene(custTextField, 300, 250);
        scene.getStylesheets().add(CustomTextField.class.getResource("mycss.css").toExternalForm());
        primaryStage.setTitle("CustomTextFieldJavaFX..!");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

CSS file

/*
Document   : mycss
Created on : Sep 15, 2012, 4:18:16 PM
Author     : lawkp
Description:
Purpose of the stylesheet follows.
*/

.text-field:focused {
-fx-background-color: null;
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 1;
}

.text-field{
-fx-border-color: null;
-fx-border-radius: 0;
-fx-select-on-focus:false;
}

Read Full Post »