Presentation for LangDev 2023, 14+15 november 2023 in Utrecht. https://langdevcon.org/ The basic idea of “Projectional Forms” is very simple: use HTML form elements instead of text in an editor to get information into an AST. Text input boxes, dropdown select boxes, check boxes, radio buttons etc. From the early days of the World Wide Web on, form elements were the way to interact with an HTML page. In modern web-applications form elements are still widely used to gather user input. Forms have evolved and many packages and frameworks offer more elaborate possibilities out of the box, built on top of the same old basic form tags: custom fields, (repeating) sub-forms, form validation, easy creation, JSON output etc. The possibilities are endless. An important advantage of the use of form elements in online applications is: people are used to them and don't have to learn something new. It is easier to use than a text based editor. I will demo the use of projectional forms on the hand of the “Extension Generator” I'm working on at the moment. First presentation was on Dutch JoomlaDays in May (which were at the same time as the MPS Community Meetup this year). It uses forms on the M1-level to create complete and working online applications, like e-commerce or a booking system. It was based on earlier work in Xtext that was later ported to MPS. In this Extension Generator the AST is filled (online) using HTML form elements, that were static, predefined. The applications are mainly generated from the AST using templates. This summer I've been working on the M2-level: making forms that dynamically define forms. This is in fact defining DSLs! This definition of forms is again done using HTML form elements, online. I've used LionWeb as the basic structure on the M3-level and am now working on import and export from and to the LionWeb Serialization Format. Next step will be to define generators using a “forms-language” (beside the use of templates). Main inspiration for this part are MPS' model-to-model transformations. Although still work in progress, I can demo the concept of Projectional Forms with this practical Extension Generator and show the limitless possibilities of simple HTML form elements as a medium for projectional editing and language definition. In many cases it can be an interesting alternative for traditional code in text format.

1. Projectional Forms
LangDev Meetup 2023
Herman Peeren
Using HTML forms as model input interface

2. Code: textual input

3. User interfaces matter

4. Quest for online language workbenches

5. HTML form input interface

6. My special case never fits

7. Not bad for programming…

8. Developments in online-forms

9. Developments in online-forms
● compact definition

10. Developments in online-forms
● compact definition
● nested fields

11. Developments in online-forms
● compact definition
● nested fields
● custom fields

12. Developments in online-forms
● compact definition
● nested fields
● custom fields
● multilingual

13. Developments in online-forms
● compact definition
● nested fields
● custom fields
● multilingual
● drag&drop ordering

14. Developments in online-forms
● compact definition
● nested fields
● custom fields
● multilingual
● drag&drop ordering
● form validation

15. Developments in online-forms
● compact definition
● nested fields
● custom fields
● multilingual
● drag&drop ordering
● form validation
● JSON output

17. M1: language to input the model.

18. MDE-project: extensions for Joomla 3, 4 and 5.

19. JooMDD, an XText-project.

20. So, based on a DSL-grammar (eJSL).

21. Resulting in an Eclipse editor, generating Joomla 3 & 4 code.

22. I’ve ported JooMDD to MPS: projectional editing.

23. So, defining concepts in MPS

24. And finally to Extension Generator (a Joomla component).

25. So, based on (nested) forms.

26. Forms defined in xml-files.

27. Resulting in forms to input the model

28. Model (project) in 3 parts: data, interaction, extensions.

29. Example in JooMDD: conference.

30. Conference example: a speaker references to a Participant

31. Generator is mostly mapping of AST to (Twig)templates.

32. Mapping is now still (PHP-)scripted, will be forms-based

33. Files for the Joomla extension are generated.

34. Project forms can be defined with forms!

35. M2: language to input the model
for the language to input the model (meta-meta-level)

36. I use LIonCore_M3 as M3-language

37. Forms defined in xml-files

38. (my eJSL-implementation)

39. Implementation: from M2-AST to M1-form

40. ● feature / containment

41. Implementation: subform always visible
● feature / containment:
subform

42. ● feature / containment:
subform
● inheritance

43. Implementation: top-down in hierarchy, no substitution
● feature / containment:
subform
● inheritance:
switch + subform show

44. Implementation: top-down in hierarchy, no substitution
● feature / containment:
subform
● inheritance:
switch + subform show

45. ● feature / containment:
subform
● inheritance:
switch + subform show
● link / reference

46. Implementation: select from possibilities
● feature / containment:
subform
● inheritance:
switch + subform show
● link / reference:
dropdown

48. Towards a forms based language workbench
Forms

50. ● forms have a lot of possibilities as input interface

51. ● forms have a lot of possibilities as input interface
● forms give structure and limitation of input

52. ● forms have a lot of possibilities as input interface
● forms give structure and limitation of input
● forms are widely used and familiar for online input

53. ● forms have a lot of possibilities as input interface
● forms give structure and limitation of input
● forms are widely used and familiar for online input
● forms can be used to input a model (AST)

54. ● forms have a lot of possibilities as input interface
● forms give structure and limitation of input
● forms are widely used and familiar for online input
● forms can be used to input a model (AST)
● forms can be used on higher meta-levels

55. Forms can be a good addition to (online) input interfaces
● forms have a lot of possibilities as input interface
● forms give structure and limitation of input
● forms are widely used and familiar for online input
● forms can be used to input a model (AST)
● forms can be used on higher meta-levels

56. herman@yepr.nl
sites:
Extension Generator extengen.yepr.nl
Projectional Forms Playground pro-forms.yepr.nl
repo:
github.com/HermanPeeren/Extengen