Wednesday, 9 April 2014

FX 2.2 to FX 8.0 Part 8 (button action)

All buttons ready ?  Ok then sound, camera, action ..... sorry only space works now enter has been fired !?

In FX 2.2 when a button has focus and you press the Enter key it animated a press and fired an on action event. This doesn't seem to happen anymore in FX 8.0 !?  Only space works now. It doesn't matter if you've set the action in code,  button.setOnAction( someAction );  or if you've set it in FXML, onAction="#handleAction",  the result is the same - i.e. no action on Enter only Space.

Try it yourself, here's a code snippet to quickly test:
public class ButtonTest extends Application
{
   public void start( Stage primaryStage )
   {
       final Button but = new Button( "Press Me" );
        but.setOnAction( new EventHandler<ActionEvent>()
       {
           private int count = 1;
           public void handle( ActionEvent arg0 )
           {
               but.setText( "Button Pressed: "+ count++ );
           }
       } );

       BorderPane bp = new BorderPane();
       bp.setPadding( new Insets( 10 ) );
       bp.setCenter( but );

       Scene scene = new Scene( bp, 200, 50 );
       primaryStage.setScene( scene );
       primaryStage.show();

       but.requestFocus();
   }
   public static void main( String[] args )
   {
       launch( args );
   }
}
Apparently this change is by design, see RT-28779  Thankfully this isn't a trainsmash in my app, and where I wanted or needed Enter to work I simply added a key pressed handler,  button.setOnKeyPressed( enterAction );  or added the handler into my FXML with onKeyPressed="#handelEnter"  where the handle method is implemented as:

public void handle( KeyEvent KE )
{
   if ( KE.getCode() == KeyCode.ENTER )
   {
      if ( ! button.isArmed() ) button.fire();
   }
}

Note that the isArmed test is needed otherwise in FX 2.2 the action event will be executed twice.

Alternatively you can try  button.setDefaultButton( true )  instead of the above. Note however that the button style changes and that it responds to Enter even when not focused.

Next up, two minor TabPane issues .... see part 9.

FX 2.2 to FX 8.0 Part 9 (tabs & tabpane)

I have a calendar type control that has two vertical tab panes. The one has month tabs and the other day tabs, both on the left-hand side (none of the tabs have any content.) No preferred, min or max sizing was specified and this is how it looked in FX 2.2:



But in FX 8.0 the default calculated width of the tab panes differs from the above with a much more expanded result. (In the image below I've already started clamping the width so that I could show it here, otherwise it would have been too wide):


This seems to be related to RT-31744 (fixed for 8u20) where the width of the tabHeaderArea is included in the prefWidth calculation even when the tabs are vertical. I confirmed this by changing the number of month and day tabs to see if it affected the width, which it did. A temporary fix was to simply specify a maximum width for the two tab panes:



Lastly while trying out FX 8.0 Caspian I noticed a cosmetic change from Caspian FX 2.2 in that a selected tab now has a dotted border when focused:


If you don't like this, which I didn't, you can change it in your apps CSS file with the following entry:
.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator
{
    -fx-border-style: solid;
    -fx-border-insets: -2 -2 -4 -3;
    -fx-border-width: 1 1 0 1;
    -fx-border-radius: 2 2 0 0;
}
The above is a modified version from Modena, and results in the following in FX 8.0 Caspian:


And this is what is looks like when using Modena:


While this is the original Modena style:



Well that's it for now ....