1. Web Dynpro
Dr. Kerem Koseoglu
[Type the abstract of the document here. The abstract is typically a short summary of the
contents of the document.]
Fall
11
2. 2
Table of Contents
Temel Kavramlar ...........................................................................................................3
Context.....................................................................................................................................................................3
Görsel Öğeler ve Örnek Kodlar.....................................................................................6
Window...................................................................................................................................................................6
View..........................................................................................................................................................................8
İki View Arası Geçiş........................................................................................................................................8
RootUIElementContainer..............................................................................................................................11
Flow Layout....................................................................................................................................................11
Grid Layout.....................................................................................................................................................12
TextBox.................................................................................................................................................................13
Button....................................................................................................................................................................15
Table.......................................................................................................................................................................16
Tablo İçerisinde Veri Gösterme...............................................................................................................16
Toolbar.............................................................................................................................................................20
Seçili Satırı TespitEtme.............................................................................................................................21
ALV.....................................................................................................................................................................22
Group......................................................................................................................................................................22
Parameters......................................................................................................................................................22
Select-Options................................................................................................................................................25
Transparent Container...................................................................................................................................25
FileDownload......................................................................................................................................................26
FileUpload............................................................................................................................................................30
CheckBox..............................................................................................................................................................32
CheckBoxGroup.................................................................................................................................................33
Kısayollar & İpuçları ....................................................................................................36
Görsel Öğelerin Özelliklerini Dinamik Değiştirmek ..........................................................................36
Mesajlar.................................................................................................................................................................36
Text Elements.....................................................................................................................................................38
Sınıfın Hazırlanması....................................................................................................................................38
Web Dynpro Adımları.................................................................................................................................39
Fonksiyon Çağırma ..........................................................................................................................................42
Component Kullanımı.....................................................................................................................................46
Component’in Hazırlanması.....................................................................................................................46
Component’I Çağıracak Uygulamanın Hazırlanması.....................................................................49
Web Dynpro Implementation Class Bulmak.........................................................................................56
Sık Kullanılan Standart Component’ler ......................................................................56
Select-Options Oluşturma.............................................................................................................................56
Uygulama Hazırlıkları................................................................................................................................56
Seçim Ekranının Hazırlanması...............................................................................................................59
Seçim Ekranından DeğerlerinAlınması...............................................................................................62
ALV Grid................................................................................................................................................................66
3. 3
Temel Kavramlar
Context
Context, değişkenlerin saklandığı alan olarak değerlendirilebilir. Bir Web Dynpro
uygulamasında, iki temel Context’ten bahsedebiliriz: Component Controller
Context ve View Context.
Component Controller Context içerisinde; View’lardan bağımsız bir şekilde
global değişkenler tanımlanır.
View Context içerisinde ise, sadece o View kapsamında geçerli olacak
değişkenler tanımlanır. View’da Input Field, Table gibi veri gösteren her bir
kontrolün arkasında bir View Context değişkeni bulunmalıdır.
Component Controller Context ile View Context Map edilebilmektedir. Bu
yapıldığında; CCC içerisindeki değer VC’e otomatik transfer edilecek, VC
kapsamında bu değerle oynandığında ise CCC otomatik güncellenecektir. Bu
şekilde; View değişkenleri ile global değişkenler arasındaki bağlantı
kurulabilmektedir.
Bu durumu test edecek örnek bir uygulama inceleyelim. Bu uygulamada, iki
farklı View bulunmaktadır:
Şimdi uygulamamızın global değişkenlerini tanımlıyoruz. Bunun için,
COMPONENTCONTROLLER Context’e gidip, global değişkenleri barındıracak
düz bir Node eklediğimizi düşünelim. Bunun için Context’e sağ tıklayıp Create
Node menüsünü kullanıyoruz. Örneğimizde T001’den bazı değerler aldık.
4. 4
İkinci adımda, MAIN View’una giderek bu View üzerinde kullanılacak yerel
değişkenleri tanımlıyor olacağız. Aynı zamanda bu yerel değişkenlerin
Component’in global değişkenlerle Map edilmesini istiyoruz. Yani; CCC değerleri
otomatik VC’e aksın, View’da yapılan değişiklikler ise VC üzerinden otomatik
olarak CCC’ye yansısın istiyoruz.
Bunun için, View Context içerisinde, CCC Node’unu sağdan sola doğru VC’a
sürükleyeceğiz. Dilersek, adını değiştirip MAIN_YEREL_DEGERLER yapabiliriz.
Ekranımız şöyle gözüküyor olmalı:
Bu noktada; global değişken ile yerel değişkenler arasındaki bağlantı kurulmuş
bulunuyor. MAIN çağırıldığında, GLOBAL_DEGERLER içerisindeki değerler
MAIN_YEREL_DEGERLER’e yazılacaktır. View’daki kodlar / kontroller aracılığıyla
MAIN_YEREL_DEGERLER’de yapılacak her değişiklik ise, otomatik olarak
GLOBAL_DEGERLER’e yansıyacaktır.
Bu adımı doğru yaptıysak, MAIN_YEREL_DEGERLER özellikleri şöyle
gözükmelidir:
5. 5
“Mapping Path” boş ise, sürükle bırakta bir problem olmuştur.
MAIN_YEREL_DEGERLER’e sağ tıklayıp, “Create Mapping” diyerek bağlantıyı
düzeltebiliriz.
MAIN2 View’unda da aynı şeyi yapıyoruz.
Şimdi; uygulamamızı, bunun Demo’unu yapacak hale getirelim. MAIN üzerine bir
MAIN_YEREL_DEGERLER-BUTXT’e referanslı bir Input Field, bir de kullanıcıyı
MAIN2’ye yönlendirecek Buton koyuyoruz:
MAIN2’ye ise, MAIN2_YEREL_DEGERLER-BUTXT’yi gösterecek bir Text alanı
koyuyoruz:
Uygulamanın çalışma mantığı şu şekilde olacaktır:
Kullanıcının karşısına MAIN gelir
Kullanıcı MAIN içerisindeki kutuya bir değer yazar ve butona basar
Bu değer; önce MAIN_YEREL_DEGERLER-BUTXT’ye, oradan da
GLOBAL_DEGERLER-BUTXT’ye yazılır
MAIN2 çağırılır
6. 6
Değer, GLOBAL_DEGERLER-BUTXT’den MAIN2_YEREL_DEGERLER-
BUTXT’ye yazılır ve oradan da ekrana aktarılır
Örnek ekran görüntüleri şöyledir:
Opsiyonel olarak; ilk View’da bir başlangıç değeri atamak isteseydik şu kodu
yazacaktık:
method WDDOINIT .
data:
lo_node type ref to IF_WD_CONTEXT_NODE.
* Context'ten Node'u alalım
CALL METHOD wd_context->get_child_node
EXPORTING
name = 'MAIN_YEREL_DEGERLER'
receiving
child_node = lo_node.
* Bu Node'daki BUTXT'ye değer atayalım
CALL METHOD lo_node->set_attribute
EXPORTING
value = 'Beni Değiştir'
name = 'BUTXT'.
endmethod.
Bu opsiyoneldir.
Görsel Öğeler ve Örnek Kodlar
Window
Window, tarayıcı içerisindeki sayfaya karışık gelen kontroldür gibi düşünülebilir.
7. 7
Bir Window içerisine, o Window’da kullanılacak tüm View’lar eklenmelidir.
Bunun için, pencerenin “Window” tabında pencere adına sağ tıklayıp “Embed
View” menüsünü kullanabiliriz.
Tüm View’lar eklendiğinde liste şöyle gözüküyor olmalıdır:
8. 8
Uygulama ilk başladığında hangi View’un açılmasını istiyorsak, ona sağ tıklayıp
“Set As Default” menüsüne tıklayabiliriz.
View
View, ABAP Dynpro’daki Screen’lere karşılık gelir. Her bir View’u bir Screen
olarak düşünebilirsiniz.
İki View Arası Geçiş
Bir kaynak, bir de hedef View’umuz olsun.
Kaynak View’da bir Outbound-Plug, hedef View’da ise bir Inbound-Plug
yaratmamız gerekiyor. Outbound-Plug View’dan çıkış, Inbound-Plug ise View’a
giriş anlamına gelmektedir.
9. 9
Şimdi bu iki Plug’u birbirine bağlamamız gerekiyor. Bunun için Window
özelliklerine gidiyoruz. Bu son yaptığımız işlemden sonra, Window
özelliklerindeki View listesi şöyle gözüküyor olmalıdır:
10. 10
Burada, “HEDEFE_GIT”I sürükle bırak ile “KAYNAKTAN_GEL” üzerine bırakarak
ikisi arasındaki bağlantıyı tanımlamış oluyoruz:
Artık “KAYNAK”taki kod içerisinde “HEDEFE_GIT” Output Plug’unu her
çağırdığımızda, Window içerisinde “KAYNAKTAN_GEL” üzerinden “HEDEF”
View’u gösterilecektir.
Bunu denemek için, kaynak View’a bir düğme ekliyoruz:
Düğme özellikleri içerisinde yeni bir Action ekliyoruz. Bu Action içerisinde,
aşağıdaki kod yer alacaktır:
method ONACTIONBUTTON_ACTION .
wd_this->fire_hedefe_git_plg( ).
endmethod.
11. 11
Bu şekilde, hedefe gitme Plug’u etkinleştirilmiş olacaktır. Uygulamayı deneyelim:
Bu sırada iki View arasında veri alışverişinde bulunmak isteyebiliriz. Örneğin ilk
View’da yazılmış olan bir metin ikinci View’da lazım olabilir.
RootUIElementContainer
En temel görsel öğedir. Üzerine TextBox gibi kontrolleri koyacağımız alandır.
Yeni bir View yarattığımızda bu kendi kendine gelmektedir.
Buradaki en önemli özellik Layout özelliğidir. 4 çeşit Layout vardır.
Flow Layout
Flow Layout içerisinde, ekrana dizdiğimiz öğeler dizi halinde yan yana gelecektir.
12. 12
GridLayout
GridLayout içerisine, aynen bir Excel sayfası gibi hücrelere bölünmüş bir düzen
yerleştirilecektir:
Bu örnekte, 4 sütunluk bir yapı öngörüyoruz. Bu Form üzerine sürükle & bırak
ile Label’lar bırakarak içlerini doldurabiliriz. 5.yi bıraktığımızda, 5.si otomatik
olarak 2. Satıra kırılacaktır.
Bunun yanı sıra; formdaki her bir öğe için Grid Layout’a özel yeni özellikler
belirecektir:
13. 13
Düzen bu haldeyken Container’in ColCount özelliğini 4’ten 5’e çıkarırsak, 5.
Hücrenin otomatik olarak ilk satıra taşındığını görebiliriz:
TextBox
14. 14
Metin kutusunu GV_TEXT2 değişkeniyle Bind etmemiz gerekiyor. Bunu, metin
kutusunun özellikleri içinden yapıyoruz:
Artık GV_TEXT2’ye hangi değeri atarsak kutuda o gözükecek, kutuda hangi değer
gözükürse de GV_TEXT2’ye bu yansıyacaktır. Bunu test etmek için, WDOINIT
içerisine şu kodu yazalım:
CALL METHOD WD_CONTEXT->SET_ATTRIBUTE
EXPORTING
VALUE = 'WILLKOMMEN!'
NAME = 'GV_TEXT2'.
Uygulamayı çalıştırınca, sonucu göreceğiz:
15. 15
Button
Tıklanınca bir işe yaramasını istediğimiz butonun özelliklerinde, Events altında
onAction içerisine yeni bir Method tanımlayacağız.
Bu yeni method, listemizde gelecektir:
Bu methoda girip, tıklandığında ne yapılmasını istiyorsak ona istinaden bir kod
yazabiliriz. Örneğimizde, kaç kez tıklandığını sayıyor olalım:
METHOD onactionbutton_action .
DATA:
lv_tik TYPE numc2,
lv_metin TYPE char20.
16. 16
* Şimdiye kadar kaç kez tıklanmış?
CALL METHOD wd_context->get_attribute
EXPORTING
name = 'GV_TIK_SAYISI'
IMPORTING
value = lv_tik.
* 1 arttır ve Context'e geri yaz
ADD 1 TO lv_tik.
CALL METHOD wd_context->set_attribute
EXPORTING
value = lv_tik
name = 'GV_TIK_SAYISI'.
* TextBox'taki yazıyı değiştir
CONCATENATE
lv_tik
'. tık'
INTO lv_metin.
CALL METHOD wd_context->set_attribute
EXPORTING
value = lv_metin
name = 'GV_TEXT2'.
ENDMETHOD.
Uygulamayı çalıştırdığımızda, tıkladıkça değer artacaktır:
Table
Bu kontrol, ALV Grid gibi düşünülebilir.
Tablo İçerisinde Veri Gösterme
Bu örnekte, bir tablo içerisinde veri gösteren basit bir uygulama yazacağız.
Amacımız, TCURT tablosunun içeriğini listelemek olacak.
Yeni bir uygulama yaratıp, View Context’I açıyoruz. Buradaki amacımız, View
bünyesinde TCURT’tan çekilecek olan veriyi saklayacak değişkeni (ITAB)
tanımlamak. Context’e sağ tıklayıp, Create Node menüsünü seçiyoruz. Node’u
şimdilik “Work Area” veya “Internal Table” gibi düşünebiliriz. Aynı menüdeki
“Attribute” ise değişken anlamına gelir.
17. 17
Buradaki önemli alanlar;
Node Name: Değişkenin ismi
Dictionary-Structure: SE11’de hangi yapıya tekabül ettiği
Cardinality: 0..n diyerek bir ITAB olduğunu belirttik. 1..1 deseydik, bir
Work Area olduğunu ifade edecektik.
Akabinde; “Add Attribute from Structure” düğmesine tıklıyoruz. Karşımıza
gelecek ikinci penere, bize TCURT’tan hangi alanları almak istediğimiz soracak.
Örneğimizde hepsini alalım.
18. 18
Bu noktada Context şöyle gözüküyor olmalı:
Sırada görsel olarak tabloyu oluşturma adımı var. View’un “Layout” bölümüne
gidip, Complex Table öğesini sürükle & bırak ile forma bırakıyoruz. Akabinde,
sağdaki ağaç menüde Table’a sağ tıklayarak “Create Binding” menüsünü
seçiyoruz. Burada, Context GT_TCURT’I seçeceğiz.
19. 19
Dilersek pencere üzerindeki ayarlamalarla hangi alanın hangi tipte (TextBox,
Input Field, vb.) görüntüleneceğini değiştirebiliriz. Örneğimizde LTEXT alanını
açık hale getirelim:
Bu pencereyi kapattığımızda; tablomuz TCURT tipine paralel olarak
şekillenecektir:
20. 20
Sırada, TCURT’tan veri çekerek tabloya yazma işlemi var. Bu örnekte sayfa açılır
açılmaz bu değerleri çekmek istediğimizi varsayalım. Methods WDDOINIT
içerisine gidip kodumuzu yazıyoruz:
METHOD wddoinit .
DATA:
lo_node_tcurt TYPE REF TO if_wd_context_node,
lt_tcurt TYPE STANDARD TABLE OF tcurt.
* Veriyi çekelim
SELECT * INTO TABLE lt_tcurt
FROM tcurt
WHERE spras EQ sy-langu.
* View Context'ten GT_TCURT Node'unu alalım
CALL METHOD wd_context->get_child_node
EXPORTING
name = 'GT_TCURT'
RECEIVING
child_node = lo_node_tcurt.
* Bu Node'a verimizi Bind edelim
CALL METHOD lo_node_tcurt->bind_table
EXPORTING
new_items = lt_tcurt.
ENDMETHOD.
Uygulamayı çalıştırdığımızda, kurların geldiğini göreceğiz:
Toolbar
Dilersek Table’ımıza Toolbar ekleyebiliriz. Bunun için; View’dayken ağaç
içerisinde Table’a sağ tıklayıp “Add Toolbar” diyoruz. Listemize eklenen
Toolbar’a sağ tıklayıp da “Add Button” diyerek yeni butonlar ekleyebiliriz.
21. 21
Bu butonlar, normal Button gibi davranacaktır. Yani; Text, Image atayabilir ve
Action ekleyebiliriz. Aşağıda, çalışan örnek bir uygulama görülebilir:
Seçili Satırı Tespit Etme
Table Control’da o sırada seçilen satırı tespit etmek için yapılması gereken özel
birşey yoktur. Table’ın arkasında 0..n Cardinality’e sahip bir Internal Table var
diyelim. Context ‘ten bu Internal Table’ı Table’mış gibi değil de düz bir Node’muş
gibi okursak, o anda seçili olan satırın verilerine erişebiliriz.
22. 22
ALV
(bkz: ALV Grid )
Group
Bu öğe; Textbox, Label gibi çeşitli öğeleri gruplamak için kullanılır. Aynen
RootUIElementContainer gibi; Layout türü seçilebilir.
Group’un önemli özelliklerinden biri, otomatik olarak bir seçim ekranına
dönüştürülebilmesidir.
Parameters
Bu işlem için, öncelikle View Context’imizde parametrelerimizi barındıran Flat
bir yapı olmalıdır:
23. 23
Bu adımdan sonra, View üzerine sürükle & bırak ile bir Layout Group
oluşturuyoruz:
24. 24
Sadece parametre göstereceksek, Group özelliklerinde Layout’u GridLayout
olarak ayarlamamız ve colCount’u “2” olarak seçmemiz iyi bir fikir olacaktır.
Şimdi, sağ taraftaki ağaçta “Group”a sağ tıklayıp “Create Container Form”
menüsüne tıklıyoruz. Açılacak olan pencerede Context’e tıklayıp,
parametrelerimizi barındıran GF_PARAM’ı seçiyoruz.
Gerekiyorsa alanların özelliklerini detaylı bir şekilde tanımlayabiliriz. Varsayılan
değerleri korumak muhtemelen yeterli olacaktır.
25. 25
İşimiz bittiğinde, parametreler oluşmuş olacaktır:
Uygulamayı çalıştırdığımızda; arama yardımları da dahil olmak üzere tam bir
parametre girişi olduğunu görebiliriz:
Select-Options
(bkz: Select-Options Oluşturma )
Transparent Container
Bu öğe sayesinde, VIEW içerisinde değişik Container’ler açmak mümkündür.
Örneğin; ilk satırda 2, ikinci satırda da 3 tane olmak üzere toplam 5 TextBox
göstermek istiyoruz diyelim. Bunu, RootUIElementContainer içerisinde standart
Grid veya Flow özellikleriyle yapmak zordur.
Bunun yerine, Root’un özelliğini tek sütunlu bir Grid yapıyoruz. Her bir Grid
satırına birer Transparent Container yerleştiriyoruz.
26. 26
TC1’I iki sütunlu bir Grid, TC2’yi ise üç sütunlu bir Grid haline getiriyoruz. Bunu
yaparak içine örnek birer TextBox yerleştiriyoruz.
Ekrandaki görüntü şöyle oluyor:
FileDownload
Bu öğeyi kullanarak, Web Dynpro sayfanızdan dosya indirilmesini
sağlayabilirsiniz.
Şimdi, elimizle oluşturduğumuz basit bir Text’I indirecek bir uygulama
geliştirelim.
Context içerisinde, dosya içeriğimizi bulunduracak olan XSTRING tipinde bir
Attribute’umuz olmalı. Buraya ne doldurursak, FileDownload öğesi de onu
indirecektir.
27. 27
View içerisine Integration FileDownload tipinde bir öğe sürükleyip
bırakıyoruz. Özelliklerini aşağıdaki gibi atıyoruz (DATA kısmını, yanındaki
butona tıklayarak doldurduk):
29. 29
Son olarak, DOSYA_ICERIK değişkenine örnek bir veri atma işimiz var. Bu iş 3
adımdan oluşacaktır:
Düz bir STRING değişkenine verileri yazmak
STRING’deki değişkeni XSTRING’e çevirmek
XSTRING tipindeki değişkeni Context’e yazmak
Bu kodu büyük ölçüde Wizard yardımıyla oluşturacağız, bu konudaki detayları
Context bölümünde bulabilirsiniz.
Basit olması açısından bu işlemi WDDOINIT Method’unda yapacağız. Bitmiş kod
şöyle gözükecektir:
method WDDOINIT .
* ----------
* String'imizi oluşturalım
* ----------
data lv_string type string.
lv_string = '1234567890qwertyuıop'.
* ----------
* Context'e yazalım
* ----------
data lo_nd_genel type ref to if_wd_context_node.
data lo_el_genel type ref to if_wd_context_element.
data ls_genel type wd_this->element_genel.
data lv_dosya_icerik type wd_this->element_genel-dosya_icerik.
* navigate from <CONTEXT> to <GENEL> via lead selection
lo_nd_genel = wd_context->get_child_node( name = wd_this-
>wdctx_genel ).
* get element via lead selection
30. 30
lo_el_genel = lo_nd_genel->get_element( ).
* fill attribute
call function 'HR_KR_STRING_TO_XSTRING'
exporting
CODEPAGE_TO = '1614'
unicode_string = lv_string
IMPORTING
XSTRING_STREAM = lv_dosya_icerik.
* set single attribute
lo_el_genel->set_attribute(
name = `DOSYA_ICERIK`
value = lv_dosya_icerik ).
endmethod.
Uygulamayı çalıştırdığımızda dosyanın indirildiğini görebiliriz:
FileUpload
FileUpload için yapılması gerekenler, FileDownload ‘a çok benzemektedir. Bu
kontrolün “data” özelliğinde; XSTRING türünde bir değişken olmalıdır:
31. 31
Kullanıcı Web sayfası üzerinde bir dosya seçip sonrasında herhangi bir işlem
yaptığında (bir butona tıklamak gibi) seçtiği dosyanın içeriği
MAIN.GENEL.ICERIK değişkenine yazılacaktır.
Dosya içeriğine XSTRING değil de STRING olarak sahip olmak istersek,
HR_KR_XSTRING_TO_STRING fonksiyonunu kullanabiliriz.
Aşağıda, örnek bir VIEW görebilirsiniz:
Bu Buton’a tıklandığında FileUpload’a girilen dosya otomatik olarak
MAIN.GENEL.ICERIK değişkenine aktarılacaktır. Bu değeri STRING’e çevirip,
akabinde yandaki TextBox içerisinde görüntüleyen örnek kod şöyledir (çoğu
Wizard ile üretilmiştir):
METHOD onactionbtn .
* ----------
* XSTRING AL
* ----------
DATA lo_nd_genel TYPE REF TO if_wd_context_node.
32. 32
DATA lo_el_genel TYPE REF TO if_wd_context_element.
DATA ls_genel TYPE wd_this->element_genel.
DATA lv_icerik TYPE wd_this->element_genel-icerik.
* navigate from <CONTEXT> to <GENEL> via lead selection
lo_nd_genel = wd_context->get_child_node( name = wd_this-
>wdctx_genel ).
* get element via lead selection
lo_el_genel = lo_nd_genel->get_element( ).
* get single attribute
lo_el_genel->get_attribute(
EXPORTING
name = `ICERIK`
IMPORTING
value = lv_icerik ).
* ----------
* STRING YAP ve TextBox'ta göster
* ----------
DATA lv_icerik_s TYPE wd_this->element_genel-icerik_s.
* get element via lead selection
lo_el_genel = lo_nd_genel->get_element( ).
* fill attribute
CALL FUNCTION 'HR_KR_XSTRING_TO_STRING'
EXPORTING
from_codepage = '1614'
in_xstring = lv_icerik
IMPORTING
out_string = lv_icerik_s.
* set single attribute
lo_el_genel->set_attribute(
name = `ICERIK_S`
value = lv_icerik_s ).
ENDMETHOD.
Uygulamanın örnek çıktısı şöyledir:
CheckBox
CheckBox kullanımı oldukça kolaydır. Ekrana bıraktığınız CheckBox’un arkasına;
Context ‘ten tek karakterli bir Attribute belirttiğinizde, “CHECKED” özelliğine
göre bu değişken X veya ‘’ değerini alacaktır.
33. 33
CheckBoxGroup
CheckBoxGroup metinleri, Context’te bulunan bir ITAB içerisinde bulunmalıdır:
Buraya atadığımız metinler, uygulama çalıştığında ekrada CheckBox listesi
olarak görüntülenecektir:
method WDDOINIT .
data lo_nd_multi_checkbox type ref to if_wd_context_node.
data lt_multi_checkbox type wd_this->elements_multi_checkbox.
* navigate from <CONTEXT> to <MULTI_CHECKBOX> via lead selection
lo_nd_multi_checkbox = wd_context->get_child_node( name = wd_this-
>wdctx_multi_checkbox ).
** @TODO compute values
data lf_mc like line of lt_multi_checkbox.
lf_mc-metin = 'BİR'. append lf_mc to lt_multi_checkbox.
lf_mc-metin = 'İKİ'. append lf_mc to lt_multi_checkbox.
**
lo_nd_multi_checkbox->bind_table( new_items = lt_multi_checkbox
set_initial_elements = abap_true ).
endmethod.
34. 34
Bu CheckBox grubundaki hangi öğe tıklanmış hangisi tıklanmamış bilmek için,
bu gruba ait onToggle Event’ine bir Action yaratıyoruz. Bu sırada “Transfer
Parameters”in tıklı olmasına dikkat edelim.
Buraya iletilecek parametreler, bize hangi Item’ın tıklanıp hangisinin
boşaltıldığının bilgisini verecektir:
35. 35
Aşağıda bu bilgilerden faydalanıp, neyin tıklanıp neyin tıklanmadığını bir
STRING’e atayan örnek bir kod bulabilirsiniz (çoğu Wizard ile üretilmiştir):
METHOD onactionontoggle .
DATA lo_nd_genel TYPE REF TO if_wd_context_node.
DATA lo_el_genel TYPE REF TO if_wd_context_element.
DATA ls_genel TYPE wd_this->element_genel.
DATA lv_text1 TYPE wd_this->element_genel-text1.
* navigate from <CONTEXT> to <GENEL> via lead selection
lo_nd_genel = wd_context->get_child_node( name = wd_this-
>wdctx_genel ).
* get element via lead selection
lo_el_genel = lo_nd_genel->get_element( ).
* fill attribute
DATA:
a(50),
c(50).
WRITE:
index TO a LEFT-JUSTIFIED,
checked TO c LEFT-JUSTIFIED.
CONCATENATE
'INDEX:'
a
'CHECKED:'
c
INTO lv_text1 SEPARATED BY space.
* set single attribute
lo_el_genel->set_attribute(
name = `TEXT1`
value = lv_text1 ).
ENDMETHOD.
Uygulamanın çalışır hali, şöyledir:
36. 36
Kısayollar & İpuçları
Görsel Öğelerin Özelliklerini Dinamik Değiştirmek
Örneğin, bir InputField’ın ReadOnly olup olmadığını koddan dinamik belirlemek
istiyor olabiliriz. Bu durumda; kontrolün özellikleri arasında readOnly’nin
yanındaki butona basarak bu özelliği Context’teki bir değişkene bağlayabiliriz:
Bu örnekte; artık READ_ONLY değişkenine “X” atadığımızda INPUT_FIELD salt
okunur olacaktır. ‘’ atadığımızda ise tekrar Edit edilebilir hale gelecektir.
Mesajlar
Web Dynpro uygulamalarında mesaj vermek çok kolaydır; ancak bunu standart
MESSAGE komutlarıyla yapmamalısınız.
VIEW içerisinde kod yazdığınız herhangi bir Method’da Wizard Generate
Message bölümüne gelin. Burada F4 yardımını kullanarak pek çok mesaj
verdirme opsiyonu bulabilirsiniz:
37. 37
SE91’den bir mesaj çağıracaksanız, REPORT_T100_MESSAGE yöntemi
kullanılmalıdır. Aşağıda, REPORT_SUCCESS şeklinde üretilmiş örnek bir kod
görebilirsiniz:
method ONACTIONBUTTON_ACTION .
data:
lv_msgid type string.
* get message manager
data lo_api_controller type ref to if_wd_controller.
data lo_message_manager type ref to if_wd_message_manager.
lo_api_controller ?= wd_this->wd_get_api( ).
call method lo_api_controller->get_message_manager
receiving
message_manager = lo_message_manager
.
* report message
call method lo_message_manager->report_success
exporting
message_text = 'You clicked the button!'
* params =
* msg_user_data =
* is_permanent = ABAP_FALSE
* scope_permanent_msg = CO_MSG_SCOPE_CONTROLLER
* view =
* show_as_popup =
* controller_permanent_msg =
* msg_index =
* cancel_navigation =
* enable_message_navigation =
receiving
message_id = lv_msgid.
38. 38
endmethod.
Text Elements
Standart ABAP programlarında alışık olduğumuz Text Element’ler, Web Dynpro
uygulamalarında doğrudan bulunmamaktadır. Bunun yerine, metinleri
barındıracak bir Class yaratıp, bu Class’I Web Dynpro uygulamamıza bağlıyor
olacağız.
Bu işlemi adım adım görelim.
SınıfınHazırlanması
Öncelikle SE24’te yeni bir sınıf yaratıyoruz. Bu sınıfın Superclass’I
CL_WD_COMPONENT_ASSISTANCE olmalı.
Sınıfımız içerisinde Goto Text Elements menüsünü kullanarak standart bir
ABAP programındaymış gibi metin öğelerimizi yaratabiliriz. &PARA1& ,
&PARA2& , &PARA3& ve &PARA4& formatında 4 taneye kadar parametre de
kullanabiliyoruz.
39. 39
Burada ABAP programlarından alışık olduğumuz tercüme imkanları da
bulunmaktadır. Bu noktada sınıfımızı etkinleştiriyoruz.
Web DynproAdımları
Web Dynpro uygulamamızın başlık bilgilerinde, yardım sınıfı olarak az önce
yarattığımız ZTEST_MSG sınıfını göstereceğiz.
Bunu yaptığımızda, Dynpro ağacımızda yeni bir öğe belirecek.
40. 40
Burada bulunan “GET_TEXT” methodunu sürükle & bırak ile kodumuzda
istediğimiz yere bırakarak istediğimiz mesaja erişebiliriz. Burada tek yapmamız
gereken şey, XXXXX şeklindeki sınıf adını wd_assist olarak değiştirmektir.
Örnek bir kod aşağıda görülebilir:
method ONACTIONOKU_CLICK .
data: lv_text type string.
call method wd_assist->if_wd_component_assistance~get_text
exporting
key = '001'
para1 = 'Test Param'
receiving
text = lv_text.
endmethod.
41. 41
Uygulamamızı biraz daha geliştirip, butona tıklanınca bu metni görüntüleyecek
hale getirelim. Mesajı gösterme kısmındaki kodun nasıl üretildiğini öğrenmek
için için Mesajlar bölümüne bakabilirsiniz.
method ONACTIONOKU_CLICK .
data: lv_text type string,
lv_id type string.
* ----------
* Metni okuyalım
* ----------
call method wd_assist->if_wd_component_assistance~get_text
exporting
key = '001'
para1 = 'Test Param'
receiving
text = lv_text.
* ----------
* Okuduğumuz metni kullanıcıya bilgi olarak gösterelim
* ----------
* get message manager
data lo_api_controller type ref to if_wd_controller.
data lo_message_manager type ref to if_wd_message_manager.
lo_api_controller ?= wd_this->wd_get_api( ).
call method lo_api_controller->get_message_manager
receiving
message_manager = lo_message_manager.
* report message
call method lo_message_manager->report_success
exporting
message_text = lv_text
receiving
message_id = lv_id.
endmethod.
Uygulamamızı çalıştırdığımızda, sonucu görebiliriz. ZTEST_MSG sınıfındaki 001
numaralı metin ekranda görüntülenecektir:
42. 42
Fonksiyon Çağırma
Eğer Web Dynpro uygulamanız içerisinde bir fonksiyon (veya BAPI, Method, vs)
çağırıp sonuçlarını saklamak gibi bir ihtiyacınız varsa, bunun için gereken
kodları manuel yazmanıza gerek yoktur. Web Dynpro ekranı bunu sizin için
otomatik yapabilir.
Örneğimizde, BAPI_BANK_GETLIST fonksiyonunu çağırmamız gerektiğini
varsayalım. SE80’de Web Dynpro projesinin en üst Node’una sağ tıklayıp Create
Service Call menüsünü seçiyoruz. Karşımıza bir Wizard gelecek.
İlk ekranda, “Existing Controller” deyip projemizin varsayılan Controller’ını
seçebiliriz.
İkinci ekranda, “Function Call” seçeneğini seçiyoruz.
BAPI’mizin adını veriyoruz.
Sonraki ekranda, Context içerisinde kullanacağımız her bir öğe için öğe tipini
“Context Node” yapıyoruz. Örneğimizde tüm değişkenleri bu şekilde yapabiliriz.
43. 43
Sonraki ekranda Method ismi belirleyeceğiz. Varsayılan Method adını
bırakabiliriz.
Herşey yolunda ise, yeni bir Context Node’umuz ve yeni bir Method’umuz olmalı.
44. 44
Uygulamayı biraz daha gerçekçi hale getirmek için, bu BAPI’nin Import
parametrelerini seçim ekranı olarak hazırlayıp, çıktısındaki tabloyu da ekranda
gösterecek basit bir uygulama geliştirelim.
Context bölümünde anlatıldığı şekilde, BANK_CNTRY, MAX_ROWS ve BANK_LIST
Node’larını View Context’e aktarıyoruz.
Group bölümünde anlatıldığı şekilde; BANK_CNTRY ve MAX_ROWS için birer
parametre barındıracak bir grup ekliyoruz.
Parametreler girildikten sonra tıklanacak bir Button ekliyoruz.
Table bölümünde anlatıldığı şekilde; bir Table ekliyoruz ve bu tabloyı View
Context içerisindeki BANK_LIST’e Bind’liyoruz.
45. 45
Bu noktada ekranın görsel tasarımı şöyle olmalı:
Şimdi, Button bölümünde anlatıldığı şekilde bu buton arkasına bir Action
ekliyoruz. Butona ait kod kısmında “Wizard” düğmesine tıklayıp, BAPI’yi
çağıracak kodların üretilmesini sağlıyoruz:
Kodlar üretilmiş olacaktır:
method ONACTIONBUTTON_CLICK .
DATA lo_componentcontroller TYPE REF TO ig_componentcontroller .
lo_componentcontroller = wd_this->get_componentcontroller_ctr( ).
lo_componentcontroller->execute_bapi_bank_getlist(
).
46. 46
endmethod.
Programı yürüttüğümüzde;
Seçim ekranını dolduracağız
Butona tıkladığımızda;
o Ekrandaki değerler View Context’ine aktarılacaktır
o Oradan Component Context’ine aktarılacaktır
o CLICK Event’indeki kodlar sayesinde BAPI çağırılacak, ve BAPI’den
dönen sonuçlar Component Context’indeki banka listesine
aktarılacaktır
Component Context’indeki banka listesi View Context’e, oradan da Table
Control’e aktarılacaktır
Table Control ekranda dolu halde gösterilecektir.
Örnek bir ekran görüntüsü şöyledir:
Component Kullanımı
Aynen .NET platformundaki User Control veya ABAP’taki Subscreen gibi; Web
Dynpro’da da birden fazla pencerede / uygulamada kullanabileceğimiz özerk
ekran / kod parçaları hazırlayabiliriz.
Bu konuyu inceleyeceğimiz örnekte, herhangi bir kurun detaylarını gösteren bir
Component hazırlayıp, bu Component’I bir başka Web Dynpro uygulamasında
kullanıyor olacağız.
Component’inHazırlanması
Bunun için, yeni bir Web Dynpro projesi açıyoruz. İsmine ZTEST101 diyelim.
47. 47
Context bölümünde anlatıldığı şekilde, TCURT tablosuna refere eden bir
Structure yaratıyoruz.
Bu Context Node’u aynı zamanda View’umuzun Context’ine de referanslı bir
şekilde aktarıyoruz:
Group bölümünde anlatıldığı şekilde; GF_TCURT Node’u için bir Container Form
oluşturuyoruz. Buradaki verilerin değişmesini istemiyorsak, kontrol türünü
InputField yerine TextField yapabiliriz.
48. 48
Bu şekilde View üzerindeki işimiz bitmiş oluyor. Buradaki amacımız, seçilen bir
para biriminin detaylarını göstermek olduğu için, mantıken Parent View’dan bir
kur değeri almalıyız ki detaylarını gösterebilelim.
Bu iş için, ComponentController içerisinde SHOW_CURR diye yeni bir Method
açıyoruz:
Kodu ise şöyle:
method show_curr .
data:
lo_node_tcurt type ref to if_wd_context_node,
lf_tcurt type tcurt.
* Veriyi çekelim
select single * into lf_tcurt
from tcurt
where spras eq sy-langu
and waers eq i_waers.
* View Context'ten GT_TCURT Node'unu alalım
49. 49
call method wd_context->get_child_node
exporting
name = 'GF_TCURT'
receiving
child_node = lo_node_tcurt.
* Bu Node'a verimizi Bind edelim
lo_node_tcurt->bind_structure( lf_tcurt ).
endmethod.
Bu noktada, Component’imizde yapacağımız işler bitmiş oluyor.
Component’I Çağıracak Uygulamanın Hazırlanması
Bu iş için yeni bir Web Dynpro projesi açalım, ismi ZTEST103 olsun. Bu
uygulamada hedefimiz, kullanıcıdan bir kur alıp, bir önceki adımda
hazırladığımız Component içerisinde bu kurun detaylarını göstermek olacak.
Kullanıcıdan alacağımız kur için, ZTEST103 Context’inde uygun bir Node yaratıp,
bu Node’u View’a aktarıyoruz:
50. 50
Layout üzerinde, Group bölümünde anlatıldığı şekilde GF_KUR-WAERS için bir
seçim ekranı oluşturuyoruz. Altına, bir Button ekliyoruz (henüz Action
koymayalım).
Şimdi, bir önceki adımda yarattığımız Component’I (ZTEST101) bu projeye
(ZTEST103) dahil edeceğimiz noktaya gelmiş bulunuyoruz.
Öncelikle, ZTEST103 içerisinde “Kullanılan Bileşenler” bölümünde ZTEST101’I
tanımlıyoruz:
51. 51
ComponentController içerisinde “Used Components” bölümünde ZTEST101’e ait
INTERFACECONTROLLER’I ekliyoruz:
View içerisinde de aynı şekilde “Used Components” bölümünde ZTEST101’I
ekleyeceğiz:
View içerisinde; ZTEST101’I barındıracak olan ViewContainerUIElement’I
yaratıyoruz:
52. 52
Geriye, bu Container’de ZTEST101 View’unun kullanılacağını ifade etmek kaldı.
Bunun için de, Window bölümünde VIEW_CONTAINER_UIELEMENT’e sağ
tıklayıp “Embed View” menüsünü seçiyoruz ve ZTEST101 View’unu
işaretliyoruz:
53. 53
Bu noktada ABAP Dialog gibi düşünürsek;
VIEW_CONTAINER_UIELEMENT = Custom Container
ZTEST101 = CL_GUI_ALV_GRID
gibi oluyor.
Şimdi geriye, View’daki butona tıklandığında, seçilen kura ait detayların
ZTEST101’de görüntülenmesini sağlamak kaldı.
Bu iş için, butona ait Action’u Button bölümünde anlatıldığı gibi yaratıyoruz.
Burada yapmamız gereken iki iş var: 1) Kullanıcının girdiği kuru almak 2) Bu
kuru ZTEST101’e gönderip detaylarının görüntülenmesini sağlamak.
İlk adım için, sihirbazdan “Read Node” özelliğini kullanarak kullanıcının girdiği
değeri okuyacak kodları üretebiliriz:
54. 54
İkinci adımda, yine aynı sihirbaz ile ZTEST101’de söz konusu kurun detaylarını
görüntüleyecek Method’un çağırılmasını sağlayabiliriz:
Kodun bitmiş hali şöyle olacaktır:
method ONACTIONCLICKED .
* ----------
* Kullanıcının girdiği kur değerinin okunması
* ----------
data lo_nd_gf_kur type ref to if_wd_context_node.
55. 55
data lo_el_gf_kur type ref to if_wd_context_element.
data ls_gf_kur type wd_this->element_gf_kur.
data lv_waers type wd_this->element_gf_kur-waers.
* navigate from <CONTEXT> to <GF_KUR> via lead selection
lo_nd_gf_kur = wd_context->get_child_node( name = wd_this-
>wdctx_gf_kur ).
* @TODO handle non existant child
* IF lo_nd_gf_kur IS INITIAL.
* ENDIF.
* get element via lead selection
lo_el_gf_kur = lo_nd_gf_kur->get_element( ).
* @TODO handle not set lead selection
if lo_el_gf_kur is initial.
endif.
* get single attribute
lo_el_gf_kur->get_attribute(
exporting
name = `WAERS`
importing
value = lv_waers ).
* ----------
* Kur detaylarının Component'te görüntülenmesi
* ----------
data lo_interfacecontroller type ref to ziwci_test101 .
lo_interfacecontroller = wd_this->wd_cpifc_kur_bilesen( ).
lo_interfacecontroller->show_curr(
i_waers = lv_waers
).
endmethod.
Son olarak, ZTEST103 için bir Application yaratıp başlattığımzda, uygulamanın
çalıştığını görebiliriz:
56. 56
Web Dynpro Implementation Class Bulmak
CL_WDY_WB_NAMING_SERVICE=>GET_CLASSNAME_FOR_COMPONENT
Sık Kullanılan Standart Component’ler
Select-Options Oluşturma
Bu konuyu okumadan önce, Component Kullanımı bölümünde anlatılanları
doğru anladığınızdan emin olun.
Web Dynpro dünyasında bir Select-Option yaratmak için hazır görsel kontroller
halihazırda bulunmamaktadır. Bunun yerine, SAP’nin sunduğu
WDR_SELECT_OPTIONS adlı Component’I programımıza dahil edeceğiz.
Hazırlayacağımız örnekte; kur (TCURT-WAERS) için bir seçim ekranı oluşturup,
kriterlere uyan TCURT kayıtlarını ekranda listelemeyi hedefliyor olacağız.
Uygulama Hazırlıkları
Bunun için, Context bölümünde anlatıldığı şekilde ComponentController’a
TCURT tipinde bir Node yaratıyoruz ve aynısının VIEW’a da aktarıyoruz:
57. 57
Şimdi de View’u hazırlayalım. View’da bir ViewContainerUIElement (seçim
ekranı), bir “Submit” Button’u, bir de seçim kriterlerine uyan sonuçları
listeleyecek bir Table olacaktır:
Component’I Çağıracak Uygulamanın Hazırlanması bölümünde anlatıldığı gibi,
WDR_SELECT_OPTIONS Component’ini uygulamamızın başlık,
COMPONENTCONTROLLER ve VIEW’larına tanımlayalım:
58. 58
Yine Component’I Çağıracak Uygulamanın Hazırlanması bölümünde anlatıldığı
mantıkla, Window’a giderek SEL_OPT’u ViewContainerUIElement’e gömelim.
59. 59
SeçimEkranınınHazırlanması
Uygulamayı bu haliyle başlatacak olursak, henüz seçim ekranını Initialize
etmediğimiz için karşımıza içi boş bir halde gelecektir:
Bunun için, View’umuzun WDDOINIT Method’una gidiyoruz. İlk adımda, seçim
ekranının yaratılmasını sağlayacağız:
60. 60
İkinci adımda, seçim ekranı kontrolünün INITIALIZE Method’unu çağırmalıyız:
Bu noktada üretilecek olan kodda, artık seçim ekranına ait bir nesnemiz olmuş
oluyor:
61. 61
Artık bu Object’in Method’ları yardımıyla seçim ekranına yeni yeni parametreler
eklemek mümkün:
Burada, ilk adımda “CREATE_RANGE_TABLE”’ı çağırarak WAERS alanı için bir
tablo oluşturacak, ikinci adımda ise “ADD_SELECTION_FIELD”ı çağırarak bu
tabloyu seçim ekranına ekleyeceğiz. Kodumuz nihai olarak şöyle olacaktır:
method wddoinit .
* Seçim ekranının yaratılmasını sağlayalım
data lo_cmp_usage type ref to if_wd_component_usage.
lo_cmp_usage = wd_this->wd_cpuse_sel_opt( ).
if lo_cmp_usage->has_active_component( ) is initial.
lo_cmp_usage->create_component( ).
endif.
* Seçim ekranını Initialize edelim
data lo_interfacecontroller type ref to iwci_wdr_select_options .
lo_interfacecontroller = wd_this->wd_cpifc_sel_opt( ).
data lv_r_helper_class type ref to if_wd_select_options.
lv_r_helper_class = lo_interfacecontroller->init_selection_screen(
).
* Seçim ekranına para birimi için yeni bir opsiyon ekleyelim
data lt_range type ref to data.
call method lv_r_helper_class->create_range_table
exporting
i_typename = 'WAERS'
receiving
rt_range_table = lt_range.
call method lv_r_helper_class->add_selection_field
exporting
i_id = 'S_WAERS'
it_result = lt_range.
endmethod.
Bu kodu yürüttüğümüzde, seçim ekranının oluştuğunu görebiliriz:
62. 62
SeçimEkranından DeğerlerinAlınması
Örneğimizin bu bölümünde; kullanıcının seçim ekranına girdiği değerleri alarak
bu koşullara uyan TCURT değerlerini tabloda göstermeyi hedefliyoruz.
Button bölümünde anlatıldığı şekilde, bu butona yeni bir aksiyon ekliyoruz.
İlk olarak, seçim ekranını Initialize ederek ihtiyaç duyduğumuz nesneyi alıyoruz.
Initialize kodu, Seçim Ekranının Hazırlanması bölümünde anlatıldığı şekilde
Wizard ile üretilebilir.
method ONACTIONBTN_CLICK .
* Seçim ekranını Initialize edelim
data lo_interfacecontroller type ref to iwci_wdr_select_options .
lo_interfacecontroller = wd_this->wd_cpifc_sel_opt( ).
data lv_r_helper_class type ref to if_wd_select_options.
lv_r_helper_class = lo_interfacecontroller-
>init_selection_screen(
).
* Kullanıcının girmiş olduğu para birimi aralığını alalım
* Veritabanından bu kriterlere uygun kurları seçelim
* Çektiğimiz verileri ekranda gösterelim
endmethod.
63. 63
İkinci adımda, lv_r_helper_class yardımıyla kullanıcının girmiş olduğu para
birimi aralığını alacağız. Bunun için, Seçim Ekranının Hazırlanması bölümünde
yaptığımız gibi Pattern ABAP Objects bölümünü kullanabiliriz. Kullanmamız
gereken Method, GET_RANGE_TABLE_OF_SEL_FIELD olacaktır.
method onactionbtn_click .
* Seçim ekranını Initialize edelim
data lo_interfacecontroller type ref to iwci_wdr_select_options .
lo_interfacecontroller = wd_this->wd_cpifc_sel_opt( ).
data lv_r_helper_class type ref to if_wd_select_options.
lv_r_helper_class = lo_interfacecontroller->init_selection_screen(
).
* Kullanıcının girmiş olduğu para birimi aralığını alalım
data:
lt_tab type ref to data.
field-symbols:
<lr_waers> type table.
call method lv_r_helper_class->get_range_table_of_sel_field
exporting
i_id = 'S_WAERS'
receiving
rt_range_table = lt_tab.
assign lt_tab->* to <lr_waers>.
* Veritabanından bu kriterlere uygun kurları seçelim
* Çektiğimiz verileri ekranda gösterelim
endmethod.
Üçüncü adımda, veritabanından bu kriterlere uygun kurları çekiyoruz.
method onactionbtn_click .
* Seçim ekranını Initialize edelim
data lo_interfacecontroller type ref to iwci_wdr_select_options .
lo_interfacecontroller = wd_this->wd_cpifc_sel_opt( ).
data lv_r_helper_class type ref to if_wd_select_options.
lv_r_helper_class = lo_interfacecontroller->init_selection_screen(
).
* Kullanıcının girmiş olduğu para birimi aralığını alalım
data:
lt_tab type ref to data.
field-symbols:
<lr_waers> type table.
call method lv_r_helper_class->get_range_table_of_sel_field
exporting
i_id = 'S_WAERS'
receiving
64. 64
rt_range_table = lt_tab.
assign lt_tab->* to <lr_waers>.
* Veritabanından bu kriterlere uygun kurları seçelim
data:
lt_tcurt type standard table of tcurt.
select * into table lt_tcurt
from tcurt
where spras eq sy-langu
and waers in <lr_waers>.
* Çektiğimiz verileri ekranda gösterelim
endmethod.
Son olarak, artık lt_tcurt içerisinde bulunan verileri Context’e aktarmak kalıyor.
Bunun için, sihirbazı kullanıp kodu büyük ölçüde oluşturabiliriz.
Son modifikasyonlardan sonra kod şu hale gelecektir:
method onactionbtn_click .
* Seçim ekranını Initialize edelim
data lo_interfacecontroller type ref to iwci_wdr_select_options .
lo_interfacecontroller = wd_this->wd_cpifc_sel_opt( ).
data lv_r_helper_class type ref to if_wd_select_options.
lv_r_helper_class = lo_interfacecontroller->init_selection_screen(
).
* Kullanıcının girmiş olduğu para birimi aralığını alalım
data:
lt_tab type ref to data.
field-symbols:
<lr_waers> type table.
call method lv_r_helper_class->get_range_table_of_sel_field
exporting
65. 65
i_id = 'S_WAERS'
receiving
rt_range_table = lt_tab.
assign lt_tab->* to <lr_waers>.
* Veritabanından bu kriterlere uygun kurları seçelim
data:
lt_tcurt type standard table of tcurt.
select * into table lt_tcurt
from tcurt
where spras eq sy-langu
and waers in <lr_waers>.
* Çektiğimiz verileri ekranda gösterelim
data lo_nd_tcurt type ref to if_wd_context_node.
* navigate from <CONTEXT> to <TCURT> via lead selection
lo_nd_tcurt = wd_context->get_child_node( name = wd_this-
>wdctx_tcurt ).
* @TODO handle non existant child
* IF lo_nd_tcurt IS INITIAL.
* ENDIF.
* * @TODO compute values
* * e.g. call a model function
*
lo_nd_tcurt->bind_table( new_items = lt_tcurt set_initial_elements
= abap_true ).
endmethod.
Programı çalıştırdığımızda, seçim ekranının başarılı bir şekilde çalıştığını
görebiliriz.
66. 66
ALV Grid
ALV Grid kullanımı, bir hayli kolaydır.
Component Kullanımı bölümünde anlatıldığı şekilde, projenize SALV_WD_TABLE
Component’ini dahil edin. Context ‘inizde, ALV’de görüntüleyeceğiniz veriyi
barındıran bir Internal Table olsun.
Veriyi göstermek istediğiniz noktada tek yapmanız gereken şey, Wizard
yardımıyla ALV nesnesini Instant. etmek ve sonrasında SET_DATA Method’unu
çağırmaktır.
67. 67
Aşağıda, çalışan örnek bir kod bulabilirsiniz:
METHOD wddoinit .
* ----------
* Verileri okuyup Context'e yazalım
* ----------
DATA lo_nd_tcurt TYPE REF TO if_wd_context_node.
DATA lt_tcurt TYPE wd_this->elements_tcurt.
* navigate from <CONTEXT> to <TCURT> via lead selection
lo_nd_tcurt = wd_context->get_child_node( name = wd_this-
>wdctx_tcurt ).
* compute values
SELECT * INTO TABLE lt_tcurt
FROM tcurt
WHERE spras EQ sy-langu.
lo_nd_tcurt->bind_table( new_items = lt_tcurt set_initial_elements
= abap_true ).
* ----------
* ALV Instant.
* ----------
DATA lo_cmp_usage TYPE REF TO if_wd_component_usage.
lo_cmp_usage = wd_this->wd_cpuse_alv( ).
IF lo_cmp_usage->has_active_component( ) IS INITIAL.
lo_cmp_usage->create_component( ).
ENDIF.
* ----------
68. 68
* ALV'de gösterelim
* ----------
DATA lo_interfacecontroller TYPE REF TO iwci_salv_wd_table .
lo_interfacecontroller = wd_this->wd_cpifc_alv( ).
lo_interfacecontroller->set_data(
r_node_data = lo_nd_tcurt
).
ENDMETHOD.
Bu kodun sonucunda; çalışan örnek ALV şöyledir:
ALV’de veri göstermenin daha kolay bir yolu: SET_DATA yerine aşağıdaki adım
kullanılabilir.
Bu örnekte, SFLIGHT içine atılacak her veri ALV’de otomatik gösterilecektir.
Daha fazla detay:
http://wiki.scn.sap.com/wiki/display/WDABAP/Creating+an+ALV+List+in+We
b+Dynpro+Application