{"id":6128,"date":"2025-07-28T12:42:14","date_gmt":"2025-07-28T10:42:14","guid":{"rendered":"https:\/\/home.et.utwente.nl\/slootenvanf\/?p=6128"},"modified":"2025-07-30T15:23:17","modified_gmt":"2025-07-30T13:23:17","slug":"java-tutorial-create-an-application-that-can-draw-a-simple-shape","status":"publish","type":"post","link":"https:\/\/home.et.utwente.nl\/slootenvanf\/2025\/07\/28\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\/","title":{"rendered":"Java tutorial: create an application that can draw a simple shape"},"content":{"rendered":"\n<p>This tutorial can also be done in Python:&nbsp;<a href=\"https:\/\/home.et.utwente.nl\/slootenvanf\/2024\/04\/30\/python-drawing-shapes-userinterface\/\" target=\"_blank\" rel=\"noreferrer noopener\">the tutorial for that you can find here<\/a>. This tutorial is part of a series. <a href=\"https:\/\/home.et.utwente.nl\/slootenvanf\/2025\/07\/28\/getting-started-with-java-hello-world\/\" target=\"_blank\" rel=\"noreferrer noopener\">Make sure to start with the first<\/a>, eg. if you have not setup Eclipse and your Java environment yet.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"299\" height=\"372\" src=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-63.png\" alt=\"\" class=\"wp-image-2883\" srcset=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-63.png 299w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-63-241x300.png 241w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-63-80x100.png 80w\" sizes=\"auto, (max-width: 299px) 100vw, 299px\" \/><\/figure>\n\n\n\n<p>We are going to create an application that can draw a simple shape. This shape fills the screen, and might even scale when we resize the application. The color of the shape can be adjusted by entering the RGB values (three numbers) for the color components red, green and blue. These numbers can have values 0-255.&nbsp;<a href=\"https:\/\/home.et.utwente.nl\/slootenvanf\/appdev\/assignment-2-appendix\/\" target=\"_blank\" rel=\"noreferrer noopener\">Examples of how to draw shapes are given here<\/a>.<\/p>\n\n\n\n<p>Tutorial steps<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Design and create the user interface<\/li>\n\n\n\n<li>Write code for drawing<\/li>\n\n\n\n<li>Set color<\/li>\n\n\n\n<li>Read user input<\/li>\n\n\n\n<li>Drawing with different colors<\/li>\n\n\n\n<li>Draw the colored shape<\/li>\n\n\n\n<li>Make entry of numbers fool-proof<\/li>\n<\/ol>\n\n\n\n<p>These steps are explained in detail below.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Design and create the user interface<\/h2>\n\n\n\n<p>The user interface consists of two parts:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A part for entering the RGB values<\/li>\n\n\n\n<li>A part for drawing<\/li>\n<\/ul>\n\n\n\n<p>We can use a Panel for both parts, which is a component which holds other components (a container). You can also draw in a Panel.<\/p>\n\n\n\n<p><strong>Start with a design:<\/strong>&nbsp;Draw (on paper) a sketch of the user interface that shows the division into two Panels. One of the Panels contains three input fields and an Ok-button (JButton) to execute the input of the values.<\/p>\n\n\n\n<p>After you finish the design, you can start creating the user interface.<\/p>\n\n\n\n<p>Start by creating a new project, via&nbsp;<em>File &gt; New &gt; Java Project<\/em>. Name the project \u201cAssignment2_s1234567\u201d (use your student number in the name). Do not create a module-info.java when asked (choose \u201cDon\u2019t Create\u201d).<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-64.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>Add a JFrame: right click the&nbsp;<em>Assignment2<\/em>&nbsp;project folder, choose&nbsp;<em>New &gt; Other<\/em>. Browse to&nbsp;<em>WindowBuilder &gt; Swing Designer<\/em>. Select JFrame and click Next. Name it \u201cAssignment2GUI\u201d and at \u2018package\u2019 fill-in \u201cuserinterface\u201d.<\/p>\n\n\n\n<p>Switch to the Design-tab. Set the layout to \u201cGroupLayout\u201d: click on contentPane, and select the Layout at Properties:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-65.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>The steps to create a user interface are covered briefly here. If you do not remember exactly how to do this, <a href=\"https:\/\/home.et.utwente.nl\/slootenvanf\/2025\/07\/28\/getting-started-with-java-hello-world\/\" target=\"_blank\" rel=\"noreferrer noopener\">check the first tutorial<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"142\" height=\"36\" src=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-66.png\" alt=\"\" class=\"wp-image-2889\" srcset=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-66.png 142w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-66-100x25.png 100w\" sizes=\"auto, (max-width: 142px) 100vw, 142px\" \/><\/figure>\n\n\n\n<p>You can switch between the source code Editor and the WindowBuilder (Design) with the tabs at the bottom:<\/p>\n\n\n\n<p><strong>Tip:<\/strong>&nbsp;If the tabs do not appear, open the file by clicking it with the right mouse button:&nbsp;<em>Open With &gt; WindowBuilder\u2026<\/em><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"190\" height=\"195\" src=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-67.png\" alt=\"\" class=\"wp-image-2892\" srcset=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-67.png 190w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-67-97x100.png 97w\" sizes=\"auto, (max-width: 190px) 100vw, 190px\" \/><\/figure>\n\n\n\n<p>Now add two JPanels, a smaller one on top, which will be used for input of colors, and a large Panel, to be used for drawing below that (but you may use your design as inspiration here also). You can find JPanel under Containers in the Palette.<\/p>\n\n\n\n<p>Give both Panels meaningful variable names as shown in the Structure below.<\/p>\n\n\n\n<p>We use the top panel to input color values, so name that \u201cpanelInput\u201d (under Properties, field \u2018Variable\u2019). The bottom panel will be used for drawing a shape. Name that \u201cpanelDraw\u201d.<\/p>\n\n\n\n<p>It will look this this, for example:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"657\" height=\"278\" src=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-68.png\" alt=\"\" class=\"wp-image-2893\" srcset=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-68.png 657w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-68-300x127.png 300w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-68-100x42.png 100w\" sizes=\"auto, (max-width: 657px) 100vw, 657px\" \/><\/figure>\n\n\n\n<p>Set the layout of the smallest Panel to \u201cGroupLayout\u201d. Now add a label (JLabel), three text fields (JTextField) and a button (JButton) to this Panel and make sure it looks like:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"430\" height=\"83\" src=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-69.png\" alt=\"\" class=\"wp-image-2894\" srcset=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-69.png 430w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-69-300x58.png 300w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-69-100x19.png 100w\" sizes=\"auto, (max-width: 430px) 100vw, 430px\" \/><\/figure>\n\n\n\n<p>Give the components meaningful names.&nbsp;<strong>Convert the button and panelDraw to class variables (fields):<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"921\" height=\"502\" src=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-73.png\" alt=\"\" class=\"wp-image-2900\" srcset=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-73.png 921w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-73-300x164.png 300w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-73-768x419.png 768w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-73-100x55.png 100w\" sizes=\"auto, (max-width: 921px) 100vw, 921px\" \/><\/figure>\n\n\n\n<p>Check if the textfields are fields (class variables) already (they should be), if not, convert them also to field.&nbsp;<strong>Warning:<\/strong>&nbsp;the \u201cConvert local to field\u201d is a toggle button. If it already looks like below, it is already a field, and you do not have to change it:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"161\" height=\"70\" src=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-74.png\" alt=\"\" class=\"wp-image-2901\" srcset=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-74.png 161w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-74-100x43.png 100w\" sizes=\"auto, (max-width: 161px) 100vw, 161px\" \/><\/figure>\n\n\n\n<p>The structure should look similar as shown below. Also pay attention to the location of the components. The new components are in the Panel that we use for input:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"298\" height=\"217\" src=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-70.png\" alt=\"\" class=\"wp-image-2896\" srcset=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-70.png 298w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-70-100x73.png 100w\" sizes=\"auto, (max-width: 298px) 100vw, 298px\" \/><\/figure>\n\n\n\n<p>It is possible that your application does not properly fit in the Window. In that case, you can change the size of the window and various components to make it fit better. You can also look up the method call&nbsp;<em>setBounds(\u2026)<\/em>&nbsp;in the code and change its parameters if necessary.<\/p>\n\n\n\n<p>The user interface is now ready. Run your program using the Run button&nbsp;<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-71.png\" alt=\"\" width=\"19\" height=\"21\">&nbsp;to check if everything works.<\/p>\n\n\n\n<p>If you do not like the way the user interface elements are displayed, you can customize the style, using the Look-and-feel button at the top right of the WindowBuilder.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"458\" height=\"48\" src=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-72.png\" alt=\"\" class=\"wp-image-2899\" srcset=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-72.png 458w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-72-300x31.png 300w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-72-100x10.png 100w\" sizes=\"auto, (max-width: 458px) 100vw, 458px\" \/><\/figure>\n\n\n\n<p>If you select Windows (located under JRE), it will look more like a Windows user interface.<\/p>\n\n\n\n<p><strong>Note:&nbsp;<\/strong>for this to work, you must first enable the \u201cApply chosen LookAndFeel \u2026\u201d option via&nbsp;<em>Window &gt; Preferences<\/em>. This is located in the Preferences under&nbsp;<em>WindowBuilder, Swing, LookAndFeel<\/em>.<\/p>\n\n\n\n<p>Now switch to the&nbsp;<em>Source<\/em>&nbsp;tab.<\/p>\n\n\n\n<p><strong>Make the draw-button the default button:<\/strong>&nbsp;To make the draw-button the default button which will be triggered when the ENTER key is pressed, add the following line of code at the end* of the constructor&nbsp;<em>Assignment2GUI()<\/em>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>getRootPane().setDefaultButton(btnDraw);<\/code><\/pre>\n\n\n\n<p>* to find the end, select the opening bracket \u2018{\u2018 right after&nbsp;<code>Assignment2GUI()<\/code>, then scroll all the way down to find the matching closing bracket \u2018}\u2019 which will be highlighted. That\u2019s the end. Add the line of code before that. See also today\u2019s presentation: the explanation of &#8220;Code of user interface&#8221; (at the end).<\/p>\n\n\n\n<p>If adding this last line introduces an error, check the name of the button, is that&nbsp;<strong>btnDraw<\/strong>? Or did you name that differently?&nbsp;<strong>Or did you forget to make the button a field?<\/strong>&nbsp;(scroll up if you missed that)<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Write code for drawing<\/h2>\n\n\n\n<p>To be able to execute drawing commands we must create an extended version of the class JPanel.<\/p>\n\n\n\n<p>Add a new class to the project (<em>File &gt; New &gt; Class<\/em>). Name it \u201cDrawingPanel\u201d and type \u201cjavax.swing.JPanel\u201d at the field Superclass (see below).<\/p>\n\n\n\n<p><strong>Pay attention to upper case and lower-case characters<\/strong>&nbsp;when entering values for Name and Superclass here. For example, in&nbsp;<strong><code>javax.swing.JPanel<\/code><\/strong>&nbsp;you must write JPanel with a capital J and P! At Superclass, you may use the Browse button as help, to avoid mistakes.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"403\" height=\"480\" src=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-75.png\" alt=\"\" class=\"wp-image-2904\" srcset=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-75.png 403w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-75-252x300.png 252w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-75-84x100.png 84w\" sizes=\"auto, (max-width: 403px) 100vw, 403px\" \/><\/figure>\n\n\n\n<p>Before you press&nbsp;<em>Finish<\/em>,&nbsp;<strong>make sure the option \u201cInherited abstract methods\u201d is enabled<\/strong>&nbsp;and other options are disabled.<\/p>\n\n\n\n<p>Now save the whole project (<em>File &gt; Save All<\/em>). (if everything is saved already that will be grey)<\/p>\n\n\n\n<p>Also check if the project does not contain errors: if there are, fix those before you continue.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Morph the panel into a DrawingPanel<\/h4>\n\n\n\n<p>Next, we change&nbsp;<em>panelDraw&nbsp;<\/em>in the user interface into a&nbsp;<em>DrawingPanel<\/em>&nbsp;(this is called morphing, changing the class into another: the class of panelDraw is now&nbsp;<em>JPanel<\/em>, and will become&nbsp;<em>DrawingPanel<\/em>). Right-click the panel in the list of Components and select&nbsp;<em>Morph &gt; Subclass<\/em>:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"553\" height=\"519\" src=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-76.png\" alt=\"\" class=\"wp-image-2905\" srcset=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-76.png 553w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-76-300x282.png 300w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-76-100x94.png 100w\" sizes=\"auto, (max-width: 553px) 100vw, 553px\" \/><\/figure>\n\n\n\n<p>Type \u201cDrawingPanel\u201d in the text field and click on Ok:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"559\" height=\"299\" src=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-77.png\" alt=\"\" class=\"wp-image-2906\" srcset=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-77.png 559w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-77-300x160.png 300w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-77-100x53.png 100w\" sizes=\"auto, (max-width: 559px) 100vw, 559px\" \/><\/figure>\n\n\n\n<p>Now a drawing method can be added to the DrawingPanel class:<\/p>\n\n\n\n<p>Switch to&nbsp;<em>DrawingPanel.java<\/em>&nbsp;(if not opened in a tab yet, double click it in the Package Explorer). Select&nbsp;<em>Source &gt; Override\/Implement Methods\u2026<\/em>&nbsp;from the menu.<\/p>\n\n\n\n<p>In the list that appears, find JComponent and open that (click on the triangle in front JComponent):<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"447\" height=\"158\" src=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-78.png\" alt=\"\" class=\"wp-image-2907\" srcset=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-78.png 447w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-78-300x106.png 300w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-78-100x35.png 100w\" sizes=\"auto, (max-width: 447px) 100vw, 447px\" \/><\/figure>\n\n\n\n<p>Find the&nbsp;<em>paintComponent()<\/em>&nbsp;method of JComponent and select it. Then click OK.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"444\" height=\"392\" src=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-79.png\" alt=\"\" class=\"wp-image-2908\" srcset=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-79.png 444w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-79-300x265.png 300w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-79-100x88.png 100w\" sizes=\"auto, (max-width: 444px) 100vw, 444px\" \/><\/figure>\n\n\n\n<p>The code now looks like the example below. If the parameter has a different name than \u2018g\u2019, for instance, \u2018arg0\u2019, change the parameter&nbsp;<code>arg0<\/code>&nbsp;to&nbsp;<code>g<\/code>:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"557\" height=\"210\" src=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-80.png\" alt=\"\" class=\"wp-image-2909\" srcset=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-80.png 557w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-80-300x113.png 300w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-80-100x38.png 100w\" sizes=\"auto, (max-width: 557px) 100vw, 557px\" \/><\/figure>\n\n\n\n<p>You can now add&nbsp;<a href=\"https:\/\/docs.oracle.com\/javase\/8\/docs\/api\/index.html?java\/awt\/Graphics.html\" target=\"_blank\" rel=\"noreferrer noopener\">drawing methods (of the Graphics class)<\/a> to the method just created. <a href=\"https:\/\/home.et.utwente.nl\/slootenvanf\/appdev\/assignment-2-appendix\/\" target=\"_blank\" rel=\"noreferrer noopener\">Use the examples in the appendix<\/a> to draw a few sample shapes. In the examples, the parameter of the&nbsp;<em>paintComponent()<\/em> method has the name \u2018g\u2019. If the generated code uses arg0 as a name for the parameter, its useful to also change its name into \u2018g\u2019. This will make it easier to copy code from the examples into the paintComponent() method. <strong>Make sure you add the drawing code after the line with: <br><code>super.paintComponent(g);<\/code><\/strong><\/p>\n\n\n\n<p>Run your program using the Run button to check if the shapes are drawn correctly. If not, check if you did not forget steps, like the morphing (re-check everything in this step).<\/p>\n\n\n\n<p><strong>Add variables and methods to a class<\/strong><br>In the next section, methods and variables are added to a class. Variables are usually added at the beginning of the class (class variables) or at the beginning of a method. Methods are usually added at the end of the class. Where that is exactly, is explained below.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"828\" height=\"395\" src=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-81.png\" alt=\"\" class=\"wp-image-2911\" srcset=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-81.png 828w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-81-300x143.png 300w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-81-768x366.png 768w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-81-100x48.png 100w\" sizes=\"auto, (max-width: 828px) 100vw, 828px\" \/><\/figure>\n\n\n\n<p>Curly brackets \u2018{\u2018 \u2018}\u2019 are sometimes called curly braces also. In Dutch, they are called \u2018accolades\u2019.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Set color<\/h2>\n\n\n\n<p>To draw with a certain color, the DrawingPanel class must be able to remember the drawing color. Drawing with Java and the related techniques are&nbsp;<a href=\"https:\/\/home.et.utwente.nl\/slootenvanf\/appdev\/assignment-2-appendix\/\" target=\"_blank\" rel=\"noreferrer noopener\">explained in the appendix<\/a>.<\/p>\n\n\n\n<p>First add a variable for the color to the DrawingPanel class. Do this at the top of the class, on a blank line after the opening bracket \u2018{\u2019:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Color drawColor;<\/code><\/pre>\n\n\n\n<p>This variable is of the type <a href=\"https:\/\/docs.oracle.com\/javase\/8\/docs\/api\/index.html?java\/awt\/Color.html\" target=\"_blank\" rel=\"noreferrer noopener\">Color<\/a>. This is a class from&nbsp;<a href=\"https:\/\/docs.oracle.com\/javase\/8\/docs\/api\/index.html?java\/awt\/Color.html\" target=\"_blank\" rel=\"noreferrer noopener\">the Java library <strong>awt<\/strong><\/a>. If this is the first time you are using it, a light bulb appears in the margin and red lines will appear underneath the unknown word. Click on the light bulb and double-click on \u201cImport Color\u201d (or press Ctrl + Shift + O) to use Color from the java.awt library (we will import that library):<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"752\" height=\"147\" src=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-82.png\" alt=\"\" class=\"wp-image-2916\" srcset=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-82.png 752w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-82-300x59.png 300w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-82-100x20.png 100w\" sizes=\"auto, (max-width: 752px) 100vw, 752px\" \/><\/figure>\n\n\n\n<p>We are going to make the default color black by assigning a value to the drawColor variable. To do this, we change the line with the variable we just created into:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Color drawColor = Color.black; \/\/ default drawing color black<\/code><\/pre>\n\n\n\n<p>We now need to add a method which can set the color (assign a value to the variable drawColor).<br>This method is given below. Add the code to the DrawingPanel class. Note the location: Add the code at the bottom of the class, on a blank line just before the last closing bracket \u2018}\u2019. This method gets three variables r, g and b as parameters and uses those to create a new color (new Color) which is assigned to the class variable drawColor that we have just created.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>public void setColor(int r, int g, int b) {\n    drawColor = new Color(r % 256, g % 256, b % 256);\n    repaint(); \/\/ draw again because the color has been changed.\n}<\/code><\/pre>\n\n\n\n<p>If errors appear after you have added this method, undo it (press CTRL-z). You then have added it at the wrong spot. Browse up a bit to the last paragraph of part 2 of this assignment, to learn where to add new methods.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. Read user input<\/h2>\n\n\n\n<p><strong>Tip:<\/strong>&nbsp;Learn more on input of integers in the presentation of the lecture.<\/p>\n\n\n\n<p>Double-click on the Draw-button in the user interface to create an Event Handler. You also did this in <a href=\"https:\/\/home.et.utwente.nl\/slootenvanf\/2025\/07\/28\/getting-started-with-java-hello-world\/\" target=\"_blank\" rel=\"noreferrer noopener\">the previous tutorial<\/a>.<\/p>\n\n\n\n<p>To read the values entered from the text fields, you must call the&nbsp;<em>getText()<\/em>&nbsp;method of the text fields. The output (the result) of this method is a String. Therefore, we first declare a variable of type String and assign the outcome of the call of the&nbsp;<em>getText()<\/em>&nbsp;method to it. This is done as follows:<\/p>\n\n\n\n<p>First type the declaration of the variable followed by an = sign to assign the value:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>String r =<\/code><\/pre>\n\n\n\n<p>Behind this, type the variable name of the text field:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>String r = textFieldR<\/code><\/pre>\n\n\n\n<p>If we type a dot immediately after this, we get a list of methods of the text field. Find the&nbsp;<em>getText()<\/em>&nbsp;method in that list and click on it to read the documentation of that method:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"834\" height=\"241\" src=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-83.png\" alt=\"\" class=\"wp-image-2918\" srcset=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-83.png 834w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-83-300x87.png 300w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-83-768x222.png 768w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-83-100x29.png 100w\" sizes=\"auto, (max-width: 834px) 100vw, 834px\" \/><\/figure>\n\n\n\n<p>After double-clicking on the method, it is added to the code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>String r = textFieldR.getText()<\/code><\/pre>\n\n\n\n<p>Add a semi-colon \u2018<code>;<\/code>\u2018 at the end to finish the line of code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>String r = textFieldR.getText();<\/code><\/pre>\n\n\n\n<p>On the next line, you can display the value entered in the Console, by calling the&nbsp;<em>println()<\/em>&nbsp;method:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>System.out.println(\"Input value for red: \"+r);<\/code><\/pre>\n\n\n\n<p>When the program is running you can use this to check if entering numbers works. Run your program to check if entering a number in the field for red works (press the Draw-button). You should see this in the Console Window:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"425\" height=\"96\" src=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-84.png\" alt=\"\" class=\"wp-image-2920\" srcset=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-84.png 425w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-84-300x68.png 300w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-84-100x23.png 100w\" sizes=\"auto, (max-width: 425px) 100vw, 425px\" \/><\/figure>\n\n\n\n<p>If the Console is not visible, you can show it via:&nbsp;<em>Window &gt; Show View &gt; Console<\/em>.<\/p>\n\n\n\n<p>You must now repeat these steps for reading and displaying the values entered for the green (g) and blue (b) text fields and make sure that all three values are displayed in the Console.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. Drawing with different colors<\/h2>\n\n\n\n<p>To draw using the color values entered we need to call the&nbsp;<em>setColor()<\/em>&nbsp;method of the DrawingPanel class in the Event Handler we have just created. This method expects three integers (r, g and b) as parameters. However, in the Event Handler the three values from the text field are read as a String (which is text). Therefore, we must convert the String to an integer (a number). To do this, add this code (at the end of the Event Handler):<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"319\" height=\"48\" src=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-85.png\" alt=\"\" class=\"wp-image-2922\" srcset=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-85.png 319w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-85-300x45.png 300w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-85-100x15.png 100w\" sizes=\"auto, (max-width: 319px) 100vw, 319px\" \/><\/figure>\n\n\n\n<p><strong>Tip:<\/strong>&nbsp;if you do not remember exactly where the Event Handler (of a button) is, you can always double-click on the button in the Window Builder.<\/p>\n\n\n\n<p>Repeat this for the g and b values.<\/p>\n\n\n\n<p>Now add the call of the&nbsp;<em>setColor()<\/em>&nbsp;method to the Event Handler:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"394\" height=\"36\" src=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-86.png\" alt=\"\" class=\"wp-image-2923\" srcset=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-86.png 394w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-86-300x27.png 300w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-86-100x9.png 100w\" sizes=\"auto, (max-width: 394px) 100vw, 394px\" \/><\/figure>\n\n\n\n<p>We assume that you have named the Panel for drawing \u201cpanelDraw\u201d (at step 1). You might notice that an error occurs here. Even if you do not experience an error, please read on.<\/p>\n\n\n\n<p>The problem might arise, when building the user interface, the order of creation of components might differ. If button btnDraw is created before panel panelDraw, the variable panelDraw will not be in the same scope (the region in the code where a variable or object is valid).<\/p>\n\n\n\n<p>To solve this, these variables must be defined as a class variable (sometimes also called a field).&nbsp;<strong>A class variable is always defined at the top of the class and accessible in all methods of the class.&nbsp;<\/strong>Check which variables are defined at the top of the class. There should be at least the panelDraw and btnDraw variables and the variables of the textfields:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2025\/07\/image-84.png\"><img loading=\"lazy\" decoding=\"async\" width=\"577\" height=\"276\" src=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2025\/07\/image-84.png\" alt=\"\" class=\"wp-image-6168\" srcset=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2025\/07\/image-84.png 577w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2025\/07\/image-84-300x144.png 300w\" sizes=\"auto, (max-width: 577px) 100vw, 577px\" \/><\/a><\/figure>\n\n\n\n<p>If one of the variables in your code is missing here, convert them to fields (switch to Design), as explained in step 1 and re-do the part \u201cConvert the button and panelDraw to class variables (fields)\u201d.<\/p>\n\n\n\n<p>If you did get an error message at the call of the&nbsp;<em>setColor()<\/em>&nbsp;method, that should have disappeared now, because the&nbsp;<code>panelDraw<\/code>&nbsp;variable is now valid in the entire class, instead of only in (part of) the method: it has become a class-variable.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">6. Draw the colored shape<\/h2>\n\n\n\n<p>To make sure the selected color will actually be used for drawing, we need to set the drawing color in the&nbsp;<em>paintComponent()&nbsp;<\/em>method in&nbsp;<strong>DrawingPanel.java<\/strong>. If you have used an example from&nbsp;<a href=\"https:\/\/home.et.utwente.nl\/slootenvanf\/appdev\/assignment-2-appendix\/\" target=\"_blank\" rel=\"noreferrer noopener\">the appendix<\/a>, you have already set the color by calling the&nbsp;<em>setColor()<\/em>&nbsp;method. This call must now use the color variable&nbsp;<code>drawColor<\/code>&nbsp;as a parameter. Find the call for the&nbsp;<em>setColor()<\/em>&nbsp;method and adjust this as follows:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"202\" height=\"51\" src=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-88.png\" alt=\"\" class=\"wp-image-2925\" srcset=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-88.png 202w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-88-100x25.png 100w\" sizes=\"auto, (max-width: 202px) 100vw, 202px\" \/><\/figure>\n\n\n\n<p>Check if previously added (test) shapes are now drawn using the specified color (enter values for r, g and b and click on the button).<\/p>\n\n\n\n<p><strong>You now must draw a more complex shape.<\/strong>&nbsp;Some possibilities: a mushroom, a traffic light or a pie.&nbsp;<strong>The shape must consist of at least two different basic shapes.<\/strong><\/p>\n\n\n\n<p>Use your own creativity to draw the shape you have chosen. Remember that you can get help to find out what kind of drawing methods there are. You can get help in different ways:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>In Eclipse: in the&nbsp;<em>paintComponent()&nbsp;<\/em>method, enter a \u2018g\u2019 (the Graphics-object), followed by a dot, after which all methods of the Graphics class are listed; click on one to see what it is\/does. Drawing methods start with \u201cdraw\u2026\u201d or \u201cfill\u2026\u201d. Double click to use it.<\/li>\n\n\n\n<li>Google: search for terms like \u201cjava draw figure\u201d or \u201cjava draw nice icon\u201d and so on. You might like for instance&nbsp;<a href=\"https:\/\/harryjoy.me\/2012\/05\/27\/drawing-android-icon-in-swing\/\" target=\"_blank\" rel=\"noreferrer noopener\">the Android-icon<\/a>.<\/li>\n\n\n\n<li><a href=\"https:\/\/docs.oracle.com\/javase\/8\/docs\/api\/index.html?java\/awt\/Color.html\" target=\"_blank\" rel=\"noreferrer noopener\">The API description of the Graphics class<\/a><\/li>\n<\/ol>\n\n\n\n<p>Delete the test shapes you made earlier using the drawing methods (or place them in comments).<\/p>\n\n\n\n<p>Please note that some examples you may find on the internet might use the Graphics2D class instead of the Graphics class. If that is the case, add the following line before the drawing code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Graphics2D g2d = (Graphics2D)g; \/\/ convert standard Graphics g to a Graphics2D object<\/code><\/pre>\n\n\n\n<p>If you want the dimensions of the shape to be dependent on the size of the Panel in which is drawn, you can do that as follows: You can retrieve the width and the height using methods&nbsp;<em>getWidth()<\/em>&nbsp;and&nbsp;<em>getHeight()<\/em>.<\/p>\n\n\n\n<p>To draw a rectangle that creates a horizon effect in the drawing, you can use this code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>int h = getHeight(), w = getWidth();\nint horizon = h\/2-20;\ng.setColor(Color.lightGray);\ng.fillRect(0, h-horizon, w, horizon);<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">7. Make entry of numbers fool-proof<\/h2>\n\n\n\n<p>The application is not entirely fool proof. What happens when we start the application and click the Draw button without filling in color values? Check the output in the Console. A red error message like the one below probably appears here. If you scroll up, you will see that this is an \u201cException\u201d: something Java is unable to run.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"653\" height=\"169\" src=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-89.png\" alt=\"\" class=\"wp-image-2931\" srcset=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-89.png 653w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-89-300x78.png 300w, https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-89-100x26.png 100w\" sizes=\"auto, (max-width: 653px) 100vw, 653px\" \/><\/figure>\n\n\n\n<p>In one of the lines at the top you will also see a reference to a line number in a Java file. That\u2019s where the error occurs. It is probably one of the lines with a call of the parseInt() method. This method cannot handle a parameter that is not an integer. In this case, it is an empty String.<\/p>\n\n\n\n<p>To solve this problem, we could check if there is an integer in the relevant field. And if not, we place a zero (0) in the field.<\/p>\n\n\n\n<p>We can use r.matches(\u201c\\d+\u201d) to check if the String read in variable r only contains digits (integers). This expression is true if the String consists of integers. Using the Boolean not-operator, an !, we can then build this if-statement:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if (!r.matches(\"\\\\d+\")) { r=\"0\"; textFieldR.setText(r); }<\/code><\/pre>\n\n\n\n<p>Insert this line at the location after the call to&nbsp;<em>getText()<\/em>&nbsp;(after reading the String). Repeat for the g and b values.<\/p>\n\n\n\n<p>Test the application.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Summary<\/h2>\n\n\n\n<p>With this tutorial you have written Java code and learned how to apply variables in expressions to perform calculations.<\/p>\n\n\n\n<p>You have also learned the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create a user interface.<\/li>\n\n\n\n<li>Read and use values in a user interface.<\/li>\n\n\n\n<li>Use drawing methods.<\/li>\n\n\n\n<li>Use of variables in expressions.<\/li>\n\n\n\n<li>Apply mathematical functions.<\/li>\n\n\n\n<li>Find information using the online help function.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Learn more<\/h2>\n\n\n\n<p>Please practice your drawing skills with the information in&nbsp;<a href=\"https:\/\/home.et.utwente.nl\/slootenvanf\/appdev\/assignment-2-appendix\/\" target=\"_blank\" rel=\"noreferrer noopener\">the Appendix: drawing with Java graphics.<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial can also be done in Python:&nbsp;the tutorial for that you can find here. This tutorial is part of a series. Make sure to start with the first, eg. if you have not setup Eclipse and your Java environment yet. We are going to create an application that can draw a simple shape. This [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2883,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","footnotes":""},"categories":[3],"tags":[246,565,564,107,95,509],"class_list":["post-6128","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-education","tag-appdev","tag-draw","tag-gui","tag-java","tag-programming","tag-start"],"blocksy_meta":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Java tutorial: create an application that can draw a simple shape - vanslooten.com<\/title>\n<meta name=\"description\" content=\"Java tutorial: create an application that can draw a simple shape Java tutorial: create an application that can draw a simple shape\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/home.et.utwente.nl\/slootenvanf\/2025\/07\/28\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Java tutorial: create an application that can draw a simple shape - vanslooten.com\" \/>\n<meta property=\"og:description\" content=\"Java tutorial: create an application that can draw a simple shape Java tutorial: create an application that can draw a simple shape\" \/>\n<meta property=\"og:url\" content=\"https:\/\/home.et.utwente.nl\/slootenvanf\/2025\/07\/28\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\/\" \/>\n<meta property=\"og:site_name\" content=\"vanslooten.com\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-28T10:42:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-30T13:23:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-63.png\" \/>\n\t<meta property=\"og:image:width\" content=\"299\" \/>\n\t<meta property=\"og:image:height\" content=\"372\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Fjodor van Slooten\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fjodorvs\" \/>\n<meta name=\"twitter:site\" content=\"@fjodorvs\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fjodor van Slooten\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/2025\\\/07\\\/28\\\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/2025\\\/07\\\/28\\\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\\\/\"},\"author\":{\"name\":\"Fjodor van Slooten\",\"@id\":\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/#\\\/schema\\\/person\\\/e62ff2d6beaa937dc9345a023eeb05dd\"},\"headline\":\"Java tutorial: create an application that can draw a simple shape\",\"datePublished\":\"2025-07-28T10:42:14+00:00\",\"dateModified\":\"2025-07-30T13:23:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/2025\\\/07\\\/28\\\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\\\/\"},\"wordCount\":3038,\"publisher\":{\"@id\":\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/#\\\/schema\\\/person\\\/e62ff2d6beaa937dc9345a023eeb05dd\"},\"image\":{\"@id\":\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/2025\\\/07\\\/28\\\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/image-63.png\",\"keywords\":[\"appdev\",\"draw\",\"gui\",\"java\",\"programming\",\"start\"],\"articleSection\":[\"Education\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/2025\\\/07\\\/28\\\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\\\/\",\"url\":\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/2025\\\/07\\\/28\\\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\\\/\",\"name\":\"Java tutorial: create an application that can draw a simple shape - vanslooten.com\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/2025\\\/07\\\/28\\\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/2025\\\/07\\\/28\\\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/image-63.png\",\"datePublished\":\"2025-07-28T10:42:14+00:00\",\"dateModified\":\"2025-07-30T13:23:17+00:00\",\"description\":\"Java tutorial: create an application that can draw a simple shape Java tutorial: create an application that can draw a simple shape\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/2025\\\/07\\\/28\\\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/2025\\\/07\\\/28\\\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/2025\\\/07\\\/28\\\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\\\/#primaryimage\",\"url\":\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/image-63.png\",\"contentUrl\":\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/image-63.png\",\"width\":299,\"height\":372},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/2025\\\/07\\\/28\\\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Java tutorial: create an application that can draw a simple shape\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/#website\",\"url\":\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/\",\"name\":\"vanslooten.com\",\"description\":\"Personal website of Fjodor van Slooten\",\"publisher\":{\"@id\":\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/#\\\/schema\\\/person\\\/e62ff2d6beaa937dc9345a023eeb05dd\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/#\\\/schema\\\/person\\\/e62ff2d6beaa937dc9345a023eeb05dd\",\"name\":\"Fjodor van Slooten\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/2018-08-24-13.33.38_small.jpg\",\"url\":\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/2018-08-24-13.33.38_small.jpg\",\"contentUrl\":\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/2018-08-24-13.33.38_small.jpg\",\"width\":300,\"height\":214,\"caption\":\"Fjodor van Slooten\"},\"logo\":{\"@id\":\"https:\\\/\\\/home.et.utwente.nl\\\/slootenvanf\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/2018-08-24-13.33.38_small.jpg\"},\"sameAs\":[\"http:\\\/\\\/vanslooten.com\",\"https:\\\/\\\/x.com\\\/fjodorvs\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Java tutorial: create an application that can draw a simple shape - vanslooten.com","description":"Java tutorial: create an application that can draw a simple shape Java tutorial: create an application that can draw a simple shape","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/home.et.utwente.nl\/slootenvanf\/2025\/07\/28\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\/","og_locale":"en_US","og_type":"article","og_title":"Java tutorial: create an application that can draw a simple shape - vanslooten.com","og_description":"Java tutorial: create an application that can draw a simple shape Java tutorial: create an application that can draw a simple shape","og_url":"https:\/\/home.et.utwente.nl\/slootenvanf\/2025\/07\/28\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\/","og_site_name":"vanslooten.com","article_published_time":"2025-07-28T10:42:14+00:00","article_modified_time":"2025-07-30T13:23:17+00:00","og_image":[{"width":299,"height":372,"url":"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-63.png","type":"image\/png"}],"author":"Fjodor van Slooten","twitter_card":"summary_large_image","twitter_creator":"@fjodorvs","twitter_site":"@fjodorvs","twitter_misc":{"Written by":"Fjodor van Slooten","Est. reading time":"19 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/home.et.utwente.nl\/slootenvanf\/2025\/07\/28\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\/#article","isPartOf":{"@id":"https:\/\/home.et.utwente.nl\/slootenvanf\/2025\/07\/28\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\/"},"author":{"name":"Fjodor van Slooten","@id":"https:\/\/home.et.utwente.nl\/slootenvanf\/#\/schema\/person\/e62ff2d6beaa937dc9345a023eeb05dd"},"headline":"Java tutorial: create an application that can draw a simple shape","datePublished":"2025-07-28T10:42:14+00:00","dateModified":"2025-07-30T13:23:17+00:00","mainEntityOfPage":{"@id":"https:\/\/home.et.utwente.nl\/slootenvanf\/2025\/07\/28\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\/"},"wordCount":3038,"publisher":{"@id":"https:\/\/home.et.utwente.nl\/slootenvanf\/#\/schema\/person\/e62ff2d6beaa937dc9345a023eeb05dd"},"image":{"@id":"https:\/\/home.et.utwente.nl\/slootenvanf\/2025\/07\/28\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\/#primaryimage"},"thumbnailUrl":"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-63.png","keywords":["appdev","draw","gui","java","programming","start"],"articleSection":["Education"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/home.et.utwente.nl\/slootenvanf\/2025\/07\/28\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\/","url":"https:\/\/home.et.utwente.nl\/slootenvanf\/2025\/07\/28\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\/","name":"Java tutorial: create an application that can draw a simple shape - vanslooten.com","isPartOf":{"@id":"https:\/\/home.et.utwente.nl\/slootenvanf\/#website"},"primaryImageOfPage":{"@id":"https:\/\/home.et.utwente.nl\/slootenvanf\/2025\/07\/28\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\/#primaryimage"},"image":{"@id":"https:\/\/home.et.utwente.nl\/slootenvanf\/2025\/07\/28\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\/#primaryimage"},"thumbnailUrl":"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-63.png","datePublished":"2025-07-28T10:42:14+00:00","dateModified":"2025-07-30T13:23:17+00:00","description":"Java tutorial: create an application that can draw a simple shape Java tutorial: create an application that can draw a simple shape","breadcrumb":{"@id":"https:\/\/home.et.utwente.nl\/slootenvanf\/2025\/07\/28\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/home.et.utwente.nl\/slootenvanf\/2025\/07\/28\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/home.et.utwente.nl\/slootenvanf\/2025\/07\/28\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\/#primaryimage","url":"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-63.png","contentUrl":"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2020\/04\/image-63.png","width":299,"height":372},{"@type":"BreadcrumbList","@id":"https:\/\/home.et.utwente.nl\/slootenvanf\/2025\/07\/28\/java-tutorial-create-an-application-that-can-draw-a-simple-shape\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/home.et.utwente.nl\/slootenvanf\/"},{"@type":"ListItem","position":2,"name":"Java tutorial: create an application that can draw a simple shape"}]},{"@type":"WebSite","@id":"https:\/\/home.et.utwente.nl\/slootenvanf\/#website","url":"https:\/\/home.et.utwente.nl\/slootenvanf\/","name":"vanslooten.com","description":"Personal website of Fjodor van Slooten","publisher":{"@id":"https:\/\/home.et.utwente.nl\/slootenvanf\/#\/schema\/person\/e62ff2d6beaa937dc9345a023eeb05dd"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/home.et.utwente.nl\/slootenvanf\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/home.et.utwente.nl\/slootenvanf\/#\/schema\/person\/e62ff2d6beaa937dc9345a023eeb05dd","name":"Fjodor van Slooten","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2019\/06\/2018-08-24-13.33.38_small.jpg","url":"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2019\/06\/2018-08-24-13.33.38_small.jpg","contentUrl":"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2019\/06\/2018-08-24-13.33.38_small.jpg","width":300,"height":214,"caption":"Fjodor van Slooten"},"logo":{"@id":"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-content\/uploads\/2019\/06\/2018-08-24-13.33.38_small.jpg"},"sameAs":["http:\/\/vanslooten.com","https:\/\/x.com\/fjodorvs"]}]}},"_links":{"self":[{"href":"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-json\/wp\/v2\/posts\/6128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-json\/wp\/v2\/comments?post=6128"}],"version-history":[{"count":3,"href":"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-json\/wp\/v2\/posts\/6128\/revisions"}],"predecessor-version":[{"id":6170,"href":"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-json\/wp\/v2\/posts\/6128\/revisions\/6170"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-json\/wp\/v2\/media\/2883"}],"wp:attachment":[{"href":"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-json\/wp\/v2\/media?parent=6128"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-json\/wp\/v2\/categories?post=6128"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/home.et.utwente.nl\/slootenvanf\/wp-json\/wp\/v2\/tags?post=6128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}