SAP UI5 About the Tutorial SAP UI5 is the development tool from SAP toolkit, offering various features that the users can use to enhance their user experience to create apps with rich user interfaces for Web business applications. This tutorial explains the architecture, various key concepts, and important components of SAP UI5. Audience This tutorial is designed for all those who want to learn the basics of SAP UI5, especially those who are involved in creating business applications. Prerequisites It is a simple and straightforward tutorial which the readers can easily understand, however it will help if you have some prior exposure to any SAP module. Disclaimer & Copyright Copyright 2018 by Tutorials Point (I) Pvt. Ltd. All the content and graphics published in this e-book are the property of Tutorials Point (I) Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republish any contents or a part of contents of this e-book in any manner without written consent of the publisher. We strive to update the contents of our website and tutorials as timely and as precisely as possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt. Ltd. provides no guarantee regarding the accuracy, timeliness or completeness of our website or its contents including this tutorial. If you discover any errors on our website or in this tutorial, please notify us at contact@tutorialspoint.com. i SAP UI5 Table of Contents About the Tutorial .................................................................................................................................. i Audience ................................................................................................................................................ i Prerequisites .......................................................................................................................................... i Disclaimer & Copyright ........................................................................................................................... i Table of Contents .................................................................................................................................. ii 1. SAP UI5 ─ OVERVIEW ......................................................................................................... 1 SAP UI5 ─ Version .................................................................................................................................. 2 Version Scheme ..................................................................................................................................... 2 SAP UI5 vs Open UI5 .............................................................................................................................. 2 UI5 Browser Support ............................................................................................................................. 3 2. SAP UI5 ─ ARCHITECTURE .................................................................................................. 4 3. SAP UI5 ─ KEY COMPONENTS ............................................................................................. 5 Faceless Components ............................................................................................................................ 5 UI Components ...................................................................................................................................... 5 Structure of a Component ..................................................................................................................... 6 How to Create a New SAP UI5 Component? .......................................................................................... 6 How to Use a Component ...................................................................................................................... 7 4. SAP UI5 ─ CONTROL LIBRARIES .......................................................................................... 9 Control Library Combinations ................................................................................................................ 9 5. SAP UI5 ─ DEVELOPMENT KIT........................................................................................... 11 6. SAP UI5 ─ MVC CONCEPT ................................................................................................. 22 ii SAP UI5 7. SAP UI5 – VIEWS .............................................................................................................. 24 Comparison of View Types .................................................................................................................. 25 8. SAP UI5 ─ DEVELOPER STUDIO ......................................................................................... 27 9. SAP UI5 ─ CREATING A UI5 PROJECT ................................................................................ 29 SAP UI5 ─ Configuration ...................................................................................................................... 34 Core Functions ..................................................................................................................................... 34 10. SAP UI5 ─ CONTROLS ....................................................................................................... 35 11. SAP UI5 ─ DATA BINDING ................................................................................................. 37 JSON Model ......................................................................................................................................... 37 XML Model .......................................................................................................................................... 38 OData Model ....................................................................................................................................... 38 Assigning the Model ............................................................................................................................ 38 Aggregation Binding ............................................................................................................................ 39 12. SAP UI5 ─ DESIGN PATTERNS ........................................................................................... 40 13. SAP UI5 ─ MODULARIZATION ........................................................................................... 41 14. SAP UI5 ─ LOCALIZATION ................................................................................................. 42 15. SAP UI5 ─ NOTEPAD CONTROLS ....................................................................................... 44 16. SAP UI5 ─ EXTENDING APPLICATIONS .............................................................................. 46 iii SAP UI5 17. SAP UI5 ─ THEMING ......................................................................................................... 48 Supported Platform ............................................................................................................................. 48 Key Features and Benefits ................................................................................................................... 48 How to Call a Theme Designer in SAP Fiori?......................................................................................... 50 Supported Themes .............................................................................................................................. 53 Chart Types ......................................................................................................................................... 54 18. SAP UI5 ─ MOBILE ............................................................................................................ 55 19. SAP UI5 ─ CREATING A PROJECT IN WEB IDE .................................................................... 56 iv SAP UI5 1. SAP UI5 ─ Overview SAP provides various tools that the users can use to enhance their user experience to create apps with rich user interfaces for Web business applications. The most common enablement tools include: Theme Designer NWBC and Side Panel FPM Screens SAP UI5 Development Tools Web-based apps that you create using SAP UI5 provides more consistent user experience and can be accessed on devices such as tablets, smartphones, and laptop. Using the NetWeaver gateway with UI5, you can define a clear separation between the user interface and business logic. SAP UI5 provides the following key features: Extensibility concepts at the code and application level. Ability to create complex UI patterns and predefined layouts for typical use cases. Model-View-Controller (MVC) and data binding methods. Keyboard interaction support and accessibility features. SAP UI5 is based on open standards like JavaScript, CSS, and HTML5. Theming support based on CSS. 1 SAP UI5 Following are the advantages of using SAP UI in business: It helps in increasing productivity. Increase user adaption. Less manual errors. Reduce the cost of training. High performance of SAP system. Perfectly designed API and can be consumed easily. SAP UI5 ─ Version Following is the list of recent UI5 versions that have been introduced. Each UI5 provides new features and enhancements from the previous versions, platform support, usability enhancements, etc. SAP UI5 1.26 SAP UI5 1.28 SAP UI5 1.30 SAP UI5 1.32 SAP UI5 1.34 SAP UI5 1.36 SAP UI5
Consultoria Capacitación Y Consumibles Sap Fiori Openui5 Development Contenido Programatico
CDUK CONSULTORIA CAPACITACIÓN Y CONSUMIBLES SAP FIORI OPENUI5 DEVELOPMENT CONTENIDO PROGRAMATICO SAP FIORI openUI5 Development • Fundamentos del HTML. • Describir y escribir códigos HTML5 y CSS. • Explorar herramientas de desarrollo SAP Fiori. • Trabajar con elementos HTML básicos y marcas semánticas. • Implementar formularios Web amigables para el usuario. • Trabajar con HTML5-Atributos personalizados. • Fundación de CSS Describir CSS-Essentials. • Trabajar con Pseudoclasses. • Fundamentos de JavaScript. • Entender la programación orientada a objetos (OOP) con JavaScript. • Explorar los elementos básicos del lenguaje JavaScript. • Trabajar con tipos de datos primitivos, tipos de referencia y operadores. • Implementar declaraciones en JavaScript. • Comprender los alcances de JavaScript y la ejecución de contexto. • Entender el manejo de errores en JavaScript. • Explore los conceptos de manipulación DOM de JavaScript. • Trabajar con eventos. • Utilice http-Requests y AJAX. • Trabajar con Promesas Fundamentos de jQuery. • Entender jQuery-Fundación. • Trabajar con selectores. • Entender jQuery Eventing. • Utilizar estilo y animación. • Manipular el DOM. • Utilice AJAX con jQuery. • Descripción general de OpenUI5. • Explicar la estrategia de la experiencia del usuario de SAP. • Explicar la estrategia de la experiencia del usuario • Explore las herramientas de habilitación de claves para la experiencia • del usuario SAP. • Describir SAP Fiori en relación con la experiencia del usuario. • Descripción de la arquitectura OpenUI5. • Explore la relación entre OpenUI5 y SAP Fiori. • Explore las diferencias entre OpenUI5 y SAPUI5. • Opciones de desarrollo de OpenUI5. • Instalar el complemento OpenUI5 Eclipse. • Configurar una cuenta de HANA Cloud Platform. • Explore los fundamentos de SAP WEB IDE. • Conceptos básicos del proyectoOpenUI5. • Desarrollar utilizando el patrón de diseño Model View Controller (MVC). • Configurar un proyecto • Configurar y utilizar elementos básicos de OpenUI5.
Szkolenia IT . Kursy Komputerowe . Szkolenia Biznesowe, Dla Kadr, Miękkie . Firma Szkoleniowa
Developing UIs with SAPUI5 PRZEZNACZENIE SZKOLENIA About this Course, Audience: Developer Developer Consultant Solution Architect Business Process Owner / Team Lead / Power User KORZYŚCI WYNIKAJĄCE Z UKOŃCZENIA SZKOLENIA This course will prepare you to: Create web apps using basic HTML5 and CSS3 Develop web apps that are more interactive through JavaScript programming Further improve web app development by using parts of jQuery and jQueryUI Perform design decisions for openUI5 desktop and mobile applications Create the necessary HANA Cloud Platform account to configure HCPms Develop desktop and mobile applications using the openUI5 framework, Eclipse, HANA Cloud Platform and SAP Web IDE OCZEKIWANE PRZYGOTOWANIE SŁUCHACZY Essential - SAPX01 Recommended - Understanding of HTML and the Internet Course based on software release: SAP S/4HANA WTS + local version SAP Web IDE Warning! Training authorized by SAP provided in the open training formula is carried out at the headquarters of SAP Polska at ul. Wołoska 5 in Warsaw. Remote participation is possible for selected trainings. AGENDA SPOTKANIA Sala szkoleniowa 1. Foundations of HTML Describe and write HTML5 and CSS code Explore Development Tools Work with Basic HTML-Elements and Semantic Markups Implement User Friendly Web Forms 1 / 3 Work with HTML5-Custom Attributes 2. Foundation of CSS Describe CSS-Essentials Work with Pseudoclasses 3. Foundations of JavaScript Understand Object-Oriented (OOP) Programming with JavaScript Explore JavaScript Language Basics Work with Primitive Data Types, Reference Types, and Operators Implement Statements in JavaScript Understand JavaScript-Scopes and Context Execution Understand error handling in JavaScript Explore DOM manipulation concepts of JavaScript Work with events Use http-Requests and AJAX Work with Promises 4.
THE FUTURE of SCREENS from James Stanton a Little Bit About Me
THE FUTURE OF SCREENS From james stanton A little bit about me. Hi I am James (Mckenzie) Stanton Thinker / Designer / Engineer / Director / Executive / Artist / Human / Practitioner / Gardner / Builder / and much more... Born in Essex, United Kingdom and survived a few hair raising moments and learnt digital from the ground up. Ok enough of the pleasantries I have been working in the design field since 1999 from the Falmouth School of Art and onwards to the RCA, and many companies. Ok. less about me and more about what I have seen… Today we are going to cover - SCREENS CONCEPTS - DIGITAL TRANSFORMATION - WHY ASSETS LIBRARIES - CODE LIBRARIES - COST EFFECTIVE SOLUTION FOR IMPLEMENTATION I know, I know, I know. That's all good and well, but what does this all mean to a company like mine? We are about to see a massive change in consumer behavior so let's get ready. DIGITAL TRANSFORMATION AS A USP Getting this correct will change your company forever. DIGITAL TRANSFORMATION USP-01 Digital transformation (DT) – the use of technology to radically improve performance or reach of enterprises – is becoming a hot topic for companies across the globe. VERY DIGITAL CHANGING NOT VERY DIGITAL DIGITAL TRANSFORMATION USP-02 Companies face common pressures from customers, employees and competitors to begin or speed up their digital transformation. However they are transforming at different paces with different results. VERY DIGITAL CHANGING NOT VERY DIGITAL DIGITAL TRANSFORMATION USP-03 Successful digital transformation comes not from implementing new technologies but from transforming your organisation to take advantage of the possibilities that new technologies provide.
. SAPUI5 & Fiori – Where ABAP-er Meets JavaScript Igor Barbarić Content • Web@ABAP - History • SAPUI5 & Fiori – Key Features, Architecture • SAPUI5 vs Fiori • OpenUI5 vs SAPUI5 • Development Environments • Learning Content • Personal Experience: First Project Content • Web@ABAP - History • SAPUI5 & Fiori – Key Features, Architecture • SAPUI5 vs Fiori • OpenUI5 vs SAPUI5 • Development Environments • Learning Content • Personal Experience: First Project Web@ABAP – History 1. Business Server Pages (BSP, 2002) = • Not responsive HTML + ABAP-script • SAP Web Server only 2. WebDynpro (2003 Java, 2004 ABAP) = • ABAP/Java-only (no HTML, CSS, Script) SAP backend only • Performance issues 3. SAP Web Client (2007) = BSP + Dev Worbkench + GenIL Model • No (difficult) theming / branding 4. SAPUI5 & Fiori (2013) = BSP + SAPUI5 + HTML5 + CSS + JavaScript Content • Web@ABAP - History • SAPUI5 & Fiori – Key Features, Architecture • SAPUI5 vs Fiori • OpenUI5 vs SAPUI5 • Development Environments • Learning Content • Personal Experience: First Project Fiori – SAP’s Strategic Direction • “Over time, we plan to move all SAP solutions in this direction.” (support.sap.com SAP Product Strategy) SAP Fiori – Design Award Winner gartner.com red-dot.sg SAPUI5 & Fiori – Key Features • HTML5 + JavaScript + CSS3 + jQuery • Models: JSON, XML, OData • Stateless • Extendable • Flexible design (Theming, Branding, Corporate Identity) • Client-side libs & rendering (server performance!) • Any web server (SAP ABAP, SAP HANA, Tomcat, Jetty...) • Any backend (also non-SAP) • Any device / client (responsiveness) • Open source (OpenUI5) • No need for SAP NW server to play with SAPUI5/Fiori Architecture Client (Web Browser): SAPUI5 Views with “sap.m” Views with lib “sap.ui.commons” lib Models (JSON, XML, Controllers OData) Server No SAP system! UI5 Fiori UI5 Fiori SAPUI5 BSP Fiori SAP Web BSP Lchpd XS Engine BSP Lchpd XS Engine Web Page Launchpad Gateway Server, e.g.
Declarative Ajax Web Applications Through SQL++ on a Unified
Declarative Ajax Web Applications through SQL++ on a Unified Application State Yupeng Fu Kian Win Ong Yannis Papakonstantinou UCSD UCSD UCSD y4fu@cs.ucsd.edu kianwin@cs.ucsd.edu yannis@cs.ucsd.edu Abstract (c) the data tier in the database. Multiple mundane low-level tasks Implementing even a conceptually simple web application requires need to be performed in a coordinated fashion across all three tiers. an inordinate amount of time. FORWARD addresses three prob- The resulting problems (as follows) reduce developer productivity: Impedance mismatch lems that reduce developer productivity: (a) 1. Impedance mismatch arises because each tier uses different lan- across the multiple languages used at different tiers of the appli- guages (and data models) [5, 21]. The visual tier uses DOM Distributed data access cation architecture. (b) across the multi- (XHTML) / JavaScript (JSON); the application logic tier uses ple data sources of the application (user input of the browser page, an application programming language, such as Java, Python or Asyn- session data in the application server, SQL database etc). (c) PHP (objects); the data tier uses SQL (tables). To display a page, chronous, incremental modification of the pages , as performed by mundane and error-prone code is needed to translate SQL tables Ajax actions. into Java objects, and then into HTML / JavaScript objects. To FORWARD belongs to a novel family of web application frame- implement an action invocation, more code is needed to translate works that attack impedance mismatch by offering a single uni- in the opposite direction. fying language. FORWARD’s language is SQL++, which is SQL with necessary extensions for semi-structured data.
Getting Started with AngularJS by Jeremy Zerr Blog: http://www.jeremyzerr.com LinkedIn: http://www.linkedin.com/in/jrzerr Twitter: http://www.twitter.com/jrzerr What is AngularJS Open Source Javascript MVC/MVVM framework. Helps manage complexity of your client-side Javascript code. Extend HTML vocabulary with your own elements and attributes. Built-in HTTP and more importantly REST API web service integration. Includes its own client-side templating language. Two-way data binding to allow the Model to be used as the source of truth. Has client-side routing to enable creating single page apps (SPA) Sponsored by Google, lots of contributions by Google employees, but on Github as public repo. Requirements Does not require jQuery, but will use it if you have it. Can be implemented for sub-sections of a page, so can interoperate with other components. Testing examples given in Jasmine and ran using Karma. Minified is 100k, gzipped brings down to 37k (version 1.2.9). Also pretty common to use ngResource which is 3k minified. “…to learn and not to do is really not to learn. To know and not to do is really not to know.” –Stephen R. Covey, The 7 Habits of Highly Effective People AngularJS Examples First examples, then we’ll talk about the bigger picture of why you should consider using AngularJS in your next web app. Starter AngularJS app We’ll start by defining some Javascript objects in a controller to represent our Models Then we will display the object using AngularJS built-in template system Follow along with this Plunker Starter AngularJS app (templating) This shows what AngularJS client-side templating looks like ng-controller provides an identifier to link with code ng-repeat iterates through a variable in the controller’s $scope Starter AngularJS App (controller) The name of our app is myApp Controller is ToddlerCtrl We define the controller and fill our scope up with Toddler objects.
Выбор JS-фреймоврка для крупного проекта Аверин Сергей, Acronis ПРО ЧТО ДОКЛАД • Как выбирали новый веб-фреймворк – Немного о компании – Бекграунд – Задача – Исследование существующего кода – Выбор на что смотреть – Техническая оценка вариантов – Переделка одного из вариантов «под себя» – Сравнение пилотных проектов – Оценка затрат на внедрение 2 3 Про компанию 4 МАСШТАБ • 5 000 000 пользователей • 500 000 из них — корпоративные • 700 сотрудников в 17 разных офисах • Выпускаем много разного софта: – коробочный под Windows, – корпоративный с веб-интерфейсами, – cloud-продукты с веб-интерфейсом. 5 ВЕБ Все отделы делают веб-часть по-разному 6 Проблема 7 ПРОБЛЕМА • Много разных технологий для веб-части • Фронтенд пишут не только JS-разработчики • Нет возможности подключить к работе верстальщика • Качество кода сильно отличается • Текущие технологии устарели 8 Задача 9 КУРС • Толстый клиент на JS/HTML/CSS • Единая технология во всей компании • Библиотека UI-компонентов • Возможность работать разработчикам разных уровней • Код должен быть понятен backend-разработчикам 10 Оценка 11 ЧТО ИМЕЕМ? • Dojo • Сайт acronis.com — rich-client там не нужен • Angular 1.x • RoR+jQuery • ExtJS 4 12 ЧТО НЕ ТАК С EXTJS? Индексная страница документации содержит: 395 классов 13 8 уровней наследования 14 класс с 201 методами 15 16 17 ~1% DOM-дерева главной 18 Кастомный UI компонент 19 layouting 20 layouting 21 deep in layouting code… 22 deep in layouting code… 23 Рафик, где мой трафик? 24 Ладно с фреймворком понятно, а само приложение? 25 ПОЛЕЗЛИ В КОД ПРИЛОЖЕНИЯ • Мало комментариев • Жесткая связность • Нет границы между Controller и View 26 М С V State, BizLogic State, BizLogic State, BizLogic, Ui logic Server API View Model Controller Child View Child View SubController SubController2 M+CV 27 ПОЛЕЗЛИ В КОД ПРИЛОЖЕНИЯ • Мало комментариев • Жесткая связность • Нет границы между Controller и View • Publish/Subscribe — вроде как правильный паттерн, но не работает.