1. Web Dynpro ABAP for Practitioners

2. Ulrich Gellert l Ana Daniela Cristea Web Dynpro ABAP for Practitioners

3. Ulrich Gellert c/o S P LION AG Robert-Bosch-Str. 9 68542 Heddesheim Germany webdynpro.ABAP@sp-lion.com Ana Daniela Cristea c/o S + P LION AG Robert-Bosch-Str. 9 68542 Heddesheim Germany webdynpro.ABAP@sp-lion.com ISBN 978-3-642-11384-0 e-ISBN 978-3-642-11385-7 DOI 10.1007/978-3-642-11385-7 Springer Heidelberg Dordrecht London New York Library of Congress Control Number: 2010929263 # Springer-Verlag Berlin Heidelberg 2010 This work is subject to copyright. All rights are reserved, whether the whole or part of the material is concerned, specically the rights of translation, reprinting, reuse of illustrations, recitation, broadcasting, reproduction on microlm or in any other way, and storage in data banks. Duplication of this publication or parts thereof is permitted only under the provisions of the German Copyright Law of September 9, 1965, in its current version, and permission for use must always be obtained from Springer. Violations are liable to prosecution under the German Copyright Law. The use of general descriptive names, registered names, trademarks, etc. in this publication does not imply, even in the absence of a specic statement, that such names are exempt from the relevant protective laws and regulations and therefore free for general use. All printed screens, SAP, the SAP Logo, my SAP, SAP R/3, ABAP, NetWeaver Portal are subject to copyright or are trademarks of SAP AG, Dietmar-Hopp-Allee 16, 69190 Walldorf, Germany Cover design: KuenkelLopka GmbH, Germany Printed on acid-free paper Springer is part of Springer Science+Business Media (www.springer.com)

4. Foreword Taking Albert Einsteins quote as a motto Example isnt another way to teach, it is the only way to teach, our target was to create a book for explaining step-by- step the Web Dynpro ABAP to the reader. Assisted by practical examples, you will learn more and more about Web Dynpro ABAP, from chapter to chapter. Moreover, the connections with other areas are also pointed out by practical examples. In Chap. 1, we explain what means the Web Dynpro integrated in a SAP NetWeaver platform. Chapter 2 is about the Easy Access to a SAP System. In Chap. 3, we describe the modality to creating a Web Dynpro Component. We explain all the elements of a view through examples, and we show you how to use the ABAP Debugger to diagnose the Application. Chapter 4 gives attention to the ABAP Dictionary, where all the Development Objects are created. These ones are the basis for all our examples. With this knowledge, you will be able to easily create Web Dynpro applications. In Chap. 5, we present the Context Nodes and Attributes and explain their importance for the Web Dynpro. We consider the possibilities to create, use, ll in with data, and read the contents. In Chap. 6, we go into details with Data Binding, Context Mapping and Interface Methods. For this purpose, we present the Data Binding through simple examples. We change these examples step-by-step, to show you a clear picture of the context mapping (as well as in an internal and external way Direct Mapping and Reverse Mapping). Chapter 7 covers the View Controller Methods, beginning with some exam- ples of Hook Methods and ending with User Dened Methods and Event Han- dler Methods. Each method is explained by an example. Chapter 8 illustrates the layout of the UI Elements. In our largest chapter (Chap. 9), we describe in details the User Interfaces (UI). Each UI element is presented through an example. Moreover, we show the dynamic programming of these UI elements and give additional information. v

5. Chapter 10 includes Messages and Exceptions. We start with the creation of the necessary classes (Message Class, Exceptions Class and Assistance Class) and we show you how to use them to create solid applications that catch exceptions and inform the user through messages. Chapter 11 is about creating Multilingual Applications on the levels of inter- faces and master data. We also present how to use these data in the Web Dynpro components. In Chap. 12, we present several Web Dynpro Models. We show you not only how to use an Assistance Class, a Web Service or a BAPI, but also how to create Multi Component Applications. Chapter 13 covers the ABAP list viewer (ALV) and the Select options (SO). We start again with simple examples and build them up to an ALV output congu- ration in combination with SOs. In Chap. 14, its described the integration of Web Dynpro Applications in the SAP NetWeaver Portal. We present the connection with the back-end ABAP System, ending with WD applications that send and react to a portal event. The next Chapter (Chap. 15) is about Web Dynpro and Authorizations. We shortly present the Role Based Access Control (RBAC) model and describe the SAP NetWeaver authorization concept. In our last Chapter (Chap. 16), we would like to show how the Mind Map can help you to learn Web Dynpro ABAP easier and faster. We create a Mind Map that includes all the necessary Web Dynpro Elements. The examples in our book have been developed on a SAP System with SAP NetWeaver 7.0 and Support Package 17. From SDN (http://www.sdn.sap.com), you can download a free of charge SAP NetWeaver Trial Version with ABAP and SAP GUI, for testing. With this Trial Version, you can create most of our exercises. Youll also nd most of the conguration steps at SDN. To use the SAP interactive forms by ADOBE, you need both NetWeaver Trial Versions (ABAP and Java), because ADS is an integral part of the SAP NetWeaver Java version. Additionally, you need the ADOBE Live Cycle Designer from the SAP Service marketplace. The conguration steps required in this case are shown in the SAP PRESS book SAP Interactive Forms by Adobe (Hauser et al.). To be able to work with the portal, you need the SAP NetWeaver Java Trial Version. In the SAP PRESS book Devel- opers Guide to SAP NetWeaver Portal Applications (Banner et al.), you will nd all the software and hardware requirements, along with the conguration steps. The creation of a book takes time. Many discussions with students and devel- opers made us think about writing a practical book on the Web Dynpro ABAP subject. The most important issue was to guide the reader step-by-step, with practical examples. Many weekends, holidays and evenings were invested in this book, and the positive feedback of our colleagues always gave us new energy. vi Foreword

6. Acknowledgements We would like to thank our proofreaders Dieter Schmitt and Heinz-Jurgen Gebhardt. Their advices and comments helped us a lot. Ulrich Gellert would like to thank all his colleagues of S+P LION AG for the useful input during the project. I also would like to thank my father, Gerhard Gellert, who unfortunately died too early. He introduced me into the world of IT in 1983 and, without him, our company could never become what it is. Special thanks go to my mother, Gabriele Gellert. She has been supporting me until today, and she is the heart of our company. Especially, I would like to thank my lovely wife Carmen and my children Alexa and Marc, for their support during the project. Ana Daniela Cristea gives special thanks to NWCON Technology Consulting, especially to Thomas Muschalik and S+P LION AG, for their great support. Taking this opportunity, Id like to thank to the special persons who have been guiding me through my dissertation: Octavian Prostean and Mircea Vladutiu. Not to forget the people who encouraged me to publish my rst books and articles: Aron Poanta and Caius Panoiu, thanking them for the useful advices. Last but not least, I would like to thank my family and friends. Especially to my mother, Sabina Cristea, and to Susanne and Edgar Hammes, who supported me with all their powers. They gave me the time I needed to be one of those who wrote this book for you. vii

7. Contents 1 What is Web Dynpro? .................................................... 1 2 SAP Easy Access .......................................................... 5 2.1 Changing the SAP Easy Access ....................................... 6 2.2 Favorites List .......................................................... 6 2.3 Setting a Transaction as Start Transaction ............................ 8 2.4 Creating a Shortcut .................................................... 8 3 Designing a Web Dynpro Component .................................. 11 3.1 View .................................................................. 14 3.1.1 View Layout ................................................... 14 3.1.2 Context View .................................................. 17 3.1.3 Actions ......................................................... 19 3.1.4 Methods ........................................................ 19 3.1.5 Properties ...................................................... 21 3.1.6 Attributes ....................................................... 22 3.2 Componentcontroller ................................................. 23 3.3 Window ............................................................... 23 3.4 Application ............................................................ 24 3.5 ABAP Debugger ...................................................... 27 3.6 Web Dynpro Logon Page Conguration ............................. 30 4 ABAP Dictionary ........................................................ 33 4.1 Data Element ......................................................... 34 4.2 Domain ................................................................ 35 4.3 Structure .............................................................. 38 4.4 Table .................................................................. 40 4.5 Search Help ........................................................... 45 4.6 Database View ........................................................ 48 4.7 Table Type ............................................................ 51 4.8 Lock Object ........................................................... 52 ix

8. 5 Context Nodes and Attributes at Design Time ........................ 55 5.1 Attributes .............................................................. 56 5.2 Nodes ................................................................. 58 5.2.1 Creating a Node that Uses an ABAP Dictionary Repository Object .............................................. 59 5.2.2 Working with Child Nodes .................................... 64 6 Data Binding, Context Mapping and Interface Methods ............. 67 6.1 Data Binding .......................................................... 67 6.2 Context Mapping ..................................................... 72 6.2.1 Internal Context Mapping ..................................... 72 6.2.2 External Context Mapping ..................................... 76 6.3 Interface Methods ..................................................... 83 7 View Controller Methods ............................................... 87 7.1 Hook Methods ........................................................ 87 7.1.1 wdDoInit ....................................................... 88 7.1.2 wdDoExit ...................................................... 91 7.1.3 wdDoModifyView ............................................. 91 7.1.4 wdDoBeforeAction ............................................ 96 7.1.5 wdDoOnContextMenu ......................................... 98 7.2 Supply Function Methods .......................................... 102 7.3 User-Dened Instance Methods .................................... 103 7.4 Fire Methods ........................................................ 105 7.5 Event Handler Methods ............................................. 109 8 Layout UI Elements .................................................... 113 8.1 FlowLayout ......................................................... 114 8.2 GridLayout .......................................................... 116 8.3 MatrixLayout ....................................................... 119 8.4 RowLayout .......................................................... 120 9 User Interface Elements (UI elements), Static and Dynamic Programming ............................................................ 123 9.1 Action ............................................................... 124 9.1.1 Timed Trigger ................................................ 124 9.1.2 ButtonChoice ................................................. 126 9.2 Selection ............................................................ 132 9.2.1 DropDownByKey ............................................. 132 9.2.2 DropDownByIndex ........................................... 135 9.2.3 RadioButtonGroupByIndex ................................... 137 9.3 Layout ............................................................... 140 9.3.1 ViewContainerUIElement .................................... 140 9.3.2 TabStrip ....................................................... 146 9.3.3 PageHeader ................................................... 149 9.3.4 ContextualPanel ............................................... 152 x Contents

9. 9.3.5 Tray UI Element .............................................. 155 9.3.6 MessageArea .................................................. 159 9.4 Complex ............................................................ 163 9.4.1 Table .......................................................... 163 9.4.2 RoadMap ...................................................... 171 9.4.3 PhaseIndicator ................................................ 180 9.4.4 Tree Sequential Implementation ........................... 186 9.4.5 DateNavigator ................................................ 191 9.5 Graphic .............................................................. 197 9.5.1 Image .......................................................... 198 9.5.2 BusinessGraphics ............................................. 201 9.6 Integration .......................................................... 206 9.6.1 The InteractiveForm .......................................... 206 9.6.2 FileUpload .................................................... 215 10 Messages, Exceptions and Web Dynpro ABAP ...................... 221 10.1 Message Handling ................................................. 222 10.1.1 Dynamic Texts Stored in the Text Pool of the Assistance Class .................................... 222 10.1.2 Text from Database Table T100 .......................... 225 10.2 Exception Handling ............................................... 227 10.2.1 Exception Class with OTR Text .......................... 228 10.2.2 Exception Class with Text from a Message Class ........ 233 11 Writing Multilanguage Applications .................................. 237 11.1 Creating Multilanguage User Interfaces .......................... 238 11.1.1 Internationalization of Data Elements Dened in ABAP Dictionary ....................................... 240 11.1.2 Internationalization of Domains Dened in ABAP Dictionary ....................................... 241 11.1.3 Internationalization of Text from OTR ................... 242 11.1.4 Internationalization of Text from Assistance Class ....... 244 11.1.5 Internationalization of Messages .......................... 245 11.2 Multilanguage Records in the Database .......................... 247 11.2.1 Study an Example Created in the System ................. 248 11.2.2 Creating Table Structures and Internationalization of the Records ............................................. 250 11.2.3 Using the Internationalized Records in WebDynpro ..... 255 12 Web Dynpro Model ..................................................... 259 12.1 Assistance Class as a Model for a Multicomponent Application ........................................................ 260 12.2 BAPI as a Model .................................................. 274 12.2.1 Creating a BAPI ........................................... 274 12.2.2 Using the Created BAPI as a Model ...................... 279 12.3 Web Service ....................................................... 283 Contents xi

10. 12.3.1 Creating the Web Service ................................. 284 12.3.2 Web Service Conguration ............................... 287 12.3.3 Testing the Web Service .................................. 288 12.3.4 Consuming the Web Service in Web Dynpro ............ 289 13 ALV and Select Options ................................................ 295 13.1 SAP List Viewer ................................................... 295 13.1.1 Simple ALV Example ..................................... 296 13.1.2 ALV Conguration Model ................................ 299 13.2 Select Options ..................................................... 306 13.3 ALV and Select Options .......................................... 313 14 Integrating a Web Dynpro Application into the SAP NetWeaver Portal ....................................................... 315 14.1 Creating a Folder .................................................. 316 14.2 Connecting to the Back-End ABAP System ...................... 317 14.3 Creating an iView ................................................. 321 14.4 Creating a Role and Role Assignment ............................ 324 14.5 Running the Application into the Portal .......................... 327 14.6 Triggering a Portal Event ......................................... 327 14.7 Reacting to a Portal Event ........................................ 329 14.8 Creating a Page .................................................... 331 14.9 Running the Application that Processes Portal Events ........... 333 15 Web Dynpro and Authorization ....................................... 335 15.1 Role Based Access Control Pattern RBAC ..................... 337 15.2 Authorization Object Class ........................................ 338 15.3 Authorization Object .............................................. 338 15.4 Authorization Fields ............................................... 340 15.5 Creating a Single Role and Changing its Authorization Data .... 343 15.6 Creating the Web Dynpro Component ............................ 346 15.6.1 Checking the Authorization of the Current User ......... 346 15.6.2 Assigning the User-Role and Running the Application ............................................ 349 16 Web Dynpro Mind Map ................................................ 351 16.1 Creating a Mind Map .............................................. 351 16.2 Web Dynpro ABAP Mind Map ................................... 352 Appendix ...................................................................... 353 Index .......................................................................... 357 xii Contents

11. Chapter 1 What is Web Dynpro? Logic will get you from A to B. Imagination will take you everywhere. Albert Einstein Abstract In this chapter, we present the place and role of the Web Dynpro within the SAP NetWeaver platform. So, we start with the layers of the SAP NetWeaver platform, we continue with the importance of the Application Platform layer, and we conclude with the place and role of Web Dynpro (ABAP and Java) within the Application Server ABAP and, respective, Application Server Java. To answer this question we have to look at the SAP NetWeaver technology platform (Fig. 1.1). As we can see, four layers are distinguished in this context: Application Plat- form, Process Integration, Information Integration and People Integration. The Application Platform represents the technical basis of almost all the other SAP products. This is the reason why the Application Platform plays a central role in the SAP NetWeaver. The Application Platform essentially offers two programming interfaces: ABAP and Java (J2EE). ABAP is the programming interface for Application Server (AS) ABAP and Java is the programming interface for AS Java. To create ABAP and Java applications, we have two independent development environments: ABAP Workbench for ABAP and SAP NetWeaver Developer Studio for Java. Both development environments offer the possibility to create web based appli- cations built by using declarative programming techniques based on the Model View Controller (MVC) paradigm. SAP NetWeaver Developer Studio is the SAPs own development environment used to develop Java-based multilayer business applications. This development environment is based on Eclipse and offers a Web Dynpro Perspective to create Web Dynpro Java applications (Fig. 1.2). All the tools we need to create Web Dynpro Java applications are found within the SAP NetWeaver Developer Studio. U. Gellert and A.D. Cristea, Web Dynpro ABAP for Practitioners, DOI 10.1007/978-3-642-11385-7_1, # Springer-Verlag Berlin Heidelberg 2010 1

12. ABAP Workbench is the SAPs own development environment used to develop ABAP-based multilayer business applications. This development environment offers Web Dynpro Explorer to create Web Dynpro ABAP components (Fig. 1.3). Fig. 1.2 SAP NetWeaver Developer Studio Web Dynpro perspective Fig. 1.1 SAP NetWeaver components (SAP) 2 1 What is Web Dynpro?

13. The Application Server ABAP has the structure presented in Fig. 1.4. Fig. 1.3 ABAP Workbench Web Dynpro Explorer Fig. 1.4 AS ABAP (SAP) 1 What is Web Dynpro? 3

14. As we can see, most of the AS ABAP components can be divided into three layers: l Presentation layer. l Business layer. l Persistence layer. Web Dynpro ABAP is part of the presentation layer and its the SAP standard UI technology used for developing web business applications without knowing HTML or JavaScript. Web Dynpro ABAP offers many advantages, as follows: l Strict separation between the layout and business data. l Re-use and better maintainability through reusability. l Automatic input checks. l Automatic data transport, using data binding. l WYSIWYG (What You See Is What You Get) view editor. Web Dynpro ABAP and Web Dynpro Java mostly offer the same functionalities. But, of course, there are some differences between them, for example: l Web Dynpro Java, unlike the Web Dynpro ABAP, disposes of a ViewSet that allows us to integrate in a Screen more Views, by using certain pre-dened layouts. In this respect, their common part is the View Container UI Element. l Web Dynpro Java offers graphical tools that ease the programming work, as: Navigation Manager and Diagram View, unlike the Web Dynpro ABAP where we dispose only of a tool used to visualize and to dene the window structure. The Web Dynpro ABAP is what the current book is about. More information about Web Dynpro Java can be found in the Book Inside Web Dynpro for Java by Chris Whealy. 4 1 What is Web Dynpro?

15. Chapter 2 SAP Easy Access The way to get started is to quit talking and begin doing Walt Disney Abstract This chapter presents the SAP Easy Access, highlighting some aspects found in our everyday work. So, we show how to change the standard settings, how to add in the Favorites list the frequently used transactions, and how to create a Shortcut on the Desktop. SAP easy access starts automatically after logging-in into the SAP system. In the left side, we can see the user menu. Here are the functions the user needs to perform his tasks (Fig. 2.1). SAP Easy User Menu Fig. 2.1 SAP easy access U. Gellert and A.D. Cristea, Web Dynpro ABAP for Practitioners, DOI 10.1007/978-3-642-11385-7_2, # Springer-Verlag Berlin Heidelberg 2010 5

16. 2.1 Changing the SAP Easy Access We can change the SAP easy access settings through the menu Extras ! Settings, by specifying settings as follows: l The place of the Favorites l The presents of the menu l The easy access picture in the right side of the screen to be present or not l Displays or not the technical names (Fig. 2.2). 2.2 Favorites List The user menu is mostly dened by the administrator, but we can dene our own Favorites list. Here, we can create our own list of favorites containing items as transaction, les, web addresses or other objects. To add new transactions in the Favorite list, we can choose from the menu Favorites ! Insert Transactions (Fig. 2.3). As a result, the new item appears in our Favorites list (Fig. 2.4). We can nd the list of the SAP transaction codes in the transparent table TSTC. Besides the transactions predened in the system, we can create our own transac- tions (e.g. with transaction SE93) which are going to be inserted in this table. Fig. 2.2 Settings Fig. 2.3 Inserting transaction onto the Favorites list Fig. 2.4 Favorites list 6 2 SAP Easy Access

17. Every time we use a transaction, the system veries in this table whether the transaction exists and if we have the proper authorization to use it. As support for our daily tasks, we add here some of the transactions we use in this book (Fig. 2.5). To add other objects, we can choose them from the menu Favorites ! Add Other Objects (Fig. 2.6). Fig. 2.5 Transactions used Fig. 2.6 Adding new objects in Favorites list 2.2 Favorites List 7

18. We add the web address to open the SDN page (Fig. 2.7). We can use Favorites ! Download to PC to save on our computer a list with all the objects we have in the Favorites folder. To upload in a Favorites folder objects from a list saved on our computer, we can use Favorites ! Upload from PC. 2.3 Setting a Transaction as Start Transaction We have the possibility to set a transaction as start transaction: Extras ! Set start transaction (Fig. 2.8). In this way, the desired transaction is automatically started after logging-in into the system (in our case the SE80 transaction), and we dont see the SAP easy access anymore. 2.4 Creating a Shortcut After installing the SAP GUI, a SAP logon icon appears on our desktop. By using this logon, we can login into the system. Additionally, we can create a SAP logon shortcut to be used to perform the same logon, but we dont need to ll all the entries in the logon form. A SAP shortcut allows us not only to perform a logon into the system, but to execute other commands, too. So, we can start a SAP transaction, run a report or perform a system command. To create a SAP Shortcut on our desktop to start the transaction SE80, we can use the Wizard available in the layout menu, by clicking on the respective icon located in the system function bar (Fig. 2.9). Fig. 2.7 Inserting a web address Fig. 2.8 Setting the start transaction dialog box 8 2 SAP Easy Access

19. Another possibility to create a SAP shortcut on our desktop is to select a transaction or another object from the Favorites list, and to use the menu Edit ! Create Shortcut on the Desktop. Fig. 2.9 Creating a SAP Shortcut on our Desktop 2.4 Creating a Shortcut 9

20. Chapter 3 Designing a Web Dynpro Component Experience is something you dont get until just after you need it Steven Wright Abstract The present chapter is dedicated to the constitutive elements of a Web Dynpro ABAP component. Moreover, we show how to use the ABAP Debugger to execute, by line or by section, a Web Dynpro application, and how to use the new tool offered by ABAP Debugger to reach the context attributes values. In order to develop a Web Dynpro ABAP component, we have to open the ABAP Workbench of the Application Server ABAP. To work with ABAP Workbench, we need an authorization as a developer or a developer key, and for the SAP NetWea- ver ABAP trial version we can use BCUSER, automatically registered as a devel- oper. Web Dynpro is available with release SAP NetWeaver 2004s and later. After logging into AS ABAP, we can use the transaction SE80 to call the object navigator (Fig. 3.1). Fig. 3.1 Object navigator U. Gellert and A.D. Cristea, Web Dynpro ABAP for Practitioners, DOI 10.1007/978-3-642-11385-7_3, # Springer-Verlag Berlin Heidelberg 2010 11

21. All the repository objects we develop with the ABAP Workbench tool we build by using the Object Navigator. Here, we develop not only Web Dynpro applications, but also other development objects (e.g. reports, database tables, data elements, classes, function modules, etc). The development objects we create as customer have the rst letter y or z. Therefore, we created a Web Dynpro component with the name y_wd_component. We have to assign all the development objects created with ABAP Workbench to a package. We can use the default package $TMP to create test programs without transporting, or we can create our own packages. We choose to create our own package, named Y_WEBDYNPRO (Fig. 3.2). We have chosen the package type Not a Main Package, because this package holds development object and not other packages. After creating the package, we create a Web Dynpro component, as follows: right-click on the package name and, from the context menu, we select Create ! Web Dynpro ! Web Dynpro component. We have to enter the component name, a short description, the type we want to create, the view name and the window name (Fig. 3.3). Fig. 3.2 Creating the package Y_WEBDYNPRO Fig. 3.3 Creating a Web Dynpro component 12 3 Designing a Web Dynpro Component

22. After saving our component, we have to assign it to our package (Fig. 3.4). As a result, in Object Navigator we can see the Package Y_WEBDYNPRO and our rst created Web Dynpro Component (Fig. 3.5). The name of the development objects marked in blue are not active. After creating the Web Dynpro component, we have to activate it (Fig. 3.6). Fig. 3.4 Assigning the component to a package Fig. 3.5 The content of our package 3 Designing a Web Dynpro Component 13

23. 3.1 View Each Web Dynpro application has at least one view. Each View has a view Layout, where we can add different UI (User Interface) elements that can be nested one in the other one, to create the screen. The positioning of the UI elements in a view is realized by using the layout and data layout. Each View has a view controller that is automatically created for this view and each View has several tabs (Properties, Layout, Outbound Plug, Inbound Plug, Attributes, Context, Actions and Methods). This indicates that a View consist of many parts. 3.1.1 View Layout The screen content of a view is designed in the Layout tab. The View Layout is divided in three areas: l UI element library l View designer l Context menus, UI elements properties and UI element hierarchy (Fig. 3.7). Tip In case an error occurs and in the View Layout we cant see UI Element Library and View Designer, we have to map the IP address to the host name, because the Web Dynpro ABAP uses a fully qualied domain name FQDN; in conclusion, the URLs that contain the IP addresses are not supported To realize this mapping, we use the HOSTS le (C:/Windows/system32/drivers/etc) where we enter the IP address and the host name, separated by (at least) one space In case an error occurs: URL http://hostname:port/sap/bc/wdvd call was terminated because the corresponding service is not available we have to activate the respective service by using the SICF transaction Fig. 3.6 WD component activation 14 3 Designing a Web Dynpro Component

24. The UI Elements are grouped in a library to be accessed via the View Layout. We have several ways to add an UI element into the view layout. For example: l By right-clicking on the ROOTUIELEMENTCONTAINER (Fig. 3.8) l By dragging & dropping (Fig. 3.9). All the UI Elements we enter into a screen are children of the node ROOTUI- ELEMENTCONTAINER and are represented as a hierarchy where ROOTUIELE- MENTCONTAINER is the top of this hierarchy. With Swap Root Element we have the possibility to transform ROOTUIELEMENETCONTAINER from a Transparent Container into another UI element (Table, FlashIsland, Group, etc.). In this way, we can use, for example, the FlashIsland UI element to integrate Adobe Flex into our web Dynpro component. This transformation is possible only if the ROOTUIELEMENTCONTAINER doesnt have any child UI elements. Fig. 3.8 Adding UI elements into the view View Designer UI element Library UI elements properties UI elements hierarchy Context Menus Fig. 3.7 View Layout 3.1 View 15

25. In our ROOTUIELEMENTCONTAINER, we insert one Group UI element, one InputField UI element, one Label UI element, one TextView UI element and one Button UI element (Fig. 3.10). If we select individual UI elements in the layout of a view, their properties are displayed in the Properties area. In this way, we can change the properties of each element. For example, we have changed the property design of the button UI element and the property state of the InputField UI element (Fig. 3.11). As a result of changing the property state of the InputField UI element from the Normal item to the required one, the label associated to this UI element becomes a red star and the end user knows that this value is mandatory. For a property, we can create xed character strings, we can choose from a list, or we can bind properties to context nodes or attributes by using the Binding button. For the text property of an UI element Button, we have created a xed character string Save. For the design property, we have chosen from the list one of the supported designs. Group Label Button TextView InputField Fig. 3.10 View layout Drag & Drop Fig. 3.9 Adding UI elements into the view 16 3 Designing a Web Dynpro Component

26. We need to bind the value property of the InputField UI element and the text property of the TextView UI element. To be able to do this, we will create two context attributes. By using Context Menus we have the possibility to create, for an application, our own context menus displayed in the Browser when the user presses right click on an UI element. In standard mode, the web Dynpro Framework offers the default context menus with certain functionalities, e.g. hiding an UI element displayed into the Browser. After running the application, we can test this standard mode by right- clicking on the inputField UI element. 3.1.2 Context View The data are stored in the context and the UI Elements are the only objects the user interacts with. Every View has a Context View where we can create context nodes and attributes. Via data binding, the context of a view controller provides a view with all the required data. For our application, we create two context attributes named NAME and GREETING, of STRING type (Fig. 3.12). To put the data on the screen and to read data from user, we connect the proper UI Elements properties with attributes or nodes. In our case, we connect the property value of the InputField UI element with the NAME attribute. To create a greeting for the user and to show it after the user presses the Save button, we connect the property text of the TextView UI element with the GREETING attribute. These connections are known as data binding (Fig. 3.13). Fig. 3.11 UI element properties 3.1 View 17

27. The effect of the binding is that, at runtime, any data changes are transported in both directions and these changes affect all the properties bound to this element. Fig. 3.13 Data binding Fig. 3.12 Creating an attribute in context view 18 3 Designing a Web Dynpro Component

28. 3.1.3 Actions Some of the UI Elements have special events that are linked with the user actions. The UI element Button is one of these UI elements and thats why we have to create an action that reacts to the user interaction. To do this, we use the Action tab (Fig. 3.14). As we can see, each action has a corresponding event handler method, automati- cally generated by the Framework. An event handler method is a special method of a view controller that has the ONACTION prex followed by the action name. For the SAVE action, the Framework generates the ONACTION event handler. After creating an action, we can assign it to an UI element that has attached an event (Fig. 3.15). After generation, this method is empty, but we can ll it with source code by using the Methods tab. 3.1.4 Methods In the Methods tab of a View, we can nd some types of methods (e.g. event handler methods, Hook methods, user-dened instance methods). Fig. 3.15 Assigning an action to an UI element Fig. 3.14 Creating an action 3.1 View 19

29. In our case, in the Methods tab we can nd the Hook methods, automatically generated by the Framework, and our event handler method ONACTIONSAVE (Fig. 3.16). With double-click on the method name, we open the ABAP editor (Fig. 3.17). In this way, we can insert the source code. The user enters his name that we use to show a greeting message with the help of textView UI element. To create a greeting for the end user, we concatenate his name with the string WELCOME and we pass this string value in the GREET- ING attribute. After this, we reset the inputField UI element. To do this, we pass an empty string into the NAME attribute bound to the corresponding UI element (Listing 3.1). Fig. 3.16 Methods tab Fig. 3.17 ABAP editor 20 3 Designing a Web Dynpro Component

30. For more details about Methods, please see Chap. 7. 3.1.5 Properties In the Properties tab, we can create a description text for our view, we have information about the view and about the person who created and changed this view. In this tab, we can set the view lifetime: l Framework controlled controlled by Framework l When visible lifetime limited to its visibility. A view controller is always deleted as soon as the corresponding view is no longer displayed on the user interface. It is used when a view is displayed only once and not repeatedly. Additionally, Property tab offers the possibility to dene the usages (Fig. 3.18). METHOD onactionsave . DATA: lv_name TYPE string, lv_greeting TYPE string. wd_context->get_attribute( EXPORTING name = `NAME` IMPORTING value = lv_name ). CONCATENATE Welcome lv_name INTO lv_greeting SEPARATED BY space. wd_context->set_attribute( name = 'GREETING' value = lv_greeting ). CLEAR lv_name. wd_context->set_attribute( name = 'NAME' value = lv_name ). ENDMETHOD. Listing 3.1 On action save event handler method Create Controller Usage Fig. 3.18 Properties view 3.1 View 21

31. We can dene a usage to be able to access the methods of another internal controller or of an interface controller, if the usage has been dened for an external component. To create a new usage in the Used Controller/Components table, we have to choose the Button Create Controller Usage. The table Used Controller/ Components includes a list with all the global controllers of our own component and, in case we dene usages, this list includes the external component and its interface controller. In our case, we dont use any external components. In the list we have only the global controller COMPONENTCONTROLLER. We have to specify that, for each view controller, the usage of the corresponding component controller is automati- cally created. 3.1.6 Attributes Each View controller contains some attributes automatically generated by the Framework (Fig. 3.19). The attribute WD_COMP_CONTROLLER is a reference variable of IG_ COMPONENTCONTROLLER type that we can use to access all the publicly accessible methods of the component global generated interface of the corresponding component controller. The attribute WD_THIS is a self-reference to local controller interface. This self-reference works similarly with the self-reference me found in the ABAP Objects. We can use it, for example, to call a user-dened method. The attribute WD_CONTEXT is a reference to the controller context. The IF_WD_CONTEXT_NODE interface provides several methods that enable us to obtain read and write access to a context node. Additionally, we can create our own attributes. These attributes are used to store application data that are not relevant for the UI elements and we dont store in the context. To access these attributes, we use the self-reference: wd_this ! attribute_name Fig. 3.19 Attributes tab 22 3 Designing a Web Dynpro Component

32. 3.2 Componentcontroller By default, every Web Dynpro component has a component controller that acts as the central controller instance within the entire component (Fig. 3.20). Data required across different views can be stored in his context. Besides the Context tab, each COMPONENTCONTROLLER disposes of tabs: Properties, Attributes, Events and Methods. Hereunder, in our examples, we will see how we can cross-component access the methods and the attributes dened here. 3.3 Window A Window is an entity into which we embed all the views that will be used to construct the screen for the end user. When the user interacts with a view, their interaction will cause a request to the server. In response, one or more views that build the current screen will require to be replaced with other views. This is possible through navigation links among the various views in the window. Each Web Dynpro component can have several Windows. We have created only one Window, named W_default. A view or several Views are generally embedded in a Window. The rst view created at the WD component creation is directly embedded into the Window. To embed other views in a Window, we can use dragging & dropping or right-clicking on the window name to choose between embedding an empty view or the View we have created. The Empty View is a special type of View, presented in the View- ContainerUIElement example (Fig. 3.21). In every window, at least one view is marked as default. A default view is the rst view displayed when the window is called. The rst embedded view is marked as default, but we can change it. To mark as default, after right-clicking on the view we choose Set as default from the contextual menu. Fig. 3.20 Component controller 3.3 Window 23

33. By using Inbound plugs and Outbound plugs, we dene the navigation between views or windows. For a Window, these plugs can be of Standard, Startup or Resume type. As we can see, the Framework generates for each window an inbound plug of Startup type and an event handler method (Fig. 3.22). By using this event handler method, we can read, for example, the URL parameters from a Web Dynpro application. For a View, we dont have the possibility to dene a specic plug type. 3.4 Application After developing a Web Dynpro component, we need to provide the users with access to its functionality. To do this, we have to create a Web Dynpro Application (Fig. 3.23). Fig. 3.21 Embed View Fig. 3.22 Default inbound plug for a window 24 3 Designing a Web Dynpro Component

34. For each application, the Framework generates an URL. We nd this URL in the Properties tab (Fig. 3.24). In the same time, we can specify here how the Messages are handled: l Show Message Component on demand the Message Component is displayed only when we have a message. l Always Display Message Component the Message Component is always displayed on the screen, even when we dont have any messages. Fig. 3.23 Creating an application Fig. 3.24 Application URL 3.4 Application 25

35. By using the Parameters tab, we can dene our own parameters for the applica- tion or we can choose from the parameters offered by the Web Dynpro Framework (Fig. 3.25). To run the application, we can use the Execute button or we can copy and past the URL into the browser (Fig. 3.26). When the user interacts with the screen, specic adapter techniques are used to convert data and events, as part of the request response cycle, into the browser format as HTML, JavaScript or XML. In Fig. 3.27, we can see the generated source code for our WD component. Fig. 3.25 Application parameters list Standard Context Menus Fig. 3.26 Running the application 26 3 Designing a Web Dynpro Component

36. 3.5 ABAP Debugger If any errors occur in our Web Dynpro components, we can use the ABAP Debugger to execute our WD component, by line or by section. To work with the debugger, we can create Breakpoints at the point where the program should pause (Fig. 3.28). Fig. 3.27 Generated source le Click Fig. 3.28 Setting a Breakpoint 3.5 ABAP Debugger 27

37. We run the application and, in the moment when the program ow reached the dened breakpoint, the ABAP Debugger is open (Fig. 3.29). As we can see in the Process Information, the main component of the ABAP Debugger, we debug an HTTP application. The Exclusive represents the fact that the application we debug occupies a work process of the application server. By using the Buttons from the Control Area, we can control the program ow. For example, we can choose to execute the program line by line Single step, or to execute the program up to the next Breakpoint Continue. We can use the ABAP Debugger tools to have information about the variable (Fig. 3.30). By using the New Tool button , we can open a selection window that offers the possibility to access additional functionalities. In the Special Tools section, we can nd the created tool, to be used for a better debugging of the Web Dynpro components (Fig. 3.31). Fig. 3.29 ABAP Debugger Fig. 3.30 Tool Component of the ABAP Debugger 28 3 Designing a Web Dynpro Component

38. As we can see in Fig. 3.32, we are offered the possibility to have access to all the individual elements of the Web Dynpro component; we can see the view attributes, the view layout, the UI elements and data binding, the context structure and its attributes, etc. Fig. 3.31 ABAP Debugger New tool selection window Fig. 3.32 The ABAP debugger web Dynpro ABAP tool 3.5 ABAP Debugger 29

39. We are able to see not only the context structure, but also to display the runtime object, by choosing from the contextual menu Display Runtime Object (Fig. 3.33). These are only some of the ABAP Debugger capabilities that can be used along with other performance tools (for example, the transactions WD_TRACE_TOOLS, S_MEMORY_INSPECTOR), to help us to develop Web Dynpro applications. 3.6 Web Dynpro Logon Page Conguration As we have seen, a logon page appears when running our application, where we have to provide some values, as follows: Logon Language, Client, User Password, etc. (Fig. 3.34). Fig. 3.33 Displaying the runtime object Fig. 3.34 Example of a web Dynpro application logon page 30 3 Designing a Web Dynpro Component

40. We can change the modality this logon page looks like and the modality we realize the user authentication, by using the SICF transaction (HTTP Service Hierarchy Maintenance). In the webdynpro ! sap hierarchy, each Web Dynpro application disposes of one corresponding entry. By using this transaction, we search for all the entries that begin with Y_WD_* and are created by our test user Gellert (Fig. 3.35). We nd the entry that corresponds to our created Web Dynpro component (Fig. 3.36). With double-click, we are allowed to view or/and to change this service. In the lower part of the Error Page tab, we can nd the Conguration button for the system logon. Here, we can dene our own settings by choosing from the lists, or we can use the global settings (Fig. 3.37). Fig. 3.35 Searching for a service with the SICF transaction Fig. 3.36 Entry corresponding to our Web Dynpro component 3.6 Web Dynpro Logon Page Conguration 31

41. As a result of our changes, in the logon page we have to provide only the User and the Password, through a popup window, and we are able to change our logon password (Fig. 3.38). Fig. 3.37 System logon conguration Fig. 3.38 Logon page 32 3 Designing a Web Dynpro Component

42. Chapter 4 ABAP Dictionary Mystery creates wonder and wonder is the basis of mans desire to understand Neil Armstrong Abstract The following section details and describes the ABAP Dictionary. The main purpose of this chapter is to show how to realize all the development objects to be used in the future Web Dynpro applications. Therefore, we present not only the modality to create the various development objects in the ABAP Dictionary, but also the modality to use them in realizing Web Dynpro applications. We can create development objects in ABAP Dictionary, by using the transaction SE11 (ABAP Dictionary Maintenance) or the Object Navigator (Fig. 4.1). ABAP programming language has a number of ten elementary data types that we can use in our programs. When we want to create global data types by using the ABAP Dictionary, we have to use dictionary built-in types. These predened types are different from the elementary data types. We need them for reasons of compati- bility with the external data types. Fig. 4.1 Development object with transaction SE11 U. Gellert and A.D. Cristea, Web Dynpro ABAP for Practitioners, DOI 10.1007/978-3-642-11385-7_4, # Springer-Verlag Berlin Heidelberg 2010 33

43. In Fig. 4.2, we presented some of the ABAP Dictionary Built-In types and a few corresponding examples of Dictionary built-in data types and ABAP elementary types. 4.1 Data Element A data element denes an elementary data type and has certain properties. We create a data element YDATEOFBIRTH (Fig. 4.3). Dictionary ABAP type Example CHAR c DATS d INT4 i NUMC n STRING string TIMS t RAW - x RAWSTRING- xstring FLTP - f DEC - p Fig. 4.2 Some of ABAP Dictionary Built-In types and corresponding ABAP elementary types Fig. 4.3 Denition of a data element 34 4 ABAP Dictionary

44. In the Data Type tab we can choose between the elementary type and reference type. The elementary type can be a domain and a build-in type. In this case, we have chosen the build-in type DATS that has a predened format (YYYYMMDD) and a predened length 8. In the tab Field Label, we can set a eld label that is automatically shown in the label, or caption of an UI Element that is bound to an attribute of this type. For a data element, we can create documentation F1 Help with Goto ! Docu- mentation ! Change. This documentation is not seen on screen if the Web Dynpro application attribute WDHIDEMOREFIELDHELPASDEFAULT was set as ABAP_TRUE. We create a text that describes the content of our data element (Fig. 4.4). 4.2 Domain A domain denes a value range. To be able to use it in a Web Dynpro application, in other repository object, as parameter in GUI programming, etc. we have to assign it to a data element (Fig. 4.5). Fig. 4.4 Creating a F1 help for a data element 4.2 Domain 35

45. We create a domain named Y_COUNTRY_DOMAIN that holds all the names of EU member states, with the proper abbreviation. In Denition tab we have to specify properties as data type, number of characters or length of output (Fig. 4.6). In Value Range we have three possibilities: l Single values l Intervals l Value table Fig. 4.5 Data elements and domains Fig. 4.6 Denition of a domain tab Denition 36 4 ABAP Dictionary

46. We begin with the rst possibility, Single values. We dene the domain xed values all the abbreviations of the EU countries, and a short text the corresponding country names (Fig. 4.7). As we have specied, to be able to use a domain we have to assign it to a data element. To do this, we create a new data element and we choose the elementary type domain (Fig. 4.8). When we use this data element in our Web Dynpro application, for example to dene a parameter or a context attribute, the user is allowed to choose only the values that range among values we have dened in Domain. To explain the next possibility (Intervals), we take an example where we need to store, in a table column, the ages between 18 and 45. In this case, we can use an interval to limit the values that the user may enter (Fig. 4.9). Fig. 4.7 Denition of a domain tab Value Range Fig. 4.8 Assigning a domain to a data element 4.2 Domain 37

47. We use this interval in the database table YPERSON, dened hereinafter. For this, we assign it to a data element Y_DEINTERVAL. To explain the last possibility (Value Table), we use a domain that is dened in the system: WAERS (Fig. 4.10). It is recommendable to use the value table when we have many xed values. In our case, we have used the system table TCURC. This table holds all the system currency. We use this value table in the database table YEU_COUNTRIES, dened hereunder. For this, we assign it to a data element Y_CURRENCY. 4.3 Structure Structures consist of any combination of other data types of the ABAP Dictionary. In Fig. 4.11, we present a structure with three components: FIRSTNAME, LAST- NAME and DATEOFBIRTH. Fig. 4.9 Denition of a domain interval Fig. 4.10 Domain WAERS value table 38 4 ABAP Dictionary

48. For each component it is dened a component type, as follows: a data element, other structure, table type, etc. As a component type for a structure, we can choose a type that is already dened in the ABAP Dictionary, or we can create a new type. For example, the component DATEOFBIRTH has YDATEOFBIRTH data type. This data type has been already dened. If we want to create a new type for a component, we have to enter its name (for example, YFIRSTNAME) and then, with double-click, we can choose the new type (Fig. 4.12). After we create a structure, we have to maintain the enhancement category: Extras ! Enhancement Category, from the menu. In case we dont want to further extend the component structure, we choose Cannot be Enhanced (Fig. 4.13). Fig. 4.11 Denition of a structure Fig. 4.12 Creating a new component type Fig. 4.13 Maintaining enhancement category 4.3 Structure 39

49. We can use the structures dened in ABAP Dictionary to create the context node structure for a Web Dynpro application. 4.4 Table We create two transparent tables, YPERSON and YEU_COUNTRIES. We will use this table later, for our Web Dynpro example. In the YPERSON table, we want to store the competition candidates. All the candidates should be 1845 years old and live in an EU country. After creating the table, we have to enter a short description along with the delivery and maintenance (Fig. 4.14). We set Data Browser/Table View Main ! Display/Maintenance Allowed, to be able to populate our table with values, using Create Entries, from the menu. Then, we will dene our table structure. To do this, we select the tab Fields and enter the table columns (Fig. 4.15). For the elds MANDT and ID_PERSON, we have marked the option Key, meaning they are the table keys. The eld MANDT is the SAP client eld, a three-character client ID. The eld ID_PERSON repre- sents the candidates ID, required to uniquely identify each competition candidate. Fig. 4.14 Table maintenance Fig. 4.15 Table structure 40 4 ABAP Dictionary

50. As can be seen, we have used the data elements created hereinbefore: YFIRST- NAME, YLASTNAME, Y_DEINTERVAL, Y_DEFORDOMAIN. When we want to create a new data element, we write its name and, with double-click, we activate the forward navigation. If this data element doesnt exist, we are asked if we want to create the new data element (Fig. 4.16). Before being able to activate this table, we have to maintain the technical settings (Fig. 4.17). We choose a size category 0, because we dont require many data records. We have to maintain the enhancement category: Extras ! Enhancement Category, from the Menu. We choose the same Cannot be Enhanced, because we shouldnt further extend the table structure. After this, we can activate our table and create the second table YEU_COUN- TRIES. We hold here all the EU Member states information, as follows: country Fig. 4.16 Creating a data element Fig. 4.17 How to maintain the technical settings for the table YPERSON 4.4 Table 41

51. name, year of EU entry, political system, capital city, currency and the ag image name. The structure of this table is presented in Fig. 4.18. After this, we have to dene a foreign key for the eld CHECK_CUR. For this purpose, we use the button Foreign Keys. We are asked if we want to use the value table TCURC as check table (Fig. 4.19). We need TCUC as a check table, because we want to use its table contents, respectively the Currency Codes (Fig. 4.20). Fig. 4.18 Table structure Fig. 4.19 How to create foreign key 42 4 ABAP Dictionary

52. After we maintain the Technical settings and enhancement category, we can activate the same as for the table YPERSON. The candidates can live only in an EU country. Therefore, we create a 1 to CN relationship between the tables. From the table YPERSON eld ID_COUNTRY, we create a foreign key, (Fig. 4.21). Fig. 4.20 Currency codes Fig. 4.21 How to create a foreign key 4.4 Table 43

53. The system can generate the graphical representation of the relationships we have dened between tables. To show this graph, we use the Button Graph (Fig. 4.22). We can see our tables YEU_COUNTRIES, YPERSON and the 1:CN relation- ship. The table TCUC is the check table for the table YEU_COUNTRIES. To see this relationship also, we have to select the name of YEU_COUNTRIES table and to press the Button Check Table (Fig. 4.23). We can create contents with Utilities ! Table content ! Create Entries from Menu (Fig. 4.24). Fig. 4.22 Foreign key relationship Fig. 4.23 Foreign key relationship 44 4 ABAP Dictionary

54. To display the content: Utilities ! Table content ! Display from Menu (Fig. 4.25). Tip With Utilities ! Database Object ! Database Utility or through the transaction SE14, we can use the Database Utility to activate and adjust a database table, in case we have changed its structure and an activation error is shown. We can use the Database Utility not only to activate and adjust a database, but also for other basic functions, as to create or delete a database table We can use the transparent tables dened in the ABAP Dictionary to create the context node structure for a Web Dynpro application. 4.5 Search Help ABAP Dictionary offers the possibility to create simple search help and collective search help. To create a search help, we can use the context menu of our package (Fig. 4.26). Fig. 4.24 Insert table YEU_COUNTRIES Fig. 4.25 Select table YEU_COUNTRIES 4.5 Search Help 45

55. We create a simple search help YSH_ID_PERSON for the column ID_PERSON of the table YPERSON (Fig. 4.27). As can be seen at Data collection ! Selection method, we have used the table name YPERSON. This means that all the data required come from our table YPERSON. A search help can have the following parameters: import parameters, export parameters or no import and no export. We have used ID_PERSON as export parameter, because we want its value to be returned to the input template. LPos represents the parameter position in the hit list: FIRSTNAME has the position Fig. 4.26 Creating a development object in the ABAP Dictionary by using the Object Navigator Fig. 4.27 Creating a simple search help 46 4 ABAP Dictionary

56. 1 and it is rstly displayed in the hit list, and LASTNAME has the position 2, being displayed after the FIRSTNAME. We can test a search help (Fig. 4.28). Afterwards, we want to use this search help in a Web Dynpro application. We create a search option for a competitor. The user has to enter the competitors ID into a search mask. The list of IDs is limited to the number of competitors. When the user doesnt know the competitors ID, he uses the search help and can choose the competitors name. The content of the ID_PERSON parameter is returned to the search mask as soon as the user has selected a line of the hit list in the input help. In this way, we facilitate the input. We can use this search help if we link it with the ID_PERSON column of the YPERSON table. To do this, we select the column ID_PERSON and press the button Srch Help (Fig. 4.29). Fig. 4.28 Testing a search help Fig. 4.29 Search Help for the eld ID_PERSON 4.5 Search Help 47

57. After we enter the search help name, we have to create the search help attach- ment, and to save and activate the table (Fig. 4.30). In this way, we have created a simple search help for the column ID_PERSON of the table YPERSON. When we use this column in Web Dynpro, the Framework creates a special icon to be used at the runtime to call the input help. Moreover, we can use the keyboard key F4 to call an input help. To be able to access a search help from a WD component, the proper Input Help Mode context attribute property has to be set (Automatic or Dictionary Search Help). 4.6 Database View By using a view, we can combine the data distributed in several tables. For a better understanding, we create a view on the tables YPERSON and YEU_COUNTRIES. When we create a view, we can choose one of the four view types (Fig. 4.31). Fig. 4.30 How to create search help attachment to the column ID_PERSON Fig. 4.31 View types 48 4 ABAP Dictionary

58. We choose to create a database view named YVIEW_CMPETITION. At the beginning of the view denition, we have to select the view base table (in our case, the table YPERSON). After the base table denition, we link this table by dening the joining condi- tions. To create this link, we use the button Relationships (Fig.4.32). As result, the join conditions are generated (Fig. 4.33). In the next step, we have to select the elds we need in our view. We can enter each eld manually or we can use the Button Table elds (Fig. 4.34). Fig. 4.32 Creating a view Fig. 4.33 Joining conditions 4.6 Database View 49

59. After activation, we can see our view content using the Contents Button (Fig. 4.35). In this way, we have created a database view on the tables YPERSON and YEU_COMPETITION (Fig. 4.36). Fig. 4.34 View elds Fig. 4.35 View content Fig. 4.36 View denition on the database 50 4 ABAP Dictionary

60. By using this view, we can create the context node structure for our Web Dynpro application and so we simultaneously select the logically connected data, from two tables. 4.7 Table Type We create a table type named YTABLE_TYPE, the line type being our YPERSON table (Fig. 4.37). For the line type, we can use an existing type (table, structure, view, . . .) or we can enter the data type, length and number of decimals. The typical use of table type is the declaration of an internal table. Another example of using table type is to populate with values a context node via a supply function. To be able to do this, we create a table type named YTABLE_ TYPE_STRUCTURE with the line type the structure YSTR_PERSON (Fig. 4.38). In the next chapter, we show how we can use this table type to populate a context node. Fig. 4.37 Creating a table type Fig. 4.38 Table type line type structure 4.7 Table Type 51

61. 4.8 Lock Object We create a Lock Object for the database table YPERSON (Fig. 4.39). The lock object name has to begin with the prex E (from Enqueue). Our case consists of exactly one table, and the lock argument is the primary key of this table. The lock mode is set to write, but can be overwritten. After the lock object activation, the ABAP Dictionary generates two Function Modules, named ENQUEUE_ and DEQUEUE_. The Function Modules with enqueue prex help us to set a lock, and the Function Modules with dequeue prex help us to release the locks. With the SE37 transaction we can see the two generated Function Modules: ENQUEUE_EYPERSON and DEQUEUE_EYPERSON. Figure 4.40 shows the structure of the Function Module required to set a lock. Fig. 4.39 Lock object Fig. 4.40 Function Module for lock setting 52 4 ABAP Dictionary

62. SAP offers a lock mechanism required to provide two transactions by simulta- neously changing the same data in the database. The lock table represents a table in the memory of the enqueue server and is used to manage all the locks in the system. This lock table is checked every time when the enqueue server receives a lock request. A program sends, to the lock table, the key of the table entries it wants to lock; if no lock is set, the request is accepted and the new lock is written in the lock table. If a lock is set, the request collides with an existing lock and the request is rejected. 4.8 Lock Object 53

63. Chapter 5 Context Nodes and Attributes at Design Time Well done is better than well said. Benjamin Franklin Abstract This chapter mainly focuses on the context nodes and attributes statically realized at design time. In this respect, we will explain not only the role and modality to create context nodes and attributes, but also the modality to access the values stored in the attributes of the nodes. An attribute is a context entity that has certain properties and can be directly created in the root node CONTEXT, or as a child for another node. Usually, a node is used to group more attributes that belong together. In Fig. 5.1, we present a context example created in a view context. A context node can have attributes or can hold other nodes, but a context attribute cannot have other attributes or nodes. We create a hierarchical arrange- ment that has, as the start point, the root node CONTEXT. This is automatically created when the controller is initialized and all the nodes and attributes we created are children of this root node. Independent node Independent node Dependent node or child node for FACULTY Attributes of STUDENT node Attributes of ADDRESS node Attributes of Faculty node Attribute created in context Fig. 5.1 Example of the structure of a View Context U. Gellert and A.D. Cristea, Web Dynpro ABAP for Practitioners, DOI 10.1007/978-3-642-11385-7_5, # Springer-Verlag Berlin Heidelberg 2010 55

64. The data hold in the context nodes and attributes are transient, they exist only for the lifetime of the controller. After this, all the data are lost if we dont store them in storage media (e.g. database table). 5.1 Attributes To create an attribute, we have to select the node where the attribute should be inserted (in this case, the root context node) and, with right-click, to open its context menu (Fig. 5.2). We have to enter the attribute properties name and type are required, but the other settings are optional (Fig. 5.3). As data type for an attribute, we can use a data type as string, xstring, d, i or we can use the data type dened in the ABAP Dictionary. In our example, the attribute type YDATEOFBIRTH is a data element dened in the ABAP Dictionary. In the system, we nd a list with all the data types we can use for an attribute (Fig. 5.4). The coding presented in Listing 5.1 shows how we can access, in a method, the value of the attribute created in the context node. Fig. 5.2 Creating an attribute Fig. 5.3 Dening the attribute properties 56 5 Context Nodes and Attributes at Design Time

65. We have dened a local variable named lv_dateofbirth of YDATEOFBIRTH type, the same type as the attribute. We pass the value of the attribute DATEOF- BIRTH in our local variable, by using the method get_attribute of the interface if_wd_context_node. The interface if_wd_context_node has many methods we can use to work with context nodes. We can see all the available methods of this interface by double-clicking on the get_attribute method. To set the value of an attribute, we can use the method set_attribute of the same interface. As can be seen in Fig. 5.4, the property Input Help Mode of the attribute is set AUTOMATIC. This means that it is used the search help assigned to the data type of the context attribute in the ABAP Dictionary. In principle, we have a data element of D type. This is the reason why we will have a CALENDAR as input help (Fig. 5.5). Fig. 5.4 Searching for an attribute data type DATA lv_dateofbirth type ydateofbirth. wd_context->get_attribute( EXPORTING name = 'DATEOFBIRTH' IMPORTING value = lv_dateofbirth ). Listing 5.1 Access of an attribute from context node Fig. 5.5 Calendar input help 5.1 Attributes 57

66. The read-only property set no means that the attribute is not write- protected. To put data on the screen and to read data from user, we connect the proper UI Elements properties with the attributes or nodes. The data are stored in the attributes, the UI Elements being the only object the user interacts with. For our example, we have an UI Element InputField where the user enters his date of birth. Web Dynpro Framework transports these data from the UI element to the attribute DATEOFBIRTH when the user presses the SAVE Button, after he enters the value. The attribute keeps the value for further processing. To be able to access the value of this attribute in our methods, we have to pass this value in a local variable (lv_dateofbirth). We can use this value, change it or pass the new value back in the context (Fig. 5.6). This value is kept in the context for the lifetime of the controller. Then, these data are lost if we dont store them. 5.2 Nodes We can directly create a node in the context root node or as child for other node. In Fig. 5.7 we show how we can create a node. ABAP Dictionary Fig. 5.6 Connection among attribute, ABAP Dictionary, method and UI Element Fig. 5.7 Creating a node 58 5 Context Nodes and Attributes at Design Time

67. For each node we create, we have to set some properties, as: cardinality, selection, etc. We can individually create the attributes for a node, or we can use some repository objects from the ABAP Dictionary. For example, when we work with tables, structures or views dened in the ABAP Dictionary, we can use them to dene our node, and the attributes will be automatically generated. 5.2.1 Creating a Node that Uses an ABAP Dictionary Repository Object We create a context node that uses the ABAP Dictionary structure YSTR_PERSON (Fig. 5.8). The Button Add Attribute from Structure allows us to add all the structure components or only a part of them (Fig. 5.9). Fig. 5.8 Node properties Fig. 5.9 Selecting components of Structure 5.2 Nodes 59

68. Because we need a proper attribute for all these structure components, we select all of them. As result, we have created a node, the attributes being automatically generated according to the structure components we have selected (Fig. 5.10). The properties of the node we have chosen are: cardinality 0. . .n, singleton yes and Init. Lead Selection yes. The cardinality properties are very important, because they tell us how many elements a context node may have at runtime. We have four possible values: l 1. . .1 Exactly one context element is instantiated l 0. . .1 Maximum one context element is instantiated l 0. . .n Zero or more context elements are instantiated l 1. . .n One or more context elements are instantiated The singleton property can be set YES or NO. When a node is singleton at the runtime, we have only one instance of this node. As usage example, for a non- singleton node we can specify the context structure required for a Tree UI Element sequential implementation. The Lead Selection Initialization property determines if the lead selection should be automatically set or manually programmed. In our case, this property is set YES, meaning that the lead selection is AUTOMATIC and the rst element of this node it automatically selected. More details about lead selection Table UI element. For our node, we have dened the supply function named supply_student. Each node may have a supply function dened for it and automatically called by the Web Dynpro Framework. The scope of using a supply function is to populate a context node. In certain cases, we can use the Hook Method wdDoInit instead of a supply function. For more details, see the Hook Methods chapter. The coding presented in Listing 5.2 shows how we can use the supply function method to populate the context node STUDENT with three values. We have dened two variables: ls_student and lt_student. Ls_student is of type if_view_name=>element_student, where view_name represents the view name and student represents the node name. if_view_name represents the programming interface for our view controller. By double-clicking on his name or clicking on the icon Display Controller Interface ( ), we can see the Fig. 5.10 Context node STUDENT at design time 60 5 Context Nodes and Attributes at Design Time

69. coding of this interface. Listing 5.3 shows a coding part for the context node STUDENT. As can be seen, Element_Student is of YSTR_PERSON type (our ABAP Dictionary structure). But, when we manually create context nodes without dictio- nary structure, in the view controller programming interface, a new structured type is created (Listing 5.4). This is why we use the following form to append values: ls_student-rstname Ionescu. constants: wdctx_Student type string value `STUDENT`. types: Element_Student type YSTR_PERSON, Elements_Student type standard table of Element_Student with default key. .. Listing 5.3 Example of view controller programming interface METHOD supply_student . DATA ls_student TYPE if_view_name=>element_student. DATA lt_student LIKE TABLE OF ls_student. ls_student-firstname = 'Ionescu'. ls_student-lastname = 'Ana Maria'. ls_student-dateofbirth = '19700309'. APPEND ls_student TO lt_student. ls_student-firstname = 'Marinescu'. ls_student-lastname = 'Loredana'. ls_student-dateofbirth = '19800523'. APPEND ls_student TO lt_student. ls_student-firstname = 'Marton'. ls_student-lastname = 'Luminita'. ls_student-dateofbirth = '19831108'. APPEND ls_student TO lt_student. node->bind_table( new_items = lt_student ). ENDMETHOD. Listing 5.2 Example of supply function Method .. types: begin of Element_Faculty, FACULTY_NAME type String, SPECIALIZATION type String, end of Element_Faculty, Listing 5.4 Example of view controller programming interface 5.2 Nodes 61

70. The way we append values in an ABAP structure is: structure_name-component_name value With the declaration DATA lt_student LIKE TABLE OF ls_student, we declare an internal table. We use APPEND statement to add each new line at the end of the last line of the internal table. At the end, we use the bind_structure method to populate the node with values. Instead of the declaration: DATA ls_student TYPE if_view_name=>element_student. we can use: DATA ls_student TYPE wd_this->element_student. In this way, we dont need the view name anymore, because we use the wd_this self-reference. The runtime structure is presented in Fig. 5.11. The node STUDENT was set Singleton, it has only an instance at runtime and the cardinality was set 0. . .n, meaning that, at runtime, we can have from zero to n elements. Because the lead selection was set YES, it was selected the rst element of the node. To read, set or append a context node or attribute, we can use the Web Dynpro Code Wizard (Fig. 5.12). The option As table operation can be used in combination with the Read, Set or Append options for a node that allows the usage of this combination. We can read, for example, the entire context node STUDENT in an internal table. DATA lt_student TYPE wd_this->elements_student. lr_node->get_static_attributes_table( IMPORTING table = lt_student). Element 1 Root Node Node STUDENT Ionescu Ana Maria 19700309 Marinescu Loredana 19800523 Marton Luminita 19831108 Element 2 Element 3 Fig. 5.11 The runtime structure 62 5 Context Nodes and Attributes at Design Time

71. In this case, the wizard has generated a variable lt_student of type wd_this-> elements_student. In Listing 5.3 we saw that, in Interface Controller, besides the denition of a variable, the Element_structure Framework has also dened a variable Elements_Student, with the form: Elements_Student type standard table of Element_Student with default key. This is the reason why the Wizard offers the possibility to read all the values from the STUDENT node in lt_student. As we have mentioned in the last chapter, we can use a table type to populate with data a context node via a supply function. Our node STUDENT has its attributes from the YSTR_PERSON structure. The table type YTABLE_TYPE_ STRUCTURE dened in the ABAP Dictionary has the same YSTR_PERSON structure, as line type. Listing 5.5 shows how we can use a table type to populate with data a con- text node. Fig. 5.12 Web Dynpro Code Wizard, reading a context node or attribute METHOD supply . DATA: lt_student TYPE ytable_type_structure . DATA: ls_student TYPE ystr_person. ls_student-firstname = 'Ionescu'. ls_student-lastname = 'Ana Maria'. ls_student-dateofbirth = '19700309'. APPEND ls_student TO lt_student. ls_student-firstname = 'Marinescu'. ls_student-lastname = 'Loredana'. ls_student-dateofbirth = '19800523'. APPEND ls_student TO lt_student. node->bind_table( new_items = lt_student ). ENDMETHOD. Listing 5.5 Example of supply function Method 5.2 Nodes 63

72. 5.2.2 Working with Child Nodes We create the context structure presented in Fig. 5.13. It has a context node FACULTY, cardinality 1. . .1, Singleton with child node ADDRESS, cardinality 1. . .1, Singleton and two attributes FACULTY_NAME type STRING and SPECIALIZATION type STRING. We read data from the attributes of the node ADDRESS as a child node for FACULTY. Listing 5.6 shows a possible method to read these attributes. With the rst data denition, we create two variable lr_node and lr_subnode of if_wd_context_node type. With the second data denition, we create three variables with the same data type as the attributes we want to read. Data type Y_CHAR represents a data element dened in the ABAP Dictionary of CHAR type, length 6. Instead of the declaration: lr_node wd_context->get_child_node( FACULTY). we can use the form: lr_node wd_context->get_child_node( name wd_this->wdctx_faculty). Fig. 5.13 Example of child node DATA: lr_node TYPE REF TO if_wd_context_node, lr_subnode TYPE REF TO if_wd_context_node. DATA: lv_street TYPE string, lv_number TYPE y_char, lv_city TYPE string. lr_node = wd_context->get_child_node( 'FACULTY' ). lr_subnode = lr_node->get_child_node( 'ADDRESS' ). lr_subnode->get_attribute( EXPORTING name = 'STREET' IMPORTING value = lv_street ). lr_subnode->get_attribute( EXPORTING name = 'NUMBER' IMPORTING value = lv_number ). lr_subnode->get_attribute( EXPORTING name = 'CITY' IMPORTING value = lv_city ). Listing 5.6 Reading the attributes values of the child node ADDRESS 64 5 Context Nodes and Attributes at Design Time

73. In the rst case we have to write with capital letters the node name, and in the second case we use the constant wdctx_faculty of string type, dened by the Framework in Interface Controller, with the form: constants: wdctx_faculty type string value FACULTY. By using the get_child_node method of if_wd_context_node interface, we successively access the node FACULTY and the node ADDRESS, and by using the method get_attribute, we pass the values of the attributes in our local variable. Another possibility to read the values of the ADDRESS child node attributes is presented in Listing 5.7. In this case, we have used the get_static_attributes method that supplies a copy of all the static attributes for the ADDRESS child node. After this, we are able to access the attributes values through the local structure ls_subnode. Listing 5.8 shows how we can populate with values the elements of the ADDRESS child node. DATA: lr_node TYPE REF TO if_wd_context_node, lr_subnode TYPE REF TO if_wd_context_node, ls_subnode type wd_this->element_address. DATA: lv_street LIKE ls_subnode-street, lv_number LIKE ls_subnode-number, lv_city LIKE ls_subnode-city. lr_node = wd_context->get_child_node( 'FACULTY' ). lr_subnode = lr_node->get_child_node( 'ADDRESS' ). lr_subnode->get_static_attributes( IMPORTING static_attributes = ls_subnode ). lv_street = ls_subnode-street. lv_number = ls_subnode-number. lv_city = ls_subnode-city. Listing 5.7 Reading the attributes values of the child node ADDRESS DATA: lr_node TYPE REF TO if_wd_context_node, lr_subnode TYPE REF TO if_wd_context_node, ls_subnode TYPE if_view_name=>element_address. lr_node = wd_context->get_child_node( 'FACULTY' ). lr_subnode = lr_node->get_child_node( 'ADDRESS' ). ls_subnode-street = 'Pforzheimer'. ls_subnode-number = '106A'. ls_subnode-city = 'Pforzheim'. lr_subnode->set_static_attributes( ls_subnode ). Listing 5.8 Populating the attributes of the ADDRESS node 5.2 Nodes 65

74. Chapter 6 Data Binding, Context Mapping and Interface Methods You cant stay in your corner of the forest waiting for others to come to you. You have to go to them sometimes. A. A. Milne Abstract This chapter starts with the presentation of the mechanism used to manipulate data between the context attributes and UI elements, mechanism called, in Web Dynpro, data binding. We continue with the mechanism of sharing data among the various controllers, which is realized by using different variants of context mapping. Finally, we highlight the importance of the interface methods required to access them cross-component. In the last chapter, we have created context nodes and attributes in the context view. A node or attribute can be created in each context. When we create an attribute in the context view, this value is visible only in this context view. The mechanism for sharing data among different controllers is known as context mapping. A context mapping can be internal, when the nodes we map are within the same component, and external, when the mapping is cross-components. To put data on the screen and to read data from users, we have to link the UI elements properties with the proper context attributes. This process is known as data binding. All the data we show to the user or read from the user by using Web Dynpro are manipulated through context nodes and attributes. 6.1 Data Binding Each UI element has certain properties. With data binding, we dene which node or attribute from the context will act as a data source for an UI element property. To exemplify the data binding mechanism, we create a component named Y_DATABINDING with a view named V_BIND and a window W_DEFAULT (Fig. 6.1). U. Gellert and A.D. Cristea, Web Dynpro ABAP for Practitioners, DOI 10.1007/978-3-642-11385-7_6, # Springer-Verlag Berlin Heidelberg 2010 67

75. In context view, we create a context node STUDENT with the same dictionary structure YSTR_PERSON (Fig. 6.2). We create a WD component that reads the user inputs in the attributes FIRST- NAME, LASTNAME and DATEOFBIRTH. When the user presses the SHOW button, these data are shown by means of TextView UI Elements (Fig. 6.3). VIEW V_BIND View controller Data binding Fig. 6.3 Example of data binding Fig. 6.2 Structure of STUDENT node Fig. 6.1 Structure of Y_DATABINDING component 68 6 Data Binding, Context Mapping and Interface Methods

76. We have many possibilities to make a data binding. For example, we can: (a) Create a Container Form for a context node (b) Use the Web Dynpro Wizard (c) Create data binding for each attribute (a) To create a Container Form, we add a Group UI element and then, by right- clicking, we choose from the contextual menu Create Container Form (Fig. 6.4). After this, we can choose which context node we use for data binding and which type of UI Element is associated to each attribute (Fig. 6.5). Fig. 6.4 Creating container form Fig. 6.5 Data binding 6.1 Data Binding 69

77. As a result, the Framework generates for each context attribute an UI element InputField and a proper label, and makes the data binding between each UI element property (value) and the context attribute (Fig. 6.6). To create a Container Form, we can use each UI Element of container type. (b) To create a data binding, we can use the Web Dynpro Wizard button (Fig. 6.7). In case we use the Form option, the Framework generates a transpar- entContainer UI element