blob: aa69771185ba3b6fe38db49a9ae475eb198a404c [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>NetBeans Visual Library Tutorial for Java Applications</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="NetBeans Visual Library Tutorial for Java Applications - Apache NetBeans">
<meta name="author" content="Apache NetBeans">
<meta name="description" content="NetBeans Visual Library Tutorial for Java Applications - Apache NetBeans">
<meta name="keywords" content="Apache NetBeans Platform, Platform Tutorials, NetBeans Visual Library Tutorial for Java Applications">
<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'>
<h1 class="sect0">NetBeans Visual Library Tutorial for Java Applications</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/tutorials/nbm-visual_library3.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="#_setting_up_the_application">Setting Up the Application</a></li>
<li><a href="#_adding_the_libraries">Adding the Libraries</a></li>
<li><a href="#_creating_the_container">Creating the Container</a></li>
<li><a href="#_creating_the_widgets">Creating the Widgets</a></li>
<li><a href="#_enabling_the_actions">Enabling the Actions</a></li>
</ul>
</div>
<div id="preamble">
<div class="sectionbody">
<div class="paragraph">
<p>In this tutorial, you will learn how to use the main features provided by the <a href="https://bits.netbeans.org/dev/javadoc/org-netbeans-api-visual/overview-summary.html">NetBeans Visual Library API</a>.</p>
</div>
<div class="paragraph">
<p>Also, you will use 3 icons in the tutorial. You can right-click them here and save them locally, then copy them to the application&#8217;s location, after you create the application later in this tutorial. Here are the 3 icons:</p>
</div>
<div class="imageblock">
<div class="content">
<img src="../../_images/tutorials/vislib_red.gif" alt="vislib red">
</div>
</div>
<div class="imageblock">
<div class="content">
<img src="../../_images/tutorials/vislib_blue.gif" alt="vislib blue">
</div>
</div>
<div class="imageblock">
<div class="content">
<img src="../../_images/tutorials/vislib_green.gif" alt="vislib green">
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_setting_up_the_application"><a class="anchor" href="#_setting_up_the_application"></a>Setting Up the Application</h2>
<div class="sectionbody">
<div class="paragraph">
<p>In this section, we use a wizard to create a Java application.</p>
</div>
<div class="olist arabic">
<ol class="arabic" start="1">
<li>
<p>Choose File &gt; New Project (Ctrl+Shift+N). Under Categories, select Java. Under Projects, select Java Application. Click Next.</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>1.
In the Name and Location panel, type <code>VisLibDemo</code> in the Project Name field:</p>
</div>
<div class="imageblock">
<div class="content">
<img src="../../_images/tutorials/vislib_vislib-java-1.png" alt="vislib vislib java 1">
</div>
</div>
<div class="paragraph">
<p>Click Finish.</p>
</div>
<div class="paragraph">
<p>The IDE creates the <code>VisLibDemo</code> project. Add the three images above to the main package. You should now see this:</p>
</div>
<div class="imageblock">
<div class="content">
<img src="../../_images/tutorials/vislib_vislib-java-2.png" alt="vislib vislib java 2">
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_adding_the_libraries"><a class="anchor" href="#_adding_the_libraries"></a>Adding the Libraries</h2>
<div class="sectionbody">
<div class="paragraph">
<p>In this section, we add the two libraries you need to work with the Visual Library.</p>
</div>
<div class="olist arabic">
<ol class="arabic" start="1">
<li>
<p>Right-click the Libraries node and choose "Add JAR/Folder".</p>
</li>
</ol>
</div>
<div class="olist arabic">
<ol class="arabic" start="2">
<li>
<p>Browse to the installation directory of NetBeans IDE.</p>
</li>
</ol>
</div>
<div class="olist arabic">
<ol class="arabic" start="3">
<li>
<p>In <code>platform9/lib</code> , choose <code>org-openide-util.jar</code> .</p>
</li>
</ol>
</div>
<div class="olist arabic">
<ol class="arabic" start="4">
<li>
<p>In <code>platform9/modules</code> , choose <code>org-netbeans-api-visual.jar</code> .</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>You now have the only two JARs you will need. You should now see this:</p>
</div>
<div class="imageblock">
<div class="content">
<img src="../../_images/tutorials/vislib_vislib-java-3.png" alt="vislib vislib java 3">
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_creating_the_container"><a class="anchor" href="#_creating_the_container"></a>Creating the Container</h2>
<div class="sectionbody">
<div class="paragraph">
<p>In this section, we create the container that will hold the <code>Scene</code> from the Visual Library.</p>
</div>
<div class="olist arabic">
<ol class="arabic" start="1">
<li>
<p>Define <code>Main.java</code> as follows:</p>
</li>
</ol>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">public class Main extends JPanel {
*//Create the JFrame:*
public static void main(String[] args) {
JFrame frame = new JFrame("Graph test");
frame.setMinimumSize(new Dimension(500, 400));
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setContentPane(new Main());
frame.pack();
frame.setVisible(true);
}
public Main() {
initComponents();
}
private void initComponents() {
*//Set the layout:*
setLayout(new BorderLayout());
*//Create a JScrollPane:*
JScrollPane scrollPane = new JScrollPane();
*//Add the JScrollPane to the JPanel:*
add(scrollPane, BorderLayout.CENTER);
}
}</code></pre>
</div>
</div>
<div class="olist arabic">
<ol class="arabic" start="2">
<li>
<p>Run the application and you should see a simple JFrame:</p>
</li>
</ol>
</div>
<div class="imageblock">
<div class="content">
<img src="../../_images/tutorials/vislib_vislib-java-4.png" alt="vislib vislib java 4">
</div>
</div>
<div class="paragraph">
<p>Now that you have a <code>JScrollPane</code> , you&#8217;re ready to create a scene!</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_creating_the_widgets"><a class="anchor" href="#_creating_the_widgets"></a>Creating the Widgets</h2>
<div class="sectionbody">
<div class="paragraph">
<p>In this section, we create a separate class containing our scene. We then hook it into our <code>JPanel</code> .</p>
</div>
<div class="olist arabic">
<ol class="arabic" start="1">
<li>
<p>Create a new class called <code>GraphSceneImpl.java</code> .</p>
</li>
</ol>
</div>
<div class="olist arabic">
<ol class="arabic" start="2">
<li>
<p>Let it extend GraphScene&lt;String, String&gt;.</p>
</li>
</ol>
</div>
<div class="olist arabic">
<ol class="arabic" start="3">
<li>
<p>Use the lightbulb at the side of the IDE to add import statements and abstract methods. You should now see this:</p>
</li>
</ol>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">package vislibdemo;
import org.netbeans.api.visual.graph.GraphScene;
import org.netbeans.api.visual.widget.Widget;
public class GraphSceneImpl extends GraphScene&lt;String, String&gt; {
@Override
protected Widget attachNodeWidget(String arg0) {
throw new UnsupportedOperationException("Not supported yet.");
}
@Override
protected Widget attachEdgeWidget(String arg0) {
throw new UnsupportedOperationException("Not supported yet.");
}
@Override
protected void attachEdgeSourceAnchor(String arg0, String arg1, String arg2) {
throw new UnsupportedOperationException("Not supported yet.");
}
@Override
protected void attachEdgeTargetAnchor(String arg0, String arg1, String arg2) {
throw new UnsupportedOperationException("Not supported yet.");
}
}</code></pre>
</div>
</div>
<div class="olist arabic">
<ol class="arabic" start="4">
<li>
<p>We&#8217;ll be using three <code>LayerWidgets</code> , which are like <code>JGlassPanes</code> in Swing. Declare them at the top of the class:</p>
</li>
</ol>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">private LayerWidget mainLayer;
private LayerWidget connectionLayer;
private LayerWidget interactionLayer;</code></pre>
</div>
</div>
<div class="olist arabic">
<ol class="arabic" start="5">
<li>
<p>Create a constructor, initialize your <code>LayerWidgets</code> and add them to the <code>Scene</code> :</p>
</li>
</ol>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">public GraphSceneImpl() {
mainLayer = new LayerWidget(this);
connectionLayer = new LayerWidget(this);
interactionLayer = new LayerWidget(this);
addChild(mainLayer);
addChild(connectionLayer);
addChild(interactionLayer);
}</code></pre>
</div>
</div>
<div class="olist arabic">
<ol class="arabic" start="6">
<li>
<p>Next, define what will happen when a new Widget is created:</p>
</li>
</ol>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">@Override
protected Widget attachNodeWidget(String arg) {
IconNodeWidget widget = new IconNodeWidget(this);
if (arg.startsWith("1")) {
widget.setImage(ImageUtilities.loadImage("vislibdemo/red.gif"));
} else if (arg.startsWith("2")) {
widget.setImage(ImageUtilities.loadImage("vislibdemo/green.gif"));
} else {
widget.setImage(ImageUtilities.loadImage("vislibdemo/blue.gif"));
}
widget.setLabel(arg);
mainLayer.addChild(widget);
return widget;
}</code></pre>
</div>
</div>
<div class="paragraph">
<p>The above is triggered whenever <code>addNode</code> is called on the scene.</p>
</div>
<div class="olist arabic">
<ol class="arabic" start="7">
<li>
<p>At the end of the constructor, trigger the method above 4 times:</p>
</li>
</ol>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">Widget w1 = addNode("1. Hammer");
w1.setPreferredLocation(new Point(10, 100));
Widget w2 = addNode("2. Saw");
w2.setPreferredLocation(new Point(100, 250));
Widget w3 = addNode("Nail");
w3.setPreferredLocation(new Point(250, 250));
Widget w4 = addNode("Bolt");
w4.setPreferredLocation(new Point(250, 350));</code></pre>
</div>
</div>
<div class="paragraph">
<p>Above, you have created four widgets, you have passed in a string, and you have set the widget&#8217;s position. Now, the <code>attachNodeWidget</code> method is triggered, which you defined in the previous step. The <code>arg</code> parameter in the <code>attachNodeWidget</code> is the string you passed to <code>addNode</code> . Therefore, the string will set the label of the widget. Then the widget is added to the <code>mainLayer</code> .</p>
</div>
<div class="olist arabic">
<ol class="arabic" start="8">
<li>
<p>Back in the <code>Main.java</code> class, add the lines in bold to the <code>initComponents</code> method:</p>
</li>
</ol>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">private void initComponents() {
//Set the layout:
setLayout(new BorderLayout());
//Create a JScrollPane:
JScrollPane scrollPane = new JScrollPane();
//Add the JScrollPane to the JPanel:
add(scrollPane, BorderLayout.CENTER);
*//Create the GraphSceneImpl:
GraphScene scene = new GraphSceneImpl();
//Add it to the JScrollPane:
scrollPane.setViewportView(scene.createView());
//Add the SatellitView to the scene:
add(scene.createSatelliteView(), BorderLayout.WEST);*
}</code></pre>
</div>
</div>
<div class="olist arabic">
<ol class="arabic" start="9">
<li>
<p>Run the application and you should see this:</p>
</li>
</ol>
</div>
<div class="imageblock">
<div class="content">
<img src="../../_images/tutorials/vislib_vislib-java-5.png" alt="vislib vislib java 5">
</div>
</div>
<div class="paragraph">
<p>Now that you have a scene with some widgets, we can begin integrating some actions!</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_enabling_the_actions"><a class="anchor" href="#_enabling_the_actions"></a>Enabling the Actions</h2>
<div class="sectionbody">
<div class="paragraph">
<p>In this section, we enable actions on the widgets we created previously.</p>
</div>
<div class="olist arabic">
<ol class="arabic" start="1">
<li>
<p>Change the <code>attachNodeWidget</code> by adding the lines in bold below:</p>
</li>
</ol>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">@Override
protected Widget attachNodeWidget(String arg) {
IconNodeWidget widget = new IconNodeWidget(this);
if (arg.startsWith("1")) {
widget.setImage(ImageUtilities.loadImage("vislibdemo/red.gif"));
} else if (arg.startsWith("2")) {
widget.setImage(ImageUtilities.loadImage("vislibdemo/green.gif"));
} else {
widget.setImage(ImageUtilities.loadImage("vislibdemo/blue.gif"));
}
*widget.getActions().addAction(
ActionFactory.createAlignWithMoveAction(
mainLayer, interactionLayer,
ActionFactory.createDefaultAlignWithMoveDecorator()));*
widget.setLabel(arg);
mainLayer.addChild(widget);
return widget;
}</code></pre>
</div>
</div>
<div class="olist arabic">
<ol class="arabic" start="2">
<li>
<p>Run the application. Drag a widget around and notice that alignment markers appear that help the user position a widget in relation to other widgets.</p>
</li>
</ol>
</div>
<div class="olist arabic">
<ol class="arabic" start="3">
<li>
<p>Change the <code>GraphSceneImpl</code> class by adding the line below to the end of the constructor:</p>
</li>
</ol>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">getActions().addAction(ActionFactory.createZoomAction());</code></pre>
</div>
</div>
<div class="olist arabic">
<ol class="arabic" start="4">
<li>
<p>Run the application. Scroll the middle mousebutton, or do whatever your operating system requires for "zooming", and notice that the whole scene increases/decreases in size.</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>Now that you have a basic idea of the features that the Visual Library API provides, see the section called "NetBeans APIs for Visualizing Data" on the <a href="../../kb/docs/platform/" class="xref page">NetBeans Platform Learning Trail</a>.</p>
</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/tutorials/nbm-visual_library3.adoc" title="See this page in github"><i class="fa fa-md fa-edit"></i> See this page in GitHub.</a></li>
</ul>
</section>
</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>