an extended web dynpro for abap application

An Extended Web Dynpro ABAP Application

NetWeaver 2004s Release

SAP Online Help 3/30/2006

Copyright © Copyright 2004 SAP AG. All rights reserved. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice. Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors. Microsoft®, WINDOWS®, NT®, EXCEL®, Word®, PowerPoint® and SQL Server® are registered trademarks of Microsoft Corporation. IBM®, DB2®, DB2 Universal Database, OS/2®, Parallel Sysplex®, MVS/ESA, AIX®, S/390®, AS/400®, OS/390®, OS/400®, iSeries, pSeries, xSeries, zSeries, z/OS, AFP, Intelligent Miner, WebSphere®, Netfinity®, Tivoli®, Informix and Informix® Dynamic ServerTM are trademarks of IBM Corporation in USA and/or other countries. ORACLE® is a registered trademark of ORACLE Corporation. UNIX®, X/Open®, OSF/1®, and Motif® are registered trademarks of the Open Group. Citrix®, the Citrix logo, ICA®, Program Neighborhood®, MetaFrame®, WinFrame®, VideoFrame®, MultiWin® and other Citrix product names referenced herein are trademarks of Citrix Systems, Inc. HTML, DHTML, XML, XHTML are trademarks or registered trademarks of W3C®, World Wide Web Consortium, Massachusetts Institute of Technology. JAVA® is a registered trademark of Sun Microsystems, Inc. JAVASCRIPT® is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape. MarketSet and Enterprise Buyer are jointly owned trademarks of SAP AG and Commerce One. SAP, SAP Logo, R/2, R/3, mySAP, mySAP.com and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and in several other countries all over the world. All other product and service names mentioned are trademarks of their respective companies. Data contained in this document serves informational purposes only. National product specifications may vary.

2


Icons in Text

Icon Meaning

Caution

Example

Note

Recommendation

Syntax

More icons are used in the SAP Library documentation to help you identify different types of information. For more information, see → Help on Help General Information Classes and Information Classes for Business Information Warehouse on the first page of any version of the SAP Library.

Typographic Conventions

Format Description

Words or characters that appear on the screen. These include field names, screen titles, pushbutton labels, menu names, menu paths, and menu options.

Sample text

Cross-references to other documentation

Emphasized words or phrases in the body text, titles of graphics and tables.

Sample text

SAMPLE TEXT Names of system objects. These include report names, program names, transaction codes, table names, and key concepts of a programming language surrounded by body text - for example, SELECT and INCLUDE.

Sample text Output on the screen. This includes file and directory names and their paths, messages, source code, names of variables and parameters as well as names of installation, upgrade and database tools.

Sample text Exact user entry. This includes words or characters in the documentation that the user is instructed to enter on the screen.

<Example text> Variable user entry. The user must replace the words and characters in brackets with appropriate entries before entering the text in the system.

Keys on the keyboard, for example, F2 or ENTER. SAMPLE TEXT

3


.......................................................... 5 Creating an Extended Web Dynpro ABAP Application

..................................................................................................................... 6 Quiz Application

...................................................................................................... 10 Designing a View Model

............................................................................................... 12 Defining a View Composition

................................................................................... 17 Implementing the View Composition

..................................................................................................... 18 Designing a View Layout

.............................................................................................................. 25 Controller Contexts

.......................................................................................................... 32 Defining Data Binding

............................................................................................................ 34 Define Action Events

...................................................................... 37 Implementation of Individual Coding Extracts

............................................................................................ 42 Embedding Views in a Window

........................................................................................... 45 Creating Navigation Transitions

........................................................................................ 48 Debugging in Web Dynpro ABAP

4


Creating an Extended Web Dynpro ABAP Application Task

o Creating a Web Dynpro application with multiple views and a navigation structure

o Working with event handlers (action event handlers, inbound plug event handlers) that you declare yourself

o Reading contents from the property resource bundles and storing them in a Web Dynpro context (value nodes, value node elements)

o Dividing data between view controllers and component controllers using context mapping

o Manipulating UI element attributes at runtime using data binding

Prerequisites Systems, Installations, and Authorizations

o Access to SAP NetWeaver (release NW 2004s or higher)

o You have authorization for transaction SE80 (development environment).

Knowledge o Experience with the ABAP programming language and the ABAP development

environment

o Basic knowledge about programming Web Dynpro applications

5


Quiz Application The extended Web Dynpro application is a short quiz on subjects related to Web Dynpro. The first page of this quiz application should look like this:

A single view then appears that contains a welcome text and a pushbutton to start the quiz. The quiz contains seven questions and the corresponding answers. The first question is displayed in a separate view when you choose Start Quiz. Next to the question, another view with a question mark appears.

6


When the user chooses Show Answer, the question mark disappears and the answer is displayed.

7


When an answer is displayed, the button Show Answer is visible but not active. The subsequent question is displayed when the user chooses Next Question. The Next Question button does not appear when the user reaches the last question.

When the user chooses End Quiz in the answer view, the system terminates the quiz. The two views Question and Answer disappear. In the upper view, a short goodbye text and a new Exit Quiz button are displayed. This button terminates the quiz application and the system navigates to an Internet page. You can, however, branch to the first question in the quiz by choosing the Start Quiz pushbutton.

8


9


Designing a View Model ...

Defining the Basic Structure of the Application In this example, the user interface is to consist of four views:

Welcome Question QuestionMark Answer

• Welcome: Displays a message when starting or ending the application (“welcome” and “goodbye” messages). Start or exit point for the quiz.

• Question: Displays a quiz question from which you can navigate to the next question or display the corresponding answer.

• QuestionMark: This area is used to display an unanswered question.

• Answer: Displays an answer for current quiz question. Option to end the quiz by moving on to the “goodbye” message in the Welcome view.

In a Web Dynpro application, the views contain the actual user interface elements. The following graphic shows how to reach the individual views and specifies the basic navigation structure.

Welcome

Question QuestionMark

Answer

10


Layout of the Web Dynpro Window A Web Dynpro component is represented internally by a Web Dynpro window. Web Dynpro windows consist of individual views that are held together using a suitable medium, in this case, the main view (with the matrix layout).

View Area Left

View Area Top

View Area Right

Main View

Window

colspan = 1 colspan = 1

colspan = 2

11


Defining a View Composition View Composition Without Navigation Assign the four views Welcome, Question, QuestionMark, and Answer to the three view areas.

At design time, you can model the state of a view area that is empty at runtime using specific empty views. These empty views do not contain UI elements, but can be used to define the view composition.

At runtime, only one view can be displayed within a view area. The default view, which is initially displayed, is the Welcome view in the top view area and the default view for the remaining two view areas is the empty view.

The assignment of views and empty views to the three view areas top, left, and right specifies all possible view assemblies – that is, the possible combinations of views that can be displayed in the window at the same time. In this example, the following view assembly is the default view assembly:

View area top: Welcome, View area left: Empty view, View area right: Empty view

By specifying the possible views in a view area, you determine in this example that there is a maximum of six different view assemblies at runtime.

12


View Composition with Navigation The view composition comprises all view assemblies that can be accessed by navigation. You can change from one view assembly to another by specifying one or more navigation links.

A navigation link is the association between an outbound plug belonging to view A and an inbound plug of the target view B. You can assign multiple navigation links to one individual outbound plug. An outbound plug defines an event that can trigger a change of one view assembly to another. An inbound plug defines the starting point of a view for any number of navigation links and can be considered an onLoad event or an onDisplay event. You can use the corresponding event handling methods in the view controller to make state changes in the content of a view.

The following graphic illustrates the desired view composition:

The Welcome view is associated with the view and view. The Question QuestionMark view is associated with the view and view, whereas the Question Answer QuestionMark

view is associated with the view and the two empty views. Answer Welcome

13


This view composition enables you to access three of the six possible view assemblies using navigation links.

View Area Top View Area Left View Area Right

Welcome Empty view Empty view Welcome Question QuestionMark

Welcome Question Answer

View AreaTop

View AreaTop

View AreaTop

Welcome View Welcome View Welcome View

Question View Question ViewQuestionmark

ViewEmpty View

View Area Left View Area Right

Empty ViewView Area Left View Area LeftView Area Right View Area Right

Answer View

3 - Display Answer1 - Start/End Application 2 - Display Question

14


View Area Left

View AreaTop

View Area Right

View Welcome

Empty View

Empty View

View Area Left

View AreaTop

View Welcome

View Area Right

View Question

View QuestionMark

1 - Start Application 2 - Display First Question

View Area Left

View AreaTop

View Welcome

View Area Right

View Question View Answer

3 - Display Answer

View Area Left

View Area Top

View Welcome

View Area Right

View Question

View QuestionMark

4 - Display Next Question

View Area Left

View AreaTop

View Welcome

View Area Right

View Answer

Empty View

Empty View

5 - End Quiz

View Area Left

View AreaTop

View Welcome

View Area Right

Empty View

Empty View

Exit Quiz Internet page

A Web Dynpro application terminates when, in a view, the user triggers an outbound plug that is specified as an exit plug. The navigation link of this exit plug does not have a target view. In this example, the exit plug contains the address of an internet page (for example, www.sap.com), which is called after the Web Dynpro application terminates.

The change from the first to the second view assembly is established by triggering the startQuizOut outbound plug of the Welcome view. This view contains two navigation links to the views Questions and QuestionMark. Before the target views Question and

15

http://www.sap.com/


QuestionMark are displayed, the event handling routines of the inbound plugs are executed. displayQuestion displayQuestionMark and

View Area Left

View AreaTop

View Welcome

View Area Right

View Question

View QuestionMark

2 - Display First Question

Inbound PlugdisplayQuestionIn

Outbound PlugstartQuizOut

Inbound PlugdisplayQuestionMarkIn

16


Implementing the View Composition Use By defining the view composition, you specify all view assemblies of a Web Dynpro application that can be accessed at runtime by navigation. The view composition of this example application looks like this:

Procedure To compose the view, you perform the following steps:

Welcome• Insert the views: Main, , Question, QuestionMark Answer, and

• Insert two empty views

• Insert inbound plugs and outbound plugs

• Embed the main view in the matrix layout of the window that belongs to the Web Dynpro component

• Insert the exit plug for terminating a Web Dynpro application

• Insert navigation links for defining view assembly changes

17


Designing a View Layout Choose the ABAP development environment (transaction SE80) and generate a new Web Dynpro component. The individual views are then generated in this component in sequence.

Some views also contain graphic elements that have to be obtained from the sample application DEMO_WDA_QUIZ. To do this, you expand the DEMO_WDA_QUIZ application and open the MIMES folder. Select the required MIME object und click on the object with the secondary mouse button. Choose Upload/Download->Download .

MIME Objects File Name Image File Name Image

a.gif q.gif

ICON_QUESTION questionmark.jpg

ICON_DISPLAY_TEXT ICON_SYSTEM_END

ICON_SYSTEM_CANCLE

ICON_SYSTEM_OKAY

Welcome View Generate a new view by clicking on the Web Dynpro component you created with the secondary mouse button, and then choose Create->Web Dynpro View. Insert the UI elements of the table into the Welcome view. Create the UI elements according to their order in the table. The pushbuttons in the Welcome view have animated graphics. The icons can be found in SAP’s standard icon set.

View Layout in the View Designer of the Web Dynpro Tools

18


Container RootUIElementContainer of the type TransparentContainer

MatrixLayoutProperties of Group → Layout

100% Properties of Group → Width

Group WelcomeViewGroup of type Group in the UI element RootUIElementContainer

sapcolorProperties of Group → Design


MatrixHeadDataProperties of Group → Layout

100% Properties of Group → Width Property

1 Layout Data → colSpan

Caption_1Header of type Caption in the UI element WelcomeViewGroup

Web Dynpro Quiz →Properties of Caption Text

TextMessageText of type TextView in the UI element WelcomeViewGroup

MatrixHeadDataProperties of TextView → Layout Data

emphasizedProperties of TextView → Design

centerProperties of TextView → hAlign

blockProperties of TextView → Layout

will be mapped to the contextProperties of TextView → text

2 LayoutData → colSpan

centerLayoutData → hAlign

Pushbutton StartQuizButton of the type Button in the UI element WelcomeViewGroup

MatrixHeadDataProperties of TextView → Layout Data

Start Quiz Properties of Button → text

ICON_SYSTEM_OKAY Properties of Button → imageSource


50% LayoutData → width

Pushbutton ExitButton of the type Button in the UI element WelcomeViewGroup

MatrixDataProperties of TextView → Layout Data

Exit Quiz Properties of Button → text

ICON_SYSTEM_END Properties of Button → imageSource


50% LayoutData → width

19


Question View

The Question view contains animated graphics, as well as the text field, a question counter, and two pushbuttons. The icon (q.gif) has to be loaded into the Web Dynpro component as a MIME object. To do this, click on the Web Dynpro Component with the secondary mouse button in the tree display for the repository browser Create->Mime-Object->Import and load the object from your local PC into the Web Dynpro component.

To generate a new view, click on the Web Dynpro component with the secondary mouse button and choose Create->View.


Property Value




Group QuestionViewGroup of type in the UI element Group RootUIElementContainer

MatrixLayout Properties of Group → Layout

MatrixHeadDataProperties of Group → Layout Data

sapcolor Properties of Group → Design


1 Layout → colcount

100% Layout Data → height

QuestionViewGroup_headerCaption of type in the UI element QuestionViewGroupCaption

Question View Properties of Caption → text

Image QImage of the type Image in the UI element QuestionViewGroup

MatrixHeadDataProperties → Layout Data

q.gif Properties of Image → source

This is the image for the questionProperties → tooltip


QuestionTextText of type TextView in the UI element QuestionViewGroup

20


emphasizedProperties of TextView → design

will be mapped to the context Properties of TextView → text

enabledProperties of TextView → wrapping


middleLayoutData → vAlign

QuestionCounterText of type TextView in the UI element QuestionViewGroup




Container TransparentButtonContainer of the type TransparentContainer in the UI element QuestionViewGroup

MatrixLayoutProperties → layout

MatrixDataProperties → Layout Data

Pushbutton ShowAnswerButton of the type Button in the UI element TransparentButtonContainer


forcedRight Layout Data → halign

will be mapped to the context Properties of Button → enabled

Show Answer Properties of Button → text

ICON_DISPLAY_TEXT Properties of Button → imageSource

Pushbutton NextQuestionButton of the type Button in the UI element TransparentButtonContainer


forcedLeft Layout Data → halign

ICON_QUESTION Properties of Button → imageSource

will be mapped to the contextProperties of Button → visible

21


Answer View


Property Value




Group AnswerViewGroup of type Group in the UI element RootUIElementContainer


MatrixHeadDataProperties of Group → Layout Data

sapcolorProperties of Group → Design


100% Properties of Group → height

1 Layout → colCount

AnswerViewGroupCaption _header of type Caption in the UI element AnswerViewGroup

View Answer Properties of Caption → text

This is the image for the answer Properties → tooltip

Image AImage of type Image in the UI element AnswerViewGroup

a.gif Properties of Image → source

MatrixHeadDataProperties of Image → Layout Data

AnswerTextText of type TextView in the UI element AnswerViewGroup

MatrixDataProperties of TextView → Layout Data



enabledProperties of TextView → wrapping



Pushbutton EndQuizButton of the type Button in the UI element AnswerViewGroup

MatrixHeadDataProperties of Button → Layout Data

22


End Quiz Properties of Button → text

ICON_SYSTEM_CANCLE Properties of Button → imageSource


QuestionMark View

Generate a new view QuestionMark and add the following UI elements:


Property Value



100% LayoutData → widtht

Image QuestionMarkImage of type Image in the UI element RootUIElementContainer

MatrixHeadDataProperties → layout

questionmark.jpg Properties → source

This is the image for the questionmarkProperties → tooltip


100%LayoutData → width

Main View

Generate a new Main view.


Property Value



disabledLayout Data → strechedVertically

23


Element TOP of type ViewContainerUIElement in RootUIElementContainer


2LayoutData → colspan

centerLayoutData → halign


Element LEFT of type ViewContainerUIElement in RootUIElementContainer



beginOfLineLayoutData → halign



Element RIGHT of type ViewContainerUIElement in RootUIElementContainer



beginOfLineLayoutData → halign



24


Controller Contexts Use Within a Web Dynpro component, controller contexts are used as storage locations for data with different structures. Each view controller contains its own context. At a superordinate level, the application development can store additional information in the controller context of a Web Dynpro component or in the context of the custom controller.

Controller contexts have a tree structure consisting of context nodes, node elements with different cardinalities, and context attributes of different data types. However, you must differentiate between the abstract level of the context at design time and its concrete definition at runtime.

Context mapping between context nodes allows the shared use of context data. To do this, the context data is stored in the component context, for example, and made available for write and read access using the context mapping definition in the view context and a reference semantics.

Data binding between the UI element properties and data that is stored in the controller context of a view enables you to easily display this data on the user interface. Note that this purely declarative data transfer from the controller layer to the view layer of an application is possible without any programmatic effort.

Activities Contexts can be used for the following functions:

• Context design: You define the required context structures in the controllers of a view and in the component controller. This includes value nodes and value attributes, which represent layout-specific data, such as the visibility of a UI element, and pure business data, such as question-answer pairs.

• Context mapping: You must define source and target of the mapping. In this example, the data in both the Question and Answer views is used. The controller context of a Web Dynpro component (more precisely, a value node contained in it) serves as the data source. In the controller context of the Question and Answer views, you can then define value nodes as the corresponding data drains using context mapping.

• Data binding: You must connect context-dependent properties of individual UI elements with the value attributes of the corresponding controller contexts of a view using data binding.

Defining Controller Contexts When defining a controller context, you must first specify which data is variable in your Web Dynpro quiz application and therefore must be mapped to an appropriate representation in a corresponding controller context.

It is helpful to use the following three categories: ...

1. View-owned business data: This includes data that is only relevant within a single view. For example, the short text message that is displayed in the Welcome view and customized at the start and before the termination of the application.

2. View-owned layout data: Data that is used for customizing UI element layouts. For example, the value of the visibility property of a button UI element. In this way, the layout of UI elements can be controlled at runtime using data binding of UI element properties to value attributes in the view context.

25


3. Cross-view business data: If you want to make context data available for several controllers, you must define a corresponding data source by defining a value attribute in the controller context of the component. After defining a value attribute in the controller context of a view, this attribute can be mapped to the attribute in the controller context of the component, which turns the attribute into a data drain.

For example, the question-answer text pairs in the quiz example application must be stored in the controller context of the component, so they are available both in the Question view context and the Answer view context.

Defining Controller Contexts The question-answer pairs to be displayed in the Question and Answer views must be stored in a superordinate controller context where they can be made available in the controller context of a view using context mapping. The component controller, which is available any time, is such a superordinate controller along with the custom controllers that must be defined by the application development itself. We recommend that, in the controller context of a Web Dynpro component, you define a context structure that is appropriate for a set of the question-answer text pairs. In this case, you do not need to create additional custom controllers.

At runtime, a collection of value node elements represents the set of available question-answer pairs. The type of these value node elements is defined at design time using the set of context elements that belongs to a value node (with the cardinality 0..n or 1 ..n). These context elements can be value attributes or value nodes, for example. The declarative structure of the controller context has the following appearance at design time:

QuizData: Value node with the cardinality 1..n

Question: Value attribute of the type string for storing a question text

Answer: Value attribute of the type string for storing an answer text

Counter: Value attribute of the type string for storing a counter, such as "1/3"

At runtime, the QuizData value node has then a reference to the collection of node elements of the QuizData type each of them with the attributes question, answer, and counter.

The following diagram illustrates the relationships:

To define the context, change into the controller context of the Web Dynpro application by double clicking on the component controller.

26


Create a new node by clicking on the context node with the secondary mouse button and choosing Create ->Node.

Fill the dialog box in as shown above and confirm your entries. The node for the attribute has now been created. Add the attributes Question, Answer and Counter with the String data type to the node in accordance with the definition given above. The context is filled using the supply function ’SUPPLY_QUIZDATA’, which must now be implemented. The and Question Answer texts can all be found in the OTR (Online Text Repository) and are read using a separate class.

You now have to implement the ’SUPPLY_QUIZDATA’ method. To do this, choose the Methods tab page and click on Generated Supply Function. The supply function coding looks like this: method SUPPLY_QUIZDATA . method SUPPLY_QUIZDATA . data: Itab_Quizdata type IF_COMPONENTCONTROLLER=>Elements_Quizdata, Stru_Quizdata type IF_COMPONENTCONTROLLER=>Element_Quizdata, q_count type char1, otr_alias type string, aux_count type char3. q_count = 0. do 7 times. add 1 to q_count. concatenate 'SWDP_DEMO_TUTORIALS/Q' q_count into otr_alias. STRU_QUIZDATA-question = CL_WD_UTILITIES=>GET_OTR_TEXT_BY_ALIAS( otr_alias ). concatenate 'SWDP_DEMO_TUTORIALS/Q' q_count into otr_alias. STRU_QUIZDATA-answer = CL_WD_UTILITIES=>GET_OTR_TEXT_BY_ALIAS( otr_alias ). move ' /7' to aux_count. aux_count(1) = q_count. stru_quizdata-counter = aux_count.

27


insert stru_quizdata into table itab_quizdata. enddo. Node->Bind_Table( New_Items = Itab_Quizdata Set_Initial_Elements = Abap_True ). endmethod.

Seven question/answer pairs are stored in the OTR (SWDP_DEMO_TUTORIALS/Q1..7 and SWDP_DEMO_TUTORIALS/A1..7). The counter information is generated in the program and the information is then transferred to the controller context.

Define the Controller Context View In addition to mapping the controller context to the context view, you have to define view-specific transaction and layout data. To do this, you proceed as described above: Call the context for the required view by double clicking on the name of the view and choosing the Context tab page.

Welcome View Context

On the right side, you can see the context of the previously defined component controller. On the left side, you can see the context view of the view selected. You now add two attributes to this context node:

View Value Attribute Name Data Type

TextMessage StringWelcome

ExitButtonVisible WDUI_Visibility

Click on the context node of the view with the right mouse button and choose Create -> Attribute. Enter the name and data type of the attribute and confirm your entries.

Question View Context

The context of the component controller must be mapped into this view because the texts for the questions have to be displayed here. To do this, click on the node QUIZDATA in the component controller with the secondary mouse button and move this node to the root node of the context view. The context of the component controller has now been mapped to the

28


context of the component. Two further local attributes are required to determine when the pushbuttons are ready for input.

View Value Attribute Name Data Type

NextButtonVisibility WDUI_VisibilityQUESTION

AnswerButtonEnabled WDY_Boolean

Once the controller context has been mapped and the two attributes have been added, the context of the question view appears as below:

Only the information from the quiz questions and counter is shown on the question view, and not the quiz answers. As a result, the answers do not have to be included in the QUIZDATA node. Delete the Answer element from the QUIZDATA node in the context view.

Answer View Context

With this view, as with the Question View, the context of the component controller has to be mapped to the root node of the view context. Proceed as you did with the Question view. Since no data from the data or question is required in the Answer view, the elements from Counter and Question from the context node QuizData in the view context can be deleted.

29


30


You have learned how to define the controller context of a view as an information storage and how to use the controller context of a Web Dynpro component to access shared data sources using context mapping. In the following section, individual variable UI element properties are bound to the data sources stored in the controller context of the view.

View Layout

Question View

?TextView

View Layout

Answer ViewTextView

DataBinding

DataBinding

ContextMapping

ContextMapping

Context of Question Views

Root Node1..1

Qu1..n izData

Question

Counter

Root Node1..1

QuizData1..n

Answer

Context of Answer Views

Context of Quiz Compo-Nent Controllers

Root Node1..1

Qu1..n izData

Question

Counter

Answer

Text View

31


Defining Data Binding Data binding stands for the connection of a UI element property as a data drain with a data source that is stored in the controller context. A context path must be declared for this connection.

The previously described procedures - for example, the definition of the individual context structures and the creation of different UI element properties - have made all necessary preparations to allow you to declare several data bindings in an easy way.

Procedure

The procedure for the data binding of a single UI element property is as follows:

1. Select the layout tab of the View Designer

2. Select the UI element you want

3. Select the property in the Properties tab

4. Choose the button at the right edge of the Value column

5. Select the value attribute to which the property is to be bound in the subsequent dialog box

6. Confirm the selection and exit the dialog box choosing OK

The element TextMessage from the view context was connected to the Textmessage text field.

32


WelcomeUse the description above to define the following data bindings in the three views , Question Answer, and :

UI Elements of the View Property Context Element

Welcome View

TextMessage Text TextMessage

ExitButton Properties of Button - visible ExitButtonVisibility

Question View

QuestionCounter Properties of TextView - text Counter

AnwerButtonEnabled Properties of Button - enable NextButtonEnabled

NextQuestionButton Properties of Button - visible NextButtonVisibility

QuestionText Properties of TextView - text Question

View Answer

AnswerText Properties of TextView - text Answer

33


Define Action Events You add action events to the Actions tab in the View Designer by entering the name of the action and a description in the table. The system automatically creates an event handler with the name OnAction<action event>. This can be used later to implement the method.

The action event must now be connected to the corresponding UI element. To do this, go into the layout of the view, choose Exitbutton and enter the name of the action event under Events.

Use the following table for naming the action events for the OnAction property of the five buttons:

View UI Element Action Event to Be Assigned

StartQuizButton StartPressedWelcome

ExitButton ExitPressed

ShowAnswerButton ShowAnswerQuestion

NextQuestionButton NextQuestion

Answer EndQuizButton EndQuizPressed

34


Define Plugs Plugs have to created to navigate between the views. Plugs are the entry and exit points for the individual views. On the screenshot below you can clearly see the outbound plug STARTQUIZOUT for the WELCOME view . This plug is connected to the inbound plug for the QUESTION and QUESTIONMARK views by the chain icon. In this way, when the outbound plug is triggered, the inbound plugs for the two views are also activated.

You use the outbound plug TO_SOMEWHERE to leave the Web Dynpro application. It has, therefore, a separate function. For every view (except the Main view), there is an inbound plug (Display<viewName>In) and the following outbound plugs:

View Name of the Action Event Text Triggering Outbound Name Plug

ExitPressed Exit Quiz To_somewhereWelcome

StartPressed Start Quiz StartQuizOut

ShowAnswerPressed Show Answer ShowAnswerOutQuestion

ShowNextQuestionPressed Next Question ShowQuestionMarkOut

Answer EndQuizPressed End Quiz EndQuizOut

To create the plugs, choose the tab page Inbound- or Outbound Plugs in the respective view, and enter a name for the plug as well as a description. The relevant event handler is then automatically generated. For the outbound plug TO_SOMEWHERE, switch to the window for the component, choose the Outbound Plugs tab page and create a plug as shown in the

35


following graphic. The outbound plug always has the parameter URL, to which the new address must be written.

In the following example, the plug DISPLAYANSWERIN from the ANSWER view is used.

36


Implementation of Individual Coding Extracts Welcome View This view has a routine for the inbound plug HANDLEDISPLAYWELCOMEIN, an initialization routine WDDOINIT. Two methods for the action event are also provided.

The method WDDOINIT is run once when the view is initialized. method WDDOINIT . data: welcome_text type string. welcome_text = CL_WD_UTILITIES=>GET_OTR_TEXT_BY_ALIAS(

‘SWDP_DEMO_TUTORIALS/WELCOME_TEXT' ). wd_context->set_attribute( exporting name = 'TEXTMESSAGE' value = welcome_text ). wd_context->set_attribute( exporting name = 'EXITBUTTONVISIBLE' value =

If_wdl_core=>visibility_blank ). endmethod.

First of all, the welcome text is read from the OTR and the context element TEXTMESSAGE is loaded. The visibility attribute for the EXIT-Button is switched to invisible.

37


The views ANSWER and WELCOME are linked together. The method HANDLEDISPLAYWELCOMEIN is executed when the outbound plug ENDQUIZOUT from the ANSWER view is activated. method HANDLEDISPLAYWELCOMEIN . data: good_bye_text type string. GOOD_BYE_TEXT =

CL_WD_UTILITIES=>GET_OTR_TEXT_BY_ALIAS( 'SWDP_DEMO_TUTORIALS/GOOD_BYE_TEXT' ).

wd_context->set_attribute( exporting name = 'TEXTMESSAGE' value =

good_bye_text ). wd_context->set_attribute( exporting name = 'EXITBUTTONVISIBLE' value =

if_wdl_core=>visibility_visible ). endmethod.

First of all, the goodbye text is read from the OTR and the context element TEXTMESSAGE is loaded. The visibility attribute for the EXIT-Button is then switched to visible.

Event Handler Name of the Action Event Text

StartPressed Start Quiz OnActionStartPressed

ExitPressed Exit Quiz OnActionExitPressed

This method is called when the Start Quiz pushbutton is chosen. method ONACTIONSTARTPRESSED . data: welcome_text type string. welcome_text =

CL_WD_UTILITIES=>GET_OTR_TEXT_BY_ALIAS( 'SWDP_DEMO_TUTORIALS/WELCOME_TEXT' ).

wd_context->set_attribute( exporting name = 'TEXTMESSAGE' value =

welcome_text ). wd_This->Fire_STARTQUIZOUT_Plg( ). endmethod.

This method is called when the Exit Quiz pushbutton is chosen. By choosing this button, you leave the Web Dynpro application. However, before you do this, you must specify the name of the window and the controller in the WELCOME view. Choose the WELCOME view and choose the Properties tab page. Make the required entries, as shown on the following screenshot.

38


Using the interface of the window, an object of the controller is instantiated, which can then be used to transfer the new URL to the exit plug. method ONACTIONEXITPRESSED . data: l_ref_quiz type ref to ig_<Name des Windows> . (demo_wda_quiz) l_ref_quiz = wd_this->get_<Name des Kontrollers>_ctr( ). (demo_wda_quiz) l_ref_quiz->fire_to_somewhere_plg( url = 'http://www.sap.com' ). Endmethod.

The URL is transferred to the TO_SOMEWHERE outbound plug.

Question View This view has a HANDLEDISPLAYQUESTIONIN routine. Two methods for the action event are also provided.

The method HANDLEDISPLAYQUESTIONIN is executed every time the user navigates to the view. method HANDLEDISPLAYQUESTIONIN . data: Node_Quizdata type ref to If_Wd_Context_Node, Elem_Quizdata type ref to If_Wd_Context_Element, Stru_Quizdata type If_Question=>Element_Quizdata, Item_COUNTER like Stru_Quizdata-COUNTER. Node_Quizdata = wd_Context->get_Child_Node( Name = `QUIZDATA` ). Elem_Quizdata = Node_Quizdata->get_Element( ). Elem_Quizdata->get_Attribute( exporting Name = `COUNTER` importing Value = Item_Counter ). if item_counter = '7/7'. wd_context->set_attribute( exporting name = 'NEXTBUTTONVISIBILITY'

value = if_wdl_core=>visibility_blank ). else.

39


wd_context->set_attribute( exporting name = 'NEXTBUTTONVISIBILITY' value = if_wdl_core=>visibility_visible ).

endif. wd_context->set_attribute( exporting name = 'SHOWANSWERBUTTONENABLED'

value = abap_true ). endmethod.

First of all, the counter reading is read from the controller context. Depending on the counter reading, the visibility attribute for the Next Question button is then switched to visible.


NextQuestion Next Question OnActionNextQuestion

ShowAnswer Show Answer OnActionShowAnswer

method ONACTIONNEXTQUESTION . data: node type ref to if_wd_context_node. node = wd_context->get_child_node( 'QUIZDATA' ). node->move_next( ). wd_This->Fire_SHOWQUESTIONMARKOUT_Plg( ). endmethod.

In this method, the lead selection of the controller context is set to the next element.

method ONACTIONSHOWANSWER . wd_context->set_attribute( exporting name = value = abap_false ). wd_This->Fire_SHOWANSWEROUT_Plg( ). endmethod.

Questionmark View This view is purely passive. It does not, therefore, contain any methods.

Answer View This view only has one method for the action event.


EndQuizPressed End Quiz OnActioEndQuizPressed

40


method ONACTIONENDQUIZPRESSED . data: node type ref to if_wd_context_node. node = wd_context->get_child_node( 'QUIZDATA' ). node->move_first( ). wd_This->Fire_ENDQUIZOUT_Plg( ). endmethod.

The lead selection in the controller context is set to the first element.

41


Embedding Views in a Window At this point, the navigation procedure must be defined for the Web Dynpro application. To do this, the Main view must firstly be embedded in a window. Branch to the automatically generated window <Windowname>. Click on the window with the secondary mouse button and select Embed View from the context menu.

Enter the name of the view and the component in the following dialog box. After you confirm your entries, the view is embedded into the window.

Extend the Main view by clicking on the icon in front of the view icon. The three ViewContainerUIElements are now visible. Assign the individual views that are to be

42


displayed in the respective container to these elements. To do this, click on the LEFT view with the secondary mouse button and select Embed View.

Enter the name QUESTION and the name of the component in the dialog box and confirm your entries. The view Question has now been assigned to the ViewUIElement LEFT. To work as a default, an Empty View is also required in this ViewUIContainerElement. Generate this view as you did the previous view, and define it as the default by clicking on it with the secondary mouse button and selecting Set as Default.

With the other two ViewUIContainerElements, proceed as described in the table and create the corresponding links.

ViewUIContainerElem Embedded Views Default View ent

QUESTION LEFT

Empty View X TOP WELCOME X RIGHT QUESTIONMARK

43


ANSWER

Empty View X

Once you have embedded all the views in the ViewUIContainerElements, save your entries.

44


Creating Navigation Transitions Use You must define the runtime behavior of the application regarding navigation transitions between individual view assemblies in a separate step. The navigation change occurs at runtime when an outbound plug in an action event handler of the view controller is triggered. There are two steps:

• Action event handler calls outbound plug (programmatic)

• Outbound plug traces navigation links (declarative) This indirection during the trigger process of the navigation change ensures that navigation changes can be subsequently modified in a purely declarative way without having to change the source code. The method call that triggers the outbound plug remains unchanged in the source code.

Procedure A navigation transition is usually triggered when the user selects a button. You need to do the following: ...

1. Define an action event

2. Assign the action event to the onAction event of the Button UI element

3. Programmatically trigger the outbound plug (which has at least one navigation link) in an action event handler of the view controller.

It is now possible to generate the navigation links that refer the outbound plugs to the inbound plugs. To do this, click on the outbound plug with the secondary mouse button and choose Create Navigation Link. Select the inbound plug you want from the dialog box and confirm your selection.

45


The navigation links below are required for the application:

Outbound Plug Inbound Plug

DISPLAYQUETIONMARKIN STARTQUIZOUT

DISPLAYQUESTIONIN

SHOWANSWEROUT DISPLAYANSWERIN

DISPLAYQUESTIONIN SHOWQUESTIONMARKOUT

DISPLAYQUESTIONMARKIN

DISPLAYWELCOMEIN ENDQUIZOUT

Empty View (right)

Empty View (left)

After all the required elements of the Web Dynpro component have been created, save them, and activate at component level. The Web Dynpro application must now be generated for a test. To do this, click on the component with the secondary mouse button and choose Create -> Web Dypro Application.

46


Save the application. Click on the newly generated application with the secondary mouse button and choose Test. The browser opens containing the Web Dynpro ABAP application you created. The control is now at browser level.

47


Debugging in Web Dynpro ABAP When implementing the Web Dynpro ABAP components, you can implement dynamic breakpoints in the coding extracts using the Debugger that is integrated in the ABAP Workbench. These breakpoints are only effective for the user who creates them. That is, all the other users can continue to use the program as before.

Select the supply function for the component controller and start the Editor.

Place the cursor on the line of coding where you want to set the breakpoint. Click on Utilities -> Breakpoints -> Set/Delete. After the breakpoint has been set, the system generates a message and a yellow bar appears in the coding at the point you wanted.

48


If the Web Dynpro component is run with the supply function, the program stops at the point in the coding where the breakpoint was added. A debugging session automatically opens in SAPGUI. The program control is now in the debugging session.

49


In this session you can use all the tools of the ABAP Debugger as usual. Once the debugging process has been completed, the program continues and the Web Dynpro component regains control with the browser communication.

50

an extended web dynpro for abap application

Documents