Add Set up a GUI with Java

Author: Estrella Popoca

projects/set-up-a-gui-with-java/header.png

@@ -0,0 +1,159 @@
+---
+title: 
+author: Ellie Popoca
+uid: 11zhRKeJCWWcD7IkTJBtuK3Mkvo1
+datePublished: 
+published: false
+description: Learn how to set up a graphical user interface with Java
+header: https://raw.githubusercontent.com/codedex-io/projects/main/projects/set-up-a-gui-with-java/header.png
+tags:
+  - beginner
+  - java
+---
+
+<BannerImage
+  link="https://raw.githubusercontent.com/codedex-io/projects/main/projects/set-up-a-gui-with-java/header.png"
+  description="Title Image"
+  uid={true}
+  cl="for-sidebar"
+/>
+
+# Set up a GUI (Graphical User Interface) with Java 
+
+<AuthorAvatar
+  author_name="Ellie Popoca"
+  author_avatar="/images/projects/authors/ellie-popoca.jpg"
+  username="ellie"
+  uid={true}
+/>
+
+<BannerImage
+   link="https://raw.githubusercontent.com/codedex-io/projects/main/projects/set-up-a-gui-with-java/header.png"
+  description="Banner"
+  uid={true}
+/>
+
+**Prerequisites**: Java
+**Version**: None
+**Read Time**: 30 minutes  
+
+## Introduction
+
+GUI (Often pronounced "GOO-ee", but actually "Gee-Yuuu-Eye") stands for **graphical user interface**. 
+
+Back in the OLD, ANCIENT days of the 1980s, you had to be a knowledgeable tech person to really use computers, but thanks to graphical user interfaces, things like buttons, sliders, windows, and menus let your 5-year-old sibling pull up Roblox on their iPad! 
+
+<ImageZoom src="https://i.imgur.com/wfJ167k.png" /> 
+
+You use GUIs every day, and most commonly, web-based GUIs! As you can imagine, ChatGPT is a GUI, as it lets you prompt without ever interacting with code or the command line. 
+
+<ImageZoom src="https://i.imgur.com/TxEy5sO.png" /> 
+
+## Swing GUI Toolkit
+
+In Java development, you're able to create GUIs for your programs without needing any additional downloads! All you need is the **Swing** GUI Toolkit import statement in the IDE of your choice, and you're able to get started immediately! 
+
+
+```java
+import javax.swing.*;
+```
+
+If you don't already have a Java IDE, Click [here]() to set yours up! 
+
+Create a public class and add a main method to begin. 
+
+You'll want to add a `JFrame` object with a title, and use methods like `.setSize`, `.setDefaultCloseOperation`, and `.setLayout` to set up your window screen. 
+
+Then, close your program with `frame.setVisible(true);` to see your interface! 
+
+```java
+public class SimpleGUI {
+    public static void main(String[] args) {
+    
+		// Create a new window (JFrame)
+		JFrame frame = new JFrame("My First GUI");
+		frame.setSize(300, 150);
+		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
+		frame.setLayout(null); // absolute positioning
+		
+		
+		frame.setVisible(true); 
+		}
+}
+```
+
+Take a look! 
+
+<ImageZoom src="https://i.imgur.com/5C8igzQ.png" />
+
+### Components
+
+`JFrame` is a Swing component that allows you to set up your GUI so it shows up when you run your program. Now, you can customize your GUI with other components to add functionality. Some popular Swing components include:
+
+- `JButton` A clickable button
+- `JCheckBox` A box that can be checked/unchecked
+- `JRadioButton` A radio button (usually in groups)
+- `JToggleButton` A button that stays pressed
+- `JComboBox` A drop-down list (like a select box)
+- `JTextField` A single-line text input
+
+For example, we can add text fields, buttons, and labels by creating objects for each of them and then using `.setBounds` to set up the location of where these components would appear. 
+
+```java
+// text field
+JTextField textField = new JTextField();
+textField.setBounds(20, 20, 150, 25);
+
+// button
+JButton button = new JButton("Click Me");
+button.setBounds(180, 20, 90, 25);
+
+// label
+JLabel label = new JLabel("Hello!");
+label.setBounds(20, 60, 250, 25);
+```
+
+Then, use the `.add()` to add these components to the frame, since we've only initialized them above. 
+
+```java
+// Add components to the frame
+frame.add(textField);
+frame.add(button);
+frame.add(label);
+```
+
+This is your result! 
+
+<ImageZoom src="https://i.imgur.com/llQyEYk.png" />
+
+Then, add functionality to your button by adding an action:
+
+```java
+button.addActionListener(e -> {
+    String name = textField.getText();
+    label.setText("Hello, " + name + "!");
+});
+```
+
+Now, we can see a name in our frame! 
+
+<ImageZoom src="https://i.imgur.com/rF9mZMm.png" /> 
+
+## Congratulations!
+
+Congrats! You've made your very own GUI with Java's Swing GUI Toolkit. This is just the beginning of the possibilities of what you can build with Java; Games, forms, and image displays are now possible with Swing! 
+
+Be sure to check out 
+- [The Swing API Documentation](https://docs.oracle.com/javase/7/docs/api/javax/swing/package-summary.html) to see other methods and objects you can create for your GUI
+- [Setting up your local Java Development Environment]()
+
+
+Note that Swing is the default, built-in GUI Toolkit. Other toolkits like [JavaFX](https://openjfx.io/openjfx-docs/#install-javafx) exist with more functionality with their own SDK, or download package. 
+
+Other ideas include
+- Weather Farrenheit to Celcius converter
+- Math calculator
+- To-Do list
+- Music Player
+
+Share your projects with the team [@codedex_io](https://www.twitter.com/codedex_io) and me, [@exrlla](https://www.twitter.com/exrlla)! Let us know what you come up with!