combobox | Tech Tips & Tricks

How To Go To Item In ComboBox On Keypress In Java FX 2

July 19, 2013 by blogmeister·0 Comments

This was annoying to begin with. In Swing, you do not have to worry about this because this feature is already part of it. In Java FX 2 however, it is not and I had to create a key listener to have the ComboBox select the first item that it comes across with that starts with the key character pressed.

And there is also another problem. If the ComboBox has so many items and the setVisibleRowCount() value is less than the number of the list size, it will not scroll down if the item selected is beyond the maximum visible row value.

It also took me some time to figure out how to get hold of the ListView reference from the ComboBox since this control is a combination of multiple controls: ListView, TextField and Button to name a few. You can only get hold of the ListView object from ComboBox if the popup is shown. Otherwise, you will get a NullPointerException.

So here is the key listener code.

public class SelectKeyComboBoxListener implements EventHandler<KeyEvent> {
    private ComboBox comboBox;
    private StringBuilder sb = new StringBuilder();
    public SelectKeyComboBoxListener(ComboBox comboBox) {
        this.comboBox = comboBox;
        this.comboBox.setOnKeyReleased(SelectKeyComboBoxListener.this);
        this.comboBox.addEventFilter(KeyEvent.KEY_RELEASED, new EventHandler<KeyEvent>() {
            @Override
            public void handle(KeyEvent event) {
                if (event.getCode() == KeyCode.ESCAPE && sb.length() > 0) {
                    sb.delete(0, sb.length());
                }
            }
        });
        // add a focus listener such that if not in focus, reset the filtered typed keys
        this.comboBox.focusedProperty().addListener(new ChangeListener() {
            @Override
            public void changed(ObservableValue observable, Object oldValue, Object newValue) {
                if (newValue instanceof Boolean && !((Boolean) newValue).booleanValue())
                    sb.delete(0, sb.length());
                else {
                    ListView lv = ((ComboBoxListViewSkin) SelectKeyComboBoxListener.this.comboBox.getSkin()).getListView();
                    lv.scrollTo(lv.getSelectionModel().getSelectedIndex());
                }
            }
        });
        this.comboBox.setOnMouseClicked(new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent event) {
                ListView lv = ((ComboBoxListViewSkin) SelectKeyComboBoxListener.this.comboBox.getSkin()).getListView();
                lv.scrollTo(lv.getSelectionModel().getSelectedIndex());                
            }            
        });
    }
    @Override
    public void handle(KeyEvent event) {
        if (event.getCode() == KeyCode.DOWN || event.getCode() == KeyCode.UP || event.getCode() == KeyCode.TAB) {
            return;
        }
        else if (event.getCode() == KeyCode.BACK_SPACE && sb.length() > 0) {
            sb.deleteCharAt(sb.length()-1);
        }
       else {
            sb.append(event.getText());
        }
        if (sb.length() == 0) 
            return;
        boolean found = false;
        ObservableList items = comboBox.getItems();
        for (int i=0; i<items.size(); i++) {
            if (event.getCode() != KeyCode.BACK_SPACE && items.get(i).toString().toLowerCase().startsWith(sb.toString().toLowerCase())) {
                ListView lv = ((ComboBoxListViewSkin) comboBox.getSkin()).getListView();
                lv.getSelectionModel().clearAndSelect(i);           
                lv.scrollTo(lv.getSelectionModel().getSelectedIndex());
                found = true;
                break;
            }
        }
        if (!found && sb.length() > 0)
            sb.deleteCharAt(sb.length() - 1);
    }

public class SelectKeyComboBoxListener implements EventHandler<KeyEvent> {

private ComboBox comboBox;

private StringBuilder sb = new StringBuilder();

public SelectKeyComboBoxListener(ComboBox comboBox) {

this.comboBox = comboBox;

this.comboBox.setOnKeyReleased(SelectKeyComboBoxListener.this);

this.comboBox.addEventFilter(KeyEvent.KEY_RELEASED, new EventHandler<KeyEvent>() {

@Override

public void handle(KeyEvent event) {

if (event.getCode() == KeyCode.ESCAPE && sb.length() > 0) {

sb.delete(0, sb.length());

}

});

// add a focus listener such that if not in focus, reset the filtered typed keys

this.comboBox.focusedProperty().addListener(new ChangeListener() {

@Override

public void changed(ObservableValue observable, Object oldValue, Object newValue) {

if (newValue instanceof Boolean && !((Boolean) newValue).booleanValue())

sb.delete(0, sb.length());

else {

ListView lv = ((ComboBoxListViewSkin) SelectKeyComboBoxListener.this.comboBox.getSkin()).getListView();

lv.scrollTo(lv.getSelectionModel().getSelectedIndex());

}

});

this.comboBox.setOnMouseClicked(new EventHandler<MouseEvent>() {

@Override

public void handle(MouseEvent event) {

ListView lv = ((ComboBoxListViewSkin) SelectKeyComboBoxListener.this.comboBox.getSkin()).getListView();

lv.scrollTo(lv.getSelectionModel().getSelectedIndex());

}

});

}

@Override

public void handle(KeyEvent event) {

if (event.getCode() == KeyCode.DOWN || event.getCode() == KeyCode.UP || event.getCode() == KeyCode.TAB) {

return;

}

else if (event.getCode() == KeyCode.BACK_SPACE && sb.length() > 0) {

sb.deleteCharAt(sb.length()-1);

}

else {

sb.append(event.getText());

}

if (sb.length() == 0)

return;

boolean found = false;

ObservableList items = comboBox.getItems();

for (int i=0; i<items.size(); i++) {

if (event.getCode() != KeyCode.BACK_SPACE && items.get(i).toString().toLowerCase().startsWith(sb.toString().toLowerCase())) {

ListView lv = ((ComboBoxListViewSkin) comboBox.getSkin()).getListView();

lv.getSelectionModel().clearAndSelect(i);

lv.scrollTo(lv.getSelectionModel().getSelectedIndex());

found = true;

break;

}

if (!found && sb.length() > 0)

sb.deleteCharAt(sb.length() - 1);

}

How this works goes like this. When you type a character, it will go to the first item that matches that character, regardless of case sensitivity. If you transfer to another control, its cached characters will be removed so that when you go back to the ComboBox again, the cached string that you used to type will be reset.

You may notice that I also added an event filter for the ComboBox. This is because the ESC key does not get detected unless it is filtered. I really do not understand the inner workings but the ESC key gets detected only if it is captured in the event filter. When this happens, the keys will reset and any key you type will be considered as the first character.

I also added a mouse listener on the ComboBox so that when it is clicked and the popup list will appear, I will be able to get hold of the reference object to ListView and be able to call its scrollTo() method.

That’s it! To use this class, just call it like this:

new SelectKeyComboBoxListener(comboBox);

1	new SelectKeyComboBoxListener(comboBox);

Create Up And Down Arrow In Java FX ComboBox

May 16, 2013 by blogmeister·2 Comments

The impressive thing about Java FX is how well developers can use CSS to style the look and feel of the user interface.

The ComboBox component by default has an arrow icon pointing downward. The requirement given to me was to have two arrows, one pointing up and the other pointing down (see image). I figure the easiest would be to use an image to change it.

However, if the height of the ComboBox changes, so will the image. But since the image I had was small, it would not look good when it is expanded.

The solution I came up with was to change using an SVG or what is known is scaled vector graphics. This is more convenient and advantageous because even if it gets scaled to a smaller or bigger size, the quality of the graphics will still be the same.

In the CSS file, I did it like this.

.combo-box .arrow {
    -fx-padding: 5;
    -fx-shape: "M150 0 L150 0 L0 280 L300 280 M0 370 L300 370 L150 670 L150 670 Z";
}

.combo-box .arrow {

-fx-padding: 5;

-fx-shape: "M150 0 L150 0 L0 280 L300 280 M0 370 L300 370 L150 670 L150 670 Z";

}

Now all ComboBox components in your scene, will have the up and down arrow icon.

Adobe Flex: Set Selected Item In ComboBox

October 22, 2008 by blogmeister·16 Comments

Oddly, Flex does not let you set an item to be selected in its ComboBox component. While the selectedIndex property can be used, you would have to make your own method to loop through the ComboBox’s dataProvider contents to get the index. Luckily, someone saved us the trouble of creating our own component extending ComboBox. Use the code below to be used as a substitute component for mx:ComboBox.

<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox>
   <mx:Script>
      <![CDATA[
         private var _selectedValue:String;
         private var bSelectedValueSet:Boolean = false;
         private var bDataProviderSet:Boolean = false;
         // Override committ, this may be called repeatedly 
         override protected function commitProperties():void {
            // invoke ComboBox version 
            super.commitProperties();
            // If value set and have dataProvider 
            if (bSelectedValueSet && bDataProviderSet) {
               // Set flag to false so code won't be called until selectedValue is set again 
               bSelectedValueSet=false;
               // Loop through dataProvider 
               for (var i:int=0; i<this.dataProvider.length; i++) {
                  // Get this item's data 
                  var item:String = this.dataProvider[i].data;
                  // Check if is selectedValue 
                  if(item == _selectedValue) {
                     // Yes, set selectedIndex 
                     this.selectedIndex = i;
                     break;
                  }
               }
            }
         }
         // Trap dataProvider being set 
         override public function set dataProvider(o:Object):void {
            // invoke ComboBox version 
            super.dataProvider = o;
            // This may get called before dataProvider is set, so make sure not null and has entries 
            if (o!=null && o.length) {
               // Got it, set flag 
               bDataProviderSet = true;
            }
         }
         // set for selectedValue 
         public function set selectedValue(s:String):void {
            // Set flag 
            bSelectedValueSet = true;
            // Save value 
            _selectedValue = s;
            // Invalidate to force commit 
            invalidateProperties();
         }
      ]]>
   </mx:Script>
</mx:ComboBox>

<?xml version="1.0" encoding="utf-8"?>

<mx:ComboBox>

<mx:Script>

<![CDATA[

private var _selectedValue:String;

private var bSelectedValueSet:Boolean = false;

private var bDataProviderSet:Boolean = false;

// Override committ, this may be called repeatedly

override protected function commitProperties():void {

// invoke ComboBox version

super.commitProperties();

// If value set and have dataProvider

if (bSelectedValueSet && bDataProviderSet) {

// Set flag to false so code won't be called until selectedValue is set again

bSelectedValueSet=false;

// Loop through dataProvider

for (var i:int=0; i<this.dataProvider.length; i++) {

// Get this item's data

var item:String = this.dataProvider[i].data;

// Check if is selectedValue

if(item == _selectedValue) {

// Yes, set selectedIndex

this.selectedIndex = i;

break;

}

// Trap dataProvider being set

override public function set dataProvider(o:Object):void {

// invoke ComboBox version

super.dataProvider = o;

// This may get called before dataProvider is set, so make sure not null and has entries

if (o!=null && o.length) {

// Got it, set flag

bDataProviderSet = true;

}

// set for selectedValue

public function set selectedValue(s:String):void {

// Set flag

bSelectedValueSet = true;

// Save value

_selectedValue = s;

// Invalidate to force commit

invalidateProperties();

}

]]>

</mx:Script>

</mx:ComboBox>

To use this custom made ComboBox, if your component file is under the folder com/ui/ then you have to specify it in the xml namespace. Setting the item in the ComboBox to be selected can be done by calling the selectedValue property (see code below).

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:fx="com.ui.*">
   <fx:ComboBox id="cbx_1″ selectedValue="STRING_VALUE" width="150″ dataProvider="{DATA_PROVIDER_ID_HERE}"/>
<mx:Application>

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:fx="com.ui.*">

<fx:ComboBox id="cbx_1″ selectedValue="STRING_VALUE" width="150″ dataProvider="{DATA_PROVIDER_ID_HERE}"/>

<mx:Application>

Tech Tips & Tricks

tech tips gadgets programming software

Tag: combobox

Create Up And Down Arrow In Java FX ComboBox

Adobe Flex: Set Selected Item In ComboBox