Adobe Interactive Forms és a Webdynpro
Szeretnél megismerkedni a SAP és az Adobe legújabb nyomtatványkészítési technikájával? Ebben a cikkben egy példaalkalmazáson keresztül megtanulhatod, hogy hogyan lehet rövid idő alatt, fáradtság nélkül igényes interaktív űrlapokat készíteni.
A példa során egy Webdynpro felületre teszünk ki egy nyomtatványt, amit a felhasználó kedve szerint tölthet ki.
Az első lépés létrehozni a Webdynpro alkalmazást. Ezt a SE80 tranzakcióval tudjuk megtenni. Kiválasztjuk a legördülő listából a Web Dynpro Comp. / Intface elemet és beírjuk a programunk nevét. Legyen például ZWD_ADOBE_DEMO.
Ekkor felajánlja a program, hogy létrehozza a komponensünket, amennyiben még nem létezik. Nyomjuk meg a Yes gombot és adjunk meg valami megnevezést a Description mezőbe!

Amikor a zöld pipára kattintunk, létrejön a webdynpro komponensünk váza. Majd mentsük el lokális objektumként, így nem készül transzport kérelem! Ha éles feladaton dolgozunk, akkor természetesen egy létező fejlesztési osztályba kell a programot raknunk.
A legenerált programunk automatikusan tartalmaz egy MAIN nézetet, erre fogjuk kirakni az Interactive Formunkat. Ehhez hozzunk létre egy NODE-ot ADAT néven! Ez a MAIN nézet Context fülén tehetjük meg.

Majd ez alatt egy újabbat TABLE névvel. Az alábbi tulajdonságokkal:
CARDINALITY: 0..n
SELECTION: 0..1
DICTIONARY STRUCTURE: SFLIGHT
Ezután rá kel kattintanunk az Add Attribute from Structure gombra így átvehetjük a teljes SFLIGHT struktúrát a context-be.
Hozzunk még létre 2 string típusú mezőt az ADAT node alatt, az egyiknek legyen a neve NEV a másiknak pedig INDOK!

Ekkor így kell kinézni a létrejött adatstruktúránknak:

A második lépés a programra felpakolni a használni kívánt komponenseket. Ezt a MAIN nézet Layout fülén tudjuk megtenni. Álljunk rá a ROOTUIELEMENTCONTAINER-re és válasszuk az Insert Element menüpontot!

Adjuk meg a nevet, ami a példánkban FORM, majd a típust, ami pedig InteractiveForm legyen! Ekkor létrejön a komponens, már csak néhány adatot kell nekünk beállítani. Menjünk a dataSource attribútum mellett található kis négyzetre és nyomjunk rá.

Ekkor megjelenik a context térkép. Itt az egész ADAT node-ot válasszuk ki és nyomjunk rá a zöld pipára! Már csak létre kell hozni egy template forrást a formunknak. Írjuk be a templateSource mezőbe, hogy ZZ_ADOBE, majd kattintsunk rá!

Ekkor a következő ablakot láthatjuk:

Írjuk be interfész névnek a ZZ_ADOBE-t, majd kattintsunk a Context gombra.
Itt válasszuk ki az ADAT node-ot, majd mentsük el lokális objektumként az interfészünket!
Ekkor az alábbi kép tárul a szemünk elé:

Ez az Adobe LiveCycle Designer SAP-ba integrálva. A számokkal jelölt részek a következők:
1. Komponens könyvtár: Innen választhatjuk ki, hogy az űrlapunkra milyen komponenseket szeretnénk felrakni. Van itt gombtól kezdve a vonalkódig minden, amit csak egy komplex alkalmazás használhat.
2. Adat nézet: Itt láthatjuk azokat az adatokat, amihez az űrlapból hozzá tudunk férni (ezeket hoztuk létre a contexteknél).
3. A komponensek illetve a lap tulajdonságait itt találhatjuk meg. Itt írhatjuk át például egy kirakott mező címkéjét.
4. Az egyenlőre üres lap, amire a komponenseket ki fogjuk pakolni.
Az egész form szerkesztés nagyon egyszerű, drag and drop technikával történik. Megfogjuk a használni kívánt komponenst és áthúzzuk a lapunkra. Első lépésként rakjunk ki egy szövegelemet az oldalra, és írjuk bele, hogy Járatfoglalás! Majd húzzuk át a NEV és az INDOK mezőt a lapunkra! Ráadásként dobjuk fel egy DropDownList-et is! Ekkor így néz ki a lapunk:

Már csak egy feladatunk van, mégpedig, hogy a Drop-down listát feltöltsük a saját táblázatunk elemeivel. Ehhez válasszuk ki a menüben a Tools/Options/Data Binding menüpontot és pipáljuk be a Show Dynamic Properties jelölőnégyzetet!


Majd menjünk át a 3. (tulajdonságok) részére az űrlapunknak. Itt kattintsunk a Specify Item Values szövegre. Ekkor megadhatjuk, hogy a listánk honnan vegye az elemeket.

Items: $record.TABLE.DATA[*]
Item Text: FLDATE
Item Value: FLDATE
Most már elmenthetjük és aktiválhatjuk az űrlapunkat. Ha ez megvan, akkor irány a webdynpro alkalmazásunk, ahol annyit kell még tennünk, hogy feltöltjük a contextet, amiből a dropdown lista az elemeket veszi. Kattintsunk a VIEW nézetünkre, majd a Methods fülön válasszuk ki a WDDOINIT metódust!

Ide írjuk be az alábbi kódot:
DATA: lt_sflight TYPE TABLE OF sflight.
SELECT * FROM sflight INTO TABLE lt_sflight.
DATA lo_nd_adat TYPE REF TO if_wd_context_node.
DATA lo_nd_table TYPE REF TO if_wd_context_node.
DATA lo_el_table TYPE REF TO if_wd_context_element.
DATA ls_table TYPE wd_this->element_table.
* navigate from <CONTEXT> to <ADAT> via lead selection
lo_nd_adat = wd_context->get_child_node( name = wd_this->wdctx_adat ).
* navigate from <ADAT> to <TABLE> via lead selection
lo_nd_table = lo_nd_adat->get_child_node( name = wd_this->wdctx_table ).
lo_nd_table->bind_table( new_items = lt_sflight ).
Ez a programrészlet annyit csinál, hogy feltölt egy belső táblát elemekkel az SFLIGHT táblából és ezt értékül adja a TABLE context-nek. Ha ez megvan, akkor mentsük el a webdynpro programunkat és aktiváljuk. Majd hozzuk létre magát a Webdynpro alkalmazást. Jobb kattintás a programunk nevén, Create / Web Dynpro Component (Interface) és már csak ki kell tölteni a Description mezőt.


Már tesztelhetjük is az alkalmazást a
ikonnal.

Az alábbi interaktív űrlapunkat bármikor el tudjuk menteni, illetve nyomtatni.
Természetesen ez csak egy kis ízelítő volt az Interactive Forms világából, ennél jóval szebb, igényesebb nyomtatványokat tudunk ezzel a technológiával készíteni. Reméljük felkeltette ez a kis ismertető a kíváncsiságotokat, hogy elkezdjetek foglalkozni ezzel a technológiával. Bármilyen kérdésetek van, azt nyugodtan tegyétek föl a fórumon!
Nincs hozzászólása.
A téma megvitatása a fórumon. (0 hozzászólás)


