SAPUI5

The Comprehensive Guide

Paul Modderman, Christiane Goebels, Denise Nepraunig, Thilo Seidel

• Publisher: SAP PRESS
• Year: 2020
• Print ISBN: 9781493219001
• eBook ISBN: 9781493219018
• Edition: 2
• Topic: Computer Science
• Subtopic: Computer Science General
• Index: Computer Science

Your comprehensive guide to SAPUI5! From!DOCTYPE HTML to /html, get the know-how to develop MVC apps, use OData, create data bindings, debug and test code, and deploy apps. Learn the dos and don'ts of SAPUI5 and everything in between, whether you're implementing CRUD operations or writing your own controls. See what's new with SAP Cloud Platform, SAPUI5 support assistant, and more. Your best apps are yet to come. a. Build Your Foundation
Start with an overview of the SAPUI5 architecture and a Hello, World example for a single page application. Get the details on the core building blocks, controls, and functionality of SAPUI5.
b. Hands-On Approach
Learn about MVC applications, model types, and CRUD operations for connecting services. Then implement OData protocols, design application patterns, and apply advanced features to take your app to the next level.
c. Enhance Your Apps
Add the finishing touches to your app, with details on enterprise-grade features for security, theming, performance, and accessibility. Debug and test your code for flawless deployment. Highlights Include:
1) Designing and building apps
2) Model view controller concepts
3) Models and data binding
4) OData
5) CRUD and REST
6) Debugging and testing
7) App deployment
8) SAP Web IDE
9) SAP Fiori
10) SAP Cloud Platform

Part I

Introduction

1 SAPUI5 at a Glance

In this chapter, you’ll learn the basics of SAPUI5: what it is, where to consume it from, how it evolved, and which competitors it can best be compared with. You’ll also learn about OpenUI5, SAPUI5’s open-source sibling.

By purchasing this book, you’ve taken the first step toward mastering the user interface (UI) development toolkit for HTML5 (SAPUI5). Congratulations! We assume you have some knowledge of SAPUI5 but want to learn enough to build full-fledged SAPUI5 applications. During the course of this book, you’ll learn to code your way through SAPUI5. We’ll introduce the basics before diving into more advanced concepts.

This chapter begins our journey by discussing what SAPUI5 is and isn’t, its primary features and use cases, and how it differs from its open-source counterpart OpenUI5. Let’s get started!

1.1 What It Is and Where to Get It

SAPUI5 is a toolkit that enables you to easily build web applications. As a client-side tool, SAPUI5 is composed of Cascading Style Sheets (CSS), HTML5, and JavaScript, and it allows you to completely decouple the frontend development of your applications from any backend development.

SAPUI5 is available as an SAP NetWeaver add-on for SAP customers. It’s also available for download from SAP Service Marketplace and on SAP Cloud Platform. SAP’s help documentation contains information on where to find the version that is valid for your license and details on how to install it (http://s-prs.co/498700).

You can also consume SAPUI5 from a content delivery network (CDN) (http://s‐prs.co/498701). Using a CDN greatly improves the time it takes a user’s browser to receive the SAPUI5 resources it needs by making them available on high-speed, distributed cache servers across the world. This CDN URL will be used in the configuration part of the bootstrap, the first script every SAPUI5 application loads. (You’ll learn more about bootstrapping SAPUI5 in Chapter 4, Section 4.2.2).

From the CDN, you’ll want to use the latest released version of SAPUI5. If you want to tie your application to a particular version, you can also use the version number in the URL; for example, if you go to http://s-prs.co/498703, your SAPUI5 application uses version 1.52.9 of SAPUI5 until you change the URL yourself.

By using this URL, you can easily switch between versions in your application or when experimenting on the fly, allowing you to explore new features or quickly see how everything works after an upgrade. Upgrading SAPUI5 is safe for your existing applications, as it remains backward compatible.

Now that you know what SAPUI5 is and how to get it, let’s dive a bit deeper into the history and evolution of SAPUI5 technology.

1.2 History and Evolution

SAPUI5 is the most widely used UI framework for new SAP applications built by SAP for the latest generation of cross-platform-compatible solutions. Its current logo (Figure 1.1) calls back to its origins as the Phoenix project.

Figure 1.1 SAPUI5 Logo, Calling Back to Phoenix Origins

1.2.1 History

The first small project team began work on SAPUI5 in 2010. Now, several development teams in locations all over the world work on the libraries, and even more people are involved when you count the user experience designer teams responsible for the beautiful and lightweight UIs you can build with SAPUI5. In 2014, the project teams behind the SAPUI5 framework convinced SAP that the toolkit would not be able to thrive behind closed doors, and so OpenUI5, SAPUI5’s open-source sibling, came to life. We’ll discuss the differences between SAPUI5 and OpenUI5 in Section 1.6.

1.2.2 Evolution

SAP continues to improve SAPUI5. Staying on top of trends in the broader world of web development, the UI5 Evolution project aims to bring the best of those trends to SAPUI5 in the enterprise. UI5 Evolution focuses on four key areas: the modular core, rendering and controls, programming models, and build tooling.

By creating a modular core, SAPUI5 improves code organization and dependency management. The more modular the foundation libraries become, the easier it becomes to make minimizing resources used for each application. Building an application into the most compact set of code makes the user experience lighter and quicker.

Improving rendering a...

Table of contents

• Dear Reader
• Notes on Usage
• Table of Contents
•   Preface
•   Acknowledgments
• Part I   Introduction
• 1   SAPUI5 at a Glance
• 2   Architecture
• Part II   Building Applications with SAPUI5
• 3   Integrated Development Environment Setup
• 4   Hello, SAPUI5 World
• 5   Building Model-View-Controller Applications
• 6   Models
• 7   CRUD Operations
• 8   Using OData
• 9   Application Patterns and Examples
• 10   Advanced Concepts
• Part III   Finishing Touches
• 11   Adding Enterprise-Grade Features
• 12   Debugging and Testing Code
• 13   Accessing and Connecting to the Backend
• 14   Application Deployment
• A   Worst Practices
• B   Cheat Sheets
• C   Additional Resources
• D   The Authors
• Index
• Service Pages
• Legal Notes