JavaFX - címke - it-tanfolyam.hu

Kígyókocka grafikus felületen

2022. május 14.2017. augusztus 18. Szerző: Kaczur Sándor

A JavaFX grafikus felhasználói felületének és eseménykezelésének megvalósítása némileg eltér más Java GUI implementációk működésétől, például swing vagy Java3D. Főként animációk során hasznos használni. Megközelítése természetesen objektumorientált: a térbeli objektumok koordinátái, viselkedésük, transzformációkkal valósul meg, és azok is objektumok. A korábban elkészített konzolos kígyókocka programot valósítjuk meg most JavaFX GUI-val.

Ez egy két részből álló blog bejegyzés 2. része. A blog bejegyzés 1. része itt található.

A program működése

A program megvalósítása

A start() JavaFX életciklust indító eljárás felépíti a createGridUI() függvényt meghívva felhasználói felületet (színpad/jelenet JavaFX-ben), beállítva a méreteket, címsort, és meghívja az eseménykezelésért felelős handleRotateButtons() eljárást.

  @Override
  public void start(Stage stage) {
    StackPane root=new StackPane();
    root.getChildren().add(createGridUI());
    Scene scene=new Scene(root,
      DRAW_AREA.getWidth()+160, DRAW_AREA.getHeight()+146);
    stage.setTitle("Snake cube 2.0");
    stage.setScene(scene);
    stage.setResizable(false);
    stage.show();
    handleRotateButtons();
  }

@Override

public void start(Stage stage) {

StackPane root=new StackPane();

root.getChildren().add(createGridUI());

Scene scene=new Scene(root,

DRAW_AREA.getWidth()+160, DRAW_AREA.getHeight()+146);

stage.setTitle("Snake cube 2.0");

stage.setScene(scene);

stage.setResizable(false);

stage.show();

handleRotateButtons();

}

A createGridUI() függvény a grafikus felhasználói felület elemeit paraméterezi (szerepe szerint Factory metódus). Öt elemből álló rács ( GridPane osztályú grid nevű objektum) készül el, amelyre nyilakat tartalmazó nyomógombok (pl.: Button típusú btLeft objektum) kerülnek fel a négy égtájnak megfelelően, valamint rajta középen helyezkedik el a kígyókocka 3D megjelenítését megvalósító objektum. A nyilak entitásai az Unikód karaktertáblából származnak. A kígyókocka objektumot a meghívott createSnakeCube() függvény hozza létre. A Node osztályú snakeCube nevű objektum geometriai transzformációs objektumot is hozzá kell rendelni: ez most a négyirányú forgatást megvalósítani képes névtelen Rotate osztályú objektum lesz. A forgatást 5 paraméterrel célszerű beállítani (van rá megfelelő túlterhelt konstruktor), ezek rendre: szög, X, Y, Z tengely origója és a forgatás tengelye. Az objektumok tulajdonosi hierarchiája swing-es szemmel nézve szokatlannak tűnik, de szemléletben legalább azonos a Java3D és a JavaFX megvalósítás.

  private GridPane createGridUI() {
    String textStyle="-fx-font-size:32; -fx-text-fill: blue";
    btUp.setStyle(textStyle);
    btDown.setStyle(textStyle);
    btLeft.setStyle(textStyle);
    btRight.setStyle(textStyle);
    GridPane grid=new GridPane();
    grid.setHgap(10);
    grid.setVgap(10);
    grid.add(btUp, 1, 0);
    GridPane.setHalignment(btUp, HPos.CENTER);
    grid.add(btLeft, 0, 1);
    grid.add(btRight, 2, 1);
    grid.add(btDown, 1, 2);
    GridPane.setHalignment(btDown, HPos.CENTER);
    Pane drawSnakeCube=new Pane();
    drawSnakeCube.setPrefSize(
      DRAW_AREA.getWidth(), DRAW_AREA.getHeight());
    grid.add(drawSnakeCube, 1, 1);
    snakeCube=createSnakeCube();
    snakeCube.getTransforms().add(
      new Rotate(30, ORIGO.getX(), ORIGO.getY(), 0,
        new Point3D(1, 1.5, 1.5)));
    drawSnakeCube.getChildren().add(snakeCube);
    return grid;
  }

private GridPane createGridUI() {

String textStyle="-fx-font-size:32; -fx-text-fill: blue";

btUp.setStyle(textStyle);

btDown.setStyle(textStyle);

btLeft.setStyle(textStyle);

btRight.setStyle(textStyle);

GridPane grid=new GridPane();

grid.setHgap(10);

grid.setVgap(10);

grid.add(btUp, 1, 0);

GridPane.setHalignment(btUp, HPos.CENTER);

grid.add(btLeft, 0, 1);

grid.add(btRight, 2, 1);

grid.add(btDown, 1, 2);

GridPane.setHalignment(btDown, HPos.CENTER);

Pane drawSnakeCube=new Pane();

drawSnakeCube.setPrefSize(

DRAW_AREA.getWidth(), DRAW_AREA.getHeight());

grid.add(drawSnakeCube, 1, 1);

snakeCube=createSnakeCube();

snakeCube.getTransforms().add(

new Rotate(30, ORIGO.getX(), ORIGO.getY(), 0,

new Point3D(1, 1.5, 1.5)));

drawSnakeCube.getChildren().add(snakeCube);

return grid;

}

A createSnakeCube() függvény előállítja a színpadra/jelenetbe kikerülő kígyókockát Node osztályú objektumként. A konstans CUBE tömb egységvektor rendszerben tartalmazza a kígyót alkotó kockák középpontjait. Az első ciklus mindezt nagyítást alkalmazva skálázza. A második ciklus koordináta és pont transzformációk alkalmazásával ( moveToMidPoint: eltolás középre, rotateAroundCenter: forgatás a középpont körül) a kiinduló állapotnak megfelelő méretben és pozícióban elhelyezi a kígyó útvonalát mutató hengerobjektumokat. A konstrukciós és transzformációs műveletek esetén alkalmazkodni kell ahhoz, hogy a JavaFX koordinátarendszerben az X jobbra, az Y lefelé, a Z pedig befelé (a nézőponttól távolodva a térben) növekszik. A matematikai hátteret részletesen most nem magyarázzuk el.

  private Node createSnakeCube() {
    final int SCALE=100;
    final Point3D Y_AXIS=new Point3D(0, 1, 0);
    final int[][] CUBE=new int[][] {
      {-1, 1, -1},  {0, 1, -1},   {1, 1, -1},   {1, 1, 0},
      {1, 1, 1},    {0, 1, 1},    {-1, 1, 1},   {-1, 0, 1},
      {-1, -1, 1},  {0, -1, 1},   {0, 0, 1},    {1, 0, 1},
      {1, 0, 0},    {1, 0, -1},   {0, 0, -1},   {-1, 0, -1},
      {-1, -1, -1}, {-1, -1, 0},  {-1, 0, 0},   {-1, 1, 0},
      {0, 1, 0},    {0, 0, 0},    {0, -1, 0},   {0, -1, -1},
      {1, -1, -1},  {1, -1, 0},   {1, -1, 1}            
    };
    Point3D[] cube=new Point3D[CUBE.length];
    for(int i=0; i<cube.length; i++)
      cube[i]=new Point3D(
        CUBE[i][0]*SCALE, CUBE[i][1]*SCALE, CUBE[i][2]*SCALE);
    Group group=new Group();
    for(int i=0; i<cube.length-1; i++) {
      Point3D p1=cube[i];
      Point3D p2=cube[i+1];
      Point3D diff=p2.subtract(p1);
      double height=diff.magnitude();
      Point3D mid=p2.midpoint(p1);
      Translate moveToMidpoint=new Translate(
        ORIGO.getX()+mid.getX(), ORIGO.getY()+mid.getY(), mid.getZ());
      Point3D axisOfRotation=diff.crossProduct(Y_AXIS);
      double angle=Math.acos(diff.normalize().dotProduct(Y_AXIS));
      Rotate rotateAroundCenter=
        new Rotate(-Math.toDegrees(angle), axisOfRotation);
      Cylinder c=new Cylinder(5, height);
      c.getTransforms().addAll(moveToMidpoint, rotateAroundCenter);
      group.getChildren().add(c);
    }
    return group;
  }

private Node createSnakeCube() {

final int SCALE=100;

final Point3D Y_AXIS=new Point3D(0, 1, 0);

final int[][] CUBE=new int[][] {

{-1, 1, -1}, {0, 1, -1}, {1, 1, -1}, {1, 1, 0},

{1, 1, 1}, {0, 1, 1}, {-1, 1, 1}, {-1, 0, 1},

{-1, -1, 1}, {0, -1, 1}, {0, 0, 1}, {1, 0, 1},

{1, 0, 0}, {1, 0, -1}, {0, 0, -1}, {-1, 0, -1},

{-1, -1, -1}, {-1, -1, 0}, {-1, 0, 0}, {-1, 1, 0},

{0, 1, 0}, {0, 0, 0}, {0, -1, 0}, {0, -1, -1},

{1, -1, -1}, {1, -1, 0}, {1, -1, 1}

};

Point3D[] cube=new Point3D[CUBE.length];

for(int i=0; i<cube.length; i++)

cube[i]=new Point3D(

CUBE[i][0]*SCALE, CUBE[i][1]*SCALE, CUBE[i][2]*SCALE);

Group group=new Group();

for(int i=0; i<cube.length-1; i++) {

Point3D p1=cube[i];

Point3D p2=cube[i+1];

Point3D diff=p2.subtract(p1);

double height=diff.magnitude();

Point3D mid=p2.midpoint(p1);

Translate moveToMidpoint=new Translate(

ORIGO.getX()+mid.getX(), ORIGO.getY()+mid.getY(), mid.getZ());

Point3D axisOfRotation=diff.crossProduct(Y_AXIS);

double angle=Math.acos(diff.normalize().dotProduct(Y_AXIS));

Rotate rotateAroundCenter=

new Rotate(-Math.toDegrees(angle), axisOfRotation);

Cylinder c=new Cylinder(5, height);

c.getTransforms().addAll(moveToMidpoint, rotateAroundCenter);

group.getChildren().add(c);

}

return group;

}

A handleRotateButtons() eljárás a forgatás 4 nyíl eseménykezelésének hozzárendelést végzi el. A nyomógomb objektumok setOnAction() hozzárendelő metódusának paramétere EventHandler funkcionális interfésszel és lambda művelettel működik. A forgatás irányát hozzárendeljük a megfelelő nyomógombhoz. Ez még csak végrendelkezés a jövőre: csak definiáljuk, hogy minek kell majd történnie, ha bekövetkezik az esemény (valamelyik nyílra/nyomógombra kattint a felhasználó).

  private void handleRotateButtons() {
    btUp.setOnAction((event) -> { rotateSnake(Pos.TOP_CENTER); });
    btDown.setOnAction((event) -> { rotateSnake(Pos.BOTTOM_CENTER); });
    btLeft.setOnAction((event) -> { rotateSnake(Pos.CENTER_LEFT); }); 
    btRight.setOnAction((event) -> { rotateSnake(Pos.CENTER_RIGHT); });
  }

private void handleRotateButtons() {

btUp.setOnAction((event) -> { rotateSnake(Pos.TOP_CENTER); });

btDown.setOnAction((event) -> { rotateSnake(Pos.BOTTOM_CENTER); });

btLeft.setOnAction((event) -> { rotateSnake(Pos.CENTER_LEFT); });

btRight.setOnAction((event) -> { rotateSnake(Pos.CENTER_RIGHT); });

}

A rotateSnake() eljárás minden nyíl feliratú nyomógombra kattintva reagál a bekövetkezett eseményre. A rotateAxis objektum a forgatás tengelye, a paraméterként átvett direction enum-tól függ, szinkronban azzal a nyomógombbal, amelyikre kattintott a felhasználó.

Ötletek a továbbfejlesztésre

Lehetne többféle irány is, például a négy sarokba átlós vagy mélységi irányú elforgatással.
Beépülhetne többféle transzformáció is, például skálázás (kicsinyítés, nagyítás), eltolás (közelítés, távolítás).
A kígyó útvonalát mutató hengerobjektumok kirajzolásának sorrendjén lehetne változtatni, mert a megjelenítés nem tökéletes. Jelenleg néhány helyzetben lehetetlennek, Escher lehetetlen konstrukcióihoz hasonlónak tűnhet a kígyókocka. Ha a tér mélységéből a nézőpont felé közeledve rajzolnánk ki a hengerobjektumokat, akkor a 3D látvány nem sérülne.

Tanfolyamainkon JavaFX grafikus felülettel hangsúlyosan nem foglalkozunk, de egy-egy kész forráskódot közösen megbeszélünk, és össze is hasonlítjuk a swing-es változattal. Fejlesztünk játékprogramot, de inkább konzolosan, vagy swing-es ablakban, vagy webes alkalmazásként.

A grafikus felületek felépítésének megismerése fontos lépcső az objektumorientált programozás elmélyítéséhez, gyakorlásához. A grafikus felületekhez egy másik lényeges szemléletváltás is kapcsolódik, hiszen a korábbi algoritmusvezérelt megközelítést felváltja az eseményvezérelt (eseménykezelés).

Tudatosan hangsúlyozott MVC-s projektben megoldva a feladatot, a modell rétegben tárolhatnánk többféle kígyókocka megjelenítéséhez és animációjához szükséges adatszerkezetet és transzformációs objektumokat/metódusokat is és a nézet/vezérlő rétegekben biztosíthatnánk ezek közül a kijelölést/kiválasztást menüvel, ikonokkal, eszköztárral, gyorsbillentyűkkel.

A bejegyzéshez tartozó teljes forráskódot ILIAS e-learning tananyagban tesszük elérhetővé tanfolyamaink résztvevői számára.

Tanfolyamaink orientáló moduljának 9-12. óra: Mesterséges intelligencia alkalmához kapcsolódóan a kígyókocka véletlenszerű előállítása helyett stratégiával rendelkező visszalépéses algoritmust specifikálhatunk és implementálhatunk.

Ez egy két részből álló blog bejegyzés 2. része. A blog bejegyzés 1. része itt található.

Hello World! másképpen

2020. július 19.2017. június 20. Szerző: Friedel Attila

Hello World! - Piet programozási nyelven

A programozási nyelvek tanulásának első lépése a „Hello World!” szintaktikájának megismerése, és egyben teszt arra is, hogy megfelelő-e a fejlesztői környezet telepítése, konfigurálása. Megjelenik-e a „Hello World!” a konzolon, felbukkanó ablakban, önálló ablakban, weblapon, üzenetben? Mit kell ezért tenni? Néhány Java példát nézünk erre.

1. Konzolos megoldás

Ez a kiinduló állapot. Futtatva a programot, a konzolon jelenik meg a szöveg.

public class Hello1 {
  public static void main(String[] args) {
    System.out.println("Hello World!");
  }
}

public class Hello1 {

public static void main(String[] args) {

System.out.println("Hello World!");

}

2. Swing 1. megoldás

Itt felbukkanó párbeszédablakban jelenik meg a szöveg. A JOptionPane ablaka itt önálló, így nincs olyan szülője/tulajdonosa ( null), ahonnan elveheti a fókuszt.

import javax.swing.JOptionPane;

public class Hello2 {
  public static void main(String[] args) {
    JOptionPane.showMessageDialog(null, "Hello World!");
  }
}

import javax.swing.JOptionPane;

public class Hello2 {

public static void main(String[] args) {

JOptionPane.showMessageDialog(null, "Hello World!");

}

3. Swing 2. megoldás

Itt egy testre szabott JFrame utód készül, alapvető beállításokkal. Az ablak címsorában jelenik meg a szöveg. Az ablak saját magát példányosítja és főablakként viselkedik, vagyis gondoskodik saját maga láthatóságáról, fókusz- és eseménykezeléséről (utóbbi 2 most nincs).

import javax.swing.JFrame;

public class Hello3 extends JFrame {
  public Hello3() {
    setDefaultCloseOperation(EXIT_ON_CLOSE);
    setSize(400, 200);
    setTitle("Hello World!");
    setVisible(true);
  }
 
  public static void main(String[] args) {
    new Hello3();
  }
}

import javax.swing.JFrame;

public class Hello3 extends JFrame {

public Hello3() {

setDefaultCloseOperation(EXIT_ON_CLOSE);

setSize(400, 200);

setTitle("Hello World!");

setVisible(true);

}

public static void main(String[] args) {

new Hello3();

}

4. JavaFX megoldás

Itt egy testre szabott Application utód készül, minimál beállításokkal. Az ablak címsorában jelenik meg a szöveg. Az ablak saját magát példányosítja és főablakként viselkedik.

import javafx.application.Application;
import javafx.stage.Stage;

public class Hello4 extends Application {
  @Override
  public void start(Stage primaryStage) {
    primaryStage.setTitle("Hello World!");
    primaryStage.show();
  }

  public static void main(String[] args) {
    launch(args);
  }
}

import javafx.application.Application;

import javafx.stage.Stage;

public class Hello4 extends Application {

@Override

public void start(Stage primaryStage) {

primaryStage.setTitle("Hello World!");

primaryStage.show();

}

public static void main(String[] args) {

launch(args);

}

5. Applet megoldás

Böngészőben fut a testre szabott JApplet utód. A weblapon elfoglalt téglalap alakú területen vízszintesen balra és függőlegesen középen jelenik meg a címke komponensben a szöveg.

import javax.swing.JApplet;
import javax.swing.JLabel;

public class Hello5 extends JApplet {
  @Override
  public void init() {
    add(new JLabel("Hello World!"));
  }
}

import javax.swing.JApplet;

import javax.swing.JLabel;

public class Hello5 extends JApplet {

@Override

public void init() {

add(new JLabel("Hello World!"));

}

6. JSP 1. megoldás

Ez egy JSP weboldal automatikusan generált forráskódja. Böngészőben jelenik meg a szöveg.

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Hello World!</h1>

</body>

</html>

7. JSP 2. megoldás

Ez egy JSP weboldal egyszerű direktívával a h1 címsorban.

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
  </head>
  <body>
    <h1><%="Hello World!"%></h1>
  </body>
</html>

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

8. Servlet megoldás

Itt egy szervlet által generált weboldal, amely fixen tartalmazza a szöveget.

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet(urlPatterns = {"/Hello6"})
public class Hello6 extends HttpServlet {

  protected void processRequest(
      HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    response.setContentType("text/html;charset=UTF-8");
    try(PrintWriter out=response.getWriter()) {
      out.println("<!DOCTYPE html>");
      out.println("<html>");
      out.println("<head>");
      out.println("<title>Servlet Hello6</title>");      
      out.println("</head>");
      out.println("<body>");
      out.println("<h1>Hello World!</h1>");
      out.println("</body>");
      out.println("</html>");
    }
  }
...
}

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@WebServlet(urlPatterns = {"/Hello6"})

public class Hello6 extends HttpServlet {

protected void processRequest(

HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html;charset=UTF-8");

try(PrintWriter out=response.getWriter()) {

out.println("<!DOCTYPE html>");

out.println("<html>");

out.println("<head>");

out.println("<title>Servlet Hello6</title>");

out.println("</head>");

out.println("<body>");

out.println("<h1>Hello World!</h1>");

out.println("</body>");

out.println("</html>");

}

...

}

9. Atipikus 1. megoldás

„Adatbázisból is lekérdezhető” a szöveg.

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;

public class Hello7 {

  public static void main(String[] args) {
    try {
      Class.forName("oracle.jdbc.driver.OracleDriver");
      Connection c=DriverManager.getConnection(
        "jdbc:oracle:thin:@localhost:1521:xe", "HR", "hr");
      ResultSet rs=c.createStatement().executeQuery(
        "SELECT 'Hello World!' FROM DUAL");
      rs.next();
      System.out.println(rs.getString(1));
      c.close();
    }
    catch(SQLException | ClassNotFoundException e) {
      e.printStackTrace();
    }
  }
}

import java.sql.Connection;

import java.sql.DriverManager;

import java.sql.ResultSet;

import java.sql.SQLException;

public class Hello7 {

public static void main(String[] args) {

try {

Class.forName("oracle.jdbc.driver.OracleDriver");

Connection c=DriverManager.getConnection(

"jdbc:oracle:thin:@localhost:1521:xe", "HR", "hr");

ResultSet rs=c.createStatement().executeQuery(

"SELECT 'Hello World!' FROM DUAL");

rs.next();

System.out.println(rs.getString(1));

c.close();

}

catch(SQLException | ClassNotFoundException e) {

e.printStackTrace();

}

10. Atipikus 2. megoldás

Ebben az esetben a Java nyelv által biztosított véletlenszám generáló osztályra támaszkodva állítjuk elő a szöveget. Mivel a random objektum által előállított számok csupán a véletlenség látszatát keltik, de valójában egy algoritmus szerint készülnek, ezért előre teljes pontossággal megjósolható a kimenet. Csupán meg kell találni azt a kezdőértéket, ami után „véletlenül” pont a h, e, l, l, o betűk fognak következni. Megismételve a folyamatot egy másik kezdőértékkel, megkapjuk a w, o, r, l, d betűket is.

import java.util.Random;

public class Hello8 {
  static String randomString(int seed) {
    Random random=new Random(seed);
    StringBuilder word=new StringBuilder();
    int i;
    while((i=random.nextInt(27))!=0)
      word.append((char)('`' + i));
    return word.toString();
  }

  public static void main(String[] args) {
    String hello=randomString(-229985452);
    String world=randomString(-147909649);
    System.out.println(hello+" "+world);
  }
}

import java.util.Random;

public class Hello8 {

static String randomString(int seed) {

Random random=new Random(seed);

StringBuilder word=new StringBuilder();

int i;

while((i=random.nextInt(27))!=0)

word.append((char)('`' + i));

return word.toString();

}

public static void main(String[] args) {

String hello=randomString(-229985452);

String world=randomString(-147909649);

System.out.println(hello+" "+world);

}

A bejegyzéshez tartozó teljes forráskódot – több projektben – ILIAS e-learning tananyagban tesszük elérhetővé tanfolyamaink résztvevői számára.

A példák a Java SE szoftverfejlesztő tanfolyam, a Java EE szoftverfejlesztő tanfolyam és a Java adatbázis-kezelő tanfolyam több alkalmához is kötődnek (kivéve 4. és 5.).

Hivatkozások a témakörben, amelyek más programozási nyelvek példáit is tartalmazzák: