# Java is another Animal: the first steps in GUI Design **URL:** \ **Category:** Java\ **Tags:** java, tutorials\ **Created:** [1 June 2021 19:13 UTC](https://ifnotnil.com/t/java-is-another-animal-the-first-steps-in-gui-design/1800 "2021-06-01T19:13:59Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![thorstenstueker](https://ifnotnil.com/letter_avatar_proxy/v4/letter/t/aca169/32.png) [@thorstenstueker](https://ifnotnil.com/u/thorstenstueker)\ **Post date:** [1 June 2021 19:13 UTC](https://ifnotnil.com/t/java-is-another-animal-the-first-steps-in-gui-design/1800/1 "2021-06-01T19:13:59Z")
In this Tutorial I want to show how to use IntelliJIdea and JFormDesigner for designing and coding a little Hello World GUI Application. For this we need as prerequisites: - IntelliJIdea (coimmunity Edition or commercial Edition) - Formtech JFormDesigner Plugin for IntelliJIdea (to install with Plugin Manager → CTRL+S → Plugins - Java OpenJDK 16 (I selected the one from AZUL, download at [azul.com](http://azul.com)) Let’s start. After you installed the Prerequisites you should have everything you need. So start IntelliJIdea. After it is opened use File-\>New Project to generate a new project. It opens a Dialog where you can select between plain Java, Maven, Gradle and other Stuffs. We want to use Java at this point so click next. ![grafik](https://ifnotnil.com/uploads/default/original/2X/f/f489cdee02924bccf6e6eef2399fd8b31901854f.png) Now it asks for using a Template, we are not using one so click next. Now you are asked for a Name, I call this Program Hello Norman as homage to Norman Palardy. ![grafik](https://ifnotnil.com/uploads/default/original/2X/d/d6c05e27d7dbab363adfd4056b300514f762bf30.png) Now click Finish and the IDE will ask you if you want to use This Window where I said yes. If you say no here it opens a new Window. When it is your first Project with the IDE you may have not this question. ![grafik](https://ifnotnil.com/uploads/default/original/2X/e/e0d62f5c126321b5214964ec21e5e1e6d02188f6.png) IntelliJIdea opens now with your freshly builded Project. At the upper Left Side you see your Project and it’s Files, Libraries and external Libraries and Scratches. ![grafik](https://ifnotnil.com/uploads/default/original/2X/f/fcfb6f3a19ded2673d121a60fa9762a2fc62703a.png) Here you can nor go above the folder src and press right Mouse Button, you’ll get a Popup where you select New-\> Package. Idea asks for a Package Name, we’ll give it the name com.hello. Now go with the Mouse above the Package com.hello and do a right click, select new-\>JFORM-DESIGNER FORM. This Window will come up: ![grafik](https://ifnotnil.com/uploads/default/original/2X/1/1421eb0aec59db400882a4f74a956f2f5b6b9808.png) Choose JPanel and give it the Name “NOrmans\_Window” and take care that you select GroupLayout(FreeDesign), then click on OK. IntelliJIDea opens the JFormDesigner for you: ![grafik](https://ifnotnil.com/uploads/default/original/2X/4/46dcae3e9647fd9e4ff08598774030c9b2717d4e.png) Now click once on Button in the components Selector and place it somewhere on your JPanel: ![grafik](https://ifnotnil.com/uploads/default/original/2X/0/08aa5f46f15f54d19e709a18d2e01e563187d9ad.png) Now go with your Mouse above the Button and do a right click and in the popup Menu select Add event Handler-\>ActionListener, a further Menu will popup where you can give the Action Listener a Name and select the listener Method. We do now not edit this and click on OK: ![grafik](https://ifnotnil.com/uploads/default/original/2X/7/73af8491bdd311d5acec626620beaf76df393040.png) JIdea changes in the sourcecode Editor of NOrmans\_Window and you see your just added Action listener. Now we can print out a Hello on the console to Norman so write in the SourceCode: sout and press return after the Help menu popped up and choose “Prints a String to System.out”. The System now wrote to your sourcecode System.out.println(); and you change that to System.out.println(“Hello Norman”); ![grafik](https://ifnotnil.com/uploads/default/original/2X/9/91823e5c378e4e15cf982de3a6d15ed806cf08d2.png) Now we want to have also a Popup Message, from Xojo known as MessageBox. In Java we get this Messages from the JOptionPane.showmessagedialog. It has the options: Parent Control where I said “null” cause it is not neccessary here, Message “Hi…”, Title “Hell.” and the Message Type JOptionPane.Plain\_Message: ![grafik](https://ifnotnil.com/uploads/default/original/2X/8/8e3c336a076acd44c1981e200692fa8cce29354e.png) Now we need a Main Method. Place for that your Mouse between the Line with initComponents and the private void butt… and write psvm and wait until a manu appears. Select Public Static Void Main and IntelliJIdea generates the needed Public Static Void Main Method: ![grafik](https://ifnotnil.com/uploads/default/original/2X/e/ed3a5822507583e9fb419f929959c5b3b8b9ddbd.png) Now we need to write the Main Method to load the GUI: First of all we need to generate a new JFrame for it while we need one to show our content. So we write JFrame frame = new JFrame(“Hello Norman Tutorial Frame”); With this Line we define the new JFrame with the name frame and we say also that this is a new JFrame. Next is the definition of the default Close operation. There are two methods mostly used: Exit\_ON\_CLOSE and SISPOSE(). We use here EXIT\_ON\_CLOSE: Then we need to setup the Content Pane. That is the “Surface” where we want to display our Window. We set it as a new content pane and it is a new instance of the NOrmany\_Window. After that we call the pack routine so the GUI can be packed correctly and say after: frame.setvisible(true);. That’s it. ![grafik](https://ifnotnil.com/uploads/default/original/2X/f/f95637eb63f8949a9a956ea1d99f948f9977a219.png) Now we need to tell IntelliJIdea where the Main Method is. For this press on Add Configuration ![grafik](https://ifnotnil.com/uploads/default/original/2X/e/ea51b40ae5f4f6cfd60d637a7129ca4d32d606a8.png) and this Window will pop up: ![grafik](https://ifnotnil.com/uploads/default/original/2X/6/6b9bd30879df890d3d13b32ff1bcf47abbefec19.png) Here you press on the + on the upper left side of the Window and select Application in the popup Menu. In the upcoming Window Menu you need to give the configuration a Name, I called it Normans\_Window\_Tutorial. ![grafik](https://ifnotnil.com/uploads/default/original/2X/d/da914c71bbc5995337b54bae2b04d2ba72cdab5e.png) Like you can see, you can select even the Java JVM here. But in the Field Main Class you’ll need to select the Main Class. At the right Side there is a Papersheet Symbol, press on it. IntelliJIde will search for the Main Methods in your Application. ![grafik](https://ifnotnil.com/uploads/default/original/2X/e/e2983e1798bf48ddb773219a5ec7aa3b0b31ef18.png) We select here Normans\_Window from com.hello. Now it should look like this: ![grafik](https://ifnotnil.com/uploads/default/original/2X/4/4bad7162b441a6f1c9b28ee6a4faac183a06ae34.png) And we can click on OKAY. Now the RUN Menu should appear in the right upper corner: ![grafik](https://ifnotnil.com/uploads/default/original/2X/9/9657ec34c0e02cae56000ff82b8cc39637f219ef.png) If you now press on the green Arrow the Window should Appear: ![grafik](https://ifnotnil.com/uploads/default/original/2X/c/ca31ae76230f82055a8431f025a401a18d540b26.png) When you press on the Button the Message Box should appear: ![grafik](https://ifnotnil.com/uploads/default/original/2X/5/5decdaf474048374193b7c99a498814d06b22966.png) And, after changing the Text given to println in our Action Listener which I forgot to do it gives out our printed line like you can see in the window. But there is one Thing. Standard for Java Swing is the Theme Nimbus. Nimbus is everything else than pretty. To have it at least in the beginning a bit more aestethic I would like to change to the Nimbus Theme. So we need to edit the Main Method and give the following lines “on Top”: ![grafik](https://ifnotnil.com/uploads/default/original/2X/9/9cc783b6234c265c8b9fb96b5f8bdd1fcb4197d8.png) Like you can see there are a few red marked parts of that. Go with your Mouse above and click it once, go again with the mouse above. He will show a popup where you can click import class. Do that and the needed classes are loaded automatically from IntelliJIdea: ![grafik](https://ifnotnil.com/uploads/default/original/2X/b/b34b5be156db957eaf9eab077764a4bb2fdaf0e7.png) When now pressing the green arraw we will see this Window: ![grafik](https://ifnotnil.com/uploads/default/original/2X/9/98b592d0ce31e93e6488bdb59ebf7f2659a3b398.png) And after pressing the Button we will see this Popup: ![grafik](https://ifnotnil.com/uploads/default/original/2X/1/1f778c17da3530b64957d79440dde2ad225e903f.png) Nicer for my Eyes and I hope that will help to start a bit better with Java Swing Development for you folks. ---
**Author:** ![npalardy](https://ifnotnil.com/user_avatar/ifnotnil.com/npalardy/32/10_2.png) [@npalardy](https://ifnotnil.com/u/npalardy)\ **Post date:** [3 June 2021 03:05 UTC](https://ifnotnil.com/t/java-is-another-animal-the-first-steps-in-gui-design/1800/2 "2021-06-03T03:05:25Z")
One thing I’m not clear on Where does the last bit of code (try catch to set the UIManager) go ? Otherwise pretty straight forward now that I see it in action 🙂 ---
**Author:** ![thorstenstueker](https://ifnotnil.com/letter_avatar_proxy/v4/letter/t/aca169/32.png) [@thorstenstueker](https://ifnotnil.com/u/thorstenstueker)\ **Post date:** [3 June 2021 07:57 UTC](https://ifnotnil.com/t/java-is-another-animal-the-first-steps-in-gui-design/1800/3 "2021-06-03T07:57:34Z")
Oh yes: in the public static void main before the code which is defining the GUI beginning with JFrame… . It selects the right look and feel you wanted. I’ll do a further one for GUI look and feels where I will explain that and where we can generate our App with Darknode and Lightmode. ---
**Author:** ![thorstenstueker](https://ifnotnil.com/letter_avatar_proxy/v4/letter/t/aca169/32.png) [@thorstenstueker](https://ifnotnil.com/u/thorstenstueker)\ **Post date:** [3 June 2021 08:24 UTC](https://ifnotnil.com/t/java-is-another-animal-the-first-steps-in-gui-design/1800/4 "2021-06-03T08:24:20Z")
The Try Catch Block for the UI Look and Feel definition is located at this position in public static void main: ![grafik](https://ifnotnil.com/uploads/default/original/2X/6/6bcecbad545696a6f43c1a7e0884cf81d9d95eff.png) ---
**Author:** ![npalardy](https://ifnotnil.com/user_avatar/ifnotnil.com/npalardy/32/10_2.png) [@npalardy](https://ifnotnil.com/u/npalardy)\ **Post date:** [4 June 2021 00:24 UTC](https://ifnotnil.com/t/java-is-another-animal-the-first-steps-in-gui-design/1800/5 "2021-06-04T00:24:13Z")
I had an odd bug I would get the hello norman dialog twice And lo and behold I had actually hooked up the event twice ! So it was doing exactly what I had configured just not what I expected 😛 ---
**Author:** ![stam](https://ifnotnil.com/user_avatar/ifnotnil.com/stam/32/453_2.png) [@stam](https://ifnotnil.com/u/stam)\ **Post date:** [6 June 2021 14:29 UTC](https://ifnotnil.com/t/java-is-another-animal-the-first-steps-in-gui-design/1800/6 "2021-06-06T14:29:59Z")
Very nice - will definitely spend some time looking at this. A request however: dark mode is great for working on IDE, but is less good for illustrating code in screenshots, for my eyes at least the contrast isn’t there and it’s more of an effort to read. Don’t know what others think? Maybe switch to a light mode for creating these screenshots for illustration purposes? ---
**Author:** ![thorstenstueker](https://ifnotnil.com/letter_avatar_proxy/v4/letter/t/aca169/32.png) [@thorstenstueker](https://ifnotnil.com/u/thorstenstueker)\ **Post date:** [6 June 2021 14:32 UTC](https://ifnotnil.com/t/java-is-another-animal-the-first-steps-in-gui-design/1800/7 "2021-06-06T14:32:43Z")
STAM I was creating them between my work and I am extremely stressed because of having to less time. If I remember next time I find the time to write one, I will do. It is so that I was writing this Turorial within 15 minutes or twenty and restarting to work. Sorry for inconvenient Color Model for you reading it. ---
**Author:** ![stam](https://ifnotnil.com/user_avatar/ifnotnil.com/stam/32/453_2.png) [@stam](https://ifnotnil.com/u/stam)\ **Post date:** [6 June 2021 14:34 UTC](https://ifnotnil.com/t/java-is-another-animal-the-first-steps-in-gui-design/1800/8 "2021-06-06T14:34:17Z")
Oh please don’t apologise! It’s extremely kind of you to post this in the first place! My eyes are struggling with the dark mode, but it’s very generous of you to provide the content in the first place! ---
**Author:** ![thorstenstueker](https://ifnotnil.com/letter_avatar_proxy/v4/letter/t/aca169/32.png) [@thorstenstueker](https://ifnotnil.com/u/thorstenstueker)\ **Post date:** [6 June 2021 14:35 UTC](https://ifnotnil.com/t/java-is-another-animal-the-first-steps-in-gui-design/1800/9 "2021-06-06T14:35:50Z")
Anyhow: I am happy that people will use the Tutorials to find by self out if Java can be their programming Island.