Unleashing ABAP Webdynpro for generating XSD in SAP XI-Episode 1

[STALANKI]

Starting from the day I started working with XI SAP Netweaver 2004s I fell in love with the ABAP Webdynpro.Webdynpro being next generation GUI technology of SAP I feel there is need for us to get a hang of it. It can be very useful when you want to build user-friendly screens in XI to address specific customer requirements to build a central monitoring tool for all their EAI products or simply say build client proxies in ABAP Webdynpro.Once you know it, it is up to the developer to use it according to the applicability. Probably it is not as good as the blog from my ever green favourite

Thomas Jung

. If it is basic, don’t scream at me! Read through! You might like it.

This blog explains the ABAP Webdynpro in a slightly different and simple way. First the basics and then a simple illustration that helps XI developer to get a hang of it.

Webdnypro:

Before I use any technology I like to get familiarized with it.Webdynpro is nothing but a product that resulted due to SAP transition from GUI desktop clients to browser based clients. Read the article

An Introduction to Webdynpro Protocol by Deepak Chopra

for further details. It is based on MVC architecture. AAAAAAAh...Lexicon Again!..Let’s define it.

MVC:

MVC is a design pattern that separates the application object (model) from the way it is represented to the user (view) from the way in which the user controls it (controller).


With MVC based Webdynpro we can model our business application and control the actions of the user between the model and view. Webdynpro is a modelling based environment which generates the code at runtime automatically that eases the developer to manually code, test and debug the applications.


Guess too long Intro! Now let’s see it in reality using an illustration!!!!

Illustration:

Let’s take a scenario where we have to generate an XSD depending on the table name that will be fed by the user. The application logic is described in the blog
Generate XSD
. We re-use this logic for the modelling and so it is required to have a through reading on this.

Lets view it first, then control it and then model the complex part of the application.

View:

We design a view that takes the table name in the input text box and displays the result (xsd) in the text area when the user presses FetchXSD Button. We do not bother about the application logic that transforms the table name to XSD. It simply renders the contents of the data.


!https://weblogs.sdn.sap.com/weblogs/images/18344/wd1.GIF|height=324|alt=XSDView|width=328|src=https:...!


Take a note of the UI elements in the above figure:


1. Input Text Box.


2. Label for Input Text box.


3. Push Button


4. TextArea in non-editable mode.



Also observe that Label, Input textbox and pushbutton are in one single row and TextArea in another row of the webpage.



Let’s start building it using SE80 ABAP development workbench.

After launching the ABAP development workbench choose the relevant dropdown of Webdynpro and give the name as ZABAPWD2XSD and click create as shown below.
We can see that WebDynproComponent ,Component Controller, Interface Controller and Window are automatically created.

Create Label

: Choose the type of element as Label and name as DB_LABEL and give the text as Name of Database Table in the properties window as shown below and layout as RowHeadData as data has to be displayed in row layout.

Notice the labelfor property is empty and it will be associated with Input Textbox after it has been created.

Create Input Textbox:

Choose the type of element as InputField and name as DBTAB_NAME and layout as RowData in the properties window as it has to be in the same row as the label.

Now fill the labelfor property for the element DB_LABEL by choosing the appropriate dropdown.

Create Pushbutton:

Choose the type of element as Button and name as FETCH_DATA and give the text as Fetch XSD in the properties window as shown below and layout as RowData as it has to be in the same row as the label.

Now save everything and check the layout which has to be similar to this:

With this we have completed the viewing part of designing the application. Don’t you agree it is too simple to build? The most complex aspect of the application is to design the Model and Control.

Boo! I am really tired of writing more and don’t want to make things clumsy! Wait for the upcoming series where I discuss about modelling and controlling part of the same application design which completes the series!  I will write it, if you like it. Stop me! If you don’t like it.