Directory

← Back

ProtoTools

Mini framework of opinionated components for rapid development of proto apps

Author

Rating

Popularity

<100

Intro

Vaadin 21 components for creating quick prototype applications or otherwise rapid small application development. This is sort of mini framework on top of Vaadin. The components are opinionated. The API of the components is kept purposefully minimal. Thus ProtoTools can be seen as a opionated mini framework for low code application development.

Components

Form

Form that populates automatically based on the bean, using FieldFactory (see DataModel)

List or Bean properties can be added too (uses PopupListEdit or PopupForm)

ListEdit

List editor based on AutoGrid. So it inherits its responsive features. Value of the ListEdit is the list of the items in it. I.e. this is not a selection component.

AutoGrid

Grid with Editor auto generation using FieldFactory (see DataModel)

List or Bean properties can be added too (uses PopupListEdit or PopupForm)

Grid is responsive, when you resize browser to be narrow, only one compact column with four first properties is shown and editor is shown as popup dialog instead.

PopupListEdit

ListEdit in a Dialog

PopupForm

Form in a Dialog

GridCrud

Simple Grid + Form aside Grid CRUD view.

GridCrud

Simple Grid + Form as popup dialog CRUD view.

Dashboard

Rudimentary Dashboard component with drag and drop support. New widgets can be added and widgets can be replaced (e.g. for content / data update).

Wizard

Wizard aka Stepper type component for splitting complex forms to multiple paged sub-forms.

Component extending AppLayout with menu automatically generated from Route registry. The @PageTitle is used for menu titles and class name as fall back. Routes without parameters are generated as RouteLinks, and Routes with parameters as TextFields where you can input the parameter. (Route templates are not supported)

Data model

ProtoTools is purposed for simple applications, which you want to build fast. Thus data model is assumed to be relatively straightforward.

Many of the components are using BeanValidationBinder internally. This means that for data validation you can use JSR-303 annotations in the entities.

Components use FieldFactory which uses the following data type mapping of the bean properties.

  • String -> TextField
  • Date, LocalDateTime -> DateTimePicker
  • LocalDate -> DatePicker
  • Enum -> ComboBox (Enum constants are automatically used as set of items to select from)
  • Boolean -> Checkbox
  • Double -> NumberFied
  • Integer -> IntegerField
  • LocalTime -> TimePicker
  • BigDecimal -> BigDecimal

Other data types are just skipped and custom fields are not supported.

ProtoTools could be used also when data model is slightly more complex by introducing DTO layer that fits in.

Sample code

public class MainLayout extends MenuLayout {
    
    public MainLayout() {
        // Just set menu and app title, the rest is generated
        // automatically
        setAppTitle("ProtoTools");
        setMenuTitle("Menu");
    }
}
@PageTitle("Grid Crud")
@Route(value = "crud", layout = MainLayout.class)
public class CrudView extends Div {

    public CrudView() {
        GridCrud<Person> crud = new GridCrud<>(Person.class, false);
        crud.setItems(new Person(), new Person(), new Person());
        // Show three properties in Grid
        crud.setGridProperties("firstName", "lastName", "gender");
        // Show all needed properties in the form
        crud.setFormProperties("firstName", "lastName", "gender", "weight",
                "email", "dateOfBirth");
        // Add list editor for car list in the form
        crud.addListProperty("cars", Car.class,
                Void -> new Car("Kia", "Ceed"), "brand", "model");
        // Add sub form for license property
        crud.addBeanProperty("license", License.class, "license", "licensor");

        add(crud);
    }
}
        ListEdit<Person> listEdit = new ListEdit<Person>(Person.class,
                Void -> new Person());
        // Configure columns
        listEdit.setColumns("firstName", "lastName", "gender", "weight",
                "email", "dateOfBirth");
        listEdit.addListColumn("cars", Car.class,
                Void -> new Car("Kia", "Ceed"), "brand", "model");
        listEdit.addBeanColumn("license", License.class, "license", "licensor");

        // List editor is a field, you can bind it
        binder.forField(listEdit)
                .withValidator(value -> value.size() == requiredPersons,
                        "Input required entries")
                .bind(PersonRoster::getPersons, PersonRoster::setPersons);
        binder.setBean(personRoster);
        // Instantiate a new form
        Form<Person> autoForm = new Form<>(new Person(), Person.class, false);
        // Configure properties
        autoForm.setProperties("firstName", "lastName", "gender", "weight",
                "email", "dateOfBirth");
        autoForm.addListProperty("cars", Car.class,
                Void -> new Car("Kia", "Ceed"), "brand", "model");
        autoForm.addBeanProperty("license", License.class, "license",
                "licensor");

        // Form is a field, you can listen to value changes or bind it
        autoForm.addValueChangeListener(event -> {
            Dialog dialog = new Dialog();
            // You can use the form as bean viewer in readonly mode
            Form<Person> form = new Form<>(event.getValue(), Person.class);
            form.setReadOnly(true);
            dialog.add(form);
            dialog.open();
        });
        // Instantiate a new AutoGrid
        AutoGrid<Person> autoGrid = new AutoGrid<>(Person.class, false);
        autoGrid.setItems(new Person(), new Person(), new Person());
        // Set it be responsive
        autoGrid.setResponsive(true);
        // Configure columns
        autoGrid.setColumns("firstName", "lastName", "gender", "weight",
                "email", "dateOfBirth");
        autoGrid.addListColumn("cars", Car.class,
                Void -> new Car("Kia", "Ceed"), "brand", "model");
        autoGrid.addBeanColumn("license", License.class, "license", "licensor");
        // Nothing else is needed, the editor and responsiveness is generated
        // automatically

Compatibility

(Loading compatibility data...)

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 1.2.2:

  • Small code refactoring to allow more stabile compilation
Released
2022-08-05
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 23+
Vaadin 21+ in 1.1.0
Browser
Firefox
Opera
Safari
Google Chrome
iOS Browser
Android Browser
Microsoft Edge

ProtoTools - Vaadin Add-on Directory

Mini framework of opinionated components for rapid development of proto apps ProtoTools - Vaadin Add-on Directory
## Intro Vaadin 21 components for creating quick prototype applications or otherwise rapid small application development. This is sort of mini framework on top of Vaadin. The components are opinionated. The API of the components is kept purposefully minimal. Thus ProtoTools can be seen as a opionated mini framework for low code application development. ## Components ### Form Form that populates automatically based on the bean, using FieldFactory (see DataModel) List or Bean properties can be added too (uses PopupListEdit or PopupForm) ### ListEdit List editor based on AutoGrid. So it inherits its responsive features. Value of the ListEdit is the list of the items in it. I.e. this is not a selection component. ### AutoGrid Grid with Editor auto generation using FieldFactory (see DataModel) List or Bean properties can be added too (uses PopupListEdit or PopupForm) Grid is responsive, when you resize browser to be narrow, only one compact column with four first properties is shown and editor is shown as popup dialog instead. ### PopupListEdit ListEdit in a Dialog ### PopupForm Form in a Dialog ### GridCrud Simple Grid + Form aside Grid CRUD view. ### GridCrud Simple Grid + Form as popup dialog CRUD view. ### Dashboard Rudimentary Dashboard component with drag and drop support. New widgets can be added and widgets can be replaced (e.g. for content / data update). ### Wizard Wizard aka Stepper type component for splitting complex forms to multiple paged sub-forms. ### MenuLayout Component extending AppLayout with menu automatically generated from Route registry. The @PageTitle is used for menu titles and class name as fall back. Routes without parameters are generated as RouteLinks, and Routes with parameters as TextFields where you can input the parameter. (Route templates are not supported) ## Data model ProtoTools is purposed for simple applications, which you want to build fast. Thus data model is assumed to be relatively straightforward. Many of the components are using BeanValidationBinder internally. This means that for data validation you can use JSR-303 annotations in the entities. Components use FieldFactory which uses the following data type mapping of the bean properties. * String -> TextField * Date, LocalDateTime -> DateTimePicker * LocalDate -> DatePicker * Enum -> ComboBox (Enum constants are automatically used as set of items to select from) * Boolean -> Checkbox * Double -> NumberFied * Integer -> IntegerField * LocalTime -> TimePicker * BigDecimal -> BigDecimal Other data types are just skipped and custom fields are not supported. ProtoTools could be used also when data model is slightly more complex by introducing DTO layer that fits in.
Online