Web Dynpro for Java Displaying different messages in Web...

Displaying different messages in Web Browser (Web Dynpro for Java)

For more tips, tutorials, Interview questions, certification questions, please visit SAPTechnical.com

Web Dynpro for Java

Displaying different messages in Web Browser

By Sowmya Thadakamadla



Description: This application provides developers to display error messages in the Web Browser. The messages are displayed as hyperlinks. Clicking on links, we can correct the error in the corresponding UI Element. Navigation: Open NWDS. Creating new Web Dynpro Project called Error Messages. File � New � Web Dynpro Project.

Click on Finish Button. In Web Dynpro Explorer you can see the created Project. Creating Simple Types to define data types in context.

♦ Expand tree structure of ErrorMessages Project and find Dictionaries node.

♦ Expand Dictionaries and in that expand Data Types and in that expand Simple Types.

♦ Simple Types� Create Simple Type.



♦ Enter Simple Type name FirstName and Simple Type Package com.yash.dynpro.

♦ Click on Finish.

♦ Repeat the same for LastName, BeginDate and EndDate. This screen shows the Simple Type Definition for the Created Simple Type Begin Date.

♦ Changing the Built-In Type property of Simple Type Begin Date.

♦ Simple Types�BeginDate�Edit.

♦ Choose date as Built-In Type in drop down list.



Creation of Structure to define values of the Context using the Simple Types created above.

♦ In Data Types tree structure you find Structures.

♦ Structures�Create structure.

♦ Enter Structure name as Person and Structure package as com.yash.dynpro.

♦ Click on Finish Button.

This Screen Shows the Elements of Structure Person.

♦ To define Elements in a Structure Enter Simple Type names created above in the Element Name column



♦ Enter Simple Type Package in the second Column by pressing the Button in the Corresponding Column.

♦ Expand com.yash.dynpro and choose corresponding simple type.

♦ Click on OK. Simple Type and Built-In Type displayed automatically.

Creating a new Web Dynpro Component.

♦ Expand Error Messages Project Structure, you find Web Dynpro.

♦ Expand Web Dynpro you find Web Dynpro Components.

♦ Web Dynpro Components�create Web Dynpro Component.

♦ Enter Component Name as FirstComponent.

♦ Component Package as com.yash.dynpro.

♦ Window Name as FirstWindow.

♦ View Name as FirstComponentView.

♦ Window package and view package displayed automatically.


♦ Expand Web Dynpro Components tree structure the following structure will be opened.



Creation of Error Messages.

♦ Defining of Error Messages with the Message Editor.

♦ Message Pool�open Message Editor.

Choose Add Message Icon.

♦ Enter the fields shown in the above screen.

♦ Click on Ok.

♦ Repeat the same for another Message.



Defining a new Value node for the Context of the view FirstComponentView having the name Person with Structure binding to the Structure Person.

Context�New�Value Node.

♦ Enter Name as Person and Check the Create with structure binding.

♦ Click on Next Button.

♦ Expand Local Dictionary.

♦ Select the structure Person.

♦ Click on Next.

♦ Check the Structure Person.

♦ Elements below the Structure Person automatically checked.



Click on Finish.

Repeat the same procedure for Component Controller and SecondView. Creating UiElements for the FirstComponentView.

♦ Change the Layout Property of the RootElementContainer.

♦ Shift to the Layout tab.

♦ RootUIElementContainer�Properties.

♦ Choose layout as GridLayout form the dropdown.

Creating new UiElement of type Group in RootElementContainer.

♦ RootElementContainer�Insert Child

♦ Select Group and click on Finish button.

♦ Give the Values for the Properties height and width.

♦ Click on Group.

♦ In the Properties tab enter the values for height and width and also change the layout Property to MatrixLayout.



♦ Expand the tree structure of Group element. You find Group_header.

♦ Click on Group_header.

♦ Group_header properties tab will be opened.

♦ Enter value for the Property text as Enter Person Details.

♦ Creation of new UiElement of type Text View in RootElementContainer.

♦ Group�insert child

♦ Select Text View and click on Finish Button.

♦ Click on Text View.

♦ Right side you find Properties tab.

♦ Enter text as FirstName.




♦ Select InputField.

♦ Chose Finish. Defining Context binding to the UI elements.

♦ Click on Inputfield.

♦ Right side you find Properties tab.

♦ You find a Red Cross mark in value property.

♦ Click on button displayed in the value property.

♦ Select First Name.

Click on Ok button.

♦ Repeat the same procedure for LastName, BeginDate and EndDate.

♦ But for TextView Element change the Property layoutdata as MatrixHeadData.



Button Creation:


♦ Select Button. Click on Finish.

♦ Click on button, Right side you find Properties tab.

♦ Change the layout data property as MatrixHeadData

♦ Enter the text property as Submit.

Creating another view.

♦ Expand the tree structure ErrorMessages, You find web Dynpro.

♦ Expand the web Dynpro structure, you find Windows and expand it.

♦ FirstWindow�open Navigation Modeler.

♦ Drag and drop Embed a view from left side.

♦ The following window will be displayed.

♦ Choose the Radio Button Embed new View and click on Next.

♦ Enter view Name as Second View

♦ Choose package as com.yash.dynpro from Browse button.

♦ Click on Finish. Creating Navigation links between FirstComponentview and SecondView.

♦ Right click on FirstComponentView.

♦ FirstComponentView�create outbound plug.

♦ Enter the Name as outplug, choose Finish button.

♦ Outbound plug will be created.

♦ In the same way create inbound plug by doing small modifications like choose create inbound plug instead of outbound plug.

♦ Choose the icon create a navigation link from left side and draw a link from outplug of FirstComponentView to inplug of SecondView.



Defining Context Mapping between Views and Controller.

♦ Expand the tree structure ErrorMessages, You find web Dynpro.

♦ Expand the web Dynpro structure, you find Web Dynpro Components.

♦ Expand it.

♦ FirstComponent�open Data Modeler.

♦ Create a data link from left side and draw a link from of FirstComponentView to Component Controller.

The following window will be displayed.



♦ Draw a link form Person node of FirstComponentview to Person node of Component Controller (FirstComponent).

♦ Choose Person node.

♦ Click on Ok button.

When you expand the nodes you can find actual context mapping between FirstComponentView and Component controller.



♦ Choose Finish button.

♦ Repeat the same for Second View. After finishing the above steps the window will appear as below.

Changing the cardinality of Context nodes.

♦ Component Controller�Edit.

♦ Below you find Context for Component Controller.

♦ Person�Properties.

♦ Change the cardinality property and selection cardinality property to1..1 From dropdown displayed to each property.



Creating Action for the Submit button and fire the outplug.

♦ FirstComponentView�Edit.

♦ In the Outline you find Button under RootElementContainer.

♦ Click on it.

♦ In the right side you find properties.

♦ Click on the end button corresponding to onAction corresponds to Events.

♦ Enter Name and Text and choose Fireplug as outplug from the dropdown.

♦ Click the button Finish.

You can find the method onActionSubmit in the Methods Tab.



Defining Check methods in the FirstComponentView.

♦ In the methods tab click on New button.

♦ Select Method.

♦ Choose Next.

♦ Enter Name and choose Return type from the dropdown.

♦ Click on Next button.

♦ The following window will appear.

♦ Click on New button.

♦ Enter Name and choose Type from dropdown list.

♦ Click on finish button.



Click on Finish button. Repeat the same for another check method also.

Implementation. In the outline you find Check methods. Click on corresponding methods.

In the Implementation tab those methods will be highlighted. Provide the functionality to those methods as specified below.



Provide the Necessary import statements. Select and click on Finish.



Binding UiElements of SecondView to the Context (context Binding).

♦ SecondView�Edit.

♦ In the outline you find RootElementContainer.

♦ Insert Group element as specified above.

♦ Group�Apply Template.

♦ The following screen will appear.

♦ Select Form. Choose Next.



♦ Check for Person Node. Click on Next button.

♦ Chose Text View for all elements form the corresponding dropdown.


Save all changes we made by clicking the icon save all Metadata in the application toolbar

Creating the Application.

♦ In Web Dynpro Explorer Expand web Dynpro tree.

♦ Application�Create Application.

Enter Name and Chose Package from Browse button. Click on Finish.



Rebuilding Project.

Deploying and Running the Project.

♦ In the browser the following screen will appear.

♦ Now you can check the functionality of the Application we build.



If you click on Submit without entering FirstName and LastName and BeginDate and EndDate details provided as wrong then you would get Error Message Links.

By clicking on the Corresponding links the Control will go to the Corresponding UiElement.

♦ By entering appropriate values in the corresponding fields the application will navigate to the Second View.

♦ There you can find the Correct Output, which you have entered in the First Screen.

Web Dynpro for Java Displaying different messages in Web...

Documents

Transcript of Web Dynpro for Java Displaying different messages in Web...