Hello After working some couple of days on Javafx 2.0 Custom Control. I came to the final result of my Custom Control. The Custom Control which I’m going to tell you is about “Auto-Fill TextBox” . This control consists of two major controls they are TextBox and ListView with a Popup where Listview is embedded.

Features of this textbox

  1. AutoFill Textbox on item selection with keys.
  2. Filter Mode

Let’s start these features one by one. To start using this control you can first download the Jar package or see Documentation first.

How to get Started

First download the jar file ‘AutoFillTextBox.jar’ from here. Then add the jar file to the Library of your current JavaFX Project where you want to implement this control. (PLEASE ADD jfxrt.jar ALSO TO YOUR PROJECT LIBRARY).

Now Let’s start the coding phase . On coding we’ll be working with the features presented in TextBox.

1. AutoFill Textbox on item selection with keys.

package test;

import np.com.ngopal.control.AutoFillTextBox;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

/**
 *
 * @author Narayan G. Maharjan
 * @see  Blog 
 */
public class ControlTest extends Application {

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        Application.launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("AutoFillTextBox without FilterMode");

        //SAMPLE DATA
        ObservableList data = FXCollections.observableArrayList();
        String[] s = new String[]{"apple","ball","cat","doll","elephant",
            "fight","georgeous","height","ice","jug",
             "aplogize","bank","call","done","ego",
             "finger","giant","hollow","internet","jumbo",
             "kilo","lion","for","length","primary","stage",
             "scene","zoo","jumble","auto","text",
            "root","box","items","hip-hop","himalaya","nepal",
            "kathmandu","kirtipur","everest","buddha","epic","hotel"};

            for(int j=0; j<s.length; j++){
                data.add(s[j]);
            }

        //Layout
        HBox hbox = new HBox();
        hbox.setSpacing(10);
        //CustomControl
        final AutoFillTextBox box = new AutoFillTextBox(data);
        //Label
        Label l = new Label("AutoFillTextBox: ");
        l.translateYProperty().set(5);
        l.translateXProperty().set(5); 

        hbox.getChildren().addAll(l,box);
        Scene scene = new Scene(hbox,300,200);

        primaryStage.setScene(scene);
        scene.getStylesheets().add("/test/control.css");
        primaryStage.setVisible(true);

    }
}

CSS(control.css)

.autofill-text {
    -fx-skin: "np.com.ngopal.control.AutoFillTextBoxSkin";
}

Output

AutoFill TextBox

 

 

2. Filter Mode

You can easily set the Filter Mode on/off  by using setFilterMode(boolean filter) . Let’s see the example of this FilterMode.

package test;

import np.com.ngopal.control.AutoFillTextBox;
import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

/**
 *
 * @author Narayan G. Maharjan
 * @see  Blog 
 */
public class ControlTest extends Application {

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        Application.launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("AutoFillTextBox without FilterMode");

        //SAMPLE DATA
        ObservableList<String> data = FXCollections.observableArrayList();
       String[] s = new String[]{"apple","ball","cat","doll","elephant",
            "fight","georgeous","height","ice","jug",
             "aplogize","bank","call","done","ego",
             "finger","giant","hollow","internet","jumbo",
             "kilo","lion","for","length","primary","stage",
             "scene","zoo","jumble","auto","text",
            "root","box","items","hip-hop","himalaya","nepal",
            "kathmandu","kirtipur","everest","buddha","epic","hotel"};

            for(int j=0; j<s.length; j++){
                data.add(s[j]);
            }

        //Layout
        VBox vbox = new VBox();
        vbox.setSpacing(10);
        //CustomControl
        final AutoFillTextBox box = new AutoFillTextBox(data);
        box.setListLimit(10);
        box.setFilterMode(true);
        box.getListview().setVisible(false);

        //Here we are using external Listview instead of AutoFillTextBox's
        ListView list = new ListView();
        list.itemsProperty().bind(box.getListview().itemsProperty());

        //Label
        Label l = new Label("AutoFillTextBox: (Filter Mode 'ON')");
        l.translateYProperty().set(5);
        l.translateXProperty().set(5); 

        vbox.getChildren().addAll(l,box,list);
        Scene scene = new Scene(vbox,300,200);

        primaryStage.setScene(scene);
        scene.getStylesheets().add("/test/control.css");
        primaryStage.setVisible(true);

    }
}

CSS is just same as of previous example
Output:

FilterMode on AutoFillTextBox usage

 

Thanks for watching this blog. If you have any queries then please comment without hesitation.

Have a :) good day.