CD168_CN_利用SAPUI5打造SAP Fiori风格的界面

FredericBerg,BertramGanz,OliverGraeff,ThomasMarz,SAPAGMarch2014CD168利用SAPUI5打造Fiori风格的界面©2013SAPAGoranSAPaffiliatecompany.Allrightsreserved.2DisclaimerThispresentationoutlinesourgeneralproductdirectionandshouldnotbereliedoninmakingapurchasedecision.ThispresentationisnotsubjecttoyourlicenseagreementoranyotheragreementwithSAP.SAPhasnoobligationtopursueanycourseofbusinessoutlinedinthispresentationortodeveloporreleaseanyfunctionalitymentionedinthispresentation.ThispresentationandSAP'sstrategyandpossiblefuturedevelopmentsaresubjecttochangeandmaybechangedbySAPatanytimeforanyreasonwithoutnotice.Thisdocumentisprovidedwithoutawarrantyofanykind,eitherexpressorimplied,includingbutnotlimitedto,theimpliedwarrantiesofmerchantability,fitnessforaparticularpurpose,ornon-infringement.SAPassumesnoresponsibilityforerrorsoromissionsinthisdocument,exceptifsuchdamageswerecausedbySAPintentionallyorgrosslynegligent.©2013SAPAGoranSAPaffiliatecompany.Allrightsreserved.3SAPUI5简介SAPUI5概况,ModelViewController,SAPFiori应用程序(用户界面，文件和架构)SAPUI5Runtime版本1.16的新特性练习准备(现场演示)用Eclipse和GoogleChrome开发SAPUI5应用程序(练习0:准备开始)利用SAPUI5构建Fiori风格应用的10个动手练习1ResourceModel2ObjectControls3Formatter4Search5SplitApp&Shell6AdditionalDeviceAdaptation7InfoTab8ApprovalProcess9LineItem10Grouping要点附录:SAPFioriApplications,SAPNetWeaverUserInterfaceServices参考文献:RelatedResources,Supportability&Security,SAPUXExplorer,FurtherInformation概要SAPUI5简介SAPUI5概况,ModelViewController,SAPFiori应用程序(用户界面,文件&架构)©2013SAPAGoranSAPaffiliatecompany.Allrightsreserved.5HTML5用户界面开发工具箱(SAPUI5)SAP构建轻量级多平台商业用户界面的HTML5工具箱主要特性和优势采用领先的web技术jQueryODataOpenAJAXLESSD3.jsARIACSS3可在SAP和非SAP的平台上运行SAPHANAXSSAPNetWeaverASABAPOpenSourcePlatforms(testing)SAPHANACloudSAPNetWeaverASJava/PortalSAPMobilePlatform(planned)HTML5•企业准备就绪•基于Eclipse的设计阶段•开放性和灵活性•快速发布周期•无与伦比的可扩展性•主题化和品牌化•各种设备各种屏幕尺寸•最新的控件基于互联网标准加强创新使用户满意•效率和性能•用户界面服务•广泛采纳，并且简单易学•高速的SAP数据接收Readmore:“GettoKnowtheUIDevelopmentToolkitforHTML5(akaSAPUI5)”:©2013SAPAGoranSAPaffiliatecompany.Allrightsreserved.6SAPUI5Model-View-Controller的基本概念Viewswithsap.librariesControllersModelsJSON,XMLorODataimplementationinterfaceimplementationdatabinding视图(Views)可以用以下方式定义•XML(可以混用HTML)(sap.ui.core.mvc.XMLView)•JavaScript(sap.ui.core.mvc.JSView)•JSON(sap.ui.core.mvc.JSONView)•declarativeHTML(sap.ui.core.mvc.HTMLView)控制器(Controllers)•绑定视图或者独立使用•可以被多个视图使用模型(Model):用在视图上的数据绑定Readmore:SAPUI5DemoKitDeveloperGuideSAPUI5RuntimeProgramming&APIApplicationDevelopmentTopicsMVC©2013SAPAGoranSAPaffiliatecompany.Allrightsreserved.7PhoneDesktopTabletMasterPageDetailPagesap.m.AppMasterPageDetailPagesap.m.SplitAppMasterPageDetailPagesap.m.SplitAppSAPFiori应用程序详解–用户界面©2013SAPAGoranSAPaffiliatecompany.Allrightsreserved.8AppControllerAppViewsap.m.App/sap.m.SplitAppComponent.jsMasterController…DetailControllerMockModeli18nModelutil(Formatter.js)index.htmlNavigationMasterViewsap.m.PageDetailViewtriggercallcallcallcall…SAPFiori应用详解–文件和架构sap.m.PageReadmore:SAPUI5DemoKitDeveloperGuideSAPUI5forMobileBestPractice©2013SAPAGoranSAPaffiliatecompany.Allrightsreserved.9SAPUI5版本1.16*的新特性•SAPUI5Component替代Application.js(deprecated)readmore:•sap.m.IconTabBar替代sap.me.TabContainer(deprecated)•sap.m.Table独立于sap.m.List•不再支持用户用CSS改变间距*SAPUI5version1.16:partofUIAdd-on1.0SP06forSAPNetWeaverandappliedtonextwaveofSAPFioriapplications练习准备:开发SAPUI5应用程序SAPUI5ToolsinEclipse,GoogleChromebrowserStep-by-stepdescription:seeCD168Excercises.docxExercise0–GettingStarted利用SAPUI5构建Fiori风格用户界面的10个练习*Exc1ResourceModelExc2ObjectControlsExc3FormatterExc4SearchExc5SplitApp&ShellExc6AdditionalDeviceAdaptionExc7InfoTabExc8ApprovalProcessExc9LineItemExc10GroupingStep-by-stepdescription:seeCD168Excercises.docx*basedonUIdevelopmenttoolkitforHTML5runtimeversion1.16要点©2013SAPAGoranSAPaffiliatecompany.Allrightsreserved.13UIdevelopmenttoolkitforHTML5(akaHTML5)要点•HTML5是开发高交互性和高灵活性的用户界面的规范•SAPUI5为开发消费者级别用户体验的，符合WEB标准的，桌面和移动用户界面提供了的控件库和工具箱•SAPUI5是开发多种平台上SAP企业级商业应用软件的最佳选择•SAPUI5可以在多种平台和产品上运行•SAPFioriApps是基于SAPUI5和SAPNetweaveruiServices开发的•SAPUI5给SAP的顾客提供了广泛的机遇SAPFiori应用程序SAPFiori方案和主要特性SAPNetWeaverUserInterfaceServicesFormoredetailsjoinsessionsCD119,CD205,TEC149,TEC217©2013SAPAGoranSAPaffiliatecompany.Allrightsreserved.15TheSAPFiori方案*响应式简单有效的一致性瞬时性任何尺寸|设备|版本|频道在确保特性和功能的前提下，更注重用户体验可根据使用情况重建不同的应用程序同样的语言即装即用•易采用•易适配•易部署•易介绍•易扩展*followsSAPUXstrategy„RENEWmostbroadlyusedscenarios“©2013SAPAGoranSAPaffiliatecompany.Allrightsreserved.16SAPFioriApps是基于SAPUI5和SAPNetweaverUIServices开发的SAPFiori风格应用程序的主要特性及时响应式简单SAPUI5©2013SAPAGoranSAPaffiliatecompany.Allrightsreserved.17SAPUI5满足Fiori风格应用的主要特性特性描述瞬间增值容易采用和部署：无需升级，能够在已安装SAP系统上和SAPHANA平台上运行。无需管理。容易采纳：主题性和可扩展性。容易引进：无需培训响应式设计的用户界面能被多种设备支持，用户界面能随着设备界面的不同作出相应的调整使用SAPUI5的快速响应模式(SplitApp,DesktopShell,ObjectHeader/List,Form)简单1-1-3原则:一个用户，一个用例，三种屏幕使简单的是事情更简单，在确保特性