Lássuk be. A Hello, World webes nézet, amelyet létrehoztál, bár minimalista, nem különösebben vonzó. Az a nagyon széles gomb egyszerűen furcsán néz ki. Ebben a témakörben megismerkedhetsz az elrendezésekkel és az igazításokkal.
Fontos!
Ennek a szakasznak az a feltétele, hogy a “Hello, World” webes nézetet a QuickStart munkaterületen hozza létre.
Ha ez nem így van, akkor most váltson az Első webes nézet létrehozása lépésre, és térjen vissza ide, ha befejezte azt.
A legtöbb modern webes alkalmazás keretrendszerrel összhangban a DataFlex nem támogatja a vezérlőelemek abszolút koordinátás pozicionálását. Ehelyett az alapul szolgáló pozicionálási rendszer a “flow layout”, amely egyszerűen a vezérlőelemeket az előfordulásuk szerint, balról jobbra és fentről lefelé pozícionálja.
A vezérlőobjektumok sorrendje a nézetben meghatározza a vezérlőelem pozícióját az elrendezésben.
Két további elrendezési mechanizmus támogatott, amelyek segítenek az áramlás kezelésében: a panelek és az oszlopok.
1. Tekintse meg a HelloWorld.wo forráskódját. Észre fogja venni, hogy ebben a forrásfájlban a külső tároló egy webes nézet (cWebView osztály). Ebbe a webes nézetbe beágyazva egy másik konténerobjektum, egy webes panel (cWebPanel osztály) található. Az eddig használt vezérlőelemek, egy űrlap (cWebForm) és egy gomb (cWebButton) ebben a webpanelben helyezkednek el.
Bár a vezérlőelemeket egyszerűen elhelyezhetjük közvetlenül a webes nézeten belül, ha legalább egy panelobjektummal kezdjük, később könnyebben tudunk további paneleket hozzáadni, és könnyebbé válik az elrendezésekkel való munka. Így a webnézeti sablonok és a varázslók legalább egy webpanelt hoznak létre az Ön számára (egyesek több webpanelt is létrehoznak).
2. A webpanelek célja az áramlási elrendezések egyszerűsítése. Minden panel legfeljebb 5 alpanelt tartalmazhat, amelyek viszont mindegyike legfeljebb 5 alpanelt tartalmazhat, stb.
Minden szinten legalább 1 középső panelnek kell lennie. A peRegion tulajdonság határozza meg, hogy egy panel melyik régiót foglalja el a szülői konténerén belül.
3. A középső panel (peRegion = prCenter) az osztály alapértelmezett tulajdonsága. A HelloWorld.wo forráskódban látható, hogy az oWebMainPanel objektumon belül nincs explicit region tulajdonság beállítva.
Jelölje ki az oWebMainPanel objektum deklarációs sorát a kódszerkesztőben, vagy egyszerűen kattintson rá a Kódelemzőben. A Properties ablakban keresse meg a peRegion tulajdonságot. Láthatja, hogy annak értéke prCenter.
A panelobjektum ezt az értéket az objektum alapjául szolgáló osztálytól, a superclass-tól örökli. Ezért nem félkövér betűvel van szedve ez az érték a Tulajdonságok ablakban. Vegyük észre, hogy a piColumnCount tulajdonság értéke (10) félkövérrel van szedve. Ez azt jelenti, hogy az aktuális objektumban lévő érték eltér az örökölt szuperosztálybeli értéktől. Ez azt is jelenti, hogy a megváltozott érték kifejezetten ki van írva a kódban. Ha újra megnézzük a kódszerkesztőt, láthatjuk a kódsort, amely ezt teszi:
Set piColumnCount to 12
Öröklődés
Az osztályok és az öröklődés az objektumorientált programozás (OOP) alapvető fogalmai. Ezekről a fogalmakról bővebben a Nyelvi útmutatóban olvashat.
4. Az oszlopok számát (a piColumnCount tulajdonságot) már megnézte. Ez a tulajdonság az aktuális panelt (jelen esetben a középső/egyedül panel) 10 egyenletesen elosztott oszlopra osztja.
Kattintson az F7 gombra a WebApp Previewer megnyitásához. Vegyük észre, hogy a Hello, World webes nézetben mind a Name űrlap, mind a go gomb teljesen a nézet bal oldalára van igazítva. Az űrlap nem egészen úgy néz ki, mintha balra lenne igazítva, de a címkét is tartalmazza. Ha kiválasztja az oNameForm objektumot a Code Explorerben, akkor a teljes vezérlőelem kijelölve és kék kerettel körülvéve jelenik meg az előnézeti programban.
5. Válassza ki az oHelloWorld webnézeti objektumot, és módosítsa a piWidth tulajdonságát 700-ról 0-ra. A 0 szélesség azt jelenti, hogy a nézetnek nincs rögzített szélessége, és olyan szélesre nyúlik, amilyen szélesre a böngészőablakot/fülkét a felhasználó nyújtja. Most, ha egyre szélesebbre húzza a WebApp Preview ablakot, a korábban már megnyújtott űrlap és gomb egyszerűen bután néz ki, különösen, ha széles monitorfelbontással rendelkezik.
6. Annak, hogy a nézetet a képernyő kitöltésére lehessen nyújtani, van értelme néhány alkalmazás esetében, de nem igazán egy olyan egyszerű nézet esetében, mint a tiéd. Jelölje ki az oNameForm objektumot, és módosítsa a piColumnSpan tulajdonságát 0-ról 6-ra. Az Column span határozza meg, hogy a vezérlő az aktuális panel 10 oszlopából hányra terjedjen ki. Ismétlem, a 0-s column span azt jelenti, hogy a vezérlőnek a panel összes oszlopára ki kell nyúlnia.
7. Válassza ki az oGoButton objektumot, és módosítsa a piColumnSpan értékét 3-ra, a piColumnCount értékét pedig 3-ra. Az eredménynek így kell kinéznie:
A Name űrlap most már 6 oszlopon (1-6. oszlop) átível, és egy kicsit reálisabb méretben néz ki egy olyan űrlaphoz képest, amelynek egy nevet kell tartalmaznia. Ha a gomb 3 oszlopot ölel fel, és a 3. oszlopban kezdődik, akkor a gomb jobb szélét az űrlap jobb széléhez igazítja. Még ha a néző át is méretezi a böngészőablakot, az űrlap és a gomb szélessége kissé nőni és csökkenni fog, de ez az élkiigazítás változatlan marad.
8. A nézet azonban még mindig túl széles ehhez a 2 vezérlőelemhez. Ezt úgy tudjuk beállítani, hogy a nézeten belül megváltoztatjuk a főpanel oszlopszámát. Ezt egyszerűen megtehetjük a WebApp Previewer-en belül. Válasszuk ki az oWebMainPanel objektumot az előnézeti megjelenítőben. Ha jól csináltad, akkor valami ilyesmit kell látnod az előnézeti programban:
Most az előnézetben a mínusz jelre kattintva vizuálisan egyesével csökkentheti az oszlopok számát, és láthatja, hogyan néz ki a nézet minden egyes lépésnél. Próbálja ezt addig csinálni, amíg az oszlopok száma el nem éri a 7-et. Ha ezzel végeztünk, a nézetnek így kell kinéznie:
A nézet tervezésekor valóban érdemes átgondolni, hogy fix szélességű vagy változó szélességű elrendezést használjon. A fix szélesség sokkal nagyobb kontrollt biztosít a nézet kész kinézetét illetően. A tesztnézet természetesen leegyszerűsített, de ezekkel a tulajdonságokkal sok mindent megtehet. Ha például finomabban szeretné szabályozni az objektumok elhelyezését egy zsúfolt panelen, akkor a panel piColumnCount értékét 24-re állíthatja, és tetszés szerint állíthatja be a különböző objektumok oszloptávolságát és oszlopszámát.