Labels

Node, Express, and Kendo UI


For the last few months I have been getting into Kendo UI. Normally I am not a fan of other people's UI frameworks, but I like the job Telerik has done with this package and I hate writing plumbing code. I mean how many times do you want to write a grid or other control?

I was having a bit of trouble with some aspects of the DataSource and Grid controls and happened across a tutorial video showing interfacing a KendoUI DataSource with a RESTful backend.


Only problem was that the author of the video left out some parts of how the app was built. So I decided to work out the missing bits on my own. This is a demo project to show how to combine a Node/Express RESTful backend with a KendoUI frontend.

In place of a proper database this app uses a JavaScript object, this is a demo after all. There is very little data checking going on here, so be careful.

I am not a huge fan of Jade, so I used Handlebars instead as my template engine. HBS allows me to use Handlerbars on the server side. Frankly the app doesn't use templates much and everything could have been done with straight HTML, but I am probably going to expand the app in the future with templates on both the server and client sides.

I realize there isn't a lot tutorial material, but look through the code and hopefully it will all make sense.  Once I have some free time, I hope to add more functionality to the app like MongoDB and a Backbone frontend. 


/**
* Module dependencies.
*/
var express = require('express')
, routes = require('./routes')
, http = require('http')
, path = require('path');
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'hbs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
app.get('/', routes.index);
// a lazy man's database
var weapons = {
"1": { "id": 1, "name": "Wakizashi", "description": "Similar to the Katana, except smaller" },
"2": { "id": 2, "name": "Tanto", "description": "A Small Japanese Knife" },
"3": { "id": 3, "name": "Kama", "description": "Originally used in farming, now used by Ninjas" }
};
function getRandomInt(min, max){
return Math.floor((Math.random() * max) + min);
}
function getArrayOfItems(items){
var key, item, myArray=[];
for(key in items){
item = items[key];
if(item && typeof item === "object"){
myArray.push(item);
}
}
return myArray;
}
function getItem(id){
var ndx, results = null;
for(ndx=0; ndx < weapons.length; ndx += 1){
if(id === weapons[ndx].id) {
results = weapons[ndx];
break;
}
}
return result;
}
function getFreeId(items){
var key;
do {
key = getRandomInt(1, 100000);
} while(items[key]);
return key;
}
/*
Here is the REST api
*/
// GET all items
app.get('/weapons.json', function (req, res) {
console.log("Get all items");
var weaponsArray = getArrayOfItems(weapons);
return res.send(weaponsArray);
});
// GET an item
app.get('/weapons.json/:id', function (req, res) {
var ndx,
id = req.params.id,
results = getItem(id);
console.log("Getting: " + id);
return res.send(results);
});
// PUT (update) an item
app.put('/weapons.json/:id', function (req, res) {
var id = req.params.id,
body = req.body;
weapons[id] = body;
console.log("Updated: " + body.name);
return res.send(body);
});
// DELETE an item
app.delete('/weapons.json/:id', function (req, res) {
var id = req.params.id;
delete weapons[id];
console.log("Deleted: " + id);
return res.send();
});
// POST (create) an item
app.post('/weapons.json', function (req, res) {
var weapon = req.body;
if(weapon && weapon.name && weapon.description){
if(!weapon.id){
weapon.id = getFreeId(weapons);
}
weapons[weapon.id] = weapon;
}
return res.send(weapon);
});
/*
Kick off the server
*/
http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});
view raw app.js hosted with ❤ by GitHub


<div id="wrapper">
<div id="splitter">
<div id="left">
<div class="inner">
<h3>Create</h3>
<dl>
<dt>Name:</dt>
<dd><input type="text" id="create-name" /></dd>
<dt>Description</dt>
<dd><textarea rows="5" cols="20" id="create-description"></textarea></dd>
<dd><button id="create-weapon">Create</button></dd>
</dl>
</div>
</div>
<div id="middle">
<div id="right-top">
<div class="inner">
<div id="grid">
<table id="weapons">
<tr>
<th data-field="name">Name</th>
<th data-field="description">Description</th>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="right">
<h3>Edit</h3>
<dl>
<dt>Name:</dt>
<dd><input type="text" id="change-name" /></dd>
<dt>Description</dt>
<dd><textarea rows="5" cols="20" id="change-description"></textarea></dd>
<dd>
<span>
<button id="update-weapon">Update</button>
<button id="delete-weapon">Delete</button>
</span>
</dd>
</dl>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#splitter").kendoSplitter({
panes: [
{ collapsible: false },
{ collapsible: false },
{ collapsible: false }
]
});
var Weapon = kendo.data.Model.define({
id: "id"
});
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/weapons.json"
},
create: {
url: "/weapons.json",
type: "POST"
},
update: {
type: "PUT"
},
destroy: {
type: "DELETE"
}
},
schema: {
model: Weapon
}
});
var selectedWeapon;
$('#weapons').kendoGrid({
dataSource: dataSource,
selectable: true,
change: function() {
var id = this.select().data("uid");
selectedWeapon = this.dataSource.getByUid(id);
this.dataSource.options.transport.destroy.url = "/weapons.json/" + selectedWeapon.id;
this.dataSource.options.transport.update.url = "/weapons.json/" + selectedWeapon.id;
$("#change-name").val(selectedWeapon.get("name"));
$("#change-description").val(selectedWeapon.get("description"));
}
});
$("#create-weapon").click(function () {
dataSource.add({ name: $("#create-name").val(), description: $("#create-description").val() });
dataSource.sync();
$("#create-name").val('');
$("#create-description").val('');
dataSource.read();
});
$("#update-weapon").click(function () {
selectedWeapon.set("name", $("#change-name").val());
selectedWeapon.set("description", $("#change-description").val());
dataSource.sync();
});
$("#delete-weapon").click(function () {
dataSource.remove(selectedWeapon);
$("#change-name").val("");
$("#change-description").val("");
dataSource.sync();
});
});
</script>
view raw index.html hosted with ❤ by GitHub
Labels:

Popular Posts