一套适合SAPUI5初学者的循序渐进学习教程已更新133篇，专栏完成率44.3%。作者简介JerryWang，2007年电子科技大学计算机专业硕士毕业后，加入SAP成都研究院工作至今。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期-使用CSS类进一步美化UISAPUI5应用开发教程第13期-如何添加自定义CSS类SAPUI5应用开发教程第14期-如何使用嵌入式视图SAPUI5应用开发教程第15期-如何使用对话框和片段SAPUI5应用开发教程16-图标图标使用SAPUI5应用开发教程17-UI5中聚合和绑定复合控件使用SAPUI5应用开发教程十八-SAPUI5数据绑定语法中的特殊符号，以及绝对绑定和相对绑定概念详解SAPUI5应用开发教程十九-SAPUI5数据类型和复杂数据绑定SAPUI5应用程序开发教程20-SAPUI5表达式绑定使用详解SAPUI5应用程序开发教程21-SAPUI5自定义格式化程序SAPUI5应用程序开发教程22-Filter过滤器SAPUI5应用程序的开发和使用开发教程23-列表控件的排序SortandGroupingGroupSAPUI5应用开发教程24-OData数据模型的使用方法SAPUI5应用开发教程25-使用自研代理服务器解决SAPUI5应用远程访问OData服务跨域问题SAPUI5应用开发教程26-OData服务与Mock服务器使用步骤详解SAPUI5应用开发教程27-SAPUI5应用单元测试工具QUnit介绍SAPUI5应用开发教程二十八-SAPUI5应用集成测试工具OPA介绍SAPUI5应用开发教程29-SAPUI5路由和导航功能介绍SAPUI5应用开发教程30-SAPUI5路由参数传递过程SAP三十一UI5应用开发教程-SAPUI5路由历史和路由回传(回溯历史)SAPUI5应用开发教程三十二-如何创建自定义SAPUI5控件SAPUI5应用开发教程三十三-SAPUI5应用的响应性(Responsiveness)SAPUI5应用开发教程三十四-SAPUI5应用基于设备类型页面适配功能(DeviceAdaptation)SAPUI5应用开发教程三十五-如何将本地开发的SAPUI5应用部署到ABAP服务器SAPUI5应用开发教程三十六-使用Chrome开发者工具Elements选项卡来动态修改CSS类SAPUI5应用开发教程三十七-使用Chrome开发者工具Console面板ElementReviewSAPUI5应用开发教程第38期-程序执行出错时使用Chrome开发者工具查看上下文信息SAPUI5应用开发教程第39期-SAPUI5App出现白屏的一些常见错误及分析方法分享SAPUI5应用开发教程40-如何制作包含component-preload.js的SAPUI5Release版本SAPUI5应用开发教程41-Chrome的离线安装和使用extensionUI5InspectorSAPUI5应用开发教程四十二-SAPUI5自带的Diagnostics诊断工具使用介绍SAPUI5应用开发教程四十三-SAPUI5自带的SupportAssistant工具使用介绍SAPUI5应用开发教程第44期——标签和输入控件文本未水平对齐的原因分析及解决办法SAPUI5应用开发教程第45期——如何在SAPUI5应用中使用jQuery和NativeDOMAPISAPUI5应用开发教程第46期——使用MessageManager实现开箱即用的验证（Validation）信息抛出SAPUI5应用开发教程第47部分-如何自定义SAPUI5字符串类型输入字段的验证逻辑SAPUI5应用开发教程第四十八篇-how在SAPUI5应用程序中开发条码扫描功能SAPUI5应用程序开发教程之四十九-如何在桌面电脑上调试手机上运行的SAPUI5应用程序SAPUI5应用程序开发教程之五-如何使用Cordova将SAPUI5应用程序生成可安装在Android手机上的混合应用程序SAPUI5应用程序开发教程51-如何使用Chrome调试运行在手机上的SAPUI5Cordova混合应用程序SAPUI5应用程序开发教程52-如何使用SAPUI5标准控件结合Cordova插件调用手机摄像头进行条码扫描SAPUI5应用开发教程五十三-如何自定义SAPUI5数据类型(DataType)SAPUI5应用开发教程五十四——如何将本地SAPUI5应用配置到本地FioriLaunchpadSAPUI5应用开发教程五十五——如何通过Node.jsExpress将本地SAPUI5应用部署到公网SAPUI5应用开发教程五十-六-SAPUI5树控件(tree)开发SAPUI5应用开发教程五十七-基于OData注解的智能字段使用方法学习SAPUI5应用开发教程五十八-使用工厂方法动态创建不同类型的列表行运行时的项目控件SAPUI5应用程序开发教程第59部分-如何在SAPUI5应用程序中显示世界地图SAPUI5应用程序开发教程第60部分-SAPUI5地图控件的一些高级用法SAPUI5应用程序开发教程第61部分-绘制地图SAPUI5应用程序GanttChartSA中的甘特图PUI5应用开发教程第62期-基于ODataV4的SAPUI5Form控件使用介绍SAPUI5应用开发教程第63期-深入介绍基于ODataV4SAPUI5应用开发实现LocalMockServer教程第60期四-基于ODataV4的SAPUI5表格控件如何实现过滤（filtering）和排序（sorting）功能SAPUI5应用程序开发教程65-基于ODataV4的SAPUI5表格控件如何实现创建、编辑和保存功能SAPUI5应用开发教程六十六——如何实现基于ODataV4的SAPUI5表格控件的删除功能SAPUI5应用开发教程六十七——SAPUI5列表-明细（List-Detail）布局的实现基于ODataV4的SAPUI5应用开发教程第68期-SAPUI5路由失败时如何显示自定义NOTFound页面SAPUI5应用开发教程第69期-如何从SAPUI5NotFound页面跳转回正常应用pageSAPUI5应用开发教程70——如何使用按钮控件触发页面路由跳转SAPUI5应用开发教程71——SAPUI5页面的嵌套路由SAPUI5应用开发教程72——SAPUI5页面路由的动画效果设置SAPUI5应用开发教程七十三-使用自定义查询实现SAPUI5页面路由的书签功能SAPUI5应用开发教程七十四-SAPUI5应用使用ODataV4显示表格表格数据的陷阱SAPUI5应用开发教程七十五-如何使用SAPUI5主从表的联动技术显示复杂的表内容SAPUI5应用开发教程七十六-SAPUI5应用开发教程七十七-如何实现LazyLoading（惰性加载、惰性加载）SAPUI5动态页面路由进阶使用：路由记录路由与目标的一对多关系SAPUI5应用开发教程七十八-如何通过url维护SAPUI5搜索的状态，使其支持书签功能SAPUI5应用开发教程七十九-采用SAPUI5应用的功能开发使用测试驱动开发（一）SAPUI5应用开发教程80-使用测试驱动开发（TestDrivenDevelopment）进行SAPUI5应用的功能开发（二）SAPUI5应用开发教程81-实例SAPUI5集成测试（IntegrationTest）使用OPA5SAPUI5应用开发教程第82期-使用OPA5开发SAPUI5集成测试用例支持页面跳转SAPUI5应用开发教程八十三-SAPUI5自动化测试套件页面开发步骤介绍SAPUI5应用开发教程之八十四-如何指定SAPUI5应用基于特定版本运行SAPUI5应用开发教程-八十五-如何使用OPA5编写测试用例测试功能ofuserinputtextSAPUI5ApplicationDevelopmentTutorialNo.86-动手开发最简单的本地Mock数据服务器SAPUI5ApplicationDevelopmentTutorialNo.87-如何让SAPUI5Mockserver支持自定义url参数SAPUI5ApplicationDevelopmentTutorial第88期-SAPUI5MockServer如何实现自定义函数ImportSAPUI5应用开发教程第89期-如何为SAPUI5列表控件添加多个图形界面过滤器SAPUI5应用开发教程九-基于ODataV2的SAPUI5的实现List-Detail（列表-详细信息）布局SAPUI5应用开发教程九十一-Master-Detail-Detail布局中如何使用客户端JSON模型构建列表PageSAPUI5应用开发教程第92期-表格分页基于SAPUI5JSONModel客户端模型先决条件SAPUI5应用开发教程第93期-深入探讨基于JSONModel数据模型的列表控件显示数据SAPUI5应用开发教程九十四-SAPUI5基于JSONModel数据的列表控件模型分页显示数据完整解决方案SAPUI5应用开发教程九十五-SAPUI5下拉菜单如何使用（选择）控件SAPUI5应用程序开发教程第96部分-如何自定义SAPUI5列表控件在页面中显示数据时的页面大小SAPUI5应用程序开发教程第97部分-如何使用客户端JSON模型来以Detail-Detail布局构建Master-Detail页面SAPUI5应用开发教程九十八-从viewId属性谈SAPUI5的HTML源码生成机制SAPUI5应用开发教程九十九-深入探讨SAPUI5本地开发环境中的package.json和ui5.yamlSAPUI5应用开发教程一百零一-如何修改SAPUI5框架的源码实现，并使用本地部署的SAPUI5SDKSAPUI5应用开发教程一百零一-SAPUI5应用程序的locale决策机制SAPUI5应用程序开发教程一百零二-详解SAPUI5应用程序的打印（Print）功能SAPUI5应用程序开发教程一百零三-如何在SAP中消费第三方库UI5应用SAPUI5应用开发教程一百零四-SAPUI5表格控件支持多选（Multi-Select）以及如何使用代码一次选择多个表格行项SAPUI5应用开发教程一百零五-SAPUI5Master-DetailLayout模式联动效果的实现详解SAPUI5应用开发教程106-如何提高SAPUI5应用路由url的可读性SAPUI5应用开发教程107-SAPUI5OverflowToolbar容器控件和resize事件处理一些细节介绍SAPUI5应用开发教程一百零八-SAPUI5图片显示控件的使用头像介绍SAPUI5应用开发教程一百零九-使用SAPUI5FileUploader控件上传本地文件SAPUI5应用开发教程一110-中-SAPUI5FileUploader控件深度介绍-为什么需要隐藏iframeSAPUI5应用开发教程111-SAPUI5FileUploader控件实现本地文件上传，在接收服务器端响应时遇到跨域访问错误APUI5应用开发教程一百一十二-使用自研代理服务器解决SAPUI5FileUploader上传文件遇到的跨域访问错误SAPUI5应用开发教程一百一十三-教人做fish-how自己查询任何SAPUI5控件属性的文档和技术实现细节SAPUI5应用程序开发教程第114部分-如何通过单步调试找到FioriLaunchpad路由错误的原因SAPUI5应用程序开发教程第110部分五-关于将本地SAPUI5应用配置到本地FioriLaunchpad的技术实现详解SAPUI5应用开发教程116-在SAPGUI中使用ABAP报表将SAPUI5应用上传到ABAP服务器SAPUI5应用之一开发教程117-本地开发的SAPUI5应用程序部署到ABAP服务器时，汉字出现乱码的原因及解决方法SAPUI5应用程序开发教程118-如何分析SAPUI5版本差异导致的差异问题SAPUI5应用开发教程119-深入剖析SAPUI5容器控件聚合SAPUI5应用开发教程120-如何查看SAPUI5框架代码抛出的错误信息SAPUI5应用开发教程中哪行代码导致了错误信息Part121-一键部署开箱即用的代理服务器，解决SAPUI5应用开发过程中访问远程OData服务的跨域问题SAPUI5应用开发教程122-在浏览器中使用浏览器原生的FetchAPISAPUI5应用发起网络请求SAPUI5应用开发教程123-使用BusyDialog动画防止SAPUI5应用按钮短时间内被快速点击SAPUI5应用开发教程一百二十四-使用theFunctionThrottleideatoavoidtheFunctionThrottleideatoavoidtheButtonsintheButtonsintheSAPUI5ApplicationdevelopmentTutorial一百二十五-SAPUI5进阶-XML视图UI的技术细节解析runtime实例化中定义的控件SAPUI5应用开发教程一百二十六-SAPUI5进阶-JSON模型字段中的值显示在最终的UI5界面上谜底分析SAPUI5应用开发教程一百二十七-SAPUI5应用开发教程全局配置的设计与使用SAPUI5应用开发教程一百二十八-SAPUI5智能控件智能控件初识SAPUI5应用开发教程129-如何增值SAPUI5SmartField帮助功能SAPUI5应用开发教程130-如何让SAPUI5SmartField在运行时呈现为超链接并支持跳转转SAPUI5应用开发教程一百三十一-SAPUI5跨应用导航（跨-应用跳转）本地模拟实现SAPUI5应用开发教程一百三十二-SAPUI5SimpleForm控件的使用介绍SAPUI5应用开发教程一百三十三-SAPUI5应用元数据文件manifest.json加载和解析原理详解SAPUI5应用开发教程一百三十五-SAPUI5SimpleForm属性columnsL,columnsM,columnsXL属性深入解析SAPUI5应用开发教程一百三十五-SAPUI5应用屏幕尺寸检测working原理深入分析SAPUI5应用开发教程一百三十六-SAPUI5应用SimpleForm控件ResponsiveGridLayout布局工作原理深入分析SAPUI5应用开发教程一百三十七-如何显示多组FormSAPUI5SimpleForm中水平方向的元素一百三十八SAPUI5应用开发教程-SAPUI5控件库中的Form控件和SimpleForm控件的区别和联系讲解SAPUI5应用开发教程一百三十九-写...说明Jerry在2014年加入SAP成都研究院CRMFiori开发团队后开始接触SAPUI5，曾在SAP社区和王子熙发表过多篇工作原理和源码分析的文章微信SAPUI5公众号Jerry的文章对SAPUI5一无所知的新手，哪些资料比较好入手？如前所述，Jerry也是从SAPUI5菜鸟一路走来的。他知道，对于一个只有ABAP开发背景的开发人员来说，要转型到SAPUI5开发领域并不容易。因此，我利用业余时间为SAPUI5不同层次的学习者设计了本书。学习教程将开发一个完整的SAPUI5应用程序的过程分解成几个步骤，力求涵盖每个步骤中涉及的所有知识点。这些知识点可能没有我的UI5源码分析系列文章那么深入，但我力求做到简单。重要知识点附有详细的截图辅助文字介绍，便于教程学习者理解。本教程每一步的源码都存放在我的Github上，以01、02、03等文件夹标识，例如第1步的源码在这里。每一步都在上一步的基础上，增加了几个新的特性。建议零基础或对SAPUI5了解不多的SAPUI5初学者从第一步开始按顺序一步步学习，把这些代码下载到本地，配合教程的文字讲解自己动手加深理解。对于已经有一定基础的SAPUI5开发者，可以通过本文目录跳过前面部分比较基础的章节，直接选择与自己工作项目相关的章节，或者包含某些知识点的章节他们还没有掌握。学习。如果大家对教程的每一步有什么疑问，欢迎在教程对应的步骤文章中评论留言。虽然平时开发工作很忙，但我保证会定期查看大家给我留下的评论，我一定会抽空回答其中涉及的技术问题。本教程前的步骤：SAPUI5应用程序开发教程134-SAPUI5SimpleFormAttributescolumnsL,columnsM,columnsXL属性深入分析我们深入分析了SAPUI5SimpleForm控件属性columnsL,columnsM,columnsXL的工作原理。这里简单回顾一下：当我们在Display.fragment.xml中将columnsXL、columnsL和columnsM属性设置为1时，下面代码第9行设置的ResponsiveGridLayout，即响应式网格布局，会设置所有的SimpleForm控件宽度(100%)用于显示Form控件中包含的Label和Text元素。原因是这三个属性的含义是响应式网格布局中的列数，现在列数为1，所以Form中的Label和Text元素占了100%的宽度。下图是columns为1的效果，可以看到SimpleForm控件中的元素在水平方向填满了整个屏幕：columns属性等于2的效果，SimpleForm控件的布局分为两列，每列占SimpleForm宽度的一半一：columns属性等于3的效果，SimpleForm控件布局分为三列，每列占宽度的三分之一SimpleForm：但是，我们注意到无论是columns属性还是labelSpan属性，属性名后面都带有S、M、L、XL等后缀。这些后缀与属性名称一起定义了SAPUI5SimpleForm控件在不同尺寸屏幕上的不同行为。本步骤将详细介绍SAPUI5应用屏幕尺寸类型（S、M、L、XL）的判断原则。
