Google Git
Sign in
apache / netbeans-website / refs/heads/asf-site / . / tutorial / main / kb / docs / java / gui-functionality / index.html
blob: 5b6fb2f9af9b7c07dce83583a98c7a9b10aba216 [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>Introduction to GUI Building</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Introduction to GUI Building - Apache NetBeans">
<meta name="author" content="Apache NetBeans">
<meta name="description" content="Introduction to GUI Building - Apache NetBeans">
<meta name="keywords" content="Apache NetBeans, Tutorials, Introduction to GUI Building">
<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">Introduction to GUI Building</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-functionality.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="#Exercise_1">Exercise 1: Creating a Project</a></li>
<li><a href="#_exercise_2_building_the_front_end">Exercise 2: Building the Front End</a>
<ul class="sectlevel2">
<li><a href="#_create_a_jframe_container">Create a JFrame container</a></li>
<li><a href="#_adding_components_making_the_front_end">Adding Components: Making the Front End</a></li>
<li><a href="#_renaming_the_components">Renaming the Components</a></li>
</ul>
</li>
<li><a href="#_exercise_3_adding_functionality">Exercise 3: Adding Functionality</a>
<ul class="sectlevel2">
<li><a href="#_making_the_exit_button_work">Making the Exit Button Work</a></li>
<li><a href="#_making_the_clear_button_work">Making the Clear Button Work</a></li>
<li><a href="#_making_the_add_button_work">Making the Add Button Work</a></li>
</ul>
</li>
<li><a href="#_exercise_4_running_the_program">Exercise 4: Running the Program</a></li>
<li><a href="#_how_event_handling_works">How Event Handling Works</a></li>
</ul>
</div>
<div id="preamble">
<div class="sectionbody">
<div class="paragraph">
<p>Contributed by Saleem Gul and Tomas Pavek</p>
</div>
<div class="paragraph">
<p>This beginner tutorial teaches you how to create a simple graphical user interface and add simple back-end functionality. In particular we will show how to code the behavior of buttons and fields in a Swing form.</p>
</div>
<div class="paragraph">
<p>We will work through the layout and design of a GUI and add a few buttons and text fields. The text fields will be used for receiving user input and also for displaying the program output. The button will initiate the functionality built into the front end. The application we create will be a simple but functional calculator.</p>
</div>
<div class="paragraph">
<p>For a more comprehensive guide to the GUI Builder&#8217;s design features, including video demonstrations of the various design features, see <a href="../quickstart-gui/" class="xref page">Designing a Swing GUI in NetBeans IDE</a>.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="Exercise_1"><a class="anchor" href="#Exercise_1"></a>Exercise 1: Creating a Project</h2>
<div class="sectionbody">
<div class="paragraph">
<p>The first step is to create an IDE project for the application that we are going to develop. We will name our project <code>NumberAddition</code> .</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Choose <code>File</code> &gt; <code>New Project</code> . Alternatively, you can click the New Project icon in the IDE toolbar.</p>
</li>
<li>
<p>In the Categories pane, select Java with Ant. In the Projects pane, choose Java Application. Click Next.</p>
</li>
<li>
<p>Type <code>NumberAddition</code> in the Project Name field and specify a path, for example, in your home directory, as the project location.</p>
</li>
<li>
<p>(Optional) Select the Use Dedicated Folder for Storing Libraries checkbox and specify the location for the libraries folder. See <a href="http://www.oracle.com/pls/topic/lookup?ctx=nb8000&amp;id=NBDAG455">Sharing a Library with Other Users</a> in <em>Developing Applications with NetBeans IDE</em> for more information.</p>
</li>
<li>
<p>Deselect the Create Main Class checkbox if it is selected.</p>
</li>
<li>
<p>Click Finish.</p>
</li>
</ol>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_exercise_2_building_the_front_end"><a class="anchor" href="#_exercise_2_building_the_front_end"></a>Exercise 2: Building the Front End</h2>
<div class="sectionbody">
<div class="paragraph">
<p>To proceed with building our interface, we need to create a Java container within which we will place the other required GUI components. In this step we&#8217;ll create a container using the <code>JFrame</code> component. We will place the container in a new package, which will appear within the Source Packages node.</p>
</div>
<div class="sect2">
<h3 id="_create_a_jframe_container"><a class="anchor" href="#_create_a_jframe_container"></a>Create a JFrame container</h3>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>In the Projects window, right-click the <code>NumberAddition</code> node and choose <code>New</code> &gt; <code>Other</code> .</p>
</li>
<li>
<p>In the New File dialog box, choose the <code>Swing GUI Forms</code> category and the <code>JFrame Form</code> file type. Click Next.</p>
</li>
<li>
<p>Enter <code>NumberAdditionUI</code> as the class name.</p>
</li>
<li>
<p>Enter <code>my.numberaddition</code> as the package.</p>
</li>
<li>
<p>Click Finish.</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>The IDE creates the <code>NumberAdditionUI</code> form and the <code>NumberAdditionUI</code> class within the <code>NumberAddition</code> application, and opens the <code>NumberAdditionUI</code> form in the GUI Builder. The <code>my.NumberAddition</code> package replaces the default package.</p>
</div>
</div>
<div class="sect2">
<h3 id="_adding_components_making_the_front_end"><a class="anchor" href="#_adding_components_making_the_front_end"></a>Adding Components: Making the Front End</h3>
<div class="paragraph">
<p>Next we will use the Palette to populate our application&#8217;s front end with a JPanel. Then we will add three JLabels, three JTextFields, and three JButtons. If you have not used the GUI Builder before, you might find information in the <a href="../quickstart-gui/" class="xref page">Designing a Swing GUI in NetBeans IDE</a> tutorial on positioning components useful.</p>
</div>
<div class="paragraph">
<p>Once you are done dragging and positioning the aforementioned components, the JFrame should look something like the following screenshot.</p>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/java/Figure1.png" alt="Figure1">
</div>
</div>
<div class="paragraph">
<p>If you do not see the Palette window in the upper right corner of the IDE, choose Window &gt; Palette.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Start by selecting a Panel from the Swing Containers category on Palette and drop it onto the JFrame.</p>
</li>
<li>
<p>While the JPanel is highlighted, go to the Properties window and click the ellipsis (&#8230;&#8203;) button next to Border to choose a border style.</p>
</li>
<li>
<p>In the Border dialog, select TitledBorder from the list, and type in <code>Number Addition</code> in the Title field. Click OK to save the changes and exit the dialog.</p>
</li>
<li>
<p>You should now see an empty titled JFrame that says Number Addition like in the screenshot. Look at the screenshot and add three JLabels, three JTextFields and three JButtons as you see above.</p>
</li>
</ol>
</div>
</div>
<div class="sect2">
<h3 id="_renaming_the_components"><a class="anchor" href="#_renaming_the_components"></a>Renaming the Components</h3>
<div class="paragraph">
<p>In this step we are going to rename the display text of the components that were just added to the JFrame.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Double-click <code>jLabel1</code> and change the text property to <code>First Number:</code>.</p>
</li>
<li>
<p>Double-click <code>jLabel2</code> and change the text to <code>Second Number:</code>.</p>
</li>
<li>
<p>Double-click <code>jLabel3</code> and change the text to <code>Result:</code>.</p>
</li>
<li>
<p>If you want the labels right aligned, as the those in the image are, expand the width of the two shorter labels so that they are all the same width. Then open the Properties dialog for each one, and change the Horizontal Alignment property to RIGHT.</p>
</li>
<li>
<p>Delete the sample text from <code>jTextField1</code>. You can make the display text editable by right-clicking the text field and choosing Edit Text from the popup menu. You may have to resize the <code>jTextField1</code> to its original size. Repeat this step for <code>jTextField2</code> and <code>jTextField3</code>.</p>
</li>
<li>
<p>Rename the display text of <code>jButton1</code> to <code>Clear</code>. (You can edit a button&#8217;s text by right-clicking the button and choosing Edit Text. Or you can click the button, pause, and then click again.)</p>
</li>
<li>
<p>Rename the display text of <code>jButton2</code> to <code>Add</code>.</p>
</li>
<li>
<p>Rename the display text of <code>jButton3</code> to <code>Exit</code>.</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>Your Finished GUI should now look like the following screenshot:</p>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/java/Figure2.png" alt="Figure2">
</div>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_exercise_3_adding_functionality"><a class="anchor" href="#_exercise_3_adding_functionality"></a>Exercise 3: Adding Functionality</h2>
<div class="sectionbody">
<div class="paragraph">
<p>In this exercise we are going to give functionality to the Add, Clear, and Exit buttons. The <code>jTextField1</code> and <code>jTextField2</code> boxes will be used for user input and <code>jTextField3</code> for program output - what we are creating is a very simple calculator. Let&#8217;s begin.</p>
</div>
<div class="sect2">
<h3 id="_making_the_exit_button_work"><a class="anchor" href="#_making_the_exit_button_work"></a>Making the Exit Button Work</h3>
<div class="paragraph">
<p>In order to give function to the buttons, we have to assign an event handler to each to respond to events. In our case we want to know when the button is pressed, either by mouse click or via keyboard. So we will use ActionListener responding to ActionEvent.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Right click the Exit button. From the pop-up menu choose Events &gt; Action &gt; actionPerformed. Note that the menu contains many more events you can respond to! When you select the <code>actionPerformed</code> event, the IDE will automatically add an ActionListener to the Exit button and generate a handler method for handling the listener&#8217;s actionPerformed method.</p>
</li>
<li>
<p>The IDE will open up the Source Code window and scroll to where you implement the action you want the button to do when the button is pressed (either by mouse click or via keyboard). Your Source Code window should contain the following lines:</p>
</li>
</ol>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) {
//TODO add your handling code here:
}</code></pre>
</div>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>We are now going to add code for what we want the Exit Button to do. Replace the TODO line with <code>System.exit(0);</code>. Your finished Exit button code should look like this:</p>
</li>
</ol>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">private void jButton3ActionPerformed(java.awt.event.ActionEvent evt) {
System.exit(0);
}</code></pre>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_making_the_clear_button_work"><a class="anchor" href="#_making_the_clear_button_work"></a>Making the Clear Button Work</h3>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Click the Design tab at the top of your work area to go back to the Form Design.</p>
</li>
<li>
<p>Right click the Clear button (<code>jButton1</code>). From the pop-up menu select Events &gt; Action &gt; actionPerformed.</p>
</li>
<li>
<p>We are going to have the Clear button erase all text from the jTextFields. To do this, you will add some code like above. Your finished source code should look like this:</p>
</li>
</ol>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">private void jButton1ActionPerformed(java.awt.event.ActionEvent evt){
jTextField1.setText("");
jTextField2.setText("");
jTextField3.setText("");
}</code></pre>
</div>
</div>
<div class="paragraph">
<p>The above code changes the text in all three of our JTextFields to nothing, in essence it is overwriting the existing Text with a blank.</p>
</div>
</div>
<div class="sect2">
<h3 id="_making_the_add_button_work"><a class="anchor" href="#_making_the_add_button_work"></a>Making the Add Button Work</h3>
<div class="paragraph">
<p>The Add button will perform three actions.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>It is going to accept user input from <code>jTextField1</code> and <code>jTextField2</code> and convert the input from a type String to a float.</p>
</li>
<li>
<p>It will then perform addition of the two numbers.</p>
</li>
<li>
<p>And finally, it will convert the sum to a type String and place it in <code>jTextField3</code>.
Lets get started!</p>
</li>
</ol>
</div>
<div class="olist arabic">
<ol class="arabic" start="1">
<li>
<p>Click the Design tab at the top of your work area to go back to the Form Design.</p>
</li>
<li>
<p>Right-click the Add button (<code>jButton2</code>). From the pop-up menu, select Events &gt; Action &gt; actionPerformed.</p>
</li>
<li>
<p>We are going to add some code to have our Add button work. The finished source code shall look like this:</p>
</li>
</ol>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">private void jButton2ActionPerformed(java.awt.event.ActionEvent evt){
// First we define float variables.
float num1, num2, result;
// We have to parse the text to a type float.
num1 = Float.parseFloat(jTextField1.getText());
num2 = Float.parseFloat(jTextField2.getText());
// Now we can perform the addition.
result = num1+num2;
// We will now pass the value of result to jTextField3.
// At the same time, we are going to
// change the value of result from a float to a string.
jTextField3.setText(String.valueOf(result));
}</code></pre>
</div>
</div>
<div class="paragraph">
<p>Our program is now complete we can now build and run it to see it in action.</p>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_exercise_4_running_the_program"><a class="anchor" href="#_exercise_4_running_the_program"></a>Exercise 4: Running the Program</h2>
<div class="sectionbody">
<div class="paragraph">
<p><strong>To run the program in the IDE:</strong></p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Choose Run &gt; Run Project (Number Addition) (alternatively, press F6).</p>
</li>
</ol>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
If you get a window informing you that Project NumberAddition does not have a main class set, then you should select <code>my.NumberAddition.NumberAdditionUI</code> as the main class in the same window and click the OK button.
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p><strong>To run the program outside of the IDE:</strong></p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Choose Run &gt; Clean and Build Main Project (Shift-F11) to build the application JAR file.</p>
</li>
<li>
<p>Using your system&#8217;s file explorer or file manager, navigate to the ` NumberAddition/dist` directory.</p>
</li>
</ol>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
The location of the <code>NumberAddition</code> project directory depends on the path you specified while creating the project in step 3 of the <a href="#Exercise_1">Exercise 1: Creating a Project</a> section.
</td>
</tr>
</table>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Double-click the <code>NumberAddition.jar</code> file.</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>After a few seconds, the application should start.</p>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
If double-clicking the JAR file does not launch the application, see <a href="../javase-deploy/#troubleshooting" class="xref page">this article</a> for information on setting JAR file associations in your operating system.
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p>You can also launch the application from the command line.</p>
</div>
<div class="paragraph">
<p><strong>To launch the application from the command line:</strong></p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>On your system, open up a command prompt or terminal window.</p>
</li>
<li>
<p>In the command prompt, change directories to the <code>NumberAddition/dist</code> directory.</p>
</li>
<li>
<p>At the command line, type the following statement:</p>
</li>
</ol>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">java -jar NumberAddition.jar</code></pre>
</div>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
Make sure <code>my.NumberAddition.NumberAdditionUI</code> is set as the main class before running the application. You can check this by right-clicking the NumberAddition project node in the Projects pane, choosing Properties in the popup menu, and selecting the Run category in the Project Properties dialog box. The Main Class field should display <code>my.numberaddition.NumberAdditionUI</code> .
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_how_event_handling_works"><a class="anchor" href="#_how_event_handling_works"></a>How Event Handling Works</h2>
<div class="sectionbody">
<div class="paragraph">
<p>This tutorial has showed how to respond to a simple button event. There are many more events you can have your application respond to. The IDE can help you find the list of available events your GUI components can handle:</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Go back to the file <code>NumberAdditionUI.java</code> in the Editor. Click the Design tab to see the GUI&#8217;s layout in the GUI Builder.</p>
</li>
<li>
<p>Right-click any GUI component, and select Events from the pop-up menu. For now, just browse the menu to see what&#8217;s there, you don&#8217;t need to select anything.</p>
</li>
<li>
<p>Alternatively, you can select Properties from the Window/IDE Tools menu. In the Properties window, click the Events tab. In the Events tab, you can view and edit events handlers associated with the currently active GUI component.</p>
</li>
<li>
<p>You can have your application respond to key presses, single, double and triple mouse clicks, mouse motion, window size and focus changes. You can generate event handlers for all of them from the Events menu. The most common event you will use is an Action event. (Learn <a href="http://java.sun.com/docs/books/tutorial/uiswing/events/generalrules.html#twokinds">best practices for Event handling</a> from Sun&#8217;s <a href="http://java.sun.com/docs/books/tutorial/uiswing/events/index.html">Java Events Tutorial</a>.)</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>How does event handling work? Every time you select an event from the Event menu, the IDE automatically creates a so-called event listener for you, and hooks it up to your component. Go through the following steps to see how event handling works.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Go back to the file <code>NumberAdditionUI.java</code> in the Editor. Click the Source tab to see the GUI&#8217;s source.</p>
</li>
<li>
<p>Scroll down and note the methods <code>jButton1ActionPerformed()</code>, <code>jButton2ActionPerformed()</code>, and <code>jButton3ActionPerformed()</code> that you just implemented. These methods are called event handlers.</p>
</li>
<li>
<p>Now scroll to a method called <code>initComponents()</code>. If you do not see this method, look for a line that says <code>Generated Code</code>; click the + sign next to it to expand the collapsed <code>initComponents()</code> method.</p>
</li>
<li>
<p>First, note the blue block around the <code>initComponents()</code> method. This code was auto-generated by the IDE and you cannot edit it.</p>
</li>
<li>
<p>Now, browse through the <code>initComponents()</code> method. Among other things, it contains the code that initializes and places your GUI components on the form. This code is generated and updated automatically while you place and edit components in the Design view.</p>
</li>
<li>
<p>In <code>initComponents()</code>, scroll down to where it reads</p>
</li>
</ol>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">jButton3.setText("Exit");
jButton3.addActionListener(new java.awt.event.ActionListener() {
public void actionPerformed(java.awt.event.ActionEvent evt) {
jButton3ActionPerformed(evt);
}
});</code></pre>
</div>
</div>
<div class="paragraph">
<p>This is the spot where an event listener object is added to the GUI component; in this case, you register an ActionListener to the <code>jButton3</code>. The ActionListener interface has an actionPerformed method taking ActionEvent object which is implemented simply by calling your <code>jButton3ActionPerformed</code> event handler. The button is now listening to action events. Everytime it is pressed an ActionEvent is generated and passed to the listener&#8217;s actionPerformed method which in turn executes code that you provided in the event handler for this event.</p>
</div>
<div class="paragraph">
<p>Generally speaking, to be able to respond, each interactive GUI component needs to register to an event listener and needs to implement an event handler. As you can see, NetBeans IDE handles hooking up the event listener for you, so you can concentrate on implementing the actual business logic that should be triggered by the event.</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-functionality.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>