Professional Documents
Culture Documents
An Extended Web Dynpro For ABAP Application
An Extended Web Dynpro For ABAP Application
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.
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
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
3/30/2006
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
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.
3/30/2006
When the user chooses Show Answer, the question mark disappears and the answer is displayed.
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.
3/30/2006
3/30/2006
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
3/30/2006
11
3/30/2006
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
3/30/2006
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
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
Welcome View
Welcome View
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
1 - Start/End Application
2 - Display Question
3 - Display Answer
14
3/30/2006
View Welcome
View Welcome
1 - Start Application
View Welcome
View Welcome
View Question
View Answer
3 - Display Answer
View Welcome
View Welcome
View Answer
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 Welcome
View Question
16
3/30/2006
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
3/30/2006
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
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.
18
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
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.
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
20
3/30/2006
Properties of TextView design Properties of TextView text Properties of TextView wrapping LayoutData hAlign LayoutData vAlign
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
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
3/30/2006
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
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
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.
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
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.
To define the context, change into the controller context of the Web Dynpro application by double clicking on the component controller.
26
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.
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
3/30/2006
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.
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
3/30/2006
context of the component. Two further local attributes are required to determine when the pushbuttons are ready for input.
View QUESTION
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
3/30/2006
30
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
1..n
QuizData Answer
Context Mapping
1..n
Context Mapping
31
3/30/2006
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
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
3/30/2006
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
Question
ShowAnswerButton NextQuestionButton
Answer
EndQuizButton
34
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:
Text Exit Quiz Start Quiz Show Answer Next Question End Quiz
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
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
3/30/2006
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
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 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
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)
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.
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
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.
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
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
3/30/2006
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
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.
Default View
X X
TOP RIGHT
WELCOME QUESTIONMARK
43
3/30/2006
Once you have embedded all the views in the ViewUIContainerElements, save your entries.
44
3/30/2006
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
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
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
3/30/2006
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
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
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