At the AMIS Conference in Katwijk, the Netherlands, I attended a hackathon yesterday and learned a lot from my colleague Shaun Smith, who is the Oracle product manager working on Application Container Cloud Service (ACCS).
What I wanted to achieve was this—create an Oracle JET application that renders data made available by an application running on ACCS. Here's Shaun and I setting up my environment and deploying an application to it:
Here's the simple UI of the Oracle JET application. What's nice about it is that it consists of three different modules and that the table is defined by the Oracle JET "ojTable" component.
Here's the definition of the HTML view of the JET module that provides the ojTable:
<table id="table"
data-bind="ojComponent: {
component: 'ojTable',
data: datasource,
columns: [
{headerText: 'Problem', field: 'problem'},
{headerText: 'Description', field: 'description'},
{headerText: 'Status', field: 'status'},
{headerText: 'Address', field: 'formattedAddress'}
]}">
</table>...and here's the JavaScript side providing the business logic of the HTML view shown above:
define(['ojs/ojcore', 'knockout', 'ojs/ojtable', 'ojs/ojdatacollection-common'
], function (oj, ko) {
function GeneratedContentViewModel() {
var self = this;
self.data = ko.observableArray();
$.getJSON("/incidents?technician=charlie").
then(function (json) {
var metrics = json.result;
var location = json.result.location;
$.each(metrics, function () {
self.data.push({
problem: this.problem,
description: this.description,
status: this.status,
formattedAddress: this.location.formattedAddress
});
});
});
self.datasource = new oj.ArrayTableDataSource(
self.data,
{idAttribute: 'problem'}
);
}
return GeneratedContentViewModel;
});A special aspect of the solution is that the Oracle JET application is bundled as static resources within the Node.js application. We did this to overcome CORS problems we were struggling with. Below, the "client" folder, within my Node.js application, which is named "ifixitfast", contains my complete Oracle JET application:
![]()
The "client" folder is a static folder within my Node.js application thanks to this bit related to the Express framework on top of Node.js:
var express = require("express");
var app = express();
app.use(express.static('client'));That line in bold is all that is needed, in this case in a file named "web.js".
What is also a useful piece of knowledge is how the ZIP file is created, which is uploaded via the UI on ACCS into my ACCS instance:
{
"name": "ifixitfast",
"version": "1.0.0",
"description": "ifixitfast REST Service",
"main": "web.js",
"dependencies": {
"debug": "^2.2.0",
"express": "^4.13.4"
},
"scripts": {
"start": "node web.js",
"prepublish": "zip -r ifixitfast-dist.zip app client node_modules manifest.json package.json *.js"
}
}
Notice the "prepublish" line at the end, where the name of the ZIP file is defined, which will be created, containing all the folders and files listed there, when "npm install" is run (which can be done from within NetBeans IDE).
Finally, the ZIP file is uploaded to ACCS, where magically everything is unpacked and set up such that when I go to the "index.html" of the URL, I automatically am served up the application from ACCS:
![]()
Alternatively, instead of running a Node.js application on ACCS, you can run Java SE applications, too, which could serve up JSON or XML in a similar way to how the Node.js application is doing in the example outlined above.
Blog
Twitter
LinkedIn![image[7][2][2][2]](http://soacommunity.files.wordpress.com/2013/04/image7222.png?w=20&h=20&h=20 "image[7][2][2][2]")
Facebook![clip_image002[8][4][2][2][2]](http://soacommunity.files.wordpress.com/2013/04/clip_image00284222.jpg?w=26&h=23&h=23 "clip_image002[8][4][2][2][2]")
Wiki
This new blog starts with 
