Web application developer studio

8/16/2019 Web application developer studio

1/82

EÖTVÖS LORÁND TUDOMÁNYEGYETEM

INFORMATIKAI KAR

PROGRAMOZÁSI NYELVEK ÉS FORDÍTÓPROGRAMOK

TANSZÉK

Webalkalmazás szerkesztő

Témavezető: Szerző:

Leskó Dániel Kecskés Ádám

Tanársegéd programtervező informatikus BSc,

ELTE IK nappali tagozat

Programozási Nyelvek és Fordítóprogramok

Tanszék

Budapest, 2016


2/82

Tartalomjegyzék

1. Bevezető ................................................................................................................................... 1

1.1 Feladat ................................................................................................................................ 1

1.2 Fogalmak ............................................................................................................................. 1

1.2.1 Webes Alkalmazás ....................................................................................................... 1

1.2.2 Fejlesztőkörnyezet....................................................................................................... 1

1.2.3 Fordítóprogram ........................................................................................................... 2

1.2.4 HTML ............................................................................................................................ 2

1.3 A feladat értelmezése ........................................................................................................ 2

1.4 Alkalmazott technológiák .................................................................................................. 3

1.4.1 Web Components ........................................................................................................ 3

1.4.2 File API ......................................................................................................................... 4

2. Felhasználói dokumentáció...................................................................................................... 5

2.1 Bevezetés ............................................................................................................................ 5

2.2 Rendszerkövetelmények .................................................................................................... 5

2.2.3 Operációs rendszer: ..................................................................................................... 5

2.2.4 Böngésző ...................................................................................................................... 5

2.2.5 PHP ............................................................................................................................... 5

2.2.6 Ajánlott követelmények: ............................................................................................. 5

2.3 Telepítés ............................................................................................................................. 6

2.4 A felhasználói felület .......................................................................................................... 7

2.4.1 Áttekintés .................................................................................................................... 7

2.4.2 Menü ............................................................................................................................ 8

2.4.3 Projektfa ...................................................................................................................... 9

2.4.4 Adatmódosító panel .................................................................................................... 9

2.4.5 Szerkesztőpanel ......................................................................................................... 10

2.5 Projekt elemei .................................................................................................................. 11

2.5.1 Platform ..................................................................................................................... 11


3/82


4/82

2.8.17 SESSION.................................................................................................................... 25

2.8.18 Template .................................................................................................................. 26

2.8.19 TemplateConfig ....................................................................................................... 26

2.8.20 File (Media) .............................................................................................................. 27

2.8.21 Image (Media) ......................................................................................................... 27

2.9. Csevegő alkalmazás ......................................................................................................... 28

3. Fejlesztési dokumentáció ....................................................................................................... 30

3.1 A kitűzött feladatok, és megvalósításuk .......................................................................... 30

3.1.1 Projektfájl .................................................................................................................. 31

3.1.2 Vizuális fejlesztés ....................................................................................................... 33

3.1.3 Projekt fordítása (exportálás) ................................................................................... 34

3.1.4 Modulok ..................................................................................................................... 37

3.2 Használati esetek .............................................................................................................. 41

3.3 Osztályok és funkciók ....................................................................................................... 42

3.3.1 Bevezetés ................................................................................................................... 42

3.3.2 GUI (JS) ....................................................................................................................... 43

3.3.3 Projekt logika (JS) ...................................................................................................... 63

3.3.4 Szerveroldal (PHP) ..................................................................................................... 71

3.3.5 WebApp (PHP) ........................................................................................................... 72

3.4 Tesztelés ........................................................................................................................... 73

3.4.1 Tesztelés használati esetek alapján .......................................................................... 73

3.4.2 Strukturális tesztelés ................................................................................................. 74

3.4.3 Tanulságok levonása ................................................................................................. 75

3.4.4. Hatékonyságvizsgálat ............................................................................................... 76

4. Összegzés ................................................................................................................................ 77

Irodalomjegyzék: ........................................................................................................................ 78


5/82

1

1. Bevezető

1.1 Feladat

A laikusok számára mindig nehéz feladat volt webes alkalmazások elkészítése. Ha

szerettek volna maguk elkészíteni egy saját alkalmazást, akkor ahhoz az egyik lehetőség,

hogy meg kellett tanulniuk a programozás alapjait, ami sok időt vehet igénybe, és még

úgy sem rendelkeznek a szükséges rutinnal és tapasztalattal, hogy egy jól működő, és

biztonság szempontjából is megfelelő alkalmazást készítsenek. A másik lehetőség, hogy

felhasználnak egy weblap szerkesztő programot, amivel viszont csak statikus

weboldalakat lehet készíteni, de mindenképp meg van kötve a felhasználó keze, ha nincs

programozói ismerete.

A szakdolgozatom célja egy olyan fejlesztőkörnyezet létrehozása, amely lehetőséget ad

a programozáshoz nem értők számára is egy egyszerűbb, dinamikus webes alkalmazás

elkészítésére. A program elsődleges feladata, hogy egy modulokkal bővíthető grafikus

felhasználói felületen készülő alkalmazásból egy projektfájlt hozzon létre, melyet később

újra be tud tölteni. Továbbá képes legyen a projektfájlokat és a projekthez tartozó

modulokat lefordítani webszerveren futtatható állományokká. A modulok php és

javascript osztályokat tartalmaznak, melyeket a generált kód hív meg a projekt

beállításaitól függően.

1.2 Fogalmak

1.2.1 Webes lkalmazás

A statikus weboldalakat a webes alkalmazásoktól az különbözteti meg, hogy nem csak

ugyanazt az állandó tartalmat jelenítik meg, hanem a felhasználói interakció hatására,-

például bejelentkezés vagy egy fájl feltöltése esetén-, az alkalmazás erre reagál, és a

felhasználó visszajelzést kap. Illetve az alkalmazás üzemeltetéséhez nem szükséges

emberi beavatkozás, a legtöbb feladatát önállóan látja el.[1]

1.2.2 Fejlesztőkörnyezet

A fejlesztőkörnyezet egy olyan eszköz, mely tartalmazza azokat az eszközöket, melyek

egy alkalmazás létrehozásához szükségesek. Többek között a szükséges

kódkönyvtárakat, grafikus felületet és általában a fordítóprogramot.


6/82

2

1.2.3 Fordítóprogram

Ha a forrásnyelv egy magasszintű nyelv és a számítógép által végrehajtható gépi kód

nagyon különböznek egymástól, akkor ezt valahogy át kell hidalni. Az egyik megoldás az,

hogy a magasszintű nyelven megírt programból egy alacsonyabb szintű programotkészítünk. Az ilyen átalakítást végző fordítóprogramot compiler nek nevezzük.[2]

Jelen esetben a magasszintű nyelv egy vizuális leíró nyelv, a végrehajtható kód pedig a

PHP kód. A fejlesztőkörnyezet compilere pedig a vizuális nyelvről fordít PHP nyelvre.

1.2.4 HTML

A HTML egy olyan leírónyelv, mellyel weboldalak struktúráját írhatjuk le, és ami alapján

a böngésző majd megjeleníti azt.

1.3 feladat értelmezése

Amikor először próbáltam megoldást találni a feladatra, elkezdtem kutatni a meglévő

megoldások után, hogy megfigyeljem, hogy a többi fejlesztőeszköz milyen módon teszi

lehetővé a webes alkalmazásfejlesztést.

A legtöbb eszköz csupán statikus weblapok (html fájlok) előállítására volt alkalmas.

Ennél fejlettebb, és kiforrottabb megoldás volt a WordPress és a Joomla, melyekkel márlétre lehet hozni dinamikus weboldalakat, illetve bővíthetőek számos komponenssel.

Egy dolgot viszont ezek az eszközök sem tudnak nyújtani: ha a felhasználó egy olyan

egyedi alkalmazást, vagy funkciót kíván megvalósítani, amit jelenleg egyik komponens

sem nyújt, akkor programkód írása nélkül nem tudja elkészíteni azt.

Tovább kutatva egy nem várt helyen találtam rá a megoldásra: az EpicGames Inc. által

fejlesztett UnrealEngine-ben. Az UnrealEngine egy számítógépes játék készítésére való

fejlesztőeszköz, mely tartalmaz egy vizuális szkriptnyelvet. A 3-as verzióban jelent meg

először ez a lehetőség Kismet néven, majd a 4-es verzió ugyanennek a továbbfe jlesztett

változatával érkezett BluePrint néven. Használatával a programot teljesen vizuálisan,

programkód írása nélkül állíthatjuk elő. A szerkesztőfelületre betölthetjük a használni

kívánt funkciókat. Megjelennek a neveik, és a be- illetve kimeneti paramétereik. Ezeket

a funkciókat összekötve lehet elkészíteni egy-egy funkciót.[3]

A vizuális szkriptnyelvek használata lett így a legkézenfekvőbb megoldás. A BluePrint-et

mintául véve készítettem el a fejlesztőkörnyezetet annyi különbséggel, hogy most egy


7/82

3

webes környezetre kell alkalmazást készíteni vele, nem pedig egy játékot. A

fejlesztőkörnyezetet továbbá képessé tettem arra, hogy a már korábban megírt

programot a felhasználó felhasználja, illetve igénybe vegye annak funkcióit. Ezt hívjuk

modulnak, vagy külső könyvtárnak. Továbbá készítettem még néhány olyan modult, amiszükséges lehet egy alkalmazás számára, hogy a felhasználó ne csak a PHP alapból

elérhető funkcióit használhassa.

1.4

lkalmazott technológiák

1.4.1 Web Components

A Web Components olyan technológiák gyűjteménye, melyekkel saját widgetek

(komponensek) definiálhatóak webes környezetre. Szakdolgozatom írásakor csak a

Google Chrome böngésző támogatja teljes körűen, viszont a nem támogatott

böngészőkre is elérhető egy függvénykönyvtár, mellyel működnek a rá hivatkozó kódok,

ez került felhasználásra a projektemben is.[4] A Web Components négy részből tevődik

össze:

- CustomElements

- HTML Templates

-

Shadow DOM

- HTML Imports

A felsorolt négy technológia közül a CustomElements került felhasználásra a projektben.

A CustomElements annyit jelent, hogy a HTML eddig meglévő elemei mellé saját

elemeket is létrehozhatunk.[5] Mielőtt a HTML 5-ös verzióját kidolgozták, a weboldalak

nagy része csak DIV elemekből állt, mely nem rendelkezett semmilyen tulajdonsággal:

úgy jelent meg, ahogy a CSS stíluslapokkal megformázták, és javascript segítségével

lehetett a viselkedését definiálni. Ha szükség van az elemek egy osztályára, például egy

blogon a bejegyzések csoportjának elkülönítésére, hogy azokat egységes

stílusdefiníciókkal ruházzuk fel, akkor lehetőség van egy vagy akár több osztálynév

megadására a class attribútumban.

Az elemek elkülönítése már megoldott volt az osztálynevek segítségével, viszont

továbbra is DIV elemekből állt az oldalak döntő része, ami a forráskódot nézve nem

árulkodik annak tartalmáról, illetve funkciójáról. Éppen ezért a HTML 5 -ös verziójában


8/82

4

bevezetésre került több szemantikai elem is, melyek funkcionálisan nem nyújtottak

többet a DIV-nél, viszont beszédes nevük miatt utaltak az oldalban betöltött szerepükre.

A NAV elem például a navigációs linkeket tartalmazza, HEADER a fejlécet, FOOTER a

láblécet. A stílusdefiníciókhoz már nem volt feltétlenül szükséges az osztálynevekhasználata, vagy az elemek azonosítójára (id) való hivatkozás. Az új szemantikai elemek

használata megkönnyíti a kód olvashatóságát, és a keresőrobotok hatékonyságát is.[6]

A weboldal forrásának szemantikai felépítése és az egyszerűbb stílusdefiníciók már

megoldottak voltak. Viszont még nem volt lehetőség saját, eddig nem létező elemek

definiálására. Például egy webáruházban a termékeknek, vagy egy fórumban a

hozzászólásoknak. Az elemek viselkedésének leírása osztályonként továbbra is

körülményes volt, erre jelentett megoldást a CustomElements technológia, melynek

segítségével egyedi névvel ellátott, egyedi viselkedésű és stílusú elem-osztályok írhatóak

le. Definiálható a létrejöttükkor és az eltávolításukkor, illetve az attribútumaik

változásakor bekövetkező esemény is.[7]

A program grafikus felhasználói felületét szinte teljes mértékben CustomElement

használatával építettem fel. Minden osztály viselkedését, és tulajdonságait előre

definiáltam, így a projekt logikai része már nem tartalmaz semmilyen interakciót

közvetlenül magával a HTML dokumentummal, csupán ezekkel a definiált osztályokkal,

mint például a menü, a projekt fájlokat megjelenítő fa struktúra, vagy a vizuális

fejlesztést lehetővé tevő dobozok, és az azokat összekötő görbék.

1.4.2 File API

A File API egy olyan interfészt nyújt, mellyel lehetőség nyílik az adatok szerverre történő

feltöltése nélkül, kliens oldalon a felhasználó böngészőjében fájlokat beolvasni. A

megnyitott fájlokat szövegként, vagy akár pufferekkel is be lehet olvasni.[8] A

projektben csak a szöveges beolvasásra volt szükség, mivel a projektfájlok JSON

formátumban kerültek eltárolásra. A JSON fájlok objektummá alakítását már a JavaScript

beépített JSON könyvtára végezte el.

Projektfájl mentését a ’saveAs’ funkció végzi. Szakdolgozatom megírásakor még nem

támogatott minden modern böngészőben ez a funkció, ezért egy a nem támogatott

böngészőkbe a funkciót implementáló könyvtárat használtam fe l hozzá. (FileSaver.js)[9]


9/82

5

2. Felhasználói dokumentáció

2.1 Bevezetés

A felhasználói dokumentációban a rendszerkövetelményeket a program telepítését,

azaz a f uttatásához szükséges lépéseket és a program használatát mutatom be.

2.2 Rendszerkövetelmények

A program futtatásához, illetve a program által előállított kód futtatásához egy HTTP

kiszolgáló, PHP és MySQL szükséges. A XAMPP projekt egy telepítőn keresztül kínálja az

összes szükséges komponenst, így ennek a követelményeit vettem alapul:[10]

2.2.3 Operációs rendszer:

-

Windows 2008, 2012, Vista, 7, 8 vagy újabb

- Debian, RedHat, CentOS, Ubuntu, Fedora, Gentoo, Arch, SUSE Linux

- Mac OS X 10.6 vagy újabb

2.2.4 Böngésző

A program Google Chrome böngészőben lett kialakítva és tesztelve, így ez az ajánlott

böngésző is, ahol minden funkció elérhető. A főbb funkciók úgy kerültek kialakításra,

hogy a legújabb böngészőkben ugyanúgy probléma nélkül fussanak. Ezen böngészők:

- Google Chrome 42

- Mozilla Firefox 37

- Internet Explorer 11

2.2.5 PHP

A szerveroldali kódok futtatásához PHP 5.3-as verzió szükséges.

2.2.6

jánlott követelmények:

A megadott operációs rendszereknek is van minimális rendszerkövetelménye, amin a

program elméletileg futtatható, viszont nem állt módomban minden lehetőséget

letesztelni, így egy ajánlott rendszerminimumot tudok ajánlani, amin biztosan

akadálytalanul fog futni az alkalmazás:

- 4GB RAM

-

2,4 GHz dual-core processzor- 1366x768 képernyőfelbontás


10/82

6

2.3 Telepítés

Magának a fejlesztőkörnyezetnek a futtatásához csupán egy HTTP kiszolgáló és egy PHP

értelmező telepítése és konfigurálása szükséges. De mivel a fejlesztés egyik célja az volt,

hogy laikusok is egyszerűbben tudják igénybe venni, ezért egy webfejlesztéshezösszeállított programcsomag, a XAMPP telepítésével mutatom be, hogy hogyan lehet

eljutni a futtatásra kész állapotba.

A projekt legfrissebb verziója elérhető online is a http://visualscripting.net címen. Ha

viszont a projekt jelenlegi változatát kívánja használni a felhasználó, vagy

internetkapcsolat nélkül, illetve helyi hálózaton is elérhetővé kívánja tenni, akkor

szükséges a saját szerver beüzemelése, melynek lépései a következőek:

Töltsük le a XAMPP legújabb változatát, majd futtassuk a telepítő varázslót. Válasszunk

ki a telepítéskor minden elérhető komponenst. Miután végzett a telepítő, nyissuk is meg

a programot. Ha a rendszer újraindítását kéri előtte, akkor tegyünk úgy.

Ha megnyitottuk a vezérlőpanelt, indítsuk el az Apache-ot, ha még nem fut. Nyissuk meg

továbbá a mappát, ahova telepítettük a szervert és keressük meg a htdocs mappát.

Készítsünk róla biztonsági másolatot, majd töröljük ki a tartalmát és másoljuk bele a CD

mellékleten található fájlokat.

Esetenként szükséges lehet a php.ini fájl módosítása. A WebApp modulhoz engedélyezni

kell a php_gd2.dll és php_exif.dll extensionöket.

Navigáljunk a webböngészővel a http://localhost címre, és ha mindent megfelelően

csináltunk, akkor megjelenik a fejlesztőkörnyezet.


11/82

7

2.4 A felhasználói felület

2.4.1 Áttekintés

A program a könnyű kezelhetőség és az átláthatóság figyelembevételével négy fő

blokkból tevődik össze. Felül helyezkedik el egy menüsor, alatta pedig háromátméretezhető panel, melyeket az alábbiakban részletesebben is megismerhetünk.

Alapesetben üresek, ugyanis nincs egy projekt sem betöltve.

Kattintsunk a File menüre, majd itt a New Project gombra. A megjelenő menüben

válasszuk ki az első PHP projektet, majd kattintsunk a Create gombra. Az eddig üres

panelekbe betöltődnek a projekt f ájljai, és annak tulajdonságai:

A bal felső panelen láthatjuk az aktuális projekt objektumait. Az alatta lévő panelen

pedig az épp kijelölt objektum tulajdonságai tekinthetőek meg, amik szerkeszthetőek. A

projekt objektumai közt a funkciókat, vagyis a végrehajtandó feladatokat az f(x)

szimbólum jelöli. Ezeket a funkciókat tudjuk majd szerkeszteni. Kattintsunk rá kétszer,

hogy megnyissuk a jobb oldali panelen:

1. ábra: Üres projekt


12/82

8

2.4.2 Menü

A menüsor három menüpontot tartalmaz, melyek közül az első további almenükre

bomlik, ha fölé visszük a kurzort:

- File: Ebben a menüben érhetőek el a projekttel kapcsolatos fájl megnyitási , illetve

mentési műveletek. További öt almenüt tartalmaz:

o New Project: Új projekt készítése

o Open project: Korábban elmentett projekt megnyitása

o Save Project: Projekt elmentése

o

Export Project: Projekt lefordítása webszerveren futtatható állományokká

o Close Project: Projekt bezárása, a felület visszaállítása alaphelyzetbe

- Help: Az alábbi dokumentáció tölthető le elektronikus formában.

- Contact: Az elérhetőségeimet tartalmazza arra az esetre, ha valaki kapcsolatba

szeretne lépni a projekt készítőjével.

A fájl megnyitási, illetve mentési műveletek mind a böngésző fájltallózó ablakát hívják

elő. Kivétel az új projekt készítése, ahol nem a felhasználó böngészőjén keresztül

történik fájlművelet, ugyanis ebben az esetben egy doboz jelenik meg a kiválasztható

sablonokkal, illetve az adott programozási nyelv (jelen esetben mindenhol PHP)

ikonjával:

2. ábra: Szerkesztőfelület


13/82

9

Egy sablont kijelölve alul megjelenik annak leírása. A Close gombbal bezárhatjuk a

dobozt, a Create gombra kattintva pedig betöltődik a kiválasztott sablon.

2.4.3 Projektfa

Vizuálisan megjeleníti a projekt elemeit egy fa struktúrába rendezve. Legfelső szinten

található az úgynevezett platform, ami egy programozási nyelvet jelent egy adott

környezetben. Jelen esetben egy platform áll rendelkezésre, ami egy szerveroldali

alkalmazás PHP nyelven. Az első eleme a platformnak a Libraries nevű mappa, ami a

platformra betöltött könyvtárakat tartalmazza. Ezután szerepelnek a névterek,

osztályok, funkciók és változók egymás alá rendezve aszerint, hogy melyik elem

melyikeket tartalmazza. Az elemekre egyszeri kattintással az adatmódosító panelbe

betöltődnek az adott elem adatai. Jobb gomb lenyomásával egy környezeti menü jelenik

meg, mely az elemen elérhető funkciókat tartalmazza. Ha az elem egy funkció, akkor

dupla kattintással megnyílik szerkesztésre a szerkesztőfelületen.

Ez az alfejezet magát a Projektfa szerkezetét hivatott bemutatni. A projekt részletes

leírása a Projekt fejezetben olvasható.

2.4.4 datmódosító panel

Egy dupla oszlopú táblázat, melyben a bal oldali oszlop egy tulajdonság nevét, a jobb

oldali táblázat pedig a hozzá tartozó értéket, illetve annak módosítását lehetővé tevő

szerkesztőt tartalmazza. Alapesetben projekt létrehozásakor a projekt adatai, egyébként

pedig a Projektfában kijelölt elem tulajdonságai jelennek meg benne.

3. ábra: Új projekt létrehozása


14/82

10

Öt féle adattípus szerkeszthető a panelen:

- Szöveg: A szövegre kattintva az szerkeszthetővé válik

- Szám: A számra kattintva az szerkeszthetővé válik a böngészőben elérhető

számbeviteli mezővel

- Kapcsoló: Igaz/hamis érték (angolul: boolean), mely pipálható dobozként jelenik

meg

- Lista: Egy legördülő lista a választható lehetséges értékekkel

- Egyéb: Szövegesen megjelenítni az aktuális értéket, illetve még tartalmaz egy

gombot, melyre kattintva az megváltoztathatóvá válik

2.4.5 Szerkesztő

panel

A szerkesztőpanel egy több szerkesztőt is tartalmazó panel, melyek között fülekkel

válthatunk. A szerkesztő továbbá dobozokat tartalmaz, melyeket az egér lenyomásával

tudunk mozgatni. Egy dobozra kattintáskor az kijelöltté válik. Ha a control gombot

lenyomva tartjuk, akkor több doboz is kijelölhető, illetve a kijelölés megszüntethető. A

delete gombot lenyomva törölhetőek a kijelölt dobozok. A doboz tartalmazhat egy

címsort, alatta pedig a be-, illetve kimenetek szerepelnek. Mindegyik be- és kimenet

tartalmaz egy ikont, melynek színe a típusát jelöli, illetve egy címet vagy esetenként egy

szerkesztőt. A bemenetek a kimenetekkel vonalakkal köthetőek össze. Egy bemenet

ikonjára jobb egérgombbal kattintva megszűntethetőek az oda mutató vonalak, illetve

a kimenetre jobb egérgombbal kattintva a belőle kiinduló vonalak. A bal egérgombot

lenyomva tartva egy ikonon, onnan vonal indítható, majd egy másik ikon felett az

egérgombot elengedve létrejön a kapcsolat a be és kimenet közt, amennyiben minden

feltételnek megfelelnek. Ha az adott doboz egy feladatot jelöl, akkor tartalmaz még egy

sort a címsor alatt, mely az előző illetve a következő feladatra mutat.

Ez az alfejezet magát a Szerkesztőpanel szerkezetét hivatott bemutatni. A projekt

részletes leírása a Funkciószerkesztő felépítése fejezetben olvasható.


15/82


16/82

12

2.5.3 Névtér

A névtér nem más, mint egy mappa, amely további névtereket (mappákat), illetve

elemeket tartalmazhat. Névtér csak egy másik névtér alatt, vagy egy platform alatt

hozható létre.

2.5.4 Osztály

Az osztály olyan funkciók és változók összessége, melyek logikailag egy egységbe

tartoznak. Az osztály mintájára példányok hozhatóak létre. Hogy könnyen érthető

legyen, a következő példát érdemes megjegyezni: Legyen például az „ember” az osztály.

Ekkor ez az osztály nem az egyes emberekre utal, hanem az emberre , mint fogalomra.

Az egyes személyek pedig az ember osztály „példányai”, mivel mindegyikük ember.

Minden osztály rendelkezik egy névvel. Definiálható egy osztály konstruktor, mely nem

más, mint egy új példány létrehozásakor végrehajtódó funkció. Továbbá ha rendelkezik

az osztály egy statikus, main nevű funkcióval, akkor futtathatóvá válik. Tehát PHP esetén

a böngészővel ránavigálva tudjuk futtatni a programot.

2.5.5 Funkció

A funkció egy parancs, vagy függvény, mely egy előre definiált feladat végrehajtására

hivatott. Minden függvény rendelkezik egy névvel. A függvény lehet statikus, vagy nem

statikus. Ha statikus, akkor a feladat amit végrehajt, az osztályra vonatkozik. Ha nem,

akkor pedig egy adott példányra. Például ha az emberes példára gondolunk, akkor az

ember magasságának lemérése egy nem statikus feladat, mivel egy adott emberre

vonatkozik. Viszont az emberiség átlagéletkorát kiszámító feladat egy statikus funkció

lesz. Minden funkció rendelkezik továbbá egy láthatóság (visibility) adattal, mely lehet

publikus, (public) vagy privát (private). Ha egy funkció privát, akkor csak az őt tartalmazó

osztály funkcióiból hajtható végre, ha publikus, akkor bárhonnan. Minden funkció

rendelkezhet egy kimeneti, és akár több bemeneti értékkel is. A bemeneti értékek,

(input) vagy más néven attribútumok a feladat végrehajtásához szükséges adatok. A

kimeneti érték (output) pedig a feladat eredménye. Például ha az a feladat, hogy mérjük

meg egy ember magasságát, akkor a bemeneti érték, hogy hüvelykben, (inch) vagy cm-

ben mérjük, a kimeneti érték pedig a szám, amit mértünk, mely az embertől és a mérés

módjától is függ. Azoknak a funkcióknak, melyek nem statikusak, az első bemeneti

értékük a példány lesz, amelyikre a feladatot végre kell hajtani.


17/82

13

2.5.6 Változó

A változó egy olyan eleme a projektnek, mely rendelkezik névvel, típussal és egy aktuális

értékkel. Lehetőséget ad, hogy eltároljunk különböző típusú adatokat, majd a változó

nevével hivatkozhatunk rá. Típusa lehet szám, szöveg, vagy akár egy osztály, aminek apéldányát tárolni szeretnénk. A funkcióhoz hasonlóan rendelkezik láthatósággal és lehet

statikus is.


18/82

14

2.6 Funkciószerkesztő felépítése

A 2.4.5 pont alatt a szerkesztő grafikai megjelenése, ebben a fejezetben pedig a funkciói

és használata kerül bemutatásra. A funkciószerkesztő dobozokat tartalmaz, melyeket

vonalak kötnek össze. Nevezzük a dobozokat ezentúl node-oknak. Nyolc féle nodelétezik:

- Start node: A kiinduló node, ahol a feladat végrehajtása kezdődik. Rendelkezik a

végrehajtható funkciókat jelölő első sorral, de csak a következő funkcióra mutató

ikon jelenik meg rajta. Előzőre mutatót nem tartalmaz.

- Végrehajtható funkció: Egy olyan funkció, melyet végre szeretnénk hajtani. Az

előző illetve a következő funkcióra a mutatót aszerint állítsuk be, hogy mikor

hajtódjon végre.

- Nem végrehajtható funkció: Egy olyan funkció, melynek felhasználásra kerül a

kimeneti értéke egy másik funkció bemeneteként. Nem adható meg, hogy melyik

funkció előtt vagy után fusson, csak az, hogy a kimeneti érték hol kerüljön

felhasználásra.

- Változó módosítása (SET): Egy adott változó értékét változtatja meg a kapott

bemeneti értékre. Végrehajtható funkcióként jelenik meg, megadható a

következő és előző végrehajtandó feladat.

- Változó értékének lekérdezése (GET): Egy változó értékét adja vissza

kimenetként. Úgy viselkedik, mint egy nem végrehajtható funkció.

- Új példány létrehozása (create): Új példányt hoz létre egy adott osztályból, vagy

típusból. Osztály esetén a bemenetek a konstruktor paraméterei lesznek, a

kimenet pedig a létrehozott példány. Szöveg, szám, vagy kapcsoló esetén pedig

a bemeneti érték helyett egy szerkesztőfelület jelenik meg, melyen beállítható aváltozó értéke. A kimenet pedig maga a létrehozott változó lesz.

- Elágazás (branch): Egy olyan node, aminek bemeneti paramétere egy kapcsoló.

Kimeneti értéke nincs, viszont nem csak egy kifelé mutatóval rendelkezik, hanem

kettővel; aszerint, hogy igaz vagy hamis, másik funkció fog végrehajtódni utána.

- Ciklus (forloop): Egy ciklus, ami azt jelenti, hogy egy megadott feladatot többször

is végrehajt. Bemenetkért két számot vár: egy kezdő (from) és egy befejező (to)

értéket. A többször végrehajtandó funkciót a loop nevű ágba kell kötni. A ciklus


19/82

15

végiglép minden számon, beleértve a megadott kezdő befejezőt is és lefuttatja a

megadott feladatot, ami az aktuális számot a kimenetből tudja elérni. A

futtatható funkcióhoz hasonlóan megadható a ciklus befejeződése után

végrehajtandó feladat.

Új nodeot egy szabad helyre való jobb kattintással hozhatunk létre. Ekkor előugrik egy

környezeti menü, ahol rákereshetünk a kívánt elemre. Legfelül az elágazás és a ciklus,

alatta a meghívható funkciók, az alatt pedig a példányosítható osztályok és az elérhető

változótípusok jelennek meg. Legvégül az elérhető változók listája található, melyekhez

lekérdező, és módosító node-ok készíthetőek. Ha egy funkciót választunk, és annak van

kimeneti értéke is, akkor a program megkérdezi, hogy végre akarjuk hajtani, vagy csak a

kimenetét használjuk fel. Ennek kiválasztása után ad hozzá egy Végrehajtható funkciót,

vagy Nem végrehajtható funkciót.

Fehér színű vonalakkal a végrehajtást jelöli a program, melynek a nyíl ikon mutatja az

irányát. A végrehajtható funkciók mutatóit értelemszerűen csak egy másik funkcióra,vagy végrehajtható feladatra lehet beállítani. Csak egy következő nodeot lehet

beállítani, viszont egy node-ra akárhány másik hivatkozhat.

A be- illetve kimeneteket más-más szín jelöli. Csak azonos típusúakat lehet összekötni,

kivéve, ha a bemenet mixed típusú, mert akkor bármilyen bemenetet elfogad. Egy

bemenetre csak egy kimenet mutathat egyszerre, viszont egy kimenetből több vonal is

kiindulhat.

4. ábra: Példa egy ciklusra


20/82

16

Az alkalmazott színjelölések a következők:

- szöveg (string): lila

- egész szám (integer): világoskék

-

törtszám (float): világoszöld

- kapcsoló (boolean): zöld

- vegyes (mixed): szürke

- osztály példány (instance): kék

A fejlesztőkörnyezet színben nem tesz különbséget különböző osztályok példányai közt,

viszont a be- és kimenetek összekötésekor figyeli azt.


21/82

17

2.7 Egy projekt készítésének bemutatása

Az alábbi fejezetben egy projekt készítése kerül bemutatásra modulok használata nélkül.

2.7.1 Projekt létrehozása

Új projektet létrehozni a File menüben a New Project almenüre kattintva hozhatunk

létre. A megjelenő ablakban válasszuk ki az első PHP ikont, majd kattintsunk a Create

gombra. Ekkor létrejön egy új projekt, és betöltődik a programba. Megjelennek az

elemek a baloldalon a Projektfában és alatta a projekt tulajdonságai. Ha már korábban

készítettünk egy projektet és azt folytatnánk, akkor azt az Open Project almenüre

kattintva tölthetjük be.

2.7.2 Feladat összeállítása

Készítsünk egy olyan programot, mely összeadja 1-től 10-ig a számokat, majd kiírja az

eredményt. Nyissuk meg a main függvényt szerkesztésre, majd töröljük ki a start node

kivételével mindegyik nodeot.

Ha szeretnénk egy számot tárolni, jelen esetben a számítás rész- illetve végeredményét,

akkor ahhoz egy változóra lesz szükség. A projektfában a main függvényre jobb gombbal

kattintva nyissuk meg a környezeti menüt és válasszuk ki az új helyi változó opciót (add

local variable). Miután létrehozta, kattintsunk rá és változtassuk a nevét „osszeg”-re a

típusát integer-re (ST::integer). A::ST azt jelöli, hogy a PHP standard könyvtárából való a

típus.

Ha egy 1-től 10-ig szeretnénk összeadni a számokat, ahhoz egy 1-től 10-ig futó ciklusra

lesz szükség. Hozzuk létre, és kössünk be paraméternek két újonnan létrehozott számot

1 illetve 10 értékkel. A ciklus minden lépése során hozzáadjuk az aktuális számot az

összeghez, így végül az összeg változó tartalmazza a végeredményt.

Az összeadáshoz egyszerűen csak írjuk be a keresőbe angolul, hogy egész szám

összeadás (integer summation). Válasszuk ki, hogy csak a kimenetet használjuk fel.

Bemenethez kössük be a ciklusváltozót (index) és az összeg változót. Az összeg változó

értékét úgy kérhetjük le, hogy a keresőbe beírjuk az „osszeg” szót, kiválasztjuk a

változót, majd a GET-re kattintva megkapjuk a kívánt dobozt, melynek kimenete az

összeg lesz.


22/82

18

Keressünk rá újra a változóra, de most hozzáadáskor a SET-et válasszuk ki. Bemenetnek

kössük be az összeadás kimenetét, és Loop-nak pedig magát a funkciót. Ha ezzel

végeztünk, akkor elkészült a ciklus, mely összeadja a számokat. Viszont nem működik

még, mivel nincs bekötve a START-hoz, és nem jelzi a végeredményt sem.

Kössük össze a START nodeot a ciklussal. Keressünk rá az „echo” kulcsszóra. Ez a parancs

ír ki adatot a PHP nyelvben a képernyőre. Bemenetként egy szöveget vár, így nem tudjuk

közvetlenül bekötni az összeget, át kell alakítani azt számmá. Keressünk rá a „strval”

kulcsszóra, mely egy bármilyen típusú változót alakít szöveggé. Vezessük rajta keresztül

az összeg értékét, majd kössük az echo nodehoz. Kössük be a kiíratást végző feladatot a

ciklus után, és így el is készült a program:

5. ábra: Ciklus alkalmazása

6. ábra: Számítás végzése ciklussal, majd az eredmény kiírása a képernyőre


23/82

19

2.7.3 Projekt fordítása (Exportálás)

A projektet úgy fordíthatjuk le PHP fájlokká, hogy rákattintunk a File menü Export

Project almenüjére. Rövid időn belül a böngésző elkezdi letölteni az elkészült

alkalmazást ZIP fájlba tömörítve. A generált kód az alábbiak szerint van rendezve:

- Legfelül a platform mappája látható

- A platform mappáján belül találhatóak annak névterei, és könyvtárai

hierarchikusan elrendezve

- Minden osztályból egy külön PHP fájl készül, mely neve az osztály neve,

kiter jesztése pedig PHP

2.7.4 Lefordított projekt futtatása

Csomagoljuk ki a kapott tömörített fájlt a webszerverünk egy mappájára, majd nyissuk

meg a böngészőben, és navigáljuk a php/MySite mappára. A képernyőn ekkor egy 55-ös

szám jelenik meg, ami a számítás végeredménye.


24/82

20

2.8 Web pp modul használata

A fejlesztőkörnyezet lehetőséget kínál a programozók által fejlesztett külső könyvtárak

(modulok) hozzáadására. Viszont elérhető egy WebApp nevű modul, mely nagyon

alapvető funkciókat biztosít egy egyszerű webes alkalmazás létrehozásához. WebApp

modult tartalmazó új projektet a New Project menüre kattintva, a második lehetőséget

kiválasztva lehet létrehozni. Tartalmaz továbbá a fejlesztőkörnyezet egy mintaként

megírt egyszerű csevegő alkalmazást, melyet a harmadik lehetőségre kattintva

tölthetünk be. A WebApp modul funkcióinak elsajátítása közben lehet átnézni, ugyanis

használja annak majdnem minden funkcióját.

A továbbiakban a modul osztályai és funkciói kerülnek bemutatásra:

2.8.1 Database

A database osztály az adatbázist kezeli. Az adatbázis célja, hogy adatokat tárolhassunk a

számítógépen táblázatokba rendezve. Például a felhasználók listája egy táblázat, vagy

tábla (table) az adatbázisban. Sorai a felhasználók, oszlopai pedig a felhasználó egy-egy

tulajdonsága. Például név, email cím, jelszó. Az adatbázis-kezelő osztály öt fő funkciót

tartalmaz:

- runQuery: Egy adatbázis művelet végrehajtása. Paramétere a végrehajtandó

művelet.

- numberOfRows: Megadja, hogy a legutóbb végrehajtott adatbázis művelet

eredménye hány soros. Például ha szeretnénk megtudni, hogy hány felhasználó

múlt el 18 éves, akkor az, hogy összegyűjtsük a 18 év felettieket az egy adatbázis

művelet. A kigyűjtött elemek számát pedig ezután az előbbi funkcióval

kérdezhetjük le.

- singleResult: Amennyiben a legutóbbi adatbázis művelet eredménye egy sor, a

kimenetként visszaadja azt egy TableRow példányként. Többsoros eredmény

esetén az első sort kapjuk meg.

- nextRecord: Beolvas egy sort az adatbázis művelet eredményéből. Még egyszer

végrehajtva a funkciót már a következő sort fogja visszaadni. Egy TableRow

példányt ad kimenetként.


25/82

21

- hasNextRecord: Egy igaz-hamis értéket ad vissza aszerint, hogy van-e még hátra

rekord, ami nem került beolvasásra.

2.8.2 CreateTable

Táblák létrehozásáért felelős adatbázis művelet. Megadhatóak a kívánt oszlopnevek,

majd amennyiben a tábla nem létezik, létrejön az. Öt fő funkciót tartalmaz:

- addIdentifier: Azonosító hozzáadása a táblázathoz. Paramétere egy szöveg, mely

az azonosítókat tartalmazó oszlop neve lesz. Az azonosító egy olyan adat, mely

egyértelműen azonosítja a táblázat egy adott sorát. Például ilyen az emberek

személyi igazolvány száma, ami szintén egyértelműen azonosít egy embert.

- addStringColumn: Szöveg tárolását lehetővé tevő oszlop hozzáadása a táblához.

Első paramétere az oszlop neve, a második pedig a szöveg maximális hossza.

- addIntegerColumn: Egész számot tároló oszlop hozzáadása a táblához. Egy

paraméterrel rendelkezik, ami az oszlop neve.

- addFloatColumn: Törtszámot tároló oszlop hozzáadása a táblázathoz. Bemeneti

értéke az oszlop neve.

- addTextColumn: Hosszabb szöveg tárolását lehetővé tevő oszlop hozzáadása.

Egyetlen bemeneti értékével az oszlop neve adható meg.

2.8.3 Insert

Az Insert egy olyan adatbázis művelet, mely új sor beszúrását teszi lehetővé egy táblába.

Így adható hozzá például új felhasználó a meglévőek közé. Fontos megjegyezni, hogy

csak akkor fog ténylegesen hozzáadódni az új sor a táblához, mikor az adatbázis

runQuery funkcióján meghívjuk. Funkciói:

- addStringValue: Szöveges érték hozzáadása. Két paramétere van: az első az

oszlop neve, ami alá az érték tartozik, a másik pedig maga az érték.

- addTextValue: Hosszabb szöveg hozzáadása a sorhoz. Két paramétere van: az

első az oszlop neve, ami alá az érték tartozik, a másik pedig maga az érték.

- addIntegerValue: Egész szám hozzáadása. Két paramétere van: az első az oszlop

neve, ami alá az érték tartozik, a másik pedig maga az érték.


26/82

22

- addFloatValue: Egy törtszám hozzáadása a sorhoz. Két paramétere van: az első

az oszlop neve, ami alá az érték tartozik, a másik pedig maga az érték.

2.8.4 Select

A Select a sorok kiválasztásáért felelős adatbázis művelet. Egyfajta szűrő, mellyel

kiválaszthatjuk előre megadott feltételek alapján a tábla megfelelő sorait. Funkciói:

- addColumn: Oszlop hozzáadása a lekérdezéshez. A végeredményben az így

megadott oszlopok fognak csak szerepelni. Ha nem adtunk meg egyet sem, akkor

mindegyik oszlop meg fog jelenni.

- addConditionEqual: Egyenlőségi feltétel hozzáadása a lekérdezéshez. Egy sor

akkor kerül bele a végeredménybe, ha megfelel a feltételnek. Az első paraméteraz oszlop, melynek értékét a második paraméterben megadott változóhoz

hasonlítjuk. Ha a sornak az oszlop alatt szereplő értéke megegyezik a megadott

változóéval, akkor igaz a feltétel.

- addConditionGreater: „Nagyobb mint” feltétel hozzáadása a lekérdezéshez. Ha

a sornak az oszlop alatt szereplő értéke nagyobb, mint a megadott változóé,

akkor igaz a feltétel.

-

addConditionLess: „Kisebb mint” feltétel hozzáadása a lekérdezéshez. Ha a

sornak az oszlop alatt szereplő értéke kisebb, mint a megadott változóé, akkor

igaz a feltétel.

- setLimit: Paraméternek egy számot vár, mellyel megadható, hogy legfeljebb

hány sort szeretnénk eredményül kapni.

- setOrder: Megváltoztatható az eredményül kapott sorok sorrendje. Két

paramétert vár: az első az oszlop neve, amely szerint sorba rendezzük a sorokat,

a második pedig egy igaz/hamis érték aszerint, hogy növekvő vagy csökkenő

sorrendben szerepeljenek.

2.8.5 Delete

A konstruktorában a Select osztálynak egy példányát várja. Kitörli a tábla azon elemeit,

melyekre teljesülnek a Select példányában meghatározott feltételek.


27/82

23

2.8.6 TableRow

Valamely adatbázisbeli tábla egy sorát ábrázolja. Önállóan nem funkcionál: az adatbázis

osztályból kérhető le egy művelet végrehajtása után a singleResult és nextRecord

funkciókkal. Három funkciót tartalmaz:

- getString: Szöveg kinyerése a paraméterül megadott oszlop alól.

- getInteger: Egész szám kinyerése a paraméterül megadott oszlop alól.

- getFloat: Törtszám kinyerése a paraméterül megadott oszlop alól.

2.8.7 Page

A Page osztály egy weblapot reprezentál. Beállítható a címe és tartalom adható hozzá.

Hat funkciót tartalmaz:

- setTitle: Megváltoztatja a weblap címét a paraméterben megadottra.

- add: Hozzáad egy új elemet az oldalhoz. Ez az elem lehet egy űrlap, szöveg,

gomb, vagy akár címsor is.

- autoRefresh: A weboldalt automatikusan frissíti a bemenetben másodpercben

megadott időközönként.

- addScript: Egy javascript fájl vagy modul hozzáadása az oldalhoz.

- addStyle: Stílisdefiníció csatolása az oldalhoz.

- setStyle: Téma kiválasztása az oldalhoz. Ha paraméter nélkül hívjuk meg, akkor a

„default ” nevű téma lesz kiválasztva.

- send: Ha már minden elemet hozzáadtunk az oldalhoz, akkor ezzel a funkcióval

véglegesíthetjük és küldhetjük el a felhasználó gépének.

2.8.8 Form

A Form osztály az űrlap, melyre a felhasználó adatokat vihet fel és be tudja küldeni aszervernek feldolgozásra azokat. Például ha egy űrlap a regisztráció, ahol ki kell tölteni

az adatokat, majd a kitöltés után beküldeni azokat. A beküldött adatokat a REQUEST

osztály segítségével lehet majd feldolgozni. Funkciói:

- setAction: A paraméterként megadott futtatható osztály main függvényének

fogja átadni az űrlap az adatokat.


28/82


29/82

25

- getString: A paraméterként megadott nevű űrlapelem tartalmát adja vissza

szövegként.

- getInteger: A paraméterként megadott nevű űrlapelem tartalmát adja vissza

egész számként. - getFloat: A paraméterként megadott nevű űrlapelem tartalmát adja vissza

törtszámként.

2.8.17 SESSION

A session magyarul munkamenetet jelent. Amint a felhasználó megnyitja a böngészőt,

egy új munkamenet indul, és akkor fejeződik be, mikor bezárja azt. Minden felhasználó

külön munkamenettel rendelkezik. A SESSION osztály lehetővé teszi, hogy egy

munkamenethez változókat adjunk hozzá és olvassuk ki azokat. Az új projekt

létrehozásakor elérhető csevegő alkalmazás is ezt használja a felhasználó nevének

tárolásakor. Ha még nem tartalmaz a munkamenet „name” nevű változót, akkor

megkérdezi a felhasználót, hogy mi a neve, majd letárolja azt. Ezután mikor a felhasználó

elküld egy üzenetet, a program már emlékezni fog a nevére. Az osztályt hét statikus

funkció alkotja, melyek az alábbiak:

-

has: Ez a funkció egy igaz/hamis értéket ad kimenetként aszerint, hogy a

munkamenet tartalmaz-e megadott nevű változót.

- getString: A paraméterként megadott nevű változó tartalmát adja vissza a

munkamenetből szövegként.

- setString: Egy szöveget ment el a munkamenet adott nevű változójába.

- getInteger: A paraméterként megadott nevű változó tartalmát adja vissza a

munkamenetből egész számként.

-

setInteger: Egy egész számot ment el a munkamenet adott nevű változójába.

- getFloat: A paraméterként megadott nevű változó tartalmát adja vissza a

munkamenetből törtszámként.

- setFloat: Egy törtszámot ment el a munkamenet adott nevű változójába.


30/82

26

2.8.18 Template

A template magyarul sablont jelent. A sablonok olyan szövegek, vagy HTML fájlok,

melyeket a program egy, vagy akár több helyen felhasznál. Ezek a sablonok úgy könnyítik

meg a fejlesztést, hogy nem kell mindenhova beírni ugyanazt a szöveget, elég csak asablonra hivatkozni és annak a tartalmát módosítani. Továbbá ha a sablonon módosítást

végzünk, akkor úgy módosíthatjuk az alkalmazást, hogy nem fordítottuk újra azt. A

WebApp modul sablonjai a szövegek tárolásán kívül lehetőséget adnak a szövegen belül

úgynevezett tag-ek megadására, melyeket {} jelek közé írunk. Ezek helyére a sablon

betöltésekor egyedi tartalmat tölthetünk be. Pé ldául ha a sablon a következő: „Hello

{username}” , akkor a username tag helyére az aktuális felhasználónak a nevét

behelyettesítve kapjuk meg a megfelelő megszólítást. Az osztály funkciói a következők:

- applyConfig: Két bemeneti értéke van. Az elsőben a sablon nevét, a másodikban

pedig a konfigurációt adhatjuk meg egy TemplateConfig példányként.

Eredményül a betöltött sablon szövegét adja, a tagek helyére a megadott

adatokat behelyettesítve.

- push: Ugyanaz a funkciója mint az applyConfig-nak annyi eltéréssel, hogy nem

adja vissza a kapott szöveget, hanem egy belső tárolóban eltárolja azt. Ha már

tartalmaz a tároló szöveget, akkor a meglévő szöveg végére illeszti.

- clear: Kitörli a belső tároló tartalmát.

- get: Visszaadja a belső tároló tartalmát szövegként, és kiüríti azt.

- send: A belső tároló értékét a képernyőre írja.

2.8.19 TemplateConfig

Ennek az osztálynak a példányai tartalmazzák a sablonokra vonatkozó konfigurációs

adatokat. Eltárolhatók benne név-érték párok, melyek egy adott sablonba

behelyettesíthetőek lesznek. Az osztály a következő funkciókat biztosítja:

- add: Egy új név-érték pár hozzáadása. Az első paraméter a név, a második az

érték.

- remove: A paraméterben megadott nevű érték törlése.


31/82

27

A Template osztálynak a push és applyConf funkciói várnak bemenetként egy

TemplateConfig példányt. A sablon felhasználása után a konfiguráció nem veszik el,

annak beállításait bármikor újra lehet alkalmazni egy sablonra.

2.8.20 File Media)

Szerveroldalon a fájlok kezeléséért felel. Két funkció segítségével tud fájlt betölteni:

- loadFromUpload: A paraméterben átadott néven feltöltött fájlra fog hivatkozni.

- loadFromPath: A megadott elérési úton elérhető fájlra fog hivatkozni.

Egy File osztály példányán ellenőrizhető hogy létezik-e a hivatkozott fájl ( fileExists),

továbbá átmozgatható egy másik könyvtárba (moveTo).

2.8.21 Image Media)

Szerveroldali képkezelő osztály. Paraméterként egy File példányt vár. Az osztály a

következő funkciókat biztosítja:

- isImageValid: Ellenőrzi, hogy a konstruktorban átadott fájl képfáj-e.

- saveToPNG: Kép eltárolása PNG formátumban a megadott elérési útvonalra.

- storeIn: A kép eltárolása a megadott mappába. A kép neve véletlenszerűen

generálódik, melyet a getPath metódussal lehet később ellenőrizni.


32/82

28

2.9. Csevegő alkalmazás

Az új projekt készítésekor betölthető harmadik minta alkalmazás egy csevegő

alkalmazás, mely tartalmazza a WebApp modul legtöbb elemét.

Az alkalmazás két oldalt tartalmaz. A csevegőt és egy rövid leírást ( About ). A

VisualScripting menüpont a fejlesztőkörnyezet online elérhető változatára mutat.

7 . ábra A csevegő alkalmazás forrása a fejlesztőkörnyezetben

8 . ábra Az exportált csevegő alkalmazás futás közben


33/82

29

Mikor egy új felhasználó érkezik az oldalra, az alkalmazás kéri a nevét. Ezután az ő általa

írt üzenetek előtt a megadott név fog szerepelni. Lehetőség van szövegen kívül képeket

is beküldeni. 10 másodpercenként újratöltődnek az üzenetek.

Mivel a WebApp modul felhasználásával készült, ezért nem volt szükség a

szerveroldalon az SQL injection és kliens oldalon az XSS támadások elleni felkészülésre.

Az adatbázis a database interfész osztályain keresztül érhető el, melyek ellenőriznek

minden bemenetet. Az element interfész osztályai pedig minden szöveges tartalmat a

htmlspecialchars funkción keresztül továbbítanak a HTML kódba.


34/82

30

3. Fejlesztési dokumentáció

A fejlesztési dokumentáció négy fő fejezetből áll. Az első fejezet a kitűzött feladatokat

és azoknak a lehetséges megoldásait vizsgálja. A második fejezet a program főbb

használati eseteit részletezi. Ezután kerülnek bemutatásra a programot alkotó osztályok

és struktúrák, majd az utolsó fejezetben a tesztelés.

Még a fejlesztés menetének részletes leírása előtt érdemes megjegyezni, hogy a vizuális

fejlesztés módját és a fejlesztőkörnyezet design- ját is az UnrealEngine4 inspirálta.

Nagyon sok hasonlóság fedezhető fel közöttük ebből kifolyólag. Viszont az UnrealEngine

játékok fejlesztésére készült, C++ modulokkal bővíthető, és a fejlesztőkörnyezet is C++ -

ban íródott. Éppen ezért is a szakdolgozatban nem került felhasználásra az Unrealprogramkódjának semmilyen része sem, csupán néhány vizuális fejlesztést lehetővé

tévő ötlet, illetve a grafikus felhasználói felület színvilága.

3.1 kitűzött feladatok, és megvalósításuk

A feladat egy programkód írása nélkül is használható fejlesztőkörnyezet létrehozása,

mely webes alkalmazás létrehozását teszi lehetővé akár programozáshoz nem értő

felhasználóknak is. A fejlesztőkörnyezet modulokkal bővíthető legyen, és képes legyen

projekteket menteni, illetve újra betölteni. Először a feladatot részfeladatokra

bontottam:

- Projekt szerkezetének megtervezése, annak fájlba írása, és fájlból olvasása

- Programkód írása nélküli fejlesztés megvalósítása

- Projekt fordítása webes alkalmazássá (webszerveren futtatható állományokká)

- Egy könnyedén használható modul készítése, mellyel a kezdő felhasználók is

képesek egyszerűbb alkalmazásokat létrehozni

Mindegyik részfeladat az alábbi felsorolásban az előtte szereplőre épül és ebben a

sorrendben kerültek megvalósításra. Mindegyik részfeladat komoly tervezést és

átgondolt megvalósítást igényel. A következőkben ezekről lesz szó egy-egy alfejezetben.


35/82

31

3.1.1 Projektfájl

A projektfájl szerkezetének megvalósításakor először össze kell gyűjteni, hogy mi

mindent is akarunk eltárolni, és ezek az eltárolandó elemek hogyan viszonyulnak

egymáshoz. A projektnek tartalmaznia kell először is az önmagára vonatkozó adatokat:

- Projekt neve

- Projekt verziója

- Szerző neve

A projekten belül kell szerepelniük az alkalmazás elemeinek. A későbbi fejleszthetőséget

szem előtt tartva bevezettem a platform jelölést. A platform egy programozási nyelvet

jelöl (jelen esetben PHP) mely egy elkülönített egységet alkot a projekten belül.Tartalmazza a benne létrehozott elemeket, és a betöltött könyvtárakat (modulokat). Az

elemek az alábbiak lehetnek:

- Névtér

- Osztály

- Funkció

- Változó

A funkciókon belül további elemek is eltárolásra kerülnek, melyek a vizuális fejlesztést

lehetővé tevő szerkesztőfelület állapotát írják le.

Mivel a fejlesztőkörnyezet is webes környezetben készül, ezért érdemes egy a webes

platformon könnyen feldolgozható adatstruktúrát választani. Két ilyen lehetőség áll

rendelkezésre: az XML és a JSON. Mindkét típus alkalmas a projektadatok tárolására,

viszont a JSON feldolgozását a Javascript natívan támogatja oly módon, hogy közvetlenül

saját objektummá alakítja, így erre esett a választás.

A projekt elemeinek a hierarchiája adott, viszont a rengeteg fajta objektumot a

feldolgozhatóság megkönnyítése érdekében érdemes csoportosítani, és a hasonló

elemeket egy osztályba szervezni. A Javascript nyelv ugyan objektumorientált, de nem

lehet úgy osztályokat definiálni, mint a Java esetén. Egy prototype nevű objektum

módosításával érhető el a funkciók osztályszerű viselkedése. Ebből kifolyólag interfészek

sem készíthetőek. A funkcióikban nagyon hasonló elemeket így egy osztályba


36/82

32

szerveztem, de adattagjaikban továbbra is elérhető minden tulajdonságuk, többek

között az adott elem fajtája is. Végül a következő osztályok jöttek létre:

- Object: Egy platform alá tartozó objektum, mely lehet névtér, osztály, funkció,

vagy változó.

- Platform: Az alá tartozó elemek, egy programozási nyelv, és a hozzá betöltött

könyvtárak összessége.

- Library: Más néven könyvtár, vagy modul, egy kívülről betölthető

kódgyűjtemény, melynek funkciói a projektben felhasználhatóvá válnak.

- Node: A szerkesztőfelületen a funkció utasításait leíró blokk.

A JSON előnye, hogy mentéskor egyszerűen kiírhatjuk az adatokat egy objektumba, és aJSON.stringify metódus szöveges formátummá alakítja. Visszafele pedig a JSON.parse

alakítja a szöveget objektummá.

Miután a projekt tárolásának módja már megoldott, azt is meg kell fontolni, hogy

futásidőben milyen struktúrában tároljuk a projektet. A legegyszerűbb megoldás az

lenne, ha egy nagy objektumban hagynánk az egészet, mint ahogy beolvassuk a

projektfájlból. Előnye, hogy a feldolgozás nem igényel semmifajta további funkciót.

Hátránya viszont, hogy nem definiálható az objektumokra osztályszintű funkció. Nincs

információjuk a projekten belüli elhelyezkedésükről sem, és a projektben való keresést

is megnehezíti.

A megoldás egy az objektumhoz nagyon hasonló hierarchia felépítése a projektfájl

beolvasásakor, viszont az adott objektum típusának megfelelő osztály példánya fog

benne szerepelni. Mentéskor pedig a példányok adatainak lekérésével egy projekt

adatait tartalmazó objektum fog felépülni.

Projekt megnyitására és mentésére is két féle lehetőség volt. A régebben használt

modell szerint minden fájlbetöltés és letöltés csak a szerveren keresztül működött. A

mai modern böngészőkben viszont már nem szükséges feleslegesen a szerverre

feltölteni és letölteni a fájlokat, azokat a böngészőn belül is lehet írni illetve olvasni az új

API-knak köszönhetően. Szöveges fájlok betöltését és mentését a már említett FileAPI

és saveAs használatával implementáltam.


37/82

33

3.1.2 Vizuális fejlesztés

Amikor a program funkcióinak szerkesztését lehetővé tevő vizuális fejlesztőeszköz

készült, meg kellett tervezni, hogy milyen elemekből épüljön fel, azok hogyan

kapcsolódjanak egymáshoz, illetve hogy érdemes úgy kialakítani a rendszert, hogy azviszonylag egyszerűbben fordítható legyen. Magának a vizuális fejlesztésnek az ötlete

már megvolt, viszont annak a háttérben működő megvalósítását még meg kellett

tervezni. A cél végül egy programmá fordítás, tehát érdemes erről az oldalról vizsgálni a

kérdést: Milyen elemekből áll egy funkció kódja?

- Változódefiniálás

- Értékadás

- Példányosítás

- Függvényhívás

- Elágazás

- Ciklusok

Ezek a műveletek jelenjenek meg a szerkesztőfelületen egy-egy dobozként.

A funkció működését nem csak a benne található utasítások, hanem azoknak a sorrendje

is meghatározza. Tegyük tehát lehetővé ezen blokkok sorrendjének meghatározását. Ez

úgy lehetséges, hogy minden végrehajtható utasítást jelölő doboznak tartalmaznia kell

egy mutatót az előző, és a következő utasításra.

A végrehajtandó feladatok sorrendje és típusa már meghatározható. De a

függvényeknek vannak paraméterei is, melyekhez változókat adhatunk át. Ráadásul a

függvények egymásba is ágyazhatóak, így bemeneti paraméternek egy másik függvény

kimenete is felhasználható.

Erre szolgálnak a dobozok jobb és bal oldalán található ki- és bemenetek. Különböző

színnel a különböző típusok vannak jelölve, és a felhasználó csak azonos típusú

kimenetet tud belekötni egy bemenetbe. Egy kimenetet több helyen is fel lehet

használni, viszont értelemszerűen egy bemeneti paraméter egyszerre csak egy értéket

kaphat.

Az így létrejövő blokkok, és azoknak a hálózata már egyértelműen definiál egyprogramkódot, melyet az exportálás során előállít a program. A fejlesztés közben mikor


38/82

34

a felhasználó képes dinamikus tartalmat előállítani, érdemes mindig törekedni arra,

hogy legyen egy algoritmus, mely azt egy előre definiált módon fel tudja dolgozni.

3.1.3 Projekt fordítása (exportálás)

A projekt lefordítása nem más, mint az összeállított JSON formátumú projektfájl és a

felhasznált könyvtárak átalakítása futtatható állományokká, melyek szintén szöveges

PHP kódok.

Az első felmerülő kérdés a következő: Érdemes továbbra is csak a kliensoldalon a

felhasználó böngészőjében végezni a fordítást is, vagy adjuk át a szervernek a feladatot?

A PHP legnagyobb előnye e téren a natív ZIP támogatás, így az elkészített projektfájlokat

össze tudja csomagolni a fejlesztőkörnyezet végül egyetlen állománnyá. A Javascriptellenben nem támogatja a lokális fájlműveleteket, vagy legalábbis a File API-n keresztül.

Viszont jelenleg nincs meg az a több böngésző által is támogatott egységes fájlkezelő

rendszer, amire szükség volna. A PHP ellenben egy könnyen érthető utasításkészletet és

osztályokat bocsát rendelkezésre a területen.

Mielőtt elkezdenénk fejleszteni a fordítót, érdemes megtervezni, hogy milyen lépéseken

keresztül jutunk el a projektfájlból a webalkalmazásig. A projekt melyik eleméből az

alkalmazás milyen elemét állítjuk majd elő.

Az alkalmazás osztályainak hierarchikus elrendezéséről a névterek, vagy mappák

gondoskodnak. Ezt a névtér struktúrát érdemes nem csak kódszinten, hanem fájlszinten

is megőrizni, elősegítve a későbbi áltáthatóságot. A program átláthatóságát, és az

előfeltételek kezelését is elősegíti, továbbá ha az osztályokat is mind-mind külön fájlban

tároljuk. Így a fájl neve már eleve az osztály nevét mutatja, és azt az osztályt tartalmazza,

mást nem.

Továbbra is érdemes kiemelni, hogy a program további bővíthetősége egy nagyon

fontos szempont. Így érdemes egy projekt exportáló interfészt definiálni, melyet az

adott programozási nyelvek fordítói implementálnak majd.

A fordítás lényegi része a funkciók belsejében történik, mikor a node-ok halmazából

akarunk kódot generálni. A feladat megoldásán gondolkodva a következő megoldás

született:


39/82

35

Hagyjuk el a nem meghívható node-okat, így csak azok maradnak, melyeket futtatni

szeretnénk. Nem csak egymás után egy sorba köthetőek, hanem definiálható elágazás

és ciklus is, így lehetőség van a program futását visszavezetni egy korábban már

végrehajtott funkcióhoz, és onnan folytatni, pont mint egy GOTO esetén. Vegyük észre,hogy az ezen módon összekötött node-ok a csúcsok, a következő funkcióra hivatkozó

mutató pedig irányított él lesz.

Ha meg szeretnénk valósítani egy GOTO-hoz hasonló szerkezetet, akkor meg kell

határoznunk először is azokat a funkciókat, melyekre egynél több másik funkció

hivatkozik a következőként. Bontsuk fel a gráfot olyan részgráfok halmazára, ahol

minden részgráfnak csak egy bemenő éle lehet. A gráf megfelelő felbontása a

következőképpen néz ki:

- Válasszuk ki azokat a node-okat, amelyekhez több bemenő él is tartozik, illetve a

kezdő csúcsot. Ezek lesznek egy-egy részgráf kiinduló pontjai.

- Induljunk el ezekből az élekből, és amíg nem egy másik részgráf kiinduló pontjára

mutat az él, addig még ahhoz a részgráfhoz tartozik, amelyik kiindulópontjából

indítottuk azt.

-

Amint elértünk egy ilyen ponthoz, a részgráf véget ér abban az irányban. Viszont

jegyezzük fel, hogy ezen a helyen nem egy következő funkció kerül végrehajtásra,

hanem a funkció egy adott pontjához ugrunk.

7 . ábra: A nodeok ábrázolása feldolgozás előtt (vázlat)


40/82

36

Ha már felbontottuk a gráfot, akkor úgy valósíthatjuk meg egy részgráfba ugrást, hogy a

függvény törzsébe egy switch blokkot helyezünk, melynek esetei maguk a körmentes

részgráfok által reprezentált programkódok. A függvény egy opcionális paramétere a

következő részgráf azonosítója. Tehát ugrás esetén a funkció önmagát hívja meg, csakmásik ág fut le aszerint, hogy melyik komponensbe lépünk be.

Azok a funkciók, melyek egyik részgráfból sem elérhetőek, nem kerülnek a

programkódba.

Annak érdekében, hogy a lokális változók ne vesszenek el a rekurzív hívások közben sem,

egy tömbben tároljuk őket, melyet szintén átad a funkció majd paraméterként. Viszont

ezt a tömböt referenciaként adjuk át, hogy az egyik komponensben megváltoztatott

érték a másikban is ugyanúgy viselkedjen.

A futtatható funkciók gráfjának felépítése után dolgozzuk fel a csak visszatérési értéket

produkáló függvényeket. Ezt úgy tesszük, hogy a futtatható funkciók generálása közben

figyeljük, van-e bemeneti értékük. Ha van, akkor behelyettesítjük a belekötött értéket,

vagy az azt produkáló funkció kimenetét. Ha funkció, akkor azt szúrjuk be a bemenet

helyére, majd rekurzívan ennek is hasonlóképpen feldolgozzuk a paramétereit.

8 . ábra: Részgráfokra bontás (vázlat)


41/82

37

Mikor szövegként visszaadjuk a feldolgozott blokkot, többféle eredmény kerülhet a

fájlba aszerint, hogy miképp hivatkoztunk rá.

- Statikus függvényhívás: Osztálynév::függvény(…)

-

Statikus változólekérdezés: Osztálynév::$változó

- Lokális változólekérés: $változó

- függvényhívás: függvény(…)

- példány egy metódusának hívása: $példány->metódus(…)

- osztály példányosítás: new Osztálynév(…)

3.1.4 Modulok

A fejlesztőkörnyezet teljességét és bővíthetőségét egy modulkezelő rendszer biztosítja.Lehetőséget ad külső könyvtárak importálására, hogy ne csak a beépített funkciók

legyenek használhatóak. Tulajdonképpen a PHP standard könyvtára is egy modulként

lett megvalósítva egy olyan PHP fájl beimportálásával, mely a PHP által alapból

biztosított függvényeket tartalmazza. Ehhez a gyűjteményhez egy PHP-code-hints [11]

nevű projektet felhasználva jutottam.

Egy modulkezelőnek az alábbi funkciókat kell biztosítania:

- Külső könyvtárak beimportálása, lehetőleg minél kevesebb megkötéssel.

- A könyvtár feldolgozása, és az általa felhasznált funkciók kigyűjtése, majd egy

kliens által értelmezhető formátummá alakítása.

- Kliens oldalon a szerkesztő képes legyen hivatkozni a könyvtár tartalmaira, és a

lefordított projekt is elérje azt.

Fájl értelmezése

Legfontosabb és legösszetettebb feladat a PHP fájlok értelmezése. Először érdemes a

nyelv által alapból elérhető lehetőségek után nézni, hogy ne kelljen a teljes feldolgozást

az alapoktól elindulva implementálni. A PHP rendelkezik egy beépített tokenizer[12]- rel,

mely a PHP fájlok tokenekre bontását végzi. Ezen eszköz használatával már csak a

tokeneket kell feldolgozni.

Magát a fájlt nem akarjuk értelmezni, csupán az elérhető névtereket, osztályokat és

funkciókat kívánjuk kigyűjteni. A PHP nyelv alapesetben nem típusos, azaz nem


42/82

38

adhatóak meg a változóknak a típusaik, viszont a funkciók paramétereinek megadásakor

lehetőséget ad azok típusának meghatározására feltéve, ha egy osztály példányát várja,

a skaláris típusokat nem támogatja. Létezik továbbá egy PHPDoc [13] nevű dokumentáló

szabvány, mely komment blokkokban teszi lehetővé egy funkció típusainak és leírásánakmegadását. Mindezeket szem előtt tartva a fájlfeldolgozó feladata a következő:

- A fájl tokenekre bontása

- Osztály és funkciódefiníciók felismerése

- Típusok megállapítása Typehint-ek és PHPDoc kommentek figyelembevételével

- A feldolgozott osztályok és funkciók rögzítése

Tokenek feldolgozása

A tokenizálás után egy tömböt kapunk eredményül, melyen végig kell iterálni, hogy

feldolgozzuk. Mivel funkciókat tárolunk le, illetve azt, hogy melyik osztályban, melyik

névterekben vannak, ezért a funkciók értelmezése a legfőbb feladat, illetve azok

paramétereinek lekérdezése. A tokenek elemzésekor egy funkcióhoz érve a

következőket kell megtennünk:

- A funkció nevének és tulajdonságainak rögzítése

- A funkció paramétereinek és azok típusának megállapítása

- A funkció helyének lekérdezése a névtereken és osztályon belül

Hogy ezeket a feladatokat ellássuk, iteráció közben a következőkkel kell tisztába

lennünk:

- Melyik névtéren belül vagyunk?

- Egy osztályon belül vagyunk-e? Ha igen, mi az osztály neve?

- A funkció paraméterdefinícióin belül vagyunk?

- Mi volt az előző megjegyzés blokk?

- Mi volt az előző funkciódefiníció?

- Hány nyitott zárójel van jelenleg?

Mivel a token típusának különböző esetei szerint más-más módon dolgozzuk fel a

meglévő adatokat, így az iteráción belül érdemes egy switch-case szerkezet használata.

Egy asszociatív tömbben tároljuk el, hogy minden típusból mi volt az előző elem, hogy


43/82

39

tudjunk hivatkozni rá. Illetve hozzunk létre egy-egy tömböt az osztályok és funkciók

tárolására.

Ha elérünk egy T_NAMESPACE tokent, akkor a következő szöveg a namespace

definíciója lesz T_NS_SEPARATOR elemekkel elválasztva.

T_FUNCTION tokenhez érve a következő szöveg a funkció neve lesz, az utolsó

T_DOC_COMMENT pedig a hozzá tartozó dokumentációs blokk. A funkció nevének

definiálása után kezdődő nyitó, majd azt lezáró zárójelek közt helyezkednek el a

paraméterek, ami néhol typeHint-el van ellátva. Egy nyitó zárójelhez érve (ha egy

funkció definíciónál tartunk) a paramétereket kell vizsgálni, melyek a következőképp

néznek ki: [typehint] $variable_name [= default_value]. A dokumentációt feldolgozófunkció eredményét összevetjük a hint-ekkel, melyek végül együtt adják a paraméterek

típusait. A függvény belsejét nem vizsgáljuk, az a könyvtár struktúrájának ismerete

szempontjából irreleváns.

Osztályok a T_CLASS definíció után kezdődnek, egyetlen tulajdonsága a neve. Tartalma

a {} zárójelek közt helyezkedik el, mely végére érve az osztálynév definíciója óta

feldolgozott funkciókat az osztály funkciói közé másoljuk.

A tokenizer nem bontja fel a dokumentációt, azt nekünk kell elvégezni. Szerkezete igen

egyszerű: /** karakterekkel kezdődik, és */ karakterekkel végződik. Több soros

megjegyzés, melyben lehetőség van speciális jelentéstartalmú elemek beillesztésére.

Ezek a kulcsszavak @ jellel kezdődnek. Nekünk a következőkre van szükségünk:

- @param: Egy paraméter megadása, majd a neve, típusa és leírása következik

- @return: Visszatérési érték típusának és megjegyzésének megadása

-

@var: Változó típusának definiálása

Egyszerűen bontsuk sorokra a dokumentációt, és keressük meg a kulcsszavakat.

Érdemes megjegyezni, hogy a sorok * és szóköz karakterek kombinációjával kezdődnek,

ezeket ne vegyük figyelembe. Továbbá megadható többsoros megjegyzés is, ekkor a

kulcsszó nélküli sort az előző tartalmához kell hozzáadni, kivéve az első sort, ahol maga

a funkció leírása szerepel.

Projektfájllá alakítás és értelmezés


44/82

40

A fájlok feldolgozása után rendelkezünk a funkciók és osztályok névterekkel ellátott

gyűjteményével. Rendezzük ezeket egy projektfájlokat leíró asszociatív tömbhöz

hasonló szerkezetbe azzal a különbséggel, hogy az osztályoknak tároljuk el az elérési

útját is, ahonnan elérhetőek azok az alkalmazás futásakor.

A rendezett tömböt alakítsuk JSON formátummá a PHP beépített json könyvtárával, és

adjuk vissza az eredményt a kliensnek, mely azt be tudja tölteni a könyvárak közé. A

könyvtár szerkezete teljesen ugyanolyan, mint a projekté annyi különbséggel, hogy a

funkciói nem szerkeszthetőek, csak meghívhatóak. A könyvtár fájljait nem tároljuk el a

projektfájlban hogy ezzel helyet, és feldolgozási időt takarítsunk meg. A projektfájl a

szerveren kerül elmentésre egy egyedi azonosítóval. Ezt az azonosítót kapja meg a

kliens, majd a projektfájlban eszerint hivatkozik rá. A fordításkor is a fejlesztőkörnyezet

ezen azonosító alapján keresi ki, és másolja be a felhasznált könyvtárakat a lefordított

fájlok mellé.

Korlátozások

A modulkezelő célja, hogy külső osztályokat be tudjon tölteni a projektbe. Viszont a

típusok és névterek használata miatt, illetve az öröklődések hiányából fakadóan az

importálandó könyvtárakra az alábbi megkötések és javaslatok vonatkoznak:

- A könyvtárat egy ZIP archívumba kell csomagolni, hogy egy fájlként feltölthető

lehessen a szerverre.

- A könyvtár gyökerében el kell helyezni egy config.json fájlt, melynek egy

kötelező kulcsa a name, melynek értéke a projekt neve kell hogy legyen.

- Hogy a projektkezelőhöz hasonló szerkezetet kapjunk, érdemes fájlonként egy

osztály használata. A funkciókat osztálydefiníción belül definiáljuk, illetve

fájlonként csak egy névtér definiálható.

- Érdemes minden esetben PHPDoc és typehint-ek alkalmazása, mikor

függvényeket definiálunk. Ha nem található típus, akkor a változó mixed lesz.

- Az importáló nem ismeri az öröklődést, így nem látja az osztály szülőjének

metódusait, ezért érdemes minden szükséges elérni kívánt funkciót

implementálni. Az interfészek nem kerülnek feldolgozásra.


45/82

41

3.2 Használati esetek

A felhasználónak a következő célkitűzésben szereplő feladatokat kell tudnia elvégezni a

fejlesztőkörnyezeten:

-

Új projektet létrehozni

- Meglévő projektet fájlból betölteni

- Projektet fájlba menteni

- Új projektelemet létrehozni

- Funkciók elemeinek törlése és módosítása

- Modulok hozzáadása a projekthez


46/82

42

3.3 Osztályok és funkciók

3.3.1 Bevezetés

A program két különböző programozási nyelven íródott: PHP, mint szerveroldali nyelv

és Javascript, mint kliensoldali nyelven. A kliensoldalon Javascript-el megírt rendszerviszont további két részre bomlik: a fejlesztőkörnyezet vizuális megjelenítő, és

felhasználói interakciókat kezelő (GUI), illetve a projektet kezelő, a GUI eseményeire

reagáló részre. A Javascript nyelvben nem olyan formában léteznek az osztályok, mint

például a Java, vagy a PHP nyelvben. Funkcióként kell definiálni azokat, mely a

konstruktor lesz, és a prototype objektum segítségével lehet futásidőben megadni a

metódusait. A new operátorral példányosítható, és a metódusai a this operátorral

hivatkozhatnak az aktuális példányra, így jogosan hívhatjuk az ezen megvalósítással létrehozott

struktúrákat osztályoknak. A PHP nyelven íródott kód is két részre osztható. Az egyik a

fejlesztőkörnyezet része, a másik pedig a WebApp modul.


47/82


48/82

44

- onload: Egy új elem létrehozásakor futó funkció

Minden paraméterhez elkészíti a hozzá tartozó gettert és settert. Ha tömb a paraméter

típusa, akkor kibővíti még egy add, egy remove és has funkcióval is, melyek hozzáadnak,

törölnek és ellenőrzik hogy létezik-e egy adott elem.

WB MsgBox

Egy funkció, mely egy a win paraméterben megadott ablakon egy title paraméterben

definiált című, és text szerinti szövegű üzenetdobozt (WB.Alert) hoz létre.

WB setStyle

Megváltoztatja a GUI stílusát a paraméterben átadott nevű stíluslapra. Csak az „Unreal”stílus érhető el, de úgy lett kialakítva a rendszer, hogy le lehessen cserélni azt.

WB openTextFile

A mime paraméterben átadott fájltípus megnyitását lehetővé tevő fájltallózót nyit meg.

Sikeres fájlkiválasztás és beolvasás esetén a callback paraméterben átadott funkciót

hívja meg.

WB openJSONFile

Ugyanaz a feladata, mint a WB.openTextFile funkciónak, csak itt rögzített a típus (json).

WB loadText

A paraméterben megadott URL-ről szöveges fájl betöltése, és visszaadása kimenetként.

WB loadJSON

Ugyanaz a funkciója, mint a WB.loadText-nek, csak rögzített a fájltípus (json);

WB uploadZIP

Egy fájltallózó ablakot nyit meg, melyen ZIP fájlt lehet kiválasztani, melyet a

paraméterben adott URL-re tölt fel (path) majd meghívja a callback függvényt.

WB saveJSONFile


49/82

45

Megnyit egy fájltallózót, mely egy JSON fájl mentését teszi lehetővé. Az obj paraméter

az objektum, amit JSON formátummá alakítunk, a name pedig a fájlnév.

WB.Object osztály

Minden WB elem őse, lehetőséget ad a szövege módosítására (setText), elem

hozzáadására (add), tartalmának törlésére, és önmagának az elem kitörlésére is

(destroy).

A WB.Object egy absztrakt osztály szerepét tölti be, még ha ez a kifejezés Javascriptben

nincs is definiálva. Kódszinten lehetőség van ugyan példányosítani, de nincs értelme,

csupán mint ősosztály lett létrehozva. Funkciói elérhetőek az összes leszármazott

osztályból.


50/82

46

WB.Whiteboard osztály

Ez az elem a funkciószerkesztő, melyeken a vonalakkal összeköthető dobozok jelennek

meg. Adható hozzá környezeti menü (setContextMenu), és biztosít hozzáférést a

dobozokhoz, melyek ki vannak jelölve (getSelectedBoxes). Továbbá tárolható benne egy

szöveg; például megjegyzés, vagy cím (setTag) és egy tetszőleges objektumra utaló

referencia (setObject).


51/82

47

WB Menu osztály

A felület felső részén található a menücsík. Ablakonként csak egy hozható létre. Nem

tartalmaz új funkciót a WB.Object-hez képest, viszont egyedi stílus tartozik hozzá.

Továbbá tartalmaz egy rejtett tárolót, ahova az almenüket helyezi az add funkció

hívásakor.

WB.SubMenu osztály

A menü elemeit tartalmazó tároló.

WB.MenuSplitter osztály

A menüpontokat elválasztó vízszintes vagy függőleges csík. Nem tartalmaz semmilyen

funkciót, csupán stílusdefiníciót.


52/82

48

WB.MenuItem osztály

A menü elemei. Lehetnek főmenük, vagy almenük aszerint, hogy a menücsík, vagy egy

másik menü elem tartalmazza-e. Legfeljebb két szint mélységig egymásba ágyazhatóak.

WB.Panel osztály

A panel egy olyan eleme a GUI-nak, mely sem funkció, sem stílusdefiníciókat nem

tartalmaz. A WB.Object legközelebbi leszármazottja.

WB.Tab osztály

A fülekbe rendezett panelek egy fülét reprezentálja. Biztosítja események definiálását,

melyeket a fül bezárásakor (setOnclose), illetve fül kijelölésekor (onSelect) hív meg.

Tartalmaz továbbá egy címkét is, mely a fülek közt megjelenő cím lesz (setCaption).


53/82

49

WB.Tabs osztály

A füleket tartalmazó panel. Felül találhatóak a fülek, alattuk pedig az épp előtérben

lévő panel.

WB.HorizontalSplitter osztály

Két egymás mellett elhelyezkedő, egy elválasztóval elszeparált panel, melyek méretei

Web application developer studio

Documents

Transcript of Web application developer studio