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. SQL Server获取指定行的数据

    SQL Server获取指定行(如第二行)的数据   --SQL Server获取指定行(如第二行)的数据-- --法一(对象法)-- select * from ( select * , numbe ...

  2. JS 网页键盘钩子

    使用write技术把脚本和代码写入文件,即使查看原文及也无法看到原代码,下面是具体的代码,直接保存就可以运行============================================== ...

  3. 【转】每天一个linux命令（18）：locate 命令

    原文网址:http://www.cnblogs.com/peida/archive/2012/11/12/2765750.html locate 让使用者可以很快速的搜寻档案系统内是否有指定的档案.其 ...

  4. java 多线程知识点

    线程状态图 说明: 线程共包括以下5种状态. 新建状态(New) : 线程对象被创建后,就进入了新建状态.例如,Thread thread = new Thread(). 就绪状态(Runnable) ...

  5. 利用windows server 2012 R2的Hyper-V搭建多个虚拟机的 Dynamics CRM 环境知识点小结

    一.需要掌握网络的知识,域真正的意义,防火墙等其他知识,这些知识我还需要加强,下面是我和同事的结果,不对的地方大家可以指出来,谢谢. 1.安装好的CRM2011环境,必须先打Update Rollup ...

  6. 打开安装 好的Microsoft Dynamics CRM 4.0 报错误为 Caller does not have enough privilege to set CallerOriginToken to the specified value 的解决办法

    If you installed CRM 4.0 on box where you also have SQL and used a domain account as service account ...

  7. Oracle-EXP-00011 表不存在

    Oracle-EXP-00011 表不存在 点我,点我~

  8. 【Spring学习笔记-MVC-1.0】Spring MVC架构介绍

    作者:ssslinppp       1. 核心架构图 2. 核心架构的具体流程步骤 3. 具体的核心开发步骤 4. 常用注解 5. <mvc:annotation-driven>配置 6 ...

  9. Neutron 理解 (2): 使用 Open vSwitch + VLAN 组网 [Neutron Open vSwitch + VLAN Virtual Network]

    学习 Neutron 系列文章: (1)Neutron 所实现的虚拟化网络 (2)Neutron OpenvSwitch + VLAN 虚拟网络 (3)Neutron OpenvSwitch + GR ...

  10. mysqldump备份脚本---待完善

    1. 建立备份文件存放目录:/backup/mysql 2. 编写备份脚本: # vim ~/bak.sh ## 写入如下内容: #! /bin/bash DB1_NAME="db1&quo ...