Home
>
娄底中国erp
>
娄底erp ui
娄底erp ui

time:2020-04-11 08:25:02

author:重庆佰鼎科技有限公司

【Font size: big medium smail

本文由重庆佰鼎科技有限公司提供,重点介绍了erp ui相关内容。重庆佰鼎科技有限公司专业提供中国erp,鼎捷erp系统,小圈erp等多项产品服务。公司开拓创新,保持质量,塑造形象,为更多的合作伙伴提供最优质的产品服务

erp ui欢迎关注微信公众号:SAPtechnical

前言

写在前面

今天这篇我依旧谈互联网,哪天要是跑题了,就要谈谈旅行、谈谈人生了。说起旅行,我在这里祝大家五一假期愉快。

从信息互联、到人网互联、再到现在的万物互联,过去十年,我们经历了互联网技术演化过程。过去科技创新的积累已经促进创新由量变向质变:市场应用窗口已经打开,科技创新带来的社会变革及其伴随的蝴蝶效应正在发生。人工智能、区块链等大批新鲜事物出现在普通人的视线里,SAP作为ERP中全球市场占有率最高的一款企业管理系统软件也在不断进步,不断革新。

ui

SAP UI5

今天谈一下UI5开发流程,我们拿HANA的UI来说,SAP也在版本更新中不断的增加和提升这些内置服务,既然添加或者开放出不同的server进来,就为后期推广在做伏笔。所以先拿这个例子来讲。

作为一个程序开发员来说,应该具备哪些技能,前端开发必须掌握几个核心技能:HTML、JavaScript、CSS、JQuery等。

关于HTML和CSS需要知道各种UI框架的使用,如BootStrap、ElementUI……,但在SAP中,我们就不需要掌握那么多了,因为SAP已经把框架定好了。

ui

页面分析erp ui

我们拿一个简单的流程按照先后执行的顺序来说一下,因为模式的要求UI5的开发已经把前台和后台分离出来,当然今天的主题是UI,所以我们只说前台部分,DB部分这篇不会涉及到。

我们知道,浏览网页的时候都是先进入一个HTML页面,那么我们就先看一下HTML文件里的内容,首先这个文件里调用了Component,至于为什么要调用这个Component,后面会说到,如下图所示:

在一般SAP UI5开发中,我们会在HTML中,直接调用Component。而SAPUI5中支持利用Component对组件进行封装。这样就会很方便。

这样在HTML中的代码量就大大减少了,不用画表格,不用画页签,不用写各种各样的JS代码,流程上更加清晰,只需要定义一个sap.ui.core.ComponentContainer对象,在ComponentContainer中包括刚刚定义的Component对象即可。ComponentContainer实例化的Component参数指定容器所包含的Component。

ui

组件调用

而在Component里,我们可以定义样式,调用view,services等,可以把它理解为一座通往其他地方的一个桥梁、纽带。如下图所示:

这里只要填写view名称即可:

我们将root view和service URL配置在Component的metadata中,metadata也可以放到专门的配置文件中,这个配置OpenUI5叫Application descriptor。

这里的Component metadata配置部分的rootview,表示程序启动的第一个view。

顺便介绍一下几个类库:

sap.m:主要用于移动设备的响应式组件,并支持很多移动设备特性检测,比如检测touch等,此库下面list,table等组件使用比较广泛,而且包含了下拉刷新的功能,非常完善,并自动适应不同尺寸平台。

sap.ui:UI库包含的组件是最为丰富的,主要用于适应桌面平台,同样可以支持响应式的设计,比如sap.ui.table等组件。

:是官方标准app的常用类库,如果在实际开发过程当中想要拓展标准应用,必须了解此类库一些特性,否则拓展起来会有很大问题。

uierp ui

组件框架

分析一下Component框架的代码含义,会引用core中的UIComponent基础空间,组件的编写在UIComponent.extend中进行,即进行扩展。

一般会把Controller文件中的初始化函数、数据模型绑定配置、设备配置、I18N等工作都会放到Component中,这样做的目的会使项目中的各个文件的逻辑更加清晰。

我们这里只截取一个例子来看,如下图所示:

这个相当于一个属性配置文件,通常说的是文本翻译文件或文本消息文件(即:多语言)。要定义引用I18N文件,通过setModel来设定,设定的模型传进第一个参数为i18nModel,表示要设定的是I18N模型,后面传入具体的I18N文件,在上面的截图中已经定义了路径,setModel如下图所示:

这些操作都是在初始化函数中进行设定。

说了这么多,我们来看一下Component的基本框架,如下图所示:

Component的构建流程如上,extendUIComponent这个框架,里面init为初始化函数,里面可以设定其他属性(包括配置模型等)。

ui

view controller

前面我们说到Component里面会调用view,那么界面展示就需要view来进行,当然这里面比如mvc等都是SAP UI框架里定义好的,我们拿过来用就好,View的框架如下:

内容就是绘制各种各样的显示格调。

页面展示好后,页面上的操作呢,比如交互动作等,这个就需要Controller来做了,一般情况下,Controller里是一系列的function处理,Controller框架如下:

内容就是页面要实现的实际功能。

这些功能后续再讲。

我们再次回到初始化部分,也就是Component里面,前面第三步的时候,我们知道了init我们统一放到初始化函数中,获取显示内容的URL,只需要如下:

但是地址的内容来自哪里呢,当然最终肯定是DB,而在常规的开发流程中,DB是不允许直接暴露的,所以,我们要对DB进行封装,封装的方法就是在SAP UI5中统一使用的Odata,Odata是开放数据协议。是一种描述如何创建和访问Restful服务的OASIS标准。运用且构建于很多 Web 技术之上,比如 HTTP、Atom Publishing Protocol(AtomPub)和 JSON,提供了从各种应用程序、服务和存储库中访问信息的能力。当然config我们是在extend里配置,如下所示:

上面的URL就是项目上用到的Odata路径,填写之后即可。这样就实现了最初的页面显示,如果有数据的情况也可以直接显示,后面可以是table或者Model。涉及到DB部分我们这篇暂时不讲。今天的内容就是这些,感谢阅读。

Reprint please indicate:http://trna.cnsoftweb.com/ERP-1331.html