Freitag, 17. Juni 2016

Start your ADF Essentials Application on Glassfish within 5 min with docker

Thanks to the official glassfish docker images on docker hub ( you can run your ADF Essentials enabled glassfish server within 5 minutes. As a first step you have to download the ADF essentials runtime and configure your machine to run docker images. After that, you can easily create your glassfish server with the next few lines of cone:

Start your docker image and add the ADF Essentials libs

  1. docker run --name=glassfishadf -ti -p 4949:4848 -p 8001:8080 glassfish/nightly
  2. docker cp ~/Downloads/ glassfishadf:/
  3. docker exec glassfishadf unzip /
  4. docker exec glassfishadf find /modules -name '*.jar' -exec cp {} /glassfish4/glassfish/domains/domain1/lib/ \;

Configure the glassfish server

After we installed the ADF Essentials libraries in our glassfish docker images, we have to configure and restart the server. You can start the admin console with
https://localhost:4949 (admin/glassfish).

Then you go to "Configuration -> server-config -> JVM Settings -> JVM Options"
Add the parameter "-Doracle.mds.cache=simple" and change the MaxPermSize to "-XX:MaxPermSize=512m".

Restart the server with "server -> restart"

Deploy and run your application

Now you can deploy your ADF Essentials application via the admin console. Maybe you have to enable the application after deployment.

Your ADF Essentials application should be up and running. Have fun!

Montag, 25. April 2016

Using different jQuery Versions in Oracle Jet

My latest IoT home projekt works with digitial LEDS that are controlled by a NodeJS server on my raspberry pi. By calling my REST API with a html hex parameter I was able to easily manipulate the color of the whole strip. Unfortunately my girlfriend wasn't excited at all because typing in a hex color value is not handy at all. So I was in need of a nice client application to send html color codes to my raspberry pi. 

A perfect use case for a simple Oracle Jet application. There are 1000+ color pickers on the internet, so I thought this will be pretty easy. Expected time to get things going was less than 20 Minutes. So I created a Jet application with the basic template and searched for a suitable color picker. The best color picker I found was the farbtastic color wheel.

After downloading the color picker I put the farbtastic.js file in /libs/farbtastic/ and the farbtastic.css directly into /css.

Then I added the library into the require config in main.js so I can use it in my modules. 

The last step should be using require to load the farbtastic.js and then call the function to add the color wheel to my div block. I added everything to the compContent.module. Here is a snippet of the HTML and the js. Take a look at the require block.

<!-- Copyright (c) 2014, 2016, Oracle and/or its affiliates. The Universal Permissive License (UPL), Version 1.0 --><h1>Complementary</h1>
  Content in this area will be wrapped below the Navigation and  Main Content Area sections when the viewport is made smaller.  At the smallest viewport size, it will be the last section listed.</div>
  To change the content of this section, you will make edits to the compContent.html file located in the /js/views folder.</div>
<h2 data-bind="text: color"></h2>
<div id="colorpicker">Place for colorpicker</div>

<div data-bind="foreach: { data: colors, afterRender: showPicker}">

That should be it. Lets see how it looks! 
When we start the application we don't see anything. What's wrong? The Message we receive is:
Message: Cannot read property 'msie' of undefined

Oh damn, Oracle Jet ships with jQuery 2.1.3 and the color picker I used is not compatible to jQuery Versions higher than 1.8. The easiest solution is to use a component that supports a newer jQuery Version. So is there no way to use two different jQuery Versions in one Oracle Jet application? Of course there is, let's see what we need to do.

First we download our different jQuery version and put it into /libs/jquery. Now there should be a jquery-1.8.0.js and a jquery-2.1.3.js in this path. 
Running two different jQuery versions at the same time, requires to use jQuery in the noconflict mode. To do so, we need to create a new js file for each version and load this files in require config. I named the files jquery-2.1.3-noconflict.js and jquery-1.8.0-noconflict.js. Here is a sample for version 1.8

define(["libs/jquery/jquery-1.8.0.min"], function($) {
    //drop the `true` if you want jQuery (but not $) to remain global    return jQuery.noConflict();

Do the same for version 2.1.3 and use the new files in require config as shown below

  // Path mappings for the logical module names  paths //injector:mainReleasePaths  {
    'tinyColorPicker''libs/tinyColorPicker/jqColorPicker.min'  }
  //endinjector  ,
  // Shim configurations for modules that do not expose AMD  shim{

Take a good look at the definitions of jquery / jquery-1.8 and the shim configuration which is needed because jquery doesn't support AMD.
You can use the following snippet to check which version of jquery is in use.

            var version $().jquery;
            console.log('JQ Version'version);

Now we finally have to tell our module to use jQuery 1.8 and not 2.1.3. Therefor we change the require definition in our module to load our special version.

    function(ojko$) {

This was the last step to get the color picker working. In the console output we are able to see which version of jQuery is used in wich block. 

When I start my Jet application I am now able to use the color picker I wanted with the jQuery version it needed.

Its working fine and you can see a demo in my tweet. Have fun!

Montag, 9. Dezember 2013

Rapid Response UI with WebSockets Example

In my earlier post Rapid Response UI with WebSockets, I described a way to make your UI respond very quickly to events created by the server. Last friday I showed an example to the german ADF community. This example can be downloaded here

It is a very simple messaging application. Very straight forward without any validations or clever process handling. But you can easily send messages. When you start the application you can name yourself and receive messages from there on.
To run the example you need a table called messages. There is a Scripts folder with a create script for this table.

Have fun.

Message when connected to the WebSocket Endpoint

WebSocket message sent by the server and get request send by the client upon message receive from the server. See the badge turned from 0 to 1.

Rapid Response UI with WebSockets

If you take a close look at rich internet applications, there is no real server sided event producing. The server is always only responding to requests. This is natural since it is a problem of the HTTP protocol everything depends on. If it looks like you receive a server side message just in time, it is only because you send a request earlier in the background. This requests are causing a lot of network traffic. Since most of the time it is like a client asks "is there something new on your side" and the server only response with something like "no, ask me later again". This mechanism is called polling and is way off age. The smart new solution is called WebSockets. It's part of the HTML5 standard and specially designed to allow a bidirectional communication between server and client in a web environment.

WebSocket communication is initiated with a HTTP Request. If the server is able to communicate with the WebSocket protocol the connection gets upgraded. Now the connection does not close after every request and the server is able to send messages to the client.

Right now there is no native WebSocket support within any ADF components. But I am sure there is new stuff up ahead. I expect at least the active data sync service to be upgraded to support WebSocket connections. Right now it relies on polling and streaming.

What if I have the need to refresh the clients UI by a server event? Can I make use of this cool new WebSocket protocol, to make my ADF UI respond very quickly? Yes you can. And it is far more easy than I expected. Let's try something with a JavaScript WebSocket connection and a simply bean.

Before you start you need a Weblogic 12c or a Glasfish 4 as application server because those support the new protocol. On Glasfish you have to turn it on. On Weblogic 12c you can just start.

This is what we are going to build. A ADF Application that informs it's page about something new. Without any polling or something like that.

When you created your ADF WebApplication you need to add the Weblogic 12c API library to the ViewController project.

The next thing we create is the websocket endpoint connection. We only need a small Java class for our purpose. There we add an annotation @WebSocket and define a path for our connections.

This class does nothing very special. Most interesting is the static queue which contains all the websocket connections. This can later be used by our bean to send messages to one or all the connected clients.
The next thing we should do, is connecting to our new created WebSocket endpoint. Since we don't have any smooth af:websocketconnection component, we need to do this stuff by ourselves. Create a JavaScript file and add it to an ADF page with the af:resource component directly under the af:document tag. For Example:

<af:resource type="javascript" source="/resources/js/wsClient.js"></af:resource>

Within this JavaScript file, create method to connect to our new WebSocket endpoint. 

The shown method will show us a alert window on a successful connection. So, when we start our page now, we should get a nice alert window. You have to be careful that the defined wsUri variable matches the context root you defined for your ADF Webapplication. The added "/ws" comes from the path we created by our annotation in the endpoint class.
Next we should initiate a server side message to our client. Therefore we create a bean that sends a message to all our connected clients. And to call this method as ADF ActionEvent we also need a method that has a ActionEvent parameter.

Now we are able to connect to as client with JavaScript to our WebSocket endpoint and to send a message from within out application to all connected clients. So now we are close to the final. All we need now, is to refresh our UI on this server side event. If you search for solutions to run some Java from JavaScript in an ADF Application, you get really fast to the need of the af:serverlistener component. This can run a defined Java method from JavaScript. If you define it like this

<af:serverListener type="CallJava" method="#{sender.refresh}"/>

You need a bean called sender with a refresh method. Within JavaScript you call this serverlistener like this. 

The use of this component is already well documented so I won't go into detail with this one. Now the last thing we need, is to refresh our UI within this refresh method with a partial page rendering. Therefor we use the addPartialTarget method. 

This method executes some stuff in the bindings and adds the component that is bound to our af:serverlistener. You can also add some other components to be refreshed. 

Be careful! This is only a Proof Of Concept. Because in production this can cause your server to be very slow. Just imagine you have 1000 connected clients. In the moment you call the broadcast method, there are 1000 clients, making a request to your server in the same moment. So we created our very own DOS attack :)
If you want to use this, you have to track session information and add them to the queue so you can send a message to only one client.

Freitag, 27. September 2013

Easy reuse of database functions for attribute validation in ADF Business Components

A lot of developers are struggling with check functions stored in their database. This post will show a very easy and declarative way to reuse your existing database functions.

Lets assume we have a check function that returns a simple character as Y oder N based on it's validation outcome. 

This function will guarantee that the parameter string will start with a Sir. This way we can create a validation that will only allow noble employees in our company ;)

The example is based on the HR schema and has only a EO for the Employees table, a VO based on this EO which has one instance in our EmployeesService AM. 
To create our validation we need to get our hands on this DB function. Of course we can start to write our own prepared statement in EmployeesEOImpl.class. But we want to work more declarative and move more pixels. Easiest way to get the return value of our function is to create a SQL query with calls it.

Don't forget to add the named parameter at the query section of our VO.

This new VO can be access by our EO with an simple ViewAccessor. We don't fill the parameter of our checkNameVO within the accessor. This way the accessor can be reused by other attributes.

Now our setup is complete and we can create our groovy script based attribute validation. First we fill the parameter of our where clause and execute the query. We know that our statement will definitely return at most one row, but JDeveloper doesn't. So we have to get the Result attribute of the first element of our rowset.  

To verify our success we can start the application module and test to change the first name of an employee to something without a Sir in the beginning.

This is a very easy way to reuse existing database functions for validating our entity object attributes. Be careful with this type of validation. This way we create a logical dependency between the result of an VO and an EO attribute. So you should consider where to place this type of VOs within your application structure. 

Freitag, 12. Juli 2013

Install JDeveloper 12c on Mac OS X Mountain Lion

To install JDeveloper on Mac OS you need to get the generic installer first. Go to the official Oracle Download page and select generic.

I started the installer by invoking my standard Java version by starting > java -jar jdev_suite_121200.jar
And there you go, just go through the installer step by step. Don't be afraid of creating a new oraInventory anywhere and at the question about the user permission, I just allowed everyone to make changes to my new installation since its only to play around.

After the installation I was very exited to get my hands on the new Version and started directly. Unfortunately I only got the message that we need Java 7 now. (Sorry for the German stuff in the pictures)

Looks like we need to get JDK 7 first. This should be downloaded here:

After installation we need to change jdev.conf, otherwise JDeveloper still won't start. It's located in your installation directory under /jdeveloper/jdev/bin/jdev.conf 
Open it and find the line where JAVA_HOME is defined and change it to the following path:

SetJavaHome /Library/Java/JavaVirtualMachines/jdk1.7.0_25.jdk/Contents/Home

Should look like this in the end:

 Ok, now you can start your JDeveloper 12c experience ;)

Additional Tip:
Because I have to switch between different JDeveloper Versions, I make use of the -J-Dide.user.dir start parameter. On Mac I create a simple Alias for the thats located in the <install home>/jdeveloper directory. Just open it with a good text editor like TextWrangler and add the start parameter to point to your desired USER_DIR for this installation. You even can use different USER_DIR for the same installation this way.

Montag, 28. Januar 2013

ADF Hackers Event Review

Last Friday I went to the ADF Fitness Center aka ADF Hackers Event in Munich, organized by the German ADF Community. It was a impressive and well coordinated event. I was astound about the number of attendants. Nearly 60 people with distinct ADF knowledge who shared their experience. In small sessions about architecture, test driven development and mobile, people where able to ask a lot of questions and open up their horizon. I hope to participate at more events like this.