Before you can use RDForms you need to make sure all the dependencies are loaded:
$ cd path_to_rdforms $ yarn $ yarn build
It is recommended to experiment with the development version as it gives you very good debugging and inspection tools to understand what is going on (especially firebug in firefox and the built in debugging tools in Chrome). Furthermore, you do not have to deploy the rdforms library on a web server, you can point your browser to the sample directory using file: address, for instance file:///path_to_rdforms/samples/example1.html.
A good way to start is to take a look at the samples. To be able to run the samples smoothly you can use the webpack dev server to spin up a local http server which will watch your code changes and re-bundle automatically.
cd path_to_rdforms yarn dev
Now you can access your sample in your browsers at http://localhost:8080/samples/.
For all the following examples their respective
.js files control which are the data and how the forms are rendered.
example1.html - Simple Editor
- Loads the library and its CSS.
- Creates a minimal RDF graph manually.
- Creates a minimal RDForms template manually.
- Creates the editor UI from the RDF graph, a given resource, a template and an HTML node.
Check example1.js for more.
example2.html - Editor in Bootstrap
Different from example1 in the sense that it loads the graph and template from separate files.
Check example2.js for more.
example2-bmd.html - Editor using Material design
Same as example 2 but with a material design theme for bootstrap.
Check example2.js for more.
example3.html - Presenter using material design
Different from example2 in how it loads the template form a separate file and how to depend on files not part of the build. See the next section for a longer explanation about the build.
Check example3.js for more.
example4.html - Validation presenter using material design
This examples shows how RDForms can be used as a form validator rather than just an editor. Take a look at the validation report inside the form presenter.
Check example4.js for more.
example5.html - Building on default templates
This examples utilizes pre-made templates to render forms. It can serve as a very good start for extending them and creating your own custom forms.
Check example5.js for more.
example6.html - RDF output from editor (Template is for Dataset according to DCAT-AP)
This example provides a ready output to check your form RDF output live.
Check example6.js for more.
example7.html - RDForm editor with a registered chooser
This is a more advanced example providing some guidance on how to create your own choosers and register them to show on select fields in your forms. You can even have your data be fetched across the network.
Check example7.js for more.
A note on how to use the built version
and you should be able to use the library by simply including the dist/rdforms.js. Check the examples above for more info on
the library's API or feel free to explore the