| |
 | Posted by WebFreak001 |  Permalink Reply |
|
WebFreak001 
| I just released a vibe.d library that allows you to turn any D struct into an editable HTML5 compatible form with live JS updates but also normal no-JS updates with nearly the same experience. It basically feels like you don't need to write any boilerplate HTML code anymore but instead write D and show your D code with a fancy mask automatically to the user. Additionally it handles all the validation for you so you can be sure that anything the user couldn't type in into the HTML frontend won't be stored inside the backend struct (validation & some corrections for all HTML5 input types).
It supports numerous data types as input types:
* string - type="text" (there are UDAs to also change the type of a string to email, url, time, week, month, datetime-local, date, color or textarea)
* bool - type="checkbox"
* enum - a dropdown list (select) or with an UDA a list of radio elements
* BitFlags!enum - a list of checkbox elements
* DateTime (not SysTime) which is a timezone-less Date & Time combination, can be done with a string too
* Date - type="date", can be done with a string too
* TimeOfDay - type="time", can be done with a string too
* URL (vibe.d) - type="url", can be done with a string too
* integer & floating point types - type="number" or with an UDA type="slider"
the input names are automatically generated by the variable name (myInputName or my_input_name -> My Input Name) but can also be renamed and with v1.1.0 also translated (i18n) using the upcoming "language" property in vibe.d WebInterfaces, you can depend on vibe.d ~master to use it already now, otherwise everything will default to one language for now. You can also translate or rename enum values with these UDAs (sadly you need to attach them on the member variable because enums can't have UDAs attached to them) which is great for having a large variety of supported languages on your website.
A use case for the package is for example a user setting:
A user accesses GET /settings and your app looks up the user account and the settings struct saved with it, then just passes the struct without any other obstacles into renderSettings() and it will output prefilled HTML + JS for the user to edit. You just need to accept POST /settings and POST /api/setting and pass both of them into req.processSettings(ref config) which does everything for you. Then it will return a bitfield of changed values (up to 64 fields) that you can check if you actually need to save the updated config. On the no-js version you will also pass that bitfield into the renderer and it will show error strings with it.
Another use case would be a small game server front end configuration without a lot of thought or changes needing to go into it. Just send the struct through the render and process functions and don't care about validation and HTML.
By default there is no CSS but the layout is very simple (check the GitHub README), but I have a simple material design CSS template you can use if you want a quick and simplistic UI for your form.
I haven't covered everything the UDAs allow you to do yet or how you can customize the HTML generation, etc. but you can check out the Documentation[1] and the GitHub repository[2] to find out more.
Install the package:
dub.json "web-config": "~>1.1.0"
dub.sdl dependency "web-config" version="~>1.1.0"
DUB Page: http://web-config.dub.pm
[1] https://webfreak001.github.io/WebConfig/package.html
[2] https://github.com/WebFreak001/WebConfig
|
