Wednesday, January 18, 2017

Multi Language Support in Oracle JET

There is great post from Geertjan Wielenga about Translating Oracle JET Applications. If you want to introduce multi language support into JET app - this is great place to start reading from. We are building production Oracle Cloud app with ADF BC REST and JET. This app requires multi language support - English and Lithuanian. I will describe below how we integrated multi language into various areas in the app.

Download or browse through sample application in GitHub repo - JETPlaygroundApp.

In JET we could set default language in index page html root tag. By default it is set to en-US, but it can be set to lt-LT for Lithuanian language or any other language:

Translation texts are located in message bundles. There is one default message bundle for English and translations are located in sub folders. English bundle:

Lithuanian bundle with translations for the same message keys:

Multi language bundle support must be registered in main.js (bundle file name can be anything):

Values for all labels/texts must be defined as observables and initialised from JET translation API by passing message key - this will bring default text:

When language is changed, we need to update observable values and reset language value in HTML tag. I'm changing menu labels as well by re-configuring JET router:

On UI in index.html message key is referenced directly from observable variable:

We can access message key defined in appController from individual JET module UI through $parent. For example, I'm using dueDate message key in incidents module:

Same message key is reused in another module - customers:

This is how language switch looks on UI - language change is available in preferences:

When we switch to Lithuanian language - texts are changed (the ones assigned with translatable messages):

Menu labels are also changes, JET Router is reset:

Labels are change in built-in JET components - such as date. Though is not translated completely for Lithuanian language (Today text remains in English):

Saturday, January 7, 2017

Oracle JET Router API Example

One of the examples of JET Router API usage - sign-in/sign-out implementation. After sign-in we need to change menu structure and allow access to application modules, on sign-out menu structure should be changed again. JET Router API allows to manage application navigation and menu structure from JavaScript. Check complete API methods list here - JSDoc: Class: Router.

Sample application code is available on GitHub - JETPlaygroundApp. This application is generated with JET NavDrawer template and is runnable in NetBeans and from command prompt with Grunt. I was using such Yeoman command to generate it:

yo oraclejet JETPlaygroundApp --template=navdrawer

I have changed index page to stretch to entire width and hamburger button to be always available. This is how sign-in module looks like:

After sign-in, user gets hamburger icon to access menu structure:

Oracle Developer Cloud service UI looks similar, it also gets menu list on the left, user can open it with hamburger icon:

Sign-out is available in the drop-down list:

Router API is used in three places in my sample app:

1. Initial sign-in module setup in appController.js. This is executed when application is initialized. Router is configured here with single module - login. Developer should get root instance, configure it with module list and define array with description how each menu item will look like:

2. On sign-in, when login function is called - we get the same root instance of the router. Configure it with new set of modules, one of them is marked as default, define array with descriptions and reset current navigation. At the end we should sync all changes with Router instance, this is done through sync() method call:

3. On sign-out, when logout functionality is called. We reset router configuration with single login module. Login module is set as default. Here we call Router API method go(). Method doesnt need parameter, it will navigate to default module, if no parameter specified. Depending on URL state, if current module before sign-out is default one, URL will not change - this would require to call sync() method to force sign-in module display. If user is on any other module, not the default one - go() method will navigate to sign-in module automatically:

Friday, January 6, 2017

Oracle ADF - Strategic Oracle Technology

Happy New Year !

There is update for Oracle ADF Statement of Direction dated to November 2016:

You can read full document on Oracle Support site, search for document ID 1985782.1.

To summarise outlined roadmap for Oracle ADF:

1. Oracle continues its commitment to Oracle ADF as a strategic technology

2. Oracle ADF will bring new technologies minimising the negative effect of change (recent examples - ADF BC REST, HTML5 support)

3. In future versions of ADF there will be more focus on JavaScript solutions

4. There are plans for ADF 12.2.1 and beyond