Google Git
Sign in
apache / netbeans-website / refs/heads/asf-site / . / tutorial / main / kb / docs / webclient / ojet-gettingstarted / index.html
blob: 762ae1ed356c8c2154ea86e47ca96fae319395a2 [file] [log] [blame]
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Getting Started with Oracle JET in NetBeans IDE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Getting Started with Oracle JET in NetBeans IDE - Apache NetBeans">
<meta name="author" content="Apache NetBeans">
<meta name="description" content="Getting Started with Oracle JET in NetBeans IDE - Apache NetBeans">
<meta name="keywords" content="Apache NetBeans, Tutorials, Getting Started with Oracle JET in NetBeans IDE">
<meta name="generator" content="Apache NetBeans">
<link rel="stylesheet" href="../../../../../../_/css/font-awesome.min.css">
<link rel="alternate" type="application/atom+xml" title="Apache NetBeans Blog" href="https://netbeans.apache.org/blogs/atom" />
<link rel="stylesheet" href="../../../../../../_/css/highlightjs/default.min.css">
<link rel="stylesheet" href="../../../../../../_/css/netbeans.css">
<link rel="apple-touch-icon" sizes="180x180" href="../../../../../../_/images/fav/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="../../../../../../_/images/fav/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../../../../../../_/images/fav/favicon-16x16.png">
<link rel="manifest" href="../../../../../../_/images/fav/site.webmanifest">
<link rel="mask-icon" href="../../../../../../_/images/fav/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#ffc40d">
<meta name="theme-color" content="#ffffff">
<link href="../../../../../../_/css/font-open-sans.css" rel="stylesheet">
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
</head>
<body>
<div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium">
<button type="button" data-toggle="responsive-menu"><i style='font-size: 32px; color: #fff; padding: 8px' class='fa fa-bars'></i></button>
<div class="title-bar-title">Apache NetBeans</div>
</div>
<div class="top-bar" id="responsive-menu">
<div class='top-bar-left'>
<a class='title' href="../../../../../../index.html"><img src='../../../../../../_/images/apache-netbeans.svg' style='padding: 8px; height: 48px;'> Apache NetBeans</a>
</div>
<div class="top-bar-right">
<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
<li> <input id="search-input" type="text" placeholder="Search the docs"> </li>
<li> <a href="../../../../../../front/main/community">Community</a> </li>
<li> <a href="../../../../../../front/main/participate">Participate</a> </li>
<li> <a href="../../../../../../front/main/blogs">Blog</a></li>
<li> <a href="../../../../../../front/main/help">Get Help</a> </li>
<li> <a href="https://plugins.netbeans.apache.org/">Plugins</a> </li>
<li> <a href="../../../../../../front/main/download">Download</a> </li>
</ul>
</div>
</div>
<!-- src/templates/news -->
<section class="hero news alternate">
<div class='grid-container'>
<div class='cell'>
<div class="annotation">Latest release</div>
<h1>Apache NetBeans 27</h1>
<p><a class="button success" href="../../../../../../front/main/download/nb27">Download</a></p>
</div>
</div>
</section>
<div class='grid-container main-content tutorial'>
<article class="doc">
<h1 class="sect0">Getting Started with Oracle JET in NetBeans IDE</h1>
<div class="sectionbody">
<div class="admonitionblock note">
<table>
<tbody><tr>
<td class="icon"><i class="fa icon-note" title="Note"></i></td>
<td class="content">This tutorial needs a review.
You can <a href="https://github.com/apache/netbeans-antora-tutorials/edit/main/modules/ROOT/pages/kb/docs/webclient/ojet-gettingstarted.adoc" title="Edit this tutorial in github">edit it in GitHub </a>
following these <a href="../../../../../../tutorial/main/kb/docs/contributing">contribution guidelines.</a></td>
</tr></tbody>
</table>
</div>
</div>
<div id="toc" class="toc">
<div id="toctitle"></div>
<ul class="sectlevel1">
<li><a href="#_to_complete_this_tutorial_you_will_need_the_following_resources">To complete this tutorial, you will need the following resources.</a></li>
<li><a href="#_setting_up">Setting Up</a>
<ul class="sectlevel2">
<li><a href="#_setting_up_the_oracle_jet_quickstart_basic_template">Setting Up the Oracle JET QuickStart Basic Template</a></li>
<li><a href="#_creating_a_custom_jet_module">Creating a Custom JET Module</a></li>
</ul>
</li>
<li><a href="#_using_jet_components">Using JET Components</a>
<ul class="sectlevel2">
<li><a href="#_creating_additional_jet_modules">Creating Additional JET Modules</a></li>
<li><a href="#_using_the_jet_cookbook">Using the JET Cookbook</a></li>
</ul>
</li>
<li><a href="#template">Setting Up Intermodular Communication</a></li>
<li><a href="#seealso">See Also</a></li>
</ul>
</div>
<div id="preamble">
<div class="sectionbody">
<div class="paragraph">
<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>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_to_complete_this_tutorial_you_will_need_the_following_resources"><a class="anchor" href="#_to_complete_this_tutorial_you_will_need_the_following_resources"></a>To complete this tutorial, you will need the following resources.</h2>
<div class="sectionbody">
<table class="tableblock frame-all grid-all stretch">
<colgroup>
<col style="width: 50%;">
<col style="width: 50%;">
</colgroup>
<thead>
<tr>
<th class="tableblock halign-left valign-top">Software or Resource</th>
<th class="tableblock halign-left valign-top">Version Required</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><a href="../../../../../../front/main/download/" class="xref page">NetBeans IDE, the HTML5/JavaScript Bundle</a></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">8.2</p></td>
</tr>
</tbody>
</table>
<div class="paragraph">
<p><strong>Notes:</strong></p>
</div>
<div class="ulist">
<ul>
<li>
<p>This document assumes you have some basic knowledge of, or programming experience with HTML, CSS, and JavaScript.</p>
</li>
<li>
<p>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.</p>
</li>
<li>
<p>In NetBeans IDE 8.1, you need to install the Oracle JET Support plugin. In NetBeans IDE 8.2, this plugin is pre-installed and so you do not need to look for it or install it yourself. You are recommended to use NetBeans IDE 8.2.</p>
</li>
<li>
<p>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.2 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.</p>
</li>
<li>
<p>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.</p>
</li>
</ul>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_setting_up"><a class="anchor" href="#_setting_up"></a>Setting Up</h2>
<div class="sectionbody">
<div class="paragraph">
<p>In this exercise you set up the Oracle JET QuickStart Basic template.</p>
</div>
<div class="sect2">
<h3 id="_setting_up_the_oracle_jet_quickstart_basic_template"><a class="anchor" href="#_setting_up_the_oracle_jet_quickstart_basic_template"></a>Setting Up the Oracle JET QuickStart Basic Template</h3>
<div class="paragraph">
<p>The Oracle JET QuickStart Basic template 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 QuickStart Basic in the IDE as the basis of a new Oracle JET application.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>In NetBeans IDE, open the New Project dialog (Ctrl-Shift-N), select the <strong>Samples</strong> category, then the <strong>HTML5/JavaScript</strong> category and then select <strong>Oracle JET QuickStart Basic</strong>, as shown below.</p>
</li>
</ol>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/webclient/newhtml5project-1.png" alt="newhtml5project 1">
</div>
</div>
<div class="paragraph">
<p>Click Next.</p>
</div>
<div class="olist arabic">
<ol class="arabic" start="2">
<li>
<p>Type the name of the application, such as <strong>CustomerVisualizer</strong>, and select a location to store it, as shown below.</p>
</li>
</ol>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/webclient/newhtml5project-8.png" alt="newhtml5project 8">
</div>
</div>
<div class="paragraph">
<p>Click <strong>Finish</strong> to complete the wizard.</p>
</div>
<div class="olist arabic">
<ol class="arabic" start="3">
<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>
</div>
<div class="paragraph">
<p>You now have a new HTML5/JavaScript project created from the Oracle JET QuickStart Basic template.</p>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/webclient/newhtml5project-7.png" alt="newhtml5project 7">
</div>
</div>
<div class="paragraph">
<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, while <strong>js/viemodels</strong> contains the JavaScript files, with their matching views in <strong>js/views</strong>.</p>
</div>
<div class="olist arabic">
<ol class="arabic" start="4">
<li>
<p>Right-click the project and choose Run. The browser opens and displays the template, as shown below.</p>
</li>
</ol>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/webclient/newhtml5project-9.png" alt="newhtml5project 9">
</div>
</div>
<div class="paragraph">
<p>Spend some time exploring the template in the browser. For example, resize the browser and notice that responsive design is built into the template. When the browser is sized for mobile devices, notice the menu along the top disappears and is replaced by a mobile menu instead, as shown below.</p>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/webclient/newhtml5project-9a.png" alt="newhtml5project 9a">
</div>
</div>
</div>
<div class="sect2">
<h3 id="_creating_a_custom_jet_module"><a class="anchor" href="#_creating_a_custom_jet_module"></a>Creating a Custom JET Module</h3>
<div class="paragraph">
<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>
</div>
<div class="olist arabic">
<ol class="arabic">
<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>
</li>
</ol>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/webclient/viewmodels-2.png" alt="viewmodels 2">
</div>
</div>
<div class="paragraph">
<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>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/webclient/newhtml5project-2.png" alt="newhtml5project 2">
</div>
</div>
<div class="paragraph">
<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>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/webclient/viewmodels-4.png" alt="viewmodels 4">
</div>
</div>
<div class="olist arabic">
<ol class="arabic" start="2">
<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>
</li>
</ol>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="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;
});</code></pre>
</div>
</div>
<div class="paragraph">
<p>The HTML file has the following content:</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml">&lt;h1&gt;home&lt;/h1&gt;</code></pre>
</div>
</div>
<div class="olist arabic">
<ol class="arabic" start="3">
<li>
<p>Load the JET module into the application by tweaking the Router setup and Navigation setup in the <strong>src/js/appController.js</strong> file, as shown below in bold:</p>
</li>
</ol>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">// Router setup
self.router = oj.Router.rootInstance;
self.router.configure({
'dashboard': {label: 'Dashboard', isDefault: true},
*'home': {label: 'Home'},*
'incidents': {label: 'Incidents'},
'customers': {label: 'Customers'},
'about': {label: 'About'}
});</code></pre>
</div>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">// Navigation setup
var navData = [
{name: 'Dashboard', id: 'dashboard',
iconClass: 'oj-navigationlist-item-icon demo-icon-font-24 demo-chart-icon-24'},
*{name: 'Home', id: 'home',
iconClass: 'oj-navigationlist-item-icon demo-icon-font-24 demo-fire-icon-24'},*
{name: 'Incidents', id: 'incidents',
iconClass: 'oj-navigationlist-item-icon demo-icon-font-24 demo-fire-icon-24'},
{name: 'Customers', id: 'customers',
iconClass: 'oj-navigationlist-item-icon demo-icon-font-24 demo-people-icon-24'},
{name: 'About', id: 'about',
iconClass: 'oj-navigationlist-item-icon demo-icon-font-24 demo-info-icon-24'}
];</code></pre>
</div>
</div>
<div class="paragraph">
<p>You can now run the application and you should see the "home" menu item in the menubar.</p>
</div>
<div class="paragraph">
<p>Congratulations! Your application is configured correctly and you have created and loaded your first custom module.</p>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_using_jet_components"><a class="anchor" href="#_using_jet_components"></a>Using JET Components</h2>
<div class="sectionbody">
<div class="paragraph">
<p>In this section, you learn about a variety of different ways of creating JET components.</p>
</div>
<div class="sect2">
<h3 id="_creating_additional_jet_modules"><a class="anchor" href="#_creating_additional_jet_modules"></a>Creating Additional JET Modules</h3>
<div class="paragraph">
<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>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/webclient/viewmodels-5.png" alt="viewmodels 5">
</div>
</div>
<div class="paragraph">
<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>
</div>
<div class="paragraph">
<p>In each case, you will need the following when creating a new JET module:</p>
</div>
<div class="ulist">
<ul>
<li>
<p>A JavaScript file that provides a <strong>define</strong> block, in <strong>js/viewModels</strong>.</p>
</li>
<li>
<p>An HTML file that has the same name as the JavaScript file, in <strong>js/views</strong>.</p>
</li>
<li>
<p>An update to the Router setup and Navigation setup in <strong>src/js/appController.js</strong>, to load the JET module.</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>Experiment by creating multiple empty JET modules, e.g., a <strong>footer</strong> module and a <strong>header</strong> module.</p>
</div>
</div>
<div class="sect2">
<h3 id="_using_the_jet_cookbook"><a class="anchor" href="#_using_the_jet_cookbook"></a>Using the JET Cookbook</h3>
<div class="paragraph">
<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>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Go to the on-line <a href="http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html">Oracle JET Cookbook</a>.</p>
</li>
<li>
<p>Browse through the JET components in the Oracle JET Cookbook and get an idea of what&#8217;s available.</p>
</li>
<li>
<p>Take a look at the <a href="http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=barChart&amp;demo=default">Bar Chart</a> component.
4.
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>
</ol>
</div>
<div class="olist arabic">
<ol class="arabic" start="5">
<li>
<p>Notice that there is component-specific code-completion, and documentation, press Ctrl-Space within <strong>ojChart</strong> to see it:</p>
</li>
</ol>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/webclient/cookbook-1.png" alt="cookbook 1">
</div>
</div>
<div class="paragraph">
<p>Similarly, press Ctrl-Space on a property and you will see code completion, and documentation, too:</p>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/webclient/cookbook-3.png" alt="cookbook 3">
</div>
</div>
<div class="paragraph">
<p><strong>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>
</div>
<div class="olist arabic">
<ol class="arabic" start="6">
<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>
</li>
</ol>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/webclient/cookbook-2.png" alt="cookbook 2">
</div>
</div>
<div class="olist arabic">
<ol class="arabic" start="7">
<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>
</li>
</ol>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">/* 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'}
];</code></pre>
</div>
</div>
<div class="paragraph">
<p><strong>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>
</div>
<div class="olist arabic">
<ol class="arabic" start="8">
<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>
</li>
</ol>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-javascript hljs" data-lang="javascript">define(['ojs/ojcore', 'knockout', *'ojs/ojchart',*
], function (oj, ko) {</code></pre>
</div>
</div>
<div class="paragraph">
<p>.
Open the application in a browser and you should see the following:</p>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/webclient/chart-1.png" alt="chart 1">
</div>
</div>
<div class="paragraph">
<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>
</div>
<div class="paragraph">
<p>As an exercise, choose some other JET components from the Oracle JET Cookbook and integrate them into your application.</p>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="template"><a class="anchor" href="#template"></a>Setting Up Intermodular Communication</h2>
<div class="sectionbody">
<div class="paragraph">
<p>You may need to reference properties across different JET modules. There are three different ways to do so, as outlined below.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Use <strong>$root</strong> within an HTML file to access global variables from <strong>main.js</strong>. <a href="../../../../../../front/main/blogs/geertjan/intermodular_communication_in_oracle_jet/" class="xref page">Details here.</a></p>
</li>
<li>
<p>Use <strong>ko.dataFor</strong> within a JavaScript file to access global variables from <strong>main.js</strong>. <a href="../../../../../../front/main/blogs/geertjan/intermodular_communication_in_oracle_jet1/" class="xref page">Details here.</a></p>
</li>
<li>
<p>Use <strong>knockout-postbox</strong> to set up a loosely coupled publish/subscribe mechanism. <a href="../../../../../../front/main/blogs/geertjan/intermodular_communication_in_oracle_jet2/" class="xref page">Details here.</a></p>
</li>
</ol>
</div>
<div class="paragraph">
<p><a href="../../../../../../front/main/community/mailing-lists/" class="xref page">Send Feedback on This Tutorial</a></p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="seealso"><a class="anchor" href="#seealso"></a>See Also</h2>
<div class="sectionbody">
<div class="paragraph">
<p>For more information about support for Oracle JET and a variety of HTML5 applications in the IDE on <a href="../../../../../../front/main/" class="xref page">netbeans.org</a>, see the following resources:</p>
</div>
<div class="ulist">
<ul>
<li>
<p><a href="http://www.oracle.com/webfolder/technetwork/jet/globalExamples.html">"Learn" section on the Oracle JET site</a>. A set of official Oracle JET learning resources.</p>
</li>
<li>
<p><a href="../html5-editing-css/" class="xref page">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.</p>
</li>
<li>
<p><a href="../html5-js-support/" class="xref page">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.</p>
</li>
</ul>
</div>
</div>
</div>
<section class='tools'>
<ul class="menu align-center">
<li><a title="Facebook" href="https://www.facebook.com/NetBeans"><i class="fa fa-md fa-facebook"></i></a></li>
<li><a title="Twitter" href="https://twitter.com/netbeans"><i class="fa fa-md fa-twitter"></i></a></li>
<li><a title="Github" href="https://github.com/apache/netbeans"><i class="fa fa-md fa-github"></i></a></li>
<li><a title="YouTube" href="https://www.youtube.com/user/netbeansvideos"><i class="fa fa-md fa-youtube"></i></a></li>
<li><a title="Atom Feed" href="https://netbeans.apache.org/blogs/atom"><i class="fa fa-mf fa-rss"></i></a></li>
<li><a title="Slack" href="https://tinyurl.com/netbeans-slack-signup/"><i class="fa fa-md fa-slack"></i></a></li>
<li><a title="Issues" href="https://github.com/apache/netbeans/issues"><i class="fa fa-mf fa-bug"></i></a></li>
</ul>
<ul class="menu align-center">
<li><a href="https://github.com/apache/netbeans-antora-tutorials/edit/main/modules/ROOT/pages/kb/docs/webclient/ojet-gettingstarted.adoc" title="See this page in github"><i class="fa fa-md fa-edit"></i> See this page in GitHub.</a></li>
</ul>
</section>
</article>
</div>
<div class='grid-container incubator-area' style='margin-top: 64px'>
<div class='grid-x grid-padding-x'>
<div class='large-auto cell text-center'>
<a href="https://www.apache.org/">
<img style="height: 60px" title="Apache Software Foundation" src="../../../../../../_/images/asf_logo_wide.svg" />
</a>
</div>
<div class='large-auto cell text-center'>
<a href="https://www.apache.org/events/current-event.html">
<img style="width:234px; height: 60px;" title="Apache Software Foundation current event" src="https://www.apache.org/events/current-event-234x60.png"/>
</a>
</div>
</div>
</div>
<footer>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="large-auto cell">
<h1><a href="../../../../../../front/main/about">About</a></h1>
<ul>
<li><a href="../../../../../../front/main/community/who">Who's Who</a></li>
<li><a href="https://www.apache.org/foundation/thanks.html">Thanks</a></li>
<li><a href="https://www.apache.org/foundation/sponsorship.html">Sponsorship</a></li>
<li><a href="https://www.apache.org/security/">Security</a></li>
</ul>
</div>
<div class="large-auto cell">
<h1><a href="../../../../../../front/main/community">Community</a></h1>
<ul>
<li><a href="../../../../../../front/main/community/mailing-lists">Mailing lists</a></li>
<li><a href="../../../../../../front/main/community/committer">Becoming a committer</a></li>
<li><a href="../../../../../../front/main/community/events">NetBeans Events</a></li>
<li><a href="https://www.apache.org/events/current-event.html">Apache Events</a></li>
</ul>
</div>
<div class="large-auto cell">
<h1><a href="../../../../../../front/main/participate">Participate</a></h1>
<ul>
<li><a href="../../../../../../front/main/participate/submit-pr">Submitting Pull Requests</a></li>
<li><a href="../../../../../../front/main/participate/report-issue">Reporting Issues</a></li>
<li><a href="../../../../../../front/main/participate/#documentation">Improving the documentation</a></li>
</ul>
</div>
<div class="large-auto cell">
<h1><a href="../../../../../../front/main/help">Get Help</a></h1>
<ul>
<li><a href="../../../../../../front/main/help/#documentation">Documentation</a></li>
<li><a href="../../../../../../wiki/main/wiki">Wiki</a></li>
<li><a href="../../../../../../front/main/help/#support">Community Support</a></li>
<li><a href="../../../../../../front/main/help/commercial-support">Commercial Support</a></li>
</ul>
</div>
<div class="large-auto cell">
<h1><a href="../../../../../../front/main/download">Download</a></h1>
<ul>
<li><a href="../../../../../../front/main/download">Releases</a></li>
<li><a href="https://plugins.netbeans.apache.org/">Plugins</a></li>
<li><a href="../../../../../../front/main/download/#_daily_builds_and_building_from_source">Building from source</a></li>
<li><a href="../../../../../../front/main/download/#_older_releases">Previous releases</a></li>
</ul>
</div>
</div>
</div>
</footer>
<div class='footer-disclaimer'>
<div class="footer-disclaimer-content">
<p>Copyright &copy; 2017-2025 <a href="https://www.apache.org">The Apache Software Foundation</a>.</p>
<p>Licensed under the Apache <a href="https://www.apache.org/licenses/">license</a>, version 2.0</p>
<div style='max-width: 40em; margin: 0 auto'>
<p>Apache, Apache NetBeans, NetBeans, the Apache feather logo and the Apache NetBeans logo are trademarks of <a href="https://www.apache.org">The Apache Software Foundation</a>.</p>
<p>Oracle and Java are registered trademarks of Oracle and/or its affiliates.</p>
<p>The Apache NetBeans website conforms to the <a href="https://privacy.apache.org/policies/privacy-policy-public.html">Apache Software Foundation Privacy Policy</a></p>
</div>
</div>
</div>
<script src="../../../../../../_/js/vendor/lunr.js"></script>
<script src="../../../../../../_/js/search-ui.js" id="search-ui-script" data-site-root-path="../../../../../.." data-snippet-length="100" data-stylesheet="../../../../../../_/css/search.css"></script>
<script async src="../../../../../../search-index.js"></script>
<script src="../../../../../../_/js/vendor/jquery.min.js"></script>
<script src="../../../../../../_/js/vendor/what-input.min.js"></script>
<script src="../../../../../../_/js/vendor/foundation.min.js"></script>
<script src="../../../../../../_/js/vendor/jquery.colorbox-min.js"></script>
<script src="../../../../../../_/js/netbeans.js"></script>
<script>
$(function(){ $(document).foundation(); });
</script>
<script src="../../../../../../_/js/vendor/highlight.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((el) => {
hljs.highlightElement(el);
});
});
</script>
</body>
</html>