| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| <html> |
| <head> |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> |
| <title>Getting Started with Oracle JET Applications - NetBeans Tutorial</title> |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| <meta name="description" content="A tutorial that introduces the support for developing HTML5 applications in NetBeans IDE |
| and uses the jQuery JavaScript library."> |
| <meta name="keywords" content="NetBeans, IDE, integrated development environment, jQuery, JavaScript, CSS, HTML5"> |
| </head> |
| <body> |
| |
| <!-- |
| Copyright (c) 2016, Oracle and/or its affiliates. All rights reserved. |
| --> |
| |
| <h1>Getting Started with Oracle JET Applications</h1> |
| |
| <p> |
| This document provides a step-by-step set of instructions guiding |
| you through the process of getting started with the |
| <a href="http://oraclejet.org">Oracle JavaScript Extension Toolkit (JET)</a>. JET empowers developers |
| by providing a modular toolkit based on modern JavaScript, CSS3, |
| and HTML5 design and development principles.</p> |
| |
| <h3>Contents</h3> |
| <img src="../../../images_www/articles/81/netbeans-stamp.png" class="stamp" alt="Content on this page applies to NetBeans IDE 7.4 and 8.0" title="Content on this page applies to the NetBeans IDE 7.4 and 8.0" > |
| |
| <ul class="toc"> |
| <li><a href="#settingUp">Setting Up</a> |
| <ul> |
| <li><a href="#installing">Installing Oracle JET Support Plugin</a></li> |
| <li><a href="#downloading">Setting Up the Oracle JET Base Distribution</a></li> |
| <li><a href="#configuring">Configuring the Oracle JET Base Distribution</a></li> |
| </ul> |
| </li> |
| <li><a href="#creatingAFirstModule">Creating a First Module</a></li> |
| <li><a href="#usingJETComponents">Using JET Components</a> |
| <ul> |
| <li><a href="#creating">Creating Additional JET Modules</a></li> |
| <li><a href="#using1">Using the JET Cookbook</a></li> |
| </ul> |
| </li> |
| <li><a href="#settingUpIntermodular">Setting Up Intermodular Communication</a></li> |
| </ul> |
| |
| <h4>To complete this tutorial, you will need the following resources.</h4> |
| |
| <table id="requiredSoftware"> |
| <tbody> |
| <tr> |
| <th class="tblheader" scope="col">Software or Resource</th> |
| <th class="tblheader" scope="col">Version Required</th> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE, the HTML5/JavaScript Bundle</a></td> |
| <td class="tbltd1">8.1</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <p><strong class="notes">Notes:</strong></p> |
| |
| <ul> |
| <li>This document assumes you have some basic knowledge of, or programming experience with |
| HTML, CSS, and JavaScript.</li> |
| <li>Knowledge of the JavaScript frameworks <a href="http://knockoutjs.com/">Knockout</a> |
| and <a href="http://requirejs.org/">Require</a> is helpful for working through |
| this tutorial, though not mandatory. However, these two popular open source JavaScript |
| libraries play a central role in JET. Hence, the more you are familiar with them, |
| the easier will be your journey into JET.</li> |
| <li>It is helpful to install the <a href="https://chrome.google.com/webstore/detail/netbeans-connector/hafdlehgocfcodbgjnpecfajgkeejnaa">Chrome Connector Plugin for NetBeans</a> into |
| the Chrome browser. Using the Chrome browser, together with the plugin, |
| with NetBeans IDE 8.1 adds a number of handy features, such as automatic refresh |
| of the browser when you save a file in NetBeans IDE, as well as the possibility |
| to explore the live DOM from within NetBeans IDE.</li> |
| <li>To use the same look and feel in NetBeans IDE as used in this tutorial, |
| install the <a href="http://plugins.netbeans.org/plugin/62424/darcula-laf-for-netbeans">Darcula LAF for NetBeans</a>, |
| which is also available in the Plugin Manager, under Tools | Plugins.</li> |
| |
| </ul> |
| |
| <!-- ++++++++++++++++ Setting Up ++++++++++++++++ --> |
| <a name="settingUp"></a> |
| <h2>Setting Up</h2> |
| <p>In this exercise you set up NetBeans IDE 8.1, as well as the base distribution of Oracle JET.</p> |
| |
| <div class="indent"> |
| <a name="installing"></a><h3>Installing the Oracle JET Support Plugin</h3> |
| <p>In NetBeans IDE 8.1, go to <b>Tools | Plugins</b> and install |
| the Oracle JET Support plugin.</p> |
| <p><img src="../../../images_www/articles/81/web/oraclejet-gettingstarted/plugin-1.png" |
| class="margin-around b-all" |
| /></p> |
| <p>This plugin gives you code completion in the HTML editor, |
| together with documentation, for the JET components, |
| such as those you will use later in this document. It also |
| provides complete project templates as the basis |
| of your JET applications.</p> |
| <p> |
| Once the above plugin is installed in NetBeans IDE 8.1, you will have a number |
| of new features in NetBeans IDE 8.1 that simplify development with Oracle JET and that |
| are used in various parts of this tutorial.</p> |
| </div> |
| |
| <div class="indent"> |
| <a name="downloading"></a><h3>Setting Up the Oracle JET Base Distribution</h3> |
| <p>The Oracle JET Base Distribution provides all the JavaScript libraries and CSS stylesheets |
| that provide the absolute minimum starting point of creating JET applications. In this |
| section, you set up the Oracle JET Base Distribution in the IDE as the basis of a new |
| HTML5/JavaScript application.</p> |
| <ol> |
| <li><p>In NetBeans IDE 8.1, select the <strong>HTML5/JavaScript</strong> category and |
| then select <strong>Oracle JET Base Distribution</strong>, as shown |
| below.</p> |
| <img src="../../../images_www/articles/81/web/oraclejet-gettingstarted/newhtml5project-1.png" |
| class="margin-around b-all" |
| > |
| <p>Click Next.</p> |
| <br/> |
| <p>Type the name of the application, such as <strong>CustomerVisualizer</strong>, |
| and select a location to store it, as shown below.</p> |
| <br/> |
| <p><img src="../../../images_www/articles/81/web/oraclejet-gettingstarted/newhtml5project-8.png"/></p> |
| <br/> |
| |
| Click <strong>Finish</strong> to complete the wizard. |
| </br> |
| </br> |
| </li> |
| <li> |
| <p>When you click Finish, the IDE creates the project, which might take a moment, |
| since several JavaScript libraries are included in the ZIP file. |
| When the unzip process is complete, the IDE displays a node for the project in the Projects window.</p> |
| </li> |
| </ol> |
| <p>You now have a new HTML5/JavaScript project created from the Oracle JET Base Distribution.</p> |
| <img src="../../../images_www/articles/81/web/oraclejet-gettingstarted/newhtml5project-7.png" |
| class="margin-around b-all"> |
| <p>Spend some time exploring the project structure of the application. For |
| example, look in <strong>js/libs</strong> and you will see the JavaScript |
| libraries that constitute Oracle JET. After looking through the project |
| structure, continue with the steps that follow to configure the project.</p> |
| </div> |
| <div class="indent"> |
| <a name="configuring"></a><h3>Configuring the Oracle JET Base Distribution</h3> |
| <p>In this section, you prepare your JET application for a first deployment. For |
| example, you include the CSS stylesheet and reference the JavaScript file that |
| initializes the application.</p> |
| <ol> |
| <li> |
| <p>Create a new <tt>index.html</tt> file in the project root, |
| by going to the New File dialog (Ctrl-N) and then |
| selecting <strong>HTML File</strong> in the <strong>HTML5/JavaScript</strong> category.</p> |
| </li><li><p>From <strong>js/libs/oj</strong>, copy the <strong>main-template.js</strong> file, |
| shown below:</p> |
| <br/> |
| <p><img src="../../../images_www/articles/81/web/oraclejet-gettingstarted/newhtml5project-6.png" |
| |
| /></p> |
| <br/> |
| <p>Paste the file into the <strong>js</strong> folder and rename it <strong>main.js</strong>, |
| as shown below:</p> |
| <br/> |
| <p><img src="../../../images_www/articles/81/web/oraclejet-gettingstarted/main-1.png" |
| |
| /></p> |
| </li> |
| <li> |
| <p>Open the <strong>index.html</strong> file and drag the <strong>js/libs/require.js</strong> file |
| above the closing HEAD element. You should now see this:</p> |
| <pre class="text/javascript"> |
| <!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"> |
| <b><script src="js/libs/require/require.js" type="text/javascript"></script></b> |
| </head> |
| <body> |
| <div>TODO write content</div> |
| </body> |
| </html></pre> |
| <p>In the SCRIPT element, set the <strong>data-main</strong> attribute to point to your |
| <strong>main.js</strong> file, as shown below:</p> |
| <pre><b><script data-main="js/main" src="js/libs/require/require.js" type="text/javascript"></script></b></pre> |
| <p><strong class="notes">Note:</strong> The <strong>data-main</strong> attribute is a special attribute |
| that <a href="http://requirejs.org">Require.js</a> will check to start script loading. |
| Read more about it <a href="http://requirejs.org/docs/api.html#data-main">here on the Require.js site</a>.</p> |
| </li> |
| <li><p>In the <strong>css</strong> folder, notice a variety of CSS stylesheets are included. Drag and drop |
| <strong>oj-alta-min.css</strong>, shown below, beneath the SCRIPT element you added |
| in the previous step.</p> |
| <br/> |
| <p><img src="../../../images_www/articles/81/web/oraclejet-gettingstarted/css-1.png"/></p> |
| <br/><p>You should now see this:</p> |
| <pre class="text/javascript"> |
| <!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"> |
| <script src="js/libs/require/require.js" type="text/javascript"></script> |
| <b><link href="css/libs/oj/v1.1.2/alta/oj-alta-min.css" rel="stylesheet" type="text/css"/></b> |
| </head> |
| <body> |
| <div>TODO write content</div> |
| </body> |
| </html></pre> |
| |
| <p><strong class="notes">Note:</strong> Make sure the version number above matches the version you are using, i.e., do not |
| copy and past the above without checking that the version number is correct.</p> |
| |
| </li> |
| <li> |
| <p>Create a root <strong>ViewModel</strong> (<a href="http://knockoutjs.com/documentation/observables.html">more on Knockout ViewModels here</a>) in the <strong>require</strong> block within the |
| <strong>main.js</strong> file, as shown below:</p> |
| <pre class="javascript">require(['ojs/ojcore', |
| 'knockout', 'jquery', |
| 'ojs/ojknockout', 'ojs/ojbutton', |
| 'ojs/ojtoolbar', 'ojs/ojmenu'], |
| function (oj, ko, $) |
| { |
| <b>function DemoViewModel() { |
| } |
| $(document).ready( |
| function () |
| { |
| ko.applyBindings(new DemoViewModel()); |
| } |
| );</b> |
| } |
| );</pre> |
| <p><strong class="notes">Note:</strong> Type <strong>vm</strong> and press TAB |
| and the root ViewModel shown above will be created for you.</p> |
| |
| </li> |
| </ol> |
| <p>You can now run the application and you should see the "TODO write content" message from |
| the <strong>index.html</strong> file in the browser.</p> |
| </div> |
| |
| <!-- ++++++++++++++++ Creating a First Module ++++++++++++++++ --> |
| |
| <a name="creatingAFirstModule"></a> |
| <h2>Creating a First Module</h2> |
| <p>In this exercise you will configure your application |
| to benefit from the modularity features provided by JET. |
| Then you will create your first JET module and load |
| it into the application.</p> |
| |
| <ol> |
| <li>Add <strong>ojs/ojmodule</strong> to the <strong>require</strong> |
| block in the <strong>main.js</strong> file. |
| <pre class="text/javascript">require(['ojs/ojcore', |
| 'knockout', 'jquery', <strong>'ojs/ojmodule',</strong> |
| 'ojs/ojknockout', 'ojs/ojbutton', |
| 'ojs/ojtoolbar', 'ojs/ojmenu'],</pre> |
| <p><strong class="notes">Note:</strong> <strong>'ojs/ojmodule',</strong> is |
| the JET module responsible for managing the loading of modules into your application.</p> |
| </li> |
| <li><p>Create a folder <strong>js/viewModels</strong>, where you will |
| create the JavaScript side of your JET modules, and <strong>js/views</strong>, |
| where you will create the HTML side of your JET modules:</p> |
| <br/> |
| <p><img src="../../../images_www/articles/81/web/oraclejet-gettingstarted/viewmodels-1.png"/></p> |
| </li> |
| <li><p>Right-click on the <strong>js/viewModels</strong> folder and go to |
| <strong>New | Other</strong>. The New File dialog opens, showing |
| templates for creating JET modules, as shown below:</p> |
| <br/> |
| <p><img src="../../../images_www/articles/81/web/oraclejet-gettingstarted/viewmodels-2.png"/></p> |
| <br/> |
| <p>Select "Empty JET Module", as shown above, and click Next. Type the name of the JET module, |
| which by convention starts with a lowecase letter, such as <strong>home</strong>, shown below:</p> |
| <br/> |
| <p><img src="../../../images_www/articles/81/web/oraclejet-gettingstarted/newhtml5project-2.png" |
| ></p> |
| <br/> |
| <p>Click Finish. Notice that <strong>home.js</strong> is created in <strong>js/viewModels</strong> |
| and that <strong>home.html</strong> is created in <strong>js/views</strong>, as shown below:</p> |
| <br/> |
| <p><img src="../../../images_www/articles/81/web/oraclejet-gettingstarted/viewmodels-4.png"/></p> |
| </li> |
| <li><p>Open the two files that have been created. The JavaScript file |
| is a <strong>define</strong> block, using Require.js syntax, |
| as shown below:</p> |
| <pre class="text/javascript">/** |
| * home module |
| */ |
| define(['ojs/ojcore', 'knockout' |
| ], function (oj, ko) { |
| /** |
| * The view model for the main content view template |
| */ |
| function homeContentViewModel() { |
| var self = this; |
| } |
| |
| return homeContentViewModel; |
| });</pre><p>The HTML file has the following content:</p> |
| <pre class="text/html"><h1>home</h1></pre> |
| </li> |
| <li>Load the JET module into the <strong>index.html</strong> file, as shown in bold below: |
| |
| <pre class="text/javascript"><!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"> |
| <script data-main="js/main" src="js/libs/require/require.js" type="text/javascript"></script> |
| </head> |
| <body> |
| <strong><div data-bind="ojModule: {name: 'home'}"></div></strong> |
| </body> |
| </html></pre> |
| </li> |
| </ol> |
| <p>You can now run the application and you should see the "home" message from |
| the <strong>home</strong> module in the browser.</p> |
| <p>Congratulations! Your application is configured correctly and you have created |
| and loaded your first module.</p> |
| |
| <!-- ++++++++++++++++ Using JET Components ++++++++++++++++ --> |
| <a name="usingJETComponents"></a> |
| <h2 id="template">Using JET Components</h2> |
| <p>In this section, you learn about a variety of different |
| ways of creating JET components.</p> |
| <div class="indent"> |
| <a name="creating"></a><h3>Creating Additional JET Modules</h3> |
| <p>Using the steps described in <a href="#creatingAFirstModule">Creating a First Module</a>, |
| create some more empty JET modules. Use the "Empty JET Module" wizard, as well |
| as the "Knockout JET Module" wizard:</p> |
| <br/> |
| <p><img src="../../../images_www/articles/81/web/oraclejet-gettingstarted/viewmodels-5.png"></p> |
| <br/> |
| <p>Compare the code between the two. In the latter case, |
| you will see the <a href="http://knockoutjs.com/examples/helloWorld.html">Hello World sample code from the Knockout.js |
| documentation site</a>.</p> |
| <p>In each case, you will need the following when creating a new JET module:</p> |
| <ul> |
| <li>A JavaScript file that |
| provides a <strong>define</strong> block, in <strong>js/viewModels</strong>.</li> |
| <li>An HTML file that has the same name as the |
| JavaScript file, in |
| <strong>js/views</strong>.</li> |
| <li>A reference in <strong>index.html</strong>, to load the JET module.</li> |
| </ul> |
| <p>Experiment by creating multiple empty JET modules, e.g., a <strong>footer</strong> module |
| and a <strong>header</strong> module.</p> |
| </div> |
| <div class="indent"> |
| <a name="using1"></a><h3>Using the JET Cookbook</h3> |
| <p>In this section, you learn how easy it is to use the Oracle JET Cookbook, |
| which describes all the JET components, while also providing complete |
| code snippets that you can copy/paste into your JET applications.</p> |
| <ol> |
| <li>Go to the on-line <a href="http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html">Oracle JET Cookbook</a>.</li> |
| <li>Browse through the JET components in the Oracle JET Cookbook and get an idea of what's available.</li> |
| <li>Take a look at the <a href="http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=barChart&demo=default">Bar Chart</a> component.</li> |
| <li><p>In the lower part of the page, copy the content of the HTML Editor into your application, |
| within the <strong>home.html</strong> file.</p></li> |
| <li><p>Notice that there is component-specific code-completion, and documentation, |
| press Ctrl-Space within <strong>ojChart</strong> to see it:</p> |
| <p><img src="../../../images_www/articles/81/web/oraclejet-gettingstarted/cookbook-1.png" |
| class="margin-around b-all" |
| /></p> |
| <p>Similarly, press Ctrl-Space on a property and you will see code completion, and documentation, too:</p> |
| <p><img src="../../../images_www/articles/81/web/oraclejet-gettingstarted/cookbook-3.png" |
| class="margin-around b-all" |
| /></p> |
| <p><strong class="notes">Note:</strong> Notice that the properties shown |
| in the code completion are context-sensitive to the currently used |
| Oracle JET component. For example, instead of <strong>ojChart</strong> |
| above, use a different component and then press Ctrl-Space over the properties |
| and you will see that only properties that are applicable to the currently |
| used Oracle JET component are shown.</p> |
| </li> |
| <li><p>In the Output window (Ctrl-4), notice the error messages, because the <strong>home.js</strong> |
| JavaScript file does not yet define the variables you have referenced in your HTML file, as |
| shown below:</p> |
| <p><img src="../../../images_www/articles/81/web/oraclejet-gettingstarted/cookbook-2.png" |
| class="margin-around b-all" |
| /></p> |
| </li> |
| <li><p>In <strong>home.js</strong>, below <strong>var self = this;</strong>, copy the body of the code |
| in the JS Editor section, near the end of the Bar Chart page.</p> |
| <pre class="text/javascript">/* toggle button variables */ |
| self.stackValue = ko.observable('off'); |
| self.orientationValue = ko.observable('vertical'); |
| /* chart data */ |
| var barSeries = [{name: "Series 1", items: [42, 34]}, |
| {name: "Series 2", items: [55, 30]}, |
| {name: "Series 3", items: [36, 50]}, |
| {name: "Series 4", items: [22, 46]}, |
| {name: "Series 5", items: [22, 46]}]; |
| |
| var barGroups = ["Group A", "Group B"]; |
| self.barSeriesValue = ko.observableArray(barSeries); |
| self.barGroupsValue = ko.observableArray(barGroups); |
| /* toggle buttons*/ |
| self.stackOptions = [ |
| {id: 'unstacked', label: 'unstacked', value: 'off', icon: 'oj-icon demo-bar-unstack'}, |
| {id: 'stacked', label: 'stacked', value: 'on', icon: 'oj-icon demo-bar-stack'} |
| ]; |
| self.orientationOptions = [ |
| {id: 'vertical', label: 'vertical', value: 'vertical', icon: 'oj-icon demo-bar-vert'}, |
| {id: 'horizontal', label: 'horizontal', value: 'horizontal', icon: 'oj-icon demo-bar-horiz'} |
| ];</pre> |
| <p><strong class="notes">Note:</strong> Be careful not to copy |
| everything in the JS Editor, because the JS Editor has code in a <strong>require</strong> block, |
| while your <strong>home.js</strong> contains a <strong>define</strong> block.</p> |
| </li> |
| <li> |
| <p>To enable the JET Chart component to be loaded into the application, include the <strong>ojs/ojchart</strong> reference in your <strong>define</strong> block, |
| in your <strong>home.js</strong> file, as shown below:</p> |
| <pre>define(['ojs/ojcore', 'knockout', <strong>'ojs/ojchart',</strong> |
| ], function (oj, ko) {</pre> |
| </li> |
| <li><p>Open the application in a browser and you should see the following:</p><br/> |
| <p><img style="border:1px solid black" src="../../../images_www/articles/81/web/oraclejet-gettingstarted/chart-1.png"/></p> |
| </li> |
| <p>Modify and tweak the page as needed, for example, change the H1 element from <strong>home</strong> |
| to something more meaningful, such as <strong>Chart Data</strong>.</p> |
| </ol> |
| <p>As an exercise, choose some other JET components from the Oracle JET Cookbook and |
| integrate them into your application.</p> |
| </div> |
| <!-- ++++++++++++++++ Setting Up Intermodular Communication ++++++++++++++++ --> |
| <a name="settingUpIntermodular"></a> |
| <h2 id="template">Setting Up Intermodular Communication</h2> |
| <p>You may need to reference properties across different JET modules. |
| There are three different ways to do so, as outlined below.</p> |
| <ol> |
| <li>Use <strong>$root</strong> within an HTML file to access global variables from <strong>main.js</strong>. <a href="https://blogs.oracle.com/geertjan/entry/intermodular_communication_in_oracle_jet">Details here.</a></li> |
| <li>Use <strong>ko.dataFor</strong> within a JavaScript file to access global variables from <strong>main.js</strong>. <a href="https://blogs.oracle.com/geertjan/entry/intermodular_communication_in_oracle_jet1">Details here.</a></li> |
| <li>Use <strong>knockout-postbox</strong> to set up a loosely coupled publish/subscribe mechanism. <a href="https://blogs.oracle.com/geertjan/entry/intermodular_communication_in_oracle_jet2">Details here.</a></li> |
| </ol> |
| |
| |
| <div class="feedback-box"> |
| <a href="/about/contact_form.html?to=3&subject=Feedback:%20Getting%20Started%20with%20Oracle%20JET%20Applications">Send Feedback on This Tutorial</a> |
| </div> |
| |
| <br style="clear:both;"> |
| |
| <br> |
| |
| <h2 id="seealso">See Also</h2> |
| |
| <p>For more information about support for Oracle JET and a variety of HTML5 applications in the IDE on |
| <a href="https://netbeans.org/">netbeans.org</a>, see the following resources:</p> |
| |
| <ul> |
| <li><a href="html5-editing-css.html">Working with CSS Style Sheets in HTML5 Applications</a>. |
| A document that continues with the application that you created in this tutorial that demonstrates |
| how to use some of the CSS wizards and windows in the IDE and how to use the Inspect mode in the |
| Chrome browser to visually locate elements in your project sources.</li> |
| <li><a href="html5-js-support.html">Debugging and Testing JavaScript in HTML5 Applications</a>. |
| A document that demonstrates how the IDE provides tools that can help you debug and test |
| JavaScript files in the IDE.</li> |
| </ul> |
| |
| </body> |
| </html> |
