Create a Web Application Using the Oracle JET Starter Templates

You can download Oracle JET with a starter template that contains a pre-configured application ready to run or modify as needed for your environment.

Topics:

Download Oracle JET with a Starter Template

You can download any of the applications in the Oracle JET Starter Template collection to get Oracle JET. The Web Nav Drawer Starter Template contains the Oracle JET bundle, an index.html file already configured for Oracle JET and is a good choice for getting started with Oracle JET.

Tip:

If you use the Oracle JET CLI to scaffold a web application with a navdrawer template, then you already have a Starter Template and can skip this step.

Also, if you use NetBeans IDE version 8.2, it includes the Oracle JET QuickStart Basic project which contains the same content as the Web Nav Drawer Starter Template.

To download Oracle JET with a Starter Template:

  1. Navigate to the Oracle JET download location at: Oracle JET Downloads.

  2. Choose Accept License Agreement.

  3. Download the desired template.

    For example, to download the Web Nav Drawer template, select Web Nav Drawer Starter Template with Oracle JavaScript Extension Toolkit Pre-configured.

Load the Oracle JET Starter Templates

The Oracle JET Starter Templates include all of the Oracle JET libraries and an index.html file already configured for your use. To use the Oracle JET Starter Templates, extract the zip files and open the index.html file in your favorite browser.

You can also load the Oracle JET Starter Templates in the NetBeans IDE or the development environment of your choice.

Create an Application in the NetBeans IDE with a Site Template

You can create a new Oracle JET application in the NetBeans IDE using files extracted from oraclejet.zip or any of the Oracle JET Starter Templates. NetBeans 8.1 and higher includes support for Oracle JET applications using the Oracle JET zip files as site templates in the NetBeans IDE.

Before you begin:

To create an Oracle JET application in the NetBeans IDE by using a site template:

  1. In the NetBeans IDE, click New Project.

  2. In the New Project dialog, create a new HTML5 application.

    1. In the Categories area, click HTML5/JavaScript.

    2. In the Projects area, click HTML5/JS Application.

      In this example, the HTML5 & PHP download bundle is used for the initial NetBeans 8.2 download, and the categories are limited to HTML5 and PHP. If you downloaded a different NetBeans download bundle or are using a different version, the dialog may include additional or different categories.

    3. Click Next.

  3. In the New HTML5/JS Application dialog, configure the project name and project location.

    1. In the Project Name field, enter a name for your project.

    2. In the Project Location field, enter a location to store the project files.

      In this example, the project is named OracleJETSample, and the project files will be stored in the C:\NetBeansProject directory.

    3. Click Next.

  4. In the New HTML5/JS Application dialog, specify the name of the site template.

    1. Choose Select Template.

    2. In the Template field, choose Browse and select the location containing the download bundle.

      In this example, the completed HTML5 Application dialog specifies C:\Downloads as the location for the JET-Template-Web-NavDrawer.zip file.

    3. Click Next.

  5. Optionally, in the New HTML5 Application Dialog, remove the check mark from any tools your application won’t need. By default, all tools are checked.

    Tip:

    If you decide you want to use one of the tools after you create your application, you can add it in the NetBeans IDE. Choose Tools, then Options, and HTML/JS. Select the tab containing the tool you wish to add, and select the option to install the package.
  6. Click Finish to create your application.

    When you click Finish, NetBeans creates the project and adds an index.html file to your project. This figure shows the project files and index.html file that NetBeans 8.2 generated for a project named OracleJETSample with no optional tools installed.

Run the Oracle JET Starter Templates in NetBeans

To run the Oracle JET Starter Templates in the NetBeans IDE:

In the Projects panel, right-click the index.html file and choose Run File to display the page in your browser.

Note:

To take full advantage of the NetBeans integrated tools, the NetBeans team recommends that you install the NetBeans Connector extension for the Chrome browser. For additional info, see https://netbeans.org/kb/docs/webclient/html5-gettingstarted.html.

The graphic below shows the Oracle JET Web Nav Drawer Starter Template displayed in the Chrome browser at run time. In this example, the NetBeans Connector is enabled.