Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to FormsFX

896 views

Published on

An overview presentation of FormsFX, a framework for creating forms via a fluent API in JavaFX. The framework supports internationalisation, validation, automatic layout, tooltips, etc....

Published in: Software
  • Be the first to comment

  • Be the first to like this

Introduction to FormsFX

  1. 1. FormsFX 1
  2. 2. FormsFX 2
  3. 3. FX Problems ● Manual Bindings ● Verbosity ● Repetition ● Code Organisation 3
  4. 4. Value Label Placeholder Errors State (3x) Tooltip 4
  5. 5. Efficient API Different Use Cases Simple Extensions Sensible Defaults 5
  6. 6. Agenda 1. API 2. Architecture 3. View Model 4. Model 5. View 6. Extensions 7. Demo 6
  7. 7. Fluent API ● Natural Language ● Factory Pattern ● Chaining ● Builder Pattern 7
  8. 8. 1 Field.ofStringType(model.nameProperty()) 2 .label("name_key") 3 .validate(StringLengthValidator.between(5, 10)) Fluent API 8
  9. 9. M Model V View VM View Model 9
  10. 10. M Model V View VM View Model Data Binding 10
  11. 11. FormsFX VM 11
  12. 12. FormsFX VM 12
  13. 13. ● Properties as Models ● Persisted, Temporary, User Value ● Binding Modes: continuous vs persistent M Model: Data Binding 13
  14. 14. V View VM View Model M M Model Temporary Value User ValuePersisted Value persist() change 14
  15. 15. V View VM View Model M M Model Temporary Value User ValuePersisted Value change 15
  16. 16. Model: Data Binding 1 Field.ofStringType(model.nameProperty()) 2 Field.ofStringType("test") 3 .bind(anotherModel.someProperty()) 1 form.persist(); 2 form.reset(); M 16
  17. 17. View: Components ● Renderer ● Grid System ● Simple Controls V 17
  18. 18. FormsFX V 18
  19. 19. V 19
  20. 20. View: Simple Controls ● Default Controls ● Data Types ● State Information ● Styling Hooks V 20
  21. 21. V View: Control Anatomy 21
  22. 22. V View: Control Anatomy 22
  23. 23. 1 Field.ofStringType(model.nameProperty()) 2 .render(new CustomTextControl()) View: Custom Controls V 23
  24. 24. 1 Form formInstance = Form.of(…); 2 rootPane.add(new FormRenderer(formInstance)) View: Displaying a Form V 24
  25. 25. Validation ● Type Validation ● Range Validators ● RegEx Validators ● Custom Validators 25
  26. 26. Validation 1 Field.ofStringType(model.nameProperty()) 2 .validate( 3 StringLengthValidator.between(5, 10), 4 CustomValidator.forPredicate(s -> s.charAt(0).equals(’S’)), 5 RegExValidator.forPattern("[DEINSTY]") 6 ) 26
  27. 27. Internationalisation ● Translation Service ● Resource Bundle Implementation ● Locale Change Listeners 27
  28. 28. Internationalisation 1 Form.of( 2 Field.ofStringType(model.nameProperty()) 3 .label("name_key") 4 ).i18n(translationService) 28
  29. 29. Wrap Up: Components 29 M Model V View VM View Model Fluent API Structural Semantics Field Types Validation Internationalisation Renderer Simple Controls Grid Logic Bindings Binding Modes Properties
  30. 30. Wrap Up: Sensible Defaults ● Single Locale ● Simple Controls ● Pre-Defined Validators 30
  31. 31. Wrap Up: Extensions ● Custom Validation ● Internationalisation ● Custom Controls ● Custom Styling 31
  32. 32. Demo 32

×