Pages

23 February, 2014

First Demo Component

Hi Guys.

Hope you guys doing well.

Last post was about Controllers. And I hope that you guys understood.

Today, You are going to create a simple Application in Webdynpro. :)


Objective: Display the "Hello World".

Yeah, Its right when ever we learn a new technology or language. We create a simple application or program i.e. "Hello World"

I am trying to make it simple as possible as i can.

In this application we will use the standard UI element "Text View". ( In coming post you will come to know more about UI elements) to display the text "Hello World" on browser.

So let's start

Step 1. Go to Object Navigator using the TCode SE80.


Then Object Navigator window will be open.

Step 2. Select the "Web Dynpro Comp./Intf" from the drop down as below fig.



Step 3. Give the Component name as you want. Here I have given  ZWD_DEMO_1 and then press the enter key. A message window will be open and click on YES button.



Step 4. The below popup window will open after clicking Yes Button in previous step. In this popup window you will see the like this.

    
Give the short description. Here by default one Window "ZWD_DEMO_1"  and one View "MAIN" will be also generated. If you want to rename then you can as I did below.


And Then press the enter key.

Step 5. Give the package name, where you want to save your component.


Step 6. If you have saved in Package then give the assign the Workbench Request. If you saved in temp folder then you will not ask for Workbench Request.

Now You can able to see the your component as below. 

Step 7. Now double click on View "V_MAIN" to go to View. And Then go to Layout Tab of View Controller.



Step 8. Now Right Click on "ROOTUIELEMENTCONTAINER" then select the "INSERT ELEMENT" then one popup window will be open.

Note: Make you sure that you are in edit mode. Other wise you will not able to insert element.



Step 9. Here Select the "TextView" from the drop down from TYP and provide the ID for the TextView UI Element.


Step 10. Provide the mandatory property "text" of TextView UI element as "Hello World" as below. And save the layout.


Then you will able to see the below layout.



Step 11. Now double click on window "W_MAIN" to make sure that view "V_MAIN" is placed in window or not.

Since In this demo there is only one view so by default it will be placed in window. And you will be see like below fig.




Step 11. Now Save your Component and Activate the Component.

Note: Make you sure that you have selected  your component "ZWD_DEMO_1" other wise when you will try to activate then you will get an error message like below.





Step 12. Till now you have create your WebDynpro Component. Now its time create the application since only application will be open in browser.

To create the Application. Right Click on Component then select Create then WebDynpro Application



Step 13. A popup window will be open. Provide the application name and short description and then press the enter key.


Step 14. Then you will be see the your application. Here you will notice that an URL for your application is generated automatically. Now Save your Application in Package or TEMP package as you wish.



Step 15. Now its time for testing the application. To test your application you do in two different manner.

  • First Copy the URL which one generated automatically and then go browser and paste the URL. Then you will be able to see your application.
  • Or follow the below steps as shown in the fig.

   

And Finally you will able to see the below output on browser.






Hope you guys able to create your first Component in WebDynpro.

If you want to suggest me then you are most welcome.

Thank You.


16 February, 2014

Controllers in WebDynpro

Controllers -- What they are???
Controllers are the one of the most essential concept of WebDynpro Component. Or You can say that Controllers are all in all of any WebDynpro Component. Without Controller you can't think about WebDynpro Component.
From below diagram hope you can understand the basic concept of Controller.

As you can see the diagram. A controller is something where you will implement the your logic as well there is data storage area to storage data which you will use in your implementations
So In more precise way.. 
Controllers are used to handle application functionality. Various controllers exist as part of the WebDynpro framework to handle different aspects of the flow logic and WebDynpro component functionality. Programming within controllers is done via methods that refer to data stored in the context (Hierarchical Data Tree) or attributes.
Controllers are essentially ABAP classes with predefined methods, attributes and events that handle the basic functionality required based on the controller type. 
Examples of the standard functionalities are:
  • Hook Methods
  • Event Handler Methods for Navigation and Action Events
  • Attributes for local Data.

Types of Controller:

There are different types of Controller in WebDynpro framework which are
  1. Component Controller
  2. Custom Controller
  3. Interface Controller
  4. View Controller
  5. Window Controller
Before going further to know more about the Controllers. Let us know something about different types of interfaces that are created at the time of component creations. These interfaces are as below.

IF_<ControllerName>
IG_<ControllerName>
IWCI_<ComponentName>

The interface begin with the prefix IF is local and can be used for coding only within that controller.

The interface begin with the prefix IG is used for Cross Controller Communication.(e.g Component controller to View Controller)

The interface begin with the prefix IWCI is used for Cross Component Communication.
(e.g. ComponentA to ComponentB )  Now lets come to the Controller types..


Component Controller

This is the parent controller for the WebDynpro component. There is only one Component Controller exists as per WebDynpro component and it is Global Controller. i.e Component Controller consist of data, flow logic, Events, Methods are available to all the other types of  controller.
                   This controller does not have any visual interface. The life time of the component controller is the life time of the component.

Components of Component controller:
  • Properties
The Properties tab consists of the description and the development attributes. It also has a Used Controllers/Components directory. If the controller needs to share data with another controller, it must be added to this list and thus declared explicitly.



  • Context
Context is a hierarchical form of storage of data. Context is a place where you declare the data. The Nodes declared here can be mapped to any no of view and can be accessed from there hence making the data of the component controller global.

Note: In Coming post you will be understand about Context and its properties.

            

  • Attributes 
The attributes required by the Component Controller are declared in the Attributes and are accessible to the methods of the Component Controller using the handle provided for the Component Controller (WD_THIS). The attribute WD_THIS declared in any controller refers to the interface of the current controller and the attribute WD_CONTEXT refers to the corresponding Context of the controller.
                These attributes can also be accessed from different controllers as well using the handle provided for the Component Controller (WD_COMP_CONTROLLER) in the respective controller.



  • Events
Events created in the Component Controller are visible only within the component which means it can only be triggered by the methods of the Component Controller. But it can be handled in different controllers. Thus Events are used to communicate between the controllers and enable one Controller to trigger the event and handler the event in different controller.
          Events can also implement Cross Component Communication provided that the  interface check  box  is checked.

 

  • Methods
Component Controller consist of number of predefined methods called Hook Methods which are executed in a pre-defined manner. You can also create your own methods and the methods which you created can be called from any Controller using the handle for the Component Controller (WD_COMP_CONTROLLER).

          Note:- In coming post you will come to know more about Hook Methods

 


Custom Controller

Custom Controllers can be additionally created in the component and there are exactly similar to the Component Controller in terms of functionality. This means it is visible to all the Controllers. And life time of the controller is the lifetime of the component.
                                     Any number of custom controller  you can create in the component and it will provide you the option of structuring the data’s and functions. It only make sense to create a custom controller if certain function and data’s are to be associated with the specific set of views.

Components of Custom Controller:

The Components of Custom Controller, Properties, Context, Attributes are similar to the Component Controller. And only Events and Methods are differ from Component Controller.
  • Events
 You can create Events and implement in a similar way to the Component Controller except that you cannot implement Cross Component Communication. It can be handled only within the component.

           

  • Methods
 Unlike Component Controller the Custom Controller does not contain a no of Hook Methods. There are only two Hook Methods are available (As you can see in below screen). You can create your own methods in the Custom Controller and these methods can be used by any views provided that the Custom Controller is added to the Used Controller/Components in the properties tab of the view.

             


Interface Controller 

Interface controller is used for Cross Component Communication. Interface controller itself does not contain any implementation. It is the point of contact of communication for other component to use this component. Only nodes, methods and events marked as interfaces can be used by other Components.
                      For the Interface Controller of a Web Dynpro Controller, the methods are implemented in the related component controller.
                       For the Interface Controller of a Component Interface definition, the implementation is performed in the Component Controller of the embedding component.

For every interface controller there is a related ABAP interface   IWCI_<component_name> or IWCI_<Comp.Interf.Def-Name>

Components of Interface Controller:
  • Properties:
In the Properties tab you will be able to see the administration data and ABAP Interface that              was created for the external communication (IWCI).


  • Context
In the context tab you will be able to see the context nodes of the Component Controller which is marked as interface node in the node properties of the Component Controller.


  • Events
In the events tab you will be able to see the events which are marked as interface events for Cross Component implementation.



  • Methods 
In the methods tab, you will be able to see the interface methods that can be accessed by the other components.




View Controller  

No of View Controllers in a component depends upon the no of views. The view controller cares about the view specific flow logic like checking user input, handling user actions etc & design the UI using standard UI's element. The lifetime of the view controller is restricted to the life time of the view.

Components of Interface Controller:
  • Properties:
The properties tab of the view controller consist of the admin data as well as the option to add the used controllers for the view.


As you can see in the above screen. A component ZWD_LINK is used in view controller so you can access the methods or context data from the view controller of Component Controller. This component will be added automatically when first time you create a component. And you have to add others component in Used Controllers/Component explicitly so you able to access the functionality of other Components.
  • Layout:

Layout is something which gives you feel as WYSIWYG (What You See Is What You Get). In you layout you will design the user interface using UI elements. As you can see in the below screen. Layout is divided in four parts.  
  • UI Elements Library (left hand side)
  • View Design Area (middle)
  • UI Element hierarchy (top of right hand side) 
  • UI Elements Properties (below of right hand side)

  • Inbound Plugs:
Plugs are required for the navigation between the views. You can create Inbound plugs here and Inbound plugs are also consist of event handler method which will be executed before displaying the view.
  

  •  Outbound Plugs:
Outbound plugs consist plugs which is pointing away from the view. This does not contain any event handler method and you can define the parameters for the plugs. The Outbound Plug can be fired using following syntax.

                                      WD_THIS->FIRE_<OutboundPlugname>_PLG( )



  • Context
Context in View Controller is same as Component Controller. You can create your Node in Context or you can use the context Node of Component Controller  using Context Mapping. After Context Mapping the Context Node value of Component Controller will be visible in View Controller.

View Controller Context is visible to the View only i.e you can not access from other controllers since View Controller doesn't allow to create interface Context.


  •  Attributes
Attributes is similar to that of the Attribute Tab as in the Component Controller. In the view controller you will be able to see the handler (WD_COMP_CONTROLLER) to the Component Controller with reference to the interface of the type IG_(Cross controller). Using this handler the attributes and methods of the component controller can be accessed.


  • Actions 
In Action Tab all the actions will be listed for which UI Element you have created the Action and also the event handler action will be listed.


  •  Methods
Methods Tab is similar as Component Controller. You will notice that all the Hook Methods specific to View Controller are listed apart from Hook Methods other Methods and Actions are also listed which you have created for the UI Elements.



Window Controller
Each window in a WebDynpro component consist of a window controller. It is visible throughout the component and behaves like Component or Custom Controller.

Components of Interface Controller:

  • Properties 
Properties tab of the Window Controller is similar to that of the View Controller.


  •  Window
In the window tab you will be able to see the views that are embedded in the window, inbound and outbound plug of each view and the view that is marked as default. Here you can also specify the navigation link between the views using the view plugs.

Note : Don't forget to embed the View in Window when ever you created a new View otherwise you will not able to see the view in browser.

  • Inbound Plugs
In Inbound Plugs Tab you will be able to see the one DEFAULT plug and you can define your own plugs also.

The properties of Inbound Plugs of Window is differ from Inbound Plugs of Window  as different characteristic like Interface Exit, Suspend . You can create the different types of Inbound Plugs here like Startup, Exit, Resume, Suspend as well.

The Interface Check Box determines whether the Inbound Plug is used only for navigation within the component or cross component navigation.
 
  • Outbound Plugs
Outbound Plugs consist of interfaces, Exit and Suspend characteristics. And you also define the parameters for Outbound Plugs.


  • Context
Window Controller can be used to implement navigation controls within the window. Typically you use it to create the data in the context that you require for navigation decisions. The context of a window controller is no different to the contexts of other global controllers; it can be viewed within the whole component



  • Attributes 
 You can maintain attributes for the context of a window.


  • Methods 
Methods Tab is similar to other  controllers. You will able to see the list of Hook Methods specific to Window Controller and apart from this the event handler for inbound plugs as well as for events of other controller, you can also create the simple methods for window controller as well.

 





That's all about Controller. Hope you will able to understand about controllers. In coming post you will be able to understand more about Hook Methods.


And Don't forget to comment  :) :)

Thanks

12 February, 2014

Webdynpro Architecture

Webdynpro Architecture

Webdynpro Architecture is based on MVC Architecture.
The Model View Controller (MVC) design pattern contains a clear distinction between processing control, data model and displaying the data in the interface. These three areas are formally distinguished from each other by three objects: model, view and controller. As a result, you can easily split Web applications into logical units.
The model is used as an application object of the application data administration. It responds to information requests about its status, which usually come from the view, as well as to statements for status changes, which are usually sent by the controller. In this way, only the model is used to process data internally, without making reference to the application and its user interface.
There can be different views for a model, which can be implemented using different view pages.
The view handles the graphical and textual output at the interface and therefore represents the input and output data in each interface element, such as pushbuttons, menus, dialog boxes and so on. The view takes of visualization. To visualize the status, the view queries the model, or the model informs the view about possible status changes.
The controller interprets and monitors the data that is input by the user using the mouse and the keyboard, causing the model or the view later to change if necessary. Input data is forwarded and changes to the model data are initiated. The controller uses the model methods to change the internal status and then informs the view about this. This is how the controller determines reactions to the user input and controls processing.
Benefits of MVC
  • It keeps your business logic separate from your (HTML-based) views
  • Keeps your code clean and neat in one place
 Model
  • Represents the information and the data from the database
  • Validation of the data
 View
  •  Data presentation and user data
  •  Rendering models into one or more formats, such as HTML,XHTML, XML, or even JavaScript
 Controller
  •  Dispatches requests and control flows
  •  Connects the model with the view
  •  Process the data that comes from the model.




MVC Architecture


I think you would have got a clear idea about MVC which is the base of the Webdynpro.


Any Suggestions are most welcome.

Thanks 

11 February, 2014

What is Webdynpro..?

What is Webdynpro?

Generic Definition : WebDynpro is a great modeling environment which stores the user-interface details in the form of meta data. We can write less code and fix bugs in a shorter time with lesser effort. It increases a programmer’s productivity by manifolds. Webdynpro is nothing but one framework for development of user interface for use with SAP NetWeaver. It support programming for different platform such as JAVA ,ABAP.


Technical Definition : WebDynpro is a client-independent programming model used for developing sophisticated user interfaces for web based business applications.

The name WebDynpro , Dynpro means Dynamic Program it is SAP’s Legacy technology for interactive UI’s. It is to Combine High Interactivity (dynamic GUI) and Zero Installation.


Basic Concepts
1. View – is the central logical layout element in the Web Dynpro application. It is responsible for the presentation logic and for the browser layout. Description of a visible screen area, Contains and lays out controls, Defines actions (i.e. relevant input on controls by the user), which trigger event handling.

2. Controller – active part of web Dynpro application, handles the data flow between the model and the view in both directions, performs event handling, Each component has a component controller, Each view has a view controller, Custom controllers may be added for further structuring

3. Model – is the interface to the back end system and is responsible for providing data to the entire application. Represents the data in the backend

4. Component -- Reusable UI program package, Mostly contains views, often uses models, Communicates with other components via component interfaces

5. Application -- Something runnable (from client application, i.e. web browser) Identified by URL Running an application means starting a component, navigating to an initial view in an initial window.

6. Windows -- Single UI unit representing a component’s user Interface/View Composition needed for embedding purposes.

7. Context -- A controller contains a context which holds the data. The data flow between the contexts is referred to as context mapping.


In below diagram. I am try to make you understand that Webdynpro Project what contains ??.





A Webdynpro Project is one or more collection of Component as you can see in the above diagram. And each Component having

1. One Component Controller
2. One Interface Controller
3. One or Many Custom Controller
4. One or Many View Controller
5. One or Many Window Controller.
6. Screen/Views(To insert the standard UI Elements like,Text, Input Field, Button, Table, Graph etc).
7. Message: To show the message in component, we have two option either using Message Class or Assistance Class.
8. We have the option to call RFC FM, BAPI using Service Call in component.
9. Modules is for handling the database operation.
10. And one of the best Tool provided by SAP in Webdynpro is Code Wizard which helps you develop the code. This code wizard will reduce the code writing up to 60%.

And each Controller having one Context which we can refer as Temporary Storage Location of Component. And each Context have Node (used to store the multiple record) and Attribute (to store single value).

To transfer the context value (Node or Attribute ) from one controller to another controller is known as Context Mapping (CM) as you can see in above diagram.

Context Binding : To display the context value (Node or Attribute) on Screen / Webpages using Standard UI Elements. If we have done the Context Mapping from Context to UI Elements.




Hope, I am able to make you understand about what is Webdynpro and some basic terms of Webdynpro.

In next blog, will be about details of Controller And Architecture of Webdynpro.

So do follow my blog, And please don't forget to comment.

And any suggestions are most welcome.

Thanks.