An Extended Web Dynpro ABAP Application NetWeaver 2004s Release
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
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 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
SAP Online Help 3/30/2006
.......................................................... 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
SAP Online Help 3/30/2006
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
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.
6
SAP Online Help 3/30/2006
When the user chooses Show Answer, the question mark disappears and the answer is displayed.
7
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.
8
SAP Online Help 3/30/2006
9
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).
View Area Left
View Area Top
View Area Right
Main View
Window
colspan = 1 colspan = 1
colspan = 2
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 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
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 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
SAP Online Help 3/30/2006
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
SAP Online Help 3/30/2006
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
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:
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
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 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
SAP Online Help 3/30/2006
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
MatrixLayoutProperties of Group → Layout
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
centerLayoutData → hAlign
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
centerLayoutData → hAlign
50% LayoutData → width
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
MatrixLayoutProperties of Group → Layout
100% Properties of Group → Width
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
100% Properties of Group → Width
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
centerLayoutData → hAlign
QuestionTextText of type TextView in the UI element QuestionViewGroup
20
SAP Online Help 3/30/2006
emphasizedProperties of TextView → design
will be mapped to the context Properties of TextView → text
enabledProperties of TextView → wrapping
centerLayoutData → hAlign
middleLayoutData → vAlign
QuestionCounterText of type TextView in the UI element QuestionViewGroup
MatrixHeadDataProperties → Layout Data
emphasizedProperties of TextView → design
will be mapped to the context Properties of TextView → text
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
MatrixHeadDataProperties → Layout Data
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
MatrixDataProperties → Layout Data
forcedLeft Layout Data → halign
ICON_QUESTION Properties of Button → imageSource
will be mapped to the contextProperties of Button → visible
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
MatrixLayoutProperties of Group → Layout
100% Properties of Group → Width
Group AnswerViewGroup of type Group in the UI element RootUIElementContainer
MatrixLayoutProperties of Group → Layout
MatrixHeadDataProperties of Group → Layout Data
sapcolorProperties of Group → Design
100% Properties of Group → Width
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
emphasizedProperties of TextView → design
will be mapped to the context Properties of TextView → text
enabledProperties of TextView → wrapping
centerLayoutData → hAlign
middleLayoutData → vAlign
Pushbutton EndQuizButton of the type Button in the UI element AnswerViewGroup
MatrixHeadDataProperties of Button → Layout Data
22
SAP Online Help 3/30/2006
End Quiz Properties of Button → text
ICON_SYSTEM_CANCLE Properties of Button → imageSource
centerLayoutData → hAlign
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
MatrixLayoutProperties → layout
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
centerLayoutData → hAlign
100%LayoutData → width
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
MatrixLayoutProperties → layout
disabledLayout Data → strechedVertically
23
SAP Online Help 3/30/2006
Element TOP of type ViewContainerUIElement in RootUIElementContainer
MatrixHeadDataProperties → Layout Data
2LayoutData → colspan
centerLayoutData → halign
100%LayoutData → width
Element LEFT of type ViewContainerUIElement in RootUIElementContainer
MatrixHeadDataProperties → Layout Data
1LayoutData → colspan
beginOfLineLayoutData → halign
middleLayoutData → vAlign
50%LayoutData → width
Element RIGHT of type ViewContainerUIElement in RootUIElementContainer
MatrixDataProperties → Layout Data
1LayoutData → colspan
beginOfLineLayoutData → halign
middleLayoutData → vAlign
50%LayoutData → width
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.
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
SAP Online Help 3/30/2006
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
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 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
SAP Online Help 3/30/2006
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
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 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
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
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
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
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
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 UI Element Action Event to Be Assigned
StartQuizButton StartPressedWelcome
ExitButton ExitPressed
ShowAnswerButton ShowAnswerQuestion
NextQuestionButton NextQuestion
Answer EndQuizButton EndQuizPressed
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 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
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( '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
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> . (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
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.
Event Handler Name of the Action Event Text
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.
Event Handler Name of the Action Event Text
EndQuizPressed End Quiz 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 Embedded Views Default View ent
QUESTION LEFT
Empty View X TOP WELCOME X RIGHT 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. 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
SAP Online Help 3/30/2006
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
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