Sapx05 en Col95 Fv Show

July 23, 2017 | Author: Ming | Category: J Query, Java Script, Eclipse (Software), Firefox, Web Browser
Share Embed Donate


Short Description

Descripción: SAP SAPUI5 User Experience Development...

Description

SAPX05 SAP SAPUI5 User Experience Development

SAP SAPGUI5 Training System: Windows 2008 R2, with latest SAP SAPUI5 Instructor Handbook Collection 95

© 2014 SAP AG. All rights reserved.

1

© 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.

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.

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. © 2014 SAP AG. All rights reserved.

2

© 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.

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.

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

INTERMEC ist eine eingetragene Marke der Intermec Technologies Corporation.

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

Bluetooth ist eine eingetragene Marke von Bluetooth SIG Inc.

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.

© 2014 SAP AG. All rights reserved.

Wi-Fi ist eine eingetragene Marke der Wi-Fi Alliance. 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 -Dienstleistungen 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 BusinessObjects-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 Informationszwecken. 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.

3

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 Optimizing SAPUI5

© 2014 SAP AG. All rights reserved.

4

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 with SAP SAPUI5 so as to prepare the participant for projects

© 2014 SAP AG. All rights reserved.

5

Course Goals

This course will prepare you to: • Understand SAP’s User Experience strategy • Understand and use the SAPUI5 APIs • Create applications for mobile using SAP’s SAPUI5 framework

© 2014 SAP AG. All rights reserved.

6

Course Objectives

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

© 2014 SAP AG. All rights reserved.

7

Course Prerequisites Required Knowledge (Essential) • •

SAPX04 Basic understanding of JavaScript and HTML5

Recommended Familiarity with Object-oriented programming • General understanding of SAP’s User Experience strategy •

© 2014 SAP AG. All rights reserved.

8

Target Audience & Course Duration

This course is intended for the following audiences: • •

Developer Technology Consultant

Duration: 3 days

© 2014 SAP AG. All rights reserved.

9

Course Content Content: Unit 1 – SAP SAPUI5 Components and Overview Unit 2 – SAP SAPUI5 Development

© 2014 SAP AG. All rights reserved.

10

Recommended Course Outline and Schedule Preface 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…

© 2014 SAP AG. All rights reserved.

11

Course Outline and Schedule Preface

Day 2: Unit 2 – SAP SAPUI5 Development (Continued) •

Lesson 5: Databinding and Databinding - OData



Lesson 6: Resource Handling



And associated lab exercises…

© 2014 SAP AG. All rights reserved.

12

Course Outline and Schedule Preface

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…

© 2014 SAP AG. All rights reserved.

13

UNIT 1 SAP SAPUI5 Components and Overview

Unit 1 – SAP SAPUI5 Architecture and Overview: Unit Objectives

After completing this unit, you will be able to: •

Describe SAP SAPUI5 architecture, components and solution

© 2014 SAP AG. All rights reserved.

15

Unit 1 – SAP SAPUI5 Components and Overview: Unit Lessons SAP SAPUI5 Components and Overview Lesson 1: SAP SAPUI5 Components and Overview

© 2014 SAP AG. All rights reserved.

16

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 •

© 2014 SAP AG. All rights reserved.

17

Introduction to SAP User experience Strategy

How to Achieve Design Innovation?

Human Values

(usability, desirability)

Business (viability)

© 2014 SAP AG. All rights reserved.

DESIGN INNOVATION

Technology (feasibility)

19

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. © 2014 SAP AG. All rights reserved.

20

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

© 2014 SAP AG. All rights reserved.

21

SAP User Experience Strategy Existing Applications

Usage/Reach

New Applications

NEW © 2014 SAP AG. All rights reserved.

SAP Top use scenarios Fiori Core use Renovation scenarios (SAPUI5)

RENEW

Enablement Tools Specific (SAPUI5customer & Screen value Personas) use scenarios

ENABLE 22

SAP User Experience Strategy

NEW

RENEW

ENABLE

UX DESIGN SERVICES © 2014 SAP AG. All rights reserved.

23

SAP User Experience Strategy

NEW

RENEW

ENABLE

UX DESIGN SERVICES © 2014 SAP AG. All rights reserved.

24

Have you seen these consumer apps from SAP?

Recalls Plus

© 2014 SAP AG. All rights reserved.

PhotoTribe

Fan Experience

MyRunway

25

Provide Consumer-Grade UX for NEW Applications

SAP Fraud Management

© 2014 SAP AG. All rights reserved.

SAP Customer Engagement Intelligence 26

SAP User Experience Strategy

NEW

RENEW

ENABLE

UX DESIGN SERVICES © 2014 SAP AG. All rights reserved.

27

SAP Fiori – Keep Simple Things Simple

© 2014 SAP AG. All rights reserved.

28

SAP User Experience Design Principles

Role-based

Responsive

Simple

Coherent

Instant Value

De-compose into task-based experience

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

© 2014 SAP AG. All rights reserved.

29

SAP User Experience Strategy

NEW

RENEW

ENABLE

UX DESIGN SERVICES © 2014 SAP AG. All rights reserved.

30

ENABLE customer specific value scenarios Example: SAP Screen Personas for SAP GUI

• Allows ‘Do-it-Yourself’ to your specific needs

© 2014 SAP AG. All rights reserved.

31

Key Enablement Tools SAP Screen Personas

Floorplan Manager

(for SAP GUI screens)

(for FPM screens*)

NWBC & Side Panel

Theme Designer

(all screens)

(all screens)

© 2014 SAP AG. All rights reserved.

SAPUI5 Application Development Tools

32

SAP Key UI Tools & Technologies (Big Picture)

UI Theme Designer

SAP NetWeaver Portal

UI Clients

SAP NetWeaver Business Client

SAP GUI

SAPUI5 Application Development Tools

UI Tools

Flexible UI Designer

SAPUI5 WebDynpro ABAP/ Floorplan Manager

*

SAP Screen Personas

DYNPRO

UI Technologies

GATEWAY

Backend * Harmonized in Run & Design Time with WebUIF © 2014 SAP AG. All rights reserved.

33

Why focus on User Experience?

Great User Experience

• UX impacts Business Value Gain productivity Increase user adoption Decrease user errors Save training costs

© 2014 SAP AG. All rights reserved.

$ 34

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 End users perceive custom built screens as SAP Screens

© 2014 SAP AG. All rights reserved.

35

SAPUI5 Overview, Architecture and Components

SAP UI Development Toolkit for HTML5



SAP UI Development Toolkit for HTML5 o The official long name



SAPUI5 o The short name

© 2014 SAP AG. All rights reserved.

37

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. Using and including the popular jQuery library

© 2014 SAP AG. All rights reserved.

38

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 Theming generator

© 2014 SAP AG. All rights reserved.

39

UI5 Browser Support

Internet Explorer

Firefox

Chrome

Safari

Version 8 and upwards

Version 10 and upwards Version 10 ESR and upwards

Version 1 and upwards

Version 3 and upwards

(with limitations)*

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

© 2014 SAP AG. All rights reserved.

40

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 used in production.

© 2014 SAP AG. All rights reserved.

41

UI5 Architecture Overview

© 2014 SAP AG. All rights reserved.

42

SAPUI 5 Architecture Overview

Themes

SAPUI5 Libraries

Controls

Data Binding



Core JavaScript framework including jQuery



Extension libraries

Desktop

Mobile

• •

jQuery.UI

Render Manager

UI

SAPUI5 Core

Optional server component

Desktop

Mobile

Control Base



„Helper“ assets like e.g.



• Event

Resources

Device

Utils

SAP jQuery Plug-ins

Controls Themes

Logger



Less (less.js) the dynamic style language Code minimizer

jQuery

(Static) Web Server

© 2014 SAP AG. All rights reserved.

Resource Handler (optional)

43

UI5 Control Libraries sap.ui.commons

sap.ui.ux3

Includes “bread and butter" controls like TextField, Button

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

sap.ui.table

sap.m

Includes the Table control

Includes controls for mobile devices

And more, like sap.viz, sap.ui.dev … © 2014 SAP AG. All rights reserved.

44

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.

© 2014 SAP AG. All rights reserved.

45

UI5 Knowledge and Test Resources

Documentation and Information

UI5 support and question channels

• UI5 Wiki

• SAPUI5 Community

• UI5 Mobile Wiki

• CSN Component:

• UI5 Tools Wiki

• CA-UI5 (UI5 Runtime)

• Demokit

• CA-UI5-MOB (UI5 Mobile Lib)

• API Documentation • General UI5 Documentation

Control and code testing • Test Suite

© 2014 SAP AG. All rights reserved.

UI5 Tools support and question channels • SAPUI5 Tools Community • CSN Component: • CA-UI5-TOL (UI5 Tools)

46

UI5 Application Example •

Showcase of SAP Applications built with UI5

© 2014 SAP AG. All rights reserved.

47

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) – SDK

© 2014 SAP AG. All rights reserved.

48

Unit Summary

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

Describe SAP SAPUI5 architecture and components

© 2014 SAP AG. All rights reserved.

49

UNIT 2 SAP SAPUI5 Development

Unit 1 – SAP SAPUI5 Development: Unit Objectives

After completing this unit, you will be able to: •

Develop applications using SAP

© 2014 SAP AG. All rights reserved.

51

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 Lesson 13: SAPUI5 Mobile and Optimizing UI5 Files © 2014 SAP AG. All rights reserved.

52

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 a note of it.

© 2014 SAP AG. All rights reserved.

53

Lab Environment Setup 2



Close the Welcome tab.



Go to File  Import.



In the Import window that appears, select General  Existing Projects into Workspace and then choose Next.

© 2014 SAP AG. All rights reserved.

54

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.



Click OK. © 2014 SAP AG. All rights reserved.

55

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

© 2014 SAP AG. All rights reserved.

56

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.

© 2014 SAP AG. All rights reserved.

57

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 Addon.



Install it by means of the corresponding Install button:

© 2014 SAP AG. All rights reserved.

58

Installing the Firebug Add-on in FireFox (2)



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



Close all tabs.

© 2014 SAP AG. All rights reserved.

59

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 screen shot example below:

© 2014 SAP AG. All rights reserved.

60

SAPUI5 Developer Studio

Overview



SAPUI5 Developer Studio is a set of tools for Eclipse that greatly simplify the development process for UI5 applications and controls, including:

o o o o o o

Wizards for project and view/controller creation Wizards for control development Code Completion for UI5 controls TeamProvider for NGAP and BSP repositories Application preview with an embedded Jetty server Proxy-servlet to prevent cross-site-scripting errors

© 2014 SAP AG. All rights reserved.

62

Installation

NOTE – the training system already has all relevant components installed

© 2014 SAP AG. All rights reserved.

63

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.

© 2014 SAP AG. All rights reserved.

64

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, war-Files and the Demokit

© 2014 SAP AG. All rights reserved.

65

Creating a UI5 Project with SAPUI5 Developer Studio

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).



Choose New  Project…

© 2014 SAP AG. All rights reserved.

67

Creating a New SAPUI5 Project



Select "SAPUI5 Application Project".



Click "Next".

© 2014 SAP AG. All rights reserved.

68

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.



Click "Next".

© 2014 SAP AG. All rights reserved.

69

Creating a New SAPUI5 Project



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



Leave the rest of entries at default settings.



Click "Next".

© 2014 SAP AG. All rights reserved.

70

Creating a New SAPUI5 Project



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



Click "Finish" to create the new project.

© 2014 SAP AG. All rights reserved.

71

Creating a New SAPUI5 Project



You may see the following message from Eclipse:



Click Yes to switch to the Java EE perspective.

© 2014 SAP AG. All rights reserved.

72

The New Project IDE

© 2014 SAP AG. All rights reserved.

73

Adding a Shell to the View

© 2014 SAP AG. All rights reserved.

74

Adding the sap.ui.ux3 library

© 2014 SAP AG. All rights reserved.

75

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

© 2014 SAP AG. All rights reserved.

76

Testing an Application (2)

© 2014 SAP AG. All rights reserved.

77

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.



Therefore, this is not recommended.

© 2014 SAP AG. All rights reserved.

78

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:

3. Save and run the application using the Web App Preview (Jetty)

© 2014 SAP AG. All rights reserved.

79

Exercise 1: Create a simple SAPUI5 HelloWorld



Results of test:

© 2014 SAP AG. All rights reserved.

80

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 Lesson 13: SAPUI5 Mobile and Optimizing UI5 Files © 2014 SAP AG. All rights reserved.

81

Programming Applications

SAPUI5 Bootstrap



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: o data-sap-ui-libs: the controls libraries to be used, comma-separated. o data-sap-ui-theme: the theme o There are more attributes: data-sap-ui-language, data-sap-ui-rtl, … o Instead of putting the attributes in the script tag, many can also be added as URL parameters

© 2014 SAP AG. All rights reserved.

83

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 fired  all registered eventhandlers are executed

© 2014 SAP AG. All rights reserved.

84

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

© 2014 SAP AG. All rights reserved.

85

Configuration Fallbacks

1.

System defined defaults

2.

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

Properties of the global configuration object window["sap-uiconfig"] 1. A configuration string in the data-sap-ui-config attribute of the bootstrap tag 3.

4.

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

5.

Using URL parameters

6.

Setters in this Configuration object (only for some parameters)

© 2014 SAP AG. All rights reserved.

86

Configuration Attributes

Attribute

Type

Default

RT-Modification

Description

theme

string

Base

sap.ui.getCore.app lyTheme()

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

© 2014 SAP AG. All rights reserved.

87

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) When core method applyChanges() is triggered

© 2014 SAP AG. All rights reserved.

88

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

© 2014 SAP AG. All rights reserved.

89

Useful Core Functions sap.ui.getCore()

jQuery.sap.domById(id)

 Gets any HTML element with id id  If there is also a UI5 control with id id, the sap.ui.getCore().byId(id) element returned is the topmost HTML element of this UI5 control (the UI5 control  Gets an instance of a UI5 control which was id is always used there) created with id id  Similar to document.getElementById but  Can be used to access removed controls gets rid of IE bug which also retrieves (even though the id doesn’t exist in the elements with the name of id DOM anymore)  Gets a core instance

sap.ui.getCore().applyChanges()

jQuery.sap.byId(id)

 Carries out and renders the changes for UI5  Returns the jQuery object of the DOM controls immediately, before the runtime element with the specified id would do it (use carefully!!)  Similar to jQuery(„#myId“) or $(„#myId“) but handles escaping of dots and adds the hash character

© 2014 SAP AG. All rights reserved.

90

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 Lesson 13: SAPUI5 Mobile and Optimizing UI5 Files © 2014 SAP AG. All rights reserved.

91

UI Controls

Overview



Working with controls



Working with Layouts



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

© 2014 SAP AG. All rights reserved.

93

UI-controls



SAPUI5 provides different types of UI-controls:

     

Simple Controls Complex Controls Value Holders Dialogs UX3 Controls Layouts

© 2014 SAP AG. All rights reserved.

94

Button •

Simple push button



attachPress assign event handler for push action



Lite property for a button with hover effect

© 2014 SAP AG. All rights reserved.

95

TextField



Single row Input



HTML or CSS input is escaped



Properties value, enabled, visible, valueState



Events change



Methods focus

© 2014 SAP AG. All rights reserved.

96

Image



HTML-wrapper for images



Properties: src, alt



Events: press

© 2014 SAP AG. All rights reserved.

97

AutoComplete



TextField with proposed values



Works with ListItems



Properties: items, selectedKey



Methods: addItem

© 2014 SAP AG. All rights reserved.

98

ComboBox



ComboBox provides a list of predefined entries



Properties: items, selectedKey



Events: change, liveChange



Methods: getLiveValue

© 2014 SAP AG. All rights reserved.

99

Tree



Class Tree and TreeNode



Tree consists of objects of type TreeNode



addNode to add TreeNode objects



attachSelect to assign eventhandler

© 2014 SAP AG. All rights reserved.

100

Menu •

Class Menu and MenuItem



addItem add MenuItem object to Menu



addSubmenu adds a MenuItem as submenu



attachPress eventhandler

© 2014 SAP AG. All rights reserved.

101

Table



sap.ui.table



Table consists of Columns



Properties of Column: • Label, Template

© 2014 SAP AG. All rights reserved.

102

Shell



Part of sap.ui.ux3



Methods: setContent, attachWorksetItemSelected

© 2014 SAP AG. All rights reserved.

103

Layout



AbsoluteLayout



Form



GridLayout



MatrixLayout



TabStrip

© 2014 SAP AG. All rights reserved.

104

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



Property colums: amout of colums

© 2014 SAP AG. All rights reserved.

105

Example of Multiple UI Areas for Exercise 02

© 2014 SAP AG. All rights reserved.

106

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 new new new

sap.ui.commons.layout.MatrixLayout (text: „First Name“ / „Last Name“) sap.ui.commons.Label sap.ui.commons.TextField 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()

Solution © 2014 SAP AG. All rights reserved.

107

Exercise 02 Solution



© 2014 SAP AG. All rights reserved.

Expected outcome:

108

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

© 2014 SAP AG. All rights reserved.

Solution

109

Exercise 03 Solution

© 2014 SAP AG. All rights reserved.

110

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()



Expected outcome:

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(…)

Solution

• © 2014 SAP AG. All rights reserved.

111

Exercise 04 Solution

© 2014 SAP AG. All rights reserved.

112

MVC

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



Model: Data binding can be used on the views

© 2014 SAP AG. All rights reserved.

114

File Location Logic



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 © 2014 SAP AG. All rights reserved.

115

registerModulePath •

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



Example of using registerModulePath:

© 2014 SAP AG. All rights reserved.

116

Controller Events

Currently there are 4 events defined in a controller:  onInit





You can add handlers for any of these for to your controller class:

– 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

© 2014 SAP AG. All rights reserved.

117

Example of an JS View

© 2014 SAP AG. All rights reserved.

118

Example XML View

© 2014 SAP AG. All rights reserved.

119

Example JSON View

© 2014 SAP AG. All rights reserved.

120

Example HTML View

© 2014 SAP AG. All rights reserved.

121

View Type Comparison 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

© 2014 SAP AG. All rights reserved.

122

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});

Continued

© 2014 SAP AG. All rights reserved.

123

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!‘); }

© 2014 SAP AG. All rights reserved.

124

Solution for Exercise 05: JS View

JS View See Notes below for detail

Next © 2014 SAP AG. All rights reserved.

125

Solution for Exercise 05: XML View

XML View See Notes below for detail

Next © 2014 SAP AG. All rights reserved.

126

Solution for Exercise 05: JSON View

JSON View See Notes below for detail

Next © 2014 SAP AG. All rights reserved.

127

Exercise 05 Solution: Place Views

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.

NOTE – See notes below for details.

Back © 2014 SAP AG. All rights reserved.

128

Exercise 05 Solution: Place Views •

Expected UI Outcome: o

Click on of the buttons to view the results:

© 2014 SAP AG. All rights reserved.

129

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 Lesson 13: SAPUI5 Mobile and Optimizing UI5 Files © 2014 SAP AG. All rights reserved.

130

Databinding

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.





With TWO-WAY-BINDING the application data is updated whenever the value of a bound control changes, e.g. through user input.

application data

UI5 Control / Output

application data

John Doe

John Doe, 35

John Doe

John Doe Age: 36

John Doe, 35

Age: 35

Age: 35 application data has been updated

UI5 Control / Output

Resulting UI5 Control / Output

John Doe, 36

Resulting application data

John Doe

UI5 Control / Output has been updated

John Doe, 36

Age: 36



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.

© 2014 SAP AG. All rights reserved.

132

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 © 2014 SAP AG. All rights reserved.

133

Creating a Model Instance



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:

© 2014 SAP AG. All rights reserved.

134

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

© 2014 SAP AG. All rights reserved.

135

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");

curly braces syntax: var oControl = new sap.ui.commons.TextView({ controlProperty: "{modelProperty}" });

(alternatively) by path: var oControl = new sap.ui.commons.TextView({ controlProperty: { path: “modelProperty” } }); © 2014 SAP AG. All rights reserved.

136

Example for Simple Control

© 2014 SAP AG. All rights reserved.

137

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).

solution © 2014 SAP AG. All rights reserved.

138

Exercise 06 Solution

Back © 2014 SAP AG. All rights reserved.

139

About Binding Paths {

}

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

© 2014 SAP AG. All rights reserved.



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 140

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.

© 2014 SAP AG. All rights reserved.

141

Example of Aggregation Binding

© 2014 SAP AG. All rights reserved.

142

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 (optional).

© 2014 SAP AG. All rights reserved.

Solution

143

Exercise 07 Solution

Back © 2014 SAP AG. All rights reserved.

144

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:



Aggregation bindings for a named model:

© 2014 SAP AG. All rights reserved.

145

Extended Data Binding Syntax



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 property/aggregation.

Extended property binding:

© 2014 SAP AG. All rights reserved.

Extended aggregation binding:

146

Formatters

Exercise 8



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:

© 2014 SAP AG. All rights reserved.

147

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.

Solution

© 2014 SAP AG. All rights reserved.

148

Exercise 08 Solution

Back © 2014 SAP AG. All rights reserved.

149

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.

© 2014 SAP AG. All rights reserved.

150

Example – Date Type

© 2014 SAP AG. All rights reserved.

151

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. Solution

© 2014 SAP AG. All rights reserved.

152

Exercise 09 Solution •



PersonData.controller.js:

PersonData.view.js:

Back © 2014 SAP AG. All rights reserved.

153

Custom Types

© 2014 SAP AG. All rights reserved.

154

Sorters and Filters •

When using aggregation binding, you can provide initial sorting and filtering.

© 2014 SAP AG. All rights reserved.

155

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.

Solution © 2014 SAP AG. All rights reserved.

156

Exercise 10 Solution

Back © 2014 SAP AG. All rights reserved.

157

Calculated Fields •

Calculated Fields allow the binding of multiple properties in different models to a single property of a control. o E.g. - value property of text field may be bound to a property firstName and a property lastName in a model.



Application can access these values in a formatter function and decide how they will be processed or combined together:

Property Declaration:

Formatter Function:

© 2014 SAP AG. All rights reserved.

158

Calculated Fields – Extended Syntax •

The extended syntax for calculated fields can be used in declarative views such as html and xml views



Because it is still experimental, it needs to be switched on via the configuration flag xx-bindingSyntax=„complex“ within the bootstrap



Now you can mix the text and calculated fields:

© 2014 SAP AG. All rights reserved.

159

Example of Calculated Fields

© 2014 SAP AG. All rights reserved.

160

Exercise 11: Calculated Fields 1. Open your solution of exercise 10. 2. Create a new panel named „Calculated Fields“. 3. Create a dataset with first names, last names, gender and occupations.

4. Create a table with 3 columns: (you need to add the sap.ui.table library to the bootstrap) •

sap.ui.table.Table



sap.ui.table.Column

5. Display the first names in the first column, the last names in the second column and a combination of first name, last name, gender and occupation in the last column.

Solution © 2014 SAP AG. All rights reserved.

161

Exercise 11 Solution

Back © 2014 SAP AG. All rights reserved.

162

Master-Detail Relationship





A master-detail relationship is a 1:n type relationship Examples of a masterdetail relationship are: o A set of purchase orders and a set of line items belonging to each purchase order o An expense report with a set of expense line items o A department with a list of employees belonging to it



An application can use this master-detail relationship to enable users to navigate through the purchase order data and see the detail data for line items only related to the master purchase order selected © 2014 SAP AG. All rights reserved.

163

Example of Master-Detail

© 2014 SAP AG. All rights reserved.

164

Example of Master-Detail: Code Part 1

© 2014 SAP AG. All rights reserved.

165

Example of Master-Detail: Code Part 2

© 2014 SAP AG. All rights reserved.

166

Input Validation



To catch invalid user input, you can register the following handlers to the SAPUI5 Core. o attachFormatError o attachParseError o attachValidationError o attachValidationSuccess



Example:

© 2014 SAP AG. All rights reserved.

167

Exercise 12: Data Binding



Exercise 12

Exercise 12: Create a searchable Music store and populate it with data from iTunes

© 2014 SAP AG. All rights reserved.

168

Exercise 12: Data Binding with AJAX

1. Copy the project WDE350-Ex12-Template to WDE350-Ex12. 2. In createContent of the Shell View, add one more workset item (text: „Music Store“, key: „musicstore“) to the Shell. 3. Instantiate the new View and assign it to mContent.musicstore .

Next © 2014 SAP AG. All rights reserved.

169

Exercise 12: Data Binding with AJAX Part 2 4. In createContent of the musicstore View, create the following controls: • One sap.ui.commons.SearchField, calling the Controller‘s „doSearch“ method with the Controller being the „this“ context: search:[oController.onSearch, oController] • One sap.ui.table.Table (new control library “sap.ui.table” to be added to bootstrap!); use an extended binding object to bind and sort the Table rows: • One sap.ui.commons.layout.VerticalLayout with width set to “100%”

5. Add SearchField and Table to the layout and return it. 6. Implement both controller methods (empty for now): onSearch and onSelectionChange. 7. Test the UI and verify the Music Store comes up (empty table).

Next © 2014 SAP AG. All rights reserved.

170

Exercise 12: Data Binding with AJAX Part 3 8. Add three columns to the Table, binding them to certain attributes (artworkUrl30,trackName,artistName) – including an Image column (artworkUrl30). 9. In the controller, implement the „onInit“ method, create an empty JSONModel, assign it to „this.model“ and set it on the View: this.model = new sap.ui.model.json.JSONModel(); this.getView().setModel(this.model);

10. In onSearch, read the event parameter „query“, put it into an iTunes search URL and set the data on the JSONModel: var searchTerm = oEvent.getParameter("query"); var url = "http://itunes.apple.com/search?term=" + searchTerm + "&country=FR&media=music&entity=song&callback=?"; this.model.setData(data);

11. Open the Shell.view.js and implement the commented steps.

Next © 2014 SAP AG. All rights reserved.

171

Exercise 12 Solution •

Run the application, enter an artist or song name and press Enter. After a second, the Table will be populated with the search results from iTunes:

Back © 2014 SAP AG. All rights reserved.

172

Exercise 12 – Part 1 – Solution

See the Notes section below for the detailed steps

© 2014 SAP AG. All rights reserved.

173

Exercise 12 – Part 2 – Solution

See the Notes section below for the detailed steps

© 2014 SAP AG. All rights reserved.

174

Databinding – OData

OData – Open Data Protocol



Based on HTTP, Atom Pub format and JSON



Enables provision of data services based REST principles



Released under “open specification promises“ by Microsoft



Defines data queries using URLs constructed with specific rules



Defines data formats representing resources like collections, entries, etc. in either Atom or JSON format



OData URL structure:

http://services.odata.org/OData/OData.svc/Category(1)/Products?$top=2 Service Root URI

© 2014 SAP AG. All rights reserved.

Resource path

Query options

176

OData – Service Document & Metadata •

Service Document o The service document (returned at the OData service root) gives you the titles and urls for each service feed:

http://services.odata.org/V3/OData/OData.svc/



$metadata o The $metadata entry for an OData service return a EDMX file (Entity Data Model XML) that contains a complete description of the feeds, types, properties and relationships exposed by the OData service:

http://services.odata.org/V3/OData/OData.svc/$metadata •

Alternatively, this experimental API Explorer by the OData Service can be used: http://services.odata.org/ODataAPIExplorer/ODataAPIExplorer.html

© 2014 SAP AG. All rights reserved.

177

OData – System Query Options •

When accessing an OData service, you can supply some system query options to influence the returned entries:

Parameter Description

Example

$orderby

Orders entries by the entity supplied

/Products?$orderby=Rating,desc

$top

Selects only the first N items in a collection

/Products?$top=5

$skip

selects entries starting by N+1

/Products?$skip=2

$filter

filters entries based on the criteria

/Suppliers?$filter=Address/City eq 'Redmond'

$expand

expanded Entries are eagerly loaded and presented inline

/Categories?$expand=Products

$format

defines the format that the server must return

/Products?$format=json

$select

returns the subset of the specified properties

/Products?$select=Price,Name

© 2014 SAP AG. All rights reserved.

178

Adding OData Query Options •

SAPUI5 handles most of the URL parameters for OData services automatically. You do have the ability to add query options manually; either by adding them to service URL or passing a map of parameters when using bindElement or bindAggregation. Expand Parameter:

Select Parameter:

oControl.bindElement( "/Category(1)", { expand: "Products" } );

oControl.bindElement( "/Category(1)", { expand: "Products", select: "Name,ID,Products" });

oTable.bindRows({ path: "/Products", parameters: { expand: "Category" } });

© 2014 SAP AG. All rights reserved.

oTable.bindRows({ path: "/Products", parameters: { select: "Name,Category" } });

179

Exercise 13: Example Code for OData

© 2014 SAP AG. All rights reserved.

Exercise 13

180

Exercise 13: oData 1. Open your solution of exercise 11. 2. Create a new panel named „OData“. 3. Create a variable with the link to the OData service URL: •

http://services.odata.org/Northwind /Northwind.svc

4. Create a table with 5 columns, labeled: •

ID, First Name, Last Name, Title, Notes

5. Bind columns to these subsets: •

EmployeeID, FirstName, LastName, Title, Notes

6. Bind the rows to the Entity Set: „/Employees“

Solution © 2014 SAP AG. All rights reserved.

181

Exercise 13 Solution

Back © 2014 SAP AG. All rights reserved.

182

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 Lesson 13: SAPUI5 Mobile and Optimizing UI5 Files © 2014 SAP AG. All rights reserved.

183

Resource Handling

Overview Resource Handling •

The Resource Handling of SAPUI5 is separated in two parts:

Client-side Mechanisms • Modularization ► Require/Declare for JavaScript files • Localization ► Resource Bundles Both concepts are loading additional resources from a server where this server might be any kind of web server (simple, Java, ABAP …), independent of the server side technology.

Server-side Mechanisms •





SAPUI5 provides a Resource Handler for the Java server and the integration into the Eclipse IDE, aligned with the concept of the JavaServer Faces - Resource Handler, also supporting standard and test-relevant resources Additional features: ► Theme fallback ► Resource Bundle fallback SAPUI5 also provides a Resource Handler for the ABAP server which is used for SAPUI5 applications to serve the resources from the UI libraries properly.

• Both parts are not dependent on each other. Furthermore they are complementary. © 2014 SAP AG. All rights reserved.

185

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 Lesson 13: SAPUI5 Mobile and Optimizing UI5 Files © 2014 SAP AG. All rights reserved.

186

Modularization

Modularization using require •

The UI5 framework has built in support for modularizing larger JavaScript applications. o Instead of defining (and loading) one large chunk of JavaScript code, an application can be split into smaller parts, which then can be loaded at runtime when they are needed. These smaller, individual files are called Modules in UI5. o To load a module, the function jQuery.sap.require must be used. o In a module name all “.” are replaced by “/” and an “.js” extension is added to create a path. So sap.ui.commons.MessageBox will become sap/ui/commons/MessageBox.js



This is an example: jQuery.sap.require("sap.ui.commons.MessageBox"); function onPressButton() { sap.ui.commons.MessageBox.alert("Hello World!"); } © 2014 SAP AG. All rights reserved.

188

Modularization using declare •

In order to create your own JavaScript Module you need to “declare” the module: o A file becomes a module by calling the jQuery.sap.declare function. This tells the UI5 runtime about the name of the module. UI5 runtime keeps track which modules are already loaded. o If a module is required (jQuery.sap.require) and it hasn’t been loaded before, it is loaded automatically. While it is carried out, it calls the declare method, so from now on UI5 knows that it has been loaded and when the next require comes about nothing needs to be done anymore. o The declare function checks if the parent namespace object exists and if not, creates it. // declaration of the module. Will ensure that the namespace 'my.useful' exists. jQuery.sap.declare("my.useful.SampleModule"); // list of dependencies of this module jQuery.sap.require("sap.ui.core.Core"); jQuery.sap.require("some.other.Module"); jQuery.sap.require("you.can.Also", "list.multiple.Modules", "if.you.Want"); // create the 'main' object of the module my.useful.SampleModule = {};

© 2014 SAP AG. All rights reserved.

189

registerModulePath •

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



Example of using registerModulePath:

© 2014 SAP AG. All rights reserved.

190

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 Lesson 13: SAPUI5 Mobile and Optimizing UI5 Files © 2014 SAP AG. All rights reserved.

191

Localization

Localization / Resource Bundle •

Exercise 14

UI5 has a built-in localization concept, which is aligned to the ResourceBundle concept in Java. o

You can get the URL for a resource with this:

var sUrl = sap.ui.resource("sap.ui.table","messagebundle.properties");



Get the resource bundle for a given language (if no locale is given, English is loaded by default): jQuery.sap.require("jquery.sap.resources"); var oBundle = jQuery.sap.resources({url : sUrl, locale: sLocale});



And then access the texts in the resource bundle: var sText = oBundle.getText(sKey);

© 2014 SAP AG. All rights reserved.

193

Exercise 14: Localization /Resource Bundle 1.

Copy Project WDE350-02- to WDE350-14

2.

Create a new folder i18n to your WebContent-folder

3.

Add three empty files to that folder • i18n.properties • i18n_de.properties • i18n_fr.properties

4.

Add a property for firstname, lastname, submit and the panel header to each i18n-file and translate to English, German and French

Solution

5. In createContent, use the resource bundle to init localization var oBundle = jQuery.sap.resources({ url : "i18n/i18n.properties", locale: sap.ui.getCore().getConfiguration().getLanguage() }); 4.

6.

Change the text property of the UI-elements panel, firstname, lastname and submit to make use of localization: text: oBundle.getText(“XXX”) Test your page with appended URL parameter, e.g.: ?sap-ui-language=fr

© 2014 SAP AG. All rights reserved.

194

Exercise 14 Solution

property in the i18n files

index.html

Back © 2014 SAP AG. All rights reserved.

195

Localization with Resource Model

Exercise 15



With the ResourceModel, there is a wrapper for resource bundles that exposes the localized texts as a model for data binding.



A ResourceModel can be instantiated with a bundleName or a bundleUrl which points to a resource bundle. When using the bundle name the file must have the .properties suffix.



Example: var oModel = new sap.ui.model.resource.ResourceModel({ bundleUrl: "myBundle.properties", // will use myBundle_en.properties bundleLocale: "en“ // optional, default is current language, so better omit it }); var oControl = new sap.ui.commons.Button({ id : "myButton", text : "{i18n>MY_BUTTON_TEXT}“ // this points to a named model }); // attach the resource model with the symbolic name "i18n"

sap.ui.getCore().setModel(oModel, "i18n"); © 2014 SAP AG. All rights reserved.

196

Exercise 15: Localization /Resource Model 1.

Copy your solution of Exercise 2 to SAPUI5-Ex15

2.

Within the controller of the PersonData implement/uncomment the onInit method

3.

Create a • •

4.

new sap.ui.model.resource.ResourceModel with bundleUrl: "i18n/i18n.properties" (the current language is automatically used)

Set this ResourceModel as model on the View or (globally) on the Core, but set it as named model (name: “i18n”) • ….setModel(oModel, "i18n");

5.

Now use data binding to bind the translated texts

© 2014 SAP AG. All rights reserved.

Solution 197

Exercise 15 Solution

PersonData.controller.js

PersonData.view.js

Back © 2014 SAP AG. All rights reserved.

198

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 Lesson 13: SAPUI5 Mobile and Optimizing UI5 Files © 2014 SAP AG. All rights reserved.

199

Notepad Controls

What is a Control?



An object that defines the appearance and behavior of a screen area.



Typically has properties like "text" or "width" that modify the appearance or relate to the data displayed by the Control.



It can aggregate other Controls: o This means it is a sort of container or layout Control when the application can add the child controls to use – or a composite Control if the Control itself decides what the child Controls are and just re-uses these available components.



It can also have associated Controls that are not part or children of this Control, but rather loosely related.



A Control can fire well-defined events. o Typically, these have a meaning that relates to the Control's purpose and functionality and is on a semantically higher level than "click" or other browser events. Examples would be triggerSearch in a SearchField or collapse in a Panel. © 2014 SAP AG. All rights reserved.

201

UI5 Controls Overview



There are two approaches to develop UI5 Controls, either with tool support, or just as part of a plain JS file.



This section deals with creating custom controls in JavaScript with the extend method.



Since an IDE is not needed to create new controls with the extend method these controls have been named "Notepad Controls".



Technically, this functionality is not restricted to Controls.



Arbitrary objects derived from sap.ui.base.Object can be created or extended.

© 2014 SAP AG. All rights reserved.

202

The extend Method •

The extend() method is available on all Controls (and the base classes) and is used to define a new subclass.



Creating a new control: sap.ui.core.Control.extend(sName, oDefinition);



Creating a new Control which inherits from Button: sap.ui.commons.Button.extend(sName, oDefinition);



The parameters to this function are the name and the definition of the new control type. o The definition part contains information about the control API, which properties, aggregations, events, etc. the control has and the implementation of the control methods.



Some methods such as the getters and setters for the properties and aggregations or the methods for attaching/detaching event handlers are automatically created by UI5. © 2014 SAP AG. All rights reserved.

203

Control Definition



The definition object for a custom control may contain metadata, public and private methods, event handler and the renderer:

© 2014 SAP AG. All rights reserved.

204

Basic Example

© 2014 SAP AG. All rights reserved.

205

Control Metadata



The metadata in the control definition consists of objects for the control properties, events and aggregations. Properties

Example

type: The data type of the Control property.

properties: { title: "string", btnTxt: { defaultValue: "Search"}, showLogoutButton: { type: "boolean", defaultValue: true }, width: { type: "sap.ui.core.CSSSize", defaultValue: "50px" } }

• • • •

string for a string property (default) int or float for number properties int[] for an array of integers, string[] for an array of strings, etc. sap.ui.core.CSSSize for a customdefined type

defaultValue: The default value of the property. (undefined if not set)

© 2014 SAP AG. All rights reserved.

206

Control Metadata Events

Aggregations

Events are specified by the event name only. In many cases there is nothing to configure about them, so just give an empty object.

Aggregations and associations are defined by their name, along with an object that can have a type, a multiple flag and a singularName.

Controls can enable events to be interrupted by the application, using the enablePreventDefault flag.

aggregations: { acceptButton: "sap.ui.commons.Button", worksetItems: { type: "sap.ui.ux3.NavigationItem", multiple: true, singularName : "worksetItem" } }

events: { logout: {}, close: { enablePreventDefault : true } }

© 2014 SAP AG. All rights reserved.

207

Control Methods •

After the metadata is defined, you can add any method implementations to your new Control. The method names can be chosen freely, some method names must be avoided though: o o o



Names of methods that are provided by a super class. Methods starting with set, get, insert, add, remove or indexOf may collide with setters/getters for properties or aggregations you defined. Methods starting with attach, detach or fire may collide with methods created for events.

There are some method names you may use but which have a special meaning: o on...: Methods starting with "on" are event handlers that are automatically bound to browser events. o init: Is the name of the initialization function called right after Control instantiation. o renderer: The name of the function that creates the HTML for the control.

© 2014 SAP AG. All rights reserved.

208

Control Methods •

Public / private methods o The convention is that private methods start with an underscore. All other methods are considered public.



init Method o The init() method is invoked by the UI5 core for each control instance right after the constructor. Use this to set up things like internal variables or sub-controls of a composite. This method is considered private and only to be called by the UI5 core.



onAfterRendering Method o The onAfterRendering() method is invoked after the controller's View is re-rendered.



Event handler methods o Methods that have a name starting with on are reserved for event handlers. For common events such as click or keydown, browser event handlers for these methods are registered automatically by the UI5 core.

© 2014 SAP AG. All rights reserved.

209

Control Methods – Examples

// public method divide: function(x, y) { if (this._checkForZero(y)) { throw new Error("Second parameter may not be zero"); } return x / y; }, // private method _checkForZero: function(y) { if (y === 0) { return true; } return false; },

© 2014 SAP AG. All rights reserved.

// init method, invoked when control // is instantiated init: function() { this._bSearchTriggered = false; this._oSearchBtn = new sap.ui.commons.Button( this.getId() + "-searchBtn", { text: "Search" } ); }, // event handler onclick: function(e) { alert("Control " + this.getId() + " was clicked."); }

210

Control Renderer Example: •

The renderer method is responsible for creating the HTML structure that makes up the control. It is different from the other methods, as it is a static one, so the this keyword is not available. Instead, a control instance and a RenderManager instance are given to the method.

• If an existing renderer should be used without modification, you can give the name of this renderer class. © 2014 SAP AG. All rights reserved.

renderer: function(oRm, oCtrl) { oRm.write(""); oRm.writeEscaped(oCtrl.getText()); oRm.write(""); }

Using an existing renderer: renderer: "sap.ui.commons.ButtonRenderer"

211

Control Renderer (Additional Information)

• The newly created renderer type will inherit from the renderer of the parent Control. • So if your new Control extends TextField, the given function will be added to a class that inherits from sap.ui.commons.TextFieldRenderer (and will have access to that one's other functions). • However, your renderer method will override the parent renderer method, so no HTML will be written as long as your method is not taking care of it. • If an existing renderer should be used without modification, you can give the name of this renderer class: • renderer: "sap.ui.commons.ButtonRenderer" •

However, a normal Control Renderer can also override or implement methods from its Renderer superclass



Or just separate out some helper functions. continued © 2014 SAP AG. All rights reserved.

212

Control Renderer (Additional Information)



This is possible as well here, but in this case these methods need to be packed together into an object, so the extend method knows they should all go into the Control Renderer.



The main rendering method is called "render" - just like in a normal Control Renderer.



The keyword "this" actually refers to the Control Renderer type here, so it is used to access the other methods:

renderer: { render: function(rm, oControl) { rm.write(""); rm.writeEscaped(this.square(oControl.getValue())); rm.write(""); }, square: function(value) { return value * value; } }

© 2014 SAP AG. All rights reserved.

213

Writing a Control Renderer Class



Extract the implementation from the control to a separat rendering class: Method

Description

write()

Writes HTML output

writeControlData()

Writes ID and recognition data of control to HTML

renderControl()

Converts the specific control into HTML and adds the output to the HTML. This is used to render child components

© 2014 SAP AG. All rights reserved.

214

Renderer Class Implementation jQuery.sap.declare(„com.sap.ui.HelloControlRenderer"); com.sap.ui.HelloControlRenderer = { }; com.sap.ui.HelloControlRenderer.render = function(oRm, oControl) { oRm.write("Hello "); // write the Control property 'name', with XSS protection oRm.writeEscaped(oControl.getName()); oRm.write(""); };

© 2014 SAP AG. All rights reserved.

215

Using a renderer class

sap.ui.core.Control.extend("com.sap.ui.HelloControl ", { init : function() {}, renderer : "com.sap.ui.HelloControlRenderer", onAfterRendering : function() {} });

© 2014 SAP AG. All rights reserved.

216

Example with Data Binding

© 2014 SAP AG. All rights reserved.

217

Example with Charts

© 2014 SAP AG. All rights reserved.

218

Exercise 16: Notepad Controls Exercise 16



Exercise 16: Add an Audioplayer Control to your Music Store from Exercise 12 and have the selected song play

© 2014 SAP AG. All rights reserved.

219

Exercise 16: Notepad Control / Part 1

1. Copy or extend your exercise 12 and navigate to „musicstore.controller.js“ 2. Implement a new „AudioPlayer“ control before before your controller implementation 3. Add a new column to the table and instantiate the new „Audioplayer“ control as row content 4. Open the index.html in browser that can interpret the tag (Chrome 6 and newer, Firefox 3.6 and newer, Safari 5.0 and newer, IE 9 and newer)

Next © 2014 SAP AG. All rights reserved.

220

Exercise 16 Solution– Notepad Control 1. Copy your exercise 12 and navigate to „musicstore.controller.js“ 2. Implement a new „AudioPlayer“ control before before your controller implementation 3. Add a new column to the table and instantiate the new „Audioplayer“ control as row content 4. Open the index.html in browser that can interpret the tag (Chrome 6 and newer, Firefox 3.6 and newer, Safari 5.0 and newer, IE 9 and newer)

Solution © 2014 SAP AG. All rights reserved.

221

Exercise 16 Solution •

When a song is selected in the Table, it can be played now:

Back © 2014 SAP AG. All rights reserved.

222

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 Lesson 13: SAPUI5 Mobile and Optimizing UI5 Files © 2014 SAP AG. All rights reserved.

223

Components

Components Overview •

UI5 components are independent and reusable parts of the UI5 Application that may be developed by different development teams in different projects.



A UI5 component consists of a folder that has a name of the component and that at least contains two files: o o



Component.js - the Component Controller that also includes the metadata for runtime component.json - Component descriptor that contains the metadata for design time

There are two types of components: o

a UIComponent has a UI part (examples: custom button or a form)

 Base class for all UI Components: sap.ui.core.UIComponent o

a Faceless Component does not (examples: data transfer helper)

 Base class for all Faceless Components: sap.ui.core.Component



Components can either inherit from their base classes or from other component in order to inherit and extend its functionality.

© 2014 SAP AG. All rights reserved.

225

Creating a New Component – Component.js 1. Define an new (UI)Component: jQuery.sap.require("sap.ui.core.UIComponent"); jQuery.sap.require("sap.ui.commons.Button"); jQuery.sap.declare("samples.components.button.Component");

2. Set the metadata (properties, aggregations, events of the new component): sap.ui.core.UIComponent.extend("samples.components.button.Component", { metadata : { properties : { text: "string" } }});

3. Set the methods the component should have: samples.components.button.Component.prototype.createContent = function(){ this.oButton = new sap.ui.commons.Button("btn"); return this.oButton; };

© 2014 SAP AG. All rights reserved.

226

Creating a New Component – component.json  The component.json file is needed for design time environments so they know the specifics of the component.  The file is not loaded during the runtime of an application and thus not needed there. {

}

"name": "samples.components.button", "version": "0.1.0", "description": "Sample button components", "keywords": [ "button", "example" ], "dependencies": { }

© 2014 SAP AG. All rights reserved.

227

Using the New Component  Once the Component is defined as above, it can be used right away, just like any other UI5 Component. var oComponent = sap.ui.getCore().createComponent({ name: "samples.components.button", id: "Comp", settings: {text: "Hello World"} }); var oComponentCont = new sap.ui.core.ComponentContainer("CompCont", { component: oComponent }); oCompCont.placeAt("content");

Exercise 17 © 2014 SAP AG. All rights reserved.

228

Exercise 17: Components 1. Copy or extend your solution of Exercise 13 2. Create a new Button Component 3. Set its „text“ property 4. Replace the „Submit“ button in the „Enter Data“ panel with your new custom button

Solution © 2014 SAP AG. All rights reserved.

229

Exercise 17 Solution

Creating the new component

Using the new component

Replacing the old button

Back © 2014 SAP AG. All rights reserved.

230

Exercise 17 Solution

Solution continued in the Notes section below.

© 2014 SAP AG. All rights reserved.

231

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 Lesson 13: SAPUI5 Mobile and Optimizing UI5 Files © 2014 SAP AG. All rights reserved.

232

Extending SAPUI5

Inclusion of External JS Libraries •

If UI5 doesn’t provide controls or behaviours that other JavaScript libraries offer, these libraries can be included into the UI5 based pages



Some JS libraries are already included in UI5 and used by UI5 runtime and can be used without additional loading, e.g.: o jQuery, jQuery UI o dataJS, a Microsoft driven oData library which handles requests and takes care of creating and handling requests in JSON and XML format o D3, an SVG-based graphical library to visualize data sets



Other libraries need to be loaded separately, another library of interest is o Flot, a -based jQuery plug-in for displaying data sets

© 2014 SAP AG. All rights reserved.

234

Inclusion of External JS Libraries •

To show how to load and use an external library, we take a look at an example using Flot: o One can place the script tags for the library just behind the UI5 bootstrap script tag in the HTML tag. o the library can be downloaded and made part of the application project: ►For pie chart support you need also the flot.pie.js plugin

 You can see the pie chart example here

© 2014 SAP AG. All rights reserved.

235

Inclusion of External JS Libraries  Most libraries require a starting point or a placeholder  This HTML element can be provided by using the UI5 HTML control

Exercise 18

// create the HTML control which will be a placeholder var oHTML = new sap.ui.core.HTML({ id: "pieContainer“, content: "
View more...

Comments

Copyright ©2017 KUPDF Inc.
SUPPORT KUPDF