Fejlesztői kézikönyv 6.3

XML Referencia 6.3

Effector Studio 6.3 összefoglaló

Effector Studio 6.3 kézikönyv

Fejlesztői kézikönyv 6.2

XML Referencia 6.2

Effector Studio 3.2 összefoglaló

Effector Studio 3.2 kézikönyv

Fejlesztői kézikönyv 5.5

XML referencia 5.5

Effector Studio 2.0 kézikönyv

Effector Studio 2.0 összefoglaló

Képernyők v5.1.001

Képernyőknek vagy más néven Screen-eknek nevezzük azon komponensek és megjelenítők összességét, amelyek egyszerre megjelennek az Effector-ban. Egy képernyő egy vagy több komponensből épülhet fel. A több komponensből felépülő képernyőket osztott képernyőknek nevezzük. Ezeken a képernyőkön lehetőségünk van definiálni úgynevezett osztásokat, melyek lehetnek függőlegesek vagy vízszintesek. Ezek az osztások határozzák meg azt, hogy a komponensek mekkora helyet foglalhatnak el. Az egyes komponensek méretei nem rögzítettek, a felhasználó ezen osztásokat megragadva át tudja méretezni őket.

Egy komponenses képernyő:

Egy komponensből álló képernyő

Osztott képernyő: Osztott képernyő

Elhelyezkedése a rendszerben

A képernyők elsődleges feladata a felhasználó számára az adatokat reprezentáló komponensek elrendezése a böngészőben. A fontosabb adatokat baloldalra, a kevésbé fontos vagy másodlagos komponenseket pedig a jobb oldalra célszerű rendezni. Fizikai helyét tekintve a Screen mappában kaptak helyet a képernyő definíciós állományok.

Az alábbi ábra szemlélteti közvetlen kapcsolatát/helyét a rendszerben, mely egyben megfelel a fő feladatainak.

Képernyő a rendszerben

A következő ábra a rendszerben elfoglalt helyét a felhasználási lehetőségeinek megfelelően a kapcsolatain keresztül szemlélteti. Képernyő, mint referencia

Elérhető funkciók

  • A képernyő struktúrájának definiálása
  • Komponensek egymáshoz kapcsolása
  • Tranzakció kezelés beállítása.
  • Képernyő stílusának beállítása
  • Képernyő láthatóságának szabályozása

Példák

Egy komponenses képernyő:

<Form id="ScreenNewUser" name="Felhasználók" MaxWidth="85%" MaxHeight="80%">
    <Panel type="Component" id="1">ComponentUserEdit</Panel>
</Form>

Osztott képernyő (komplex példa):

<Form id="ScreenEvent" name="Események részletekkel"  MaxWidth="95%" MaxHeight="100%">
    <CssClass>EditFormProject</CssClass>
    <SplitContainers>
        <Split id="1" orientation="Vertical" splitterDistance="50%" splitterDistanceOnTablet="315">
            <Panel1 type="Component" id="1">ComponentEventEditForm</Panel1>
            <Panel2 type="Component" id="2">ComponentEvent03Hoz</Panel2>
        </Split>
    </SplitContainers>
    <Components>
        <Component id="1" isreversible="false" isswitchable="false">2</Component>
    </Components>
    <ActiveConnections>
        <ActiveConnection id="1">2</ActiveConnection>
    </ActiveConnections>
    <Rules>
        <Visible type="SQL" return="Boolean" default="false">
            SELECT `True`
        </Visible>
    </Rules>
</Form>

4 részre osztott képernyő:

<Form id="ScreenProject" name="Projektek" MaxWidth="100%" MaxHeight="100%">
    <CssClass>EditFormProject</CssClass>

    <SplitContainers>

        <Split id="1" orientation="Horizontal" splitterDistance="50%">
            <Panel1 type="Split">2</Panel1>
            <Panel2 type="Split">3</Panel2>
        </Split>

        <Split id="2" orientation="Vertical" splitterDistance="45%">
            <Panel1 type="Component" id="1">ComponentProjectsEdit</Panel1>
            <Panel2 type="Component" id="2">ComponentProjectConnections</Panel2>
        </Split>

        <Split id="3" orientation="Vertical" splitterDistance="50%">
            <Panel1 type="Component" id="3">ComponentEvent</Panel1>
            <Panel2 type="Component" id="4">ComponentEventConnections</Panel2>
        </Split>
    </SplitContainers>

    <Components>
        <Component id="1" isreversible="false" isswitchable="false">2</Component>        
        <Component id="1" isreversible="false" isswitchable="false">3</Component>
        <Component id="1" isreversible="false" isswitchable="false">4</Component>
    </Components>
    <ActiveConnections>
        <ActiveConnection id="1">2</ActiveConnection>
        <ActiveConnection id="1">3</ActiveConnection>
        <ActiveConnection id="1">4</ActiveConnection>
    </ActiveConnections>
</Form>

A képernyő struktúrájának definiálása

A képernyő definíció azonosítóját a többi XML fájlhoz hasonlóan a gyökér elem a Form id attribútuma tartalmazza. Az azonosító megadása kötelező, és a konvencióknak megfelelően meg kell egyeznie a fájl kiterjesztés nélküli nevével. A gyökér elemen található attribútumok segítségével a következőket lehet még beállítani:

  • A képernyő nevét, mely a képernyő rendszerben történő megjelenítésekor a címke szerepét tölti be, valamint a menürendszer második szintjén jelenik meg, mint menüpont. Ezt a beállítást a name attribútumában tehetjük meg. Megadása kötelező.
  • Az egyes képernyők maximális szélességét, és maximális magasságát is megadhatjuk, de csak felugró ablakként lesznek az értékek értelmezve. A felugró képernyők esetén a MaxWidth és a MaxHeight beállításával a képernyő maximális méretét lehet megadni, így kevés adat, vagy kevés beviteli mező esetén nem fog túl nagy területet elfoglalni a megjelenített képernyő. Az itt beállítható értékek lehetnek százalékos és pixelben megadottak is. Pixel esetén csak az értéket kell megadni, százalék esetében viszont a mértékegységet(%) is fel kell tüntetni. Opcionális attribútumok.

<Form id="ScreenEvent" name="Események részletekkel" MaxWidth="95%" MaxHeight="100%">…</Form>

Elsőként egyszerű, egy komponenst tartalmazó képernyőt definiálunk:

A kötelező beállításokon kívül arra van csak szükségünk, hogy meghatározzuk a megjeleníteni kívánt kívánt Component objektumot. Ezt az alábbi egy sor megadásával tehetjük meg:

<Panel type="Component" id="1">ComponentUserEdit</Panel>

A típus kötelezően Component lehet. Egyetlen megjelenítő lévén el fogja foglalni az egész rendelkezésre álló helyet, valamint nincs szükség az összekapcsolást és a struktúrát kezelő node-ok megadására sem. Opcionálisan láthatósági szabály megadható, erről részletesebb leírás lentebb olvasható.

Osztott képernyők definiálása:

Osztott képernyők definiálását az ún. SplitContainers konténer node segítsével tehetjük meg. Ez a konténer tartalmazza a felosztást reprezentáló Split definíciókat, melyből tetszőleges számút vehetünk fel.

Minden Split-nek tartalmaznia kell egy azonosítót, mely a hierarchia megvalósításában és az osztások egymásba ágyazásakor játszik majd szerepet. Ezt az azonosítót az id attribútumban adhatjuk meg.

További attribútumok:

  • orientation: az elválasztás irányát adja meg. Lehetséges értékei a Horizontal és a Vertical.
  • splitterDistance: az osztás arányát adja meg. Az értéket meg lehet százalékban adni, vagy pixelben. Százalékos érték megadásakor a mértékegység (%) megadása is kötelező, pixel esetében viszont tilos megadni mértékegységet.
  • splitterDistanceOnTablet: Működését és lehetőségeit tekintve megegyezik a splitterDistance attribútummal. Kiértékelésére viszont ún. tábla gépeken történő megjelenítéskor kerül csak sor. Az Effector detektálja, hogy milyen eszközről nézi a felhasználó az adott képernyőt és eldönti, hogy melyik felosztást használja.
  • disableDrag (Effector 5.1+): opcionális logikai attribútum; az egyes panelek közötti osztás mozgatását lehet letiltani, alapértelmezett értéke true.

Megjegyzés!

Effector 5.0.001 verziótól megszűnik a splitterDistanceOnTablet beállítási lehetősége.

Példa:

<SplitContainers>
    <Split id="1" orientation="Vertical" splitterDistance="50%" splitterDistanceOnTablet="315">
        <Panel1 type="Component" id="1">ComponentEventEditForm</Panel1>
        <Panel2 type="Component" id="2">ComponentEvent03Hoz</Panel2>
    </Split>
</SplitContainers>

Panelek tartalma:

A Split node belső szerkezete fix, mindegyik pontosan két node-ot tartalmazhat(Panel1 és Panel2 node-ok), melyek jelenthetnek egy konkrét Component objektumot vagy egy újabb osztást. Lent egy ketté-osztott képernyőre láthatunk példát.

A Panel1 és Panel2 node-ok attribútumai:

A type attribútum adja meg, hogy az adott node egy konkrét komponenst vagy egy újabb osztást jelent-e. Lehetséges értékei:

  • Component: ez esetben a node értéke egy konkrét komponens neve lesz (fájlnév kiterjesztés nélkül). Ennek megfelelően az id attribútum kitöltése kötelezővé válik, mert a később kialakítandó kapcsolati hálóban ez fogja azonosítani az egyes komponenseket. Az id attribútum értékének egyedinek kell lennie az adott képernyőn a komponensek tekintetében.

  • Split: Ekkor az adott node egy újabb osztást reprezentál. Értékét pedig annak a Split-nek az azonosítójára kell beállítani, amit a panel helyén szeretnénk megjeleníteni. Így egy képernyő szinte tetszőleges mélységben oszthatóvá válik. Az alábbi példán láthatjuk, hogy az első split Panel2 node-ja referenciázza a második splitet.

Példa (Component):

<Split id="1" orientation="Vertical" splitterDistance="50%">
    <Panel1 type="Component" id="1">ComponentEventEditForm</Panel1>
    <Panel2 type="Component" id="2">ComponentEvent03Hoz</Panel2>
</Split>

Példa (Split):

<Split id="1" orientation="Vertical" splitterDistance="60%">
    <Panel1 type="Component" id="1">ComponentProjectTermekek</Panel1>
    <Panel2 type="Split">2</Panel2>
</Split>
<Split id="2" orientation="Horizontal " splitterDistance="38%">
    <Panel1 type="Component" id="2">ComponentProjectsEdit</Panel1>
    <Panel2 type="Component" id="3">ComponentProjectConnections</Panel2>
</Split>

Komponensek egymáshoz kapcsolása

Miután meghatároztuk a komponensek elhelyezkedését, meg kell adnunk, hogy a különböző komponensek hogyan kapcsolódnak egymáshoz. A komponensek összekapcsolásával állítható be a szűrések iránya (melyik komponens lesz a master és melyik a detail).

Kapcsolatokat a Form\Components kollekcióban a Component node-ok segítségével definiálhatunk. Ezek a definíciók összerendelnek két komponenst, és meghatározzák a kapcsolat irányát.

<Components>
    <Component id="1" isreversible="true" isswitchable="true" isbuttonvisible="false">2</Component>
</Components>

A fenti példa azt mutatja, hogy az 1-es komponens össze van kapcsolva a 2-es komponenssel. (Az 1-es a Master, a 2-es a Detail komponens.) Az isreversible és isswitchable attribútumok jelenleg nincsenek használatban, értékük kötelezően true. Az isbuttonvisible attribútumban az összekapcsoló nyilacska láthatóságát állíthatjuk(alapértelmezésben látható). Megadása opcionális, 5.0.001-es verziótól nem támogatott funkció.

<ActiveConnections>
    <ActiveConnection id="1">2</ActiveConnection>
</ActiveConnections>

A kapcsolatok kezdeti állapotát a Form\ActiveConnections lista ActiveConnection elemeivel állíthatjuk be. Hasonlóan a fentiekhez, itt is az id attribútum tartalmazza a forrás komponens azonosítóját, és a node értéke a cél azonosítóját. Csak az aktív kapcsolatok vesznek részt a filterek továbbításában, így ajánlott minden a Form\Components kollekcióban definiált kapcsolatot itt aktívvá is tenni. Körkörös referencia nem engedélyezett.

Mit is jelent ez?

Abban az esetben, ha több komponensünk definiált (minimum három), akkor létre tudnánk hozni körkörös hivatkozást: az egyes szűri a másodikat, az a harmadikat, amely megint az elsőt szűri le.

Képernyő stílusának beállítása

A képernyő stílusát egyszerűen a Form\CssClass node megadásával állíthatjuk be. Az itt megadott CSS stílust az adott skin fájljaiban kell definiálni, és megjelenítéskor az egész képernyőre érvényes lesz, ezzel megváltoztatva a képernyő alapértelmezett kinézetét.

<CssClass>EditFormProject</CssClass>

A képernyőhöz tudunk egyedi HTML-t létrehozni, amivel a kinézetét tudjuk megváltoztatni. Ezt a HTML kódrészletet a Form\TemplateURL node segítségével emelhetjük be. A node-ba a képernyőhöz tartozó template elérési útját kell megadnunk.

Külön szabályozható a master-detail nézetbe kapcsolt komponensek fejlécének (fülek) stílusa is a /Form/SlaveComponentHeaderCssClass node segítségével. Értékének egy CSS osztályt kell beállítani, és hatására a detail (slave) komponens fejléce a definiált stílust veszi fel.

Megjegyzés!

Effector 5.0.001 verziótól megszűnik a SlaveComponentHeaderCssClassbeállítási lehetősége.

Képernyő láthatóságának szabályozása

Minden képernyőn lehetőség van pontosan egy láthatósági szabály megadására is, mely a menü felépítésekor fog kiértékelődni és a képernyő megjelenítését szabályozza. Ezt a láthatósági szabályt a Form\Rules\Visible node-ban adhatjuk meg, szintaktikáját tekintve egy RuleValueType, melyről bővebbinformáció a Szabályok fejezetben található.

Itt kell megemlítenünk, hogy a munkamódszereken és képernyőkön alkalmazott láthatósági szabályok alkotják a jogosultságok kialakításának első vonalát. Ezáltal a felhasználó számára már képernyő, illetve menü szinten elrejthetők azok az adatok, amelyek megtekintéséhez nem rendelkezik a megfelelő jogokkal. Például nem tartozik egy bizonyos csoportba, vagy osztályhoz.

  • Legutóbb frissítve: 25 hét 5 napja
  • Effector