|
| 1 | +# Welcome to solidUI Forms |
| 2 | + |
| 3 | +`Forms` are what we call the code part of solid-ui which takes the User Interface ontology at <http://www.w3.org/ns/ui> and makes it usable for developers. As its name suggests, `Forms` are used for rendering WebApp Frontend elements. For example, <http://www.w3.org/ns/ui#Choice> will translate to something like the following: |
| 4 | +``` |
| 5 | +<div id=dropDownDiv> |
| 6 | + <div id=labelOfDropDown> </div> |
| 7 | + <div id=selectDiv> |
| 8 | + <select id=dropDownSelect> |
| 9 | + <option> .... |
| 10 | + </select> |
| 11 | + </div> |
| 12 | +</div> |
| 13 | +``` |
| 14 | + |
| 15 | +## A few starting points |
| 16 | + |
| 17 | +There are different documentation entry points for the topic. |
| 18 | + |
| 19 | +To get you started with Forms, we have the [forms-intro](./forms-intro.html). |
| 20 | +If you're asking yourself how Forms fit into the Soild ecosystem, head over to [form-ecosystem](./form-ecosystem.html). |
| 21 | + |
| 22 | +Sir Tim Berners-Lee gave a talk about Forms to the SolidOS team some time ago. His slides are online [here](./talks/FormsTalk.html), while a recording of the talk is on the [SolidOS pod](https://solidos.solidcommunity.net/public/SolidOS%20team%20meetings/SolidOS_team_videos.html). |
| 23 | + |
| 24 | + |
| 25 | +## Creating your own Form using Turtle |
| 26 | + |
| 27 | +In the [form-playground](https://solidos.github.io/form-playground/playground.html) (code [here](https://github.com/SolidOS/form-playground)), you can create your own Form to render a frontend for some given Turtle. |
| 28 | + |
| 29 | +## Code examples |
| 30 | + |
| 31 | +To make use of Forms, you need to use solid-ui. Head over to the [solid-ui readme](https://github.com/SolidOS/solid-ui/blob/main/README.md#getting-started) for some how-to guides. |
| 32 | + |
| 33 | +One you are set up with the code, take a look at some examples over at [solid-ui/Documentation](<https://github.com/SolidOS/solid-ui/tree/main/Documentation>). The examples there are also deployed on Git Pages: |
| 34 | + |
| 35 | +- [Basic Form Demo](https://solidos.github.io/solid-ui/Documentation/form-examples/demo.html) |
| 36 | +- [WebID profile Demo](https://solidos.github.io/solid-ui/Documentation/form-examples/profile-demo.html) |
| 37 | +- [ui:Form and ui:Group examples](https://solidos.github.io/solid-ui/Documentation/form-examples/structures.html) |
| 38 | +- [ui:Classifier and ui:Options example](https://solidos.github.io/solid-ui/Documentation/form-examples/structures2.html) |
| 39 | +- [ui:Choice example](https://solidos.github.io/solid-ui/Documentation/form-examples/structures3.html) |
| 40 | +- if you want, you can try to wrap your head around [a rendering of the entire UI vocabulary](https://solidos.github.io/solid-ui/Documentation/form-examples/edit-form-form.html) _(Scroll to the far right if all you see is a column or two of plain text...)_ |
| 41 | + |
| 42 | +Most interesting may be how it is all wired together in the [test-form.js](https://github.com/SolidOS/solid-ui/blob/main/Documentation/form-examples/test-form.js), while the code for the form itself is mostly under [solid-ui/src/widgets/forms.js](https://github.com/SolidOS/solid-ui/blob/main/src/widgets/forms.js). |
| 43 | + |
| 44 | +## Spin-offs & further examples |
| 45 | + |
| 46 | +- [Jeff's solid-ui-components](https://github.com/jeff-zucker/solid-ui-components) is a different take on the UI vocabulary |
| 47 | +- [Timea's Solid Hello Worlds](https://github.com/timea-solid/SolidHelloWorlds) is a demo implementing both Jeff's lib and solid-ui Forms |
0 commit comments