grafikus felhasználói felület - címke - Oldal 8 a 8-ből

Optikai csalódások

2023. január 1.2018. február 19. Szerző: Kaczur Sándor

A grafikus felülettel rendelkező Java programok (Swing, FX, webkomponensek, HTML+CSS) fejlesztése során igény adódhat arra, hogy a GUI komponensek saját beépített rajzoló/renderelő képességét felülírjuk/-definiáljuk, hogy egy-egy nyomógomb, menüpont, rádiógomb másképpen nézzen ki. Léteznek beépített rajzoló funkciók is.

Ha például grafikont kell beilleszteni egy alkalmazásba, akkor használjunk és igényeink szerint szabjunk testre egy JFreeChart csomagbeli grafikont, illetve előfordulhat, hogy találhatunk egy olyat a JFreeChart Demo-ban, ami éppen megfelel a megrendelő igényeinek.

Persze a műfaj nem ér itt véget. Időnként kreatívabb ábrák, rajzok, grafikák megjelenítésére is használhatjuk a beépített – általában téglalap alakú – komponenseket. Ehhez egyszerűen csak felül kell írni/definiálni a paint() metódusukat és vászontechnikával, a megszokott képernyős koordináta-rendszerben, grafikai primitíveket (pont, téglalap, ellipszis) és színeket kell megfelelően paraméterezni.

Az optikai csalódások igen népszerűek, és az egyszerűbb fiziológiai és kognitív illúziók könnyen lerajzolhatók a fenti eszköztárral, hiszen csupán színek, alakzatok, kontraszt, távolság, mélység, térhatás segítségével valósulnak meg.

Íme három egyszerű példa, hogyan állítható elő optikai csalódás Java implementációval!

1. példa

@Override

public void paint(Graphics g) {

int egyseg=20, sorDb=10, oszlopDb=20;

for(int i=1; i<=sorDb; i++) {

int eltolas=(i%2==1)?0:egyseg/2;

g.setColor(Color.BLACK);

for(int j=1; j<=oszlopDb; j+=2)

g.fillRect(eltolas+(j-1)*egyseg, (i-1)*egyseg+i, egyseg, egyseg);

g.setColor(Color.LIGHT_GRAY);

g.drawLine(0, (i-1)*egyseg+i-1, egyseg*(oszlopDb-1), (i-1)*egyseg+i-1);

}

2. példa

@Override

public void paint(Graphics g) {

int egyseg=50, koz=10, sorDb=6, oszlopDb=8;

g.setColor(Color.LIGHT_GRAY);

g.fillRect(0, 0, oszlopDb*(egyseg+koz)-koz, sorDb*(egyseg+koz)-koz);

g.setColor(Color.BLACK);

for(int i=1; i<=sorDb; i++)

for(int j=1; j<=oszlopDb; j++)

g.fillRect((j-1)*(egyseg+koz), (i-1)*(egyseg+koz), egyseg, egyseg);

g.setColor(Color.WHITE);

for(int i=1; i<sorDb; i++)

for(int j=1; j<oszlopDb; j++)

g.fillOval(j*(egyseg+koz)-koz-2, i*(egyseg+koz)-koz-2, koz+4, koz+4);

}

3. példa

@Override

public void paint(Graphics g) {

Point hely;

for(int i=1; i<=4; i++)

for(int j=1; j<=4; j++) {

hely=new Point((i-1)*180, (j-1)*120);

if((i+j)%2==1)

minta1(g, hely);

else

minta2(g, hely);

}

private void minta1(Graphics g, Point hely) {

Point pozicio;

for(int i=1; i<=4; i++)

for(int j=1; j<=4; j++) {

pozicio=new Point(hely.x+(i-1)*45, hely.y+(j-1)*30);

if((i+j)%2==1)

mintaAlap1(g, pozicio, Color.MAGENTA, Color.YELLOW);

else

mintaAlap2(g, pozicio, Color.YELLOW, Color.MAGENTA);

}

private void minta2(Graphics g, Point hely) {

Point pozicio;

for(int i=1; i<=4; i++)

for(int j=1; j<=4; j++) {

pozicio=new Point(hely.x+(i-1)*45, hely.y+(j-1)*30);

if((i+j)%2==1)

mintaAlap2(g, pozicio, Color.MAGENTA, Color.YELLOW);

else

mintaAlap1(g, pozicio, Color.YELLOW, Color.MAGENTA);

}

private void mintaAlap1(Graphics g, Point hely, Color kitolt, Color szin) {

g.setColor(kitolt);

g.fillRect(hely.x, hely.y, 45, 30);

g.setColor(szin);

g.fillRect(hely.x+2, hely.y+2, 13, 9);

g.fillRect(hely.x+30, hely.y+19, 13, 9);

}

private void mintaAlap2(Graphics g, Point hely, Color kitolt, Color szin) {

g.setColor(kitolt);

g.fillRect(hely.x, hely.y, 45, 30);

g.setColor(szin);

g.fillRect(hely.x+30, hely.y+2, 13, 9);

g.fillRect(hely.x+2, hely.y+19, 13, 9);

}

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

Aki ezek után kedvet kapott, keressen hasonló ábrákat és tervezve, kódolva, tesztelve gyakoroljon! Ajánlom ezeket a weboldalakat:

Hasonló feladatok megoldásához a Java SE szoftverfejlesztő tanfolyam szakmai moduljának 29-36. Grafikus felhasználói felület alkalma után bátran hozzá lehet fogni, illetve érintjük még a GUI témakört a Java adatbázis-kezelő tanfolyam 33-40. óra: Grafikus kliensalkalmazás fejlesztése JDBC alapon alkalommal is.

Fát építünk

2023. január 1.2018. január 7. Szerző: Kaczur Sándor

Az adatok strukturális és könnyen értelmezhető formában való megjelenítése egy szoftver felhasználói felületén átgondolt tervezést igényel. Az adatokhoz hozzá kell jutni, ki kell választani a megfelelő grafikus komponenst, a mögötte lévő adatmodellt, össze kell ezeket kötni. Gyakran előforduló feladat, hogy táblázatosan is ábrázolható adatokból – felhasználva az adatok közötti összefüggéseket és kapcsolatokat – csoportosítva jelenítsünk meg hierarchikusan, fa struktúrában, kinyitható-becsukható formában, ahogyan ezt a felhasználók jól ismerik a fájl- és menürendszereket használva.

Fát építünk kétféleképpen

Adatbázisból, az Oracle HR sémából lekérdezünk két összetartozó nevet: részleg és alkalmazott. A lekérdezés során figyelünk a megfelelő sorrendre, ami a későbbi feldolgozást megkönnyíti. Adatainkat részlegnév szerint növekvő, azon belül alkalmazott neve szerint is növekvő – ábécé szerinti – sorrendbe rendezzük. A vezérlő rétegben két függvényt írunk, amely a modell rétegtől jut hozzá az adatokat tartalmazó generikus listához – átvett paraméterként –, és a visszaadott érték a nézet réteghez kerül.

A csoportváltás algoritmust használjuk, amely 5 blokkból épül fel. A külső ciklus előtti 1. blokk és utáni 5. blokk egyszer hajtódik végre, az előkészítő és lezáró tevékenységek tartoznak ide. A külső ciklus elején és végén található 2. és 4. blokk a belső cikluson kívül fut le, csoportonként, kategóriánként, részlegenként egyszer (most összesen 11-szer mindkettő). A 3. blokk a belső cikluson belül található, és alkalmazottanként egyszer hajtódik végre (most összesen 106-szor).

Háromszintű fát építünk: a gyökérbe (0. szint) fix, beégetett szövegként kerül a cég neve és a teljes létszám. Az 1. szinten jelennek meg a részlegek nevei és a hozzájuk tartozó létszámok. A 2. szint az alkalmazottak neveiből áll.

1. megoldás

A megoldás faKeszit1() függvénye szöveges adatot eredményez. Ez jól használható teszteléshez: megvan-e az összes adat, megfelelő-e a részlegek sorrendje azon belül az alkalmazottak sorrendje, működik-e a csoportosítás, rendben van-e a megszámolás?

public String faKeszit1(ArrayList lista) {

//1

StringBuilder faGyoker=

new StringBuilder("Cég ("+lista.size()+" fő)");

int i=0;

while(i<lista.size()) {

//2

String aktReszleg=lista.get(i).getReszleg();

ArrayList faReszlegAlkalmazott=new ArrayList<>();

while(i<lista.size() &&

lista.get(i).getReszleg().equals(aktReszleg)) {

//3

faReszlegAlkalmazott.add(lista.get(i).getNev());

i++;

}

//4

String faReszleg="\n "+aktReszleg+

" ("+faReszlegAlkalmazott.size()+" fő)\n ";

faGyoker.append(faReszleg+" "+

String.join("\n ",faReszlegAlkalmazott));

}

//5

return faGyoker.toString();

}

A faKeszit1() függvény egy sok lépésben összefűzött (konkatenált) szöveget ad vissza. Az 1. blokkban előkészítjük a fa gyökerét, ami StringBuilder típusú, hiszen sokszor manipuláljuk és inicializáljuk a lista indexelésére használt i ciklusváltozót. A 2. blokkban megjegyezzük az aktuális részleget és előkészítjük az ehhez tartozó alkalmazottak nevét tároló generikus listát ( faReszlegAlkalmazott). Az aktReszleg-hez tartozó alkalmazottak neveit összegyűjtjük a 3. blokkban. Egy részleg feldolgozását a 4. blokkban fejezzük be a fa aktuális 1. és 2. szinten lévő elemeinek szövegbe való beszúrásával. A belső ciklushoz kötődően megszámolást nem kell alkalmaznunk, hiszen az adott részlegben dolgozó alkalmazottak száma a generikus listától elkérhető ( size()). Építünk arra, hogy a külső ciklusból nézve az egymás után végrehajtódó 2. és 4. blokkban az aktReszleg nem változik meg. A 2. blokkban még nem tudjuk a fa aktuális 1. szintjét hozzáfűzni a szöveghez, hiszen a létszám csak a belső ciklusban felépülő kollekciótól kérhető el utólag. Szükséges némi késleltetés, hiszen a szöveg összefűzése és lényegesen egyszerűbb (mint utólag manipulálni megfelelő helyeken). Az 5. blokkban a csoportváltás algoritmushoz kötődő tevékenységünk nincs.

Az 1. megoldás eredménye

Cég (106 fő)

Accounting (2 fő)

Shelley Higgins

William Gietz

Administration (1 fő)

Jennifer Whalen

Executive (3 fő)

Lex De Haan

Neena Kochhar

Steven King

...

2. megoldás

A faKeszit2() függvénynél alkalmazkodunk ahhoz, hogy a JTree vizuális komponenshez DefaultTreeModel observable típusú modell szükséges, így ezzel térünk vissza ( faModell). A fa csomópontjai DefaultMutableTreeNode osztályú objektumok lesznek, amelyeknek a userObject tulajdonsága szükség esetén manipulálható. Az 1 blokkban beszúrjuk a fa gyökerét ( faGyoker), amihez a későbbiekben csatlakozik a fa többi eleme. A 2. blokkban megjegyezzük az aktuális részleget és előkészítjük – megjelenítendő szöveg nélkül – a faReszleg csomópontot. A 3. blokkban fabeli csomópontként a fa 1. szintjén megjelenő részleghez névtelenül hozzáadjuk a fa 2. szintjére kerülő – aktuális részleghez tartozó – alkalmazottak nevét. A 4. blokkban utólag módosítjuk a faReszleg csomópont megjelenítendő szövegét. Az aktuális részleg létszámát itt sem kell külön megszámolni, mert a faReszleg-től elkérhető ( getChildCount()). Az 5. blokkban itt sincs különösebb teendőnk.

public DefaultTreeModel faKeszit2(ArrayList<Alkalmazott> lista) {

//1

DefaultMutableTreeNode faGyoker=

new DefaultMutableTreeNode("Cég ("+lista.size()+" fő)");

DefaultTreeModel faModell=new DefaultTreeModel(faGyoker);

int i=0;

while(i<lista.size()) {

//2

String aktReszleg=lista.get(i).getReszleg();

DefaultMutableTreeNode faReszleg=new DefaultMutableTreeNode();

while(i<lista.size() &&

lista.get(i).getReszleg().equals(aktReszleg)) {

//3

faReszleg.add(new DefaultMutableTreeNode(lista.get(i).getNev()));

i++;

}

//4

faReszleg.setUserObject(

aktReszleg+" ("+faReszleg.getChildCount()+" fő)");

faGyoker.add(faReszleg);

}

//5

return faModell;

}

A 2. megoldás eredménye

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

Attól függően, hogyan jutunk hozzá a megjelenítéshez szükséges adatokhoz, több tanfolyamunkhoz is kapcsolódik a feladat és a modell rétegben mindig másképpen tervezünk és implementálunk:

A Java SE szoftverfejlesztő tanfolyam 45-48. óra: Adatbázis-kezelés JDBC alapon, 1. rész alkalmán hagyományos SQL lekérdező utasítást készítünk JDBC környezetben.
A Java EE szoftverfejlesztő tanfolyam 25-32. óra: Adatbázis-kezelés JPA alapon alkalommal a perzisztencia szolgáltatásait vetjük be.
A Java adatbázis-kezelő tanfolyam 13-16. óra: Konzolos kliensalkalmazás fejlesztése JDBC alapon, 1. rész, 33-36. óra: Grafikus kliensalkalmazás fejlesztése JDBC alapon, 2. rész alkalmain hierarchikus lekérdezéseket használunk.

JFreeChart grafikon készítése

2023. január 1.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

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ó.

Egy matematika érettségi feladat megoldása programozással 2017

2023. augusztus 4.2017. május 11. Szerző: Kaczur Sándor

A 2017-es középszintű matematika érettségi feladatsor 12. feladata inspirált egy Java program megírására. Szükséges hozzá néhány programozási tétel: sorozatszámítás, megszámolás, valamint adatszerkezetként ideális egy kétdimenziós tömb. Érdekes belegondolni, hogy mennyire más lehetne a problémamegoldás, ha programozhatnánk a matematika érettségi vizsgán. A teljes feladatsor a megoldásokkal együtt letölthető az oktatas.hu-ról.

12. feladat

Egy kockával kétszer egymás után dobunk. Adja meg annak a valószínűségét, hogy a két dobott szám összege 7 lesz! Válaszát indokolja!

Matematikai megoldás

A feladat nagyon egyszerű. Két megoldást ismertet a javítási-értékelési útmutató:

Összesen 6 * 6 = 36-féleképpen dobhatunk. Hat olyan dobáspár van, amelyben 7 az összeg: (1; 6), (2; 5), (3; 4), (4; 3), (5; 2) és (6; 1). A keresett valószínűség 6/36-od, vagyis egyhatod.
Bármennyit is dobunk elsőre, ezt a második dobás egyféleképpen egészítheti ki 7-re. Így a második dobásnál a hat lehetséges értékből egy lesz számunkra kedvező. A keresett valószínűség egyhatod.

Közelítő megoldások szimulációval

Egy alkalom két kockadobást jelent egymás után. A dobások sorrendje nem számít (alkalmanként és összességében sem). Minél több alkalommal végezzük el a kockadobásokat, annál jobban megközelítjük a fenti valószínűséget (várható értéket, bővebben: nagy számok törvénye). Az egyhatod közelítő értéke a Java double adattípusával 0.16666666666666666.

1. megoldás

Ha nem akarunk emlékezni a dobásokra, összegükre, csupán megszámolnánk, hogy hány olyan dobáspár van, amelyben 7 az összeg, akkor ehhez mindössze egy számláló ciklus kell, aminek a ciklusmagjában két véletlen kockadobás összegét előállítjuk és növelünk egy számlálót/gyűjtőt, ha az éppen 7. Az eredményt a számláló és a ciklus lépésszámának hányadosa adja meg. Például meghívhatjuk a metódust így: kockadobas1(5000); és kaphatjuk eredményül ezt: 5000 alkalomból 7 összegként 836 alkalommal fordult elő. Valószínűség: 0.1672 . A metódus kivételt dob, ha értelmetlen a paramétere. Íme a metódus Java forráskódja:

static void kockadobas1(int alkalomDb) {

if(alkalomDb<=0)

throw new IllegalArgumentException("Hiba: alkalomDb<=0");

int osszeg7db=0;

for(int i=1; i<=alkalomDb; i++) {

int dobas1=(int)(Math.random()*6+1);

int dobas2=(int)(Math.random()*6+1);

if(dobas1+dobas2==7)

osszeg7db++;

}

System.out.println(

alkalomDb+" alkalomból 7 összegként "+

osszeg7db+" alkalommal fordult elő. Valószínűség: "+

((double)osszeg7db/alkalomDb));

}

2. megoldás

Ha egy 13 elemű egész típusú tömböt használhatunk emlékezetként. Kezdetben 2-től 12-ig indexelve nullázzuk ki, így csoportos gyűjtést tudunk megvalósítani. A nullázás most inicializáló blokkal történt, mert nem sok eleme van a tömbnek (sok elemnél inkább használjunk erre ciklust). A tömb első két elemét nem használjuk semmire. Mi történik a ciklusban? Például dobas1=3 és dobas2=4 esetén a dobasDbTomb[7] elemét növeli (mindegy mi volt ott korábban, de inkrementálódjon). Most több adatot tárolunk, mint amiből megválaszolható a feladatban megfogalmazott konkrét kérdés, de ezt tekinthetjük strukturális tartaléknak.

static void kockadobas2(int alkalomDb) {

if(alkalomDb<=0)

throw new IllegalArgumentException("Hiba: alkalomDb<=0");

int[] dobasDbTomb={-1, -1,

0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0};

for(int i=1; i<=alkalomDb; i++) {

int dobas1=(int)(Math.random()*6+1);

int dobas2=(int)(Math.random()*6+1);

dobasDbTomb[dobas1+dobas2]++;

}

System.out.println(

alkalomDb+" alkalomból 7 összegként "+

dobasDbTomb[7]+" alkalommal fordult elő. Valószínűség: "+

((double)dobasDbTomb[7]/alkalomDb));

}

Hasonló, egydimenziós tömbbel történő belső adattárolást megvalósító elosztott alkalmazásról blogoltunk már: Kockadobás kliens-szerver alkalmazás.

3. megoldás

Ez az igazi szimuláció, swing GUI grafikus környezetben, ahogyan az alábbi képernyőképen látható. A megvalósítás kétdimenziós tömböt használ adatszerkezetként. Álljon 7 sorból és 7 oszlopból és legyen i a sor- és j az oszlopindex. A tömb [0][0]-dik elemét nem használjuk semmire. Az első oszlopába ( j=0 és i>0) bekerülhetnek a dobókockán előforduló számok 1-től 6-ig. Hasonlóan az első sorba ( i=0 és j>0) is. Ezek a dobott számok alapján indexek lesznek és az ábrán zöld hátterű cellákba kerültek. A tömb többi eleme kezdetben 0 (nulla), ezek az ábrán fehér hátterű cellák. A szürke hátterű cellák (mellékátló) esetén a dobott számok összege 7 és jól látszik, hogy ez hatféleképpen fordulhat elő a 36-féle eset közül. Például a 2. sor 5. oszlopában lévő szám mutatja, hogy a 10000 alkalomból 274-szer fordult elő az, hogy a dobáspár a (2; 5) lett. A tömb két indexe felcserélhető lenne, mert ez a mellékátlóban lévő számok összegét nem befolyásolja.

A programban kiválasztható néhány alkalomból amit szeretnénk, és a Dob nyomógombra kattintva indul el időzítővel a folyamat. Várakoztatás/menet közben piros színnel kiemelve látszik/megfigyelhető, hogy az éppen aktuális dobás hol növeli az értéket/előfordulást/darabszámot. A képernyőképen befejeződött állapot látható. Az eredményt a szürke cellákban lévő számok összegének és az alkalmak számának hányadosa adja meg. Ezt a háttérbeli kétdimenziós tömbben összesítéssel az alábbi Java forráskód-részlet adja meg:

int osszeg7db=0;

for (int i = 1; i <= 6; i++)

osszeg7db+=dobasTomb[i][7-i];

String eredmeny=alkalomDb+" alkalomból 7 összegként "+

osszeg7db+" alkalommal fordult elő.";

Most lényegesen több adatot tárolunk, mint ami a konkrét válaszhoz kell, de cserébe jól érzékeltethető a csoportos gyűjtés/megszámolás működése. A program grafikus felhasználói felületének felépítését és az eseménykezelés megvalósítását most nem részletezzük.

Eszünkbe juthatna, hogy a program miért dob kétszer 1 és 6 közötti számot egymás után és ezt összegzi, amikor egyetlen 2 és 12 közötti dobással (véletlenszám generálással) megkaphatnánk a dobáspár összegét. Hiszen két db 1 és 6 közötti szám összege mindig 2 és 12 közötti szám. Jó lenne ez az ötlet/megvalósítás? Igen? Nem? Miért? A hozzászólásokhoz várjuk az indoklást.

Ajánljuk matematika érettségi feladat címkénket, mert a témában évről-évre blogolunk.

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

A feladat a Java SE szoftverfejlesztő tanfolyam szakmai moduljának 17-28. óra: Objektumorientált programozás alkalmaira épülő 29-36. óra: Grafikus felhasználói felület alkalmaihoz kötődik.