X

Geertjan's Blog

  • December 2, 2015

Part 1: Starting with the Oracle JET Base Distribution

Geertjan Wielenga
Product Manager

Normally, when you start with Oracle JET, you use the "QuickStart Basic Starter Template". That's also bundled into the Oracle JET plugin for NetBeans IDE and is the way most people begin with Oracle JET.

But there's a simpler starting point to explore. When you're on the Oracle JET Downloads page, take note of the first item in the list, "Base Distribution", as can be seen below:

When you download that ZIP file, you get no sample at all. Instead, you simply get folders named 'css', 'js', and 'scss'. These folders contain the open source libraries making up JET, the JET components, and the JET stylesheets.

The Base Distribution might be a simpler way to get started with JET than to use the "QuickStart Basic Starter Template".

Here's how to start using the Base Distribution:

  1. In NetBeans IDE, go to File | New Project. Choose HTML5/JavaScript in "Categories". Choose "HTML5/JS Application" in "Projects". Click Next. Give your project a name, e.g., "MyApp". Click Next. In "Select Template", browse to the ZIP file you downloaded above, containing the Base Distribution: 



    Click Next. Uncheck everything, unless you're going to be using Gulp, Grunt, etc. Though you can change your mind later and add those files as needed.

  2. When you click Finish above, the ZIP file will be unzipped. This may take a few minutes because there's a lot of unzipping to do, since there are several libraries involved, e.g., Knockout, Require, JQuery, that all need to be unzipped. Then you'll have this:



  3. Now, here's a really cool thing. Go to the "js/libs/oj/v1.1.2" folder and you'll find a file named "main-template.js".



    It is a fully configured RequireJS configuration file, good to go out of the box. Copy it into the "js" folder and name it "main.js".

  4. Next, let's set up our "index.html" file. Expand the "css/libs/oj/v1.1.2/alta" folder. There you'll find the "oj-alta-min.css" file. Drag and drop it below the meta tags near the top of the "index.html" file. Then register your "main.js" file as the entry point for your RequireJS usage:
    <script data-main="js/main" src="js/libs/require/require.js"></script>

    You'll now have this:

    <!DOCTYPE html>
    <html>
    <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/libs/oj/v1.1.2/alta/oj-alta-min.css"
    rel="stylesheet"
    type="text/css"/>
    <script data-main="js/main"
    src="js/libs/require/require.js">
    </script>
    </head>
    <body>
    <div>TODO write content</div>
    </body>
    </html>
  5. At this point, you can go to the Oracle JET Cookbook and copy/paste content into the "index.html" file and into the "main.js" file. For example, the Pie Chart component can easily be integrated like this. It's a simple beginning. But it's a very clear and effective approach.

    Once you have added some more content, go to File | Export Project in the main menubar and then you'll have a new ZIP file, containing your more extensive template, which you can then use later again as a basis or share with your colleagues as needed.

The above steps I will turn into a YouTube clip soon.

Join the discussion

Comments ( 2 )
  • Paul Sunday, May 22, 2016

    Hi - From Gainesville, FL

    Base v2.0.1

    When the graph is displayed in Chrome Browser it is not in color; is this correct or is there a configuration error?

    The scss folder contains errors - present before making any changes to index.html and main.js per the blog instructions.

    Thanks for the info!

    Paul


  • Geertjan Monday, May 23, 2016

    I guess you're missing the stylesheet. In general this tutorial is a great starting point: https://netbeans.org/kb/docs/webclient/ojet-gettingstarted.html


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