请注意：如果您加入我们，这是SAP云平台技术学院（加拿大路演和SAP博客版）的练习1/3。这意味着这些教程或"练习"都有非常完善的文档记录，将通过屏幕截图和说明引导您完成每一步。

练习摘要：

在本练习中，您将在SAP BUILD中创建一个新项目。您将为单页应用程序（SPA）创建用户界面（UI），该应用程序将在后面的练习中使用。此SPA稍后将成为一个翻译应用程序，利用SAP API Business Hub和SAP云平台的REST服务。

您将使用什么？

SAP云平台SAP BUILD

您将学到什么？

在SAP Build中构建响应性高的高保真用户界面了解下拉列表、输入和按钮控件预览原型并测试交互发表研究报告导出项目的底层代码

结果

开始吧！

首先，我们需要从SAP云平台驾驶舱中的服务访问SAP BUILD。

从左侧菜单中，选择服务并筛选到用户体验类别。选择Build.

如果您的服务未启用，请选择大的Enable按钮。启用生成服务后，选择"打开生成"。这将使用SAP构建工具启动一个新窗口。

一旦打开并登录，您将看到空的工作区；类似于下面的内容。选择创建新项目的选项。

系统将要求您设置此项目的基本信息。将您的项目命名为"SAP Translate"，描述如下："使用SAP云平台运行和翻译文本的SAPUI5应用程序"。完成后，选择创建项目开始。

首先要做什么？当然，我们想开始制作原型！选择Start Prototyping.

如上所述，我们希望构建一个响应性强的应用程序UI。我们还有很多其他的选择，包括自由泳。我们还有应用程序模板，包括对象页、工作列表和主细节。对于我们的应用程序，我们将选择Responsive，因为我们希望它稍后在移动设备上工作。

这将带我们进入构建工作区。我们有一个单一的响应页面为我们准备原型。只需双击默认的page1文本并将其更改为"translateUI"。这是非常重要的。虽然这对我们来说是一个很小的改变，但这改变了后台应用程序视图和控制器的名称！

下一步，将鼠标悬停在translateUI页面上并选择Edit page（或选择3个垂直点并选择Edit）。

向应用程序添加控件

现在我们的应用程序处于空壳中，让我们首先通过更改页眉来更改应用程序的名称。更改右侧的属性；将响应页面标题更改为SAP Translate。我们也会通过关闭右边的开关来关闭页脚。

您会注意到在UI编辑器中，我们有很多选项。在左边，我们可以添加许多控件（来自控件），上传和添加图像（来自图像），甚至添加模拟数据（来自数据）。由于sapbuild的用户友好性，大数据推荐，您可以轻松地将其中任何一个拖放到应用程序中。但由于我们正在构建的应用程序需要许多细节，我们将从屏幕右侧的属性添加许多控件。

在UI编辑器中，每个控件都在右侧面板中定义了属性，您可以为原型自定义这些属性。属性定义每个UI控件的外观和行为。在"原型"页上选择控件时，控件属性和操作将显示在右侧面板的"属性"选项卡上。有些控件可以包含其他属性，如页子级、大小、颜色等。

您还应该注意，许多控件都有关系。如果选择对象及其关系，则可以修改对象及其子对象。例如，我们选择的页面有4（四）个子项，包括内容、页脚、页眉内容和子页眉。

我们将在本练习中向页面添加控件，使其属于内容类别。展开内容并从选择列表中添加垂直框控件。

垂直框控件为垂直灵活的框布局构建容器。垂直框是一个方便的控件，因为它只是一个专门的FlexBox控件。这意味着我们可以在其中添加控件和对象。

现在，从"内容"下面选择"垂直框"。

垂直框默认有4（四）个子项。我们不需要这些，所以我们要删除它们。展开子项下面的项目列表以查看子项的详细信息。如果将光标悬停在每个控件上（即"Button"或"Text"），将出现一个垃圾桶。选择垃圾桶以删除垂直框控件中所有预先存在的子控件。

现在我们已经在垂直框中腾出了空间，我们可以开始在其中添加控件。从选择列表中，选择并"添加"2（两）个简单的表单控件到垂直框中（在Children>Items下）。

正如我们在垂直框中看到的，构建工具喜欢将内容添加到控件中。例如，简单表单有3（三）个标签和3（三）个我们不需要的文本控件。您可以用以前使用的方法删除，也可以用光标选择并用键盘上的"删除"键删除。

删除后，全球云购，您可以从选择列表中添加下拉列表控件和输入控件。只需打开选择列表，找到/选择控件，然后单击"添加"。