Hirdetés
 

Adobe Interactive Forms és a Webdynpro

PDF
Nyomtatás

adobe_lc1.jpgSzeretné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.

Mint már korábbi Tudásmorzsák cikkekben olvashattatok róla, az SAP legújabb nyomtatványkezelési technikája az Adobe Interactive Forms. Akit használt már SapScriptet vagy Smartformot, az bizonyára tapasztalta, hogy ezekkel az eszközökkel eléggé nehézkes a legegyszerűbb űrlap létrehozása is. Ezen változtatott a SAP és az Adobe-al karöltve beintegrálja az Adobe LiveCycle Designer-t az SAP fejlesztői környezetébe. Ahhoz hogy Interactive Formokat fejlesszünk, nem kell más, minthogy a gépünkre feltelepítsük az Adobe LiveCycle Designert, ami a SAPGui része. Most egy példaalkalmazáson keresztül fogom bemutatni, hogy hogyan tudunk interaktív űrlapokat fejleszteni az SAP rendszerünkben.
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!

adobeifwd01.jpg adobeifwd01.jpg



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.

adobeifwd01.jpg
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.
adobeifwd01.jpg

Majd ez alatt egy újabbat TABLE névvel. Az alábbi tulajdonságokkal:
CARDINALITY: 0..n
SELECTION: 0..1
DICTIONARY STRUCTURE: SFLIGHT


adobeifwd01.jpg
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!

adobeifwd01.jpg

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

adobeifwd01.jpg

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!

adobeifwd01.jpg adobeifwd01.jpg

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á.

adobeifwd01.jpg


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á!

adobeifwd01.jpg


Ekkor a következő ablakot láthatjuk:

adobeifwd01.jpg



Í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é:

adobeifwd01.jpg


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:

adobeifwd01.jpg



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!

adobeifwd01.jpg

adobeifwd01.jpg


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.

adobeifwd01.jpg



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!

adobeifwd01.jpg



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.

adobeifwd01.jpg

adobeifwd01.jpg

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

adobeifwd01.jpg


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!


A szerző 2007-ben került kapcsolatba az SAP-val, azóta ABAP fejlesztőként dolgozik egy hazai nagyvállalatnál, ahol Security, MM és SD modulokban végez programozási feladatokat.

További cikkek a szerzőtől


Nincs hozzászólása.
A téma megvitatása a fórumon. (0 hozzászólás)