SAPUI5新手教程3：接触SAPUI5控件首个试用版微信上已经发表了很多关于SAPUI5工作原理和源码分析的文章公众号。Jerry文章中对SAPUI5一无所知的新手，入门学习什么资料最好？之前说过，Jerry也是从一个SAPUI5菜鸟一路走来的。他知道，对于一个只有ABAP开发背景的开发人员来说，要转型到SAPUI5开发领域并不容易。因此，我在业余时间设计了这个适合SAPUI5初学者的学习教程，把开发一个完整的SAPUI5应用程序的过程拆分成几个步骤，力求涵盖每个步骤涉及的所有知识点。这些知识点可能没有我的UI5源码分析系列那么深入，但力求通俗易懂，便于SAPUI5初学者看懂。本教程每一步的源代码都存放在我的Github上，分别用01、02、03等文件夹标识。每一步都是在上一步的基础上，增加了几个新的特性。建议零基础或对SAPUI5了解不多的初学者从第一步开始按顺序循序渐进学习，将这些代码下载到本地，配合教程的文字讲解，自己动手加深理解。如果大家对教程的每一步有什么疑问，欢迎在教程对应的步骤文章中评论留言。在本教程的前两篇文章中，我们SAPUI5应用界面中显示的HelloWorld一直都是通过div标签实现的。这篇文章是本教程的第三步，我们将真正开始接触SAPUI5提供的控件之一：Text。本步骤使用的源码可以在以下链接下载：https://github.com/wangzixi-d。..与本教程上一步相比，本步的index.html和index.js文件增加了一些新的内容。先看看这一步完成后的效果。在浏览器中打开index.html，可以看到Helloworld的字符串，同时将鼠标放在上面，可以看到一个tooltip：下面是具体的修改细节。index.html在第1步和第2步中，我们都在body标签中使用了div标签来显示Helloworld。但是在这一步，可以看到body标签中包含的div标签的内容是空的。同时，div标签多了一个id属性，内容为content。还有一个名为sapUiBody的CSS类。该类由SAPUI5标准CSS库提供。稍后我们将看到这个类实现了什么样的愿景。影响。id为content的div标签也称为placeholder，我们后面创建的第一个SAPUI5控件，即Text控件，都会放在这个placeholder中。换句话说，此占位符div标记充当在运行时通过JavaScript代码创建的其他SAPUI5控件的容器。这里的id值可以是任意的，只要和下面介绍的index.js中调用的placeAt方法中传入的id一致即可。index.js代码有4个关键点，如下图所示：sap.ui.define方法因为这一步我们需要用到SAPUI5提供的Text控件，所以该控件位于命名空间sap.m中，所以需要先使用sap.ui.define方法加载sap.m.Text控件的实现。sap.ui.define方法接收两个参数。第一个参数是一个数组，存放的是需要加载的SAPUI5库的url集合。这个例子是sap/m/Text。第二个参数是回调函数。当sap.ui.define成功加载所需的库文件时，会自动调用该回调函数，并将加载成功的库文件的实现作为入参传递给回调函数。在我们的例子中，回调函数就是代码第三行指定的函数，入参Text就是sap.ui.define加载sap.m.Text库成功后传递给回调函数的参数。其他关键点的详细介绍可以参考我的文章：SAPUI5新手教程3：第一个SAPUI5控件入门
