L'objectiu d'aquesta pràctica és començar a usar els conceptes de Classe i Objecte. Consisteix en desenvolupar una aplicació que mostri un dibuix simple fet amb figures geomètriques.

Al dibuix veiem una casa (mur, teulada i finestra) sobre la terra i un sol al cel.

El dibuix es composarà dels següents Objectes: sun, sky, earth, wall, window y roof

Aquests objectes estaran classificats en les següents Classes: Circle, Rectangle y Triangle

Inicia IntelliJ i crea un nou projecte:

Recorda marcar la opció "Create project from template" i selecciona la plantilla "Command Line App":

Posa-li el nom DadesCompostes:

Per a crear objectes, primer s'ha de definir la classe. A partir de la classe es creen els objectes.

Començarem per l'objecte sun, que és de la classe Circle.

Fes clic-dreta sobre el package com.company, i selecciona les opcions New > Java class:

Com a nom de la Classe introdueix Circle

Polsa OK.

Observa que s'ha creat el fitxer Circle.java, amb la definició de la classe Circle:

class Circle {
}

Un cop definida la classe Circle, es poden crear objectes d'aquesta classe. Anem a crear l'objecte sun:

Ves l'arxiu Main.java i dintre del mètode main afegeix el códi per a crear l'objecte sun.

public class Main {
   public static void main(String[] args) {
       Circle sun = new Circle();
   }
}

Definirem l'estat dels objectes de classe Circle (com l'objecte sun), amb els següents camps:

Ves a l'arxiu Circle.java i afegeix els següents camps a la classe Circle:

public class Circle {
   int radius;
   int positionX;
   int positionY;
   Color color;
}

Hauràs notat que la paraula Color apareix en vermell. És degut a que no està definida la classe Color. No obstant, aquesta classe no la crearem nosaltres, sinò que la usarem de la biblioteca java.awt

Per a importar la classe Color de la biblioteca java.awt segueix aquestes passes:

  1. Coloca el cursor sobre la paraula Color
  2. Mou el cursor amb les fletxes del teclat
  3. Quan la paraula Color estigui subratllada, apareixerà un missatge blau sobre ella. Polsa Alt+Intro
  4. Apareixerà una llista a sota amb les biblioteques que inclouen la classe Color. Selecciona la biblioteca Color (java.awt)

Ara l'objecte sun ja té els camps de la classe Circle, així que podem definir el seu estat.

Ves a l'arxiu Main.java i assigna els següents valors als camps que defineixen l'estat de l'objecte sun:

public class Main {
   public static void main(String[] args){
       Circle sun = new Circle();
       sun.radius = 40;
       sun.positionX = 440;
       sun.positionY = 50;
       sun.color = Color.YELLOW;
   }
}

Ja tenim creat l'objecte sun, i hem definit el seu estat.

Per a dibuixar els objectes a la pantalla utilizarem la Classe JFrame, de la biblioteca gràfica Swing, per a crear una finestra que serà el nostre llenç (canvas). De moment no és necesari que comprenguis aquesta Classe. Simplement copia i enganxa.

Crea una Classe nova anomenada Canvas i escriu en ella el següent codi:

import javax.swing.*;
import java.awt.*;
import java.util.ArrayList;
import java.util.List;

public class Canvas extends javax.swing.JPanel {
   static Canvas canvas;
   static List<Object> objects = new ArrayList<>();

   public Canvas() {
       JFrame frame = new JFrame();
       frame.add(this);
       frame.setSize(600, 400);
       frame.setVisible(true);
       frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
   }

   @Override
   public void paint(Graphics g) {
       for(Object o: objects) try {
           Class c = o.getClass(); String n = c.getName();
           if(!n.endsWith(".Circle")&&!n.endsWith(".Rectangle")&&!n.endsWith(".Triangle"))continue;
           int x = (int) c.getDeclaredField("positionX").get(o);
           int y = (int) c.getDeclaredField("positionY").get(o);
           g.setColor((Color) c.getDeclaredField("color").get(o));
           if (n.endsWith(".Circle")) {
               int r = (int) c.getDeclaredField("radius").get(o);
               g.fillOval(x, y, r * 2, r * 2);
           } else {
               int w = (int) c.getDeclaredField("width").get(o);
               int h = (int) c.getDeclaredField("height").get(o);
               if (n.endsWith(".Rectangle")) g.fillRect(x, y, w, h);
               else g.fillPolygon(new int[]{x,x+w/2,x+w},new int[]{y+h,y,y+h},3);
           }
       } catch (Exception e){ e.printStackTrace(); }
   }

   public static void draw(Object c) {
       if(canvas==null) canvas = new Canvas();
       objects.add(c);
   }
}

Usa la classe Canvas per a dibuixar les figures

Afegeix al mètode main el següent codi:

Canvas.draw(sun);

Executa el programa

Polsa sobre el botó Run (o Mayus+F10):

Seguim amb la resta d'objectes del nostre dibuix.

Seguim amb els objectes window i earth. Com són de la Classe Circle, que ja està definida, ja podem crear-los.

Afegeix el següent codi al mètode main (just a continuació del codi de l'objecte sun):

public class Main {
   public static void main(String[] args){
       Circle sun = new Circle();
       sun.color = Color.YELLOW;
       sun.positionX = 440;
       sun.positionY = 50;
       sun.radius = 40;

       Circle window = new Circle();
       window.color = Color.GRAY;
       window.positionX = 240;
       window.positionY = 215;
       window.radius = 10;

       Circle earth = new Circle();
       earth.color = Color.GREEN;
       earth.positionX = -300;
       earth.positionY = 250;
       earth.radius = 600;
   }
}

Usa la classe Canvas per a dibuixar les figures

Afegeix al mètode main el següent codi:

Canvas.draw(earth);
Canvas.draw(window);

Un cop creats tots els objectes de tipus cercle, seguirem amb els rectangles (wall, sky) i triangles (roof).

Crea les classes Rectangle i Triangle, i afegeix en elles els camps que defineixen el seu estat.

public class Rectangle {
   int width;
   int height;
   int positionX;
   int positionY;
   Color color;
}
public class Triangle {
   int width;
   int height;
   int positionX;
   int positionY;
   Color color;
}

Torna a l'arxiu Main.java i afegeix el següent codi:

Rectangle wall = new Rectangle();
wall.width = 100;
wall.height = 80;
wall.positionX = 200;
wall.positionY = 200;
wall.color = Color.WHITE;

Rectangle sky = new Rectangle();
sky.width = 600;
sky.height = 400;
sky.positionX = 0;
sky.positionY = 0;
sky.color = Color.CYAN;

Triangle roof = new Triangle();
roof.width = 100;
roof.height = 50;
roof.positionX = 200;
roof.positionY = 150;
roof.color = Color.RED;

Usa la Classe Canvas per a dibuixar les figures

Afegeix al mètode main el següent codi:

Canvas.draw(sky);
Canvas.draw(wall);
Canvas.draw(roof);

Les Classes es poden entendre com una plantilla a partir de la qual es poden crear Objectes. Cada Objecte és una còpia diferent de la plantilla. Per tant cada Objecte té una còpia dels camps que s'han definit a la Classe. Es poden assignar diferents valors a cada camp de cada Objecte de forma independent.

El següent gràfic explica les Classes i Objectes que s'han creat per a fer el dibuix:

Els objectes s'emmagatzemen a la memòria de l'ordinador. Com és evident, a la memòria no s'hi poden dibuixar cercles, rectangles, ni triangles. En realitat el que s'està emmagatzemant en memòria és la informació sobre aquests objectes, és a dir els valors dels seus camps. Una representació més adequada dels objectes seria aquesta: