Néhány alapvető DataFlex webalkalmazás-fejlesztési technikát fogunk bemutatni a jól ismert “Hello, World” program egy variációján keresztül, amelyet sok programozási nyelv tanításakor első programként használnak.
A létrehozandó webes nézet nagyon egyszerű lesz, egy űrlapot és egy gombot tartalmaz. A felhasználó beírja a nevét az űrlapba, és rákattint a gombra. A név ezután hozzá lesz adva a “Hello, ” kifejezéshez, így például a “Hello, John” eredményt kapjuk. Ez az eredmény megjelenik egy üzenőmezőben.
Webes nézet
A webes nézetek (cWebView osztály) a DataFlexben a webes alkalmazások fő vizuális tárolói. Bővebben a cWebView osztály dokumentációjában olvashat róluk.
1. Kattintson a Studio eszköztárának Create New gombjára. Kattintson a Create New… párbeszédpanel Web Object fülére. Kattintson duplán a Web View ikonra.
2. Megnyílik az “Új webes nézet létrehozása” párbeszédpanel. Adja meg az oHelloWorld nevet az objektum neveként. Vegye észre, hogy a fájlnév automatikusan HelloWorld.wo-ra változik az objektum nevének beírása közben. Fogadja el az alapértelmezett könyvtár elérési útvonalát (a QuickStart munkaterület AppSrc mappája). Kattintson az Ok gombra.
Mostantól az új webes nézet forráskódja látható a Stúdióban.
3. A Workspace Explorerben a WebApp.src-t kell látnia a Current Project (Aktuális projekt) néven. Kattintson a +-ra a fa nézetben a WebApp.src bővítéséhez, majd kattintson a +-ra a Web nézetek bővítéséhez. Láthatja, hogy a HelloWorld.wo hozzá lett adva a WebApp.src projekthez.
Ha a +-ra kattintva kibővíti a Webes modális párbeszédpaneleket, a Webböngésző objektumokat és az Egyéb fájlokat, akkor láthatja az összes többi fájlt, amelyek jelenleg a projekt részét képezik.
4. Most megnyithatja a WebApp Designer-t, vagy a View menüből, majd a WebApp Designer menüpontból, vagy az F7 billentyű lenyomásával.
WebApp Designer
A WebApp Designer a Studio dokkoló eszközpanelként van megvalósítva. Kezdetben a Studio aljához van dokkolva, de a panelt húzva és átméretezve szabadon lebegővé teheti. Ha a számítógépen két monitor van, akkor a tervezőt a második monitorra húzhatja.
Ahogy szerkeszti a webes nézet, a webes párbeszédpanel vagy a WebApp.src forráskódját, a Tervező dinamikusan frissül, hogy tükrözze a módosításokat. Az objektumtulajdonságok szerkesztése a Tulajdonságok panelen szintén megjelenik a Tervezőben.
A WebApp Designerről bővebben itt olvashat.
5. A webes nézet alapértelmezés szerint már tartalmaz egy űrlap (cWebForm osztály) objektumot, így a tervezés befejezéséhez még hozzá kell adnia egy gombot.
Kattintson a Studio eszköztárának Class Palette gombjára.
Ezzel megjelenik a Studio osztálypalettája. Kattintson a + gombra a Web Controls csoporton a kibontáshoz, ha még nincs kibontva. Ekkor megjelenik az összes elérhető webes vezérlőelem.
Osztálypaletta
A Class Palette egy dokkoló ablak, amely a Studio-ban az aktuális munkaterületre vonatkozóan elérhető vezérlőelemeket listázza. Az egyes csoportokba tartozó vezérlőelemek felhasználása és funkciói alapján különböző vezérlőelem-csoportokra van felosztva.
Mivel Ön jelenleg egy webes projekten dolgozik, a Class Palette alapértelmezés szerint csak a webes alkalmazásokban használható vezérlőelemeket mutatja.
A Class Palette teljesen testreszabható. Erről bővebben a Studio könyv Class Palette témakörében olvashat.
6. Húzza a cWebButton vezérlőelemet a Class Palette (osztálypaletta) Web Controls (webes vezérlők) csoportjából a WebApp Designer (webalkalmazás tervező) felületére, a meglévő űrlapobjektum alá.
Ahhoz, hogy a gomb a meglévő űrlapobjektum alá kerüljön, húzza a gombot az űrlapobjektum mellett addig a pontig, ahol egy függőleges sáv jelenik meg, amely egy helytartó, amely az új objektum helyét jelzi.
Fő fogadás
Kicsit nehézkes lehet a vezérlőelemek megfelelő elhelyezése, amikor a WebApp Designerbe húzza őket. Ha a húzás rosszul sikerül, bármikor megnyomhatja az eszköztáron a visszavonás gombot (vagy a Ctrl+Z billentyűkombinációt), és újra megpróbálhatja. Mindenképpen húzza a vezérlőelemet, és tartsa lenyomva a jobb egérgombot, hogy lássa, hogyan vezetik a Designer helyőrzői. Csak akkor engedje el az egérgombot, ha az objektum pontosan ott van, ahol szeretné. — Az objektumot újra felveheti, és áthelyezheti egy másik helyre.
Tipp
A WebApp Designer a DataFlex Studio számos dokkolópaneljének egyike. Ezeket tetszés szerint rendezheti el. A fenti képernyőképen a WebApp Designer-t lebegő ablaktáblaként jelenítettem meg. Olvasson többet a Studio dokkolópaneljeinek használatáról.
7. Ha jól csinálja, ahogy az alábbi képen látható, akkor a gomb a panel következő sorába tekeredik, és az űrlap alatt jelenik meg:
Tipp:
A fenti képernyőképen a gomb kék szegélye átfedi a többi vezérlőelemet. Ez egy másik WebApp Designer vizuális segédeszköz, amely segíti az aktuálisan kiválasztott vezérlőelemmel (a gombbal) való munkát. Ha egy másik vezérlőelemet választ ki, például a szülő nézetobjektumot, a kék keret eltűnik a gombról, és átvált az újonnan kiválasztott objektumra.
8. Válassza ki az oForm objektumot a WebApp Designerben, és a Tulajdonságok ablakban módosítsa az Objektum nevét oNameForm-ra (az objektum neve a Tulajdonságok ablak tetején található). Állítsa a psLabel tulajdonságot Name: értékre, a psPlaceholder tulajdonságot pedig Type your name here értékre.
9. Válassza ki az oWebButton1 objektumot a WebApp Designerben, módosítsa az Object nevet oGoButton-ra, és állítsa a psCaption tulajdonságot Go-ra.
10. Válassza ki az oHelloWorld objektumot a WebApp Designerben, módosítsa a psCaption tulajdonságot Hello, World! értékre.
11. Ezután az oWebButton1 objektum meglévő OnClick eljárásához adunk hozzá némi kódot.
a. Az első kódsor a következő:
String sName sResult
CodeSense
Ahogy elkezdi a kód beírását, néha észreveheti, hogy felugrik egy lista, amely a lehetséges opciókat mutatja be. A legtöbb esetben a CodeSense ezen félautomata listafunkciója tudja, hogy mikor kell megjelennie, és megfelelő kontextusú választási lehetőségeket mutat be. Ha manuálisan szeretné előhívni ezt a listát, nyomja le a Ctrl+Space billentyűkombinációt bármelyik sorban vagy szó beírása közben.
A CodeSense a Studio olyan funkcióinak összessége, amelyek intelligens módon segítik Önt a kódírás során, és kontextusfüggő lehetőségek és információk listáit kínálják. A CodeSense használata drámaian növeli a termelékenységet, közvetlenül akkor ad kontextusérzékeny információkat, amikor szükséged van rájuk, miközben kódot gépelsz a szerkesztőben, így nem kell elhagynod a szerkesztőt, hogy a dokumentációban hivatkozásokat keress. És még arra is használható, hogy befejezze a gépelést Ön helyett, minimalizálva a gépelési hibákat stb.
A CodeSense használatáról itt tudhat meg többet.
Ez a kódsor két helyi sztringváltozót deklarál sName és sResult néven.
Változó hatókör
A helyi változók hatókörét arra a metódusra (eljárásra vagy függvényre) korlátozzuk, amelyben deklaráltuk őket. Ezt a változót “használhatja”, ami azt jelenti, hogy csak az aktuális metódusban, jelen esetben az OnClick eljárásban rendelhet hozzá értéket, és csak akkor férhet hozzá a meglévő értékéhez, ha az aktuális metódusban van. Ha a változókra azon a hatókörön kívül próbálunk hivatkozni, amelyben deklaráltuk őket, az fordítói hibát eredményez.
Változók nevei
Az objektumok neveihez hasonlóan a változóknak is hasznos értelmes neveket adni. Az x vagy y nevek közel sem olyan értelmesek, mint az sName. Egy összetettebb, több tucat változót tartalmazó módszerben, ha könnyen azonosítani tudjuk egy változó nevének jelentését, hatékonyabb programozóvá válunk.
A string változókhoz az s előtagot javasoljuk használni. Az ilyen előtagok szintén segítenek a változónevek jelentésének azonosításában. Ha ragaszkodik ehhez az elnevezési konvencióhoz, soha nem fogja összetéveszteni a karakterláncot tartalmazó változót a számot tartalmazó változóval. A DataFlex elnevezési konvenciókról bővebben a Nyelvi útmutatóban olvashat.
b. A következő kódsor a következő:
WebGet psValue of oNameForm to sName
Ez a kódsor az oNameForm objektum psValue webes tulajdonságának aktuális értékét az sName helyi stringváltozóba kéri le.
c. A következő kódsor a következő
Move (“Hello, ” + sName) to sResult
Ez a kódsor a “Hello, ” és az sName stringváltozók tartalmát kapcsolja össze, és ezt az értéket az sResult stringváltozóba mozgatja. Tehát, ha például az sName tartalmazza a “John” szót, akkor ez a “Hello, John” átkerül az sResult változóba.
d. A következő kódsor a következő:
Send ShowInfoBox sResult
Ez a kódsor egy olyan üzenőmezőt hív meg, amely megjeleníti az sResult string változó tartalmát.
12. A kész kódnak így kell kinéznie:
13. Most pedig teszteljük az elkészült webes nézetet.
Kattintsunk a Studio eszköztárának Futtatás gombjára. A Studio lefordítja, majd futtatja a projektet.
Az alkalmazás futtatásakor a böngészőnek meg kell jelenítenie a http://localhost/QuickStart/Index.html oldalt.
Kattintsunk a Views menüre, és vegyük észre, hogy a HelloWorld most már itt szerepel.
14. Ez azért van így, mert a nézet neve a Web nézet sablon futtatásakor került be a fő alkalmazásba, mielőtt a nézet psCaptionját Hello, World-re módosította volna.
Megnyithatja a WebApp.src állományt, megkeresheti a megfelelő menüobjektumot (az Object oHelloWorldMenuItem1 egy cWebMenuItemLoadView), és a psCaptiont Hello, World-re módosíthatja, hogy ezt kijavítsa.
Egy alternatív megoldás, mivel ebben az esetben csak egyetlen nézet van a programunkban, plusz mivel egy tesztprogramban valószínűleg nem érdekel minket a menüpontok konkrét sorrendje, az, hogy egyszerűen eltávolítjuk a webes nézetet a programból, majd visszaadjuk. Ezáltal a nézet aktuális psCaption-ját vesszük, és azt használjuk a menüpont felirataként.
15. A Workspace Explorerben kattintson a jobb gombbal a HelloWorld.wo fájlra, majd válassza a kontextusmenüből a Remove Component <HelloWorld.wo> parancsot.
Ez eltávolítja a webes nézetet a projektből. Most pedig adjuk vissza:
16. Kattintsunk a jobb gombbal a HelloWorld.wo kódszerkesztőjének bármely fehér mezőjére, és válasszuk a kontextusmenüből a Add Component to Project <WebApp.src> parancsot.
17. Kattintsunk a Studio eszköztárának Run gombjára. A Studio lefordítja, majd futtatja a projektet.
Amikor az alkalmazás fut, a böngészőnek meg kell jelenítenie a http://localhost/QuickStart/Index.html oldalt.
Kattintson a Nézetek menüre, és vegye észre, hogy a nézet menüpontja most helyesen Hello, World.
18. Kattintson a Hello World-re a nézet megnyitásához.
19. Írja be a nevét a Név feliratú űrlapba (a Type your name here helyett írja be a nevét), majd kattintson a Go gombra.
A felugró üzenőmezőben a “Hello, {Az Ön neve}” felirat fog megjelenni.
Az eredmény így fog kinézni:
Az alkalmazás bezárásához zárja be a böngésző lapját. Térjen vissza a stúdióba, és kattintson a stúdióban a hibakeresés leállítása gombra a hibakeresés leállításához.