Oracle JET - new tool for us to build UI applications with JavaScript. Right now there is no out of the box integration with ADF Faces, I heard on OOW there might be some sort of integration available in the future. At the end of the day this is only JavaScript and you can integrate it into existing ADF page by yourself. Probably you would not want this, ADF Faces offers very rich set of functionalities and there is no need in extra components. Unless you would like to use WebSockets in ADF and would like to push data from JavaScript into DVT components - it could be easier to do this with JET, instead of going through ADF Bindings layer.
JET comes with developer guide, this is the first source of information along with Cookbook examples. I have implemented sample application for today post, based on developer guide section - Creating a CRUD Application Using Oracle JET. Here you can download the sample - SimpleJETApp.zip. If you would like to run it, make sure to add JET JavaScript libraries, you can take them from JET QuickStart. Size of these libraries was too large, this is why I have removed them.
REST service is implemented with ADF BC, I have described it in previous post - ADF 12.2.1 ADF BC Support for REST.
This is how it looks a table rendered with JET from REST data supplied by ADF BC, with pagination support. JET is using Alta UI style, visually there is no much difference comparing to ADF Faces:
Data is displayed from REST generated on top of ADF BC:
Typical JET use case is implemented by combination of JavaScript and HTML files:
JavaScript function contains a logic to invoke and parse REST service, everything is handled by JET API and popular JavaScript modules (such as Knockout, etc.). You can see how REST resource URL is defined and there is parsing rule to apply to the fetch result. I have set to fetch up to 20 rows only:
There is main JavaScript file in JET. You need to include initialisation steps there:
The last step - UI. JET offers table component with pagination support. Pagination happens on client side, this means you should not fetch many rows anyway. UI structure is pretty simple:
I have recorded a video to show how table pagination works. All rows are on client side and still pagination is not super quick, as I would expect it:
For comparison, I have uploaded table pagination performance video for ADF 12c Alta UI. ADF Faces pagination support works pretty quick, if not faster:
I'm happy to have additional Oracle development toolkit available. We are going to use it in our projects in combination with ADF.
JET comes with developer guide, this is the first source of information along with Cookbook examples. I have implemented sample application for today post, based on developer guide section - Creating a CRUD Application Using Oracle JET. Here you can download the sample - SimpleJETApp.zip. If you would like to run it, make sure to add JET JavaScript libraries, you can take them from JET QuickStart. Size of these libraries was too large, this is why I have removed them.
REST service is implemented with ADF BC, I have described it in previous post - ADF 12.2.1 ADF BC Support for REST.
This is how it looks a table rendered with JET from REST data supplied by ADF BC, with pagination support. JET is using Alta UI style, visually there is no much difference comparing to ADF Faces:
Data is displayed from REST generated on top of ADF BC:
Typical JET use case is implemented by combination of JavaScript and HTML files:
JavaScript function contains a logic to invoke and parse REST service, everything is handled by JET API and popular JavaScript modules (such as Knockout, etc.). You can see how REST resource URL is defined and there is parsing rule to apply to the fetch result. I have set to fetch up to 20 rows only:
There is main JavaScript file in JET. You need to include initialisation steps there:
The last step - UI. JET offers table component with pagination support. Pagination happens on client side, this means you should not fetch many rows anyway. UI structure is pretty simple:
I have recorded a video to show how table pagination works. All rows are on client side and still pagination is not super quick, as I would expect it:
For comparison, I have uploaded table pagination performance video for ADF 12c Alta UI. ADF Faces pagination support works pretty quick, if not faster:
I'm happy to have additional Oracle development toolkit available. We are going to use it in our projects in combination with ADF.
16 comments:
It is also interesting to compare with video of ADF Essentials running on Glassfish server on the same hardware.
On previous ADF/WLS releases, Glassfish was running faster - http://andrejusb.blogspot.com/2012/10/adf-11g-r2-weblogic-1035-vs-adf.html
Andrejus
Are you also connecting to MCS or hosting on JCS?
Just thinking because of the licenses.. Otherwise I'd be using JET :)
This is local example, not hosting it. Let's wait when JET will be OpenSource, to use it in production systems :)
Andrejus
Hi Andrejus,
How do you set basic authentication while calling the rest service?
Kindly suggest.
Thanks.
Good point, I will need to check this.
Andrejus
Hello Andrejus,
First of all, thank you very much for your contribution. It really helped me to start with my development on JET. Secondly, how can I display a list from the response of a web service like the one you have in this example?
Thanks in adavance!
Emilio
Hi,
Do you want to display a list instead of table? There is list component provided by JET, you can use it.
Regards,
Andrejus
If you're still interested in a solution for the basic authentication problem:
http://blog.sibvisions.com/2016/02/29/using-oracle-jet-with-visionxjvx/
(search: Basic authentication)
Use it with care :)
Thanks, i will take a look - your solution is interesting.
Andrejus
Hi,
I am unable to get rest service response from HTTP analyzer when i deploy in Weblogic in JDev 12.2.1, but i am getting data from AppModule(BC) Tester.
I got below error.
Error 401--Unauthorized
From RFC 2068 Hypertext Transfer Protocol -- HTTP/1.1:
10.4.2 401 Unauthorized
The request requires user authentication. The response MUST include a WWW-Authenticate header field (section 14.46) containing a challenge applicable to the requested resource. The client MAY repeat the request with a suitable Authorization header field (section 14.8). If the request already included Authorization credentials, then the 401 response indicates that authorization has been refused for those credentials. If the 401 response contains the same challenge as the prior response, and the user agent has already attempted authentication at least once, then the user SHOULD be presented the entity that was given in the response, since that entity MAY include relevant diagnostic information. HTTP access authentication is explained in section 11.
Thanks in advance,
Regards
Suresh
This means username/password is not constructed correctly during REST request.
Regards,
Andrejus
Hi Andrejus,
I have created ADF BC rest web service and trying to use same web service in oracle JET application. Both GET and POST working fine from postman rest client. But same when I try to invoke using JET application, I will get below mentioned error
POST http://127.0.0.1:7101/PostTEST-RESTWebService-context-root/rest/1/testPost 500 (Internal Server Error)
In the ADF BC log, it shows
java.lang.ArrayIndexOutOfBoundsException: 1
Below is the code snippet I am using to invoke rest webservice from jet application,
$.ajax({
url:"http://127.0.0.1:7101/PostTEST-RESTWebService-context-root/rest/1/testPost",
type: 'POST',
async: false,
crossDomain: true,
contentType:'application/vnd.oracle.adf.resourceitem+json',
headers: {"Accept": "application/json; text/html;"},
data: JSON.stringify(dataObject),
dataType:"json",
success: function (data, textStatus, jqXHR) {
console.log("Passed in value:"+JSON.stringify(dataObject));
//console.log("Inside Successfunction:"+geturl.getResponseHeader("REQ_RESPONSE"));
},
error: function (jqXHR, textStatus, errorThrown) {
console.log("Error thrown inside error function:"+errorThrown);
//self.save ("Error : " + textStatus);
}
});
my dataobject is as follows
var dataObject = {
"Id": 3,
"Firstname": "kot",
"Lastname": "tm",
"Createdon": "1989-07-20T00:00:00+05:30"
}
Could you please tell what mistake i am doing. Since it is working fine using postman but in JET application I am seeing the issue
Try to test using code described in this post: http://andrejusb.blogspot.lt/2016/10/oracle-jet-and-adf-bc-rest-security.html It seems similar, I'm also using POST there.
Andrejus
@Kotresh T M:
JSON.stringify(dataObject) - there is an extra call of JSON.stringify
Thanks for follow up.
Andrejus
Post a Comment