一套适合SAPUI5初学者的循序渐进的学习教程关于作者JerryWang加入SAP后2007年电子科技大学计算机专业硕士毕业成都研究院工作至今。Jerry是SAP社区导师和SAP中国技术大使。在15年的SAP标准产品开发生涯中，Jerry参与了SAPBusinessByDesign、SAPCRM、SAPCloudforCustomer、SAPS/4HANA、SAPCommerceCloud（电商）等标准产品的研发云）。Jerry在工作中使用ABAP、Java、JavaScript和TypeScript进行开发，对包括SAPUI5在内的多种SAP自研框架有深入研究。教程目录SAPUI5本地开发环境搭建SAPUI5应用开发教程一：HelloWorldSAPUI5应用开发教程二：BootstrapSAPUI5应用开发教程三：接触第一款SAPUI5控件SAPUI5应用开发教程四：初探XMLViewsSAPUI5应用开发教程五：ViewControllers初探SAPUI5应用开发教程六-理解SAPUI5的模块概念SAPUI5应用开发教程七-JSON模型初探SAPUI5应用开发教程8-多语言支持SAPUI5应用开发教程9-创建第一个ComponentSAPUI5应用开发教程10-SAPUI5应用Descriptor的Descriptor是什么SAPUI5应用开发教程11：SAPUI5容器类控制页面和面板SAPUI5应用开发教程第12期-UsingCSS类进一步美化UISAPUI5应用开发教程第13期-如何添加自定义CSS类SAPUI5应用开发教程第14期-如何使用嵌入式视图SAPUI5应用开发教程第15期-如何使用对话框和FragmentsSAPUI5应用开发教程16-图标图标使用SAPUI5应用开发教程17-UI5复合控件中的聚合与绑定使用SAPUI5应用开发教程十八-SAPUI5数据绑定中的特殊符号语法，以及绝对绑定和相对绑定概念详解SAPUI5应用开发教程十九-SAPUI5数据类型和复杂数据绑定SAPUI5应用开发教程20-SAPUI5表达式绑定使用详解SAPUI5应用开发教程21-SAPUI5自定义格式化程序SAPUI5应用开发教程22-Filter过滤器的开发与使用SAPUI5应用开发教程23-ListC的排序ontrols排序分组GroupSAPUI5应用开发教程24-如何使用OData数据模型SAPUI5应用开发教程25-使用自研代理服务器解决SAPUI5应用远程访问OData服务跨域问题SAPUI5应用开发教程26-OData服务与Mock服务器使用步骤详解SAPUI5应用开发教程27-SAPUI5应用单元测试工具QUnit介绍SAPUI5应用开发教程28-SAPUI5应用集成测试工具OPASAPUI5应用开发教程29-SAPUI5路由和导航功能介绍SAPUI5应用开发教程30-SAPUI5路由过程参数传递SAPUI5应用开发教程31-SAPUI5路由历史和路由回溯历史（Routing返回历史）SAPUI5应用开发教程32-如何创建自定义SAPUI5控件SAPUI5应用开发教程三十三-SAPUI5应用的响应式（Responsiveness）SAPUI5应用开发教程三十四-基于SAPUI5的应用设备类型页面适配函数（DeviceAdaptation)SAPUI5应用程序开发教程三十五-如何将本地开发的SAPUI5应用程序部署到ABAP服务器SAPUI5应用程序开发教程第36部分-使用Chrome开发者工具元素选项卡动态修改CSS类SAPUI5应用程序开发教程第37部分-使用Chrome开发者工具控制台面板进行ElementReviewSAPUI5应用程序开发教程第38部分-使用Chrome开发者工具查看程序执行错误时的上下文信息SAPUI5应用程序开发教程第39部分-SAPUI5应用程序出现白屏的一些常见错误及分析方法屏幕分享SAPUI5应用程序开发教程40-如何制作包含component-preload.js的SAPUI5发布版本SAPUI5应用程序开发教程41-Chrome扩展UI5Inspector的离线安装和使用SAPUI5应用程序开发教程42-介绍使用SAPUI5SAPU自带的诊断工具I5应用开发教程43-SAPUI5自带的SupportAssistant工具使用介绍PUI5应用开发教程44-标签和输入控件文本未水平对齐的原因分析及解决办法SAPUI5应用开发教程45-如何在SAPUI5应用中使用jQuery和NativeDOMAPISAPUI5应用开发教程46-使用消息管理器实现开箱即用验证（Validation）信息抛出SAPUI5应用开发教程47-如何自定义SAPUI5字符串类型输入字段的验证逻辑SAPUI5应用开发教程48-如何在SAPUI5应用SAP中开发条码扫描功能UI5应用开发教程49-如何在桌面电脑上调试手机运行的SAPUI5应用SAPUI5应用开发教程50-如何使用Cordova将SAPUI5应用生成为可以安装在Android手机上的混合应用SAPUI5应用开发教程第51部分——如何使用Chrome调试SAPUI5CordovaHybridApplicationSAPUI5应用开发教程52-如何使用SAPUI5标准控件结合Cordova插件调用手机摄像头进行条码扫描SAPUI5应用开发教程53-如何自定义SAPUI5数据类型(数据类型)SAPUI5应用开发教程五十四-如何将本地SAP配置UI5应用到本地FioriLaunchpadSAPUI5应用开发教程55-如何通过Node.js将本地SAPUI5应用部署到公网。jsExpressSAPUI5应用程序开发教程56-SAPUI5树形控件(tree)SAPUI5应用程序开发教程五十七-ODataAnnotation-BasedSmartField使用方法学习SAPUI5应用程序开发教程五十八-使用工厂方法DynamicallyCreateDifferentTypesofListLineItemcontrolsatRuntimeSAPUI5ApplicationDevelopmentTutorial59-如何在SAPUI5应用程序SA中显示世界地图PUI5应用开发教程60-SAPUI5地图控件的一些高级用法SAPUI5应用开发教程61-SAPUI5应用中绘制甘特图甘特图rtSAPUI5应用开发教程第62期-基于ODataV4的SAPUI5表单控件使用介绍SAPUI5应用开发教程第63期-深入介绍基于ODataV4的本地MockServer实现SAPUI5应用开发教程第60期四-基于ODataV4的SAPUI5表格控件如何实现过滤（filtering）和排序（sorting）功能SAPUI5应用程序开发教程65-基于ODataV4的SAPUI5表格控件如何实现创建、编辑和保存功能SAPUI5应用开发教程六十六——如何实现基于ODataV4的SAPUI5表格控件的删除功能SAPUI5应用开发教程六十七——SAPUI5列表-明细（List-Detail）布局的实现基于ODataV4的SAPUI5应用开发教程第68期-SAPUI5路由失败时如何显示自定义的NOTFound页面SAPUI5应用开发教程第69期-How从SAPUI5NotFound页面跳转回正常应用页面SAPUI5应用开发教程70-如何使用按钮控件触发页面路由跳转SAPUI5应用开发教程71-SAPUI5页面的嵌套路由SAPUI5应用开发教程72-SAPUI5页面路由的动画效果设置SAPUI5应用程序开发教程七十三-使用自定义查询实现SAPUI5页面路由的书签功能SAPUI5应用程序开发教程七十四-SAPUI5应用程序使用ODataV4进行展示表格表格数据的陷阱SAPUI5应用开发教程七十五-如何使用SAPUI5主从表的联动技术展示复杂的表格内容SAPUI5应用开发教程七十六-如何实现LazyLoading（惰性加载,延迟加载)之SAPUI5SAPUI5应用开发教程七十七-SAPUI5动态页面路由的高级用法：routing记录routes和target的一对多关系SAPUI5应用开发教程七十八-如何通过url维护SAPUI5搜索的状态，使其支持书签功能SAPUI5应用开发教程79-使用测试驱动开发的SAPUI5应用程序的功能开发（一）SAPUI5应用程序开发教程80-使用测试驱动开发的SAPUI5应用程序的功能开发（二）SAPUI5应用程序开发教程第81期-SAPUI5集成测试示例【集成测试】使用OPA5SAPUI5应用开发教程第82期-使用OPA5开发SAPUI5集成测试用例支持页面跳转SAPUI5应用开发教程第83期-SAPUI5自动化测试套件页面开发步骤介绍SAPUI5应用开发教程第84期-如何指定SAPUI5应用程序基于特定版本运行SAPUI5应用程序开发教程第85期-如何使用OPA5编写测试用例测试用户输入文本的功能SAPUI5应用程序开发教程第85期.86-动手开发最简单的本地Mock数据服务器SAPUI5应用开发教程第87期-如何制作SAPUI5MockServerSupportcustomurlparametersSAPUI5ApplicationDevelopmentTutorialNo.88-HowtheSAPUI5MockServerImplementsCustomFunctionImportSAPUI5ApplicationDevelopmentTutorialNo.89-如何添加多个图形界面过滤器到SAPUI5列表控件SAPUI5ApplicationDevelopment教程九十-基于ODataV2的SAPUI5列表-细节（List-Detail）布局的实现SAPUI5应用开发教程九十一-如何使用客户端JSON模型构建Master-Detail-Detail布局列表页SAPUI5应用开发教程九十二——基于SAPUI5JSONModel客户端模型的列表分页展示（TablePagination）前提SAPUI5应用开发教程九十三——基于JSONModel数据模型的列表控件展示数据深入探讨九十四SAPUI5应用开发教程-SAPUI5列表控件基于JSONModel数据模型分页显示数据完整解决方案SAPUI5应用开发lopment教程九十五-SAPUI5SAPUI5应用开发教程第96篇-SAPUI5列表控件在页面显示数据时如何自定义页面大小SAPUI5应用开发教程第97篇-如何使用客户端-如何使用下拉菜单（Select）控件sideJSONmodeltobuildAdetailpageinaMaster-Detail-DetaillayoutSAPUI5ApplicationDevelopmentTutorialPart98-从viewId属性谈SAPUI5的HTML源代码生成机制SAPUI5ApplicationDevelopmentTutorialPart99-IndepthSAPUI5本地开发环境中讨论package.json和ui5.yamlSAPUI5应用开发教程一百-如何修改SAPUI5框架的源码实现，并使用本地部署的SAPUI5SDKSAPUI5应用开发教程一百和一——SAPUI5应用的Locale决策机制SAPUI5应用开发教程一百零二——详解打印（Print）fSAPUI5应用的功能SAPUI5应用开发教程一百零三-如何在SAPUI5应用中使用第三方库SAPUI5应用开发教程一百零四-SAPUI5FormControls的Multi-SelectSupportandHowtoUseSAPUI5应用开发教程一百零五-SAPUI5Master-Detail布局模式联动效果实现详解SAPUI5应用开发教程一百零五-如何提高SAP的可读性UI5应用路由urlSAPUI5应用开发教程一百零七-SAPUI5OverflowToolbar容器控件和resize事件处理的一些细节介绍SAPUI5应用开发教程108-SAPUI5图片显示控件Avatar使用方法介绍SAPUI5应用开发教程109-使用SAPUI5FileUploader控件上传本地文件SAPUI5ap应用程序开发教程Part110-SAPUI5FileUploader控件深入介绍-为什么需要隐藏iframeSAPUI5应用程序开发教程Part111-SAPUI5FileUploader控件实现本地文件上传，接收服务器端响应遇到跨域访问SAPUI5应用开发教程错误一百一十二-使用自研代理服务器解决SAPUI5FileUploader上传文件遇到的跨域访问错误SAPUI5应用开发教程一百一十三-授人以渔-如何自己查询任何SAPUI5控件属性的文档和技术实现细节SAPUI5应用开发教程第114部分-如何通过单步调试查找FioriLaunchpad路由错误的原因SAPUI5应用开发教程第100部分15-关于将本地SAPUI5应用配置到本地FioriLaunchpad的技术实现深入讲解SAPUI5应用开发教程116-在SAPGUI中使用ABAP报表将SAPUI5应用上传到ABAP服务器SAPUI5应用开发教程一17-部署本地开发的SAPUI5应用程序时yed到ABAP服务器汉字乱码原因分析及解决方法SAPUI5应用开发教程一百一十八-如何分析因SAPUI5版本不同带来的问题SAPUI5应用开发教程119-In-SAPUI5容器控件聚合深度剖析SAPUI5应用开发教程120-如何根据SAPUI5框架代码抛出的错误信息进行回溯找出是哪行代码导致了错误信息SAPUI5应用开发教程第121篇-一-点击部署开箱即用的代理服务器，解决SAPUI5应用开发过程中访问远程OData服务的跨域问题SAPUI5122应用开发教程-使用浏览器原生FetchAPIinSAPUI5应用发起网络请求SAPUI5应用开发教程一百二十三-使用Busy防止SAPUI5应用按钮短时间变快的对话框动画点击SAPUI5应用开发教程124-编写中...说明Jerry在加入SAP成都研究院CRMFiori开发团队后开始接触SAPUI52014年，曾在SAP社区和“王子熙”微信公众号发表多篇SAPUI5工作原理及源码分析文章Jerry的文章对SAPUI5一无所知的新手，哪些资料比较好入手？如前所述，Jerry也是从SAPUI5菜鸟一路走来的。他知道，对于一个只有ABAP开发背景的开发人员来说，要转型到SAPUI5开发领域并不容易。因此，我利用业余时间为SAPUI5不同层次的学习者设计了本书。学习教程将开发一个完整的SAPUI5应用程序的过程分解成几个步骤，力求涵盖每个步骤中涉及的所有知识点。这些知识点可能没有我的UI5源码分析系列文章那么深入，但我力求做到简单。重要知识点附有详细的截图辅助文字介绍，便于教程学习者理解。本教程每一步的源码都存放在我的Github上，以01、02、03等文件夹标识，例如第1步的源码在这里。每一步都在上一步的基础上，增加了几个新的特性。建议零基础或对SAPUI5了解不多的SAPUI5初学者从第一步开始按顺序一步步学习，把这些代码下载到本地，配合教程的文字讲解自己动手加深理解。对于已经有一定基础的SAPUI5开发者，可以通过本文目录跳过前面部分比较基础的章节，直接选择与自己工作项目相关的章节，或者包含某些知识点的章节他们还没有掌握。学习。如果大家对教程的每一步有什么疑问，欢迎在教程对应的步骤文章中评论留言。虽然平时开发工作很忙，但我保证会定期查看大家给我留下的评论，我一定会抽空回答其中涉及的技术问题。本教程上一步，SAPUI5应用开发教程一百二十二——在SAPUI5应用中使用浏览器原生FetchAPI发起网络请求。我们在UI上绘制一个按钮。点击后，使用JavaScriptES6nativefetchAPI发送网络请求，读取百度首页源码。每次单击“发送请求”按钮时，我们都会在Chrome开发者工具的网络面板中观察到一个HTTPGET请求。那么，一旦我们在短时间内快速点击按钮，就会瞬间产生多个HTTP请求，如下图所示：服务器负载压力。一个推荐的方法是点击按钮触发网络请求发送到百度网站，我们在SAPUI5应用上展示一个动画效果。这个动画效果会锁住整个应用的屏幕，让用户无法进行下一步操作。当此网络请求完成并且响应返回到SAPUI5应用程序时，我们将关闭动画以使整个界面再次可用。这从根本上避免了短时间内多次点击按钮的情况。本次优化通过如下gif动图效果演示：下面是具体实现步骤。
