Contact us Create app

Add-on Directory

← Back

FieldBinder

FieldBinder is a single field binding buffer, a little sibling to Binder with similar API

Author

Contributors

Rating

Links

Popularity

<100

FieldBinder Add-on for Vaadin 8 & 10+

FieldBinder is a little sibling of Binder for special case of single field bindings. FieldBinder enables to use same Converters, Validators and similar API to Binder with single field binding.

FieldBinder connects one Field component with value with one direction binding.

A binder is a binding, representing the mapping of a single field, through converters and validators, and acts as a buffer for bound value.

A binder instance can be bound to a single value and field instance at a time, but can be rebound as needed.

This add-on does not have client side implementation, widgetset compilation is not needed.

Sample code

        // Binder with integer
        FieldBinder<Integer> integerFieldBinder = new FieldBinder<>();
        TextField integerField = new TextField("Input number");

        // Text field with Integer value Converter and Validator
        // Demoing how to detect if value is valid and how to get it from FieldBinding
        FieldBinding<Integer> integerBinding = integerFieldBinder.forField(integerField)
        		.withConverter(new StringToIntegerConverter("This is not a number"))
        		.withValidator(new IntegerRangeValidator("Give a number between 5 and 10",5,10))
        		.bind(integerValue);

Compatibility

(Loading compatibility data...)

Last updated: 2019-12-30

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Version 2.0.0

  • Migrated the add-on for Vaadin 14 (works probably also with 10-13)
Released
2019-12-30
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 10+
Vaadin 8.0+ in 0.2.0
Browser
Browser Independent

MediaQuery - Vaadin Add-on Directory

Simple extension to bind CSS Media query in Java, help to build responsive UI MediaQuery - Vaadin Add-on Directory
## Feature 1 Add CustomMediaQuery in your view with a action and a Media query. When the result of the CSS media query result changed, call the action. This helps to build responsive UI from the Java side. For example, you can show a component only if the width of the view is less than 800px. ## Use Case Display or hide a column for a Vaadin Grid if screen size < 1000px ## Feature 2 Use ClientMediaQuery to update your styles from Java. ## Feature 3 ElementMediaQuery is similar to CustomMediaQuery but you can apply the Media Query to an element. For example, you can show a component only if the width of the component is less than 800px. It's based on ResizeObserver so not working in Internet Explorer 11. https://caniuse.com/#feat=resizeobserver It's heavier than CustomMediaQuery since it emulates the native media query to an element in Javascript. You can find an example in github.
Source Code
Issue tracker

MediaQuery version 1.0.0

MediaQuery version 1.0.1
Add constructor param and check Vaadin 10 compatibility

MediaQuery version 1.0.2
Add ClientMediaQuery that allows applying client side media queries without a client -> server -> client roundtrip, by binding the element it to another element and setting it's css directly as soon as the media query `matches` . Thanks a lot for @appreciated for his pull request.

MediaQuery version 1.0.3

MediaQuery version 2.0.0
Update for Vaadin 14 - it should work in NPM and bower mode but only NPM tested. Update iron-media-query version 3.0.1 For Vaadin 10 to 13 use 1.0.3 version.

MediaQuery version 2.0.1
Remove warning when js is imported.

MediaQuery version 2.0.2
Upgrade json library version

MediaQuery version 2.0.3
Fix one issue with spring boot https://github.com/jcgueriaud1/custom-media-query/issues/4

MediaQuery version 3.0.0
Remove all the deprecated calls and HtmlImport. This version is working in Vaadin 14+, tested with Vaadin 14.2.0 and Vaadin 16.0.0.rc2. The compatibility mode support has been dropped. Use version 2.0.3 if you are using Vaadin 14 in compatibility mode.

MediaQuery version 4.0.0
Add ElementMediaQuery. It's based on ResizeObserver so not working in Internet Explorer 11. https://caniuse.com/#feat=resizeobserver It's heavier than CustomMediaQuery since it emulates the native media query to an element in Javascript. You can find an example in github.

MediaQuery version 4.0.1
Fix a bug for the initial version of the Element Media Query, add a new demo

MediaQuery version 4.0.2
Fix a javascript error when the element is not defined https://github.com/jcgueriaud1/custom-media-query/issues/9

MediaQuery version 5.0.2
Remove polymer template and dependencies. Now it's written in Lit.

MediaQuery version 5.0.3
Add null check for window.visualViewport

Online