SAP UI5 - Component

学习下UI5的Component概念

UI5有两种Component:

一种是faceless component (class: sap.ui.core.Component), 这种component没有用户界面，一般用于从后台系统获取数据。

另一种是UI component(class: sap.ui.core.UIComponent), 这些组件是用于屏幕展示的，一般对应一个屏幕区域或者元素，可以被重复利用。

这两种component的基准类都是sap.ui.core.Component，可以通过继承基准类或者另一个component来扩展当前component的功能

构造Component的时候，传入的名字为包名, 模块名（Module name）为包名+ .Component, 即通过jQuery.sap.declare或者在Component.js中extend方法中声明的名字

一个component就是一个文件夹，文件夹名定义了component名并且包含了所有component可能用到的资源,比如CSS view 和image

　　component.js : component controller，定义属性，集合，事件以及方法穿进去的name 属性就是component所在的包名

　　component.json: TODO

所有在component文件夹下的所有路径都是相对于component.js的相对路径，而不是index.html文件

一个完整的component目录如下：

时间： 2024-10-07 00:27:33

SAP UI5 - Component的相关文章

SAP UI5 web Component里的条件渲染机制

我的SAP UI5 web Component同时定义了两个图表标签,即BarChart和LineChart: 运行时效果如下: 现在我想针对这两个图表控件做一个条件显示,即点击屏幕一次,显示A图表,再点击,显示B图表. (1) 引入useState函数: 使用该useState生成一组控制器,返回的值通过toggerCharts和setToggerCharts保存. 前者是一个数组,值为默认显示的图表类型:lineChart,后者是一个函数. 在handleHeaderClick这个事件响应函

如何实现SAP UI5 Web Component React控件的加载效果

假设我使用SAP UI5 Web Component的React控件, 比如柱状图和折线图: 导入useState函数,默认加载状态为false: 每次点击屏幕后,首先将Loading状态使用切换函数setLoading设置成true,这样可以看到控件正在加载的动画效果.2秒钟后,setLoading设置为false,关闭动画效果. 下图这道渐进式显示的横线就是控件加载时的动画效果. 最后把loading变量赋给两个Chart的loading属性: 要获取更多Jerry的原创文章,请关注公众号"

HTML5开发移动web应用——SAP UI5篇(8)

本次对之前学习的SAP UI5框架知识进行简单小结.以及重点部分知识的梳理. 1.在UI5使用过程中,命名空间的概念非常重要. 2.一般的sap组件引用格式例如以下: sap.ui.define([ "sap/ui/core/UIComponent", "sap/ui/model/json/JSONModel", "sap/ui/model/resource/ResourceModel"], function (UIComponent, JSON

HTML5开发移动web应用——SAP UI5篇(7)

SAPUI5中支持利用Component对组件进行封装.想封装一个组件,Component的基本代码例如以下: sap.ui.define([ "sap/ui/core/UIComponent"], function (UIComponent) { "use strict"; return UIComponent.extend("", { init : function () { // call the init function of the

OPEN(SAP) UI5 学习入门系列之二：最佳实践练习之一

这篇博文难产了很久,原来是打算一周更新一篇的,上周原计划写MVC,但是写了一半,发现带入了太多的细节,不太符合这个入门系列的主题. 当我们学习一个新的技能的时候,如果一开始就面对大量的细节,很容易陷入其中而只见树木不见森林,所以最后我想我们还是先按照开发文档的节奏,一起来做UI5的最佳实践练习.在练习中对常用的一些控件以及API有一个直观的感受,如果需要细节的信息再去查文档. 这个最佳实践练习的子系列又会分为若干篇,但是不会完全按照Tutorial里面的章节来分,因为我希望每一篇都是都是一个完整

SAP UI5和微信小程序对比之我见

今天继续由SAP成都研究院著名的菜园子小哥Wang Cong,给大家分享他作为一个SAP前端人员是如何看待SAP UI5和微信小程序的异同点的. 关于Wang Cong种菜的手艺,大家请移步到他以前的文章 SAP成都研究院非典型程序猿,菜园子小哥:当我用UI5诊断工具时我用些什么去观摩,这里不再赘述. 下面是他的正文. 近几年微信小程序发展之势如火如荼,越来越多的用户放弃原生App,转而投入小程序的怀抱,大有"一个微信行天下"的趋势. 面对如此巨大的流量机遇,百度.阿里等公司也纷纷在

HTML5开发移动web应用——SAP UI5篇(9)

之前我们对于app的构建都是基于显示的,现在我们来格式化一下,引入更多的SAP UI5组件概念.这使得APP的一个界面更有层次性,更像是一个手机应用的界面,并且更好地使用SAP UI5中提供的功能.每个不同的层次都有不同的功能. 首先修改App.view.xml文件代码: <mvc:View controllerName="sap.ui.demo.wt.controller.App" xmlns="sap.m" xmlns:mvc="sap.ui.c

OPEN(SAP) UI5 学习入门系列之一：扫盲与热身（上）

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

SAP UI5

接上一篇,上一篇我尝试了部署一个UI5的项目到HCP上,成功访问了,发现去年折腾的时候创建了非常多的Application, 这次全部被我清除了. 这次准备尝试下SAP UI5的View, 研究下是如何工作的. 首先由于创建项目时勾选了创建一个空的view, 因此部分文件和代码已经创建完了: 在index.html中以下代码已经被创建出来了: 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="