SAP Fiori + Vue = ?
2017年3月28日,我到国内一个SAP CRM客户那里,同他们的架构师关于二次开发的UI框架选择SAP UI5还是Vue进行了一番探讨。回到SAP研究院之后,我把这个问题扔到了公司的微信群里,引起了大家的热烈讨论。
因为出差回来之后,我需要向我老板和老板的老板汇报工作,因此写了这篇blog:
https://blogs.sap.com/2017/03...
时光飞逝,转眼间2018年也快过完了。今天上午上班路上,忽然看到阳哥在公司微信群里发了一个截图,提供了一个指向公网github仓库的链接:
https://github.com/SAP/fundam...
看到这个仓库的url,Jerry马上就想起了早些时候在experience.sap.com网站上看到的这条新闻:
https://experience.sap.com/ne...
我们都知道Fiori代表SAP新一代UI的界面风格,而UI5是Fiori UX(User Experience,用户体验)的具体实现技术。SAP决定将Fiori同具体UI实现技术解耦, 是出于什么考虑呢?
众所周知,前端技术发展的速度是非常快的,新理念,新名词,新工具层出不穷,很多前端开发程序猿经常哀叹"学不过来了",那么,如果只绑定于某一种具体的UI实现技术,Fiori UX会缺乏足够的灵活性,很难充分利用业界最新技术来更好地为终端用户服务。
同时,这一举动也充分体现了SAP确实在倾听自己生态圈里开发人员的呼声,通过这种解耦允许SAP开发人员根据实际项目需要,灵活选择最佳UI框架来开发Fiori应用。
Fiori UX同底层UI实现框架解耦的关键就在于SAP Fiori Fundamentals, 一个轻量级的展现层实现。从技术层面上说,SAP Fiori Fundamentals不是一种新的UI技术或者框架,而是一系列stylesheets和HTML标签的集合,以此来让SAP生态圈里的UI开发人员用其喜欢的UI框架,比如Angular,React,Vue等进行开发,同时自动保证开发出的应用仍具有Fiori的风格和用户体验。
SAP Fiori Fundamentals的出现,绝不意味着它会替代UI5,实际上,SAP对于UI5的维护和功能增强一直没有停步。
按照Jerry文章的风格,当然是到上代码的时候了。
因为Jerry所在的团队进行原型开发,组内同事大多喜欢用Vue,所以我们就来试试SAP Fiori Fundamentals + Vue这对组合。
首先我们得有一个能工作的Vue应用,然后在此基础上加工。
您可以在我的SAP博客上找到一个Hello World的Vue应用,通过webpack打包之后运行,能在浏览器里看到显示的Hello World:
https://blogs.sap.com/2017/12...
这个Hello world的Vue应用,项目结构如下:
下面我们在其基础上进行加工。
1. 在项目文件夹下安装fundamental-vue。这是为SAP Fiori Fundamentals实现的一个轻量级的Vue组件集合。
npm install --save fundamental-vue
安装完毕后在package.json里能够看到fundamental-vue还在beta版,
这一点和SAP在github上的文档描述一致。
2. 下面这个链接罗列了SAP Fiori Fundamentals里支持的Vue组件,同时也介绍了如何自定义一个新的Vue组件。
https://dist-4d2gqwr8y.now.sh...
下图是一个Table组件的运行时效果,大家不难发现这个Table的外观和我们之前用UI5开发的很相似。
点击Show Code,会显示这个Table组件的Vue实现源代码,类似我们UI5 Toolkit里显示的控件在UI5 XML View里的源代码,道理是相通的。
把这一大堆代码粘贴到我们Vue应用src文件夹下的index.vue里:
同样在index.vue里,在module.exports里实现作为Button事件处理函数addCurrentEntry, 以及硬编码一些测试数据:
在main.js里加入两行:
import FundamentalVue from 'fundamental-vue';
Vue.use(FundamentalVue);
最后一步,在index.html里引入位于CDN上的Fiori Fundamentals的css文件。当然github上也提到了也可以使用npm install --save fiori-fundamentals将其安装到本地使用。
至此加工就结束了。用webpack打包之后,运行npm run dev启动wepack-dev-server, 就可以在localhost里看到如下效果:
输入新的谋士姓名,点击Add Entry按钮之后能将其输入到表格中。
尽管网上有种说法,“郭嘉不死,卧龙不出”,然而孔明永远是Jerry心中的三国演义第一谋士。
这个使用Vue组件开发而成的具有Fiori UX风格的应用运行时效果,大家可以查看这个视频体验:
<iframe frameborder="0" width="677" height="380.8125" allow="autoplay; fullscreen" allowfullscreen="true" src="https://v.qq.com/txp/iframe/p...;amp;vid=q0814wlsmqn&autoplay=false&full=true&show1080p=false&isDebugIframe=false" style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important;"></iframe>
或者查看我托管到github上的demo:
http://i042416.github.io/Fior...
手机上打开上面链接的效果:
由于时间关系,Jerry还没能深入了解SAP Fiori Fundamentals的更多技术细节,只是简单给大家展示了它和Vue协同工作的效果。
未来如果有机会,Jerry会给大家带来更多深入报道,感谢阅读。
相关阅读
- SAP Fiori应用的三种部署方式
- Jerry的Fiori原创文章合集
- SAP成都C4C小李探花:浅谈Fiori Design Guidelines
- Jerry和您聊聊Chrome开发者工具
- Jerry的UI5框架代码自学教程
- Jerry的碎碎念:SAPUI5, Angular, React和Vue
- SAP Cloud for Customer 使用SAP UI5的独特之处
- 当我用UI5诊断工具时我用些什么
- 在Kubernetes上运行SAP UI5应用(上)
- 在Kubernetes上运行SAP UI5应用(下)
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
SAP Fiori + Vue = ?相关推荐
- SAP Fiori + Vue = ? 1
2017年3月28日,我到国内一个SAP CRM客户那里,同他们的架构师关于二次开发的UI框架选择SAP UI5还是Vue进行了一番探讨.回到SAP研究院之后,我把这个问题扔到了公司的微信群里,引起了 ...
- 用React开发SAP Fiori应用
Jerry曾经写过两篇文章: SAP Fiori + Vue = ? - 2018年12月18日 Fiori Fundamentals和SAP UI5 Web Components - 2019年2月 ...
- 如何查找SAP Fiori UI上某个字段对应的底层数据库表
我国古代,形容一个人武艺全面,会说他/她"十八般兵器样样精通".所谓十八般兵器(有时也称十八般武艺),即刀.枪.剑.戟.斧.钺.钩.叉.鞭.锏.锤.抓.镋.棍.槊.棒.拐.流星锤. ...
- SAP Fiori里的Adapt UI按钮,神出鬼没的奥秘
今天是2020年2月2日鼠年大年初九,这是Jerry鼠年的第9篇文章,也是汪子熙公众号总共第208篇原创文章. 这几天大家在家一日游的感觉如何? 工作中Jerry的同事曾经问过我一个问题,Fiori界 ...
- 一步步把SAP GUI的事务码配置到SAP Fiori Launchpad里
今天是2020年1月31日鼠年大年初七,这是Jerry鼠年的第7篇文章,也是汪子熙公众号总共第206篇原创文章. Jerry之前的文章 为什么SAP GUI里的传统事务码能通过Fiori Launch ...
- 揭开SAP Fiori编程模型规范里注解的神秘面纱 - @OData.publish工作原理解析
Jerry的前一篇文章 揭开SAP Fiori编程模型规范里注解的神秘面纱 - @ObjectModel.readOnly工作原理解析,给大家分享了@ObjectModel.readOnly这个注解对 ...
- 揭开SAP Fiori编程模型规范里注解的神秘面纱 - @ObjectModel
今天是农历鼠年大年初五,本文是鼠年第5篇文章,也是汪子熙公众号第204篇原创文章. 最近大家真是谈蝙蝠色变呀! SAP官网的ABAP Programming Model for Fiori帮助文档里, ...
- 雪妖现世:给SAP Fiori Launchpad增添雪花纷飞的效果
1995年7月,台湾大宇公司发布了一款国产单机角色扮演游戏神作:<仙剑奇侠传1>,所谓"一包烟,一杯茶",就能在电脑面前坐一整天. 这么经典的游戏Jerry当然已经通关 ...
- abap mm后台表_如何查找SAP Fiori UI上某个字段对应的底层数据库表
今天是立春,鼠年大年十一.这是Jerry鼠年的第10篇文章,也是汪子熙公众号总共第209篇原创文章. 昨天凌晨的时候,四川地区又发生了地震. 成都市民纷纷表示,我们太难了. 2020刚一开始就活得如此 ...
最新文章
- 临床研究和医疗保健行业实现数据湖架构的机会和挑战
- python3 string
- linux命令:ftp
- fastjson反序列化漏洞_漏洞预警Fastjson再爆反序列化代码执行漏洞;星巴克被发现存在信息泄露风险...
- hibernate之缓存
- 自定义cell的左侧滑动
- 解决前端浏览器字体小于12px办法
- linux sed i参数,sed 慎用 -i 参数
- linux安装jdk详细步骤,需要有一定的语法基础
- 部署Lync For 移动设备 一
- 概率论 —— 泊松分布和指数分布
- 51单片机学习笔记——SH88F4051A
- 食堂自助点餐系统NABCD
- Linux系统的Web服务器的搭建
- Cesium中自定义材质material
- 4 支付宝手机网站支付demo讲解
- 使用Promise.race()实现控制并发
- 基于 MATLAB 的信号发生器设计
- 4G EPS 第四代移动通信系统
- VisionMaster标定板标定