ProtoTools
Mini framework of opinionated components for rapid development of proto apps
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.
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
Links
Compatibility
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 appsProtoTools version 1.0.0
### Version 1.0.0
- First version for comments
ProtoTools version 1.1.0
### Version 1.1.0
- Added ComboCrud
- Adding add/delete buttons to Crud Forms
- Improving UX with mobile
- Refactoring some code
- Fixes here and there
ProtoTools version 1.2.0
### Version 1.2.0
- Add Dashboard
- Add wizard
- Various fixes and improvements
- Adapted for Vaadin 23
ProtoTools version 1.2.1
### Version 1.2.1
- Update LumoGridLayout version to 1.2.2
ProtoTools version 1.2.2
Version 1.2.2:
- Small code refactoring to allow more stabile compilation