SlideShare ist ein Scribd-Unternehmen logo
1 von 68
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
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
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
İ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
“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
 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
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
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
Ş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
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
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
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
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
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
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
* Ş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
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
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
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
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
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
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
Bu adımdan sonra, View üzerine sürükle & bırak ile bir Layout  Group
oluşturuyoruz:
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
İş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
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
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):
28
View üzerinde FileDownload öğesi şöyle gözüküyor olmalı:
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
İ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
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
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
Ş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
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
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
İ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
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
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
İ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
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
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
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
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
* 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

Weitere ähnliche Inhalte

Was ist angesagt?

Almost everything-you-wanted-to-know-about-pto
Almost everything-you-wanted-to-know-about-ptoAlmost everything-you-wanted-to-know-about-pto
Almost everything-you-wanted-to-know-about-ptoMayadevi Gopi
 
Oracle Succession Planning Setup
Oracle Succession Planning SetupOracle Succession Planning Setup
Oracle Succession Planning SetupFeras Ahmad
 
GL - Step 4 - Part 2 - Ledgers & Legal Entities
GL - Step 4 - Part 2 - Ledgers & Legal EntitiesGL - Step 4 - Part 2 - Ledgers & Legal Entities
GL - Step 4 - Part 2 - Ledgers & Legal EntitiesMohammed Raouf
 
Odi installation guide
Odi installation guideOdi installation guide
Odi installation guideprakashdas05
 
[Oracle DBA & Developer Day 2012] 高可用性システムに適した管理性と性能を向上させるASM と RMAN の魅力
[Oracle DBA & Developer Day 2012] 高可用性システムに適した管理性と性能を向上させるASM と RMAN の魅力[Oracle DBA & Developer Day 2012] 高可用性システムに適した管理性と性能を向上させるASM と RMAN の魅力
[Oracle DBA & Developer Day 2012] 高可用性システムに適した管理性と性能を向上させるASM と RMAN の魅力オラクルエンジニア通信
 
Creating business group in oracle apps
Creating business group in oracle appsCreating business group in oracle apps
Creating business group in oracle appsGurpreet singh
 
Flex field guide
Flex field guideFlex field guide
Flex field guideLABIDI Hedi
 
Case 695 super r loader backhoe service repair manual
Case 695 super r loader backhoe service repair manualCase 695 super r loader backhoe service repair manual
Case 695 super r loader backhoe service repair manualujsjfkskemmem
 
Sap basis r3 hand book
Sap basis r3 hand bookSap basis r3 hand book
Sap basis r3 hand booknanda nanda
 
15 maintain worker directories
15 maintain worker directories15 maintain worker directories
15 maintain worker directoriesmohamed refaei
 
B 65270 ja-07
B 65270 ja-07B 65270 ja-07
B 65270 ja-07mt7038
 
OBD365-FAQ BMW INPA, EDIABAS, and Tool set
OBD365-FAQ BMW INPA, EDIABAS, and Tool setOBD365-FAQ BMW INPA, EDIABAS, and Tool set
OBD365-FAQ BMW INPA, EDIABAS, and Tool setOBD365
 
Crystal reports manual avanzado
Crystal reports manual avanzadoCrystal reports manual avanzado
Crystal reports manual avanzadoFreddy Poma Inga
 
Güvenlik duvarları ve sistem sınır (giriş çıkış) güvenliği
Güvenlik duvarları ve sistem sınır (giriş çıkış) güvenliğiGüvenlik duvarları ve sistem sınır (giriş çıkış) güvenliği
Güvenlik duvarları ve sistem sınır (giriş çıkış) güvenliğiHüseyin Eltutan
 
WebSphere Application Server V8.5.5 Libertyプロファイルのご紹介 #jjug_ccc #ccc_r51
WebSphere Application Server V8.5.5Libertyプロファイルのご紹介 #jjug_ccc #ccc_r51WebSphere Application Server V8.5.5Libertyプロファイルのご紹介 #jjug_ccc #ccc_r51
WebSphere Application Server V8.5.5 Libertyプロファイルのご紹介 #jjug_ccc #ccc_r51Takakiyo Tanaka
 
Oracle Application Framework Cases
Oracle Application Framework Cases Oracle Application Framework Cases
Oracle Application Framework Cases Feras Ahmad
 
17 define workforce records
17 define workforce records17 define workforce records
17 define workforce recordsmohamed refaei
 

Was ist angesagt? (20)

Almost everything-you-wanted-to-know-about-pto
Almost everything-you-wanted-to-know-about-ptoAlmost everything-you-wanted-to-know-about-pto
Almost everything-you-wanted-to-know-about-pto
 
Oracle Succession Planning Setup
Oracle Succession Planning SetupOracle Succession Planning Setup
Oracle Succession Planning Setup
 
GL - Step 4 - Part 2 - Ledgers & Legal Entities
GL - Step 4 - Part 2 - Ledgers & Legal EntitiesGL - Step 4 - Part 2 - Ledgers & Legal Entities
GL - Step 4 - Part 2 - Ledgers & Legal Entities
 
Odi installation guide
Odi installation guideOdi installation guide
Odi installation guide
 
[Oracle DBA & Developer Day 2012] 高可用性システムに適した管理性と性能を向上させるASM と RMAN の魅力
[Oracle DBA & Developer Day 2012] 高可用性システムに適した管理性と性能を向上させるASM と RMAN の魅力[Oracle DBA & Developer Day 2012] 高可用性システムに適した管理性と性能を向上させるASM と RMAN の魅力
[Oracle DBA & Developer Day 2012] 高可用性システムに適した管理性と性能を向上させるASM と RMAN の魅力
 
Creating business group in oracle apps
Creating business group in oracle appsCreating business group in oracle apps
Creating business group in oracle apps
 
Flex field guide
Flex field guideFlex field guide
Flex field guide
 
Case 695 super r loader backhoe service repair manual
Case 695 super r loader backhoe service repair manualCase 695 super r loader backhoe service repair manual
Case 695 super r loader backhoe service repair manual
 
Sap basis r3 hand book
Sap basis r3 hand bookSap basis r3 hand book
Sap basis r3 hand book
 
15 maintain worker directories
15 maintain worker directories15 maintain worker directories
15 maintain worker directories
 
B 65270 ja-07
B 65270 ja-07B 65270 ja-07
B 65270 ja-07
 
Guia de-configuracion-co-de-sap
Guia de-configuracion-co-de-sapGuia de-configuracion-co-de-sap
Guia de-configuracion-co-de-sap
 
Oracle GoldenGate 概要 2020年11月版
Oracle GoldenGate 概要 2020年11月版Oracle GoldenGate 概要 2020年11月版
Oracle GoldenGate 概要 2020年11月版
 
OBD365-FAQ BMW INPA, EDIABAS, and Tool set
OBD365-FAQ BMW INPA, EDIABAS, and Tool setOBD365-FAQ BMW INPA, EDIABAS, and Tool set
OBD365-FAQ BMW INPA, EDIABAS, and Tool set
 
Crystal reports manual avanzado
Crystal reports manual avanzadoCrystal reports manual avanzado
Crystal reports manual avanzado
 
Güvenlik duvarları ve sistem sınır (giriş çıkış) güvenliği
Güvenlik duvarları ve sistem sınır (giriş çıkış) güvenliğiGüvenlik duvarları ve sistem sınır (giriş çıkış) güvenliği
Güvenlik duvarları ve sistem sınır (giriş çıkış) güvenliği
 
Temel ABAP eğitim kılavuzu
Temel ABAP eğitim kılavuzuTemel ABAP eğitim kılavuzu
Temel ABAP eğitim kılavuzu
 
WebSphere Application Server V8.5.5 Libertyプロファイルのご紹介 #jjug_ccc #ccc_r51
WebSphere Application Server V8.5.5Libertyプロファイルのご紹介 #jjug_ccc #ccc_r51WebSphere Application Server V8.5.5Libertyプロファイルのご紹介 #jjug_ccc #ccc_r51
WebSphere Application Server V8.5.5 Libertyプロファイルのご紹介 #jjug_ccc #ccc_r51
 
Oracle Application Framework Cases
Oracle Application Framework Cases Oracle Application Framework Cases
Oracle Application Framework Cases
 
17 define workforce records
17 define workforce records17 define workforce records
17 define workforce records
 

Ähnlich wie Web Dynpro

Visual Basic.NET Kodlama Standartları 1.0
Visual Basic.NET Kodlama Standartları 1.0 Visual Basic.NET Kodlama Standartları 1.0
Visual Basic.NET Kodlama Standartları 1.0 İbrahim ATAY
 
BTT. Modül 9. Yazıcılar
BTT. Modül 9. YazıcılarBTT. Modül 9. Yazıcılar
BTT. Modül 9. Yazıcılardenizmutlu
 
BTT.Modül 9. Yazicilar
BTT.Modül 9. YazicilarBTT.Modül 9. Yazicilar
BTT.Modül 9. Yazicilardeniz armutlu
 
vehicle gearbox modelling
vehicle gearbox modellingvehicle gearbox modelling
vehicle gearbox modellingmustafa köstek
 
Kelime işlemci (bilişim teknolojileri)
Kelime işlemci (bilişim teknolojileri)Kelime işlemci (bilişim teknolojileri)
Kelime işlemci (bilişim teknolojileri)Erol Dizdar
 
T.C. BARTIN ÜNİVERSİTESİ 2013-2017 DÖNEMİ STRATEJİK PLANI
T.C. BARTIN ÜNİVERSİTESİ 2013-2017 DÖNEMİ STRATEJİK PLANIT.C. BARTIN ÜNİVERSİTESİ 2013-2017 DÖNEMİ STRATEJİK PLANI
T.C. BARTIN ÜNİVERSİTESİ 2013-2017 DÖNEMİ STRATEJİK PLANIMehmet Erturk
 
Proje Kontrol Açıklamalı El Kitabı v.02.01
Proje Kontrol Açıklamalı El Kitabı v.02.01Proje Kontrol Açıklamalı El Kitabı v.02.01
Proje Kontrol Açıklamalı El Kitabı v.02.01Yusuf Yıldız
 

Ähnlich wie Web Dynpro (13)

Ti ks vb v1.0
Ti ks vb v1.0Ti ks vb v1.0
Ti ks vb v1.0
 
Visual Basic.NET Kodlama Standartları 1.0
Visual Basic.NET Kodlama Standartları 1.0 Visual Basic.NET Kodlama Standartları 1.0
Visual Basic.NET Kodlama Standartları 1.0
 
Visual studio
Visual studioVisual studio
Visual studio
 
BTT. Modül 9. Yazıcılar
BTT. Modül 9. YazıcılarBTT. Modül 9. Yazıcılar
BTT. Modül 9. Yazıcılar
 
BTT.Modül 9. Yazicilar
BTT.Modül 9. YazicilarBTT.Modül 9. Yazicilar
BTT.Modül 9. Yazicilar
 
vehicle gearbox modelling
vehicle gearbox modellingvehicle gearbox modelling
vehicle gearbox modelling
 
C# Tiks v1.0
C# Tiks v1.0C# Tiks v1.0
C# Tiks v1.0
 
Tiks cs v1.0
Tiks cs v1.0Tiks cs v1.0
Tiks cs v1.0
 
easyOS.pdf
easyOS.pdfeasyOS.pdf
easyOS.pdf
 
En Case SüRüM
En Case SüRüMEn Case SüRüM
En Case SüRüM
 
Kelime işlemci (bilişim teknolojileri)
Kelime işlemci (bilişim teknolojileri)Kelime işlemci (bilişim teknolojileri)
Kelime işlemci (bilişim teknolojileri)
 
T.C. BARTIN ÜNİVERSİTESİ 2013-2017 DÖNEMİ STRATEJİK PLANI
T.C. BARTIN ÜNİVERSİTESİ 2013-2017 DÖNEMİ STRATEJİK PLANIT.C. BARTIN ÜNİVERSİTESİ 2013-2017 DÖNEMİ STRATEJİK PLANI
T.C. BARTIN ÜNİVERSİTESİ 2013-2017 DÖNEMİ STRATEJİK PLANI
 
Proje Kontrol Açıklamalı El Kitabı v.02.01
Proje Kontrol Açıklamalı El Kitabı v.02.01Proje Kontrol Açıklamalı El Kitabı v.02.01
Proje Kontrol Açıklamalı El Kitabı v.02.01
 

Mehr von Dr. Kerem Koseoglu

ABAP 7.x New Features and Commands
ABAP 7.x New Features and CommandsABAP 7.x New Features and Commands
ABAP 7.x New Features and CommandsDr. Kerem Koseoglu
 
Kordsa Design Pattern Eğitimi
Kordsa Design Pattern EğitimiKordsa Design Pattern Eğitimi
Kordsa Design Pattern EğitimiDr. Kerem Koseoglu
 
ABAP mimarisi hakkında yeni bir kitap: "Design Patterns in ABAP Objects"
ABAP mimarisi hakkında yeni bir kitap: "Design Patterns in ABAP Objects"ABAP mimarisi hakkında yeni bir kitap: "Design Patterns in ABAP Objects"
ABAP mimarisi hakkında yeni bir kitap: "Design Patterns in ABAP Objects"Dr. Kerem Koseoglu
 
Embedding custom ActiveX controls into SAP GUI
Embedding custom ActiveX controls into SAP GUIEmbedding custom ActiveX controls into SAP GUI
Embedding custom ActiveX controls into SAP GUIDr. Kerem Koseoglu
 
Lotus Notes - .NET entegrasyonu
Lotus Notes - .NET entegrasyonuLotus Notes - .NET entegrasyonu
Lotus Notes - .NET entegrasyonuDr. Kerem Koseoglu
 
Correlation Between Proper Training / Involvement and ERP Acceptance and the ...
Correlation Between Proper Training / Involvement and ERP Acceptance and the ...Correlation Between Proper Training / Involvement and ERP Acceptance and the ...
Correlation Between Proper Training / Involvement and ERP Acceptance and the ...Dr. Kerem Koseoglu
 
SQL Injection - Web siteniz tehdit altında mı?
SQL Injection - Web siteniz tehdit altında mı?SQL Injection - Web siteniz tehdit altında mı?
SQL Injection - Web siteniz tehdit altında mı?Dr. Kerem Koseoglu
 
Organizational Behavior - Genel özet
Organizational Behavior - Genel özetOrganizational Behavior - Genel özet
Organizational Behavior - Genel özetDr. Kerem Koseoglu
 

Mehr von Dr. Kerem Koseoglu (15)

Avrupa'da ABAP Kariyeri
Avrupa'da ABAP KariyeriAvrupa'da ABAP Kariyeri
Avrupa'da ABAP Kariyeri
 
Zaman Yönetimi TEDx Sunumu
Zaman Yönetimi TEDx SunumuZaman Yönetimi TEDx Sunumu
Zaman Yönetimi TEDx Sunumu
 
ABAP 7.x New Features and Commands
ABAP 7.x New Features and CommandsABAP 7.x New Features and Commands
ABAP 7.x New Features and Commands
 
Fiori eğitimi - sunum
Fiori eğitimi - sunumFiori eğitimi - sunum
Fiori eğitimi - sunum
 
SPSS Manual (Turkish)
SPSS Manual (Turkish)SPSS Manual (Turkish)
SPSS Manual (Turkish)
 
Kordsa Design Pattern Eğitimi
Kordsa Design Pattern EğitimiKordsa Design Pattern Eğitimi
Kordsa Design Pattern Eğitimi
 
Zaman Yönetimi
Zaman YönetimiZaman Yönetimi
Zaman Yönetimi
 
ABAP mimarisi hakkında yeni bir kitap: "Design Patterns in ABAP Objects"
ABAP mimarisi hakkında yeni bir kitap: "Design Patterns in ABAP Objects"ABAP mimarisi hakkında yeni bir kitap: "Design Patterns in ABAP Objects"
ABAP mimarisi hakkında yeni bir kitap: "Design Patterns in ABAP Objects"
 
Embedding custom ActiveX controls into SAP GUI
Embedding custom ActiveX controls into SAP GUIEmbedding custom ActiveX controls into SAP GUI
Embedding custom ActiveX controls into SAP GUI
 
SAP DMS kılavuzu
SAP DMS kılavuzuSAP DMS kılavuzu
SAP DMS kılavuzu
 
Lotus Notes - .NET entegrasyonu
Lotus Notes - .NET entegrasyonuLotus Notes - .NET entegrasyonu
Lotus Notes - .NET entegrasyonu
 
Correlation Between Proper Training / Involvement and ERP Acceptance and the ...
Correlation Between Proper Training / Involvement and ERP Acceptance and the ...Correlation Between Proper Training / Involvement and ERP Acceptance and the ...
Correlation Between Proper Training / Involvement and ERP Acceptance and the ...
 
SQL Injection - Web siteniz tehdit altında mı?
SQL Injection - Web siteniz tehdit altında mı?SQL Injection - Web siteniz tehdit altında mı?
SQL Injection - Web siteniz tehdit altında mı?
 
Organizational Behavior - Genel özet
Organizational Behavior - Genel özetOrganizational Behavior - Genel özet
Organizational Behavior - Genel özet
 
SPSS ile regresyon analizi
SPSS ile regresyon analiziSPSS ile regresyon analizi
SPSS ile regresyon analizi
 

Web Dynpro

  • 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):
  • 28. 28 View üzerinde FileDownload öğesi şöyle gözüküyor olmalı:
  • 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