Displaying Different Messages in Web Browser

8/14/2019 Displaying Different Messages in Web Browser

1/23

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

For more tips, tutorials, Interview questions, certification questions, please visitSAPTechnical.com

Web Dynpro for Java

Displaying different messages in Web Browser

By Sowmya Thadakamadla


2/23



Description:This application provides developers to display error messages in the Web Browser. Themessages are displayed as hyperlinks. Clicking on links, we can correct the error in thecorresponding UI Element.

Navigation: Open NWDS.Creating new Web Dynpro Project called Error Messages.

File NewWeb 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 SimpleTypes.

Simple Types Create Simple Type.


3/23



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 TypesBeginDateEdit.

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


4/23


5/23



Enter Simple Type Package in the second Column by pressing the Button in theCorresponding 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 Componentscreate 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.

Click on Finish Button.

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


6/23



Creation of Error Messages.

Defining of Error Messages with the Message Editor.

Message Poolopen Message Editor.

Choose Add Message Icon.

Enter the fields shown in the above screen.

Click on Ok.

Repeat the same for another Message.


7/23



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

ContextNewValue 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.


8/23



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.

RootUIElementContainerProperties.

Choose layout as GridLayout form the dropdown.

Creating new UiElement of type Group in RootElementContainer.

RootElementContainerInsert 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 layoutProperty to MatrixLayout.


9/23



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.

Groupinsert child

Select Text View and click on Finish Button.

Click on Text View.

Right side you find Properties tab.

Enter text as FirstName.


10/23



Groupinsert child

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.


11/23



Button Creation:

Groupinsert child

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.

FirstWindowopen 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. FirstComponentViewcreate 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 createinbound plug instead of outbound plug.

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


12/23



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.

FirstComponentopen Data Modeler.

Create a data link from left side and draw a link from of FirstComponentView toComponent Controller.

The following window will be displayed.


13/23



Draw a link form Person node of FirstComponentview to Person node of ComponentController (FirstComponent).

Choose Person node.

Click on Ok button.

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


14/23



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 ControllerEdit.

Below you find Context for Component Controller.

PersonProperties.

Change the cardinality property and selection cardinality property to1..1 From dropdowndisplayed to each property.


15/23



Creating Action for the Submit button and fire the outplug.

FirstComponentViewEdit. 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.


16/23



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.


17/23



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.


18/23



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


19/23



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

SecondViewEdit.

In the outline you find RootElementContainer.

Insert Group element as specified above.

GroupApply Template.

The following screen will appear.

Select Form. Choose Next.


20/23



Check for Person Node. Click on Next button.

Chose Text View for all elements form the corresponding dropdown.

Click on Finish Button.

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.

ApplicationCreate Application.

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


21/23



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.


22/23



If you click on Submit without entering FirstName and LastName andBeginDate 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 tothe Second View.

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


23/23


For more tips tutorials Interview questions certification questions please visit

Displaying Different Messages in Web Browser

Documents

Transcript of Displaying Different Messages in Web Browser