How to implement an Effect.

Question

I need to implement a ValidationEffect, is simple, after applied to a control, paints an icon (red x) in POS.TOP_RIGHT.
I have not found the documentation necessary to implement its own effect.

Answer 1

I haven't gotten into my validation part of my architecture yet but it is definitely on my todo list.
Richard, the FormPane (or maybe OverlayPane) would not be too hard to code and would work, but my first thought would have been to do this at the individual component level, giving us the flexbility to annotate each field regardless of the container/layout it is in. I'm thinking to basically embed each field in a StackPane and that StackPane can have annotations added to it, which would then appear ontop of the field. I'm wondering about the performance costs of doing this - can you see any potential drawbacks to this idea?
Here's a very rough example bit of code.
public class TestApp extends Application
    public static void main(String[] args) throws Exception
        launch(args);
    public void start(Stage stage) throws Exception
        VBox form  = new VBox(10);
        form.setStyle("-fx-padding: 20");
        form.getChildren().add(new Label("Text Field:"));
        TextField field = new TextField();
        field.setPromptText("Minimum three characters");
        ErrorAnnotation fieldAnnotation = new ErrorAnnotation(field);
        fieldAnnotation.errorVisibleProperty().bind(field.lengthProperty().lessThan(3));
        fieldAnnotation.errorMessageProperty().set("Field must be at least 3 characters long");
        form.getChildren().add(fieldAnnotation);
        form.getChildren().add(new Label("Text Area (accepts only 'zonski'):"));
        TextArea textArea = new TextArea();
        final ErrorAnnotation textAreaAnnotation = new ErrorAnnotation(textArea);
        textArea.textProperty().addListener(new ChangeListener<String>()
            public void changed(ObservableValue<? extends String> source, String oldValue, String newValue)
                textAreaAnnotation.errorVisibleProperty().set(!"zonski".equalsIgnoreCase(newValue));
                textAreaAnnotation.errorMessageProperty().set("You must type zonski in this field");
        textArea.setText("initial value"); // triggers initial validation
        form.getChildren().add(textAreaAnnotation);
        Scene scene = new Scene(form, 300, 300);
        stage.setScene(scene);
        stage.show();
    private class ErrorAnnotation extends StackPane
        private BooleanProperty errorVisible;
        private StringProperty errorMessage;
        public ErrorAnnotation(Node nodeToBeAnnotated)
            errorVisible = new SimpleBooleanProperty(false);
            errorMessage = new SimpleStringProperty();
            getChildren().add(nodeToBeAnnotated);
            AnchorPane annotationLayer = new AnchorPane();
            // this doesn't quite work as it breaks the label's mouse over
            annotationLayer.setMouseTransparent(true);
            annotationLayer.visibleProperty().bind(errorVisible);
            // probably would use some nice icons in an ImageView for a real app
            Label errorLabel = new Label("X");
            Tooltip tooltip = new Tooltip();
            tooltip.textProperty().bind(errorMessage);
            errorLabel.setTooltip(tooltip);
            errorLabel.setStyle("-fx-text-fill: #900; -fx-padding: 0 3 0 3; -fx-background-color: #f99; -fx-border-color: #900");
            AnchorPane.setTopAnchor(errorLabel, 2.0);
            AnchorPane.setRightAnchor(errorLabel, 6.0);
            annotationLayer.getChildren().add(errorLabel);
            getChildren().add(annotationLayer);
        public BooleanProperty errorVisibleProperty()
            return errorVisible;
        public StringProperty errorMessageProperty()
            return errorMessage;
}You could use the same idea to add any kind of annotation (e.g. on mouse over show a 'get help' button that you can click, etc) or you could do a dimming of the field, etc (set an overlay with a semi-transparent colour) and other similar things.
There's one functional problem with the above code currently. I need to turn off mouse events for the AnchorPane (i.e. setMouseTransparent) to allow mouse events to go through to the field, but this then stops the little red X from getting its mouse events so we lose the tooltip. I guess I could use a Group and manually do the anchoring myself, but is there an easier way to make a parent not get mouse events and yet still allow a child to get them?
I'd also love to know how to do the second validation via bindings. Is there a way to say something like booleanProperty.bind(stringProperty.equalToIgnoreCase("zonski"))? I feel like I am not always making the most of bindings in my code. They seem so powerful but I often just end up resorting back to listeners as they are simple :)
When I get round to looking at validations properly (probably need to do this in a couple of weeks for my project), then I would pull all this out into a more generic validations framework. Ideally basing it around [url http://musingsofaprogrammingaddict.blogspot.com/2009/01/getting-started-with-jsr-303-beans.html]JSR 303 Bean Validations and merging this with some property binding stuff. Something like that anyway.
Long term it would be cool if there was just an annotation layer on the base Control that we could hook into. Something along the lines of what the SwingX guys (respect) were going for with Decorators - except built into the core library instead of having to be hammered into the back of it.
As a general comment, I think it's better if the base framework has a way for annotating nodes (i.e. the base building blocks) and a validation framework (i.e. the higher level api) was more an open-source community project so it is not tied to the same release schedule and doesn't add bloat to the base codebase (e.g. when you guys get this stuff working on mobile devices people will want little jars). Some people may rather use CSS for their validation markup for example, others may not want to annotate fields but will want to show a message pane at the top or side of the view, etc - the styles out there vary hugely depending on the GUI style. Who knows what people will come up with now they have animations and effects, and soon 3D, in their bag of tricks too! It's an exciting time ahead of us in this brave new world - JFX2 is a game changer in my book (respect :) ).
Cheers,
zonski