在国外的技术网站上浏览时，看到一篇关于sapui5的文章，写的比较好，对于不了解这框架的人来说应该是很有帮助的，所以我把这篇文章翻译后转发到博客。原文链接：https://blogs.sap.com/2015/09/29/sapui5-for-dummies-what-is-it-and-how-does-it-work/comment-page-1/#comment-442387 (可能需要翻墙)。
正文：
你曾经在智能手机上使用过非常简单的应用程序吗？你有没有使用过一个简单且具有视觉吸引力的应用程序？应用程序的用户体验（UX）不仅仅是它的外观，而是它的工作方式。
我认为最令人愉快和诱人的应用程序结合了深思熟虑、前端和后端逻辑。此外，这些应用程序将这两个端分开。SAP已经意识到用户界面（UI）比以往任何时候都更容易发生变化。用户不断变化的需求可以很容易地重塑应用程序的组成和设计。考虑到这一点，后端应该与前端分开开发和维护，并且应该有一个明确的关注点划分。除此之外，应用程序的各个UI元素也可以而且应该单独开发。
什么是SAPUI5？
基于上述理论，SAP引入了一个基于HTML5的开发工具包SAPUI5，它鼓励用户体验的一致性。利用上述理论，使用SAPUI5构建的应用程序可以跨浏览器和设备进行响应——它们运行在智能手机、平板电脑和台式机上。UI控件自动调整自己以适应每个设备的功能。为此，SAPUI5提供了强大的开发概念来创建具有消费者级、基于浏览器的业务应用程序。简而言之，UI5是一种基于JavaScript、CSS和HTML5的客户端UI技术。服务器在部署应用程序、存储SAPUI5库和连接数据库时发挥作用。根据使用SAPUI5的环境，库和应用程序例如存储在SAP HANA云平台或其他应用程序服务器上。访问应用程序业务数据的首选方法是使用oData模型。
这篇博客文章的目的是指出不同的开发概念以及基本的SAPUI5应用程序是如何工作和结构的。我会反刍许多指南和教程的信息，我发现有帮助的一路上。这是一个很好的（和简短的）“入门”指南，初学者到SAPUI5。我希望在SAPUI5上创建许多前面的指南。
SAPUI5是如何工作的？
首先，您必须理解SAPUI5的基本开发概念。SAPUI5支持模型-视图-控制器（MVC）概念，“用于实现用户界面的软件体系结构模式”。作为开发人员，我们鼓励您使用MVC将数据模型处理、UI设计和应用程序逻辑分开。除了修改不同的部分之外，这有助于促进UI开发。
模型：这是负责管理、检索和更新应用程序中正在查看的数据的部分。
视图：该部分负责解释和呈现初始UI。SAPUI5上下文中的视图根据模型中的更改向用户生成表示。
视图是什么样子的?在它的目录中，视图存储在“视图”文件夹中，XML视图的名称总是以*.view. XML结尾(如下所示)。
控制器：这是最重要的部件之一。这是负责将视图逻辑与数据逻辑分离的部分。控制器通过调整视图和模型来响应用户交互和“查看事件”。控制器实际上是向模型发送命令以更新其状态，就像在字处理应用程序中编辑文档一样。与视图类似，控制器与相关视图同名（如果存在1:1关系）。控制器名称总是以*Controller.js结尾（如下所示）。
有趣的事实：MVC最初是为桌面计算而开发的，但后来被广泛应用于万维网。
好吧，这是有道理的。但它到底是如何工作的呢？
好的，在你关闭这个页面之前，我保证上面的图表非常简单。现在您对MVC概念有了一些了解，让我们来看看如何组装一个SAPUI5应用程序。这样做，我们将依次快速查看每个文件。
在本练习中，我们将假设我们刚刚构建了一个基本的master detail SAPUI5应用程序。首先，什么是主详细信息应用程序？好吧，如果你曾经使用过iPad或平板电脑，那么你很可能在上面使用过电子邮件。你有没有注意过iPad或平板电脑上的电子邮件应用程序如何在左侧显示你的电子邮件列表？它可能会显示主题、发件人和电子邮件的预览。然后在右边，它会显示您选择的电子邮件。这是一个主细节应用程序的示例。从形式上讲，在主详细信息应用程序中，用户可以从对象列表中选择对象并查看选定的对象。许多事务性SAP Fiori应用程序都使用这种类型的应用程序布局（如下所示）。
按照下面的步骤使用图1A。
1.我们都访问过一个网站。很明显你现在在一个网站上。加载SAPUI5应用程序的第一步是浏览器加载web应用程序的index.html（其中包含的代码不超过最小值）。如果您不熟悉web开发，则每个网站都部署在web服务器的目录中。除此之外，每个网页都是该web服务器上的一个单独文件。当您访问网页时，服务器会查找默认文件（index.html）并自动显示该文件。
2.随后，它使用标准变量引导加载SAPUI5工具包核心。Bootstrap包含基于HTML和CSS的SAPUI5版式、表单、按钮、导航和其他界面组件的蓝图/模式。
然后有一个函数调用来举例说明sap.ui.core.ComponentContainer并将其放在HTML文档的主体中。
sap.ui.core.ComponentContainer做什么？
sap.ui.core.ComponentContainer加载sap.ui.core.UIComponent，它是整个应用程序的自包含封装。
3.组件（名为sap.ui.core.ui Component）在Component.js文件中与index.html位于同一文件夹中；可以通过bootstrap标记中的资源位置规范找到它。组件定义了元数据，其中包括应用程序级配置和路由信息。路由是关键的最佳实践导航机制，对于非常重要的应用程序，它将取代基于sap.ui.core.EventBus的导航，甚至取代对顶级导航控件（如sap.m.NavContainer）的基于共享控制器的访问。
那么，我所说的应用程序级配置是什么意思？我们的组件由两部分组成：元数据和在索引之后初始化组件时调用数据源的函数。在SAPUI5的早期版本中，应用程序的其他配置设置（如服务配置、根视图和路由配置）已添加到我们的组件中。从SAPUI5版本1.30开始，SAP建议您在名为Manifest的文件（我们将在第2部分中讨论）中定义这些设置。
4.在我们的组件初始化之后，有一些模型是在我们的组件上创建和管理的。第一个是主模型；它使用oData连接到我们的数据源。与主模型一起，内部化（i18）被初始化。内部化文件是从本地资源（文件）加载文本并基于UI控件进行设备检测的地方。
5.此外，路由器（sap.ui.core.routing.Router）的初始化在组件的主要部分进行，根视图（“App”）被实例化。与我们想象中的应用程序中的所有其他视图一样，根视图是一个XML视图。
6.基础、基础视图（在App.View .xml中定义）非常简单，包含单个SAP.M.SPLITAPP控件。好的，慢点——什么是sap.m.SplitApp？SplitApp是SAPUI5移动应用程序的一个附加核心组件，除了应用程序控件。如果SAPUI5在平板电脑上运行，SplitApp支持两个导航容器（页面或其他全屏控件之间的导航），而在智能手机上运行一个导航容器。主导航容器的显示取决于设备的纵向/横向和SplitApp的模式。
7.好吧-现在是毛茸茸的东西！现在我们将了解用户在浏览器中看到的应用程序部分。虚拟应用程序的可见部分由三个主要的XML视图和一个片段提供。当我们的应用程序出现在设备（而不是智能手机）上时，会显示两个视图：主视图和详细视图。首先，这是Master.view.xml和Detail.view.xml。每个视图都包含一个sap.m.Page。还有NotFound.view.xml，当没有视图可以与请求的资源匹配时使用。类似于经典的“404NotFound”页面，您可能在其他网站上遇到过。什么是sap.m.page？嗯，sap.m.Page是移动应用程序屏幕的基本容器。
8.在Detail视图中，有几个SAPUI5表单控件可以在我们的应用程序中显示详细信息。对于这个特定的例子，这可以包括发送者和接收者电子邮件。这些控件在XML片段中单独定义。
9.最后，还有一个Formatter.js文件。格式化程序包含在主视图和局部视图中的各种控件中使用的格式化值。css文件夹包含style.css，其中有非常少量的自定义css，特别是将“not found”消息放在它通常位于的较低位置。同样，如果您不熟悉web开发，CSS代表层叠样式表。CSS可以包含一个或多个静态文件，用作描述页面（或文档）表示的样式表语言。
太棒了！我能从这一切中得到什么？
使用Web技术，如HTML5作为我们的基础，SAP的应用程序可以真正改造成许多不同的设计。有鉴于此，SAPUI5支持许多设计模式；每个模式都由sap.m控件支持。正如你已经看到的，这是SAP FiRIO UX的基础。通过遵循这里描述的设计模式方法，您构建的应用程序将与现有FiRi应用程序和新SAPUI5在路上保持一致的感觉。正如本文开头提到的，应用程序的用户体验不仅仅是它的外观，而是它的工作方式。
现在，我们已经了解了基本的SAPUI5应用程序的结构和工作原理，请在下面这些伟大的资源中进行挖掘。请继续收听第二部分！通过与你的同龄人分享这篇文章来表达你的爱！
以上就是这篇文章的全文。个人感觉对于sapui的初步了解有很好的帮助。之后我们还会继续深入的去了解sapui5（openui5）。