日积月累

Prepare:
 Question: Can not open view design preview
 Solution: Active necessary service use transaction SCIF, NOTES: 1008689

Tutorial 1- Create a simple Web Dynpro Application
 1. create Component
 2. create View
 3. embed View in the Main window
 4. create View Context Node, name is FLIGHT_NODE, structure is SFLIGHT
     Cardinality setting is 0..n,and select all fields in the structure
 4. create table component in view, data binding to View Context Node: SFLIGHT_NODE
 5. hand write code in WDDOINIT Method:
    select data from table SFLIGHT, and store in internal table IT_SFLIGHT
    get node FLIGHT_NODE and call it's method: bind_table.
 6. create Application, Active all related object, right click application and choose Test menu item.

Tutorial 2 - BAPI Usage
 1. create Component
 2. create View and embed View in the Main window
 3. start wizard: Service Call
 4. create at COMPONENTCONROLLER
    select function module call BAPI_FLIGHT_GETLIST
    select component context: DESTINATION_FROM, DESTINATION_TO, FLIGHT_LIST
    adopt default method name: COMPONENTCONROLLER - EXCUTE_BAPI_FLIGHT_GETLIST
 5. create view context node: DESTINATION_FROM, DESTINATION_TO, FLIGHT_LIST and mapping to component context
    just drag in component context and drop in view context
 6. create input field: menu->Create Container Form, and mapping to correspond view context node
    create search button
 7. create button's action
 8. in action's code editor,
    start dynpro code wizard:
   choose method call: COMPONENTCONROLLER - EXCUTE_BAPI_FLIGHT_GETLIST
 9. create result table component, and create binding to view context FLIGHT_LIST
 10. create Application, Active all related object, right click application and choose Test menu item.
 
Tutorial 3 - Navigation
 1. create a new component by copy final component in tutorial 2
    rename window name to component name
 2. create view: NOFLIGHTSVIEW
    create ui element: a text_view, a button and change default layout setting: cellDesign:lPad, vGutter:medium
  3. create view context DESTINATION_FROM, DESTINATION_TO from component context by drag and drop
     create view context attribute manually: name TEXT, type STRING
     create data bind for ui text_view, to view context TEXT
  4. define plugs
     FLIGHTSVIEW:   inbound: ENTER_SEARCH,     outbound: NO_FLIGHTS_FOUND
     NOFILGHTSVIEW: inbound: NO_FLIGHTS_FOUND  outbound: BACK_TO_SEARCH
  5. change source code of ONACTIONGET_FLIGHTS in view FLIGHTSVIEW
     get the value of view context node: NODE_FLIGHT_LIST, using code wizard: Read Context
     in the second @TODO block, fire outbound plug, using code wizard: Start Navigation
  6. input the source code of outbound plug NO_FLIGHTS_FOUND in view NOFILGHTSVIEW
     get the value of view context node: DESTINATION_FROM-CITY, using code wizard: Read Context
     get the value of view context node: DESTINATION_TO-CITY, using code wizard: Read Context
     generate the response message, and set to view context node TEXT: wd_context->set_attribute
  7. create a action for button in view NOFLIGHTSVIEW, specify outbound plug at the same time
  8. embed view NOFLIGHTSVIEW in window
     create navigation link:
     BACK_TO_SEARCH of NOFLIGHTSVIEW -> ENTER_SEARCH of FLIGHTSVIEW
     NO_FLIGHTS_FOUND of FLIGHTSVIEW -> NO_FLIGHTS_FOUND of NOFLIGHTSVIEW
  9. create Application, Active all related object, right click application and choose Test menu item.

Tutorial 4 - Display Bookings of Selected Flight
 1. create a new component by copy final component in tutorial 3
    rename window name to component name
 2. create a new node under controller context FLIGHT_LIST, name: BOOKINGS, structure: SBOOK, cardinality: 0..n
    select some fields in the structure
  3. define supply function for node BOOKINGS
  4. implementation for supply function
    get value of parent element
   
     NOTICE: CL_WDABAP_FLIGHT_MODEL class may not exist, just replace it with a sql statement.
    get bookings in table sbook for the condition, parent element's carrid, connid, fldate
   
    bind data to node, node->bind_table
  5. update view context node FLIGHT_LIST
  6. add ui element in bottom of view FLIGHTSVIEW
     create data binding to view context node FLIGHT_LIST-BOOKINGS
  7. create Application, Active all related object, right click application and choose Test menu item.
 
Tutorial 5 – Component and Application Configuration
 1. create a new component by copy final component in tutorial 3
    rename window name to component name
  2. create a custom controller and set it as config controller
  3. create controller context node NAV_PARAMS and attribute NAVTO_NOFLIGHTSVIEW
  4. mapping controller context to view context
     click Controller Usage button to add the new created controller to right window
  5. change source code of method ONACTIONGET_FLIGHTS
     get node NAV_PARAMS
     get value of attribute NAVTO_NOFLIGHTSVIEW
     add b_navto_noflights = abap_true as a condition to switch to view NOFLIGHTSVIEW
  6. create application configuration
     set value of attribute NAVTO_NOFLIGHTSVIEW to true by checked the left check box
  7. refresh on abap workbench and test application with configuration