X

Geertjan's Blog

  • September 8, 2014

Knockout Client Generator for RESTful Web Services (Part 1)

Geertjan Wielenga
Product Manager

NetBeans IDE has heaps of wizards. One of the ones I like the most is "RESTful JavaScript Client", which generates a JavaScript front-end for a RESTful Web Service you select in the IDE. Unfortunately, the client code is based on Backbone.js, which was popular a year or two ago, while right now Knockout and Angular appear to be more popular. I created an issue to make this wizard pluggable, so that the data could be exposed in some way, enabling anyone to create templates using the framework of their choosing. There should be a drop-down where anyone should be able to plug in the name of their framework and then, when the user chooses the name, a set of templates provided by the plug in should be used to generate the JavaScript front-end.

Until that issue is evaluated and fixed, I created my own RESTful JavaScript client generator, which is based on the standard one in the IDE. It is called "RESTful Knockout Client" and you can see it below:

Right now, it is hardcoded for Knockout, though I want to make it generic and pluggable, as described above. When it is selected and Next is clicked, you can type in the name of the JavaScript file that will be generated, while you can also specify that the Knockout.js libraries should be added to the sources of your project.

When Browse, next to "REST Project Resource", is clicked above, you can browse the RESTful Web Services available in the IDE, as shown below.

When you have selected a RESTful Web Service, you'll see it named in the dialog, together with the related database table name, as shown below.

Click Next and then you can specify that an HTML file should be created, which will contain references to the various JavaScript files, as well as HTML tags for rendering the data provided via Knockout.

Click Finish and then your project structure will be as follows. In other words, everything is exactly the same as "RESTful JavaScript Client", except that different files are generated at the end, i.e., the wizard and all its steps are identical to "RESTful JavaScript Client".

At the start of this sequence, there were no files in the project. Now, the jQuery and and Knockout libraries are added, as well as the customers.js and customers.html file, as defined above. 

The customers.js file has this content, all generated, nothing tweaked afterwards:

MyCustomerViewModel = function() {
var self = this;
self.items = ko.observableArray();
$.getJSON("http://localhost:58844/CustomerManager/webresources/customers/").
then(function(customers) {
$.each(customers, function() {
self.items.push({
city: ko.observable(this.city),
phone: ko.observable(this.phone),
name: ko.observable(this.name),
addressline2: ko.observable(this.addressline2),
creditLimit: ko.observable(this.creditLimit),
addressline1: ko.observable(this.addressline1),
state: ko.observable(this.state),
fax: ko.observable(this.fax),
email: ko.observable(this.email),
});
});
});
};
ko.applyBindings(new MyCustomerViewModel());

And here's the customers.html file, again, nothing tweaked, everything exactly as generated:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table border="1">
<thead>
<tr>
<th>CITY</th>
<th>PHONE</th>
<th>NAME</th>
<th>ADDRESSLINE2</th>
<th>CREDITLIMIT</th>
<th>ADDRESSLINE1</th>
<th>STATE</th>
<th>FAX</th>
<th>EMAIL</th>
</tr>
</thead>
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: city"/>
<td data-bind="text: phone"/>
<td data-bind="text: name"/>
<td data-bind="text: addressline2"/>
<td data-bind="text: creditLimit"/>
<td data-bind="text: addressline1"/>
<td data-bind="text: state"/>
<td data-bind="text: fax"/>
<td data-bind="text: email"/>
</tr>
</tbody>
</table>
<script src='js/libs/jquery/jquery.min.js'></script>
<script src='js/libs/knockout/knockout-min.js'></script>
<script src='customers.js'></script>
</body>
</html>

I don't know enough about Knockout yet to turn the generated code into a CRUD application. If someone can help me with that, that would be great.

Ultimately, though, this will be a cool way to quickly bootstrap a new Knockout codebase that needs to interact with a RESTful backend. Anyone interested in this plugin, or in working with me on it, let me know.

Join the discussion

Comments ( 7 )
  • guest Wednesday, September 10, 2014

    cool! How can we install that generator? how can we write our own generator?

    Thanks


  • guest Monday, December 1, 2014

    Hello,

    I'm trying to install the plugin in Netbeans 8.0 but I´m getting a message saying that some other plugins are requested, like: HTML5 Project API/SPI or RESTful Web Service Support... and after installing them, the message is still being shown... any idea?

    Thanks in advance


  • Geertjan Monday, December 1, 2014

    Start by installing the Java EE distribution of NetBeans IDE.


  • Pablo Monday, December 1, 2014

    Ok, done!

    I've installed JavaEE distribution of NetBeans IDE 8.0. And I've tried to install the Knockout Client Generator but the same message has appeared again.

    At the end of the message says: "Some plugins not installed to avoid potential installation problems"


  • Geertjan Monday, December 1, 2014

    Isn't it impossible for me to help you if you don't actually tell me what the plugins are that are causing the problem? Anyway, let's stop using my blog and just write to me with a lot more details at geertjan dot wielenga at oracle dot com.


  • guest Tuesday, August 18, 2015

    That is nice, thanks Geertjan.

    Has there been any progress on the crud generator I could really do with that.

    Cheers Richard


  • guest Thursday, April 20, 2017

    some problems trying to install in 8.2 (yeap, it's Java EE edition)

    Some plugins require plugin HTML5 Project API/SPI to be installed.

    The plugin HTML5 Project API/SPI is requested in implementation version 201601300101.

    The following plugin is affected: Knockout Client Generators

    Some plugins require plugin RESTful Web Service Support to be installed.

    The plugin RESTful Web Service Support is requested in implementation version 201510222201.

    The following plugin is affected: Knockout Client Generators

    Some plugins require plugin RESTful Web Service Support API/SPI to be installed.

    The plugin RESTful Web Service Support API/SPI is requested in implementation

    version 201510222201.

    The following plugin is affected: Knockout Client Generators

    Some plugins not installed to avoid potential installation problems.


Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.