blob: c7cc1c7b471b16dc19c975c3ab617e849993a2d2 [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>Gap Editing Support in the NetBeans GUI Builder</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Gap Editing Support in the NetBeans GUI Builder - Apache NetBeans">
<meta name="author" content="Apache NetBeans">
<meta name="description" content="Gap Editing Support in the NetBeans GUI Builder - Apache NetBeans">
<meta name="keywords" content="Apache NetBeans, Tutorials, Gap Editing Support in the NetBeans GUI Builder">
<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 28</h1>
<p><a class="button success" href="../../../../../../front/main/download/nb28">Download</a></p>
</div>
</div>
</section>
<div class='grid-container main-content tutorial'>
<article class="doc">
<h1 class="sect0">Gap Editing Support in the NetBeans GUI Builder</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/java/gui-gaps.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="#_opening_example_project">Opening Example Project</a></li>
<li><a href="#_resizing_a_gap_by_dragging_and_dropping_its_edge">Resizing a Gap by Dragging and Dropping Its Edge</a></li>
<li><a href="#_resizing_a_gap_using_the_mouse_wheel">Resizing a Gap Using the Mouse Wheel</a></li>
<li><a href="#_editing_gaps_around_a_component">Editing Gaps Around a Component</a></li>
<li><a href="#_summary">Summary</a></li>
</ul>
</div>
<div id="preamble">
<div class="sectionbody">
<div class="paragraph">
<p>A layout of a container in the Free Design mode consists of components and gaps between these components. Both the components and gaps are visualized in the Design view of the GUI Builder. The NetBeans IDE enables you to edit gaps directly in the GUI Builder.</p>
</div>
<div class="paragraph">
<p>This tutorial demonstrates how to utilize gap editing to insert new UI components between other components as well as how to center components easily around a frame in the NetBeans GUI Builder without concern for the underlying layout manager. The tutorial is intended as a guide to show how you can perform changes in an existing form in the Free Design mode to implement a specific target layout that is required by the project.</p>
</div>
<div class="paragraph">
<p><strong>To follow this tutorial, you need the software and resources listed below.</strong></p>
</div>
<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="https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252FGapSupport.zip">GapSupport.zip</a></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">An archive with the source files containing the initial and target tutorial layouts.</p></td>
</tr>
</tbody>
</table>
<div class="paragraph">
<p><strong>Notes:</strong></p>
</div>
<div class="ulist">
<ul>
<li>
<p>You can download the project that is used as the starting point for this tutorial as a <code>.zip</code> archive.</p>
</li>
<li>
<p>This tutorial focuses on designing the layout of the container only. Adding functionality to the GUI is out of its scope.</p>
</li>
<li>
<p>You can turn on and off visualization of the gaps by using the <code>Visualize Additional Layout Information</code> option after choosing <code>Tools</code> &gt; <code>Options</code> &gt; <code>Java</code> &gt; <code>GUI Builder</code> in the main IDE&#8217;s menu.</p>
</li>
</ul>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_opening_example_project"><a class="anchor" href="#_opening_example_project"></a>Opening Example Project</h2>
<div class="sectionbody">
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Download and unzip the <a href="https://netbeans.org/projects/samples/downloads/download/Samples%252FJava%252FGapSupport.zip">GapSupport.zip</a> archive to any location on your computer.</p>
</li>
<li>
<p>In the NetBeans IDE main menu, choose <code>File</code> &gt; <code>Open Project</code> , navigate to the folder that contains the unzipped files with the <code>GapSupport</code> project that you extracted in the previous step.</p>
</li>
<li>
<p>Click Open Project.
The Projects window should look like the following:</p>
</li>
</ol>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/java/prj.png" alt="prj">
</div>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Double-click the <code>Initial.java</code> file.
The sample form opens in the GUI Builder Design view.</p>
</li>
</ol>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/java/initialform.png" alt="initialform">
</div>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
You can view the component hierarchy of the form in the Navigator window by choosing Window &gt; Navigator from the main toolbar.
</td>
</tr>
</table>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/java/navigator.png" alt="navigator">
</div>
</div>
<div class="paragraph">
<p><a href="#top">top</a></p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_resizing_a_gap_by_dragging_and_dropping_its_edge"><a class="anchor" href="#_resizing_a_gap_by_dragging_and_dropping_its_edge"></a>Resizing a Gap by Dragging and Dropping Its Edge</h2>
<div class="sectionbody">
<div class="paragraph">
<p>Let us explore how to edit a gap by dragging and dropping its edge in the Design view of the IDE.</p>
</div>
<div class="paragraph">
<p>To add a <code>Middle Name</code> row between the <code>First Name</code> and <code>Last Name</code> rows, you need to complete the following steps:</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Click on the gap between the <code>First Name</code> and <code>Last Name</code> labels.
The gap is highlighted with green.</p>
</li>
</ol>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/java/gap-highlighted.png" alt="gap highlighted">
</div>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Hover the mouse pointer over the bottom part of the highlighted gap.
The pointer is changed to a vertical resizable one.</p>
</li>
</ol>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/java/gap-resizable.png" alt="gap resizable">
</div>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Enlarge the selected gap to 50 by pressing the left mouse button, dragging the pointer downward, and releasing the left mouse button.
The new size of the gap is displayed in a tooltip.</p>
</li>
</ol>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/java/resizing.png" alt="resizing">
</div>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Add a new label into the created gap by dragging it from the Swing Controls section of the Palette and dropping it so that its left edge is aligned with the left edge of the <code>First Name</code> label and its top edge has the suggested preferred gap from the <code>First Name</code> row.</p>
</li>
</ol>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/java/jlabel.png" alt="jlabel">
</div>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Double-click the label and change the text of the label to <code>Middle Name:</code> .</p>
</li>
</ol>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/java/middle-name.png" alt="middle name">
</div>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Add a new text field to the right of the <code>Middle Name:</code> label by dragging it from the Swing Controls section of the Palette and dropping it so that it is baseline-aligned with the <code>Middle Name</code> label and its left edge is aligned with the other text fields.</p>
</li>
</ol>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/java/textfield.png" alt="textfield">
</div>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Drag the right edge of the text field to align it with the right edge of the other text fields.</p>
</li>
</ol>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/java/textfield-resized.png" alt="textfield resized">
</div>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Right-click the text inside the text field and choose Edit Text from the popup menu. Remove the text.</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>The <code>Middle Name</code> row is inserted between the form components.</p>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/java/middle-inserted-gap.png" alt="middle inserted gap">
</div>
</div>
<div class="paragraph">
<p><a href="#top">top</a></p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_resizing_a_gap_using_the_mouse_wheel"><a class="anchor" href="#_resizing_a_gap_using_the_mouse_wheel"></a>Resizing a Gap Using the Mouse Wheel</h2>
<div class="sectionbody">
<div class="paragraph">
<p>The IDE enables you to resize a gap by clicking and then scrolling a mouse wheel to tune the gap size.</p>
</div>
<div class="paragraph">
<p>To remove the remaining space between the <code>Middle Name</code> and <code>Last Name</code> rows, click the gap below and decrease the height of the gap by scrolling the mouse wheel downward and setting the new size to <code>default small</code> .</p>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
The NetBeans GUI Builder supports three preferred gaps for component placement - <code>default small</code> , <code>default medium</code> , and <code>default large</code> .
</td>
</tr>
</table>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/java/default-small.png" alt="default small">
</div>
</div>
<div class="paragraph">
<p>The gap between the form components is resized by using the mouse wheel and utilizing a preferred gap.</p>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/java/middle-inserted.png" alt="middle inserted">
</div>
</div>
<div class="paragraph">
<p><a href="#top">top</a></p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_editing_gaps_around_a_component"><a class="anchor" href="#_editing_gaps_around_a_component"></a>Editing Gaps Around a Component</h2>
<div class="sectionbody">
<div class="paragraph">
<p>You can center a component by enclosing it into two identical gaps that have prior been marked as resizable.</p>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
A container helps specify where the components should be centered. It is possible to center the buttons without enclosing them in a new panel but it is more difficult to accomplish in the GUI Builder and the resulting layout is a bit fragile. Therefore, we suggest to enclose the component being centered in a panel whenever it is possible.
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p><strong>To enclose the buttons and resizable gaps into a separate container, do as follows:</strong></p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Select all the four buttons in the form.</p>
</li>
<li>
<p>Right-click the selection and choose <code>Enclose In</code> &gt; <code>Panel</code> from the popup menu.</p>
</li>
</ol>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/java/enclose-panel.png" alt="enclose panel">
</div>
</div>
<div class="paragraph">
<p>The buttons are enclosed into a container.</p>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/java/buttons-enclosed.png" alt="buttons enclosed">
</div>
</div>
<div class="paragraph">
<p><strong>To remove the newly created gaps on the left and right side of the buttons, complete the following steps:</strong></p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Right-click one of the buttons and choose Edit Layout Space from the popup menu.
The Edit Layout Space dialog box is displayed.</p>
</li>
</ol>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/java/edit-layout-space.png" alt="edit layout space">
</div>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Set the size of the Left and Right gaps to 0 and click OK.
The gaps to the left and right of the buttons are removed using the Edit Layout Space dialog box.</p>
</li>
</ol>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/java/gaps-removed.png" alt="gaps removed">
</div>
</div>
<div class="paragraph">
<p><strong>To make the gaps above and below the container resizable, do as follows:</strong></p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Double-click the gap at the bottom of the last button.
The Edit Layout Space dialog box is displayed.</p>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>In the Edit Layout Space dialog box, select the <code>Resizable</code> option and click OK.</p>
</li>
</ol>
</div>
</li>
</ol>
</div>
<div class="openblock feature">
<div class="content">
<div class="imageblock xref-image left">
<div class="content">
<a class="image" href="../../../../_images/kb/docs/java/bottom.png"><img src="../../../../_images/kb/docs/java/bottom-small.png" alt="bottom small"></a>
</div>
</div>
</div>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Repeat steps 1 and 2 for the gap above the topmost button.
The gaps above and below the container with the buttons are made resizable.</p>
</li>
</ol>
</div>
<div class="paragraph">
<p><strong>To center the buttons of the sample form</strong>:</p>
</div>
<div class="paragraph">
<p>Drag the bottom edge of the container with the buttons to align with the bottom edges of the lists as shown below:</p>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/java/align.png" alt="align">
</div>
</div>
<div class="paragraph">
<p>The container is stretched to match the height of the <code>Available Topics</code> and <code>Selected Topics</code> lists. The buttons are centered within the space determined by the enclosing container since the surrounding gaps have been marked as resizable.</p>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/java/buttons-centered.png" alt="buttons centered">
</div>
</div>
<div class="paragraph">
<p><a href="#top">top</a></p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_summary"><a class="anchor" href="#_summary"></a>Summary</h2>
<div class="sectionbody">
<div class="paragraph">
<p>In this tutorial you enhanced a simple form. When manipulating gaps you learned how to manage empty spaces in the Free Design mode and design an appealing UI without spending extra time on tweaking every detail of the layout implementation.</p>
</div>
<div class="paragraph">
<p><a href="#top">top</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/kb/docs/java/gui-gaps.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>