Hi Prashanth,
3-1 Create a new Web Dynpro Component called ZWD_##_HELLO_WORLD. Change the proposed window name to MAIN.
3-2 Create view
Create a view called HELLOWORLD
Navigate to the view’s Layout tab. Open the context menu of the ROOTUIELEMENTCONTAINER
- choose Element einfügen (Insert Child)
- Enter the name TEXT.
- From the Type drop down list, select TextView.
- Press Confirm Entry.
3-3 Adjust properties of element TEXT
Now select the newly created element TEXT and change the design property from standard to header1. Enter “Welcome to Web Dynpro!” in the text property.
Press Save.
3-4 Embed view HELLOWORLD in MAIN window
Double-click on the window main. Right mouse click on the only element MAIN and choose embed view from the context menu. Choose helloworld as view to be embedded and click on continue.
3-5 Save and activate your new Web Dynpro component.
3-6 Create application
Lastly, we must create an application so that we can access the Web Dynpro component via a URL.
- Right mouse click on the component node
- Select Create -> Web Dynpro Anwendung (Web Dynpro Application) from the context menu. Create the application having the following attributes:
Name: (accept default)
Description: Hello World
Accept all default settings and press Save.
Data Binding, Context Mapping & Navigation
Solution
Chapter: Context at Design Time
Theme: Binding UI elements to the view context and mapping view context nodes to the component controller context
At the end of this Exercise, you will be able to:
• Create a value node and child attributes in a context
• Map the view context node to component controller’s context
• Bind the UI elements to the view context
• Create navigation between two views
3 Developing
3-1 Create Component
Create a new Web Dynpro Component called ZWD_##_SIMPLE_APPLICATION. Change the proposed window name to MAIN.
3-2 Build Context in the component controller
Locate the Component Controller node in the project structure that is located immediately under the component. Double click on Component Controller to open the Custom Controller editor.
Add a new node to the Custom Controller Context, having the name FlightInfo.
On the popup enter sflight in the field Dictionary structure and press Add Attribute from structure.
Choose fields carrid and connid and press Continue.
Change property Input Help Mode of the attributes carrid and connid to automatisch.
This setting will provide both input fields on the Input_View (will be created next) with a F4 help for value selection.
3-3 Create Input_View
3-3-1
Create a view called Input_View and navigate to the context tab. Use drag & drop to copy and map the node FlightInfo from the context of the Component Controller to the Context of the View Controller. The two attributes carrid and connid are automatically created.
3-3-2
Navigate to the view’s Layout tab. Change the property Layout of the ROOTUIELEMENTCONTAINER to MatrixLayout.
Create a group with the name Group_1. Change the Layout property to MatrixLayout and the LayoutData property to MatrixHeadData. Change the property Text of the element Caption_1 to Please fill in values!
Right mouse click on Group_1 and choose Container-Formular erzeugen (Create container form) from the context menu
Choose context node FlightInfo and press Confirm entry.
The two Labels and Inputfields for the context attributes carrid and connid have been created.
Change the property LayoutData of Connid_Label_1 to MatrixHeadData.
3-4 Create Output_View
3-4-1 Make a copy of view Input_View and name it Output_View.
Adjust the Description on the properties tab to Output View.
3-4-2 Change the text of Caption_1 to Your input was….
3-4-3 Enable property readOnly for both input fields.
3-5 Create Navigation from Input_View to Output_View
3-5-1 Navigate to the tab Inbound Plugs on the Output_View and create a Inbound Plug named to_output_view.
3-5-2 Navigate to the tab Outbound Plugs on the Intput_View and create a Outbound Plug named from_input_view.
3-5-3 Go to the Main window (on the window tab) and embed the two views Input_View and Output_View.
Set Input_View as default.
Expand the node of embedded view Input_View, right mouse click on the outbound plug and choose Create Navigation Link from the context menu. Choose Destination View OUTPUT_VIEW via F4 help and press Continue.
As a result a new node with a chain symbol appears under the outbound plug.
3-5-4
Create a button element named Go_Button under Group_1 of the view Input_View. Insert Go! for property Text Create action Go for the button. Enter a description and choose outbound plug From_Input_View. Press Continue.
3-6 Create Web Dynpro Application
Right mouse click on the component node and select Create -> Web Dynpro Anwendung (Web Dynpro Application) from the context menu.
Create the application having the following attributes:
Name: (accept default)
Decription: Simple Web Dynpro Application
UI Elements
Solution
Chapter: UI Elements
Theme: Container UI Elements
At the end of this Exercise, you are able to:
• Define an Image UI Element.
• Place the image within a Tray UI Element.
3 Developing
3-3 Add a Tray UI element to the view
Add a Tray UI element to the view. Name it TRAY_1 Define “Bomb” as the Tray’s title. (->Text attribute of CAPTION_1)
3-4 Download - Upload
Download the image explosion.gif from Web Dynpro Component WD_04S_UI_IMAGE and upload it to your component.
3-5 Add an Image to the Tray UI element
Add an Image to the Tray UI element. Name of the image: IMAGE_BOMB. Set the value of property source to explosion.gif and tooltip to “This is an explosion image”.
4 Optional: Setting image properties programmatically
4-1 Bind the image properties alt and source to the context of the view.
Bind the image properties source, tooltip and visible to the context of the view container:
• Add a new context node to the view controller context, having the
name Image. Change the cardinality of this node to 1..1.
• Add three new attributes to the node Image, having the names SOURCE, TOOLTIP (both of type string) and VISIBLE (of type WDUI_VISIBILITY).
• Bind the properties SOURCE, TOOLTIP and VISIBLE of the Image I element to these context elements.
4-2 Set the image properties programmatically
Set the image properties SOURCE, TOOLTIP and VISIBLE programmatically in method WDDOINIT of view IMAGE_VIEW.
MEHTHOD wddoinit .
DATA:
context_node TYPE REF TO if_wd_context_node,
context_elem TYPE REF TO if_wd_context_element,
stru_image TYPE if_image_view=>element_image.
stru_image-source = 'explosion.gif'.
stru_image-tooltip = 'Explosion boom!!'.
stru_image-visible = '02'. "=visible
context_node = wd_context->get_child_node( name = `IMAGE` ).
context_elem = context_node->get_element( ).
CALL METHOD context_elem->set_static_attributes
EXPORTING
static_attributes = stru_image.
ENDMETHOD.
This will surely work.More over you can run through the links provided above.
Thanks and regards,
Amita Gupta
Accept all default settings and press Save and run your application.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.