Contextual Ribbon Tabs for the Ribbon

A small update to the Ribbon control: Contextual Ribbon Tabs.

Some controls should only appear when a particular object is selected because they only affect the configuration of that object. This is why Contextual Ribbon Tabs exist. They only appear when a particular object is selected and disappear when it looses its selection.

To differentiate themselves from regular Ribbon Tabs they appear with a different color, they can also be composed of more than one Tab. In the picture below the Contextual Ribbon Tab appears in blue.

contextualTab2

What’s new in Java 8u40

Java 8u40 is a small release but never the less has some interesting improvements:

  • Formatted textfield

Text entry control that displays formatted text such as phone number, date etc. Restricts input to a certain format and can also be used for validation of user input to a certain format. Kind of like JFormattedTextfield in Swing.

  • Dialogs

This as seen much debate from the community regarding its API. For more details on the final API read this blog post: http://code.makery.ch/blog/javafx-dialogs-official/

  • Spinner control

More details can be viewed here: https://wiki.openjdk.java.net/pages/viewpage.action?pageId=15368236

  • Accessibility support
  • Java Packager improvements

Another news is that since 8u33 ARM will no longer be officially supported. This happened because:

“This is a resource trade off within Oracle. Included in that difficult
trade off decision was the ongoing investment needed to properly support
FX in a world where so much the hardware is not standardized — it
really is difficult to have enough hardware and testing resources
committed to support FX on ARM”

Hopefully this support will unofficially continue in JavaFX Ports.

Java8u40 is scheduled to hit G.A. by early March.

Gallery control for the Ribbon

This time an update to the ribbon control. I’ve done some tweaks to the UI as well as to the API and added a new control called a Gallery.

Below you can see an image of the updated Ribbon.

ribbon2

In the next picture you’ll see the new control which is called Gallery. Although you can use it by itself, I’ve never seen it being used outside the ribbon.

gallery

The up and down arrows allow you to navigate through the list of choices. The other button will open up a popup (picture below) which gives you a full view of the choices with each choice belonging to a category.

galleryPopup

All of this is CSS and FXML friendly meaning you can declare an instance of the ribbon using FXML and you can style the ribbon to your liking by overriding the existing CSS.

Ribbon for java using javafx

The ribbon is a control that was brought up with office and has since been getting progressively more important with its inclusion in windows built in apps like Windows Explorer or MS Paint.

It replaces the use of menus, occupies more space but favors discoverability.

And so I’ve decided to create this control in java, particularly by using javafx (image below).

ribbon

(Click the image above to see it in it’s original size)

It is FXML friendly, the demo above was in itself created using FXML.

The source code is available at https://github.com/dukke/FXRibbon (the icons in the figure above are not included). There are a couple of demo apps that show how the ribbon is used.

It’s a project that is under development and so the API is very likely to change with time.

Validation in java (javafx)

Validation is one thing that’s missing from the core javafx framework. To fill in this gap there is already a 3rd party validation library that’s present in controlsfx. However there’s one issue I have with it: it wasn’t created with FXML in mind. That’s not to say it isn’t a good library, it just misses this detail and for me this is a no go. Because of that I decided to create my own validation framework: FXValidation.

How it works

To show you how FXValidation works let’s start from the bottom up, by showing you an example of what an FXML file might look like when using this library. This is a simple example of a login screen where the user needs to enter both an user name and a password:

<Label>
  <text>User Name:</text>
</Label>
<TextField fx:id="userName" id="userName"></TextField>
<Label>
  <text>Password:</text>
</Label>
<PasswordField fx:id="password" id="password"></PasswordField>

<Button text="Submit" onAction="#submitPressed"></Button>

<fx:define>
  <RequiredField fx:id="requiredField1" >
    <srcControl>
      <fx:reference source="userName"></fx:reference>
    </srcControl>
  </RequiredField>
  <RequiredField fx:id="requiredField2" >
    <srcControl>
      <fx:reference source="password"></fx:reference>
    </srcControl>
  </RequiredField>
</fx:define>

<ErrorLabel message="Please enter your username">
  <validator>
    <fx:reference source="requiredField1"></fx:reference>
  </validator>
</ErrorLabel>
<ErrorLabel message="Please enter your password">
  <validator>
    <fx:reference source="requiredField2"></fx:reference>
  </validator>
</ErrorLabel> 

On the beginning of the FXML snippet I define a textfield and password field for entering the login details. Other than that there’s also a submit button so the user may send the login information to the system. After that comes the interesting part. First we define a couple of validators of type RequiredField. This validators, check whether the input in question is empty and if so they store that the validation has errors in a flag. There’s also other types of validators built-in the FXValidation framework but we’ll get to that in a bit. Finally we define a couple of ErrorLabels. This are nodes that implement IValidationDisplay, any class that implements this interface is a class whose purpose is to display information to the user whenever there is an error in the validation process. Currently there is only one of this classes in the framework: the ErrorLabel. Finally we need to call validation when the user clicks the submit button, this is done in the controller on the submit method:

public void submitPressed(ActionEvent actionEvent) {
  requiredField1.eval();
  requiredField2.eval();
}

This will trigger validation for the validators that we have defined. If there are errors the ErrorLabels will display the error message that was defined in them. There’s also one extra thing the validators do: they add in the css style class of “error” to every control that is in error after the validation process has taken effect. This allows the programmer to style the controls differently using css whenever this controls have the error class appended to them. The programmer can check for errors in the validation process by checking the property hasErrors in the validators.

And here’s our example in action:

validation

The details

From what I’ve shown you above we can see that there are basically 2 types of classes involved:

  • The validator: takes care of checking if the target control (srcControl) conforms to the validation rule. If not it appends the “error” style class to target control sets its hasErrors property to true. All validators extend from ValidatorBase.
  • The error display information: this takes care of informing the user what went wrong with the validation, it might be that the field is required, the fields content doesn’t have the necessary number of characters, etc. All this classes implement IValidationDisplay.

In the library there are currenctly 3 validators and only one error “displayer” which is ErrorLabel. The validators are the following:

  • RequiredField: Checks whether the target control (srcControl) has content, if it doesn’t it gives an error.
  • CardinalityValidator: Checks whether the target control (srcControl) has at least a min number of characters and a maximum of max number of characters.
  • RegexValidator: Checks the content of the target control (srcControl) against a given regular expression

And that’s it.

I’d love to collaborate with ControlsFX or if someone else wants to contribute fell free to do so. So that we can achieve the definitive validation framework.

Metro style Slider for java (JMetro)

One thing that’s missing from java 8 javafx slider is the fill that comes from the beginning of the slider to the thumb. You can see this in windows 8 as well as several other operating systems: ios 6 and 7, android, etc.

So by using only CSS, it is not possible to style the fill of the slider, to accomplish this you’d have to create your own skin to use with the slider. And that’s exactly what I did by creating the “FilledSliderSkin”.

With this skin set on the slider you can style its fill color, like so:

.slider .fill {
 -fx-background-color: #00828b;
 -fx-padding: 0.333333em; 
}
.slider .fill:hover {
 -fx-background-color: #219297;
}

You can use this skin to achieve the styles of ios 6, 7 and android sliders.

And here are the screenshots of the slider with a metro style:

Slider - Dark Theme

Slider – Dark Theme

Slider - Light Theme

Slider – Light Theme