---

Intro to Java Graphical User Interface (GUI) Programming

---

• Types of Java Programs
  • Java programs can be roughly categorized into:

    Java applications (no graphics) Java graphical applications Java applets

    ---

  • Java application does not use any graphics.

  • Graphical applications and applets are very similar.
    • Graphical applications runs without a web browser, and
    • Applets runs inside a web browser.

  • We will first study how to write Graphical applications

  ---

  ---

  ---

  ---

• JAVA Package to help you write graphical applications
  • Java includes in its library a vast amount of classes that allow you to write graphical applications/applets

  • In the first release of Java, the classes were in the "java.awt.*" package.

  • Starting in Java 2 , new (more powerful) classes were added and provided as the Java "SWING" package .

    ---

  • To ensue that you get all the graphical objects, it is best that you import both packages (but you may see in my examples that I sometimes omit the "java.awt.*" package...):

    import java.awt.*; import javax.swing.*;

  ---

  ---

  ---

  ---

• Top level window of a graphical applications
  • Graphical applications create windows as input and output areas to communicate with the user

    The windows are organized in a tree-structure

    ---

  • The root level window is the most complex

    (it has borders and a toolbar that the user can use to minimize, close and maximize the window)

  • The Java object used to create a top level window is the JFrame

    ---

  • Example of using JFrame:

    import javax.swing.*; public class DemoJFrame1 { public static void main(String args[]) { JFrame f = new JFrame("Hello World!"); // Make new JFrame object f.setSize(400, 300); // Set size of window f.setVisible(true); // Show window } }

  • Example Program: (Demo above code)                        
    • Prog file: click here

  ---

  ---

  ---

  ---

  ---

  ---

• The ContentPane of a JFrame
  • The JFrame object has many components

    We will focus on the components used for graphical programming

    ---

  • The ContentPane:

    The ContentPane is the panel component that is used in to place GUI components in the JFrame

    ---

  • GUI components that you can place (add) to the content pane in the JFrame include:

    lables (to label stuff) buttons (for selection) text boxes (great for text input and output) etc. etc.

  • Usually, the components are arrange nicely looking (neatly) inside the content pane

    (otherwise, people will hate your GUI)...

    ---

  • The key to a nice looking GUI is:

    Never draw directly onto the content pane of a JFrame Always use the content pane to arrange components

  • Analogy:

    the content pane is a canvas You are to stick objects (they are like post-it stickers) onto the content pane (canvas) ...

    ---

  • Example: "sticking" a label onto the content pane

    import javax.swing.*; public class DemoJFrame2 { public static void main(String args[]) { JFrame f = new JFrame("Hello World!"); f.setSize(400, 300); JLabel L = new JLabel("I am a label !"); f.getContentPane().add(L); // Stick label L on contentPane f.setVisible(true); } }

  • Example Program: (Demo above code)                        
    • Prog file: click here

  ---

  ---

  ---

  ---

  ---

  ---

• Categories of Graphical Components in Java
  • GUI objects:

    The GUI objects are objects that you can add ("stick") on a GUI window Some GUI objects are visible components - such as labels, buttons, etc Some GUI objects are invisible components - these components (containers) are used to arrange (organize) other GUI components

    ---

  • The GUI components are thus broadly categorized into two types

    Containers: they are used to hold (= organize) other containers and/or normal components The Container components are: JFrame (a heavy-weight framed window) This component is a root wondow (with bar on top for user to interact with the frame, e.g., minimize, close) JPanel (a light-weight plain window) Can be used for drawing (which we will not do) great for organizing GUI components (see below) ! (I like to think of a JPanel as a posit sticker :-)) "Normal" components: I called them "normal" for the lack of a better word :-) These components provide the actual GUI and interacts with user Some of these "normal" graphical components are: JLabel Used to display text, does not provide user interactions JButton Buttons with a label that you can press to cause a pre-defined action Text Area Text area can be used for input where you can enter text strings (good for entering query) Text area can also be used for output Scrollbars Horizontal and/or veritical bars that you can add to text areas to scroll the text in the area Pulldown menus Clickable tab to allow user to select from a number of pre-defined options (I will not discussed this component).

  ---

  ---

  ---

  ---

• What's ahead
  • If you ran the demo above, you will not be thrilled - the window looks very plain and the label is place in a very awkward location

  • As the saying goes that "beauty is skin deep", it take very little to make a fantastic looking graphical application nowadays - the hard work has been done by Java.

  • To make a good looking graphical application, you need to learn 2 skills:
    • Placing the components in the right places
    • Make the components active

  • We will first take a look at how to place the components in a nice looking way next.