SAP云服务平台干货攻略 | HTML5应用需要用到什么IDE提高开发效率?

简介: http://mp.weixin.qq.com/s?__biz=MjM5OTI2MjgyMA==&mid=2651785507&idx=1&sn=e0f7e414097b22b2d4acb6bc3e9fa87e&chksm=bcc58...


http://mp.weixin.qq.com/s?__biz=MjM5OTI2MjgyMA==&mid=2651785507&idx=1&sn=e0f7e414097b22b2d4acb6bc3e9fa87e&chksm=bcc586288bb20f3ebaa0fb0d70dcb1fb803b92caff0e1c4dcc85aaf6e4545df645cd84887fbf&mpshare=1&scene=5&srcid=1114DbdSsJejliYkYMmFMbLq#rd

 

SAP天天事

之前在介绍HCP的文章(SAP HANA Cloud Platform账号获取、应用生成……干货攻略)里已经提到HCP是运行HTML5以及J2EE应用的内存云计算平台。J2EE应用可以用Eclipse去开发,那么HTML5应用需要用到什么IDE(集成开发环境)去提高我们的开发效率呢?

 

在此我们请上这次的主人公:Web IDE

 

De.ion: http://mmbiz.qpic.cn/mmbiz_png/MyOJCrxcqF0CaflH2pKVuGHbqajmsQXU4LN0yaSKh6AwzeARpo61DRySFNxia3qtX9ibicicnsdm2dFoPm0RibfvuSg/640?wx_fmt=png&wxfrom=5&wx_lazy=1

 

 

如何得到Web IDE

 

Web IDE作为HCP上的一个服务,可以从服务控制台激活:

首先登陆到HCP控制台→Services→选择SAP Web IDEEnable

 

成功激活之后可以看到以下画面:

De.ion: http://mmbiz.qpic.cn/mmbiz_png/MyOJCrxcqF0CaflH2pKVuGHbqajmsQXUPZNlowibXNFmbbr5J4lGFZ3pAVPiblkK0042cmPkZ1noACrEm0Jw6abA/640?wx_fmt=png&wxfrom=5&wx_lazy=1

 

  • 通过点击Document连接,可以连接到Web IDE的帮助文档。
  • 通过点击Open SAP Web IDE连接,可以打开Web IDE
  • 通过点击SAP Web IDE configuration连接,可以把您带到Web IDE的配置界面

 

 

如何运用Web IDEHTML5应用的快速开发?


那接下来我们一起开发一个Master-Detail类型的HTML5的应用。

 

登陆到Web IDE之后选择FileNewProject from Template→选择SAP Fiori Master-Detail Application模板→Next→为项目起一下名字→Next→选择Service URL→选择northwind,然后输入/V3/Northwind/Northwind.svc

 

De.ion: http://mmbiz.qpic.cn/mmbiz_png/MyOJCrxcqF0CaflH2pKVuGHbqajmsQXUu2rMIsoUMqThDLD98pgtNmw8sGL601ekPYQibRJ7Y8SokDA5xawQRzQ/640?wx_fmt=png&wxfrom=5&wx_lazy=1

 

您首先需要按照以下的设置,在HCP控制台→Destinations配置northwindDestination

 

De.ion: http://mmbiz.qpic.cn/mmbiz_png/MyOJCrxcqF0CaflH2pKVuGHbqajmsQXUPc2Soje3Qp6YC5QFicKiaJnia0YUlSJxn8PsuMhTDvlKXeZwSF3fToicRw/640?wx_fmt=png&wxfrom=5&wx_lazy=1

 

关于在例子里用到的oDatametadata信息可以从以下链接获取:

http://services.odata.org/V3/Northwind/Northwind.svc/$metadata

 

Next →参照以下设置配置oData数据绑定→Finish

 

De.ion: http://mmbiz.qpic.cn/mmbiz_png/MyOJCrxcqF0CaflH2pKVuGHbqajmsQXUiaVVcjnlf10l60YLRiacQuMvh8hWQCKqXrthkr4ThZYdiaBWQL368ez8Q/640?wx_fmt=png&wxfrom=5&wx_lazy=1

 

右击生成的项目选择RunApp in FLP Sandbox可以看到您做出来的应用的效果。

 

De.ion: http://mmbiz.qpic.cn/mmbiz_png/MyOJCrxcqF0CaflH2pKVuGHbqajmsQXU7PyVt8QEpz9d5aPCqVFwSW4UA4MVtS0tIQbGibqUszHTqkOzDbMAG9g/640?wx_fmt=png&wxfrom=5&wx_lazy=1

 

 

Web IDE还有哪些特性?

 

  • HCP以及ABAP系统的紧密集成:可以直接从HCP或者ABAP系统导入HTML5的项目,也可以把项目直接部署到HCP或者ABAP系统。
  • 提供测试用的运行环境:可以用Run功能,模拟运行在FLP,以及HTML5的运行环境中。
  • 高效的编辑器:开发XML类型的View的时候可以用Layout Editor用拖拽的形式快速开发。

 

 

 

 

目录
相关文章
|
18天前
|
机器学习/深度学习 移动开发 自然语言处理
HTML5与神经网络技术的结合有哪些其他应用
HTML5与神经网络技术的结合有哪些其他应用
31 3
|
1月前
|
JavaScript 前端开发 UED
HTML 超链接的多种类型及应用
【10月更文挑战第17天】HTML 超链接类型丰富多样,它们共同构成了网页中不可或缺的导航和交互元素。通过合理地选择和运用这些超链接类型,我们可以为用户创造更加流畅和便捷的浏览体验,提升网站的可用性和吸引力。
41 1
|
1月前
|
移动开发 前端开发 JavaScript
HTML5 新的 Input可以有哪些好玩的应用
HTML5的新输入类型为应用带来了多种创新和互动功能,显著提升了用户体验和界面趣味性。例如,颜色选择器可动态改变网站主题色;滑块控制适用于音量或亮度调节;日期和时间输入便于预约系统的设计;互动式表单结合多种输入类型实现高效的数据收集;猜数字游戏增加用户参与度;实时搜索建议优化网站搜索功能;图像预览功能让用户上传图片前预览效果;密码可见性切换按钮提升表单的可用性;结合用户位置的电话号码输入则能提供附近服务信息。这些应用场景不仅使网站更具吸引力,还增强了用户的互动体验。
|
2月前
|
移动开发 JavaScript 数据管理
HTML5 拖放在游戏中的应用
HTML5的拖放功能在游戏开发中广泛应用,尤其在创建交互式网页游戏时。它支持多种场景,如拖动角色或物品、选择和装备物品、拼图或配对游戏以及自定义界面布局。通过简单的HTML和JavaScript代码,可实现流畅的拖放交互,并提供视觉反馈,增强用户体验。此外,还需考虑设备兼容性和数据管理,确保游戏在不同设备和浏览器上都能良好运行。总之,HTML5拖放功能使网页游戏更生动有趣。
|
2月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas详解及应用
HTML5 Canvas 允许通过 JavaScript 在网页上动态绘制图形、动画等视觉内容。首先在 HTML 中定义 `<canvas>` 元素,并通过 JavaScript 获取画布上下文进行绘制。常见方法包括绘制矩形、路径、圆形和文本,以及处理图像和创建动画效果。适用于游戏开发、数据可视化、图像编辑和动态图形展示等多种应用场景。需要注意性能优化、无状态绘制及自行处理事件等问题。
|
3月前
|
前端开发
酷炫表单,触感未来:HTML与CSS动画的创新应用!
酷炫表单,触感未来:HTML与CSS动画的创新应用!
|
3月前
|
移动开发 API 开发者
什么是HTML5 History API有哪些应用场景
【8月更文挑战第11天】什么是HTML5 History API有哪些应用场景
58 1
|
3月前
|
存储 移动开发 开发者
|
3月前
|
自然语言处理 前端开发 开发者
|
6月前
|
设计模式 前端开发 Java
Java与HTML的深度融合:技术解析与应用实践
Java与HTML的深度融合:技术解析与应用实践
437 1
下一篇
无影云桌面