1 HTML5 and CSS3

19

1.1 Introduction to HTML5

20

1.1.1 Basic Framework of a Document

20

1.1.2 Important Language Elements

25

1.2 Introduction to CSS

36

1.2.1 General Structure

36

1.2.2 Integrating CSS in HTML

37

1.2.3 Selectors

41

1.2.4 Example

44

2 JavaScript

47

2.1 Basic Principles

47

2.1.1 Logging

48

2.1.2 Positioning JavaScript Code

49

2.1.3 Comments

50

2.1.4 Functions

50

2.1.5 Objects

53

2.2 Variables

56

2.3 Operators

60

2.3.1 Arithmetic Operators

60

2.3.2 Increment and Decrement Operators

60

2.3.3 Assignment Operators

61

2.3.4 Relational Operators

61

2.3.5 The typeof Operator

62

2.3.6 Logical Operators

62

2.4 Control Structures: Conditions and Loops

63

2.4.1 The if Statement

63

2.4.2 The switch Statement

65

2.4.3 The for Loop

67

2.4.4 The while Loop

69

2.4.5 The do-while Loop

71

2.4.6 The for-in Loop

71

2.5 Document Object Model

73

2.5.1 The DOM Tree

74

2.5.2 Addressing Elements

74

2.5.3 DOM Manipulation

76

2.6 Events

81

3 jQuery

85

3.1 Basic Principles

85

3.2 Selectors and Events

86

3.2.1 Selectors

87

3.2.2 Events

91

3.3 DOM Manipulation

93

3.4 AJAX

97

4 Getting Started in SAPUI5

105

4.1 Installation of the SAPUI5 Library in SAP Business Suite

106

4.2 Setting Up the Development Environment

109

4.2.1 Installation Requirements

109

4.2.2 Installation

109

4.2.3 Updating the Components

114

4.3 SAPUI5 Development Scenarios

116

4.3.1 Development in the SAP NetWeaver Application Server ABAP

117

4.3.2 Creating Your Own Service

121

4.4 Model View Controller Architecture Pattern

125

4.4.1 Model

126

4.4.2 View

126

4.4.3 Controller

127

4.4.4 Interaction in Web Development

127

4.4.5 MVC in SAPUI5

127

4.5 First Example

131

5 SAPUI5 Runtime Environment

149

5.1 Initialization of the Application

150

5.1.1 SAPUI5 Resources

151

5.1.2 Controls

154

5.1.3 SAPUI5 Theming

155

5.2 Data Binding Models

160

5.2.1 JSON Model

162

5.2.2 XML Model

169

5.2.3 Resource Model

170

5.2.4 OData Model

173

5.2.5 Binding Options

175

5.3 Multilingual Applications

185

5.4 SAPUI5 Data Typing

191

5.4.1 Integers

192

5.4.2 Floating-Point Numbers

193

5.4.3 Strings

193

5.4.4 Boolean Variable

194

5.4.5 Date

195

5.4.6 Time

196

5.4.7 Date and Time

196

5.4.8 Formatter Classes

196

5.4.9 Your Own Types

196

5.5 Layout Adaptation via Your Own CSS

199

5.5.1 Adapting CSS

199

5.5.2 Theme Designer

203

5.6 Communication with the SAP Backend

212

6 SAPUI5 Controls

219

6.1 API Reference

220

6.2 Common Controls (sap.ui.commons)

224

6.2.1 Layout

225

6.2.2 UI Controls

253

6.3 UX3 Controls (sap.ui.ux3)

273

6.4 Table Control (sap.ui.table)

275

6.5 Charts (sap.viz)

275

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 The UI Design

283

7.1.1 Start Page

284

7.1.2 Time Sheet

285

7.1.3 Leave Request

286

7.1.4 Employee Directory

287

7.1.5 Travel Planning

287

7.1.6 My Data

288

7.2 Implementation

289

7.2.1 Basic Structure

290

7.2.2 Employee Directory

296

7.2.3 Travel Planning

302

7.2.4 My Data

308

7.2.5 Tasks

314

7.2.6 Time Sheet

324

7.2.7 Leave Request

340

8 SAP Gateway

353

8.1 Basic Principles of SAP Gateway

353

8.2 Installation

355

8.3 Configuration

356

8.4 Implementing OData Service

358

8.5 Consuming OData Service

375

9 SAP HANA

381

9.1 XS Engine

382

9.2 HANA Access

383

9.3 Implementation of the Sample Application

389

10 Mobile Applications

405

10.1 Installation

407

10.2 Introduction to SAPUI5 for Mobile

408

10.3 Developing Mobile Solutions with SAPUI5

409

10.3.1 Page Layout of Mobile Applications

409

10.3.2 Page Navigation

414

10.3.3 Where Am I?

417

10.3.4 SplitApp Control

418

10.3.5 Events on Mobile Devices

419

10.4 Application Example

420

10.4.1 Backend Implementation

420

10.4.2 Frontend Implementation

428

Appendices

451

A Further Sources of Information

451

A.1 Links

451

A.2 SAP Notes

451

A.3 Books

452