CONTEXT-AWAREUICOMPONENTREUSEFORWEB SERVICEDEVELOPMENTENVIRONMENTS kerstin klemisch, mba supervisor: prof. boualem benatallah co-supervisor: ingo weber, phd PhD Thesis School of Computer Science and Engineering Faculty of Engineering March 2015 [ Context-aware UI Component Reuse for Web Service Development Environments ] kerstin klemisch, mba CONTEXT-AWAREUICOMPONENTREUSEFORWEB SERVICEDEVELOPMENTENVIRONMENTS [ Context-aware UI Component Reuse for Web Service Development Environments ] Kerstin Klemisch, MBA: Context-aware UI component Reuse for Web Service Devel- opment Environments, PhD Thesis, c March 2015 [ Context-aware UI Component Reuse for Web Service Development Environments ] Remember, we all stumble, every one of us. That’s why it’s a comfort to go hand in hand. — Emily Kimbrough Dedicated to my family, Oliver, Wolfgang, Edith, Saskia, Sven and Britta. [ Context-aware UI Component Reuse for Web Service Development Environments ] ABSTRACT Adapting user interfaces (UIs) to various contexts, such as for the exploding number of different devices, or specific business processes in different compa- nies, has become a major challenge for UI developers. The support offered by current development environments for UI adaptation is limited, as is the sup- port for the efficient creation of UIs in web service-based applications. Even with sophisticated UI development environments, UI developers still encounter many repetitive, time-consuming tasks during the UI development process. In this thesis, we describe an approach where – based on a given context – a complete user interface is suggested. The suggestions are created by a rule- based recommender system, which combines web service-bound UI elements with other UI building blocks. Rules for the UI Layout, Theme (the style sheet), Binding of UI building blocks to web services and Composition of UI components are established, and saved in a knowledge base for later reuse. Rules are created automatically based on the creation or modification of UIs. The approach has been implemented, as well as evaluated by simulating the development of 115 SAP UI screens. v [ Context-aware UI Component Reuse for Web Service Development Environments ] The most important property of a program is whether it accomplishes the intention of its user — C.A.R. Hoare ACKNOWLEDGMENTS This dissertation represents a culmination of efforts, and has been made possible by the assistance and support of various parties. I would like to extend a warm and sincere thank-you to my supervisors Prof. Boualem Benatallah and Dr. Ingo Weber, for their valuable feedback, immense knowledge, inspiration, guidance, constant support and advice. My sincere thanks also goes my thesis panel, Prof. Paul Compton, UNSW, for his helpful advice, particularly in regards to RDR technologies, and Prof. Fethi Rabhi and Dr. Srikumar Venugopal, School of Computer Science and Engineer- ing, UNSW, for their encouragement, helpful questions and insightful comments. I’m thankful to SAP Research, the University of New South Wales and Smart Services CRC Sydney for having given me the great opportunity to write a PhD thesis in collaboration with the IT industry. Furthermore, I thank my fellow PhD students Van Hai Ho and Basem Suleiman, who have assisted me during my thesis, and for being great friends. A big thank you also goes to Jan-Felix Schwartz, who assisted me during the creation of the prototype for this work, and Patrick de Guzman, who imple- mented a second prototype based on our approach for his honours thesis. I would like to express my gratitude to Lyn Campbell-Anderson, Daniel Cic- ciarelli, Helen Conran, Vicki Korb, Leanne Mavridis, Bev McMasters, and Terry Southwell, who performed a final review of my thesis. Last but not least, I would like to thank my husband, my friends and my family for their constant support and encouragement throughout this journey. vi [ Context-aware UI Component Reuse for Web Service Development Environments ] CONTENTS 1 introduction1 1.1 Background 1 1.2 Problem Statement 3 1.3 Contributions Overview 3 1.4 Thesis Organisation 4 2 background and related work6 2.1 Web Services 6 2.1.1 Web Service Definition 6 2.1.2 Service Interfaces 7 2.1.3 APIs and API platforms 9 2.1.4 Web APIs and Mashups 11 2.1.5 GUI Development for Web Services 12 2.1.6 Web Services – Discussion 14 2.2 UI Development 14 2.2.1 UI Components 15 2.2.2 UI Creation with Java Swing and Java NetBeans IDE 15 2.2.3 UI Creation in Microsoft Visual Studio 20 2.2.4 UIs at SAP Business ByDesign 25 2.2.5 UI Development with Bootstrap 30 2.2.6 UI Development with DukeScript 32 2.2.7 UI Development – Discussion 34 2.3 Code Reuse and Code Search 36 2.3.1 Code Reuse 36 2.3.2 Question & Answer Sites 39 2.3.3 Code Reuse and Code Search – Discussion 40 2.4 UI Patterns 41 2.4.1 Defining UI Patterns 41 2.4.2 Elements of Interaction Design Patterns 42 2.4.3 Reasons for using Patterns 43 2.4.4 UI Pattern Examples 44 2.4.5 Parties contributing to UI Patterns 45 2.4.6 The Pattern Approach at SAP 46 2.4.7 UI Patterns and their Usage in UI development 53 2.4.8 UI Patterns – Discussion 54 vii [ Context-aware UI Component Reuse for Web Service Development Environments ] contents viii 2.5 UI and Context 54 2.5.1 Examples of Context requiring UI Adaptation 55 2.5.2 GUI Development and Context-Awareness 58 2.5.3 UI and Context – Discussion 61 2.6 Background and Related Work - Discussion 62 3 ui development knowledge, concepts and representation 65 3.1 Representing UI Components 65 3.2 Representing UI Recommendation Rules 66 3.2.1 Rule Conditions 67 3.2.2 Rule Conclusions 67 3.2.3 Data Structures for Rules 70 3.3 UI Development Knowledge, Concepts and Representation - Dis- cussion 74 4 ui knowledge acquisition 75 4.1 Context and UI Repository in the UI Recommender System 76 4.2 Investigation of SAP CRM User Interfaces 77 4.3 Rule Specification 80 4.4 Incremental UI Knowledge Acquisition 82 4.5 Confidence Score 83 4.6 Evolution of Rules 84 4.7 UI Knowledge Acquisition - Discussion 85 5 system architecture, implementation & knowledge base content 86 5.1 Deciding on a Knowledge Base Rule Paradigm 86 5.2 Prototypical Implementation of UISE 87 5.3 Class Structure for UISE 91 5.3.1 Classes forming the Rule Condition 92 5.3.2 Classes forming the Rule Conclusion 93 5.4 Knowledge Base Content Elicitation for UISE 96 5.4.1 Elicitation of the Device Hierarchy for UISE 96 5.4.2 Elicitation of the Business Scenario Hierarchy for UISE 103 5.5 Cross Platform & Context Web Services - WST 104 5.5.1 Design for WST 104 5.5.2 System Architecture and Implementation for WST 110 5.6 System Architecture and Implementation - Discussion 111 6 evaluation 112 6.1 Evaluation of UISE 112 6.1.1 Evaluation Objectives and Settings - UISE 112 [ Context-aware UI Component Reuse for Web Service Development Environments ] contents ix 6.1.2 Evaluation Results - UISE 114 6.2 Evaluation of WST 116 6.2.1 Goal of the Evaluation - WST 116 6.2.2 Evaluation Environment - WST 116 6.2.3 Evaluation Search by Keywords - WST 116 6.2.4 Experiment 1 Results - WST 118 6.2.5 Experiment 2 Results - WST 118 6.2.6 Experiment 3 Results - WST 122 6.3 Evaluation - Discussion 123 7 conclusion 128 7.1 Challenges 128 7.2 Summary 129 7.3 Future Research 129 a appendix 131 a.1 Examples for SAP CRM UIs and UI Elements 131 a.1.1 Sales Order Management UIs 131 a.1.2 Sales Order Management UI Elements 134 a.1.3 Service Order Management UIs 145 a.1.4 Service Order Management UI Elements 145 a.1.5 Contract Management UIs 164 a.1.6 Contract Management UI Elements 164 a.1.7 Examples of CRM UIs and UI Elements - Discussion 174 [ Context-aware UI Component Reuse for Web Service Development Environments ] LISTOFFIGURES Figure 2.1 Consumer Mashup: Housingmaps.com 11 Figure 2.2 Data Mashup: RSOE EDIS 12 Figure 2.3 Enterprise Mashup: Staff Allocation Mashup seen on www.jackbe.com 13 Figure 2.4 Hierarchy of UI Components 16 Figure 2.5 UI Pattern Palette in NetBeans IDE 17 Figure 2.6 NetBeans IDE Design View 17 Figure 2.7 NetBeans IDE Source View 18 Figure 2.8 NetBeans IDE Property Editor 19 Figure 2.9 Simple UI Patterns in NetBeans IDE 19 Figure 2.10 Registering Events in NetBeans IDE 20 Figure 2.11 Simple Controls in Visual Studio 21 Figure 2.12 Data Grid View in Visual Studio 2008 22 Figure 2.13 Month Calendar Pattern in Visual Studio 2008 22 Figure 2.14 Examples of Controls and Shapes in Expression Blend [51] 23 Figure 2.15 Blend for HTML [93] 24 Figure 2.16 Silverlight Custom Button in Expression Blend [116] 24 Figure 2.17 Patterns in the SAP UI Designer 26 Figure 2.18 Defining the Data Model in the UI Designer 26 Figure 2.19 Data Binding 27 Figure 2.20 Adding the Hierarchical Extension to the Data Model 27 Figure 2.21 Sales Order Management in SAP Business ByDesign- Min- imum Layout 28 Figure 2.22 Sales Order Management in SAP Business ByDesign - Max- imum Layout 29 Figure 2.23 Hiding Fields or displaying additional ones in SAP Busi- ness ByDesign 29 Figure 2.24 Commercial Bootstrap Themes available on WrapBootstrap 31 Figure 2.25 Free Bootstrap Themes available on BootsWatch 31 Figure 2.26 Labels belonging to a Bootstrap Theme 32 Figure 2.27 Carousel UI Component in Bootstrap 32 Figure 2.28 Setting up a Project in DukeScript 33 Figure 2.29 Deploying the Project for NetBeans 34 x [ Context-aware UI Component Reuse for Web Service Development Environments ] List of Figures xi Figure 2.30 “Hello World” Program for HTML and Java NetBeans 35 Figure 2.31 Choosing the Target Platform 36 Figure 2.32 Tag Cloud (www.flickr.com), as shown on [109] 45 Figure