MVC - címke - Oldal 3 a 3-ből

Digitális Témahét 2018

2023. március 20.2018. április 13. Szerző: Kaczur Sándor

A Digitális Témahét 2016-ban indult országos rendezvénysorozat. Fő célja a digitális pedagógia módszertanának népszerűsítése és elterjesztése. A program fontos törekvése, hogy a digitáliskompetencia-fejlesztés az informatikán túl kiterjedjen más tantárgyakra is. A résztvevő pedagógusok és diákok változatos és kreatív iskolai projektek keretében fejleszthetik képességeiket technológiával támogatott tanulás során. A Digitális Témahét rendezvény minden meghirdetett programja ingyenes. A 2016/2017-es tanévben több mint ezer intézmény csatlakozott a programhoz, 7600 tanár és 129000 diák közel 3500 digitális projektet valósított meg. Miről szól egy digitális pedagógiai projekt? Projektpedagógiáról, csapatmunkáról, tantárgyak integrációjáról, kreatív alkotómunkáról, az önálló gondolkodás fejlesztéséről, IT eszközök helyes használatáról, digitális készségek fejlesztéséről, a lehetőségek kitágításáról.

A 2017/2018-as tanévben a rendezvény április 9-13. között valósult meg. Kiemelt témakörök/szempontok:

a multidiszciplináris megközelítés: a matematika, a természet- és mérnöki tudományok, valamint a művészet- és társadalomtudományok együttes megjelenítése;
a tanítás eszközkészletének és módszereinek megújítása;
a pedagógiai innováció, a digitális pedagógia ösztönzése;
az informatikai pályaorientáció.

Az it-tanfolyam.hu 2018-ban csatlakozott a rendezvénysorozathoz. Meghirdettünk öt programot a https://digitalistemahet.hu weblapon. A programjainkra 2018. április 13-án 18:00-21:00 óráig került sor. A részvétel ingyenes, de előzetes regisztrációhoz kötött volt.

Rendezvényünk plakátja

Köszönöm oktató kollégáimnak, hogy örömmel csatlakoztak szakmai előadással, interaktív pályaorientációs beszélgetéssel. Jól éreztük magunkat. A program szoros menetrendben zajlott. A szünetekben élénk szakmai párbeszéd alakult ki. Köszönjük a részvevő érdeklődőinknek, hogy eljöttek és aktívan közreműködtek. Jövőre is szívesen csatlakozunk a Digitális Témahét rendezvénysorozathoz.

JFreeChart grafikon készítése

2025. június 15.2017. november 5. Szerző: Kaczur Sándor

XML formátumban megkapott adatokat grafikonon jelenítünk meg. 5 összetartozó adat/tulajdonság sorozatát dolgozzuk fel: JOB_TITLE, EMPLOYEE_COUNT, MIN_SALARY, AVG_SALARY, MAX_SALARY. Az adatforrásban egyszerű életpálya modell szerint munkakörönként meghatározott az adható minimális és maximális fizetés (ez a 3 adat közvetlenül rendelkezésre áll). Minden alkalmazottra teljesül, hogy a fizetése beletartozik ebbe a zárt intervallumba. Az adatforrás feldolgozása során COUNT és AVG aggregáló függvényekkel előállítjuk – munkakörönként csoportosítva – az alkalmazottak létszámát és átlagfizetését (ez a további 2 adat). Az Oracle HR sémából lekérdezve 19 munkakört kapunk, így az XML fába is ennyi <JOB_STAT> csomópont kerül. A megfelelő pillanatban rendelkezésre álló 5 összetartozó adat exportálható XML formátumba az alábbiak szerint:

<JOB_STAT>

<JOB_TITLE>Sales Representative</JOB_TITLE>

<EMPLOYEE_COUNT>30</EMPLOYEE_COUNT>

<MIN_SALARY>6000</MIN_SALARY>

<AVG_SALARY>8350</AVG_SALARY>

<MAX_SALARY>12000</MAX_SALARY>

</JOB_STAT>

Az elkészült grafikon így jelenik meg:

A JFreeChart típusú grafikont az alábbi forráskóddal készítettük el:

CategoryDataset cd=DatasetUtilities.createCategoryDataset(

legends, jobTitleCountEmployees, datas);

CategoryPlot cp=new CategoryPlot(

cd, new CategoryAxis("Munkakör és létszám"),

new NumberAxis("Fizetés"), new LayeredBarRenderer());

cp.setOrientation(PlotOrientation.HORIZONTAL);

ChartPanel chart=new ChartPanel(new JFreeChart(

"Fizetés alakulása munkakörönként", cp));

A grafikon rendelkezik vizuális komponens mögötti adatmodellel, hiszen MVC szerkezetű komponens. Ez egy CategoryDataset típusú objektum. Ennek factory metódusa három paramétert vár: a jelmagyarázatot (rowKeys – legends), az Y tengelyen megjelenő feliratokat (columnKeys – jobTitleCountEmployees) és az adatokat (data – datas). Az első 3 elemű String[]: "Maximum fizetés", "Átlagfizetés", "Minimum fizetés". A második 19 elemű szöveges tömb: "Accountant (5 fő)", "Accounting Manager (1 fő)", …, "Stock Manager (5 fő)". A harmadik 3*19-es méretű kétdimenziós double típusú tömb, a megjelenítendő értékekkel: {{9000, 7920, 4200}, {16000, 12000, 8200}, …, {8500, 7280, 5500}}.

A szükséges adatok megadását követően meg kell adni a grafikon megjelenítését meghatározó adatokat. Ezt egy CategoryPlot típusú objektum teszi lehetővé, amely konstruktora négy paramétert vár. Az első az adatforrás ( cd), a második az Y tengely felirata ( "Munkakör és létszám"), a harmadik az X tengely – alapértelmezetten felül megjelenő – felirata ( "Fizetés"), a negyedik a diagramtípushoz tartozó megjelenítő funkcióra utaló interfész képességeivel rendelkező névtelen objektum. Ez a 3D oszlopdiagram fekvő és egymást részben átfedő/eltakaró oszlopokkal jelenik meg.

Végül az elkészült ChartPanel típusú objektumra helyezett JFreeChart típusú diagramot hozzá kell adni a JFrame típusú GUI tartalompaneljének egy BorderLayout elrendezésmenedzserű paneljéhez.

Az elkészült grafikon többféle szakterületen is hasznos lehet. Értelmezése során összefüggéseket fogalmazhatunk meg és következtethetünk is.

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

A feladat adatfeldolgozó része a Java EE szoftverfejlesztő tanfolyam 9-12. óra: XML feldolgozás, a grafikont megjelenítő része a Java SE szoftverfejlesztő tanfolyam 29-36. óra: Grafikus felhasználói felület alkalmához kapcsolódik.

Kígyókocka grafikus felületen

2025. június 15.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ó.