UI5-技术篇-SAPUI5创建自定义控件
转载：https://www.nabisoft.com/tutorials/sapui5/creating-custom-controls-in-sapui5
https://sapui5.hana.ondemand.com/#/topic/8dcab0011d274051808f959800cabf9f
1.在SAPUI5中创建自定义控件并加载显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Creating Custom Controls in SAPUI5 Demo</title> <script id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/1.44.19/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"></script> <!-- XMLView (usually in a separate file) -->
<script id="myXmlView" type="ui5/xmlview">
<mvc:View
controllerName="nabisoft.my.Controller"
xmlns:mvc="sap.ui.core.mvc"
xmlns="nabisoft.bookstore.controls"> <!-- use our custom control, implementation see below -->
<!-- works w/o namespace prefix because the default is set to "nabisoft.bookstore.controls" -->
<Book
id="myBook"
height="auto"
title="My Book in XMLView"
author="My Author"
description="This is a Book about..."
price="11.99"
currencyCode="USD"
comments="Great book!,A must have!,I liked chapter 6 the most!"
numberOfPages="349"
coverPictureUrl="https://lorempixel.com/150/200/"
expressDelivery="true"
buy="onBuy" /> </mvc:View>
</script> <script>
sap.ui.getCore().attachInit(function () {
"use strict"; //### custom currency datatype (usually in a separate file) ###
/**
* A string type that represents currency codes that are currently supported
* by our little application. Currently only "USD" and "EUR" is supported
*/
sap.ui.define("nabisoft/bookstore/datatypes/CurrencyCode",[
"sap/ui/base/DataType"
], function(DataType) {
"use strict"; return DataType.createType(
"nabisoft.bookstore.datatypes.CurrencyCode",
{
isValid : function(sValue) {
return sValue === "EUR" || sValue === "USD";
},
},
DataType.getType("string")
);
}, true); //### Custom Control (usually in separate files) ###
sap.ui.define("nabisoft/bookstore/controls/Book",[ // remove the first parameter in "real" apps
"sap/ui/core/Control",
"sap/m/Button",
"sap/m/Image",
"sap/m/Link",
"sap/m/Text"
], function(Control, Button, Image, Link, Text) {
"use strict"; var Book = Control.extend("nabisoft.bookstore.controls.Book", {
// the control API:
metadata : {
properties : {
/* Business Object properties */
title : {type : "string"},
author : {type : "string"},
description : {type : "string"},
price : {type : "float"},
currencyCode : {type : "nabisoft.bookstore.datatypes.CurrencyCode", defaultValue : "USD"}, //BUG defaultValue is not validated
comments : {type : "string[]", defaultValue: []},
numberOfPages : {type : "int"},
coverPictureUrl : {type : "string"}, // usueally you would use "sap.ui.core.URI" for type
expressDelivery : {type : "boolean", defaultValue : false}, /* other (configuration) properties */
width : {type : "sap.ui.core.CSSSize", defaultValue : "400px"},
height : {type : "sap.ui.core.CSSSize", defaultValue : "400px"}, // only for demonstration
someObject : {type : "object"},
whatever : {type : "any"}
}, aggregations : {
_buyButton : {type : "sap.m.Button", multiple : false, visibility: "hidden"},
coverPicture : {type : "sap.m.Image", multiple : false, visibility: "public"}
}, associations: {
relatedBooks : {type : "nabisoft.bookstore.controls.Book", multiple : true, singularName: "relatedBook"}
}, events : {
buy : {enablePreventDefault : true}
}
}, // be careful with this, better avoid it!
// See why at https://www.nabisoft.com/tutorials/sapui5/why-initializing-properties-on-prototypes-can-have-nasty-side-effects-in-sapui5
//_oLink : null, init : function(){
var oControl = this, oBuyBtn, oCoverPic; this._oLink = new Link();
//do something with the link
//... //create a button for buying that book
oBuyBtn = new Button({
text: "Buy this book",
press: function (oEvent) {
oControl.fireBuy({
someData : "some data I want to pass along with the event object"
});
}
});
this.setAggregation("_buyButton", oBuyBtn); //create and initialize the cover picture, but we don't have a src yet
oCoverPic = new Image({
decorative: true,
width: "150px",
height: "200px",
tooltip: "Cover of book"
});
oCoverPic.addStyleClass("nsBookCvrPic");
this.setCoverPicture(oCoverPic); }, onAfterRendering: function (){
//called after instance has been rendered (it's in the DOM)
}, _somePrivateMethod : function () { /*do someting...*/ }, somePublicMethod : function () { /*do someting...*/ }, renderer : { render : function(oRm, oControl) { oRm.write("<div");
oRm.writeControlData(oControl); oRm.addClass("nsBook");
oRm.writeClasses(); oRm.addStyle("width", oControl.getWidth());
oRm.addStyle("height", oControl.getHeight());
oRm.writeStyles(); oRm.write(">"); //content: oRm.write("<div>");
oRm.renderControl(oControl.getCoverPicture());
oRm.write("</div>"); //we don't do any fancy stuff because we are lazy ;-)
//oRm.writeEscaped("<div>escape this</div>");
oRm.write("<div>");
oRm.write("<div>Title : "+oControl.getTitle()+"</div>");
oRm.write("<div>Author : "+oControl.getAuthor()+"</div>");
oRm.write("<div>Description : "+oControl.getDescription()+"</div>");
oRm.write("<div>Price : "+oControl.getPrice().toFixed(2)+" "+oControl.getCurrencyCode() +"</div>");
oRm.write("<div>Comments : <br>"+oControl.getComments().join("<br>")+"</div>");
oRm.write("<div>Pages : "+oControl.getNumberOfPages()+"</div>");
oRm.write("<div>Express Delivery : "+oControl.getExpressDelivery()+"</div>");
oRm.write("<div>");
oRm.renderControl(oControl.getAggregation("_buyButton"));
oRm.write("</div>");
oRm.write("</div>"); oRm.write("</div>"); // close the nsBook div
}
}
}); //overwrite setter
nabisoft.bookstore.controls.Book.prototype.setCoverPictureUrl = function (sVal) {
if (sVal) {
this.setProperty("coverPictureUrl", sVal, /*suppressInvalidate*/ true); //do not re-render
this.getCoverPicture().setSrc(sVal);
}
}; nabisoft.bookstore.controls.Book.prototype.exit = function () {
/* release resources that are not released by the SAPUI5 framework */
if (this._oLink){
this._oLink.destroy();
delete this._oLink;
}
}; return Book; }); //### Controller (usually in a separate file) ###
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict"; return Controller.extend("nabisoft.my.Controller", {
onInit : function () {
var oBook = this.byId("myBook");
oBook.addEventDelegate({
onAfterRendering: function(){
//called after the instance has been rendered (it's in the DOM)
}
});
},
onBuy : function(oEvent){
var oBook = oEvent.getSource();
alert("Buy event received: '" + oBook.getTitle() + "' by " + oBook.getAuthor());
},
onAfterRendering: function(){
//called after the view has been rendered (it's in the DOM)
}
});
}); //### place the XMLView somewhere into DOM (usually in a separate file) ###
sap.ui.xmlview({
viewContent : jQuery("#myXmlView").html()
}).placeAt("contentXMLView"); //### or we create an instance via JavaScript and place it into the DOM (XMLView is preferred in real apps)
// in a perfect world we would use dependency injection, but this is just an imperfect tutorial :-)
var oBook = new nabisoft.bookstore.controls.Book({
height:"auto",
title: "My Book via JavaScript",
author: "My Author",
description: "This is a Book about...",
price: 49.90,
currencyCode: "EUR",
comments: ["Great book!", "A must have!", "I liked chapter 6 the most!"],
numberOfPages: 293,
coverPictureUrl: "https://lorempixel.com/150/200/",
expressDelivery: true,
relatedBooks: [],
buy : function(oEvent){
var oBook = oEvent.getSource();
alert("Buy event received: '" + oBook.getTitle() + "' by " + oBook.getAuthor());
}
});
oBook.addEventDelegate({
onAfterRendering: function(){
//called after the instance has been rendered (it's in the DOM)
}
});
oBook.placeAt("contentPlayinJs");
});
</script> </head> <body class="sapUiBody" role="application">
<div id="contentXMLView" style="padding:10px"></div>
<hr style="margin:20px;">
<div id="contentPlayinJs" style="padding:10px"></div>
</body> </html>
2.页面测试
UI5-技术篇-SAPUI5创建自定义控件的更多相关文章
- [翻译]使用Swift在Xcode中创建自定义控件
使用Swift在Xcode中创建自定义控件 原文 IBDesignable and IBInspectable With IBDesignable and IBInspectable, develop ...
- Android学习之基础知识五—创建自定义控件
下面是控件和布局的继承关系: 从上面我们看到: 1.所有控件都是直接或间接继承View,所有的布局都是直接或间接继承ViewGroup 2.View是Android中最基本的UI组件,各种组件其实就是 ...
- WPF 创建自定义控件及自定义事件
1 创建自定义控件及自定义事件 /// <summary> /// 演示用的自定义控件 /// </summary> public class ExtButton : Butt ...
- Andriod - 创建自定义控件
控件和布局的继承结构: 可以看到,我们所用的所有控件都是直接或间接继承自 View的,所用的所有布局都是直接或间接继承自 ViewGroup 的.View 是 Android 中一种最基本的 UI 组 ...
- WPF创建自定义控件并运用
此项目源码:https://github.com/lizhiqiang0204/WpfCustomControlLibrary1 首先创建自定义控件库项目 项目名称命名为:WpfCustomContr ...
- Android中创建自定义控件
1.创建一个TitleLayout继承LinearLayout: //创建自定义控件 public class TitleLayout extends LinearLayout { private f ...
- android#嵌入式布局并创建自定义控件
一.如何在android中嵌入布局文件: 新建一个布局title.xml,该文件为公共文件 <LinearLayout xmlns:android="http://schemas.an ...
- Android Studio 之创建自定义控件
•前言 常用控件和布局的继承结构,如下图所示: 可以看到,我们所用的所有的控件都是直接或者间接的继承自View的: 所用的所有布局都是直接或者间接继承自ViewGroup的: View 是 Andro ...
- Android开发系列之创建自定义控件
Android开发过程中我们经常需要定义自己的控件,一方面基于复用的角度考虑,一方面也是基于逻辑处理思维的角度考虑.在这篇博客里面,笔者想要介绍.总结几种Android自定义控件的方法,如果有什么不对 ...
随机推荐
- 记一次腾讯云MySQL数据库数据回滚
如题,因为操作人员的问题,需要对数据库数据进行回滚. 可以看到,设置了7天自动备份,且是物理冷备. 什么是物理冷备?科普一下: (1)热备:在数据库运行时,直接进行备份,对运行的数据库没有影响.(2) ...
- Spring cloud微服务安全实战-5-6实现授权码认证流程（2）
授权服务器,返回给我一个授权码,这里我只需要把授权传回去就可以了.来证明我是这个服务器. URI的地址传和第一次的地址一样的,认证服务器会比,第一次跳转的请求和第二次申请令牌的请求redirect_u ...
- 全面系统Python3入门+进阶_汇总
https://coding.imooc.com/class/136.html#Anchor 全面系统Python3入门+进阶-1-1 导学 全面系统Python3入门+进阶-1-2 Python的特 ...
- Qt编写气体安全管理系统12-设备双击
一.前言 在编写这个项目的过程中,有个得到客户夸赞的小功能就是,设备按钮双击,在离线的时候是双击重连设备,在线的时候是双击弹出具体详情界面,回控设备,参数设置等.在modbus设备通信过程中,设定了超 ...
- C# Web Service 不使用服务引用直接调用方法（转）
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u011508145/article/details/79496214 using ...
- Swift4.0复习协议
1.协议的定义: /// 定义一个协议MyProt protocol MyProt { /// 声明了一个实例方法foo, /// 其类型为:() -> Void func foo() ...
- 使用sql语句创建和删除约束示例代码
使用sql语句创建和删除约束 约束类型 主键约束(Primary Key constraint) --:要求主键列数据唯一,并且不允许为空. 唯一约束(Unique constraint) --: ...
- Jmeter学习——测试计划元件【转】
1. Test Plan (测试计划) 用来描述一个性能测试,包含与本次性能测试所有相关的功能.也就说本次性能测试的所有内容是于基于一个计划的. 下面看一下一个计划下面都有哪些主要的功能模块(右键单击 ...
- web端自动化——selenium Page Object设计模式
Page Object设计模式的优点如下: ① 减少代码的重复. ② 提高测试用例的可读性. ③ 提高测试用例的可维护性,特别是针对UI频繁变化的项目. 当为Web页面编写测试时,需 ...
- 2019.12.4 Hystix熔断&Feign进行远程调用&Zuul
0.学习目标 会配置Hystix熔断 会使用Feign进行远程调用 能独立搭建Zuul网关 能编写Zuul的过滤器 1.Hystrix 1.1.简介 Hystrix,英文意思是豪猪,全身是刺,看起来就 ...