Using Oracle JET with VisionX/JVx
The shiny new technology from Oracle is JET (Javascript Extension Toolkit). It's a really interesting thing because it bundles relevant technologies like jQuery, jQuery UI, Knockout, Require, Hammer, ...
You don't need know-how for every used technology, only JET is enough. This is a nice and new approach in the JS world. A possible problem with such an approach could be the update of single libraries, but this isn't your problem because Oracle has to maintain the right versions and bugfixes in JET. So it's not our problem 
I'm not a big fan of Javascript libraries/technologies but from time to time I like to play around with such things and proof the interaction with JVx. Some time ago my new friend was AngularJS.
This time, I tried to work with Oracle JET.
The use-case was trivial: I'd like to visualize a list of contacts as simple table. The contacts are available as REST service. The REST service needs basic authentication.
Foreword: JET has much documentation and some useful examples, but it's inconsistent because the documentation shows different solutions for the same problem and you don't know which is best or recommended. And the examples are sometimes too complex. The start with existing examples is simple but if you start coding, it's not so simple. But this is a documentation problem and has nothing to do with the product itself. I prefer source code to find out how things work and this procedure worked without problems for JET.
Foreword 2: I couldn't find a description for Basic authentication. Not in the forum, not in the documentation and not in different blog posts. But I found many questions regarding Basic authentication. I found a solution for the problem but if someone has a better solution, please add a comment. My solution is more or less not API compliant - but works with JET version 1.1.2 and hopefully with newer versions as well.
Conditions
I've used our VisionX tool and the Contacts demo application for this example because VisionX has an embedded tomcat and REST access is pre-configured. It's not tricky to use any other simple JVx application but it requires more work because you need an application server and a deployed application.
The Trial version of VisionX is a good start. Before I show you the source code, I'll show you the result:
Contacts table
You're right, this isn't rocket science. But it's not hard to add more columns and some css.
What about the source code?
We have one html page, index.html:
<html>
<head>
<title>JET with VisionX/JVx</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="css/images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="css/libs/oj/v1.1.2/alta/oj-alta-min.css" type="text/css"/>
<link rel="stylesheet" href="css/demo-alta-patterns-min.css"/>
<link rel="stylesheet" href="css/override.css" type="text/css"/>
<script data-main="js/main" src="js/libs/require/require.js"></script>
</head>
<body>
<br/>
<div id="mainContent" class="oj-md-12 oj-col page-padding">
<div class="demo-page-content-area page-padding">
<h1>Contacts via VisionX</h1>
<br/>
<table id="table"
data-bind="ojComponent: {component: 'ojTable',
data: dataSource,
columns: [{headerText: '#',
field: 'ID', sortable: 'enabled'},
{headerText: 'First name',
field: 'FIRSTNAME', sortable: 'enabled'},
{headerText: 'Last name',
field: 'LASTNAME'}]}">
</table>
</div>
</div>
</body>
</html>
We need two javascript files, main.js:
paths: {
'knockout': 'libs/knockout/knockout-3.3.0',
'jquery': 'libs/jquery/jquery-2.1.3.min',
'jqueryui-amd': 'libs/jquery/jqueryui-amd-1.11.4.min',
'promise': 'libs/es6-promise/promise-1.0.0.min',
'hammerjs': 'libs/hammer/hammer-2.0.4.min',
'ojdnd': 'libs/dnd-polyfill/dnd-polyfill-1.0.0.min',
'ojs': 'libs/oj/v1.1.2/min',
'ojL10n': 'libs/oj/v1.1.2/ojL10n',
'ojtranslations': 'libs/oj/v1.1.2/resources',
'signals': 'libs/js-signals/signals.min',
'text': 'libs/require/text'
},
shim: {
'jquery': {
exports: ['jQuery', '$']
},
'crossroads': {
deps: ['signals'],
exports: 'crossroads'
}
},
config: {
ojL10n: {
merge: {
//'ojtranslations/nls/ojtranslations': 'resources/nls/menu'
}
}
}
});
require(['ojs/ojcore',
'knockout',
'jquery',
'app',
'ojs/ojknockout',
'ojs/ojknockout-model',
'ojs/ojdialog',
'ojs/ojinputtext',
'ojs/ojinputnumber',
'ojs/ojbutton',
'ojs/ojtable',
'ojs/ojdatacollection-common'],
function(oj, ko, $, app)
{
var vm = new app.contactsVM();
$(document).ready(function()
{
ko.applyBindings(vm, document.getElementById('mainContent'));
//Show the content div after the REST call is completed.
$('#mainContent').show();
});
});
and app.js
function(oj, ko)
{
function viewModel()
{
var self = this;
self.serviceURL =
'http://localhost/services/rest/vxdemo/ContactsWorkScreen/data/contacts';
self.dataSource = ko.observable();
self.ContactsCollection = ko.observable();
self.myBasicAuth = function() {};
self.myBasicAuth.prototype.getHeader = function ()
{
var headers = {};
headers['Authorization'] = 'Basic ' + btoa("admin:admin");
return headers;
};
parseContact = function(response)
{
return {ID: response['ID'],
FIRSTNAME: response['FIRSTNAME'],
LASTNAME:response['LASTNAME']};
};
var Contact = oj.Model.extend(
{
urlRoot: self.serviceURL,
parse: parseContact,
idAttribute: 'ID'
});
var myContact = new Contact();
var ContactsCollection = oj.Collection.extend(
{
url: self.serviceURL,
model: myContact,
oauth: new self.myBasicAuth(),
comparator: "ID"
});
self.ContactsCollection(new ContactsCollection());
//simple Request test
//self.ContactsCollection().fetch({headers: {"Authorization": 'Basic ' + btoa("admin:admin")}});
self.dataSource(new oj.CollectionTableDataSource(self.ContactsCollection()));
}
return {'contactsVM': viewModel};
}
);
Above files are not enough to run the example because you need a full JET application. You can download a JET application from the official site (-> Getting started with Oracle JET -> Downloading Oracle JET). The QuickStart template works well. Unzip the application into the directory: <VisionX_folder>/rad/apps/visionx/WebContent/ojet (ojet must be created manually). Simply copy the example files in the ojet, ojet/js folder.
Open the browser and navigate to: http://localhost/ojet/
My source code is small and simple but I don't know if it could be optimized. The official CRUD example application has more features and doesn't connect to a real REST service.
It wasn't funny to use/read the example because it's much for such a simple use-case. I found a similar but inofficial example. This was nice but didn't solve the Basic authentication problem!
Long story, short:
I found no option for Basic authentication and no documentation, but found that OAuth is supported. Not the same as Basic authentication but something I could search in the source code. The Model file was the right place to search (-> oauth).
And my simple solution for Basic authentication was:
self.myBasicAuth.prototype.getHeader = function ()
{
var headers = {};
headers['Authorization'] = 'Basic ' + btoa("admin:admin");
return headers;
};
Username and password are hardcoded, but it's easy to replace the code with a better solution.
The "authenticator" will be set as oauth property:
{
url: self.serviceURL,
model: myContact,
oauth: new self.myBasicAuth(),
comparator: "ID"
});
The problem with this API is that it's not guaranteed that the getHeader method will be used in future releases. And it's also not perfect to use oauth for Basic authentication, but whatever.
Our example runs with VisionX' embedded tomcat. If you want to test with your own application server, you should enable CORS for VisionX to use the REST services from an external server:
To enable CORS, change the web.xml in <VisionX_folder>/conf/ and add
<param-name>cors.origin</param-name>
<param-value>http://localhost:8080</param-value>
</init-param>
to RestletServlet definition.
Development, Fun | rjahn | 29/02/2016 | 
Comments (1)
RSS-Feed