Post on 22-Dec-2015
description
transcript
Webdynpro als Einkaufskorb
Folgende UI-Elemente warden behandelt
- Image- DragSource- DragSourceInfo- DropTarget- DropTargetInfo- Table- Group
(vom Referent vorab zu erledigen) Legen Sie die hier aufgeführten Bilder als *.bmp Dateityp auf dem WorkstationpfadC:\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 benötigt
>
< 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 drücken
- Lokales Objekt sichern
- Hierarchie-Ikone anklicken
- aktivieren und mit enter bestätigen
- Webdynpro-Anwendung anlagen
- Mit Enter-Taste bestätigen-
- Kontrolle der Hierarchie
- Importieren der *.bmp Images
- Diese Images benötigen wir
- Beschreibung eingeben und als lokales Objekt sichern - Wiederholen Sie den Ablauf für alle Images
- Vergleichen
- Group Element anlegen
======== Wiederholungsprozedere für die Autoimages durchführen =================
- Image Element anlegen
- DragSourceInfo Element anlegen
- Tags > neu_mercedes
Weitere Tags für die Images - Tags > neu_asia- Tags > neu_buick
Für die weiteren 2 Auto-Images das gleiche Prozedere durchführen=========================================================
- 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 einfügen
- Tag definieren > out_of_target
- Knoten für Fahrzeugdatendefinieren
. Attribut Marke definieren
- Attribut Preis definieren
- Attribut Währung definieren
- Binding für Tabelle erzeugen
- Über den Context verbinden und mit Enter bestätigen
- Action zu DropTarget Shoppingcar definieren- UI-Element-Parameter übernehmen
- Methoode zur Action implementieren- Setzen der Auto.Attributwerte- Abfrage des Tag Inhaltes
method onactionadd . data lo_nd_node_kfz type ref to if_wd_context_node. data ls_node_kfz type wd_this->element_node_kfz. data 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_kfz ).
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