This create a page with header, form and footer.
The pong-easy-form type defines a form using a naming convention. Using c1 and c2 will define two column to group the form fields.
The example contains also a simple REST/JSON web service (template) to POST form data back.
- You need to get a local copy of the easy-web gui.
- and run the set up:
npm install easy-web-gui
- In this directory simply run:
nodejs index.js
- Open http://localhost:8888/ in your browser
The code is all about some easy steps:
- load the module
require( 'easy-web-app' )
- start the server and set up main
page gui.init()
- add a view to the main page
page gui.addView( <view config>, <plug in config> )
The rest of the example defines a REST/JSON web service to handle the POST requests from the form button.
The server (step 2) will serve some static files to the browser, most important ones are
http://localhost:8888/index.html
- empty page just loading the JS, CSS etc.
http://localhost:8888/js/portal-ng.js
- the heart of the framework
Then the server will set up some REST/JSON web service which are expected by the client. The most important one is to load the structure definition of the page:
- http://localhost:8888/svc/layout/main/structure Please click the link and have a look at the JSON structure. That is all about!
Should look like this:
{
"layout": {
"title": "Test",
"header": {
"logoText": "My First Page",
"modules": [
{
"id": "MainNav",
"type": "pong-navbar",
"param": {
"confURL": "/svc/nav"
}
}
]
},
"rows": [
{
"rowId": "myFirstView",
"title": "Form view showing all field types",
"decor": "decor",
"height": "400px",
"resourceURL": "none",
"type": "pong-easyform",
"moduleConfig": {
"id": "tstFormId",
"easyFormFields": [
"id",
"c1|Name",
"c1|Date|date",
"c1|separator",
"c1|Remark|3rows",
"c2|Mailings|label",
"c2|Send~Ads~~|checkbox_infomails_ads",
"c2|Newsletter|checkbox_infomails_newsletter",
"c2|Pass~Word"
],
"actions": [
{
"id": "Chk",
"actionName": "Check",
"actionURL": "/dummy"
}
]
}
}
],
"footer": {
"copyrightText": "powered by <a href=\"https://github.com/ma-ha/rest-web-ui\">ReST-Web-GUI</a>",
"modules": []
}
}
}
Some words about the easyFormFields definition: c1 and c2 are columns selector followed by the label of the field. If the field name must be identically to the label, ~ are white spaces in label and _ ignored in name. There are some key words to make the definiton as easy as possible, otherwise you can specify the type after the a second |
You'll find more details about the easyform at the plug-in modules documentation.
Remark: The easyform is a wrapper for form plug in with simplified definition of the form fields. In form you have an regular JSON object structure for each field.