设为首页 收藏本站
查看: 1740|回复: 0

[经验分享] OPEN(SAP) UI5 学习入门系列之一:扫盲与热身(上)

[复制链接]
发表于 2015-9-18 10:54:58 | 显示全部楼层 |阅读模式
  





1 扫盲




  • 什么是SAP Fiori?  了解SAP UI5必须要从SAP Fiori开始,两者概念经常被混淆,而两者也确实有着非常紧密的关系。 用过SAP的同学们都对SAP的传统的界面(SAP GUI)表示“呵呵”,其实传统的SAP GUI的界面功能还是很强大的,但是对于一个新用户来说,学会使用这套界面就需要花上一两 周的时间,所以SAP入门的第一步就是学会使用SAP GUI。此外,传统的SAP GUI只能在Windows和Mac上使用,对于移动端用户没有直接的解决方案,WEBGUI的体验也非常不好。


    DSC0000.png
      Figure 1: SAP GUI创建销售订单的界面
      鉴于此,SAP开发了一整套新的用户交互系统(UX),叫做SAP Fiori。SAP Fiori的官方定义如下:

    SAP Fiori is the new user experience (UX) for SAP software that applies
    modern design principles. SAP solutions, such as the SAP Business Suite
    powered by SAP HANA, are using the SAP Fiori UX to provide a personalized,
    responsive, and simple user experience.

      抓住几个关键字, modern design principles 就是符合当前的前端设计潮流,比如简洁化、平面化, personalized 就是更个性化,更以用户为中心,每个用户的界面都 是不一样的, responsive 可以自适应不同的终端, simple user experience 也是最终目的,让用户使用起来最简单,一目了然。现在最新发布的SAP第四代ERP产品SAP S/4 HANA就是完全基于SAP Fiori。


    DSC0001.png
      Figure 2: SAP Fiori界面
      如果想了解更多SAP Fiori的信息可以查看官网 以及 All Things SAP Fiori

  • 什么SAP UI5、OPEN UI5?  SAP UI5是SAP UI Development Toolkit for HTML5的简称,它是一套基于HTML5的UI开发组件,是SAP为了快速开发前述的Fiori风格的UI、构建企业级产品的javascript框架, 拥有丰富的界面控件、CSS页面展示模板、上百个工业图标,同时支持控件的扩展。
      那什么又是OPEN UI5?SAP基于Apache 2.0协议将这套控件贡献给开源社区,形成的开源版本叫做OPEN UI5,基本上这套版本主要还是由SAP更新,而SAP UI5和OPEN UI5的功能是 比较接近的,或者说OPEN UI5相比于SAP UI5来说,重要功能基本没有减少。
      我们接下来不做区分,统称UI5,而由于OPEN UI5是开源的,所以基本上以后用到的库都会是基于OPEN UI5。



  • UI5和SAP Fiori是什么关系?  从两者的定义可以看出来,UI5是一个具体的前端框架,而SAP Fiori是一个前端交互标准,SAP官方基于UI5框架开发符合Fiori风格的App的合集一般称为SAP Fiori Apps。




2 搭建环境


  简单的扫盲之后,我们来亲自创建一个UI5的应用吧。 工欲善其事必先利其器,首先我们要搭建UI5的开发和运行环境。



2.1 OpenUI5运行库


  截止到今天(2015-07-23),OpenUI5的最新文档版本是1.28.12,官网(Download)提供了运行时环境以及带完整文档的SDK版本下载,由于我们经常需要查询API文档,所以下载SDK版本是 一个更好的选择。



2.2 运行环境


  目前企业级的UI5产品一般运行在SAP HANA或者SAP NetWeaver下,我们由于是做练习,而且目前的练习还不需要用到后台数据,所以Tomcat就可以满足我们需求了。 下载tomcat地址:http://tomcat.apache.org/ 7.0或者8.0都可以,当然不管哪个版本,JDK都是需要的,自行下载并配置好环境,启动tomcat。 如果一切运行正常的话,本地浏览器打开 http://localhost:8080 应该可以看到tomcat的界面。


DSC0002.png
  Figure 3: Tomcat Web界面首页
  在tomcat的webapps目录下创建一个目录,比如openui5,然后把之前下载的OPENUI5的SDK解压,扔到openui5目录下,目录结构类似 <tomcat path>/webapps/openui5 ,此时打开 http://localhost:8080/openui5


DSC0003.png
  Figure 4: OpenUI5 SDK首页
  有了这个文档,基本上你就可以跟着上面的例子一步一步去练习了。在之后准备的一系列的入门教程中,很多内容也是来自于这份SDK文档。
  怎么使用这份文档?我个人觉得非常有用的是这里 http://localhost:8080/openui5/explored.html 从中你基本上可以找到所有的控件,长什么样以及怎么使用都有详细的例子。



2.3 开发环境


  SAP UI5有Eclipse的插件,我不太清楚对于OpenUI5这个插件是不是也可以使用。同时,我觉得手工来建立文件目录更有助于对UI5项目的结构的理解。所以我的建议是任意一种 带语法高亮的文本编辑器即可。推荐的有EditPlus++,Sublime Text或者Emacs、VIM。



3 创建第一个UI5应用


  按照传统,我们需要写一个能够输出 Hello World 的应用作为第一个应用。
  在<tomcat>/webapps/下新建一个目录,叫ex1或者任意你喜欢的名字,然后新建一个文件index.html,把下面的代码贴入。



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>SAPUI5 in 20 Seconds</title>
<!-- 1.) Load SAPUI5 (from a remote server), select theme and control library -->
<script id="sap-ui-bootstrap"
src="http://localhost:8080/openui5/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.ui.commons"></script>
<!-- 2.) Create a UI5 button and place it onto the page -->
<script>
// create the button instance
Var myButton = new sap.ui.commons.Button("btn");
// set properties, e.g. the text (there is also a shorter way of setting several properties)
myButton.setText("Hello World!");
// attach an action to the button's "press" event (use jQuery to fade out the button)
myButton.attachPress(function(){$("#btn").fadeOut()});
// place the button into the HTML element defined below
myButton.placeAt("uiArea");
// an alternative, more jQuery-like notation for the same is:  
/*
$(function(){
$("#uiArea").sapui("Button", "btn", {
text:"Hello World!",
press:function(){$("#btn").fadeOut();}
});
});
*/
</script>
</head>
<body class="sapUiBody">
<!-- This is where you place the UI5 button -->
<div id="uiArea"></div>
</body>
</html>

  这个例子在SDK文档中在UI Development Toolkit for HTML(OpenUI5) -> Get Started -> Tutorials -> Create Your First OpenUI5 Application。这里是相同的拷贝,只是对于 UI5库的定位稍作改动,定位到我们自己的本地资源中。如果你之前没有下载完整的SDK, 而是只下载了运行时环境,那么只要把resource这个目录放在当前的项目目录中,比如ex1/resources,然后把以上这段代码



src="http://localhost:8080/openui5/resources/sap-ui-core.js"

  换成下面的即可。



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

  好了,现在我们打开 http://localhost:8080/ex1 你将会看到以下:


DSC0004.png
  Figure 5: 第一个练习Hello World
  如果你看到上面的界面,恭喜你,我们完成了这趟UI5之旅的第一步。
  今天就到这里吧,在下篇中,我们将会探究我们写的这段短短的代码具体是什么意思。

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.yunweiku.com/thread-115287-1-1.html 上篇帖子: 【原创】【ABAP】Opening SAP Transaction Code in SAP GUI Window from WebDynpro through 下篇帖子: SAP EWM MATID for product id (GUID)
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表