In een drietal tutorials wil ik een idee geven van de mogelijkheden van Web Dynpro for ABAP. Om ervoor te zorgen dat de tutorials op ieder systeem bruikbaar zijn, maak ik gebruik van de welbekende tabellen met vluchtdata. Deze tutorials maken gebruiken van WDA functionaliteiten die beschikbaar zijn vanaf NetWeaver 2004s.

In de eerste tutorial bouwen we een eenvoudige Web Dynpro Component waarin vluchtinformatie in tabelvorm getoond wordt, de tweede tutorial zal ingaan op navigatie tussen verschillende views in een Web Dynpro Component en in de derde tutorial zal middels Component Usage de tabel vervangen worden door een ALV weergave.

In deze tutorial maken we een eenvoudig Web Dynpro Component bestaande uit 1 View met een koptekst en een tabel waarin vluchtdata wordt getoond. De Context wordt vanuit de ComponentController naar de View gemapped.

Om dit te realiseren voeren we de volgende stappen uit:
Stap 1: Het creëren van de Web Dynpro Component
Stap 2: Context creëren. De Context leggen we vast in de ComponentController en mappen we vervolgens naar de View.
Stap 3: In de ComponentController creëren we een supplymethod voor het ophalen van de vluchtgegevens.
Stap 4. View Creëren. We creëren een View met UI elementen voor de koptekst en een tabel waarin de vluchten worden getoond. De Context uit de ComponentController wordt naar de View gemapped.
Stap 5: View koppelen aan de Window.
Stap 6: Applicatie creëren.
Stap 7: Applicatie testen.

Stap 1: Web Dynpro Component Creeren

Creëer een nieuw Web Dynpro Component in de Object Navigator.

Open de Object Navigator (transactiecode SE80) en selecteer Web Dynpro Comp./Intf. uit de dropdownlijst. Vul “ZWDA_FLIGHT_01” in.

Vul een omschrijving in en bevestig het pop-up scherm. Standaard wordt een Window aangemaakt met dezelfde naam als de WDA. Sla de gegevens op na het aanmaken van de Component.

 Stap 2: Context creeren

In dit voorbeeld leggen we alle Context in de ComponentController vast.

Dubbelklik in de object tree (linksonder) op de COMPONENTCONTROLLER.

Rechts verschijnt een aantal tabbladen, waaronder het tabblad Context. In de Context definiëren we een node SFLIGHT. Klik met de rechtermuisknop op Context en kies menupad Create > Node.

De node heeft als Dictionary structuur SFLIGHT, Cardinaliteit 0..n en Selection 0..1. De kardinaliteit houdt in dat de node nul of meerdere regels kan bevatten. De selectie houdt in dat maximaal 1 regel geselecteerd kan worden. Klik op de button ‘Add Attribute from Structure’.

Selecteer de velden CARRID, CONNID, FLDATE, PRICE, CURRENCY, PLANETYPE, SEATSMAX en SEATSOCC.

Sla de wijzigingen aan de ComponentController op.

Stap 3: Methode ophalen vluchten

Met behulp van een Supply Function voorzien we de node van vluchtgegevens. Plaats de cursor op de node en scroll in de properties naar Supply Function. Geef een naam voor de funtion op, en dubbelklik op de regel. 

Plaats onderstaande code in de methode en sla de wijzigingen op.

METHOD get_flights .
* data declaration
  DATA: lt_sflight  TYPE if_componentcontroller=>elements_sflight.

* get flights
  SELECT * FROM sflight
    INTO CORRESPONDING FIELDS OF TABLE lt_sflight.

* bind all the elements
  node->bind_table(
    new_items =  lt_sflight
    set_initial_elements = abap_true ).

ENDMETHOD.

Stap 4: View creeren

Creëer een view ‘MAIN’. Klik op de Web Dynpro component en kies menupad Create > View. Geef de View als naam ‘MAIN’ en vul eventueel een omschrijving in.

Na het creëren van de View wordt de Layout van de View direct geopend. Als de Layout voor het eerst wordt geopend, vraagt het systeem om een gebruikersnaam en wachtwoord. Vul hier de SAP-gebruikersnaam en –wachtwoord in.

Open het tabblad Context. Aan de linkerkant wordt de Context van de View getoond. Deze is nu nog leeg. Rechts wordt de Context uit de ComponentController getoond. Sleep de Context uit de ComponentController naar de Context van de View. De node en alle attributen zijn nu beschikbaar in de View.

Ga naar het tabblad Layout. Hier definiëren we een koptekst en een tabel waarin de gevonden vluchten worden getoond. Er zijn twee manieren om de UI elementen te selecteren: door het vanuit de UI Element library naar de View layout te slepen of door het in te voegen in de View Editor. In de schermprinten hieronder, worden Elementen via de View Editor ingevoegd.

Klik met de rechtermuisknop op ROOTUIELEMENTCONTAINER en selecteer Insert Element. Voeg een UI Element CAPTION toe voor de koptekst.

Rechtsonder verschijnen de properties van het UI Element. Vul een titel in achter text.

Voeg een tabel toe waarin de gevonden vluchten worden getoond. Een tabel kan op dezelfde mannier worden toegevoegd als het voorgaande UI Element maar via de Wizzard kunnen alle Elementen in een keer worden toegevoegd. Klik op de button Web Dynpro Code Wizzard (). Dubbelklik op de regel Table.

Klik op de button Context.

Selecteer de node SFLIGHT en bevestig het pop-up scherm.

Default worden alle velden in de node als TextView in de tabel getoond. Bevestig de Wizzard.

Sla de wijzigingen op.

Stap 5: View aan de Window koppellen

In deze stap koppelen we de View aan de Window die bij het creëren van de Web Dynpro Component is aangemaakt.

Open Window ZWDA_FLIGHT. We plaatsen de View MAIN direct in deze Window. Dit kan door met de rechtermuisknop op de Window te klikken en Embed View te selecteren in het context menu of eenvoudiger, door de View naar de Window te slepen.

Sla de wijzigingen op en activeer de Web Dynpro Component.

Stap 6: Applicatie creëren

De laatste stap voor het creëren van een bruikbare Web Dynpro Component is de Web Dynpro Applicatie. Klik met de rechtermuisknop op de Web Dynpro Component en selecteer menupad Create > Web Dynpro Application. Sla de applicatie lokaal op.

Stap 7: Applicatie testen

Klik met de rechtermuisknop op de applicatie uit stap 5 en selecteer Test. Log in met de SAP gebruikersnaam en wachtwoord.