• No results found

SAPX05-en-Col95-Fv-Show.pdf

N/A
N/A
Protected

Academic year: 2021

Share "SAPX05-en-Col95-Fv-Show.pdf"

Copied!
278
0
0

Loading.... (view fulltext now)

Full text

(1)

© 2014 SAP AG. All rights reserved. 1

<Course Number and Course Title ABC123 Overiew>

SAPX05

SAP SAPUI5 User Experience

Development

SAP SAPGUI5

Training System: Windows 2008 R2, with latest SAP SAPUI5

Instructor Handbook

Collection 95

(2)

© 2014 SAP AG. All rights reserved. 2

© 2014 SAP AG. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose

without the express permission of SAP AG. The information contained herein may be changed without prior notice.

Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.

Microsoft, Windows, Excel, Outlook, PowerPoint, Silverlight, and Visual Studio are registered trademarks of Microsoft Corporation.

Apache Maven, Maven, Apache, the Apache feather logo, and the Apache Maven project logos are trademarks of The Apache Software Foundation. This course is not designed to teach candidates MAVEN technology. Existing knowledge of MAVEN is a pre-requisite. IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, z10, z/VM, z/OS, OS/390, zEnterprise, PowerVM, Power

Architecture, Power Systems, POWER7, POWER6+, POWER6, POWER, PowerHA, pureScale, PowerPC, BladeCenter, System Storage, Storwize, XIV, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, AIX, Intelligent Miner, WebSphere, Tivoli, Informix, and Smarter Planet are trademarks or registered trademarks of IBM Corporation. Linux is the registered trademark of Linus Torvalds in the United States and other countries. Adobe, the Adobe logo, Acrobat, PostScript, and Reader are trademarks or registered trademarks of Adobe Systems Incorporated in the United States and other countries. Oracle and Java are registered trademarks of Oracle and its affiliates.

UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group. Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of Citrix Systems Inc.

HTML, XML, XHTML, and W3C are trademarks or registered trademarks of W3C®,

World Wide Web Consortium, Massachusetts Institute of Technology.

Apple, App Store, iBooks, iPad, iPhone, iPhoto, iPod, iTunes, Multi-Touch, Objective-C, Retina, Safari, Siri, and Xcode are trademarks or registered trademarks of Apple Inc. IOS is a registered trademark of Cisco Systems Inc.

RIM, BlackBerry, BBM, BlackBerry Curve, BlackBerry Bold, BlackBerry Pearl, BlackBerry Torch, BlackBerry Storm, BlackBerry Storm2, BlackBerry PlayBook, and BlackBerry App World are trademarks or registered trademarks of Research in Motion Limited.

Google App Engine, Google Apps, Google Checkout, Google Data API, Google Maps, Google Mobile Ads, Google Mobile Updater, Google Mobile, Google Store, Google Sync, Google Updater, Google Voice, Google Mail, Gmail, YouTube, Dalvik and Android are trademarks or registered trademarks of Google Inc.

INTERMEC is a registered trademark of Intermec Technologies Corporation. Wi-Fi is a registered trademark of Wi-Fi Alliance.

Bluetooth is a registered trademark of Bluetooth SIG Inc.

Motorola is a registered trademark of Motorola Trademark Holdings LLC. Computop is a registered trademark of Computop Wirtschaftsinformatik GmbH.

SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP BusinessObjects Explorer, StreamWork, SAP HANA, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries.

Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Business Objects Software Ltd. Business Objects is an SAP company.

Sybase and Adaptive Server, iAnywhere, Sybase 365, SQL Anywhere, and other Sybase products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Sybase Inc. Sybase is an SAP company.

Crossgate, m@gic EDDY, B2B 360°, and B2B 360° Services are registered trademarks of Crossgate AG in Germany and other countries. Crossgate is an SAP company. All other product and service names mentioned are the trademarks of their respective companies. Data contained in this document serves informational purposes only. National product specifications may vary.

The information in this document is proprietary to SAP. No part of this document may be reproduced, copied, or transmitted in any form or for any purpose without the express prior written permission of SAP AG.

(3)

© 2014 SAP AG. All rights reserved. 3

© 2014 SAP AG. Alle Rechte vorbehalten.

Weitergabe und Vervielfältigung dieser Publikation oder von Teilen daraus sind, zu

welchem Zweck und in welcher Form auch immer, ohne die ausdrückliche schriftliche Genehmigung durch SAP AG nicht gestattet. In dieser Publikation enthaltene Informationen können ohne vorherige Ankündigung geändert werden.

Die von SAP AG oder deren Vertriebsfirmen angebotenen Softwareprodukte können Softwarekomponenten auch anderer Softwarehersteller enthalten.

Microsoft, Windows, Excel, Outlook, PowerPoint, Silverlight und Visual Studio sind eingetragene Marken der Microsoft Corporation.

Apache Maven, Maven, Apache, the Apache feather logo, and the Apache Maven project logos sind eingetragene Marken der Apache Software Foundation.

IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, z10, z/VM, z/OS, OS/390, zEnterprise, PowerVM, Power

Architecture, Power Systems, POWER7, POWER6+, POWER6, POWER, PowerHA, pureScale, PowerPC, BladeCenter, System Storage, Storwize, XIV, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, AIX, Intelligent Miner, WebSphere, Tivoli, Informix und Smarter Planet sind Marken oder eingetragene Marken der IBM Corporation. Linux ist eine eingetragene Marke von Linus Torvalds in den USA und anderen Ländern. Adobe, das Adobe-Logo, Acrobat, PostScript und Reader sind Marken oder eingetragene Marken von Adobe Systems Incorporated in den USA und/oder anderen Ländern. Oracle und Java sind eingetragene Marken von Oracle und/oder ihrer

Tochtergesellschaften.

UNIX, X/Open, OSF/1 und Motif sind eingetragene Marken der Open Group.

Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame und MultiWin sind Marken oder eingetragene Marken von Citrix Systems, Inc.

HTML, XML, XHTML und W3C sind Marken oder eingetragene Marken des W3C®,

World Wide Web Consortium, Massachusetts Institute of Technology.

Apple, App Store, iBooks, iPad, iPhone, iPhoto, iPod, iTunes, Multi-Touch, Objective-C, Retina, Safari, Siri und Xcode sind Marken oder eingetragene Marken der Apple Inc. IOS ist eine eingetragene Marke von Cisco Systems Inc.

RIM, BlackBerry, BBM, BlackBerry Curve, BlackBerry Bold, BlackBerry Pearl, BlackBerry Torch, BlackBerry Storm, BlackBerry Storm2, BlackBerry PlayBook und BlackBerry App World sind Marken oder eingetragene Marken von Research in Motion Limited.

Google App Engine, Google Apps, Google Checkout, Google Data API, Google Maps, Google Mobile Ads, Google Mobile Updater, Google Mobile, Google Store, Google Sync, Google Updater, Google Voice, Google Mail, Gmail, YouTube, Dalvik und Android sind Marken oder eingetragene Marken von Google Inc.

INTERMEC ist eine eingetragene Marke der Intermec Technologies Corporation. Wi-Fi ist eine eingetragene Marke der Wi-Fi Alliance.

Bluetooth ist eine eingetragene Marke von Bluetooth SIG Inc.

Motorola ist eine eingetragene Marke von Motorola Trademark Holdings, LLC. Computop ist eine eingetragene Marke der Computop Wirtschaftsinformatik GmbH. SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP BusinessObjects Explorer, StreamWork, SAP HANA und weitere im Text erwähnte SAP-Produkte und -Dienst-leistungen sowie die entsprechenden Logos sind Marken oder eingetragene Marken der SAP AG in Deutschland und anderen Ländern.

Business Objects und das Business-Objects-Logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius und andere im Text erwähnte Business-Objects-Produkte und Dienstleistungen sowie die entsprechenden Logos sind Marken oder eingetragene Marken der Business Objects Software Ltd. Business Objects ist ein Unternehmen der SAP AG.

Sybase und Adaptive Server, iAnywhere, Sybase 365, SQL Anywhere und weitere im Text erwähnte Sybase-Produkte und -Dienstleistungen sowie die entsprechenden Logos sind Marken oder eingetragene Marken der Sybase Inc. Sybase ist ein Unternehmen der SAP AG.

Crossgate, m@gic EDDY, B2B 360°, B2B 360° Services sind eingetragene Marken der Crossgate AG in Deutschland und anderen Ländern. Crossgate ist ein Unternehmen der SAP AG.

Alle anderen Namen von Produkten und Dienstleistungen sind Marken der jeweiligen Firmen. Die Angaben im Text sind unverbindlich und dienen lediglich zu Informations-zwecken. Produkte können länderspezifische Unterschiede aufweisen.

Die in dieser Publikation enthaltene Information ist Eigentum der SAP. Weitergabe und Vervielfältigung dieser Publikation oder von Teilen daraus sind, zu welchem Zweck und in welcher Form auch immer, nur mit ausdrücklicher schriftlicher Genehmigung durch SAP AG gestattet.

(4)

© 2014 SAP AG. All rights reserved. 4

Course Topics

This course covers:

• SAP User Experience Design Strategy Overview

• SAPUI5 Overview

• SAP UI Development Toolkit for HTML5

• Programming Applications

• SAPUI5 Developer Studio

• Creating a SAPUI5 Project

• Model – View – Controller

• Databinding & Databinding - OData

• Resource Handling / Localization

• Notepad Controls

• Components

• Extending SAPUI5

• Styling & Theming

• CVOM Charts

• SAPUI5 Mobile

(5)

© 2014 SAP AG. All rights reserved. 5

Course Description

• This course is designed to give participants the opportunity to gain an

understanding of SAP SAPUI5 and how it pertains to SAP User Experience strategy

• Participants will learn how to program applications using SAPUI5 by creating a

new project in Eclipse

• Additional topics in this course include: Model – View – Controller; Databinding;

Databinding – oData; Resource Handling / Localization; Notepad Controls; Components; Extending SAPUI5; Styling & Theming; CVOM Charts; SAPUI5 Mobile; Optimizing SAPUI5

• There will be hands-on exercises performed during the course to gain experience

(6)

© 2014 SAP AG. All rights reserved. 6

Course Goals

This course will prepare you to:

• Understand SAP’s User Experience strategy • Understand and use the SAPUI5 APIs

(7)

© 2014 SAP AG. All rights reserved. 7

Course Objectives

After completing this course, you will be able to: • Understand SAP’s User Experience strategy • Understand and use the SAPUI5 APIs

(8)

© 2014 SAP AG. All rights reserved. 8

Course Prerequisites

Required Knowledge (Essential)

• SAPX04

• Basic understanding of JavaScript and HTML5

Recommended

• Familiarity with Object-oriented programming

(9)

© 2014 SAP AG. All rights reserved. 9

Target Audience & Course Duration

This course is intended for the following audiences:

• Developer

• Technology Consultant

(10)

© 2014 SAP AG. All rights reserved. 10

Content:

Unit 1 – SAP SAPUI5 Components and Overview

Unit 2 – SAP SAPUI5 Development

(11)

© 2014 SAP AG. All rights reserved. 11

Day 1:

Welcome & Introductions

UNIT 1 – SAP SAPUI5 Components and Overview

• Lesson 1: SAP SAPUI5 Components and Overview

Unit 2 – SAP SAPUI5 Development

• Lesson 2: SAPUI5 Developer Studio • Lesson 3: Programming Applications • Lesson 4: UI Controls and MVC

And associated lab exercises…

Preface

(12)

© 2014 SAP AG. All rights reserved. 12

Preface

Course Outline and Schedule

Day 2:

Unit 2 – SAP SAPUI5 Development (Continued)

• Lesson 5: Databinding and Databinding - OData

• Lesson 6: Resource Handling

(13)

© 2014 SAP AG. All rights reserved. 13

Preface

Course Outline and Schedule

Day 3:

Unit 2 – SAP SAPUI5 Development (Continued)

Lesson 7: Modularization

Lesson 8: Localization

Lesson 9: Notepad Controls

Lesson 10: Components

Lesson 11: Extending SAPUI5

Lesson 12: Styling, Theming and CVOM Charts

Lesson 13: SAPUI5 Mobile and Optimizing UI5 Files

And associated lab exercises…

(14)

SAP SAPUI5

Components and

Overview

(15)

© 2014 SAP AG. All rights reserved. 15

Unit 1 – SAP SAPUI5 Architecture and Overview:

Unit Objectives

After completing this unit, you will be able to:

(16)

© 2014 SAP AG. All rights reserved. 16

Unit 1 – SAP SAPUI5 Components and Overview:

Unit Lessons

SAP SAPUI5 Components and Overview

(17)

© 2014 SAP AG. All rights reserved. 17

Lesson Objectives

After completing this lesson, you will be able to:

• Understand SAP’s User Experience strategy

• Describe SAP SAPUI5 architecture and components • Provide an overview of the solution

(18)

Introduction to SAP User experience

Strategy

(19)

© 2014 SAP AG. All rights reserved. 19

How to Achieve Design Innovation?

Technology (feasibility)

Business

(viability)

DESIGN

INNOVATION

Human Values

(usability, desirability)

(20)

© 2014 SAP AG. All rights reserved. 20

The World is Changing…

Consumer user experience is the new standard

for enterprise applications …

Transform the enterprise experience

Complex and feature-rich experience must be replaced

by a simple, intuitive, and mobile experience.

(21)

© 2014 SAP AG. All rights reserved. 21

SAP User Experience Vision and Mission

Vision

Provide the leading user experience for business applications

Mission

Deliver attractive applications that make people successful at

work

(22)

© 2014 SAP AG. All rights reserved. 22

Top use scenarios

Core use

scenarios Specific customer value use scenarios

SAP User Experience Strategy

Existing Applications

RENEW

ENABLE

Renovation (SAPUI5)

Enablement Tools (SAPUI5 & Screen

Personas)

NEW

New Applications

Usag e/ R eac h

SAP

Fiori

(23)

© 2014 SAP AG. All rights reserved. 23

SAP User Experience Strategy

ENABLE

NEW

RENEW

(24)

© 2014 SAP AG. All rights reserved. 24

SAP User Experience Strategy

ENABLE

NEW

RENEW

(25)

© 2014 SAP AG. All rights reserved. 25

Recalls Plus PhotoTribe Fan Experience MyRunway

Have you seen these consumer apps from SAP?

(26)

© 2014 SAP AG. All rights reserved. 26

Provide Consumer-Grade UX for NEW Applications

SAP Fraud Management

SAP Customer Engagement

(27)

© 2014 SAP AG. All rights reserved. 27

SAP User Experience Strategy

ENABLE

NEW

RENEW

(28)

© 2014 SAP AG. All rights reserved. 28

(29)

© 2014 SAP AG. All rights reserved. 29

SAP User Experience Design Principles

Responsive Simple Coherent Instant Value

All sizes, devices, versions, channels

1-1-3 (1 user, 1 use case, 3 screens)

Apps that speak the same language Low barrier to adoption De-compose into task-based experience Role-based

(30)

© 2014 SAP AG. All rights reserved. 30

SAP User Experience Strategy

ENABLE

NEW

RENEW

(31)

© 2014 SAP AG. All rights reserved. 31

ENABLE customer specific value scenarios

Example: SAP Screen Personas for SAP GUI

(32)

© 2014 SAP AG. All rights reserved. 32

Key Enablement Tools

Floorplan Manager

(for FPM screens*)

NWBC & Side Panel

(all screens)

SAP Screen Personas

(for SAP GUI screens)

SAPUI5 Application Development Tools

Theme Designer

(33)

© 2014 SAP AG. All rights reserved. 33

SAP Key UI Tools & Technologies (Big Picture)

SAP NetWeaver Business Client SAP NetWeaver Portal

DYNPRO SAP Screen Personas U I T h em e D esi g n er GATEWAY UI Technologies SAP GUI UI Tools

* Harmonized in Run & Design Time with WebUIF

Backend WebDynpro ABAP/ Floorplan Manager

*

Flexible UI Designer UI Clients SAPUI5 SAPUI5 Application Development Tools

(34)

© 2014 SAP AG. All rights reserved. 34

Why focus on User Experience?

Gain productivity

Increase user

adoption

Decrease user errors

Save training costs

$

G

rea

t Us

er

E

xp

er

ien

ce

(35)

© 2014 SAP AG. All rights reserved. 35

Observations from 70+ Customer Engagements

Several UX issues could be solved with existing SAP tools

IT organizations need to better understand the needs of their end

users

(36)

SAPUI5 Overview, Architecture and

Components

(37)

© 2014 SAP AG. All rights reserved. 37

SAP UI Development Toolkit for HTML5

SAP UI Development Toolkit for HTML5

o

The official long name

SAPUI5

(38)

© 2014 SAP AG. All rights reserved. 38

Main UI5 Characteristics

SAPUI5 is an extensible JavaScript-based HTML5 browser rendering library

for Business Applications

– Well-designed API, easy to consume and use

– Extensible UI component model, including tooling support

– High performance, SAP product standard compliant

– Powerful theming support based on CSS

– Provides Ajax capabilities

– Based on open standards like OpenAjax, JavaScript, CSS, HTML 5, etc.

(39)

© 2014 SAP AG. All rights reserved. 39

UI5 Key Components

Client side

 Control libraries (JavaScript, CSS and image files)

 Core (JavaScript files)

 Test suite (HTML, JavaScript files)

Server side (optional)

 Application development tools in Eclipse

 Control development tools in Eclipse

 Resource handler in Java and ABAP

(40)

© 2014 SAP AG. All rights reserved. 40

UI5 Browser Support

Internet Explorer Version 8 and upwards (with limitations)* Chrome Version 1 and upwards Firefox Version 10 and upwards Version 10 ESR and upwards Safari Version 3 and upwards

*Internet Explorer 8 is supported with graceful degradation for CSS3 features like rounded corners, text-shadows, etc.

(41)

© 2014 SAP AG. All rights reserved. 41

UI5 Release Plan

Development track

 Identified by a major and an odd minor version number, e.g. 1.5.1

The versions of this track are released internally and are not meant to be used in

products shipped to customers.

Release track

 Identified by a major and an even minor version number, e.g. 1.4.1

The versions of this track are released externally. Only these versions are allowed to be

(42)

© 2014 SAP AG. All rights reserved. 42

(43)

© 2014 SAP AG. All rights reserved. 43

SAPUI 5 Architecture Overview

Optional server component Core JavaScript framework

including jQuery

Extension libraries

• Controls

• Themes

„Helper“ assets like e.g.

• Less (less.js) the dynamic style language • Code minimizer Controls jQuery.UI SAPUI5 Libraries SAPUI5 Core jQuery

(Static) Web Server

SAP jQuery Plug-ins

Event Resources Device Utils Logger UI Data Binding Control Base Render Manager

Themes Mobile Desktop

Mobile Desktop

(44)

© 2014 SAP AG. All rights reserved. 44

UI5 Control Libraries

sap.ui.commons

Includes “bread and butter" controls like TextField, Button

sap.ui.ux3

Includes UX3 patterns, mainly available in “Gold Reflection” design, e.g.: Shell

sap.ui.table

Includes the Table control

sap.m

Includes controls for mobile devices

(45)

© 2014 SAP AG. All rights reserved. 45

UI5 and Extensibility

UI5 allows application developers to

 Include their own JavaScript, HTML and CSS into UI5 based pages

 Include other JavaScript libraries where UI5 is lacking controls or functionality

 Create composite controls from existing UI5 controls

 Write new UI libraries and new controls

 Write plug-ins for the UI5 core

 This way UI5 development groups should not become a bottleneck for application groups in need of a certain functionality.

(46)

© 2014 SAP AG. All rights reserved. 46

UI5 Knowledge and Test Resources

Documentation and Information

• UI5 Wiki

• UI5 Mobile Wiki • UI5 Tools Wiki • Demokit

• API Documentation

• General UI5 Documentation

Control and code testing

• Test Suite

UI5 support and question channels

• SAPUI5 Community

• CSN Component:

• CA-UI5 (UI5 Runtime)

• CA-UI5-MOB (UI5 Mobile Lib)

UI5 Tools support and question channels

• SAPUI5 Tools Community

• CSN Component:

(47)

© 2014 SAP AG. All rights reserved. 47

UI5 Application Example

(48)

© 2014 SAP AG. All rights reserved. 48

How to get UI5 running

UI5 mainly consists of JavaScript, CSS and image files that run in a

browser.

Apart from this main offering – the runtime files – UI5 has many more

optional pieces of software:

– Runtime documentation

– Eclipse development tools

– Sample apps

In order to get UI5 running on a web page, the UI5 resources need to be

loaded by the browser.

These options are available for referencing the UI5 runtime files:

– Runtime libraries (wars and jars)

(49)

© 2014 SAP AG. All rights reserved. 49

Unit Summary

After completing this unit, you should now be able to:

(50)

SAP SAPUI5

Development

(51)

© 2014 SAP AG. All rights reserved. 51

Unit 1 – SAP SAPUI5 Development: Unit Objectives

After completing this unit, you will be able to:

(52)

© 2014 SAP AG. All rights reserved. 52

Unit 2 – SAP SAPUI5 Development: Unit Lessons

SAP SAPUI5 Components and Overview

Lesson 2: SAPUI5 Developer Studio

Lesson 3: Programming Applications Lesson 4: UI Controls and MVC

Lesson 5: Databinding and Databinding - OData Lesson 6: Resource Handling

Lesson 7: Modularization Lesson 8: Localization

Lesson 9: Notepad Controls Lesson 10: Components

Lesson 11: Extending SAPUI5

Lesson 12: Styling, Theming and CVOM Charts

(53)

© 2014 SAP AG. All rights reserved. 53

Exercise: Lab Environment Setup 1

• Launch Eclipse from Start  All Programs 

eclipse  eclipse.

When the Workspace Launcher dialog window

appears, enter the workspace N/workspace and tick the check box Use this as the default and do

not ask again.

• If you change your default project location, make

(54)

© 2014 SAP AG. All rights reserved. 54

Lab Environment Setup 2

• Close the Welcome tab. • Go to File  Import.

In the Import window that

appears, select General 

Existing Projects into Workspace

(55)

© 2014 SAP AG. All rights reserved. 55

Lab Environment Setup 3

• On the current window, click Select root

directory and click Browse…

On the next window, navigate to the

Application (N:) drive  SAPX05_95

and select as root directory.

(56)

© 2014 SAP AG. All rights reserved. 56

Lab Environment Setup 4

• Make sure that all project

solutions are appearing in the

Projects area are ticked, and

press Finish

• Your lab exercises will make

reference to these project folders throughout

(57)

© 2014 SAP AG. All rights reserved. 57

Total View

• Note that these are solution project files for your exercises

• Also note that there additional sample projects and demonstration projects • Next, you will prepare the FireFox and

FireBug environment. You can test your exercises on the installed version of Google Chrome, if you prefer.

(58)

© 2014 SAP AG. All rights reserved. 58

Installing the Firebug Add-on in FireFox (1)

• Launch FireFox using Start

 All Programs, and make sure you are on the Start Page

• Click the Add-ons icon at

the bottom of the browser:

• This will launch the Add-ons

Manager.

• Use the search field to

search for the Firebug Add-on.

• Install it by means of the

(59)

© 2014 SAP AG. All rights reserved. 59

Installing the Firebug Add-on in FireFox (2)

• Upon installation, note the new tab and the change in status:

(60)

© 2014 SAP AG. All rights reserved. 60

Setup for Debugging with FireBug

• Make sure that your Firebug Console is

activated/enabled by going to FireFox and click the FireBug and set to On for All Web Pages:

• Enable the Console and click All, as you see in the

(61)
(62)

© 2014 SAP AG. All rights reserved. 62

Overview

SAPUI5 Developer Studio is a set of tools for Eclipse that greatly simplify

the development process for UI5 applications and controls, including:

o

Wizards for project and view/controller creation

o

Wizards for control development

o

Code Completion for UI5 controls

o

TeamProvider for NGAP and BSP repositories

o

Application preview with an embedded Jetty server

o

Proxy-servlet to prevent cross-site-scripting errors

(63)

© 2014 SAP AG. All rights reserved. 63

Installation

(64)

© 2014 SAP AG. All rights reserved. 64

Installation

Prerequisite: Install the latest Java Development Kit (currently Version 7), if it is

not installed already.

• Install the Plugin into a version of standard eclipse or into the NWDS.

If you want to use the SAPUI5 Repository Team Provider you should choose

the 32bit version.

• To setup SAPUI5 you have to install the plugins by using the update sites of your

IDE.

• Once Eclipse/NWDS has been (re)started, the SAPUI5 Eclipse tools should be

available. One way to confirm a successful installation is to check whether you can create a UI Library Project / SAPUI5 Application Project.

(65)

© 2014 SAP AG. All rights reserved. 65

Public Trial

A trial version of the SAPUI5

framework has been released in the SAP Community

Network

• http://scn.sap.com/community/de

veloper-center/front-end

• Includes static JavaScript-Files,

(66)

Creating a UI5 Project with SAPUI5

Developer Studio

(67)

© 2014 SAP AG. All rights reserved. 67

Creating a New SAPUI5 Project

 In Eclipse , right-click on the project pane to bring up the context menu

(or use the File  New… entry from the Eclipse menu).

(68)

© 2014 SAP AG. All rights reserved. 68

Creating a New SAPUI5 Project

Select "SAPUI5 Application

Project".

(69)

© 2014 SAP AG. All rights reserved. 69

Creating a New SAPUI5 Project

 Enter the name of the project – e.g. Hello_World.

 Choose between „Desktop“ or „Mobile“ as the target device for your new project.

 We‘ll use „Desktop“ for this exercise.

 Leave the checkbox "create an initial View" checked.

(70)

© 2014 SAP AG. All rights reserved. 70

Creating a New SAPUI5 Project

 Enter the name of the initial view: e.g. "main".

 Leave the rest of entries at default settings.

(71)

© 2014 SAP AG. All rights reserved. 71

Creating a New SAPUI5 Project

 The last window is a summary screen containing the project properties.

 Click "Finish" to create the new project.

(72)

© 2014 SAP AG. All rights reserved. 72

Creating a New SAPUI5 Project

• You may see the following message from Eclipse:

(73)

© 2014 SAP AG. All rights reserved. 73

(74)

© 2014 SAP AG. All rights reserved. 74

(75)

© 2014 SAP AG. All rights reserved. 75

(76)

© 2014 SAP AG. All rights reserved. 76

Testing an Application (1)

Run on Server or Web App Preview – run on server is better, because it has a fixed

port instead of a random one-time port used by Web

App Preview. For testing purposes during class, you can select Web App Preview

– note the port issue if you change to Google or FireFox

(77)

© 2014 SAP AG. All rights reserved. 77

(78)

© 2014 SAP AG. All rights reserved. 78

Web Application Preview – Jetty

• Disadvantages compared to testing on server:

• Based on Internet Explorer, therefore does not display most CSS3 features.

• Creates a random port which stops working when Web App View is closed, if link is copied into a browser for debugging, this link stops working as well.

(79)

© 2014 SAP AG. All rights reserved. 79

Exercise 01: Create a simple SAPUI5 HelloWorld

1. In the SAPUI5 Developer Studio, create a new SAPUI5 Application Project with the name SAPUI5-Exc01-HelloWorld

2. Open the index.html and add the following lines between the script-Tag in the following position:

(80)

© 2014 SAP AG. All rights reserved. 80

Exercise 1: Create a simple SAPUI5 HelloWorld

(81)

© 2014 SAP AG. All rights reserved. 81

Unit 2 – SAP SAPUI5 Development: Unit Lessons

SAP SAPUI5 Components and Overview

Lesson 2: SAPUI5 Developer Studio

Lesson 3: Programming Applications

Lesson 4: UI Controls and MVC

Lesson 5: Databinding and Databinding - OData Lesson 6: Resource Handling

Lesson 7: Modularization Lesson 8: Localization

Lesson 9: Notepad Controls Lesson 10: Components

Lesson 11: Extending SAPUI5

Lesson 12: Styling, Theming and CVOM Charts

(82)
(83)

© 2014 SAP AG. All rights reserved. 83

• UI5 pages always have to start with the bootstrap, to load the UI5 runtime

• Attributes of the script tag are evaluated and used to configure the runtime:

odata-sap-ui-libs: the controls libraries to be used, comma-separated.

odata-sap-ui-theme: the theme

oThere are more attributes: data-sap-ui-language, data-sap-ui-rtl, … oInstead of putting the attributes in the script tag, many can also be added as

URL parameters

(84)

© 2014 SAP AG. All rights reserved. 84

Runtime Behavior of Bootstrap

jQuery enrichment with plugins – namespace jQuery.sap

Creation global object sap

SAPUI5 core class and all dependencies are executed

Runtime configuration is determined

All libraries and modules declared in the config. and their dependencies

are loaded

Stylesheet for the config. themes of each loaded libs are added to the

page

Loading of libs is finished and document ready state  initEvent of Core

(85)

© 2014 SAP AG. All rights reserved. 85

Configuration of the UI5 Runtime

Individual configuration

data-sap-ui-attribute

data: to comply with W3C recommendation for custom

attriubtes

sap-ui: identifier for SAPUI5 attributes

attribute: an specific configuration attribute

Access configuration:

sap.ui.getCore().getConfiguration(); 

sap.ui.core.Configuration

(86)

© 2014 SAP AG. All rights reserved. 86

Configuration Fallbacks

1.

System defined defaults

2.

Server wide defaults, read from /sap-ui-config.json

3.

Properties of the global configuration object

window["sap-ui-config"]

1.

A configuration string in the data-sap-ui-config attribute of the

bootstrap tag

4.

Individual data-sap-ui-xyz attributes of the bootstrap tag

5.

Using URL parameters

(87)

© 2014 SAP AG. All rights reserved. 87

Configuration Attributes

Attribute Type Default RT-Modification Description

theme string Base sap.ui.getCore.applyTheme() The theme to be used

inspect boolean false when set to true,

the sap-ui-debug.js module is included and provides some supportability

features

formatLocal string undefined Locale to use for

formatting

purpose, default is language locale ConfigurationOptions

(88)

© 2014 SAP AG. All rights reserved. 88

Internals about UI5 Rendering

UI5 control tree(s) are only rendered when the HTML page is finished loading

 Only then the UI areas do actually exist in the browser’s DOM

 This corresponds with jQuery’s $(document).ready() function

UI5 largely uses HTML strings to render its controls

 Historically using innerHTML for changing HTML was much faster than changing the DOM for the same purpose.

Changes to controls (add/remove properties) are not directly carried out

 Onload at initialization (placeAt calls are buffered until then)

 After control event handlers have finished their work

 After application logic has finished changing controls (UI5 registers a timeout)

(89)

© 2014 SAP AG. All rights reserved. 89

Application Script and UI Area

• After the bootstrap script tag an "application script" can follow in which the UI5

application is written:

– You create your controls like layouts and TextFields

– Display your controls in an HTML element called "UI area" by invoking the

placeAt method (there can be multiple UI areas)

1. Bootstrap 2. Application 3. UI-Area

(90)

© 2014 SAP AG. All rights reserved. 90

Useful Core Functions

sap.ui.getCore()

 Gets a core instance

sap.ui.getCore().byId(id)

 Gets an instance of a UI5 control which was created with id id

 Can be used to access removed controls (even though the id doesn’t exist in the DOM anymore)

sap.ui.getCore().applyChanges()

 Carries out and renders the changes for UI5 controls immediately, before the runtime would do it (use carefully!!)

jQuery.sap.domById(id)

 Gets any HTML element with id id

 If there is also a UI5 control with id id, the element returned is the topmost HTML element of this UI5 control (the UI5 control id is always used there)

 Similar to document.getElementById but gets rid of IE bug which also retrieves elements with the name of id

jQuery.sap.byId(id)

 Returns the jQuery object of the DOM element with the specified id

 Similar to jQuery(„#myId“) or

$(„#myId“) but handles escaping of dots and adds the hash character

(91)

© 2014 SAP AG. All rights reserved. 91

Unit 2 – SAP SAPUI5 Development: Unit Lessons

SAP SAPUI5 Components and Overview

Lesson 2: SAPUI5 Developer Studio Lesson 3: Programming Applications

Lesson 4: UI Controls and MVC

Lesson 5: Databinding and Databinding - OData Lesson 6: Resource Handling

Lesson 7: Modularization Lesson 8: Localization

Lesson 9: Notepad Controls Lesson 10: Components

Lesson 11: Extending SAPUI5

Lesson 12: Styling, Theming and CVOM Charts

(92)
(93)

© 2014 SAP AG. All rights reserved. 93

Overview

• Working with controls • Working with Layouts

• The UI-control gallery

provides deep information on each UI-control with reference to the API.

(94)

© 2014 SAP AG. All rights reserved. 94

UI-controls

SAPUI5 provides different types of UI-controls:

Simple Controls

Complex Controls

Value Holders

Dialogs

UX3 Controls

Layouts

(95)

© 2014 SAP AG. All rights reserved. 95

Button

• Simple push button

• attachPress assign event handler for push action • Lite property for a button with hover effect

(96)

© 2014 SAP AG. All rights reserved. 96

TextField

• Single row Input

• HTML or CSS input is escaped • Properties value, enabled, visible,

valueState

• Events change • Methods focus

(97)

© 2014 SAP AG. All rights reserved. 97

Image

• HTML-wrapper for images • Properties: src, alt

(98)

© 2014 SAP AG. All rights reserved. 98

AutoComplete

• TextField with proposed values • Works with ListItems

• Properties: items, selectedKey • Methods: addItem

(99)

© 2014 SAP AG. All rights reserved. 99

ComboBox

• ComboBox provides a list of predefined entries • Properties: items, selectedKey

• Events: change, liveChange • Methods: getLiveValue

(100)

© 2014 SAP AG. All rights reserved. 100

Tree

• Class Tree and TreeNode

• Tree consists of objects of type

TreeNode

• addNode to add TreeNode objects • attachSelect to assign eventhandler

(101)

© 2014 SAP AG. All rights reserved. 101

Menu

Class Menu and MenuItem

• addItem add MenuItem object to Menu

• addSubmenu adds a MenuItem as submenu • attachPress eventhandler

(102)

© 2014 SAP AG. All rights reserved. 102

Table

• sap.ui.table

• Table consists of Columns • Properties of Column:

(103)

© 2014 SAP AG. All rights reserved. 103

Shell

Part of sap.ui.ux3 Methods: setContent,

(104)

© 2014 SAP AG. All rights reserved. 104

Layout

• AbsoluteLayout • Form • GridLayout • MatrixLayout • TabStrip

(105)

© 2014 SAP AG. All rights reserved. 105

MatrixLayout

• Class MatrixLayout

• Place UI-Elements based on Cells

• createRow to create a new row in the matrix and add UI-element to it • Property layoutFixed is used to define how content is arranged

 True: cell size is set by the developer

 False:the cells are sized to fit the content

(106)

© 2014 SAP AG. All rights reserved. 106

(107)

© 2014 SAP AG. All rights reserved. 107

Exercise 02: Create a Simple Application

• Create new SAPUI5 project called WDE350-Ex02 with a initial view called

“PersonData” in Eclipse and open the view.

• Create a new sap.ui.commons.Panel and set its „text“ to „Enter Data“. • Create a MatrixLayout with two Labels, two TextFields and a Button:

 new sap.ui.commons.layout.MatrixLayout

 new sap.ui.commons.Label (text: „First Name“ / „Last Name“)

new sap.ui.commons.TextField

 new sap.ui.commons.Button (text: „Submit“)

• Add the Labels, TextFields and the Button to the layout with createRow(). • Add the layout to the Panel using the addContent() method.

• Add a press handler to the Button that displays the values of the TextFields:

attachPress(function() {…})  getValue()

(108)

© 2014 SAP AG. All rights reserved. 108

Exercise 02 Solution

Expected

(109)

© 2014 SAP AG. All rights reserved. 109

Exercise 03: Create Multiple Areas

1. Open your solution of exercise WDE350-Ex02.

2. Create 2 additional UI Areas above the „content“ UI Area and name them

„header“ and „menu“. 3. Create an new

sap.ui.commons.ApplicationHeader,

set the Welcome Message

setDisplayWelcome() and the Logoff setDisplayLogoff() to false and place it in the „header“ UI Area.

4. Create a Menubar with 2 Menu Items and place it in the „menu“ UI Area:

new sap.ui.commons.MenuBar new sap.ui.commons.MenuItem

(110)

© 2014 SAP AG. All rights reserved. 110

(111)

© 2014 SAP AG. All rights reserved. 111

Exercise 04: Core Functions

1. Open your solution of exercise 03. 2. For getting the TextField value when

the button is pressed:

• Do not use the TextField reference,

but retrieve the TextField using its ID (you have to give an ID first):

sap.ui.getCore().byId(…).get

Value()

3. Also alert the type of the HTML

element which is the root element of the Panel control:

• The ID of a control is always the ID

of the HTML element • Use jQuery.sap.domById(…) • • Expected outcome: Solution

(112)

© 2014 SAP AG. All rights reserved. 112

(113)
(114)

© 2014 SAP AG. All rights reserved. 114

Basic Model-View-Controller Concept

Views can be defined using

o XML with HTML, mixed or standalone

(sap.ui.core.mvc.XMLView) o JavaScript (sap.ui.core.mvc.JSView) o JSON (sap.ui.core.mvc.JSONView) o declarative HTML (sap.ui.core.mvc.HTMLView)

Controller

o bound to a view or standalone

o can also be used by multiple views

(115)

© 2014 SAP AG. All rights reserved. 115

• Controllers and views use the require/declare logic, so if a controller is

referenced like this:

• UI5 then checks if you already have defined the controller like this in one of your

already processed application sources

• If this is not the case then UI5 tries to load this definition from a file that by

default is located in your UI5 resources folder. This applies to views as well.

resources/sap/hcm/Address.controller.js

(116)

© 2014 SAP AG. All rights reserved. 116

• UI5 by default will try to load any required modules from its resource root URL,

namely from the centrally deployed web application. This would fail for the modules contained in your web application.

• Mixed location scenarios are supported with jQuery.sap.registerModulePath

registerModulePath

(117)

© 2014 SAP AG. All rights reserved. 117

Controller Events

Currently there are 4 events

defined in a controller:

onInit

– Fired when the view is first instantiated

onBeforeRendering

– Fired before the view is rendered

onAfterRendering

– Fired when the view has been rendered (the HTML is injected into the document)

onExit

– Fired when the controller is destroyed

– Can be used to free resources

• You can add handlers for any of these

(118)

© 2014 SAP AG. All rights reserved. 118

(119)

© 2014 SAP AG. All rights reserved. 119

(120)

© 2014 SAP AG. All rights reserved. 120

(121)

© 2014 SAP AG. All rights reserved. 121

(122)

© 2014 SAP AG. All rights reserved. 122 Feature JS View XML View JSON View HTML View

Controls from Standard and Custom Libraries Yes Yes Yes Yes

Self-contained registration of custom library locations Yes No No No

Properties of types string, int.boolean, float Yes Yes Yes Yes

Properties of other types (object) Yes No No No

Aggregation 1:1, 1:n, Association 1:1, 1:n Yes Yes Yes Yes

Single Event Listener Registration (maybe limited to some scope, e.g. controller/window)

Yes Yes Yes Yes

Multiple Eventlisteners and/or without scope Yes No No No

Simple Data Binding (Path, default or named model, template approach)

Yes Yes Yes Yes

Customized Data Binding (formatter, data type, factory approach)

Yes No No No

Embedded HTML (without use of HTML control) No Yes No No

Dynamic control creation (e.g. based on model data, but outside the data binding features)

Yes No No No

Code completion (Eclipse) Yes Yes, with

limitations

No No

Templating (Eclipse) Yes No No No

Validation No Yes No No

(123)

© 2014 SAP AG. All rights reserved. 123

Exercise 05: Multiple Views

1. Open your solution of exercise 04. 2. Create for each type a view.

3. Move your UI-code from the index.html to the PersonData.view.js file.

4. Create a view for each type: JS, XML, JSON:

sap.ui.view({id: [sID],

viewName: [sName], type: sap.ui.core.mvc.ViewType});

(124)

© 2014 SAP AG. All rights reserved. 124

Exercise 05: Multiple Views

5. Create a controller for each view:

sap.ui.controller([sViewName],{/*function definition*/});

6. Create for each view a single button with a press event method:

sap.ui.commons.Button({press: [fEventHandler]});

7. Instantiate a button event callback method for each view controller:

btnPressCallback : function(){

alert(‘Button pressed!‘); }

(125)

© 2014 SAP AG. All rights reserved. 125

Solution for Exercise 05: JS View

Next

JS View

(126)

© 2014 SAP AG. All rights reserved. 126

Solution for Exercise 05: XML View

Next

XML View

(127)

© 2014 SAP AG. All rights reserved. 127

Solution for Exercise 05: JSON View

Next

JSON View

(128)

© 2014 SAP AG. All rights reserved. 128

Exercise 05 Solution: Place Views

Back

1.

Open the PersonData.view.js file.

2.

Create a new Panel.

3.

Instantiate each view type.

4.

Add the view instances to a layout of type HorizonalLayout.

5.

Add the layout to the panel.

(129)

© 2014 SAP AG. All rights reserved. 129

Exercise 05 Solution: Place Views

• Expected UI Outcome:

(130)

© 2014 SAP AG. All rights reserved. 130

Unit 2 – SAP SAPUI5 Development: Unit Lessons

SAP SAPUI5 Components and Overview

Lesson 2: SAPUI5 Developer Studio Lesson 3: Programming Applications Lesson 4: UI Controls and MVC

Lesson 5: Databinding and Databinding - OData

Lesson 6: Resource Handling Lesson 7: Modularization

Lesson 8: Localization

Lesson 9: Notepad Controls Lesson 10: Components

Lesson 11: Extending SAPUI5

Lesson 12: Styling, Theming and CVOM Charts

(131)
(132)

© 2014 SAP AG. All rights reserved. 132

UI5 Data Binding

In UI5, DATA BINDING is used to bind UI5

controls to a data source that holds the application data, so that the controls are updated automatically whenever the application data is changed.

• Data binding supports binding of simple controls like TextField and list type controls like.

• See the complete documentation on how data binding works and how to implement it in an application.

With TWO-WAY-BINDING the application

data is updated whenever the value of a bound control changes, e.g. through user input.

application data

application data has been updated

John Doe Age: 35

John Doe Age: 36

UI5 Control / Output

John Doe, 35

Resulting UI5 Control / Output

John Doe, 36 application data Resulting application data John Doe Age: 35 John Doe Age: 36

UI5 Control / Output

John Doe, 35

UI5 Control / Output has been updated

(133)

© 2014 SAP AG. All rights reserved. 133

Data Binding: Model Types

UI5 data binding supports three different model implementations:

JSON model

 supports data in a JavaScript Object Notation format  supports two-way binding

XML model

 supports XML data  supports two-way binding

OData model

 supports OData compliant data

 creates OData requests and handles responses

 includes the open source library dataJS to handle OData requests and data

 experimental two-way binding

• Additionally, the ResourceModel helps binding translated texts • Applications can create their own Model implementations

(134)

© 2014 SAP AG. All rights reserved. 134

• To use data binding in a SAPUI5 applications you will need to instantiate the

appropiate model first. The constructor takes the URL of the model data or the data itself as the first parameter.

JSON-Model:

XML-Model:

OData-Model:

(135)

© 2014 SAP AG. All rights reserved. 135

Assigning the Model

• After the model has been created you can assign the model to the Core or

specific controls with the setModel method

• The relevant model for a control is the one which is nearest to it on the path up to

the root (UI area)

o If there is no model in the root path found the one attached to the core becomes the relevant model

(136)

© 2014 SAP AG. All rights reserved. 136

Property Binding

• Most of the properties of a control can be bound to model properties

• There are two ways to bind properties to the model, in the constructor with curly

braces or using the bindProperty method

bindProperty method:

•oControl.bindProperty("controlProperty", "modelProperty");

var oControl = new sap.ui.commons.TextView({ controlProperty: "{modelProperty}"

});

var oControl = new sap.ui.commons.TextView({ controlProperty: { path: “modelProperty” } });

curly braces syntax:

(137)

© 2014 SAP AG. All rights reserved. 137

(138)

© 2014 SAP AG. All rights reserved. 138

Exercise 06: Data Binding

1. Copy the solution of exercise 05 to SAPUI5-ex06 or extend your solution of exercise 05.

2. Create some JSON sample data.

3. Create JSON model instance / Set the data for the model / Set the model to the core.

4. Switch the controls in the „Enter Data“ panel from the VerticalLayout to a MatrixLayout and add 2 TextView controls:

new sap.ui.commons.layout.MatrixLayout new sap.ui.commons.TextView

5. Bind the data to the controls.

6. Update-function to the Button (optional).

(139)

© 2014 SAP AG. All rights reserved. 139

Exercise 06 Solution

(140)

© 2014 SAP AG. All rights reserved. 140

About Binding Paths

Absolute binding paths within this model:

/company/name

/company/info/employees

/company/contacts (a collection!) /company/contacts/0/name

Relative binding paths within the "/company"

context:

name

info/employees contacts

Relative binding paths within an aggregation

binding of "/company/contacts": name phone { company: { name: "ACME", info: { employees: 3 }, contacts: [ { name: "Barbara", phone: "873" },{ name: "Gerry", phone: "734" } ] } }

(141)

© 2014 SAP AG. All rights reserved. 141

Aggregation Binding

Aggregation binding is used to bind a collection of values, like binding multiple

rows to a table. To use aggregation you will have to use a control that acts as a template.

The aggregation binding can also be defined using the bindAggregation method of a control.

(142)

© 2014 SAP AG. All rights reserved. 142

(143)

© 2014 SAP AG. All rights reserved. 143

Exercise 07: Aggregation Binding

1. Copy the solution of exercise 06 to SAPUI-ex07 or extend your solution of exercise 06.

2. Create a new JSON model instance.

3. Set multiple first name options as data for the model and assign a key to each of them. 4. Replace the “first name” Textfield with a

Combobox and the “first name” Textview with a Textfield:

new sap.ui.commons.ComboBox new sap.ui.core.ListItem

5. Bind the data to combo box.

6. Include a function to update the new Textfield with the chosen value from the Combobox

(144)

© 2014 SAP AG. All rights reserved. 144

Exercise 07 Solution

(145)

© 2014 SAP AG. All rights reserved. 145

Multiple Models / Named Models

• It is possible to set multiple models for an element or the core by specifying

individual names for the models, which are used to identify them.

• Property bindings for a named model:

(146)

© 2014 SAP AG. All rights reserved. 146

Extended Data Binding Syntax

Extended property binding: Extended aggregation binding:

• Instead of only using the token name of a model property, can also use the

extended data binding syntax

o This enables you to use formatters and the type system for property binding and templates, filter and sorters for aggregation binding

• To use the extended syntax, you supply an object literal for the bound

(147)

© 2014 SAP AG. All rights reserved. 147

Formatters

• For properties you can supply a formatter function which will be called with the

value of the model property.

• The return value of the formatter function is used as the value of the bound

control:

(148)

© 2014 SAP AG. All rights reserved. 148

Exercise 08: Formatters

1. Open your solution of exercise 07.

2. Add a formatter to the Textview with the „Last Name“ data.

3. Create a function using the toUpperCase () Method inside the controller.

4. Capitalize the output in the Textview.

(149)

© 2014 SAP AG. All rights reserved. 149

Exercise 08 Solution

(150)

© 2014 SAP AG. All rights reserved. 150

Type System

Data binding supports the definition of types which can be handed over

when binding properties

o Bound properties with a defined type will automatically be formatted when displayed in the UI, input values in UI controls are parsed and converted back to the defined type in the model.

For each Type you can define the following parameters in the

constructor:

o format options:

Format options define how a value is formatted and displayed in the UI.

o constraints (optional):

Constraints define how an input value entered in the UI should look like. When parsing the value will be validated against these constraints.

(151)

© 2014 SAP AG. All rights reserved. 151

(152)

© 2014 SAP AG. All rights reserved. 152

Exercise 09: Date Type

1. Open your solution of exercise 08. 2. Extend your model in the controller

with a new attribute with the name

date and initialize the attribute with the todays date.

3. Create a new subarea in your index.html called subheader.

4. Create a new panel with today‘s date in the format, DD.MM.YYYY, as its text.

5. Place the newly created panel at the subheader area.

(153)

© 2014 SAP AG. All rights reserved. 153

Exercise 09 Solution

Back

• PersonData.controller.js:

(154)

© 2014 SAP AG. All rights reserved. 154

(155)

© 2014 SAP AG. All rights reserved. 155

Sorters and Filters

(156)

© 2014 SAP AG. All rights reserved. 156

Exercise 10: Sorting & Filtering

1. Open your solution of exercise 09.

2. Duplicate the „First Name“ ComboBox. 3. Sort the data in one of the ComboBoxes

alphabetically:

sap.ui.model.Sorter sap.ui.model.Filter

sap.ui.model.FilterOperator

4. Filter the data in the other ComboBox by names between the letters A and M.

(157)

© 2014 SAP AG. All rights reserved. 157

Exercise 10 Solution

References

Related documents

2/10/2014 Vale Skirne Huldra Vale Skirne Brae Statpipe Vale Skirne Vale Heimdal Vale Huldra Vale Brae Statpipe Vale Vale Heimdal. Heimdal – Brae condensate

This paper takes the Mexico City International Airport (AICM) as example, and performs an analysis of expansion investment, both in runways and terminals capacity, taking a

While traditionally, most of the nation's industrial wood came from the harvest of natural forests, humans possess the knowledge and expertise to create forests for the production

A traffic network map of the Topeka Urbanized Area, developed in QRS Il software by use of the General Network Editor (GNE) and depicting the year 2000 existing system,

SAP Business One allows you to define additional fields for the business data categories. These fields are called user-defined fields. They are not affected by any release or

Organization is given in seneca valley future makers series that subject Healthcare and the seneca valley high school guidance office staff members who must be a credit

We use a natural f -invariant measure on X to induce a measure on the direct/inverse limit space and show that this induced measure is a natural σ-invariant measure where σ is the

In this course, the students will be introduced to a professionally developed learning framework that will help them to thoroughly and critically assess organizational