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.

SAP Online Help

3/30/2006

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 Sample text Description Words or characters that appear on the screen. These include field names, screen titles, pushbutton labels, menu names, menu paths, and menu options. Cross-references to other documentation Sample text SAMPLE TEXT Emphasized words or phrases in the body text, titles of graphics and tables. 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. 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. Exact user entry. This includes words or characters in the documentation that the user is instructed to enter on the screen. 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

Sample text <Example text> SAMPLE TEXT

SAP Online Help

3/30/2006

Creating an Extended Web Dynpro ABAP Application .......................................................... 5 Quiz Application ..................................................................................................................... 6 Designing a View Model ...................................................................................................... 10 Defining a View Composition ............................................................................................... 12 Implementing the View Composition ................................................................................... 17 Designing a View Layout ..................................................................................................... 18 Controller Contexts .............................................................................................................. 25 Defining Data Binding .......................................................................................................... 32 Define Action Events ............................................................................................................ 34 Implementation of Individual Coding Extracts...................................................................... 37 Embedding Views in a Window............................................................................................ 42 Creating Navigation Transitions ........................................................................................... 45 Debugging in Web Dynpro ABAP ........................................................................................ 48

SAP Online Help

3/30/2006

Creating an Extended Web Dynpro ABAP Application

Task
o o o o o Creating a Web Dynpro application with multiple views and a navigation structure Working with event handlers (action event handlers, inbound plug event handlers) that you declare yourself Reading contents from the property resource bundles and storing them in a Web Dynpro context (value nodes, value node elements) Dividing data between view controllers and component controllers using context mapping Manipulating UI element attributes at runtime using data binding

Prerequisites
Systems, Installations, and Authorizations
o o Access to SAP NetWeaver (release NW 2004s or higher) You have authorization for transaction SE80 (development environment).

Knowledge
o o Experience with the ABAP programming language and the ABAP development environment Basic knowledge about programming Web Dynpro applications

SAP Online Help

3/30/2006

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.

SAP Online Help

3/30/2006

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

SAP Online Help

3/30/2006

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.

SAP Online Help

3/30/2006

SAP Online Help

3/30/2006

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

SAP Online Help

3/30/2006

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

Window Main View View Area Top colspan = 2

View Area Left colspan = 1

View Area Right colspan = 1

11

SAP Online Help

3/30/2006

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

SAP Online Help

3/30/2006

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 Question view and QuestionMark view. The Question view is associated with the Answer view and QuestionMark view, whereas the Answer view is associated with the Welcome view and the two empty views.

13

SAP Online Help

3/30/2006

This view composition enables you to access three of the six possible view assemblies using navigation links. View Area Top Welcome Welcome Welcome View Area Left Empty view Question Question View Area Right Empty view QuestionMark Answer

View Area Top

Welcome View

View Area Top

Welcome View

View Area Top

Welcome View

Question View Empty View Empty View View Area Left View Area Right View Area Left View Area Right Questionmark View

Question View

Answer View

View Area Left

View Area Right

1 - Start/End Application

2 - Display Question

3 - Display Answer

14

SAP Online Help

3/30/2006

View Area Top

View Welcome

View Area Top

View Welcome

View Question Empty View Empty View View QuestionMark

View Area Left

View Area Right

View Area Left

View Area Right

1 - Start Application

2 - Display First Question

View Area Top

View Welcome

View Area Top

View Welcome

View Question

View Answer

View Question View QuestionMark

View Area Left

View Area Right

View Area Left

View Area Right

3 - Display Answer

4 - Display Next Question

View Area Top

View Welcome

View Area Top

View Welcome

View Answer

Empty View Empty View

Empty View Empty View

View Area Left

View Area Right

View Area Left Exit Quiz

View Area Right

5 - End 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

SAP Online Help QuestionMark are displayed, the event handling routines of the inbound plugs displayQuestion and displayQuestionMark are executed.
Outbound Plug startQuizOut

3/30/2006

View Area Top

View Welcome

View Question

Inbound Plug displayQuestionMarkIn

View QuestionMark

Inbound Plug displayQuestionIn

View Area Left

View Area Right

2 - Display First Question

16

SAP Online Help

3/30/2006

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: Insert the views: Main, Welcome, Question, QuestionMark, and Answer 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

SAP Online Help

3/30/2006

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 a.gif Image File Name q.gif Image

questionmark.jpg

ICON_QUESTION

ICON_DISPLAY_TEXT ICON_SYSTEM_OKA Y

ICON_SYSTEM_END ICON_SYSTEM_CAN CLE

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 SAPs standard icon set.

View Layout in the View Designer of the Web Dynpro Tools

18

SAP Online Help

3/30/2006

Container RootUIElementContainer of the type TransparentContainer Properties of Group Layout Properties of Group Width MatrixLayout 100%

Group WelcomeViewGroup of type Group in the UI element RootUIElementContainer Properties of Group Design Properties of Group Layout Properties of Group Layout Properties of Group Width Layout Data colSpan sapcolor MatrixLayout MatrixHeadData 100% 1

Property

Header Caption_1 of type Caption in the UI element WelcomeViewGroup Properties of Caption Text Web Dynpro Quiz

Text TextMessage of type TextView in the UI element WelcomeViewGroup Properties of TextView Layout Data Properties of TextView Design Properties of TextView hAlign Properties of TextView Layout Properties of TextView text LayoutData colSpan LayoutData hAlign MatrixHeadData emphasized center block will be mapped to the context 2 center

Pushbutton StartQuizButton of the type Button in the UI element WelcomeViewGroup Properties of TextView Layout Data Properties of Button text Properties of Button imageSource LayoutData hAlign LayoutData width MatrixHeadData Start Quiz ICON_SYSTEM_OKAY center 50%

Pushbutton ExitButton of the type Button in the UI element WelcomeViewGroup Properties of TextView Layout Data Properties of Button text Properties of Button imageSource LayoutData hAlign LayoutData width MatrixData Exit Quiz ICON_SYSTEM_END center 50%

19

SAP Online Help

3/30/2006

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.

View Layout in the View Designer of the Web Dynpro Tools

Property

Value

Container RootUIElementContainer of the type TransparentContainer Properties of Group Layout Properties of Group Width MatrixLayout 100%

Group QuestionViewGroup of type Group in the UI element RootUIElementContainer Properties of Group Layout Properties of Group Layout Data Properties of Group Design Properties of Group Width Layout colcount Layout Data height MatrixLayout MatrixHeadData sapcolor 100% 1 100%

Caption QuestionViewGroup_header of type Caption in the UI element QuestionViewGroup Properties of Caption text Question View

Image QImage of the type Image in the UI element QuestionViewGroup Properties Layout Data Properties of Image source Properties tooltip LayoutData hAlign MatrixHeadData q.gif This is the image for the question center

Text QuestionText of type TextView in the UI element QuestionViewGroup

20

SAP Online Help

3/30/2006

Properties of TextView design Properties of TextView text Properties of TextView wrapping LayoutData hAlign LayoutData vAlign

emphasized will be mapped to the context enabled center middle

Text QuestionCounter of type TextView in the UI element QuestionViewGroup Properties Layout Data Properties of TextView design Properties of TextView text MatrixHeadData emphasized will be mapped to the context

Container TransparentButtonContainer of the type TransparentContainer in the UI element QuestionViewGroup Properties layout Properties Layout Data MatrixLayout MatrixData

Pushbutton ShowAnswerButton of the type Button in the UI element TransparentButtonContainer Properties Layout Data Layout Data halign Properties of Button enabled Properties of Button text Properties of Button imageSource MatrixHeadData forcedRight will be mapped to the context Show Answer ICON_DISPLAY_TEXT

Pushbutton NextQuestionButton of the type Button in the UI element TransparentButtonContainer Properties Layout Data Layout Data halign Properties of Button imageSource Properties of Button visible MatrixData forcedLeft ICON_QUESTION will be mapped to the context

21

SAP Online Help

3/30/2006

Answer View
View Layout in the View Designer of the Web Dynpro Tools

Property

Value

Container RootUIElementContainer of the type TransparentContainer Properties of Group Layout Properties of Group Width MatrixLayout 100%

Group AnswerViewGroup of type Group in the UI element RootUIElementContainer Properties of Group Layout Properties of Group Layout Data Properties of Group Design Properties of Group Width Properties of Group height Layout colCount MatrixLayout MatrixHeadData sapcolor 100% 100% 1

Caption AnswerViewGroup _header of type Caption in the UI element AnswerViewGroup Properties of Caption text Properties tooltip View Answer This is the image for the answer

Image AImage of type Image in the UI element AnswerViewGroup Properties of Image source Properties of Image Layout Data a.gif MatrixHeadData

Text AnswerText of type TextView in the UI element AnswerViewGroup Properties of TextView Layout Data Properties of TextView design Properties of TextView text Properties of TextView wrapping LayoutData hAlign LayoutData vAlign MatrixData emphasized will be mapped to the context enabled center middle

Pushbutton EndQuizButton of the type Button in the UI element AnswerViewGroup Properties of Button Layout Data MatrixHeadData

22

SAP Online Help

3/30/2006

Properties of Button text Properties of Button imageSource LayoutData hAlign

End Quiz ICON_SYSTEM_CANCLE center

QuestionMark View
Generate a new view QuestionMark and add the following UI elements: View Layout in the View Designer of the Web Dynpro Tools

Property

Value

Container RootUIElementContainer of the type TransparentContainer Properties layout LayoutData widtht MatrixLayout 100%

Image QuestionMarkImage of type Image in the UI element RootUIElementContainer Properties layout Properties source Properties tooltip LayoutData hAlign LayoutData width MatrixHeadData questionmark.jpg This is the image for the questionmark center 100%

Main View
Generate a new Main view. View Layout in the View Designer of the Web Dynpro Tools

Property

Value

Container RootUIElementContainer of the type TransparentContainer Properties layout Layout Data strechedVertically MatrixLayout disabled

23

SAP Online Help

3/30/2006

Element TOP of type ViewContainerUIElement in RootUIElementContainer Properties Layout Data LayoutData colspan LayoutData halign LayoutData width MatrixHeadData 2 center 100%

Element LEFT of type ViewContainerUIElement in RootUIElementContainer Properties Layout Data LayoutData colspan LayoutData halign LayoutData vAlign LayoutData width MatrixHeadData 1 beginOfLine middle 50%

Element RIGHT of type ViewContainerUIElement in RootUIElementContainer Properties Layout Data LayoutData colspan LayoutData halign LayoutData vAlign LayoutData width MatrixData 1 beginOfLine middle 50%

24

SAP Online Help

3/30/2006

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

2.

25

SAP Online Help 3.

3/30/2006

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 questionanswer 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 questionanswer 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

SAP Online Help

3/30/2006

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 Question and 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 Stru_Quizdata q_count otr_alias aux_count q_count = 0. do 7 times. add 1 to q_count.

type type type type type

IF_COMPONENTCONTROLLER=>Elements_Quizdata, IF_COMPONENTCONTROLLER=>Element_Quizdata, char1, string, char3.

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

SAP Online Help

insert stru_quizdata into table itab_quizdata. enddo.

3/30/2006

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 viewspecific 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 Welcome Value Attribute Name TextMessage ExitButtonVisible Data Type String 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

SAP Online Help

3/30/2006

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

View QUESTION

Value Attribute Name NextButtonVisibility AnswerButtonEnabled

Data Type WDUI_Visibility 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

SAP Online Help

3/30/2006

30

SAP Online Help

3/30/2006

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 View Layout

Question View
Text TextView View

Answer View
TextView

Data Binding

Data Binding
Context of Answer Views
1..1Root Node

Context of Question Views

1..1 Root Node 1..n QuizData Question Counter

1..n

QuizData Answer

Context of Quiz CompoNent Controllers

1..1Root Node

Context Mapping

1..n

Context Mapping

QuizData Question Answer Counter

31

SAP Online Help

3/30/2006

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

SAP Online Help

3/30/2006

Use the description above to define the following data bindings in the three views Welcome, Question, and Answer: UI Elements of the View Welcome View TextMessage ExitButton Question View QuestionCounter AnwerButtonEnabled NextQuestionButton QuestionText View Answer AnswerText Properties of TextView - text Answer Properties of TextView - text Properties of Button - enable Properties of Button - visible Properties of TextView - text Counter NextButtonEnabled NextButtonVisibility Question Text Properties of Button - visible TextMessage ExitButtonVisibility Property Context Element

33

SAP Online Help

3/30/2006

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 Welcome

UI Element StartQuizButton ExitButton

Action Event to Be Assigned StartPressed ExitPressed ShowAnswer NextQuestion EndQuizPressed

Question

ShowAnswerButton NextQuestionButton

Answer

EndQuizButton

34

SAP Online Help

3/30/2006

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 Welcome

Name of the Action Event ExitPressed StartPressed

Text Exit Quiz Start Quiz Show Answer Next Question End Quiz

Triggering Outbound Plug To_somewhere StartQuizOut ShowAnswerOut ShowQuestionMarkOut EndQuizOut

Question

ShowAnswerPressed ShowNextQuestionPressed

Answer

EndQuizPressed

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

SAP Online Help

3/30/2006

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

SAP Online Help

3/30/2006

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

SAP Online Help

3/30/2006

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( WDP_DEMO_TUTORIALS/GOOD_BYE_TEXT' ). 'S

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. Name of the Action Event StartPressed ExitPressed Text Start Quiz Exit Quiz Event Handler OnActionStartPressed 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( 'S WDP_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

SAP Online Help

3/30/2006

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> . l_ref_quiz = wd_this->get_<Name des Kontrollers>_ctr( ). (demo_wda_quiz) (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 Elem_Quizdata Stru_Quizdata Item_COUNTER type type type like ref to If_Wd_Context_Node, ref to If_Wd_Context_Element, If_Question=>Element_Quizdata, 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

SAP Online Help

3/30/2006

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. Name of the Action Event NextQuestion ShowAnswer Text Next Question Show Answer Event Handler OnActionNextQuestion 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. Name of the Action Event EndQuizPressed Text End Quiz Event Handler OnActioEndQuizPressed

40

SAP Online Help

3/30/2006

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

SAP Online Help

3/30/2006

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

SAP Online Help

3/30/2006

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 ent LEFT

Embedded Views QUESTION Empty View

Default View

X X

TOP RIGHT

WELCOME QUESTIONMARK

43

SAP Online Help

3/30/2006

ANSWER Empty View X

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

44

SAP Online Help

3/30/2006

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. 2. 3.

Define an action event Assign the action event to the onAction event of the Button UI element 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

SAP Online Help

3/30/2006

The navigation links below are required for the application: Outbound Plug STARTQUIZOUT Inbound Plug DISPLAYQUETIONMARKIN DISPLAYQUESTIONIN SHOWANSWEROUT SHOWQUESTIONMARKOUT DISPLAYANSWERIN DISPLAYQUESTIONIN DISPLAYQUESTIONMARKIN ENDQUIZOUT DISPLAYWELCOMEIN 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

SAP Online Help

3/30/2006

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

SAP Online Help

3/30/2006

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

SAP Online Help

3/30/2006

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

SAP Online Help

3/30/2006

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