Getting Started with SAPUI5 [1 ed.] 978-1-59229-971-3

Citation preview

---

SAP PRESS is a joint initiative of SAP and Galileo Press. The know-how offered by SAP specialists combined with the expertise of the Galileo Press publishing house offers the reader expert books in the field. SAP PRESS features first-hand information and expert advice, and provides useful skills for professional decision-making. SAP PRESS offers a variety of books on technical and business-related topics for the SAP user. For further information, please visit our website: www.sap-press.com. Bönnen, Drees, Fischer, Heinz, Strothmann OData and SAP NetWeaver Gateway 2014, 666 pp., hardcover ISBN 978-1-59229-907-2 Dave Haseman, Ross Hightower Mobile Development for SAP 2013, 617 pp., hardcover ISBN 978-1-59229-448-0 Thorsten Schneider, Eric Westenberger, Hermann Gahm ABAP Development for SAP HANA 2014, 609 pp., hardcover ISBN 978-1-59229-859-4 James Wood, Shaan Parvaze Web Dynpro ABAP: The Comprehensive Guide 2012, 784 pp., hardcover ISBN 978-1-59229-416-9

Miroslav Antolovic

Getting Started with SAPUI5

Bonn  Boston

Dear Reader, Being a web developer is a lot like being an architect or structural engineer. Not only do they have to consider every brick, but also their weight, how they fit together, and the geography they sit on. However, building a structure with code on multiple platforms and devices might be even more difficult than building a brick and mortar structure! One missing brick, or in our less obvious case, one missing element, and the whole thing could collapse. This book will help you to build safely and swiftly, while presenting you with options for creating sleek, uncluttered HTML5-based applications through the use of elements such as HTML5, CSS3, JavaScript, and the incredibly helpful jQuery library. With the expertise of Miroslav Antolovic, you’ll gain a greater understanding of how these individual elements function, how they fit together, and how to best use them to create the next-generation UIs for responsive SAP applications. I’m confident that with the help of this book, you’ll approach your next project with an extensive toolbox of knowledge as you pursue your vision, brick-by-brick, -by-. As always, we appreciate your business and welcome your feedback. What did you think about Getting Started with SAPUI5? Your comments and suggestions are the most useful tools to help us improve our books for you, the reader. We encourage you to visit our website at www.sap-press.com and share your feedback. Sarah Frazier

Editor, SAP PRESS Galileo Press Boston, MA [email protected] http://www.sap-press.com

Notes on Usage This e-book is protected by copyright. By purchasing this e-book, you have agreed to accept and adhere to the copyrights. You are entitled to use this e-book for personal purposes. You may print and copy it, too, but also only for personal use. Sharing an electronic or printed copy with others, however, is not permitted, neither as a whole nor in parts. Of course, making them available on the Internet or in a company network is illegal as well. For detailed and legally binding usage conditions, please refer to the section Legal Notes.

Imprint This e-book is a publication many contributed to, specifically: Editor Sarah Frazier Acquisitions Editor Kelly Grace Weaver German Edition Editor Kerstin Billen Translation Lemoine International, Inc., Salt Lake City, UT Copyeditor Melinda Rankin Cover Design Graham Geary Photo Credit iStockphoto.com/13633639/© AWSeebaran Production E-Book Kelly O’Callaghan Typesetting E-Book Publishers’ Design and Production Services, Inc. We hope that you liked this e-book. Please share your feedback with us and read the Service Pages to find out how to contact us.

The Library of Congress has cataloged the printed edition as follows: Antolovic, Miroslav. Getting started with SAPUI5 / Miroslav Antolovic. — 1st edition. pages cm ISBN 978-1-59229-969-0 (print) — ISBN 1-59229-969-5 (print) — ISBN 978-1-59229-970-6 (e-book) — ISBN 978-1-59229-971-3 (print and e-book) 1. SAP NetWeaver Gateway. 2. User interfaces (Computer systems) 3. Web site development. 4. HTML (Document markup language) I. Title. QA76.76.S27A58 2014 006.7’4—dc23 2014018246

ISBN 978-1-59229-969-0 (print) ISBN 978-1-59229-970-6 (e-book) ISBN 978-1-59229-971-3 (print and e-book) © 2014 by Galileo Press Inc., Boston (MA) 1st edition 2014 1st German edition published 2014 by Galileo Press, Bonn, Germany

Contents Introduction  ................................................................................. 13

1 HTML5 and CSS3  .......................................................... 19 1.1

1.2

Introduction to HTML5  . ................................................ 1.1.1 Basic Framework of a Document  ....................... 1.1.2 Important Language Elements  ........................... Introduction to CSS  ....................................................... 1.2.1 General Structure  .............................................. 1.2.2 Integrating CSS in HTML  ................................... 1.2.3 Selectors  ........................................................... 1.2.4 Example  ............................................................

20 20 25 36 36 37 41 44

2 JavaScript  . .................................................................... 47 2.1

Basic Principles  .............................................................. 2.1.1 Logging  . ........................................................... 2.1.2 Positioning JavaScript Code  ............................... 2.1.3 Comments  ........................................................ 2.1.4 Functions  .......................................................... 2.1.5 Objects  ............................................................. 2.2 Variables  . ...................................................................... 2.3 Operators  ...................................................................... 2.3.1 Arithmetic Operators  ........................................ 2.3.2 Increment and Decrement Operators  ................ 2.3.3 Assignment Operators  . ..................................... 2.3.4 Relational Operators  ......................................... 2.3.5 The typeof Operator  . ........................................ 2.3.6 Logical Operators  .............................................. 2.4 Control Structures: Conditions and Loops  ...................... 2.4.1 The if Statement  . .............................................. 2.4.2 The switch Statement  . ...................................... 2.4.3 The for Loop  .....................................................

47 48 49 50 50 53 56 60 60 60 61 61 62 62 63 63 65 67

7

Contents

2.4.4 The while Loop  ................................................. 2.4.5 The do-while Loop  ............................................ 2.4.6 The for-in Loop  ................................................. 2.5 Document Object Model  ............................................... 2.5.1 The DOM Tree  .................................................. 2.5.2 Addressing Elements  ......................................... 2.5.3 DOM Manipulation  .......................................... 2.6 Events  ...........................................................................

69 71 71 73 74 74 76 81

3 jQuery  ........................................................................... 85 3.1 Basic Principles  .............................................................. 3.2 Selectors and Events  ...................................................... 3.2.1 Selectors  ........................................................... 3.2.2 Events  ............................................................... 3.3 DOM Manipulation  ....................................................... 3.4 AJAX  .............................................................................

85 86 87 91 93 97

4 Getting Started in SAPUI5  ........................................... 105 4.1 4.2

4.3

4.4

4.5

8

Installation of the SAPUI5 Library in SAP  Business Suite  ................................................................ Setting Up the Development Environment  ..................... 4.2.1 Installation Requirements  . ................................ 4.2.2 Installation  ........................................................ 4.2.3 Updating the Components  ................................ SAPUI5 Development Scenarios  . ................................... 4.3.1 Development in the SAP NetWeaver Application Server ABAP  ................................... 4.3.2 Creating Your Own Service  ................................ Model View Controller Architecture Pattern  .................. 4.4.1 Model  ............................................................... 4.4.2 View  ................................................................. 4.4.3 Controller  ......................................................... 4.4.4 Interaction in Web Development  ...................... 4.4.5 MVC in SAPUI5  ................................................ First Example  .................................................................

106 109 109 109 114 116 117 121 125 126 126 127 127 127 131

Contents

5 SAPUI5 Runtime Environment  ..................................... 149 5.1

5.2

5.3 5.4

5.5

5.6

Initialization of the Application  . .................................... 5.1.1 SAPUI5 Resources  ............................................. 5.1.2 Controls  ............................................................ 5.1.3 SAPUI5 Theming  ............................................... Data Binding Models  ..................................................... 5.2.1 JSON Model  ..................................................... 5.2.2 XML Model  ...................................................... 5.2.3 Resource Model  ................................................ 5.2.4 OData Model  . .................................................. 5.2.5 Binding Options  ................................................ Multilingual Applications  ............................................... SAPUI5 Data Typing  ...................................................... 5.4.1 Integers  . ........................................................... 5.4.2 Floating-Point Numbers  .................................... 5.4.3 Strings  . ............................................................. 5.4.4 Boolean Variable  ............................................... 5.4.5 Date  ................................................................. 5.4.6 Time  ................................................................. 5.4.7 Date and Time  .................................................. 5.4.8 Formatter Classes  .............................................. 5.4.9 Your Own Types  ................................................ Layout Adaptation via Your Own CSS  ............................ 5.5.1 Adapting CSS  .................................................... 5.5.2 Theme Designer  ................................................ Communication with the SAP Backend  ..........................

150 151 154 155 160 162 169 170 173 175 185 191 192 193 193 194 195 196 196 196 196 199 199 203 212

6 SAPUI5 Controls  ........................................................... 219 6.1 API Reference  ................................................................ 6.2 Common Controls (sap.ui.commons)  ............................. 6.2.1 Layout  .............................................................. 6.2.2 UI Controls  ....................................................... 6.3 UX3 Controls (sap.ui.ux3)  .............................................. 6.4 Table Control (sap.ui.table)  ............................................ 6.5 Charts (sap.viz)  ..............................................................

220 224 225 253 273 275 275

9

Contents

6.6 Controls for Mobile Applications  ................................... 276 6.7 Suite Controls (sap.suite.)  .............................................. 276 6.8 Your Own Controls  ........................................................ 278

7 Development Example of an Application  ..................... 283 7.1

7.2

The UI Design  ................................................................ 7.1.1 Start Page  ......................................................... 7.1.2 Time Sheet  ........................................................ 7.1.3 Leave Request  . ................................................. 7.1.4 Employee Directory  . ......................................... 7.1.5 Travel Planning  . ................................................ 7.1.6 My Data  . .......................................................... Implementation  ............................................................. 7.2.1 Basic Structure  .................................................. 7.2.2 Employee Directory  . ......................................... 7.2.3 Travel Planning  . ................................................ 7.2.4 My Data  . .......................................................... 7.2.5 Tasks  ................................................................. 7.2.6 Time Sheet  ........................................................ 7.2.7 Leave Request  . .................................................

283 284 285 286 287 287 288 289 290 296 302 308 314 324 340

8 SAP Gateway  ................................................................ 353 8.1 8.2 8.3 8.4 8.5

Basic Principles of SAP Gateway  . ................................... Installation  .................................................................... Configuration  . ............................................................... Implementing OData Service  ......................................... Consuming OData Service  .............................................

353 355 356 358 375

9 SAP HANA  . ................................................................... 381 9.1 XS Engine  ...................................................................... 382 9.2 HANA Access  ................................................................ 383 9.3 Implementation of the Sample Application  .................... 389

10

Contents

10 Mobile Applications  ..................................................... 405 10.1 Installation  .................................................................... 10.2 Introduction to SAPUI5 for Mobile  ................................ 10.3 Developing Mobile Solutions with SAPUI5  .................... 10.3.1 Page Layout of Mobile Applications  .................. 10.3.2 Page Navigation  ................................................ 10.3.3 Where Am I?  . ................................................... 10.3.4 SplitApp Control  ............................................... 10.3.5 Events on Mobile Devices  ................................. 10.4 Application Example  ...................................................... 10.4.1 Backend Implementation  .................................. 10.4.2 Frontend Implementation  .................................

407 408 409 409 414 417 418 419 420 420 428

Appendices  ......................................................................... 451 A Further Sources of Information  . .............................................. A.1 Links  . ............................................................................ A.2 SAP Notes  ..................................................................... A.3 Books  ............................................................................ B The Author  .............................................................................

451 451 451 452 453

Index  ............................................................................................ 455 Service Pages ...............................................................................   Legal Notes  . ...............................................................................  

I III

11

Introduction

I’m delighted that you’re curious and want to rise to new challenges in SAP development. In this book, I invite you along on a tour through the world of SAPUI5 development. On this trip, you’ll learn about SAPUI5 on multiple platforms and devices. With SAP NetWeaver 7.4, you’ll develop ABAP in Eclipse, and with SAP HANA, you’ll face the challenge of learning new programming languages such as SQLScript, R, and L. With UI development toolkit for HTML5, referred to ahead as SAPUI5, you have now finally arrived in the world of web development. You could implement your first Internet-enabled SAP applications in SAP GUI with ABAP through Web Dynpro or BSP. SAPUI5, however, requires knowledge of HTML, CSS, and JavaScript, and you need to work in the Eclipse development environment.

Goal of this book

My personal “working title” for this book was—to borrow from Douglas Adams’ The Hitchhiker’s Guide to the Galaxy—The Hitchhiker’s Guide to SAPUI5. I chose this working title because of what Adams put so aptly: “You’re lonely. You’re light years from home. You’re having problems understanding the natives. DON’T PANIC, this is the book for you.” In keeping with this idea, I would like to help you get started in this new world of SAPUI5 with this book. I neither can, nor want, to provide you with a complete compendium for HTML, CSS, JavaScript, JQuery, or SAPUI5. My claim in this book is in fact to teach you the basics of these individual elements so that you can find your way in this new world. If you have discovered your passion for this world as I did, you can extend your newly acquired knowledge by reading relevant specialist literature. A list of useful links and books appears in the appendix of this book.

Hitchhiker’s Guide

Personal Copy for Diaz Juanma, [email protected]

13

Introduction

Structure of This Book SAPUI5 is a new user interface technology from SAP that is based on the open standards HTML5 and CSS3, the JavaScript scripting language, and the jQuery library. HTML5

In Chapter 1, you’ll learn the basics of Hypertext Markup Language (HTML) and cascading style sheets (CSS). You will be able to structure a web page with HTML, while using CSS to format the content structured by that HTML. This means that you can use CSS to design and position the created elements. Imagine a house, for example: You use HTML to define where the kitchen or the bathroom is located, and then you use CSS to create how these rooms look by defining, for example, the color of the walls or the flooring. As in a house, you then need to implement some technology so that, for example, the light goes on when you press the light switch. This technology is called JavaScript.

JavaScript

I will introduce you to JavaScript in Chapter 2. There, you will learn about the basic elements of the language. In addition to the variable definition, the operators, and the control structures, I will also discuss the Document Object Model (DOM). JavaScript can do more than just make the light switches work. Imagine an advertisement for a large Swedish furniture store; by using JavaScript and DOM, you can transform that kitchen into a second bedroom in just a few steps.

jQuery

Chapter 3 will introduce you to jQuery as a JavaScript library. So that

you don’t have to reinvent the wheel every time, it is standard practice in JavaScript, as in all other programming languages, to access existing libraries. I will focus on jQuery within this introduction, because SAPUI5 is based on jQuery; you will be able to find your way around the SAPUI5 library better if you understand the jQuery syntax. SAPUI5 library

With Chapter 4, you will learn about the SAPUI5 library. You will set up the development environment in Eclipse and become familiar with the various development scenarios. I will also show you the Model View Controller architecture pattern, which will assist in structuring larger applications.

Runtime

In Chapter 5, you will learn how to bind data to a control and deploy your application in multiple languages. Furthermore, I will show you how to

14 © 2014 by Galileo Press Inc., Boston (MA)

Structure of This Book

customize the layout of an application to suit your needs and with which technology you can read or write data from the backend. I will provide an overview of the SAPUI5 controls in Chapter 6. As the standard version already contains a very large number of controls, and the presentation of all controls would be beyond the scope of this book, I have restricted myself to some key examples. In this chapter, my main concern is that you develop a feel for the structure of the library and that you are able to search in the right place in the API documentation.

Controls

In Chapter 7, we will develop a sample application together in SAPUI5 for an employee portal with six areas. In this application, the employee can maintain his own worklist, record working times, create leave requests, and maintain his personal information. An employee directory, and the integration of Google Maps as a route planner, round off the range of services of the employee portal. We use many different controls in this application to illustrate the interaction of the individual components. Even if the application has become very large as a result, it still provides enough scope for your own developments and improvements after reading this book. A bonus extension feature of this chapter is provided online, and will allow you to explore the backend integration of the employee portal.

Sample application

In Chapter 8, you will create an Open Data Protocol (OData) service in SAP Gateway and consume it in your SAPUI5 application. SAP Gateway allows you easy and direct access to SAP backend services based on the standard Web protocol OData.

SAP Gateway

With Chapter 9, you will learn about the development of applications in SAPUI5 with SAP HANA. In this chapter, you will develop a sample application on the Extended Application Services Engine (XS Engine) in SAP HANA and access a HANA view from SAPUI5.

SAP HANA

Finally, Chapter 10 deals specifically with the development of applications for mobile devices. In this chapter, you will learn about the sap.m library and the special features found in the development of mobile applications. As an exercise, in this chapter you will develop an approval app for the leave requests from the employee portal that you will have implemented in Chapter 7.

Mobile applications

Personal Copy for Diaz Juanma, [email protected]

15

Introduction

At the end of this tour, you will have learned the essential points of SAPUI5 development on various platforms—an ABAP backend and SAP HANA—and on different devices. The goal of this book is to equip you with the knowledge required in being able to make reasonable decisions for your enterprise, while having the ability to implement them in a project. I hope that I have succeeded in this goal and look forward to receiving your personal feedback on the book at [email protected]. Special icons

To indicate important information and to facilitate your work with this book, I used the following symbols: Checklist

Boxes with this icon show you the requirements (for example, tools) for the following chapter. Tip

Boxes with this icon will give you recommendations for settings or tips from professional experience. Caution Boxes with this icon contain important information about the topic under discussion. I also use this icon to warn you about potential sources of error. Material to Download At www.sap-press.com/3565, you’ll find supplemental material, which will hopefully facilitate implementing the practice activities. The downloadable information includes: EE

All larger listings, which I show in the individual chapters

EE

Full listings, which are presented only in abbreviated form in the individual chapters for space reasons

EE

Installation instructions

Acknowledgments For a book as for a movie, the movie poster or cover includes the director (or the publisher) and the main character (the author, in our case),

16 © 2014 by Galileo Press Inc., Boston (MA)

Acknowledgments

while you learn only in the end credits the number of people who were actually involved in this work. My personal “credits” follow. First of all, I would like to thank my wife Sandra and my son Dejan. Writing a book requires a lot of time and, bearing in mind that I mostly only had time to do so in the evening, at night, and on weekends, my family had to show a great deal of understanding for this book project and do without a normal family life for nearly a year. Although only two years old, my son developed a very keen sense of time management during this period. He pretty much knew when it was time for a break (“Daddy, come here, please, let’s play!”), but also when it was time to start working again (“Daddy, work!”). Aside from me, a great number of other people were involved in this book, and I would like to thank these people here. Special thanks must go to my colleagues from bsc solutions, who performed some of my daily tasks and helped me write some chapters. I would like to thank Stefan Huber for checking the source code, suggesting ideas for the employee portal, and assisting in the implementation of the sample applications. I would like to thank Johannes Kettenhofen for assisting in the implementation of the employee portal and the approval app and Benjamin Schneider for proofreading and improving how the text reads. With your ideas and suggestions for improvement, each one of you has contributed to getting the book into this final form. However, where would a book be without a publisher? I would like to thank SAP PRESS for the trust placed in me and for the opportunity to write this book. I would like to extend a heartfelt thanks to the editors, Janina Schweitzer and Kerstin Billen. They supported me every step of the way, from the idea for the book to its publication, and provided advice and help at all times. Miroslav Antolovic

“You cannot teach a man anything, you can only help him to find it within himself.” —Galileo Galilei

Personal Copy for Diaz Juanma, [email protected]

17

© 2014 by Galileo Press Inc., Boston (MA)

In this chapter, you’ll learn the basics of web development. The first focus will be on Hypertext Markup Language (HTML), which is the basic component of web development.

1

HTML5 and CSS3

The basic language used to create websites is the Hypertext Markup Language (HTML). In this chapter, the basic syntax of HTML is presented. HTML is a formatting language for the structuring and semantic markup of content such as text, images, and hyperlinks in documents. Compared to HTML4, HTML in the fifth generation (HTML5) offers many new features, such as the integration of video, audio, local storage, and 3D graphics. This book discusses only the most important language elements; a complete language reference can be found at www.w3schools.com/. The language is specified via the World Wide Web Consortium (W3C), and you can obtain information on their activities from their website at www.w3.org; the HTML-specific part can be found at www.w3.org/html/. The W3C also provides a validator for your HTML pages at validator.w3.org/.

W3C

Checklist You will need the following for this chapter: EE

A text editor such as Notepad or Notepad++

EE

An installed browser

You can download Notepad++ at http://notepad-plus-plus.org/. If you want to implement these examples directly in the SAPUI5 Eclipse plugin, go to Chapter 4, and follow the installation instructions there.

Each browser interprets an HTML page individually, depending on the rendering engine. For this reason, it’s useful to test the pages you create in different browsers, while always focusing on the browser used throughout the company. Table 1.1 shows information for the main browsers.

Personal Copy for Diaz Juanma, [email protected]

19

Browser compatibility

1    HTML5 and CSS3

Browser

Rendering Engine

Website

Firefox

Gecko

www.mozilla.org

Microsoft IE

Trident

www.microsoft.com

Chrome

WebKit

www.google.com/chrome

Safari

WebKit

www.apple.com/safari

Opera

Chromium

www.opera.com

Table 1.1  Rendering Engines

1.1

Introduction to HTML5

Tags

HTML is a pure definition language rather than a programming language. You use HTML to structure and format the content of the page to be displayed. The content of an HTML document consists of HTML elements; these are marked by tags. A start tag is indicated by angle brackets (), and an end tag is indicated by an additional forward slash (). Apart from a few exceptions, a complete descriptive sentence in HTML always sits between a start and an end tag.

HTML element

The validity area for the actual content of the HTML element is located within these two tags—for example:

Text section in a paragraph

The opening tag

signals to the browser that a section (p = paragraph) is to follow, and the validity area extends to the closing tag

. The text within the tags is displayed by the browser as text in section formatting.

1.1.1 Structuring of the HTML document

Basic Framework of a Document

An HTML document essentially consists of the following parts: EE

Document type declaration

EE

Header area

EE

Document body

Listing 1.1 shows us these parts.

20 © 2014 by Galileo Press Inc., Boston (MA)

Introduction to HTML5    1.1

                 First Page                       

Listing 2.10  for_loop.html

The for loop ensures that the numbers 1 to 9 are written in the area with the ID content. Execute the example in the browser and check the result (see Figure 2.7).

Figure 2.7  The for Loop

68 © 2014 by Galileo Press Inc., Boston (MA)

Control Structures: Conditions and Loops    2.4

2.4.4 The while Loop In contrast to the for loop, the number of loop passes does not have to be specified in advance for the while loop. Only the test condition is defined, which is set within the loop. The basic syntax is: while ([check condition]){ // Loop body };

The preceding example can be mapped with a while loop as follows: while (i