| <!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>Using Data Bindings to Connect Components</title> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <meta name="description" content="Using Data Bindings to Connect Components - Apache NetBeans"> |
| <meta name="author" content="Apache NetBeans"> |
| <meta name="description" content="Using Data Bindings to Connect Components - Apache NetBeans"> |
| <meta name="keywords" content="Apache NetBeans, Tutorials, Using Data Bindings to Connect Components"> |
| <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">Using Data Bindings to Connect Components</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-databinding.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="#_using_the_oracle_jet_cookbook">Using the Oracle JET Cookbook</a></li> |
| <li><a href="#_connecting_the_select_component_to_the_bar_chart_component">Connecting the Select Component to the Bar Chart Component</a></li> |
| <li><a href="#_displaying_a_current_value">Displaying a Current Value</a></li> |
| <li><a href="#_connecting_a_gauge_to_an_input_field">Connecting a Gauge to an Input Field</a></li> |
| <li><a href="#_next_steps">Next Steps</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 connecting components to each other via data bindings, as provided by <a href="http://knockoutjs.com/">Knockout.js</a>, which is the data binding library included in 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="_using_the_oracle_jet_cookbook"><a class="anchor" href="#_using_the_oracle_jet_cookbook"></a>Using the Oracle JET Cookbook</h2> |
| <div class="sectionbody"> |
| <div class="paragraph"> |
| <p>In this section, you copy/paste Oracle JET components into your JET applications.</p> |
| </div> |
| <div class="olist arabic"> |
| <ol class="arabic"> |
| <li> |
| <p>As described in <a href="../ojet-cookbook/" class="xref page">Using the Oracle JET Cookbook</a>, you can copy/paste Oracle JET components from the Oracle JET Cookbook into your Oracle JET application. At this stage, you should have the <a href="http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=barChart&demo=default">Bar Chart</a> component in your application, as shown below:</p> |
| </li> |
| </ol> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <img src="../../../../_images/kb/docs/webclient/cookbook-3.png" alt="cookbook 3"> |
| </div> |
| </div> |
| <div class="olist arabic"> |
| <ol class="arabic" start="2"> |
| <li> |
| <p>Also add a <a href="http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=select&demo=single">Select</a> component to your application, in the same Oracle JET module where the Bar Chart is found:</p> |
| <div class="ulist"> |
| <ul> |
| <li> |
| <p>Read the <a href="http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=select&demo=single">Select</a> component recipe in the Oracle JET Cookbook and copy the recipe into your application, then take the steps below to tweak the code.</p> |
| </li> |
| <li> |
| <p>Tweak the HTML so that the user will be able to select different types of charts. Notice that not all the HTML from the recipe is needed. Nothing more than the below should be added to the JavaScript file for usage with the Select component defined above.</p> |
| </li> |
| </ul> |
| </div> |
| </li> |
| </ol> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml"><form id="form1"> |
| <select id="basicSelect" |
| data-bind="ojComponent: { |
| component: 'ojSelect', |
| value: val}"> |
| <option value="bar">Bar</option> |
| <option value="line">Line</option> |
| <option value="area">Area</option> |
| </select> |
| </form></code></pre> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>* |
| Notice that the HTML makes use of a <code>value</code> named <code>val</code> . That gives you the information needed to determine which part of the JS tab of the recipe you need to tweak and copy to your JavaScript file:</p> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">self.val = ko.observableArray(["bar"]);</code></pre> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>* |
| Make sure to include the reference to the Select component at the end of the <code>define</code> block, copied from the JS tab in the recipe:</p> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">'ojs/ojselectcombobox'</code></pre> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>. |
| In the browser, check that the application looks something like the below, that is, you should see a Bar Chart component and a Select component:</p> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <img src="../../../../_images/kb/docs/webclient/databinding-001.png" alt="databinding 001"> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>In the next section, you’re going to bind the two components together.</p> |
| </div> |
| </div> |
| </div> |
| <div class="sect1"> |
| <h2 id="_connecting_the_select_component_to_the_bar_chart_component"><a class="anchor" href="#_connecting_the_select_component_to_the_bar_chart_component"></a>Connecting the Select Component to the Bar Chart Component</h2> |
| <div class="sectionbody"> |
| <div class="paragraph"> |
| <p>In this section, you connect the components together enabling the user to select the chart type.</p> |
| </div> |
| <div class="olist arabic"> |
| <ol class="arabic"> |
| <li> |
| <p>Notice in your HTML file that the Bar Chart component has its <code>type</code> property hardcoded to <code>'bar'</code> .</p> |
| </li> |
| </ol> |
| </div> |
| <div class="olist arabic"> |
| <ol class="arabic" start="2"> |
| <li> |
| <p>Notice in your HTML file that the Select component has its <code>value</code> property set to the two-way binding array <code>val</code> , defined in your JavaScript file.</p> |
| </li> |
| </ol> |
| </div> |
| <div class="olist arabic"> |
| <ol class="arabic" start="3"> |
| <li> |
| <p>Change the value of the Bar Chart component’s <code>type</code> property to <code>val()[0]</code> . That means that when the <code>val</code> array changes, the first value defines the type of the Bar Chart, which will immediately update itself to the new value.</p> |
| </li> |
| </ol> |
| </div> |
| <div class="olist arabic"> |
| <ol class="arabic" start="4"> |
| <li> |
| <p>In the browser, switch to a different chart type in the Select component and notice that the Bart Chart component automatically updates itself:</p> |
| </li> |
| </ol> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <img src="../../../../_images/kb/docs/webclient/databinding-002.png" alt="databinding 002"> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>You have now connected two Oracle JET components together. When the user makes a choice in the Select component, the Bar Chart automatically reflects the current choice.</p> |
| </div> |
| </div> |
| </div> |
| <div class="sect1"> |
| <h2 id="_displaying_a_current_value"><a class="anchor" href="#_displaying_a_current_value"></a>Displaying a Current Value</h2> |
| <div class="sectionbody"> |
| <div class="paragraph"> |
| <p>In Oracle JET applications, a common construction is to display the current state of a value as follows, using a <code>span</code> tag to do so:</p> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml">Selected: <b><span *data-bind="text: val"*></span> chart</b></code></pre> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>In the above, the <code>text</code> attribute of the <code>span</code> element is bound to the <code>val</code> property.</p> |
| </div> |
| <div class="paragraph"> |
| <p>Add the above anywhere in your HTML file and notice that the browser now displays an updated text whenever <code>val</code> changes.</p> |
| </div> |
| </div> |
| </div> |
| <div class="sect1"> |
| <h2 id="_connecting_a_gauge_to_an_input_field"><a class="anchor" href="#_connecting_a_gauge_to_an_input_field"></a>Connecting a Gauge to an Input Field</h2> |
| <div class="sectionbody"> |
| <div class="paragraph"> |
| <p>In this section, you’re on your own! As an exercise, instead of step-by-step instructions, you’ll be told to connect two Oracle JET components together.</p> |
| </div> |
| <div class="olist arabic"> |
| <ol class="arabic"> |
| <li> |
| <p>From the <a href="http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=statusMeterGauge&demo=statusMeterGaugeCircular">Circular Status Meter Gauge recipe</a>, copy a gauge into your Oracle JET application.</p> |
| </li> |
| </ol> |
| </div> |
| <div class="olist arabic"> |
| <ol class="arabic" start="2"> |
| <li> |
| <p>From the <a href="http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=textInput&demo=text">Input Text recipe</a>, copy an input text into your Oracle JET application.</p> |
| </li> |
| </ol> |
| </div> |
| <div class="olist arabic"> |
| <ol class="arabic" start="3"> |
| <li> |
| <p>Connect the two components together so that the current value of the gauge is shown in the input field and so that the gauge reflects the current value in the input field. Experiment with the <a href="http://knockoutjs.com/documentation/textinput-binding.html">+ <code>textInput</code> binding+</a>, as follows:</p> |
| </li> |
| </ol> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java"><input type="text" data-bind="textInput: value, ojComponent: {component: 'ojInputText'}" /></code></pre> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>Let’s extend the scenario above and include <code>ojButtons</code> for increasing and decreasing the value:</p> |
| </div> |
| <div class="imageblock"> |
| <div class="content"> |
| <img src="../../../../_images/kb/docs/webclient/ojgauge.png" alt="ojgauge"> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>The HTML for the above is as follows, take note of the <code>click</code> binding:</p> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml"><button class="oj-button-primary" |
| data-bind="*click: up*, |
| ojComponent: { |
| component: 'ojButton', |
| label: 'Up' |
| }"> |
| </button> |
| <button class="oj-button-primary" |
| data-bind="*click: down*, |
| ojComponent: { |
| component: 'ojButton', |
| label: 'Down' |
| }"> |
| </button></code></pre> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>Here is the business logic, to be put in the JavaScript file:</p> |
| </div> |
| <div class="listingblock"> |
| <div class="content"> |
| <pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">self.up = function() { |
| self.value(self.value()+1); |
| }; |
| self.down = function() { |
| self.value(self.value()-1); |
| };</code></pre> |
| </div> |
| </div> |
| <div class="paragraph"> |
| <p>Incorporate other Oracle JET components into your application and find ways of binding them together.</p> |
| </div> |
| </div> |
| </div> |
| <div class="sect1"> |
| <h2 id="_next_steps"><a class="anchor" href="#_next_steps"></a>Next Steps</h2> |
| <div class="sectionbody"> |
| <div class="paragraph"> |
| <p>Work through the <a href="http://knockoutjs.com/examples/">Live Examples</a> and <a href="http://learn.knockoutjs.com/">Tutorials</a> on the Knockout.js site to familiarize yourself with the basic constructs and strategies provided by Knockout.js.</p> |
| </div> |
| <div class="paragraph"> |
| <p>Congratulations! You have now learned the basics of using Knockout data bindings to connect components together.</p> |
| </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-databinding.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 © 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> |
