X

Geertjan's Blog

Restructuring of Oracle JET Applications

Geertjan Wielenga
Product Manager

During UKOUG 2016, this week, I learned a cool thing from my colleague Lyudmil Pelov—the response to the most frequently asked question from the Oracle JET sessions I have been doing around the world: "Isn't the 'js/views' and 'js/viewModels' structure a technical rather than a functional architecture? And wouldn't it be better to have both sides of an Oracle JET module in the same folder?"

Well, take a look at this, the "navdrawer" template restructured based on functionality, e.g., in the "app/pages/dashboard" folder, both sides of the "dashboard" module are found, rather than the viewModel being in 'js/viewModels' and the view in 'js/views':

If you prefer this structure over the default structure brought to you by the Oracle JET templates, take the following steps. I suggest you first get it working in the "navdrawer" template, before trying to apply this structure to your own application. 

  1. Set up the 'navbar' template, i.e., use the "Oracle JET QuickStart Basic" template in NetBeans IDE.

  2. Create a new folder named 'app', as shown in the structure above.

  3. Inside 'app', create a folder called 'pages', with a subfolder for each of the custom Oracle JET modules provided by the 'navbar' template, i.e., 'dashboard', 'incidents', 'customers', and 'about'. Move the 'dashboard.js' and 'dashboard.html' from 'js/viewModels' and 'js/views' into the 'app/dashboard' folder. Do the same for the other Oracle JET modules.

  4. Move the 'libs' folder into 'app' (and tweak '.bowerrc' and potentially other similar files, to download JavaScript libraries into the new location of 'libs'). In 'main.js', change all the paths to JavaScript libraries to reflect their new locations, i.e., they're no longer in 'libs'; they're in 'app/libs'.

  5. Move 'appController.js', 'main-release-paths.json', and 'main.js' into the 'app' folder. In 'index.html', correct the reference to 'main.js' to its new location in 'app' and do the same for 'require.js', which should now be in 'app/libs/require'.

  6. In the 'requirejs.config' section in 'main.js', change the 'baseUrl' to point to '.' instead of 'js'.

  7. In 'appController.js', change the router as follows and notice that you can also have a functional nested structure for your Oracle JET modules:
    function getPagePath(path) {
    return 'pages/' + path + '/' + path.substr(path.lastIndexOf('/') + 1);
    }
    self.router = oj.Router.rootInstance;
    self.router.configure({
    'dashboard': {value: getPagePath('dashboard'), label: 'Dashboard', isDefault: true},
    'incidents': {value: getPagePath('incidents'), label: 'Incidents'},
    'customers': {value: getPagePath('customers'), label: 'Customers'},
    'about': {value: getPagePath('about'), label: 'About'}
    });
  8. In 'main.js', as the new first lines in the 'require' block, override the default locations of the viewModels and views, i.e., rather than the default 'js/viewModels' and 'js/views', you now want them to both be found within the 'app' folder (in the location specified by the router in the previous step):
    oj.ModuleBinding.defaults.modelPath = 'app/';
    oj.ModuleBinding.defaults.viewPath = 'text!app/';

At this point, you should be able to delete the 'js' folder, i.e., there should be nothing in it anymore.

Run the application and everything should work exactly as before!

Join the discussion

Comments ( 2 )
  • Artur Mustafin Thursday, March 2, 2017

    To make everything work on existing projects, follow these steps:

    Just follow the steps 1,2,3 and then

    4. edit appController.js on line 20:

    function getPagePath(path) {

    return '../app/pages/' + path + '/' + path.substr(path.lastIndexOf('/') + 1);

    }

    5. add value: getPagePath('dashboard') to each page configuration in router

    self.router.configure({

    'dashboard': {value: getPagePath('dashboard'), label: 'Dashboard', isDefault: true},

    'incidents': {value: getPagePath('incidents'), label: 'Incidents'},

    'customers': {value: getPagePath('customers'), label: 'Customers'},

    'about': {value: getPagePath('about'), label: 'About'}

    });

    6. in main.js on line 53 add defaults:

    oj.ModuleBinding.defaults.modelPath = '';

    oj.ModuleBinding.defaults.viewPath = 'text!';

    That's all, falks!


  • B Sohal Saturday, September 9, 2017
    I have followed all steps & do see the tabs (and footer links too) but the views are not rendering upon click i.e. main section is always blank (not even displaying for default tab).

    There is no error on clicking tabs under Browser log. No errors in Network Monitor either.

    Earlier I was getting errors under both, but resolved by following steps carefully.

    Can someone help here.
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.