SAP UI5快速指南Word格式.docx

1、 每个UI5都提供了来自以前版本的新功能和增强功能，平台支持，可用性增强等。SAP UI5 1.26SAP UI5 1.28SAP UI5 1.30SAP UI5 1.32SAP UI5 1.34SAP UI5 1.36SAP 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开发

2、环境。 然而，它们在以下方面彼此不同 -SAP UI5是SAP产品套件的一部分，不是单独的许可证。 它与不同的SAP产品集成 -SAP NW 7.4或更高版本SAP NetWeaver AS 7.3xSAP HANA云和内部解决方案打开UI5是一个用于应用程序开发的开源技术，并与Apache 2.0一起发布。SAP UI5不是单独的产品，可用于SAP产品套件打开UI5是用于应用程序开发的免费开源平台SAP UI5与之集成SAP HANASAP HANA云平台SAP NetWeaver更高版本打开UI5引入了Apache 2.0许可证OpenUI5是开源，并可在GitHub上UI5浏览器支持SA

3、P UI5支持来自Microsoft，Google和Firefox的所有主要浏览器和最新版本。 但是，支持的功能因浏览器版本和供应商而异。SAP UI5 - 架构在SAP UI5架构中，您有三个层 -顶部是表示层，UI5组件由移动设备，平板电脑和笔记本电脑等设备消耗。在中间层，是包括用于主题和控制的SAP UI5库的应用程序客户端。 UI5控件库包括oSap.vizoSmons（控件类似文本字段和按钮）oSap.ui.table（表的输入控件）oSap.ui.ux3oSap.m（包括移动设备的输入控件）底部是选项服务器组件。 这包括用于ABAP / Java的SAP NetWeaver应用服务

4、器，用于开发的SAP后端，HANA XS引擎或数据库。SAP UI5 - 主要组件SAP UI5有多个组件，它们是UI5应用程序中独立的可重用对象。 这些组件可以由不同的人开发，并且可以在不同的项目中使用。应用程序可以使用来自不同位置的组件，因此您可以轻松获得应用程序的结构。 您可以在SAP UI5开发下创建不同类型的组件。无表面元件无表面组件用于从后端系统获取数据，并且它们不包含用户界面。示例- 它们是ponent类的一部分UI组件UI组件用于添加渲染功能并在用户界面上表示屏幕区域或元素。- UI组件可以是具有执行某些任务的设置的按钮。 它是类的一部分：sap.ui.core.UICompo

5、nent注- ponent是面向和UI组件的基类。 要定义可扩展性功能，组件可以从基类继承或从UI开发中的其他组件继承。组件的模块名称称为包名称，而.component将包名称定义为传递给组件构造函数的参数的名称。SAP UI5组件也可以根据系统环境划分 -客户端组件：o控制库sap.m，mon等o核心Javascripto测试包括HTML和Javascript服务器端组件o定理发生器oEclipse中的控制和应用程序开发工具o资源处理程序组件的结构每个组件以文件夹的形式表示，并包含组件的名称和管理组件所需的资源。每个组件应包含以下文件 -Component.json文件，包含设计时的元数据，

6、仅用于设计时工具。Component.js用于定义负责运行时元数据的属性，事件和组件方法。如何创建一个新的SAP UI5组件？要创建新组件，您必须创建新文件夹。 让我们将其命名为button。接下来是创建component.js文件然后，您必须扩展UI组件基类sap.ui.core.UIComponent.extend，并输入组件的名称和包路径。后来，要定义一个新的组件，你必须从require语句开始如下 -/ defining a new UI ComponentjQuery.sap.require（sap.ui.core.UIComponent）;mons.ButtonjQuery.sap

7、.declare（ponents.button.Component/ new Componentsap.ui.core.UIComponent.extend（, metadata : properties : text: string ）;ponents.button.Component.prototype.createContent = function（） this.oButton = new mons.Button（btn return this.oButton;/* Overrides setText method of the component to set this text i

8、n the button*/ponents.button.Component.prototype.setText = function（sText） this.oButton.setText（sText）; this.setProperty（text, sText）; return this;The next step is to define the component.json in your folder as follows name:ponents.button,version0.1.0descriptionSample button componentkeywords button

9、example ,dependenciesHow to Use a ComponentTo use a component, you have to wrap the component in a component container. You cannot 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 ad

10、ding the component to the container and usingplaceAtmethod to place the component on the page.var oComp = sap.ui.getCore（）.createComponent（ name:ponents.shell id:Comp1 settings: appTitle:Hello Johnvar oCompCont = new sap.ui.core.ComponentContainer（CompCont1 component: oCompoCompCont.placeAt（target1/

11、using placeAt methodUsing componentContainer ConstructorA component container carries specific settings and 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.Comp

12、onentContainer（CompCont2 ponents.shell text:Hello John 1oCompCont2.placeAt（target2SAP 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 contro

13、l libraries.Common SAPUI5 control libraries Smons for control fields, buttons, etc.Sap.m is the most common control library and is used for mobile devicesSap.ui.table includes table controlSap.ui.ux3Note SAPUI5 control library sap.m is the most common library and is used for application development.

14、 These libraries can be combined with other control libraries.Control Library CombinationsYou 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 sa

15、p.ui.suite with each other.You can also combine control library mons and 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 descriptio

16、n sap.mLibrary with controls specialized for mobile devices.sap.makitSAPUI5 library contains the markit charts.monsCommon library for standard controlssap.ui.ux3SAPUI5 library with controls that implement the SAP User Experience（UX） Guidelines 3.0sap.vizSAPUI5 library containing chart controls based

17、 on the VIZ charting library.SAP UI5 - Development KitSAP UI5 development 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

18、and devices, and they can run on smartphones, tablets, and desktops.The UI controls automatically adapt themselves to the capabilities of each device.You can use SAP UI5 on the following platforms SAP HANA Cloud PlatformSAP NetWeaver for SAP NetWeaver 7.4 or higherUser interface add-on for SAP NetWe

19、aver for SAP NetWeaver Application Server 7.3xYou can deploy the 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 ap

20、plication using the OData model using Gateway. Take a look at 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

21、 a UI5 application, you can download the SAP UI5 developers tools 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 d

22、evelopment toolkit for HTML5, you should meet the following prerequisites Eclipse PlatformMars （4.5）Operating SystemWindows OS （XP, Vista, 7 or 8/8.1）Java RuntimeJRE Version 1.6 or higher, 32-Bit or 64-BitSAP GUIOnly relevant when installing the SAP UI5 ABAP Repository Team ProviderFor Windows OS: S

23、AP GUI for Windows 7.30/7.40MicrosoftFor 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 Development Kit

24、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 towww.Eclipse.org/downloadsStep 4 Extract the file as shown in the following screenshot.S

25、tep 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 Next, enter the UR

26、L in install dialogStep 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 Download UI Development

27、Kit for HTML 5 from the following link 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 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