1、SAP UI5 - 快 速 指 南SAP UI5 - 概 述SAP 提供了各种工具，用户可以使用这些工具来增强其用户体验，以便为Web 业务应用程序创建丰富的用户界面。 最常见的支持工具包括 - 主题设计师 NWBC 和侧面板 FPM 屏幕 SAP UI5 开 发工具使用 SAP UI5 创建的基于 Web 的应用程序可提供更一致的用户体验，并可在平板电脑，智能手机和笔记本电脑等设备上访问。 通过使用带有 UI5 的NetWeaver 网关，您可以在用户界面和业务逻辑之间定义明确的分隔。SAP UI5 提供以下主要功能 - 在代码和应用程序级别的可扩展性概念。 能够为典型用例创建复杂的 UI
2、模式和预定义布局。 模型 - 视图 - 控制器（MVC）和数据绑定方法。 键盘交互支持和辅助功能。 SAP UI5 基于 JavaScript，CSS 和 HTML5 等开放标准。 基于 CSS 的主题支持。以下是在业务中使用 SAP UI 的优点： 它有助于提高生产力。 增加用户适应。 减少手动错误。 降低培训成本。 SAP 系统的高性能。 完美设计的 API，可以很容易地消 费。SAP UI5版 本以下是最近推出的 UI5 版本的列表。 每个 UI5 都提供了来自以前版本的新功能和增强功能，平台支持，可用性增强等。 SAP UI5 1.26 SAP UI5 1.28 SAP UI5 1.3
3、0 SAP UI5 1.32 SAP UI5 1.34 SAP UI5 1.36 SAP UI5 1.38 和更多像 SAP UI5 1.6版 本 方 案SAP UI5 使用 3 位版本号。 例如，SAPUI5 1.36.5。 这里，数字（1）指定主版本。 第二个数字（36）指定次要版本号。 第三个数字指定补丁版本号（5）。在每个 SAP UI5 中，主版本和次版本以及修补程序版本都可用于标识修补程序。SAP UI5 与 开 放 UI5SAP UI5 和 Open UI5，都提供了 UI 开发环境。 然而，它们在以下方面彼此不同 -SAP UI5 是 SAP 产品套件的一部分，不是单独的许可证
4、。 它与不同的 SAP产品集成 - SAP NW 7.4 或更高版本 SAP NetWeaver AS 7.3x SAP HANA 云和内部解决方案打开 UI5 是一个用于应用程序开发的开源技术，并与 Apache 2.0 一起发布。SAP UI5 不是单独的产品，可用于SAP 产 品套件打开 UI5 是用于应用程序开发的免费开源平台SAP UI5 与之集成 SAP HANA SAP HANA 云平台 SAP NetWeaver 更高版本打开 UI5 引入了 Apache 2.0 许可证OpenUI5 是开源，并可在GitHub 上UI5 浏 览 器 支 持SAP UI5 支持来自 Micro
5、soft，Google 和 Firefox 的所有主要浏览器和最新版本。 但是，支持的功能因浏览器版本和供应商而异。SAP UI5 - 架 构在 SAP UI5 架构中，您有三个层 - 顶部是表示层，UI5 组件由移动设备，平板电脑和笔记本电脑等设备消耗。 在中间层，是包括用于主题和控制的 SAP UI5 库的应用程序客户端。 UI5 控件库包括o Sap.vizo Smons（控件类似文本字段和按钮）o Sap.ui.table（表的输入控件）o Sap.ui.ux3o Sap.m（包括移动设备的输入控件） 底部是选项服务器组件。 这包括用于 ABAP / Java 的 SAP NetWea
6、ver 应用服务器，用于开发的 SAP 后端，HANA XS 引擎或数据库。SAP UI5 - 主 要 组 件SAP UI5 有多个组件，它们是 UI5 应用程序中独立的可重用对象。 这些组件可以由不同的人开发，并且可以在不同的项目中使用。应用程序可以使用来自不同位置的组件，因此您可以轻松获得应用程序的结构。您可以在 SAP UI5 开发下创建不同类型的组件。无 表 面 元 件无表面组件用于从后端系统获取数据，并且它们不包含用户界面。示例 - 它们是 ponent 类的一部分UI 组 件UI 组件用于添加渲染功能并在用户界面上表示屏幕区域或元素。示例 - UI 组件可以是具有执行某些任务的设置
7、的按钮。 它是类的一部分：sap.ui.core.UIComponent注 - ponent 是面向和 UI 组件的基类。 要定义可扩展性功能，组件可以从基类继承或从 UI 开发中的其他组件继承。组件的模块名称称为包名称，而.component 将包名称定义为传递给组件构造函数的参数的名称。SAP UI5 组件也可以根据系统环境划分 - 客户端组件：o 控制库 sap.m，mon 等o 核心 Javascripto 测试包括 HTML 和 Javascript 服务器端组件o 定理发生器o Eclipse 中的控制和应用程序开发工具o 资源处理程序组 件 的 结 构每个组件以文件夹的形式表示，
8、并包含组件的名称和管理组件所需的资源。每个组件应包含以下文件 - Component.json 文件，包含设计时的元数据，仅用于设计时工具。 Component.js 用于定义负责运行时元数据的属性，事件和组件方法。如 何 创 建 一 个 新 的 SAP UI5 组 件 ？要创建新组件，您必须创建新文件夹。 让我们将其命名为 button 。接下来是创建 component.js 文件然后，您必须扩展 UI 组件基类 sap.ui.core.UIComponent.extend，并输入组件的名称和包路径。后来，要定义一个新的组件，你必须从 require 语句开始如下 -/ defining
9、a new UI ComponentjQuery.sap.require(“sap.ui.core.UIComponent“);jQuery.sap.require(“mons.Button“);jQuery.sap.declare(“ponents.button.Component“);/ new Componentsap.ui.core.UIComponent.extend(“ponents.button.Component“, metadata : properties : text: “string“);ponents.button.Component.prototype.create
10、Content = function()this.oButton = new mons.Button(“btn“);return this.oButton;/* Overrides setText method of the component to set this text in the button*/ponents.button.Component.prototype.setText = function(sText) this.oButton.setText(sText);this.setProperty(“text“, sText);return this;The next ste
11、p is to define the component.json in your folder as follows “name“: “ponents.button“,“version“: “0.1.0“,“description“: “Sample button component“,“keywords“: “button“,“example“,“dependencies“: How to Use a ComponentTo use a component, you have to wrap the component in a component container. You canno
12、t directly use a UI component in a page using placeAt method. Another way is to pass the component to the componentContainer constructor.Using placeAt MethodIt includes adding the component to the container and using placeAt method to place the component on the page.var oComp = sap.ui.getCore().crea
13、teComponent(name: “ponents.shell“,id: “Comp1“,settings: appTitle: “Hello John“);var oCompCont = new sap.ui.core.ComponentContainer(“CompCont1“, component: oComp);oCompCont.placeAt(“target1“);/using placeAt methodUsing componentContainer ConstructorA component container carries specific settings and
14、also contains the lifecycle methods of a regular control. The following code segment shows how to pass the component to the componentContainer constructor.var oCompCont2 = new sap.ui.core.ComponentContainer(“CompCont2“, name: “ ponents.shell“,settings: text: “Hello John 1“);oCompCont2.placeAt(“targe
15、t2“);SAP UI5 - Control LibrariesThere are various JavaScript and CSS libraries that you can use in combination for the application development. SAPUI5 can use these libraries in combination and they are called SAPUI5 control libraries.Common SAPUI5 control libraries Smons for control fields, buttons
16、, etc. Sap.m is the most common control library and is used for mobile devices Sap.ui.table includes table control Sap.ui.ux3Note SAPUI5 control library sap.m is the most common library and is used for application development. These libraries can be combined with other control libraries.Control Libr
17、ary Combinations You can use the control library sap.m with other control libraries - sap.ui.unified, sap.viz, sap.ui.table, sap.ui.layout, and sap.suite. You can combine control libraries - mons, sap.ui.table, sap.ui.ux3 and sap.ui.suite with each other. You can also combine control library mons an
18、d sap.ui.ux3 with other libraries like sap.ui.core, sap.ui.unified, sap.ui.layout, and sap.ui.table. You can combine sap.viz with all other libraries.The following table shows the main SAPUI5 control libraries and their description sap.m Library with controls specialized for mobile devices.sap.makit
19、 SAPUI5 library contains the markit monsCommon library for standard controlssap.ui.ux3 SAPUI5 library with controls that implement the SAP User Experience(UX) Guidelines 3.0sap.viz SAPUI5 library containing chart controls based on the VIZ charting library.SAP UI5 - Development KitSAP UI5 development
20、 kit for HTML5 provides you an environment for the development of web-based applications and it provides an application with one consistent user experience. Web apps that you develop with SAP UI5 are responsive across browsers and devices, and they can run on smartphones, tablets, and desktops.The U
21、I controls automatically adapt themselves to the capabilities of each device.You can use SAP UI5 on the following platforms SAP HANA SAP HANA Cloud Platform SAP NetWeaver for SAP NetWeaver 7.4 or higher User interface add-on for SAP NetWeaver for SAP NetWeaver Application Server 7.3xYou can deploy t
22、he application on the server that includes storing the libraries and getting data from the database. You can use the NetWeaver Application server or HANA Cloud platform for application deployment, and data can be accessed by a business application using the OData model using Gateway. Take a look at
23、the following illustration.When a user sends a client request from his mobile/laptop, a request is sent to the server to load the application in a browser, and data is accessed via database and the relevant libraries are accessed.To build a UI5 application, you can download the SAP UI5 developers to
24、ols of Eclipse. Once you download, you can unzip the file and deploy on the web server. For ABAP, you can install a UI Add-On for SAP NetWeaver and this also includes UI5 Theme Designer.Prerequisites for SAP UI5To install and update UI5 development toolkit for HTML5, you should meet the following pr
25、erequisites Eclipse Platform Mars (4.5)Operating System Windows OS (XP, Vista, 7 or 8/8.1)Java Runtime JRE Version 1.6 or higher, 32-Bit or 64-BitSAP GUI Only relevant when installing the SAP UI5 ABAP Repository Team Provider For Windows OS: SAP GUI for Windows 7.30/7.40Microsoft Only relevant when
26、installing the SAP UI5 ABAP Repository Team ProviderFor Windows OS: DLLs VS2010 for communication with the back-end system is requiredNote: Install either the x86 or the x64 variant, accordingly to your 32 or 64-Bit Eclipse installationLet us now proceed and discuss how you can install the SAP UI5 D
27、evelopment Kit in your system.Step 1 To install JDK, go to O and search for the required JDK version.Step 2 Download and run the setup. You will get a message as shown in the following screenshot.Step 3 To install Eclipse, go to www.Eclipse.org/downloadsStep 4 Extract the file as shown in the follow
28、ing screenshot.Step 5 To run the installation, go to the extracted folder and run the application file as shown in the following screenshot.Step 6 To install SAPUI5 tools, go to Eclipse Help Install New software.You can install directly using the URL or by entering the path of UI5 demo kit.Step 7 Ne
29、xt, enter the URL in install dialog https:/ 8 To see the available features. Press the ENTER key. You can select the features and click on Next. It will display the list of features to be installed Click Next.Step 9 Accept the license agreement and click Finish to start the installation.Step 10 Down
30、load UI Development Kit for HTML 5 from the following link http:/ extract the content in the same folder.Step 11 Start the Eclipse environment. Go to Help Install New Software.Step 12 Click Add Local.Step 13 Next, navigate to the local update site location and select the tool-update site folder with
31、 the folder where you extracted the HTML5 Development toolkit as the update source.Step 14 Select all plugins and features for installation.Step 15 Select the dialog to “Contact all update sites” during the installation to find the required software.Step 16 Click the Finish button to complete the se
32、tup. Restart Eclipse.Step 17 You can verify the installation by creating a new SAPUI5 Application Project via Eclipse menu File New Other at the bottom. Select SAP UI5 Application Development folder and expand to create a new project.Step 18 Enter the project name, select library and you can check t
33、he box to create an initial view.Step 19 Create a view using some sample code in the project. Enter the name of the view and click the Next button.Step 20 Select the development paradigm and click on Finish. You will see a new SAPUI5 development project in a new window as shown in the following scre
34、enshot.Now, to present your application or run it in production, you can deploy your SAPUI5 application on the tomcat server. If you dont have a tool like MAVEN, in that you can use the export option to export the project manually. Right-click on Project Export.Step 21 Enter the destination path whe
35、re you want to place the war file.Next, copy the war-File to webapps directory of your apache tomcat. You can access your application by going to this path -http:/localhost:8080/ /Note In a normal scenario, many SAP projects run in Internet Explorer but for SAPUI5 development it is recommended to us
36、e Google Chrome or Firefox with firebug plugin as both systems allow the use of tools and plugins to debug JavaScript, as well as use HTML and CSS.SAP UI5 - MVC ConceptModel-View-Controller (MVC) concept is used in SAP UI5 development to keep the application data separate from the user interactions.
37、 This allows you to develop the web applications and make changes to the applications independently.Model-View-Controller plays a different role in UI development The Model is responsible for managing the application data in the database/backend. The View is responsible for defining the user interfa
38、ce to users. When a user sends a requests from his device, the view is responsible for data view as per the request submitted. The Controller is used to control the data and view events as per user interaction by updating the view and model.You can define Model-View-Controller concept in SAPUI5 with
39、 the following features Model Model acts as a bridge between the view and the application data. Model is used to get the request from the view and respond as per the users input. Model doesnt depend on classes.View View is responsible to manage information display to the users. Views are based on Mo
40、del.Controller Controller is responsible for taking the input given by devices and communicates to model/view and to trigger correct action. Controllers are based on model.SAP UI5 offers Views and Controllers in the form of single files sap.ui.core.mvc.XMLView sap.ui.core.mvc.JSView sap.ui.core.mvc.
41、Controller sap.ui.core.mvc.JSONViewJSON Model JSON model is a client-side model and is used for small data sets. JSON model supports two-way binding. Data binding concept is mentioned in the latter half of this tutorial. JSON model can be used to bind controls to JavaScript object data.XML Model XML
42、 model can be used to bind controls to XML data. XML is also a client side model and hence is used only for small data sets. XML model doesnt provide any mechanism for server-based paging or loading of deltas. XML model also supports two-way data binding.SAP UI5 - ViewsViews are defined using SAP li
43、braries as follows XML with HTML, mixed, or Standalone: Library- sap.ui.core.mvc.XMLView JavaScript: Library- sap.ui.core.mvc.JSView JSON: Library - sap.ui.core.mvc.JSONView HTML: Library - sap.ui.core.mvc.HTMLViewJavaScript View SampleSap.ui.jsview(“sap.hcm.address”, getControllerName: function() r
44、eturn “sap.hcm.address”;,createContent: function(oController) var oButton = new mons.Button( text: “Hello” );oButton.attachPress(function() oController.Hello();)Return oButton;);HTML View SampletitleEmbedded html Similarly, you can create JSON view derived from sap.ui.core.mvc.JsonView.“type”:”sap.u
45、i.core.mvc.JsonView”,“controllerName”:”sap.hcm.address”,.Comparison of View TypesThe following table lists key features associated with MVC concept and comparison of different view types w.r.t the features.Feature JS ViewXML ViewJSON ViewHTML ViewStandard and Custom LibrariesYes Yes Yes YesPropertie
46、s of types string, int Boolean, floatYes Yes Yes YesAggregation 1:1, 1:n Association 1:1, 1:nYes Yes Yes YesSimple Data Binding Yes Yes Yes YesCustomize Data BindingYes No No NoEmbedded HTML No Yes No NoCode Completion Yes Yes No NoTemplating Yes No No NoValidation No Yes No NoSingle Event Listener
47、Yes Yes Yes YesSAP UI5 - Developer StudioSAPUI5 Developer Studio provides tools to ease the UI5 development process. Following are the functions Wizard for Control development Wizard for Project creation Wizard for View/Controller creationYou can download it from SAP Marketplace using the link https:/ Search for UI Add-on 1.0 for NetWeaver.Go to Software downloads and enter your Id and password. Then, go to support packages and patches. Search for sapui5 tools ide plugin 1.00.A trail of SAPUI5 framework is also available under SCN. You can go to this link http:/ UI5 - Creating a UI
