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

Kutatók éjszakája 2019

2023. január 3.2019. szeptember 14. Szerző: Kaczur Sándor

A Kutatók éjszakája nemzetközi rendezvénysorozat 2005-ben indult. Magyarország 2006-ban csatlakozott. Azóta évről-évre egyre több intézmény nyitja meg hazánkban kapuit, szervez érdekes programokat, sok-sok településen, több száz helyszínen, több ezer eseményt meghirdetve sok tízezer érdeklődő/résztvevő látogatónak biztosít tartalmas estét.

Bár a kezdeményezés elsősorban a kutatói pálya népszerűsítését szolgálja, ezért leginkább a tizen- és huszonévesekre számít, az események vonzók és elég érdekesek ahhoz, hogy a kisgyerekektől a legidősebbekig mindenki megtalálja a számára izgalmas programokat. Korábban nagyobb felsőoktatási intézmények és kutatóintézetek szerepeltek döntően, de az utóbbi néhány évben egyre több kisebb intézmény, tehetséggondozással foglalkozó középiskola, cég, egyesület is csatlakozott a rendezvényhez. A Kutatók éjszakája rendezvény minden meghirdetett programja ingyenes.

Rendezvényünk plakátja

Az it-tanfolyam.hu 2019-ben sem marad ki a sorból. (2018-ban is szerveztünk programokat.) Meghirdettünk öt programot a kutatokejszakaja.hu weblapon. Az eseményekre regisztrálni kell a weblapon, ami talán szervezőként ránk keresve bizonyul legegyszerűbbnek. A regisztrációs időszak szeptember 14-26-ig tart és a programjainkra szeptember 27-én 17:40-20:50 óráig kerül sor.

Bízunk abban, hogy idei programjaink is népszerűek lesznek, sok-sok kérdés is elhangzik és kellemes hangulatú szakmai párbeszéd alakul ki.

Az előadások prezentációit tanfolyamaink hallgatói számára – a témához kapcsolódó témakörökhöz, ILIAS-ra feltöltve – tesszük elérhetővé.

17:40-18:10 – Milyen eséllyel és hány találatos szelvénnyel nyerhetünk, ha sok lottószelvénnyel fogadunk?
Véletlenszám-generátorral lottószelvényeket állítunk elő. Különbözőeket. Sokat: ezret, tízezret, százezret. Azután szimulálunk egy lottósorsolást. Megnézzük az eredményeket: hány darab két-, három-, négy- és telitalálatos szelvényt kaptunk. Átgondoljuk, hogy milyen eltérések adód(ná)nak ötös-, hatos- és heteslottó esetén. Közösen áttekintjük a Java nyelven implementált szoftver lépéseit és testre szabásának lehetőségeit. A program a Java SE szoftverfejlesztő tanfolyamunk tematikájához kapcsolódik.

18:20-18:50 – Tervezzünk hálózatos programokat! – Denevérek a barlangban
Adott a szerver és kliensek. Előbbi a barlang, utóbbiak a denevérek. Átgondoljuk, hogyan kommunikálnak egymással és ennek milyen elvi és gyakorlati megvalósítási lehetőségei adódnak. Ismertetjük a Java RMI technológiáját. Mit érdemes megmutatni a két program működése közben? Közösen áttekintjük az osztálydiagramot és a Java forráskódokat. Ötletelünk és megfogalmazunk sok-sok ötletet a továbbfejlesztésre. A program a Java EE szoftverfejlesztő tanfolyamunk tematikájához kapcsolódik.

19:00-19:30 – Jelenítsük meg webes térképeken Céline Dion koncertturnéjának helyszíneit!
A híres énekesnő idén szeptemberben világ körüli turnéba kezd (Courage World Tour) és ennek állomásait kb. fél évre előre meghirdették már áprilisban. Ismertetünk egy esettanulmányt. Ez egy hálózatos Java projekt, amely webről összegyűjtött adatok alapján, többféle Google Charts objektumot állít elő. A termék JavaScript-re épülő weboldalak sokasága, amely tipikus felhasználói igényeket/követelményeket kielégíthet. A megvalósítás kivételkezelést alkalmaz, HTML és JSON tartalmat olvas és generál, valamint elvégzi/elvégezteti az adatok térképen való megjelenítéséhez szükséges geokódolást. Az előadás ismerteti a specifikáció és a tervezés lépéseit, az implementációt, a tesztelést, valamint továbbfejlesztési javaslatokat is ad.
A program a Java EE szoftverfejlesztő tanfolyamunk tematikájához kapcsolódik.

19:40-20:10 – Írjunk hatékony adatbázis-lekérdezéseket!
Az Oracle HR sémában, először tipikus, hétköznapi szavakkal megfogalmazunk néhány lekérdezést, majd SQL nyelven megvalósítjuk és elemezzük, hogy helyesek-e, hatékonyak-e, mit adnak vissza. Szükség esetén optimalizáljuk, testre szabjuk ezeket. Kategóriák: egyszerű, összetett, aggregáló, soktáblás, hierarchikus/rekurzív lekérdezések. Ha lehet, grafikusan is megjelenítjük a lekérdezések eredményeit Java swing felületen, beépített JTable és JTree komponensekkel, illetve JFreeChart grafikonnal is. A Java adatbázis-kezelő tanfolyamunk tematikájához kötődik a program.

20:20-20:50 – Gondolkodjunk logikusan!
Az előadás során áttekintjük az intelligencia, a kreatív problémamegoldó és logikus gondolkodás összefüggéseit és izgalmas feladatokból válogatva közösen megoldunk néhány fejtörő feladatot.

Kutatók éjszakája 2018

2023. augusztus 4.2018. szeptember 28. Szerző: Kaczur Sándor

Rendezvényünk plakátja

Az it-tanfolyam.hu sem maradt ki a sorból. Két oktatónk és két tanfolyamunkon résztvevő hallgatónk képviselt bennünket és meghirdettünk hat programot a kutatokejszakaja.hu weblapon. Az eseményekre regisztrálni kellett a weblapon, ami talán szervezőként ránk keresve bizonyult legegyszerűbbnek. A regisztrációs időszak szeptember 12-27-ig tartott és a programjainkra szeptember 28-án 17-21 óráig került sor.

A programjaink népszerűek voltak, 40 érdeklődő látogatót fogadtunk X generációtól szinte Alfákig. A többség több programon is részt vett, néhányan kifejezetten egy-egy adott program iránt érdeklődtek. Sok-sok kérdés is elhangzott és kellemes hangulatú szakmai párbeszéd alakult ki, aminek igazán örülök.

Szeretném megköszönni az előadók színvonalas munkáját, igényes felkészülését. Az előadások prezentációit tanfolyamaink hallgatói számára – a témához kapcsolódó témakörökhöz, ILIAS-ra feltöltve – tesszük elérhetővé.

17:10-17:40 – Kaczur Sándor: Modellezzünk objektumorientáltan, közelítsünk többféle nézőpontból!
Az eseményen egy konkrét programozási feladat specifikációjából kiindulva tervezünk. Az objektumorientált szoftverfejlesztés eszközeit használjuk. Ötféle tervet készítünk el és hasonlítunk össze. Mindegyik terv Java nyelvű megvalósítását is ismertetjük. Adatfeldolgozást végzünk, fájlból olvasunk, saját adatszerkezetet építünk és azt feldolgozva adunk választ a specifikáció által megfogalmazott kérdésekre. Szembesülünk azzal, hogy a különböző terveknek mekkora hatása van az elkészült forráskódra, annak mennyiségére, áttekinthetőségére, karbantarthatóságára. Megpróbálunk következtetéseket is levonni, hogyan érdemes modellezni, tervezni, amikor hozzáfogunk egy-egy programozási feladat megoldásához.

17:50-18:20 – Friedel Attila: Egyszerű fizettető automata program fejlődése a programozó ismereteinek bővülése tükrében
Az előadás egy egyszerűen működő fizettető automata program három változatát mutatja be, ahogyan a programozó egyre több ismeretet szerez a Java nyelvről, és egyre gazdagabban tudja elkészíteni ugyanazt a feladatot. Először emlékezet nélkül, primitív típusú változókkal készül el az alapfunkciókkal rendelkező változat. A második verzió már tömböt is tartalmaz, emiatt új funkciók jelenhetnek meg. A harmadik, véglegesnek tekinthető változat nem hoz új funkciót, de a forráskód már objektumorientált szemlélettel készül el. A fokozatosság elvét szem előtt tartva követhetjük végig a gondolatmenet fejlődését, építve új eszközökre/lehetőségekre/funkciókra.

18:30-18:50 – Fejős Ibolya: Karrierváltás után: az első hónapok junior szoftverfejlesztőként egy kisvállalatnál
Mennyire könnyű ma szoftverfejlesztőként elhelyezkedni szakirányú felsőfokú végzettség nélkül? Milyen kihívásokkal találkozhatunk a felvételi folyamat során? Milyen elvárásokat támasztanak a munkaadók egy junior szakemberrel szemben? Hogyan telnek a beilleszkedés után a hétköznapok junior fejlesztőként egy 20 fő alatti létszámmal működő informatikai profilú kisvállalkozásnál?
Az előadó karrierváltó junior szakemberként személyes tapasztalatairól számol be.

19:00-19:30 – Kaczur Sándor: Írjunk SQL lekérdezéseket és dolgozzuk fel webes Java kliensprogrammal az eredménytáblát!
A lekérdezések az Oracle HR sémát használják. Előfordulnak közöttük egyszerűbbek, klasszikus 1:N kapcsolatra építők, bölcsész mondatosak, hierarchikusak/rekurzívak. Különböző eredménytáblákat adnak vissza a kliensprogramnak. A kliensprogram többrétegű MVC tervezési mintával készül, böngészőben fut, alkalmazásszerveren, JSP technológiával.
Az előadás bemutatja a tervezési szempontokat, az SQL lekérdező utasításokat, az eredménytáblák feldolgozási módszereit, valamint a megjelenítés lehetőségeit.

19:40-20:10 – Sztefanov Ádám: Biztonságos weboldal készítése Java EE technológiával
Az előadás betekintést nyújt egy felhasználó számára, hogy miként válik egy weblap biztonságossá. Egy Java technológiát használó weboldal projekten keresztül láthatjuk azt, hogy miként működik a két lépcsős azonosítás.

Hálózati adatforgalom bemutatása, fogalmak tisztázása
Egy webalkalmazás sebezhető pontjai
Védekezési módszerek
Biztonságos bejelentkezés folyamatának bemutatása példa alkalmazáson keresztül
Tippek internetes fiókjaink biztonságosabbá tételéhez

20:20-20:50 – Kaczur Sándor: Gondolkodjunk logikusan!
Az előadás során áttekintjük az intelligencia, a kreatív problémamegoldó és logikus gondolkodás összefüggéseit és izgalmas feladatokból válogatva közösen megoldunk néhány fejtörő feladatot.

Időjárás Budapesten

2023. augusztus 4.2018. augusztus 15. Szerző: Kaczur Sándor

Talált időjárás Widget

A Widgets constructor – OpenWeatherMap weblapon nézelődve megtetszett ez a Widget:

Főleg az volt nagyon szimpatikus, hogy milyen egyszerűen beépíthető mindez egy webes/mobil felületre az alábbi JavaScript forráskóddal:

window.myWidgetParam ? window.myWidgetParam : window.myWidgetParam = [];

window.myWidgetParam.push({

id: 15,

cityid: '3054643',

appid: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',

units: 'metric',

containerid: 'openweathermap-widget-15',

});

(function() {

var script = document.createElement('script');

script.async = true;

script.charset = "utf-8";

script.src = "//openweathermap.org/themes/openweathermap/assets/vendor/owm/js/weather-widget-generator.js";

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(script, s);

})();

Mindössze egy regisztráció szükséges hozzá a Members OpenWeatherMap weboldalon a fenti forráskódba behelyettesítendő API kódért. Az egy sorba ömlesztve kapott forráskódot a Javascript Viewer, Beautifier and Formatter, Editor weblapon formáztam könnyen olvashatóvá.

Saját fejlesztés

Kedvet kaptam ezt a funkcionalitást összerakni úgy, hogy a hálózati kommunikációra helyeztem a hangsúlyt.
A nézet réteg ezért igen egyszerű, Java swing felületen, JFrame form-ként varázsolt az alábbiak szerint, mindössze JPanel és JLabel vizuális komponensekből áll. Egy JLabel osztályú komponens képes szöveg és/vagy kép megjelenítésére is.

1. feladat

A modell rétegben tárolt település nevét és a szolgáltatás igénybevételéhez szükséges API kulcsot összerakva a Current weather data – OpenWeatherMap oldal specifikációját követve, megkapjuk az adatok lekérdezéséhez szükséges URL-t:

2. feladat

A hálózati kapcsolatot felépítve el kell kérni ( GET) az URL-ről kapott JSON formátumú adatot és tárolni kell azt a modellben ( jsonPuffer). A kivételkezelést nem részleteztem, mert most nem ezen van a hangsúly.

private void setJsonPuffer() {

jsonPuffer=new StringBuilder();

try {

HttpURLConnection c=

(HttpURLConnection)(new URL(API_URL_KEY)).openConnection();

c.setRequestMethod("GET");

c.connect();

InputStream is=c.getInputStream();

BufferedReader br=new BufferedReader(new InputStreamReader(is));

String line;

while((line=br.readLine())!=null)

jsonPuffer.append(line+"\r\n");

is.close();

c.disconnect();

}

catch(MalformedURLException e) {

System.out.println("Hiba: JSON URL...");

}

catch(ProtocolException e) {

System.out.println("Hiba: http, https, ftp...");

}

catch(IOException e) {

System.out.println("Hiba: JSON parser...");

}

A jsonPuffer objektum ezt tartalmazza:

A könnyen átlátható formátumot a JSON FORMATTER & VALIDATOR weblapon állítottam elő.

3. feladat

A JSON-t fel kell dolgozni és a különböző adatokat formázni/konvertálni kell, alkalmazkodva a megjelenítés igényeihez (például hőmérséklet Celsius fokban egész számra kerekítve, szélsebesség egytizedes pontossággal, hónap neve angolul, szükségesek a megfelelő mértékegységek). Külön gondoskodni kell arról, hogy az aktuális időjárást szimbolizáló ikonhoz (képként külön letöltve) is hozzájussunk, mert az API csupán az útvonalát jelentő URL-ből csak a fájl nevét (azonosítóját) adja meg. A kivételkezelést itt sem fejtettem ki.

private void jsonProcessing() {

try {

JSONObject json=new JSONObject(jsonPuffer.toString());

name=json.getString("name"); //település

country=json.getJSONObject("sys").getString("country"); //ország

weatherDescription=json.getJSONArray("weather").

getJSONObject(0).getString("description"); //leírás

JSONObject main=json.getJSONObject("main");

temp=(int)Math.round(main.getDouble("temp")-273.15); //hőmérséklet

wind=Double.parseDouble(new DecimalFormat("#,#").format(

json.getJSONObject("wind").getDouble("speed"))); //szélsebesség

humidity=main.getInt("humidity"); //páratartalom

pressure=main.getInt("pressure"); //légnyomás

dateTime=new SimpleDateFormat("hh:mm MMM dd", Locale.ENGLISH).

format(new Date(json.getLong("dt")*1000)); //dátum és idő

URL weatherIconURL=new URL("http://openweathermap.org/img/w/"+

json.getJSONArray("weather").getJSONObject(0).

getString("icon")+".png"); //ikon

weatherIcon = ImageIO.read(weatherIconURL);

}

catch(JSONException e) {

System.out.println("Hiba: JSON elemzése");

}

catch(MalformedURLException e) {

System.out.println("Hiba: icon URL...");

}

catch(IOException e) {

System.out.println("Hiba: icon...");

}

4. feladat

Végül a modelltől elkért adatokkal frissíteni kell a nézetet.

private void revalidateData() {

lbNameCountry.setText(modell.getOWMNameCountry());

lbWeatherDescription.setText(modell.getWeatherDescription());

lbWeatherIdIcon.setText("");

lbWeatherIdIcon.setIcon(new ImageIcon(modell.getWeatherIcon()));

lbTemp.setText(modell.getOWMTemp());

lbWind.setText(modell.getOWMWind());

lbHumidity.setText(modell.getOWMHumidity());

lbPressure.setText(modell.getOWMPressure());

lbDateTime.setText(modell.getOWMDateTime());

}

Az eredmény

IdojarasHouston

IdojarasTokyo

Aki kedvet kapott, annak többféle API is rendelkezésére áll, dokumentációval és példákkal együtt a https://openweathermap.org/api weboldalon. Kísérletezni bátran szabad, illetve érdemes megnézni és értelmezni azokat az adatokat, amiket JSON formátumban visszakapunk, de ehhez a feladathoz nem volt rájuk szükség.

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 EE szoftverfejlesztő tanfolyam 9-12. óra: XML feldolgozás és 13-16. óra: JSON feldolgozás alkalmaihoz kapcsolódik.

Denevérek a barlangban

2023. július 8.2018. július 6. Szerző: Kaczur Sándor

Évekkel ezelőtt hálózatos Java EE esettanulmányt akartunk készíteni Lengyel Borisz kollégával. Ötleteltünk: milyen technológiával és hogyan kommunikáljon egymással a szerver és a kliens(ek). A távoli metódushívás (Remote Method Invocation) mellett döntöttünk és elkészült a denevérek a barlangban projekt, amely evolúciós projektként azóta több változatot is megélt. A felhasználói felület (barlang) betölt néhány képet (denevér kliensek), amelyek a szerver segítségével mozognak.

Ismertetjük a tervezés folyamatát, a kliens és szerver funkcióit részletesen, végül ötleteket adunk a továbbfejlesztésre.

A főbb feladatokat így határoztuk meg:

az RMI kommunikációs módszer megismertetése,
az RMI szolgáltatás reprezentálása látványos grafikus/swinges klienssel,
alternatíva nyújtása a TCP protokoll közvetlenül csatlakozó socket-jére.

Elkészítettük az alábbi osztálydiagramot (persze ez nem az első változat):

A szerver és kliens funkcióit megvalósító osztályok/interfészek feladatait így határoztuk meg:

BarlangDenevérInterfész interfész:

véletlen 5 és 10 közötti a denevérek száma,
méretek a GUI-hoz.

Denevér osztály:

megvalósítja az RMI kliens funkciót,
JLabel leszármazott, külső képfájlt tölt be ( bat.jpg),
egyedi azonosítója van,
eldönti mozgásának irányát (4) és léptékét (3), mintha ultrahangot adna,
a szerver megadja neki, hogy az új helyre elmozdulhat-e,
saját magát képes mozgatni.

Pozíció interfész:

öröklődik a java.rmi.Remote interfészből,
két távolról hívható metódus fejét tartalmazza.

BarlangSzerver osztály:

megvalósítja az RMI szerver funkciót,
implementálja a Pozíció interfészt,
JFrame leszármazott,
figyel arra, hogy a denevérek ne mozogjanak ki a barlangból.

BarlangFelület osztály:

JFrame leszármazott,
GUI az RMI kliensek megjelenítéséhez.

BarlangSzerverTérkép osztály:

JPanel leszármazott,
GUI a szerveren a kliensek mozgásának követésére.

Ha futtatjuk az elkészült szerver és kliens programot, akkor ezt láthatjuk:

A fejlesztés és tesztelés közben sok-sok továbbfejlesztési ötletet/javaslatot fogalmaztunk meg:

háttérkép a barlangról,
a háttérkép megvalósíthat labirintust, koordináta-rendszert,
átlátszó illetve egyedi képfájlok a denevéreknek,
a denevérek mozgásának tetszőleges iránya (360°),
a denevérek mozgásának egyedi léptéke,
a denevérek figyeljenek egymásra (ne ütközzenek össze),
a denevérek figyeljenek a környezetükre (ne ütközzenek bele sziklákba, cseppkövekbe),
a szerver követheti a denevérek útvonalát,
a szerver archiválhat, szerializálhat, készíthet statisztikát.

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

A feladat a Java EE szoftverfejlesztő tanfolyam 21-24. óra: RMI alapú kommunikáció alkalmához kapcsolódik.

Koch-görbe rajzolása

2023. július 8.2018. április 23. Szerző: Kaczur Sándor

A Koch-görbe egyike a legrégebben ismert egyszerű fraktáloknak. Mint ilyen, önhasonlóan rekurzív. Az önhasonlóság azt jelenti, hogy az ábra tetszőleges részét felnagyítva mindig hasonló/ugyanolyan részek jelennek meg (a méretaránytól függetlenül). Az n=1 szinten a Koch-görbe kiindulópontja egy szabályos háromszög. A n+1-edik szinten az n-edik szinten található szakaszokat harmadoljuk, és a középső szakasz helyére egy harmad akkora háromszög két szárát illesztjük (az alapját kihagyjuk). Ezt rekurzívan folytatva kapjuk meg a Koch-görbét, másképpen Koch-féle hópelyhet.

Írtam egy egyszerű Java programot, amely n=1-től 9-ig paraméterezhetően kirajzolja a Koch-görbét egy grafikus felületre. Így működik:

A program elkészítéséhez néhány alapvető dolgot kell csupán tudni:

Vászontechnikával tudunk swing GUI felületre ( Graphics osztályú g objektum) rajzolni, ahol a koordináta-rendszer origója egy téglalap alakú terület bal felső csúcsa, X jobbra növekszik, Y pedig lefelé növekszik.
Kétféle szín áll rendelkezésre: háttérszín (most Color.WHITE), illetve rajzolószín (most Color.BLUE).
A rajzoláshoz grafikai primitíveket használhatunk, például pont, szakasz, téglalap, ellipszis. Szakaszt két végpontjának koordinátáival tudunk rajzolni a drawLine() metódussal.
Be kell állítani a vászon méreteit, azaz annak a komponensnek ( JPanel-ből öröklött KochPanel osztályú pnKoch objektum) a méreteit, amelyre ráfeszül a vászon.
Egy Slider osztályú sSzint nevű vezérlőobjektum ChangeListener figyelőinterfész stateChanged() eseménykezelő metódust implementáló objektumával paraméterezzük a rajzolást 1-től 9-ig.
A pnKoch objektumnak küldött repaint() üzenet/metódushívás meghívja a felüldefiniált paintComponent() metódust.

@Override

protected void paintComponent(Graphics g) {

super.paintComponent(g);

g.setColor(Color.BLUE);

koch(n, 200, 51, 60, 300, g);

koch(n, 60, 300, 340, 300, g);

koch(n, 340, 300, 200, 51, g);

}

A szakasz négy darab harmad akkora szakaszra osztását a megfelelően paraméterezett rekurzív metódushívások oldják meg az alábbi lépéseket követve:

A rekurzív rajzolást a koch() metódus végzi el, ahol a fraktál szabályának megfelelően szakaszharmadolás és a szükséges pontok koordinátáinak (szakaszok végpontjai) kiszámítása történik:

private void koch(int n, int x1, int y1, int x5, int y5, Graphics g) {

if(n==1)

g.drawLine(x1, y1, x5, y5);

else {

double gy=Math.sqrt(3)/6;

int dx=x5-x1, dy=y5-y1,

x2=x1+dx/3, y2=y1+dy/3,

x3=(int)((x1+x5)/2+gy*(y1-y5)), y3=(int)((y1+y5)/2+gy*(x5-x1)),

x4=x1+dx*2/3, y4=y1+dy*2/3;

koch(n-1, x1, y1, x2, y2, g);

koch(n-1, x2, y2, x3, y3, g);

koch(n-1, x3, y3, x4, y4, g);

koch(n-1, x4, y4, x5, y5, g);

}

A Koch-görbének van néhány érdekes tulajdonsága:

kerülete minden rekurzív lépésben minden határon túl növekszik, azaz a végtelenhez tart,
területe véges, hiszen minden rekurzív lépésben belefér a háromszög köré írható körbe,
dimenziója tört, ~ 1,261859.

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 9-12. óra: Metódusok, rekurzió alkalomra építő 29-36. Grafikus felhasználói felület alkalomhoz kötődik.