JavaFX - címke - it-tanfolyam.hu

Multimédia az oktatásban 2022

2023. január 3.2022. július 7. Szerző: Kiss Balázs

A Neumann János Számítógép-tudományi Társaság (NJSZT) „Multimédia az oktatásban” Szakosztály által – évente – szervezett XXVIII. Multimédia az oktatásban nemzetközi konferencia hibrid (jelenléti és online) formában került megrendezésre 2022. július 6-7-én.

A konferencia célja

A szakmai rendezvény célja, hogy elősegítse az oktatás, valamint a kutatás és fejlesztés különböző területein dolgozó, oktató hazai és külföldi szakemberek, PhD és felsőoktatási hallgatók kapcsolatfelvételét, tapasztalatok és jó gyakorlatok cseréjét, egyes képzési szakterületekhez kapcsolódó kreditek gyűjtését.

28 témakörben hirdették meg az előadóknak a jelentkezési lehetőséget, köztük néhány hozzánk kötődő

élethelyzethez igazított tanulás,
a multimédia alkalmazása a felsőoktatásban és a felnőttképzésben,
mLearning, eLearning és környezete,
a tanulási környezet technikai, technológiai változása,
felhőalapú szolgáltatások,
multimédia és a tudományos kutatás összefonódása,
multimédia-fejlesztések, eredmények, alkalmazások bemutatása.

A konferencia programja

Letölthető a konferencia programja. A konferencia az Eszéki Josip Juraj Strossmayer Egyetem Bölcsészettudományi Karáról (University of Osijek) élő közvetítésben zajlott Teams-en. 2 nap alatt 10 szekcióban 30 előadás hangzott el, valamint sor került plenáris előadásokra és műhelymunkára is.

Részt vettünk a konferencián

Oktatóink rendszeresen részt vesznek az MMO konferencián. Szakmai blogunkban több beszámoló is van, lásd MMO címke. Kaczur Sándor oktatónk publikációs listájában szerepelnek a megjelent szakmai cikkek. Jövőre is szívesen csatlakozunk a rendezvényhez.

2022-ben Sándor két előadást tartott előadást tartott 20-20 percben, amelyek a konferencia „Multimédia-fejlesztések, eredmények, alkalmazások bemutatása” című szekciójába kerültek. Az előadások prezentációit ILIAS e-learning tananyagban tesszük elérhetővé tanfolyamaink résztvevői számára. Négy szerző (köztük én is 🙂 ) együttműködésével elkészült egy 5 és egy 7 oldalas szakmai cikk is, amelyek elérhetők a konferencia kiadványban.

Szakmai cikkeink összefoglalói

Kaczur Sándor, Szegedi Kristóf, Bánki Benedek: Variációk egy témára – Szilassi-poliédert megjelenítő grafikus programok fejlesztése

A számítógépes grafika alkalmazásának egyik speciális területe az, amikor saját fejlesztésű, egyedi grafikus objektumokat jelenítünk meg. Ehhez szükséges néhány előismeret, például: modelltér, különböző koordinátarendszerek, grafikus primitívek, grafikus 2D és 3D leképezések, vetítő algoritmusok, vászontechnika, koordináta- és ponttranszformációk. Ezekre építve a továbblépést a következők megismerése biztosítja: adott programozási nyelv(ek) beépített grafikus képességei, korlátai, sajátosságai, osztálykönyvtárai, kiegészítő API-jai, plugin-jai. Természetesen a grafikus fejlesztés megvalósítása objektumorientált megközelítéssel, életciklus modellben, MVC architekturális tervezési mintával, eseménykezelés alkalmazásával történik – hiszen a korszerű megközelítés és az interakció alapkövetelmény.

Az előadás/cikk ismerteti a feladatspecifikációt, majd egy közös koncepcionális tervet mutat be. A cél a Szilassi-poliéder megjelenítése saját fejlesztésű, egyedi grafikus objektumként. Elkészült többféle fejlesztői környezetben és többféle programozási nyelven néhány implementáció Java és Unity alapon. Az előadás/cikk bemutatja az elkészült esettanulmányokat, elemzi, teszteli, össze is hasonlítja azokat és megfogalmaz néhány továbbfejlesztési lehetőséget.

Kaczur Sándor, Kiss Balázs: Tankockák – Java szoftverfejlesztésben használt interaktív tanulási környezet

A 20. századig három jellegzetes pedagógiai paradigma és ezeknek megfelelő didaktikai rendszer alakult ki: ismeretátadás, szemléltetés és cselekedtetés. Két kérdés merül fel: milyen szerepük van a tanításban ezeknek, illetve milyen a tanítási-tanulási folyamatban a tanár és tanuló szerepe.
A 21. században megjelenő folyamatok – a résztvevők együttműködve közös tudásobjektumot alkotnak és a megosztásra alapozva a hálózatiság élményét kapják – következménye a negyedik didaktikai paradigma, amelynek kulcsszavai: hálózatalapú tanulási formák, konnektivizmus, hipertanulás, e-learning.

Nahalka szerint a „tanítási – tanulási folyamat terve, az értékelési technikái, az elképzelt tanulási folyamat elképzelt logikája, koncepcionális háttere, a munka megszervezésének körülményei, azok a speciális eljárások, amelyeket az elképzelt folyamatban fel kívánunk használni, a gyermekek közötti, valamint a pedagógus – gyermek interakciók jellege, lehetőségei, a felhasznált információhordozók és más eszközök egy rendszert alkotnak”. Ez a negyedik paradigma tanulási környezete, amelynek biztosíthatnak egyéni és csoportos, offline és online tanulást, számítógéppel segített tanulást vagy kommunikációt, valamint aszinkron és szinkron kommunikációt. Prensky megalkotta a „digitális bennszülött” és „digitális bevándorló” fogalmait. Jukes és Dosaj ezekre alapozva meghatározta a „született digitális tanuló” és az „emigráns digitális tanár” jellemzőit.

Az előadás és a cikk egyrészt ismerteti a fenti folyamat tipikus mérföldköveit. Másrészt pozicionálja, hol tart ebben a folyamatban az it-tanfolyam.hu oktatói csapata az e-learning tananyagaik és online tartalmaik tekintetében. Harmadrészt bemutatásra kerül 12 db tankocka – interaktív tanulási környezetként –, amelyek elérhetőek az it-tanfolyam.hu szakmai blogban. Ezek élményszerű tanulást biztosító gamifikációs elemek, interaktív, weboldalakba ágyazható kisalkalmazások, amelyek kiválóan használhatók gyakorlásra, rendszerező összefoglalásra Java szoftverfejlesztés, Java programozás témában.

Kígyókocka grafikus felületen

2023. január 1.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 a 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();

}

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;

}

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;

}

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); });

}

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

2023. január 1.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!");

}

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!");

}

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();

}

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);

}

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!"));

}

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>

</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>

</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>");

}

...

}

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();

}

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);

}

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: