Webdynpro als Einkaufskorb

Folgende UI-Elemente warden behandelt

-

Image
DragSource
DragSourceInfo
DropTarget
DropTargetInfo
Table
Group

(vom Referent vorab zu erledigen)

Legen Sie die hier aufgefhrten Bilder als *.bmp Dateityp auf dem Workstationpfad
C:\Dokumente und Einstellungen\Administrator\Eigene Dateien\Eigene Bilder unter dem
Namen
- Aia
- Buick
- Mercedes
- Shoppingcar
- Trash
Ab (vom Referent vorab zu erledigen)
Folgende Images werden bentigt
>

< Asia

>
< Buick

>
Mercedes

>
Shoppingcar

>
< Trash

<

<

1. Legen Sie eine WebdynproComponent an

Die folgende bung soll Sie in die Lage versetzen einen Einkaufskorb zu definieren

- SE80 starten

Legen Sie eine WebdynproComponent an

. Enter- Taste drcken

Lokales Objekt sichern

Hierarchie-Ikone anklicken

- aktivieren und mit enter besttigen

Webdynpro-Anwendung anlagen

Mit Enter-Taste besttigen

Kontrolle der Hierarchie

Importieren der *.bmp Images

Diese Images bentigen wir

Beschreibung eingeben und als lokales Objekt sichern

Wiederholen Sie den Ablauf fr alle Images

Vergleichen

Group Element anlegen

======== Wiederholungsprozedere fr die Autoimages durchfhren =================

Image Element anlegen

- DragSourceInfo Element anlegen

Tags > neu_mercedes

Weitere Tags fr die Images

- Tags > neu_asia

Tags > neu_buick

Fr die weiteren 2 Auto-Images das gleiche Prozedere durchfhren

=========================================================

Ergebnis 1

Ergebnis 2

Ergebnis 3

DropTarget Trash anlegen

Tag definieren > out*

- Inhaltselement anlegen

Image Trash einbinden

DropTarget Shoppingcar definieren

- DropTargetInfo Tags > neu*

- Image Shoppingcar definieren

Group Element anlagen

Table Element anlagen

Drag.Source einfgen

Tag definieren > out_of_target

Knoten fr Fahrzeugdatendefinieren

. Attribut Marke definieren

Attribut Preis definieren

- Attribut Whrung definieren

Binding fr Tabelle erzeugen

ber den Context verbinden und mit Enter besttigen

- Action zu DropTarget Shoppingcar definieren

- UI-Element-Parameter bernehmen

method
data
data
data

Methoode zur Action implementieren

Setzen der Auto.Attributwerte
Abfrage des Tag Inhaltes
onactionadd .
lo_nd_node_kfz type ref to if_wd_context_node.
ls_node_kfz type wd_this->element_node_kfz.
lt_node_kfz type wd_this->elements_node_kfz.

* navigate from <CONTEXT> to <NODE_KFZ> via lead selection

lo_nd_node_kfz = wd_context->get_child_node( name = wd_this>wdctx_node_kfz ).
* @TODO handle non existant child
* IF lo_nd_node_kfz IS INITIAL.
* ENDIF.
lo_nd_node_kfz->get_static_attributes_table( importing table = lt_node_kf
z ).
case tags.
when 'new_mercedes'.
ls_node_kfz-marke = 'Mercedes'.
ls_node_kfz-preis = 24000.
ls_node_kfz-waers
= 'Eur'.
ls_node_kfz-bild = 'mercedes.bmp'.
append ls_node_kfz to lt_node_kfz.
when 'new_asia'.
ls_node_kfz-marke = 'Asia'.
ls_node_kfz-preis = 22000.
ls_node_kfz-waers
= 'Eur'.
ls_node_kfz-bild = 'asia.bmp'.
append ls_node_kfz to lt_node_kfz.
when 'new_buick'.
ls_node_kfz-marke = 'Buick'.
ls_node_kfz-preis = 14000.

ls_node_kfz-waers
= 'Eur'.
ls_node_kfz-bild = 'buik.bmp'.
append ls_node_kfz to lt_node_kfz.
endcase.
lo_nd_node_kfz->bind_table(
new_items = lt_node_kfz
set_initial_elements = abap_true ).
endmethod.

>

<
-

Action zu DropTarget Trash definieren

UI-Element-Parameter bernehmen

Methoode zur Action implementieren

Setzen der Auto.Attributwerte
Abfrage des Tag Inhaltes

method onactionremove .
data lo_nd_node_kfz type ref to if_wd_context_node.
data lt_node_kfz type wd_this->elements_node_kfz.
data l_index type i.
*
navigate from <CONTEXT> to <NODE_KFZ> via lead selection
lo_nd_node_kfz = wd_context->get_child_node( name = wd_this>wdctx_node_kfz ).
* get index of lead selection
l_index = lo_nd_node_kfz->get_lead_selection_index( ).
call method lo_nd_node_kfz->get_static_attributes_table
importing
table = lt_node_kfz.
*
@TODO handle non existant child
*
IF lo_nd_node_kfz IS INITIAL.
*
ENDIF.
delete lt_node_kfz index l_index.
lo_nd_node_kfz->bind_table( lt_node_kfz ).
endmethod.

Anwendung anlegen aktivieren und testen

======= Ende der Uebung