• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Lecture14 abap on line
 

Lecture14 abap on line

on

  • 1,162 views

 

Statistics

Views

Total Views
1,162
Views on SlideShare
1,162
Embed Views
0

Actions

Likes
2
Downloads
148
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Web Dynpro is available both in the Java and the ABAP development environment. WD4A integrated into ECC 6 & Netweaver 4
  • Smart Client is a term used to describe an application environment which: - delivers applications over a web http connection - does not require installation - automatically updates without user action - has the look and feel of desktop applications
  • Requires knowledge of ABAP Objects In ABAP you can define a pop up list activated by the F4 key containing a list of available values. This is called F4 help. Implementing such functionalities in a Web Dynpro Java application either is not feasible or requires much more effort compared to Web Dynpro ABAP. The developer needs not only to write complex Java scenarios to get the desired behavior, but also to extend the ABAP back end to provide the data through remote function calls (RFCs) or Web Services.
  • Hook Methods: Methods Called by the Runtime Each controller has a fixed number of methods that can only be called by the runtime. The application developer cannot specify when these methods are called, but can modify the implementation. The time when these methods are called is predefined. WDDOINIT is called automatically when a controller is initialized for the first time. This method is empty but can be filled with source code: ● Creating instances of help classes ● Initializing controller attributes ● Triggering authorization checks (recommended for help classes) ● Setting initial values of the controller context
  • SAP proposes defining only a maximum of 15 views per component. Exceeding this number will lead to a noticeable performance reduction in your application.
  • A Component Controller’s context keeps data required in the component and shared among multiple views of that component. DB table read in CC and used with view 2 possible that Airline Carrier in view 1 be displayed in view 2. More on Mapping and Data Binding next lecture
  • Example above only has one view so no focus on component controller.
  • SAP recommend you use the following naming conventions for Web Dynpro parts: _WDC_ Web Dynpro component Z_WDC_T335_EX1 _WDA_ Web Dynpro application Z_WDA_T335_EX1 V View name V_DISPLAY_NAME W Window name W_DISPLAY_NAME

Lecture14 abap on line Lecture14 abap on line Presentation Transcript

  • Lecture 14 Web Dynpro for ABAP (WD4A) BCO5647 Applications Programming Techniques (ABAP)
  • Readings & Objectives
    • Readings
    • http://help.sap.com/saphelp_nw04s/helpdata/en/77/3545415ea6f523e10000000a155106/frameset.htm
    • Objectives This lecture will
    • Introduce Web Dynpro for ABAP
    • Describe the advantages of WD4A over other Web development options
    • Examine the Web Dynpro Component & its parts
    • Explain how to build a Web Dynpro application by example
    • Review the concepts of Data Binding, Mapping and Navigation
  • Introduction
      • Up to now user interfaces developed in ABAP were based on “classical” dynpros which were components of ABAP programs and processed by the ABAP runtime environment (dialog programs). The use of these classical dynpros assumed that the SAP GUI had been installed on the computer of every user.
      • ABAP developers have long sought the ability to write professional, Web-based applications without having to learn HTML or JavaScript. At the same time SAP has longed for a solution to bridge the divide between SAP applications written in ABAP and those written specifically for the Web.
      • Because most computers today are equipped with a HTTP-compatible browser, support for this protocol was made as the first step in developing real web capability. SAP provided an initial model for this with the introduction of Business Server Pages (BSP). In the context of BSP, HTML-based interfaces can be created, which can be improved by ABAP coding.
      • Until now ABAP developers wanting to develop Web-based applications were required to learn unfamiliar technology, such as BSPs or Java, and SAP grew to rely on a gateway, such as SAP Internet Transaction Server (ITS), to dynamically covert SAP Dynpro screens to HTML.
      • WD4A finally provides a viable solution to create SAP Web-based Applications. SAP is in the process of migrating its entire product portfolio to Web Dynpro. The first completely Web Dynpro ABAP-based release was SAP’s Supplier Relationship Management (SRM) module.
  • Why is WD4A superior to SAP’s existing Web development options such as BSPs
    • WD4A is based on a Metamodel Concept
      • Web Dynpro for ABAP is based on a metamodel concept. When a Web Dynpro application is developed, the data is stored in tables as metadata.
      • Depending on the rendering technique used by the client, the source code, which is executed at runtime, is generated from the data residing in the metadata tables. With this approach, the application developer doesn't need to consider during design time which client will run the application. The WD4A framework provides adapter modules that generate the client-specific rendering.
      • Providing the availability of such adapters, Web Dynpro ABAP applications are able to run on the Web, mobile devices, smart clients, and so forth.
  • Why is WD4A superior to SAP’s existing Web development options such as BSPs
      • Web Dynpro for ABAP applications can be written by ABAP developers
        • Over the years, SAP customers have trained and educated large numbers of developers and business process analysts in the specifics ABAP. Their huge investment is preserved by letting these experts now write applications based on ABAP that can be run on the Web.
      • Web Dynpro for ABAP applications provide easy access to comprehensive ABAP functionality
        • With Web Dynpro for ABAP, functionalities such as the FI and F4 help systems and T100 messaging are available to be integrated into Web Dynpro for ABAP applications via a few mouse clicks.
  • Why is WD4A superior to SAP’s existing Web development options such as BSPs
      • Web Dynpro for ABAP separates business logic from presentation logic
          • Web Dynpro for ABAP implements the Model-View-Controller paradigm (MVC). The MVC approach breaks programs into 3 areas:
          • The Model area represents the application data, which will be accessed during the running application.
          • The Controller area includes the processing of the data at runtime. Here is where all classes and methods are implemented with which the data will be processed
          • The View area provides the visible part of the application. In this area, the layout of a browser window is implemented and all necessary elements, like images, buttons, or data display elements are attached.
      • The MVC approach is claimed to allow a better understanding of the design and development process, and to lower project cost and future maintenance costs.
      • With WD4A you initially develop applications using a declarative programming approach – you create the layout including the screen elements and the containers providing the data to the screen elements using tools such as the View Editor and Controller Editor.
  • Web Dynpro Component and its parts
      • A Web Dynpro component is the core of a Web Dynpro application.
      • A component can be seen as a modular unit representing a sets of tasks.
      • A component cannot be executed on its own. To run a component, it must be assigned to an Web Dynpro application. A Web Dynpro Application is an entry point into a Web Dynpro component (like a transaction code is to a dialog program) and is the only Web Dynpro entity that can be addressed via a URL.
      • A component can be embedded and used in other components. For example, for repeating subtasks of a business application, such as the creation of an order Or the maintenance of an address, you can create a generic component, which can be embedded into specific application components as a reusable building block.
  • Web Dynpro Component and its parts
      • Controller – Controllers handle data flow and binding. They store the processing logic of the application. The logic is implemented in methods of ABAP Objects on the Application Server.
        • Every view has a dedicated view controller.
        • Every window has a window controller (not shown above).
        • Every component has a component controller.
      • Component Controller
        • Is automatically generated when a new component is created.
        • It is like a global repository where all methods, which are to be visible and accessible to the whole component, are implemented.
        • For example, selection of data from a DB table or the storage of data after user editing.
      • View Controller
        • Performs event handling based on actions invoked in the view.
        • E.g. may contain methods that read current values from input fields and pass them on to processing logic.
      • Controllers perform event handling implemented in event handler methods.
      • Controllers may perform other activities implemented in hook methods, such as WDDOINIT or WDDOMODIFYVIEW
  • Web Dynpro Component and its parts
      • View – a view is a visible area of the UI.
        • A view contains controls, called view elements. View elements are the smallest parts of a view; they contain a graphical, visible area in the client, e.g. buttons, input fields, check boxes etc.
        • Actions are properties of view elements used to trigger events resulting from user operations (pressing a button).
        • An event is always connected to an a handler method, where user input is processed.
        • You can add navigation plugs to a view for navigation between views
      • Window – is a container for all views.
        • In order to use a view in a browser it must first be embedded in a Web Dynpro window.
        • A window, unlike a view, has an interface through which it can be called from outside of a component.
        • You can arrange views in complex screen layouts using a window.
        • The window defines navigation links between views.
        • When you create a Web Dynpro component, a window is created with it.
  • Context and Data Transport
      • Context
        • All data processing in a Web Dynpro application is done via contexts.
        • Each controller has a context.
        • A context is a buffer where processed data is stored and can be prepared for the methods of a controller.
        • A context is always structured in nested nodes and individual attributes.
        • Attributes can represent data elements while nodes are used to group attributes together.
      • A View Controller’s context keeps the data to be presented in the view elements e.g. input fields, tables etc and a binding exists between the view elements properties and the context elements.
      • A Component Controller’s context keeps data required in the component and shared among multiple views of that component.
      • Data transport between controllers is set up by “ mapping ” across contexts. Context mapping allows a context node in one controller to be supplied automatically with data from a corresponding context node in another controller.
      • Data Binding is the means by which data is automatically transported from a view controller's context to a UI element in the view layout.
  • Navigation between Views
      • To define navigation between views, you need to create exit and entry points for each view using outbound and inbound plugs .
      • Once this has been done you can specify the navigation flow using navigation links .
  • Steps in creating a Web Dynpro Application
    • Suppose, you need to create a web application which asks user about his personal data and then saves it into a database. Here are major steps to create a working Web Dynpro application:
      • Create WD component (transaction SE80)
      • Create a view
      • Embed the view into a window (which is created by default).
      • Place required UI controls (input fields, labels, buttons) on the view.
      • Create attributes in the view's controller and bind input fields to those attributes.
      • Create an action for the button in the view controller.
      • In an event handler method for that action (created automatically for each action) write code which reads context attributes (which contain values from input fields) and writes data into database.
      • Create a Web Dynpro Application for this component.
    • Almost all of these steps above are fulfilled with one mouse click and several key strokes, the designer takes care of default values for standard tasks. Some typical coding tasks are also assisted by a code Wizard.
  • Practical Example
      • Background
        • The user interface for this Web Dynpro-based application will consist of only two views and will allow you to switch between them. The context of the component controller and the contexts of the two view controllers are used to accept an input value from the first view, to pass it to the second view and to display it there. The aim of this exercise is to import a short text (such as a name) into the input field of the first view and to display it again in the second view. The exercise avoids the graphical design of the views involved and only uses those UI elements that are required for the logic.
    • 1. Creating and Editing a Component.
    • Create Web Dynpro component ZMYCOMPONENT_xxx with a main window MAIN_WINDOW .
    • The newly created component was automatically equipped with a few elements, for example the component controller was created as well as an initial window.
    • Double-click on the Component Controller object of your new component. The Context tab page of the controller is automatically displayed, and you now have the option of defining a context. Make sure that the Workbench is in change mode.
  • Practical Example
    • Open the context menu of the CONTEXT root node and choose Create  Node .
    • Enter a name for the new node (such as “NODE1“) and confirm the dialog without worrying about the other criteria. The new node automatically appears below the root node, and you can now create an attribute for this node.
    • Open the context menu of the new Context node and choose Create  Attribute .
    • Enter a name for the attribute (such as “MYNAME”) and in the same window, specify the type of the attribute with STRING.
    • Confirm the dialog again without worrying about the other criteria. Save your work.
    • Open the context menu of your component and choose Create  View .
    • Give the first view a name (such as “STARTVIEW”) and confirm the window. As soon as you have saved your work, the Views node is inserted in the hierarchy of the object list below the component, and the STARTVIEW you have just created is stored there.
    • Open the context menu of the Views node and choose Create to add a second view.
    • Enter a name for the second view (such as “RESULTVIEW”) and confirm the creation process again. Then choose Save again. The component you have created has a component controller, in whose context the MYNAME attribute was stored. This attribute is visible for each view of this component and can be changed by all controllers of the component. The component now also contains two views.
  • Practical Example
      • 2. Designing the First View
      • The layout of the first view will be created in this step and a simple action implemented. By clicking a button on the STARTVIEW, the user should be able to trigger navigation to the RESULTVIEW. To achieve this, the view requires an outbound plug. A suitable element must then be added to the layout of the view and connected to the outbound plug using a method call. An additional inbound plug ensures that navigation can be set up from the second to the first view. The layout of the view also needs a field so that it can accept user input.
    • Double-click on the name of your first view in the view node of the object list. This takes you automatically to the Layout tab page of your view. Make sure that the Workbench is in change mode.
    • Open the context menu of the ROOTUIELEMENTECONTAINER and choose Insert Element....
    • Enter a suitable name for the element (such as "LABEL_1") and choose Label from the input help for the type line. Confirm the dialog box.
    • Open the context menu of the ROOTUIELEMENTECONTAINER again and choose Insert Element....
    • Enter a suitable name for the input field (such as "INPUT") and choose InputField from the list of element types. Confirm the dialog box.
    • Select the element of the type Label (LABEL_1) in the element list below the ROOTUIELEMENTECONTAINER . The properties table for this element contains the line labelFor .
    • Select the drop down list for this line and choose the element of the type InputField (INPUT) , which you have just created. The element LABEL_1 is now bound to the input field.
    • Open the context menu of the ROOTUIELEMENTECONTAINER a third time, create a button with a suitable name (such as "BUTTON") in the same way, and save your work.
  • Practical Example
    • The required layout elements of the first view are now available; next you create the two plugs that are required.
    • Switch to the Outbound Plugs tab page and enter the name of the new plug (such as "OUT1") in the table. Save your changes.
    • Now switch to the Inbound Plugs tab page and enter the name of the new plug (such as "IN1") in the table. Save your work again.
    • Now that both the layout elements and the required plugs have been created, all that is missing is the link between the BUTTON button with the OUT1 outbound plug.
    • Switch back to the Layout tab page and select the BUTTON entry in the element hierarchy below the ROOTUIELEMENTECONTAINER . In the table below the hierarchy you have the option of maintaining the properties and linking the selected element.
    • Choose the text property and enter a suitable text (such as "Go!") in the Value row. This text will be displayed on the button later.
    • In the Property table, below the Events header, choose the OnAction row. You must now create an action for this event, which calls the outbound plug of the view when you the BUTTON button is chosen.
    • Press the button on the far right-hand side of this row to start a create dialog for such an action. Enter a name for the new action (such as "GOTOOUT1") and then select the outbound plug via which the view should be exited when you press the BUTTON button. As you have created only a dingle outbound plug for the view, only this one view is available for selection. Save your changes. This automatically creates an ONACTIONGOTOOUT1 method for your new action, which is later called when the BUTTON button is pressed.
    • Double-click the action you created in the Property table to be taken to an editor. The development environment has already generated the call of the outbound plug in the corresponding method, so you do not have to program it yourself here.
    • Save your changes. In this step, on the one hand you have assembled the simple layout of the first view of your application, and on the other hand you have ensured the navigability of the view by creating plugs. Furthermore, you have linked both of these to each other by linking the BUTTON interface element to a navigation call to an outbound plug of the view.
    • WD_THIS is an instance of the current, local controller interface. It is specified by the Web Dynpro framework and does not have to be declared.
  • Practical Example
    • 3. Context Mapping of the First View
      • In step 1 you created the NODE1 node with the MYNAME attribute in the context of the component controller. In this step, this context should first be made accessible to the first view.
      • While staying in the first view, switch to the Context tab page. The context of the STARTVIEW that is still empty is displayed on the left-hand side of the page. The context of the component controller that you have just edited to define mapping is available on the right-hand side.
    • Open the context menu of the root node of the view context (left side of screen) and create a new node.
    • Enter a name for this node (such as "VIEW1"), confirm the window and save your work.
    • Now open the context menu of the new VIEW1 node and choose Define Mapping. A new window now lists all nodes of the component controller context that are available; in the example, this is only the NODE1 node.
  • Practical Example
    • Select the NODE1 node by double-clicking on it. Confirm the dialog box that follows once you have read it. If you now open the VIEW1 node of the view context and the NODE1 node of the context of the component controller, you can see that the MYNAME attribute is now available in both hierarchies. The two contexts are now linked to each other. As soon as the value of the MYNAME attribute changes in the view context, for example because of user input, the new value of the attribute will also be available in the context of the component controller. The same applies conversely: if the value changes in the context of the component controller (for example, if a mapping was defined by an entry in a different view for its context nodes), the attribute is also assigned a new value immediately also in the context of the current view. The MYNAME attribute must now be linked to the input field in the layout of the view.
  • Practical Example
    • 4. Binding the Attribute
      • Once the context of the view has been mapped to the context of the component controller, an interface element of the first view can now be bound to attribute MYNAME .
    • While staying in the first view, switch to the Layout tab page and ensure that the Workbench is in change mode.
    • Select the INPUT element in the hierarchy below the ROOTUIELEMENTECONTAINER .
    • Find the value entry in the properties table and click on the corresponding button in the Binding column on the right-hand side of the table. The context hierarchy of the view is now displayed in a separate window.
    • Double-click on the MYNAME attribute (in this case, the only attribute) to select it. The Value column of the table now contains the MYNAME attribute.
    • Save your changes.
    • The UI element INPUT is now bound to the attribute MYNAME of the view context. The attribute can now be assigned a value by user input. Since mapping was defined between the context of the view and the context of the component controller, the value of the attribute is changed accordingly. It can be made accessible from here to a second view by defining mapping similarly between its view context and the context of the component controller. You now need to structure the second view accordingly.
  • Practical Example
    • 5. Designing the Second View
      • The second view is structured in a similar way to the first view. Only the INPUT element is replaced by an element of type TextView . The procedure below explains the individual steps again.
    • Double-click on the name of your second view in the view node of the object list. The Layout tab page of your view is displayed automatically again. Make sure that the Workbench is in change mode.
    • Open the context menu of the ROOTUIELEMENTCONTAINER and choose Insert Element....
    • Enter a suitable name (such as "TEXTOUTPUT") and choose TextView from the list of element types Confirm the dialog box.
    • Open the context menu of the ROOTUIELEMENTECONTAINER again and create a button with a suitable name (such as “BUTTON2”) in the same way. The required layout elements of the second view are now available; next you create the two plugs that are required.
    • Switch to the Outbound Plugs tab page and enter the name of the new plug (such as “OUT2”) in the table.
    • Switch to the Inbound Plugs tab page and enter the name of the new plug (such as “IN2”) in the table. Save your changes. Now that both the layout elements and the required plugs have been created, all that is missing is the link between the BUTTON2 button and the OUT2 outbound plug.
  • Practical Example
    • Switch back to the Layout tab page and select the BUTTON2 entry in the element hierarchy below the ROOTUIELEMENTECONTAINER . In the table below the hierarchy you have the option of maintaining the properties and linking the selected element.
    • First choose the text property and enter a suitable text (in this case “Back!”, for example) in the Value row.
    • Below the Events header, choose the OnAction row. You have to create another action for the OnAction event here, which calls the outbound plug of the view when the BUTTON2 button is clicked.
    • Enter a name for the action in the dialog box (for example, GOTOOUT2 ), select the only available outbound plug, and confirm your entries.
    • Save your changes.
    • In this step, you have created the layout of the second view of your application, and you have ensured the navigability of the view by creating plugs. Furthermore, you have linked both of these to each other by linking the BUTTON2 interface element to a navigation call to the outbound plug OUT2 of the view.
    • You now have to maintain a context for the second view as well.
  • Practical Example
    • 6. Maintaining the Context of the Second View
      • Just like in step 3, the context of the component controller is now made accessible to the context of the second view. A new node is created again in the view context and mapping is defined between this new node and the NODE1 node of the component controller context. The attribute of the view context is then bound to the TEXTOUTPUT layout element, just like in step 4.
    • While staying in your second view, switch to the Context tab page and ensure that the Workbench is in change mode.
    • Open the context menu of the root node of the view context and create a new node.
    • Enter a name for this node (such as “VIEW2”), confirm the dialog and save your work.
    • Now open the context menu of the new VIEW2 node and choose Define Mapping .
    • From the context of the component controller, select the NODE1 node by double-clicking on it.
    • In this way, the MYNAME attribute is ready in the context of the second view to be bound to a layout element.
  • Practical Example
    • Switch to the Layout tab page.
    • Select the TEXTOUTPUT element in the hierarchy below the ROOTUIELEMENTECONTAINER .
    • Find the text entry in the properties table and click again on the corresponding button in the Binding column on the right-hand side of the table.
    • Select the MYNAME attribute again by double-clicking on it.
    • Save your changes.
    • Your component now contains two views, whose contexts are bound to each other using the context of the component controller. As a result, the work on the layout or the contexts of your component is finished.
  • Practical Example
    • 7. Embedding the Views in a Window
      • Each view is a self-contained unit and does not contain any information about navigation to other views. To be able to define such navigation, and to make the views accessible for users, they have to be embedded in a window.
    • Open the Windows node in the object list hierarchy on the left-hand side of the Workbench.
    • Double-click on the MAIN_WINDOW window. The structure of your window is now displayed in the Editor on the right-hand side. It is still empty since you have not yet embedded any views.
    • In the structure of the window, open the context menu for the MAIN_WINDOW node and choose Embed View . Make sure that the Workbench is in change mode. In the following window, specify the name of the view that should be embedded. The input help for the corresponding field displays all views for the current component.
    • Select the STARTVIEW by double-clicking on it and confirm the window.
    • Repeat the process to embed the second view in the window.
    • In the structure of the window, open the context menu for the STARTVIEW node and choose Set as Default .
    • Save your changes.
    • The MAIN_WINDOW window now contains the two views, which are bound to each other. The STARTVIEW was set as the default view, which means that it is always called first when the window is called.
  • Practical Example
    • 8. Defining the Navigation
      • When you designed the two views, you created an inbound and an outbound plug for your views. You have already bound the button actions to the relevant outbound plug. You must now determine to which inbound plug an outbound plug binds itself when it is called. This navigation is declared in the view hierarchy of the respective window.
    • While remaining in the structure view of the MAIN_WINDOW window, open the STARTVIEW node in the structure of your window. Below this node you will find two additional nodes, one for each plug in this view.
    • Open the context menu of the OUT1 outbound plug and choose Create Navigation Link . In the following window, specify the required target view (you can use the input help for all the views that are available in this window).
    • Select the RESULTVIEW by double-clicking on it and confirm the dialog. After you have selected the target view, the only inbound plug IN2 that is available for this view was automatically selected for the navigation. If a view has several inbound plugs, you will have to make another decision again here.
    • Save your changes.
    • Now open the RESULTVIEW node and repeat the whole operation to create a navigation link from the OUT2 outbound plug of the second view to the IN1 inbound plug of the first view.
  • Practical Example
    • 9. Creating and Testing a Web Dynpro Application
      • In this last step you have to create a Web Dynpro application so that the window can be called using a URL. A Web Dynpro application is linked uniquely to a URL with which it can be started in the browser. The Web Dynpro application does not contain any information about the inner structure of the window behind it. For every window of a component, a uniquely assigned interface with the same name is generated when it is created: the interface view. The window is linked with the Web Dynpro application using this interface view.
    • Open the context menu for your Web Dynpro component in the object list hierarchy and choose Create  Web Dynpro Application .
    • Accept the default name or give your application an alternative name and confirm the dialog. A list of the properties of your new application is displayed on the right-hand side.
    • Save your changes.
    • Activate all parts of your component by choosing the corresponding entry in the context menu of the ZMYCOMPONENT component .
    • Open the context menu of the Web Dynpro application you have just created and choose Test .
    • The Workbench ensures that a browser is started and that the URL that was generated for your application is called. You may need to log on to your system again using the browser.
    • An interface element is displayed in the top-left corner of your browser, and there is a button to the right of it. Once you have entered a text and clicked on the button, you will be taken to your second view. The text that you entered appears there together with the button for backwards navigation.
    • The simple Web Dynpro application with the equally simple context example is complete