Pre-Intro to Applet Programming/Intro to Graphical Programming


Before we take a look at applets, let's take a look at a Java Graphical Application

  1. Types of Java programs:

  2. Graphical applications and applets are very similar.

    But a lot of necessary preparations needed to do graphical output is done already by the browser

    So we will first take a look at a graphical applications

  3. Every graphical application puts up one or more framed windows: Java Frame

    The object class representing a framed windows is JFrame

  4. JFrame: Java Frame

    Documentation for javax.swing.JFrame: click here


    Example program to show an empty frame:
      import javax.swing.JFrame;
    
      public class DemoJFrame
      {
         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.show();                              // Show window
          }
      }
    

    Here's the source code: click here

    NOTE: Java graphical applications starts execution at the main() method

  5. A JFrame is a very complex object and is constructed with other objects

    The object in a JFrame that is most useful for window programming is: the CONTENT PANE object

    The content pane object is used to arrange components (objects) (like "buttons", "labels", etc - later) inside the frame

    You must NEVER draw directly onto the content pane of a JFrame

  6. Drawing on a Frame is accomplish by placing graphical objects onto the content pane of the Frame

    Obtaining the content pane of Frame F:
    • F.getContentPane()

    Placing a graphical object X on the content pane:

    • F.getContentPane().add(X)

  7. Example:

    Example drawing a "label"
    import javax.swing.*; <-- Import the necessary class
    import java.awt.*;
    
    public class DemoJFrame2
    {
       public static void main(String args[])
        {
          JFrame f = new JFrame("Hello World!");
          f.setSize(400, 300);
    
          // A JLabel is a "label" object with a text string.
          JLabel L = new JLabel("Man, this is way cool !");
    
          f.getContentPane().add(L); // Put label L on contentPane
    
          f.show();
        }
    }
    

    NOTE: add(L) adds L to f's content pane.
                    f.show() will show everything on F's content pane.

    Here is the DEMO program: click here

    A more advanced DEMO program: click here


    Drawing Pictures

  8. All graphical components that you add on to the content pane have pre-defined shapes and function

    In X-window graphical programming, these graphical components are known as widgets

    You have seen one widget: the JLabel component

  9. Another widget: JPanel

    ......is a "drawable" object specially designed for direct drawing

    ......is also a "container" object - like JFrame - designed for arranging things (double duty)

    When you first create a JPanel, the panel (canvas) is completely empty

  10. Coordinate System on Panels:


  11. Graphical Context


    To show a line or any drawing, you need to know some graphical information:

    The "Graphical Context" are the graphical state information needed to draw
    (technical term for drawing is rendering)

    A Graphics object class in Java encapsulates Graphical Context needed for rendering operations.

    A Graphics object class also contains rendering operations themselves.

  12. Java 2 introduced a more powerful graphical context class Graphics2D (extends Graphics)

    When programming in Java 2, you should always "recover" the Graphics2D from a Graphics by casting:
    • Graphics2D g2 = (Graphics2D) g;

  13. Drawing on a JPanel:

    To draw shapes in the graphical context g2, use:
    • g2.draw(Shape)

    To draw filled shapes in the graphical context g2, use:

    • use: g2.fill(Shape)

    To "draw" a Text String in the graphical context g2, use:

    • use: g2.drawString(Text, x, y) (more later)

  14. The Java Rendering System will call the widget (component)'s paintComponent(Graphics g) when it needs to render a graphical object.

    NOTE: the Java Rendering System passes a graphical context g for you to use in performing the drawing operations (recall that all drawing are done under some graphical context)

    THUS, to make a drawing on a JPanel object, you must define a paintComponent(Graphics g) in a class that extends JPanel


    Example class that draws 2 rectangles on a JPanel:
       class myPicture extends JPanel  <-- must "extends" JPanel
       {
          public void paintComponent(Graphics g) <-- MUST define paintComponent()
           {
             // **************************************
             // Necessary preparation statements...
             // **************************************
             super.paintComponent(g);         <--- will be explained later !
             Graphics2D g2 = (Graphics2D) g;  <--- recovers Graphics2D
    
             // *************************************************
             // Actual drawing instructions... (looks familiar ?)
             // *************************************************
    
             // construct a rectangle and draw it
             Rectangle cerealBox = new Rectangle(5, 10, 20, 30);
             g2.setColor(Color.red); // Change pen color in graph. context g2 !
             g2.draw(cerealBox);
    
             // move rectangle 15 units sideways and 25 units down
             cerealBox.translate(15, 25);
             g2.setColor(Color.blue);    // Change color to blue
             g2.fill(cerealBox); 
           }
       }
    

    In order to show the drawing made by the myPicture class, we must put a myPicture object in a JFrame

  15. Putting a myPicture object in a JFrame:

    ......it is exactly like putting a label on the content frame:


    public class DemoJFrame { public static void main(String args[]) { JFrame f = new JFrame("Hello World!"); // Make new JFrame object f.setSize(400, 300); // Set size of window myPicture x = new myPicture(); // Make a myPicture object f.getContentPane().add(x); // Add myPicture x to f's contentPane f.show(); // Show window } }

    Here's a DEMO program: click here