SAP UI5快速指南Word格式.docx
《SAP UI5快速指南Word格式.docx》由会员分享，可在线阅读，更多相关《SAP UI5快速指南Word格式.docx（50页珍藏版）》请在冰豆网上搜索。
每个UI5都提供了来自以前版本的新功能和增强功能，平台支持，可用性增强等。
∙SAPUI51.26
∙SAPUI51.28
∙SAPUI51.30
∙SAPUI51.32
∙SAPUI51.34
∙SAPUI51.36
∙SAPUI51.38和更多像SAPUI51.6
版本方案
SAPUI5使用3位版本号。
例如，SAPUI51.36.5。
这里，数字
（1）指定主版本。
第二个数字（36）指定次要版本号。
第三个数字指定补丁版本号（5）。
在每个SAPUI5中，主版本和次版本以及修补程序版本都可用于标识修补程序。
SAPUI5与开放UI5
SAPUI5和OpenUI5，都提供了UI开发环境。
然而，它们在以下方面彼此不同-
SAPUI5是SAP产品套件的一部分，不是单独的许可证。
它与不同的SAP产品集成-
∙SAPNW7.4或更高版本
∙SAPNetWeaverAS7.3x
∙SAPHANA云和内部解决方案
打开UI5是一个用于应用程序开发的开源技术，并与Apache2.0一起发布。
SAPUI5不是单独的产品，可用于SAP产品套件
打开UI5是用于应用程序开发的免费开源平台
SAPUI5与之集成
∙SAPHANA
∙SAPHANA云平台
∙SAPNetWeaver更高版本
打开UI5引入了Apache2.0许可证
OpenUI5是开源，并可在GitHub上
UI5浏览器支持
SAPUI5支持来自Microsoft，Google和Firefox的所有主要浏览器和最新版本。
但是，支持的功能因浏览器版本和供应商而异。
SAPUI5-架构
在SAPUI5架构中，您有三个层-
∙顶部是表示层，UI5组件由移动设备，平板电脑和笔记本电脑等设备消耗。
∙在中间层，是包括用于主题和控制的SAPUI5库的应用程序客户端。
UI5控件库包括
oSap.viz
oSmons（控件类似文本字段和按钮）
oSap.ui.table（表的输入控件）
oSap.ui.ux3
oSap.m（包括移动设备的输入控件）
∙底部是选项服务器组件。
这包括用于ABAP/Java的SAPNetWeaver应用服务器，用于开发的SAP后端，HANAXS引擎或数据库。
SAPUI5-主要组件
SAPUI5有多个组件，它们是UI5应用程序中独立的可重用对象。
这些组件可以由不同的人开发，并且可以在不同的项目中使用。
应用程序可以使用来自不同位置的组件，因此您可以轻松获得应用程序的结构。
您可以在SAPUI5开发下创建不同类型的组件。
无表面元件
无表面组件用于从后端系统获取数据，并且它们不包含用户界面。
示例
-它们是ponent类的一部分
UI组件
UI组件用于添加渲染功能并在用户界面上表示屏幕区域或元素。
-UI组件可以是具有执行某些任务的设置的按钮。
它是类的一部分：
sap.ui.core.UIComponent
注
-ponent是面向和UI组件的基类。
要定义可扩展性功能，组件可以从基类继承或从UI开发中的其他组件继承。
组件的模块名称称为包名称，而.component将包名称定义为传递给组件构造函数的参数的名称。
SAPUI5组件也可以根据系统环境划分-
∙客户端组件：
o控制库sap.m，mon等
o核心Javascript
o测试包括HTML和Javascript
∙服务器端组件
o定理发生器
oEclipse中的控制和应用程序开发工具
o资源处理程序
组件的结构
每个组件以文件夹的形式表示，并包含组件的名称和管理组件所需的资源。
每个组件应包含以下文件-
∙Component.json文件，包含设计时的元数据，仅用于设计时工具。
∙Component.js用于定义负责运行时元数据的属性，事件和组件方法。
如何创建一个新的SAPUI5组件？
要创建新组件，您必须创建新文件夹。
让我们将其命名为button
。
接下来是创建component.js文件
然后，您必须扩展UI组件基类sap.ui.core.UIComponent.extend，并输入组件的名称和包路径。
后来，要定义一个新的组件，你必须从require语句开始如下-
//defininganewUIComponent
jQuery.sap.require（"
sap.ui.core.UIComponent"
）;
mons.Button"
jQuery.sap.declare（"
ponents.button.Component"
//newComponent
sap.ui.core.UIComponent.extend（"
{
metadata:
{
properties:
text:
"
string"
}
}）;
ponents.button.Component.prototype.createContent=function（）{
this.oButton=newmons.Button（"
btn"
returnthis.oButton;
};
/*
*OverridessetTextmethodofthecomponenttosetthistextinthebutton
*/
ponents.button.Component.prototype.setText=function（sText）{
this.oButton.setText（sText）;
this.setProperty（"
text"
sText）;
returnthis;
Thenextstepistodefinethecomponent.jsoninyourfolderasfollows−
{
name"
:
ponents.button"
version"
0.1.0"
description"
Samplebuttoncomponent"
keywords"
[
button"
example"
],
dependencies"
}
HowtoUseaComponent
Touseacomponent,youhavetowrapthecomponentinacomponentcontainer.YoucannotdirectlyuseaUIcomponentinapageusingplaceAtmethod.AnotherwayistopassthecomponenttothecomponentContainerconstructor.
UsingplaceAtMethod
Itincludesaddingthecomponenttothecontainerandusing
placeAt
methodtoplacethecomponentonthepage.
varoComp=sap.ui.getCore（）.createComponent（{
name:
ponents.shell"
id:
Comp1"
settings:
{appTitle:
HelloJohn"
varoCompCont=newsap.ui.core.ComponentContainer（"
CompCont1"
component:
oComp
oCompCont.placeAt（"
target1"
//usingplaceAtmethod
UsingcomponentContainerConstructor
Acomponentcontainercarriesspecificsettingsandalsocontainsthelifecyclemethodsofaregularcontrol.ThefollowingcodesegmentshowshowtopassthecomponenttothecomponentContainerconstructor.
varoCompCont2=newsap.ui.core.ComponentContainer（"
CompCont2"
ponents.shell"
{text:
HelloJohn1"
oCompCont2.placeAt（"
target2"
SAPUI5-ControlLibraries
TherearevariousJavaScriptandCSSlibrariesthatyoucanuseincombinationfortheapplicationdevelopment.SAPUI5canusetheselibrariesincombinationandtheyarecalledSAPUI5controllibraries.
CommonSAPUI5controllibraries−
∙Smonsforcontrolfields,buttons,etc.
∙Sap.misthemostcommoncontrollibraryandisusedformobiledevices
∙Sap.ui.tableincludestablecontrol
∙Sap.ui.ux3
Note
−SAPUI5controllibrarysap.misthemostcommonlibraryandisusedforapplicationdevelopment.Theselibrariescanbecombinedwithothercontrollibraries.
ControlLibraryCombinations
∙Youcanusethecontrollibrarysap.mwithothercontrollibraries-sap.ui.unified,sap.viz,sap.ui.table,sap.ui.layout,andsap.suite.
∙Youcancombinecontrollibraries-mons,sap.ui.table,sap.ui.ux3andsap.ui.suitewitheachother.
∙Youcanalsocombinecontrollibrarymonsandsap.ui.ux3withotherlibrarieslikesap.ui.core,sap.ui.unified,sap.ui.layout,andsap.ui.table.
∙Youcancombinesap.vizwithallotherlibraries.
ThefollowingtableshowsthemainSAPUI5controllibrariesandtheirdescription−
sap.m
Librarywithcontrolsspecializedformobiledevices.
sap.makit
SAPUI5librarycontainsthemarkitcharts.
mons
Commonlibraryforstandardcontrols
sap.ui.ux3
SAPUI5librarywithcontrolsthatimplementtheSAPUserExperience（UX）Guidelines3.0
sap.viz
SAPUI5librarycontainingchartcontrolsbasedontheVIZchartinglibrary.
SAPUI5-DevelopmentKit
SAPUI5developmentkitforHTML5providesyouanenvironmentforthedevelopmentofweb-basedapplicationsanditprovidesanapplicationwithoneconsistentuserexperience.WebappsthatyoudevelopwithSAPUI5areresponsiveacrossbrowsersanddevices,andtheycanrunonsmartphones,tablets,anddesktops.
TheUIcontrolsautomaticallyadaptthemselvestothecapabilitiesofeachdevice.
YoucanuseSAPUI5onthefollowingplatforms−
∙SAPHANACloudPlatform
∙SAPNetWeaverforSAPNetWeaver7.4orhigher
∙Userinterfaceadd-onforSAPNetWeaverforSAPNetWeaverApplicationServer7.3x
Youcandeploytheapplicationontheserverthatincludesstoringthelibrariesandgettingdatafromthedatabase.YoucanusetheNetWeaverApplicationserverorHANACloudplatformforapplicationdeployment,anddatacanbeaccessedbyabusinessapplicationusingtheODatamodelusingGateway.Takealookatthefollowingillustration.
Whenausersendsaclientrequestfromhismobile/laptop,arequestissenttotheservertoloadtheapplicationinabrowser,anddataisaccessedviadatabaseandtherelevantlibrariesareaccessed.
TobuildaUI5application,youcandownloadtheSAPUI5developer’stoolsofEclipse.Onceyoudownload,youcanunzipthefileanddeployonthewebserver.ForABAP,youcaninstallaUIAdd-OnforSAPNetWeaverandthisalsoincludesUI5ThemeDesigner.
PrerequisitesforSAPUI5
ToinstallandupdateUI5developmenttoolkitforHTML5,youshouldmeetthefollowingprerequisites−
EclipsePlatform
Mars（4.5）
OperatingSystem
WindowsOS（XP,Vista,7or8/8.1）
JavaRuntime
JREVersion1.6orhigher,32-Bitor64-Bit
SAPGUI
OnlyrelevantwheninstallingtheSAPUI5ABAPRepositoryTeamProvider
∙ForWindowsOS:
SAPGUIforWindows7.30/7.40
Microsoft
ForWindowsOS:
DLLsVS2010forcommunicationwiththeback-endsystemisrequired
Note:
Installeitherthex86orthex64variant,accordinglytoyour32or64-BitEclipseinstallation
LetusnowproceedanddiscusshowyoucaninstalltheSAPUI5DevelopmentKitinyoursystem.
Step1
−ToinstallJDK,gotoOandsearchfortherequiredJDKversion.
Step2
−Downloadandrunthesetup.Youwillgetamessageasshowninthefollowingscreenshot.
Step3
−ToinstallEclipse,goto
www.Eclipse.org/downloads
Step4
−Extractthefileasshowninthefollowingscreenshot.
Step5
−Toruntheinstallation,gototheextractedfolderandruntheapplicationfileasshowninthefollowingscreenshot.
Step6
−ToinstallSAPUI5tools,gotoEclipse→Help→InstallNewsoftware.
YoucaninstalldirectlyusingtheURLorbyenteringthepathofUI5demokit.
Step7
−Next,entertheURLininstalldialog
Step8
−Toseetheavailablefeatures.PresstheENTERkey.YoucanselectthefeaturesandclickonNext.Itwilldisplaythelistoffeaturestobeinstalled→ClickNext.
Step9
−AcceptthelicenseagreementandclickFinishtostarttheinstallation.
Step10
−DownloadUIDevelopmentKitforHTML5fromthefollowinglink−
extractthecontentinthesamefolder.
Step11
−StarttheEclipseenvironment.GotoHelp→InstallNewSoftware.
Step12
−ClickAdd→Local.
Step13
−Next,navigatetothelocalupdatesitelocationandselectthetool-updatesitefolderwiththefolderwhereyouextractedtheHTML5Developmenttoolkitastheupdatesource.
Step14
−Selectallpluginsandfeaturesforinstallation.
Step15
−Selectthedialogto“Contactallupdatesites”duringtheinstallationtofindtherequiredsoftware.
Step16
−ClicktheFinishbutton
升级会员 