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:
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.
- 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:
- 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".
- 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:
<title>TODO supply a title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div>TODO write content</div>
- 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.