SAP Web IDE是一种基于Web的开发环境，它是为使用最新的创新开发SAPUI5复杂的应用程序、开发和扩展SAP Fiori应用程序、开发移动混合应用程序以及使用插件和模板扩展SAP Web IDE而优化的。

关键用例:

　　▪ 开发新的SAP Fiori应用和SAPUI5应用

　　▪ 扩展SAP Fiori应用程序

　　▪ 开发SAPUI5移动混合应用(HAT插件)

　　▪ 使用新的插件和模板扩展SAP Web IDE

可以通过SAP云平台访问SAP Web IDE的试用版。

有关SAP Web IDE的更多信息，请参见SAP帮助门户上的SAP Web IDE文档: https://help.sap.com/viewer/p/SAP_Web_IDE。

本节内容：

Get a Trial Account and Access SAP Web IDE

Start SAP Web IDE

Create a neo-app.json Project Configuration File

Create an index.html File

Run the App

Create a Northwind Destination

1.获得一个试用帐户并访问SAP Web IDE

　创建SAP云平台试用帐户的步骤：

　　如果您无法访问SAP Web IDE，则可以创建一个免费帐户。要创建一个帐户，只需在 https://account.hanatrial.ondemand.com/注册一个SAP云平台试用帐户，然后登录即可。

　　

　　登录后，在SAP云平台驾驶舱的导航栏中选择Services，并通过选择SAP Web IDE tile在SAP Web IDE上打开详细信息。

　　

　　选择“转到服务”将您引向您的个人SAP Web IDE。

　　请注意：您可以将此链接添加到书签，以便稍后访问SAP Web IDE。

2.启动SAP Web IDE

　SAP Web IDE中的初始步骤

　　▪ 打开SAP Web IDE并等待初始化完成。

　　当您第一次启动它时，您将看到一个主屏幕，其中包含关于SAP Web IDE的更多信息。

　　▪ 通过单击左侧边栏上带有代码符号的图标，切换到Development透视图。

　　现在您将看到一个文件夹列表，左侧是一个条目工作区，右侧是一个空的代码编辑器。

　　

　　▪通过从菜单或Ctrl + Alt + Shift + N中选择File-> New->Folder，在Workspace文件夹中创建项目。例如，输入myProject作为文件夹名。

3.创建一个neo-app.json项目配置文件

neo-app.json文件包含SAP Web IDE的所有项目设置，并在项目的根文件夹中创建。它是一个JSON格式文件，由多个配置键组成。您需要配置的最重要的设置是启动应用程序时SAPUI5运行时所在的路径。　

　　您可以使用“routes”键并定义资源对象数组来完成此操作。要运行SAPUI5教程，您只需要两个条目，一个配置SAPUI5与路径/resources，另一个配置SAP Fiori launchpad与路径 /test-resources 集成所需的测试资源。

　　创建两个配置对象，它们包含path、target和具有更多配置设置的description属性。path和entryPath值将指向存储SAPUI5资源的服务器上的位置。

　　SAP Web IDE在运行应用程序时自动读取这些设置。您可以在下面的代码块中看到整个配置文件。或者，您可以添加关键的welcomeFile文件来配置应用程序的入口点。在web应用程序中，这通常是index.html文件。

　　请注意：根据您所使用的SAP Web IDE版本，您可能必须将项目配置为针对SAPUI5的"snapshot"版本运行，否则应用程序将与SAP Web IDE交付的SAPUI5版本一起启动。这通常是向客户公开发布的最新版本。您可以通过使用CTRL + SHIFT + ALT + P打开SAPUI5调试工具来检查SAPUI5的加载版本。如果版本对于本教程的某些特性来说太旧，则必须将version属性添加到目标配置条目并设置值。

过程：

　　a.选择新文件图标并输入neo-app.json作为文件名。

　　b.从屏幕左侧的树结构打开新创建的文件。

　　c.在neo-app.json文件中粘贴以下代码，并选择Save:　　

{

  "welcomeFile": "index.html",

  "routes": [

    {

      "path": "/resources",

      "target": {

        "type": "service",

        "name": "sapui5",

        "version": "snapshot",

        "entryPath": "/resources"

      },

      "description": "SAPUI5 Resources"

    },

    {

      "path": "/test-resources",

      "target": {

        "type": "service",

        "name": "sapui5",

        "entryPath": "/test-resources"

      },

      "description": "SAPUI5 Test Resources"

    }

  ]

}

4.创建index.html文件

用一个简单的index.html文件来测试项目配置。这个文件包含SAPUI5引导程序和一个sap.m.Text控件，该控件显示文本“SAPUI5 is loaded successfully!”。

　　a.在标题工具栏中选择New Folder图标，并输入src作为文件夹名称。

　　b.选择新创建的文件夹并创建一个新index.html文件通过选择New File图标。

　　c.将以下代码粘贴到新创建的index.html文件并选择Save:

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta charset="utf-8">

        <title>SAPUI5 Walkthrough</title>

        <script

            id="sap-ui-bootstrap"

            src="/resources/sap-ui-core.js"

            data-sap-ui-theme="sap_belize"

            data-sap-ui-modules="sap.m.library"

            data-sap-ui-compatVersion="edge"

            data-sap-ui-preload="async" >

        </script>

        <script>

            sap.ui.getCore().attachInit(function () {

                new sap.m.Text({

                    text : "SAPUI5 is loaded successfully!"

                }).placeAt("content");

            });

        </script>

    </head>

    <body class="sapUiBody" id="content">

    </body>

</html>

　　警告：根据您的安装调整资源所在的路径(src="/resources/sap-ui-core.js")。对于OpenUI5，您可以使用src=“https://openui5.hana.ondemand.com/resources/sap-ui-core.js”。例如，在SAP云平台上访问SAPUI5，可以使用src=“https://sapui5.hana.ondemand.com/resources/sap-ui-core.js”。您可以在教程或测试目的中使用对SAPUI5最新稳定版本的引用，但绝不可将其用于生产用途。在实际的应用程序中，您总是必须显式地指定SAPUI5版本。

有关更多信息，请参见Variant for Bootstrapping from Content Delivery Network.

5.运行应用程序

　　SAP Web IDE提供了集成的测试特性，允许您在中央服务器上运行应用程序，而无需设置任何额外的基础设施。您可以通过选择src/index.html来运行应用程序。然后单击标题工具栏中的run按钮。

　　这将在中央服务器和测试工具上启动应用程序，该工具允许您配置设备的屏幕大小和方向。该特性可以用于测试专门针对移动、平板和桌面设备的应用程序。您可以非常容易地更改标题栏中的分辨率和方向。

　　如果您不想在测试工具中运行app，可以调整项目的运行配置:

　　a. 右键单击项目中的任何文件并选择Run Run Configurations

　　b. 选择+并选择Web Application以添加新的运行配置。

　　c. 要保存配置并运行项目，请选择save and run。

　　有关如何运行项目的更多信息，请在SAP帮助门户https://help.sap.com/viewer/p/CP上的SAP云平台的SAP Web IDE Developer Guide中搜索如何配置如何运行项目Configuring How to Run Projects。

6.创建 Northwind Destination

在SAP云平台驾驶舱中配置一个目的地，以便绕过浏览器的同源策略。

　　为了能够测试您的应用程序，您可以使用远程OData服务，该服务提供来自OData组的Northwind演示服务的产品数据。

　　在SAP云平台驾驶舱的导航栏中，选择目的地Destinations ，然后在工具栏中选择新的目的地New Destination 。

　　

在相应字段中输入以下值：

Field

Value

Name

northwind

Type

HTTP

Description

Northwind OData Service

URL

https://services.odata.org

Proxy Type

Internet

Authentication

NoAuthentication

　　

另外，在“附加属性” Additional Properties一节中输入以下属性:　　

Property

Value

WebIDEEnabled

true

WebIDESystem

Northwind

WebIDEUsage

odata_gen

Use default JDK truststore

Set the checkmark.

　　

通过此配置，您可以为SAP Web IDE中的任何应用程序使用目标。每当应用程序调用以/destination /northwind/*开头的(本地)服务时，创建的目的地将作为一个简单的代理激活。这有助于防止与浏览器同源策略相关的任何可能问题。

UI5-文档-2.2-使用SAP Web IDE开发应用程序的更多相关文章

  1. 在线文档预览方案-office web apps续篇

    上一篇在线文档预览方案-office web apps发布后收到很多网友的留言提问,所以准备再写一篇,一来介绍一下域控服务器安装,总结一下大家问的多的问题,二来宣传预览服务安装与技术支持的事情. 阅读 ...

  2. [转载]在线文档预览方案-Office Web Apps

    最近在做项目时,要在手机端实现在线文档预览的功能.于是百度了一下实现方案,大致是将文档转换成pdf,然后在通过插件实现预览.这些方案没有具体实现代码,也没有在线预览的地址,再加上项目时间紧迫.只能考虑 ...

  3. 空间日志编辑器：word文档图文快速粘贴到web

    百度ueditor可以实现word文档图文快速粘贴到web 1.4.2之后官方并没有做功能的改动,1.4.2在word复制这块没有bug,其他版本会出现手动无法转存的情况 本文使用的后台是Java.前 ...

  4. UI5-学习篇-8-本地SAP WEB IDE开发

    1.本地SAP WEB IDE下载 UI5-学习篇-3-Local SAP WEB IDE下载 2.启动Orion服务 解压SAP WEB IDE文件后,双击Orion应用程序启动服务,如下图: 服务 ...

  5. UI5-学习篇-3-Local SAP WEB IDE下载

    1.下载地址 https://tools.hana.ondemand.com/#sapui5 有两个版本,针对各自系统环境选择对应的个人版本下载后解压. 个人版:个人试用 生产版:在云平台SCP付费订 ...

  6. 使用 Swagger 自动生成 ASP.NET Core Web API 的文档、在线帮助测试文档（ASP.NET Core Web API 自动生成文档）

    对于开发人员来说,构建一个消费应用程序时去了解各种各样的 API 是一个巨大的挑战.在你的 Web API 项目中使用 Swagger 的 .NET Core 封装 Swashbuckle 可以帮助你 ...

  7. 在线文档预览方案-office web apps

    最近在做项目时,要在手机端实现在线文档预览的功能.于是百度了一下实现方案,大致是将文档转换成pdf,然后在通过插件实现预览.这些方案没有具体实现代码,也没有在线预览的地址,再加上项目时间紧迫.只能考虑 ...

  8. 必应地图api文档，微软必应地图web开发版详解，可以在国内使用国外地图

    最近,公司项目要求在页面中嵌入地图,需求还算简单,但是由于必须具备响应式(主要是pc和移动端),而且由于公司业务是全球性的,要支持国外地点搜索.考虑到百度,腾讯,高德等等国内地图无法显示国外数据,谷歌 ...

  9. [转载]中情局数千份机密文档泄露：各种0day工具、恶意程序应有尽有

    转载:http://www.freebuf.com/news/128802.html 维基解密最近再度获取到了数千份文件——据说这些文件是来自CIA(中央情报局),文件细数了CIA所用的网络入侵工具及 ...

随机推荐

  1. [LeetCode系列] 从中序遍历和后序遍历序列构造二叉树(迭代解法)

    给定中序遍历inorder和后序遍历postorder, 请构造出二叉树. 算法思路: 设后序遍历为po, 中序遍历为io. 首先取出po的最后一个节点作为根节点, 同时将这个节点入stn栈; 随后比 ...

  2. Oracle误删除表空间的恢复

    对于误删除表空间的恢复,本文通过基于数据库的时间点恢复和基于表空间的时间点恢复分别加以讨论 一 通过基于数据库的时间点恢复被误删除的表空间 1 需要注意的事项 a 基于数据库的时间点恢复将会回退整个数 ...

  3. JUC线程池之 线程池的5种状态：Running, SHUTDOWN, STOP, TIDYING, TERMINATED

    线程池有5种状态:Running, SHUTDOWN, STOP, TIDYING, TERMINATED. 线程池状态定义代码如下: private final AtomicInteger ctl ...

  4. Microsoft Dynamics CRM 2011 常用JS 按F12 改动窗体上数据的方法

    1.按F12打开控制台输入下面代码: contentIFrame.Xrm.Page.getAttribute("new_status").setValue(50);//设值cont ...

  5. 【selenium】下拉框和弹出框处理

    #-*-coding=utf-8 from selenium import webdriver import os,time driver= webdriver.Firefox() driver.ge ...

  6. platform device和platform driver简述

    首先我们在module_init中使用platform_driver_register来注册我们的驱动.一般来说platform_driver_register放在module_init的最后调用,因 ...

  7. 通过shell进行数学计算

    对于基本运算,可以使用let, $(())和$[] 对于高级运算,使用expr和bc这两个工具 [hupeng@hupeng-vm shell]$n1= [hupeng@hupeng-vm shell ...

  8. Spring 注解方式 实现 IOC 和 DI

    注:以下所有测试案例(最后一个除外)的测试代码都是同一个: package cn.tedu.test; import org.junit.Test; import org.springframewor ...

  9. mysql分区表之三：MySQL分区建索引[转]

    介绍 mysql分区后每个分区成了独立的文件,虽然从逻辑上还是一张表其实已经分成了多张独立的表,从“information_schema.INNODB_SYS_TABLES”系统表可以看到每个分区都存 ...

  10. HUD 2639 Bone Collector II

    Bone Collector II Time Limit: 5000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...