Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #106 from eskimor/form_handler
Implemented registerFormInterface.
- Loading branch information
Showing
7 changed files
with
367 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
{ | ||
"name": "form-interface-example", | ||
"description": "Uses the registerFormInterface function for making functions available to JavaScript and to Diet templates.", | ||
"authors": [ "Robert Klotzner" ], | ||
"version": "0.0.1", | ||
"dependencies": {} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,92 @@ | ||
import vibe.d; | ||
import std.stdio; | ||
import std.algorithm; | ||
import std.string; | ||
import vibe.http.form; | ||
/** | ||
This example pretty well shows how registerFormInterface is meant to be used and what possibilities it offers. | ||
The API that is exposed by DataProvider is conveniently usable by the methods in App and from JavaScript, with just | ||
one line of code: | ||
--- | ||
registerFormInterface(router, provider_, prefix~"dataProvider/"); | ||
--- | ||
The tableview.dt uses JavaScript for just replacing the table if filter-data changes if no JavaScript is available | ||
the whole site gets reloaded. | ||
*/ | ||
|
||
/** | ||
* This class serves its users array as html table. Also have a look at views/createTable.dt. | ||
*/ | ||
class DataProvider { | ||
enum Fields { | ||
nameid, surnameid, addressid | ||
} | ||
void index(HttpServerRequest req, HttpServerResponse res) { | ||
getData(req, res); | ||
} | ||
void getData(HttpServerRequest req, HttpServerResponse res) { | ||
auto table=users; | ||
res.render!("createTable.dt", table)(); | ||
} | ||
/** | ||
Overload that takes an enumeration for indexing the users array in a secure way and a value to filter on. | ||
Method code does not have to care about validating user data, no need to check that a field is actually present, no manual conversion, ... | ||
Say that this is not ingenious, I love D. | ||
*/ | ||
void getData(HttpServerRequest req, HttpServerResponse res, Fields field, string value) { | ||
auto table=users.filter!((a) => value.length==0 || a[field]==value)(); | ||
res.render!("createTable.dt", table)(); | ||
} | ||
/// Add a new user to the array, using this method from JavaScript is left as an exercise. | ||
void addUser(string name, string surname, string address) { | ||
users~=[name, surname, address]; | ||
} | ||
private: | ||
string[][] users=[["Tina", "Muster", "Wassergasse 12"], | ||
["Martina", "Maier", "Broadway 6"], | ||
["John", "Foo", "Church Street 7"]]; | ||
} | ||
|
||
class App { | ||
this(UrlRouter router, string prefix="/") { | ||
provider_=new DataProvider; | ||
prefix_= prefix.length==0 || prefix[$-1]!='/' ? prefix~"/" : prefix; | ||
registerFormInterface(router, this, prefix); | ||
registerFormInterface(router, provider_, prefix~"dataProvider/"); | ||
} | ||
void index(HttpServerRequest req, HttpServerResponse res) { | ||
getTable(req, res); | ||
} | ||
void getTable(HttpServerRequest req, HttpServerResponse res) { | ||
res.headers["Content-Type"] = "text/html"; | ||
res.render!("tableview.dt", req, res, dataProvider)(); | ||
} | ||
void getTable(HttpServerRequest req, HttpServerResponse res, DataProvider.Fields field, string value) { | ||
res.headers["Content-Type"] = "text/html"; | ||
res.render!("tableview.dt", req, res, dataProvider, field, value)(); | ||
} | ||
void addUser(HttpServerRequest req, HttpServerResponse res, string name, string surname, string address) { | ||
dataProvider.addUser(name, surname, address); | ||
res.redirect(prefix); | ||
} | ||
@property string prefix() { | ||
return prefix_; | ||
} | ||
@property DataProvider dataProvider() { | ||
return provider_; | ||
} | ||
private: | ||
string prefix_; | ||
DataProvider provider_; | ||
} | ||
|
||
static this() | ||
{ | ||
auto settings = new HttpServerSettings; | ||
settings.port = 8080; | ||
auto router = new UrlRouter; | ||
auto app=new App(router); | ||
listenHttp(settings, router); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
table | ||
- foreach(row; table) | ||
tr | ||
- foreach(column; row) | ||
td #{column} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
!!! 5 | ||
html(lang="en") | ||
head | ||
block head | ||
body | ||
block body | ||
.content | ||
block content | ||
.sidebar | ||
block sidebar | ||
.footer | ||
block footer |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
extends layout | ||
prepend block head | ||
title ="Welcome!" | ||
block content | ||
.clear | ||
h1 Welcome! | ||
.datatable(id="datatable") | ||
h2 Users | ||
- static if(__traits(compiles, value)) | ||
- dataProvider.getData(req, res, field, value); | ||
- else | ||
- dataProvider.getData(req, res); | ||
.filterbycontainer | ||
h2 Filter users by field value | ||
form(onsubmit="return getTable(this.field.value, this.value.value)", action='/getTable', method='GET') | ||
table | ||
tr | ||
td Filter by: | ||
td | ||
select(name="field") | ||
option(value="nameid") Name | ||
option(value="surnameid") Surname | ||
option(value="addressid") Address | ||
tr | ||
td Value: | ||
td | ||
input(type="text", width="160", name="value") | ||
|
||
.additemcontainer | ||
h2 Add new user | ||
form(action='/addUser', method='POST') | ||
table | ||
- import std.string; | ||
- foreach ( item ; ["name", "surname", "address"] ) | ||
tr | ||
td= item[0..1].toUpper()~item[1..$] | ||
td | ||
input(type="text", width="160", name="#{item}") | ||
tr | ||
td | ||
td | ||
input(type='submit', value="Add") | ||
script | ||
function getTable(field, value) { | ||
var req = new XMLHttpRequest(); | ||
req.open('GET', '/dataProvider/getData?field='+field+'&value='+value, false); | ||
req.send(); | ||
var tablediv=document.getElementById('datatable'); | ||
tablediv.innerHTML = req.responseText; | ||
return false; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.