UI5-文档-4.34-Custom Controls

在这一步中，我们将使用自定义控件扩展SAPUI5的功能。我们希望对详细页面上显示的产品进行评级，因此我们使用SAPUI5扩展机制创建了多个标准控件的组合，并添加了一些粘合代码以使它们能够很好地一起工作。这样，我们可以在整个应用程序中重用控件，并将所有相关功能保存在一个模块中。

Preview

 

A custom product rating control is added to the detail page

Coding

You can view and download all files at Walkthrough - Step 34.

 

webapp/control/ProductRating.js (New)

sap.ui.define([
        "sap/ui/core/Control"
],function(Control){
        "use strict";
        returnControl.extend("sap.ui.demo.walkthrough.control.ProductRating",{
               metadata :{
               },
               init :function(){
               },
               renderer :function(oRM, oControl){
               }
        });
});

我们创建一个新的文件夹控件和一个ProductRating.js文件，它会控制我们的新控件。与我们的控制器和视图一样，自定义控件继承了SAPUI5基本对象的公共控件功能，对于控件来说，这是通过扩展基本类sap.ui.core.Control来完成的。

自定义控件是小的可重用组件，可以非常容易地在应用程序中创建。由于它们的性质，它们有时也被称为“记事本”或“动态”控件。自定义控件是一个JavaScript对象，它有两个特殊部分(元数据和呈现器)和许多实现控件功能的方法。

元数据部分定义数据结构，从而定义控件的API。通过这些关于控件SAPUI5的属性、事件和聚合的元信息，SAPUI5会自动创建setter和getter方法以及其他可以在应用程序中调用的方便函数。

渲染器定义HTML结构，当控件在视图中实例化时，该HTML结构将被添加到应用程序的DOM树中。它最初通常由SAPUI5的核心调用，并在控件的属性发生更改时调用。呈现函数的参数oRM是SAPUI5呈现管理器，可用于将字符串和控制属性写入HTML页面。

init方法是一个特殊的函数，每当控件实例化时，SAPUI5核心就会调用它。可以使用它来设置控件并准备要显示的内容。

请注意：控件总是扩展sap.ui.core。控制和呈现自己。您还可以扩展sa .ui.core。元素或sap.ui.base。如果希望重用SAPUI5的生命周期特性，包括未呈现的对象的数据绑定，可以直接使用ManagedObject。有关控件继承层次结构的更多信息，请参阅API参考。

webapp/control/ProductRating.js

sap.ui.define([
        "sap/ui/core/Control",
        "sap/m/RatingIndicator",
        "sap/m/Label",
        "sap/m/Button"
 
], function (Control,RatingIndicator,Label,Button) {
        "use strict";
        return Control.extend("sap.ui.demo.walkthrough.control.ProductRating", {
               metadata : {
                       properties :{
                               value:{type :"float", defaultValue :0}
                       },
                       aggregations :{
                               _rating :{type :"sap.m.RatingIndicator", multiple:false, visibility :"hidden"},
                               _label :{type :"sap.m.Label", multiple:false, visibility :"hidden"},
                               _button :{type :"sap.m.Button", multiple:false, visibility :"hidden"}
                       },
                       events :{
                               change :{
                                      parameters :{
                                              value :{type :"int"}
                                      }
                               }
                       }
               },
               init :function(){
                       this.setAggregation("_rating",newRatingIndicator({
                               value:this.getValue(),
                               iconSize:"2rem",
                               visualMode:"Half",
                               liveChange:this._onRate.bind(this)
                       }));
                       this.setAggregation("_label",newLabel({
                               text:"{i18n>productRatingLabelInitial}"
                       }).addStyleClass("sapUiSmallMargin"));
                       this.setAggregation("_button",newButton({
                               text:"{i18n>productRatingButton}",
                               press:this._onSubmit.bind(this)
                       }).addStyleClass("sapUiTinyMarginTopBottom"));
               },
 
               setValue:function(fValue){
                       this.setProperty("value", fValue,true);
                       this.getAggregation("_rating").setValue(fValue);
               },
 
               reset:function(){
                       var oResourceBundle =this.getModel("i18n").getResourceBundle();
 
                       this.setValue(0);
                       this.getAggregation("_label").setDesign("Standard");
                       this.getAggregation("_rating").setEnabled(true);
                       this.getAggregation("_label").setText(oResourceBundle.getText("productRatingLabelInitial"));
                       this.getAggregation("_button").setEnabled(true);
               },
 
               _onRate :function(oEvent){
                       var oRessourceBundle =this.getModel("i18n").getResourceBundle();
                       var fValue = oEvent.getParameter("value");
 
                       this.setProperty("value", fValue,true);
 
                       this.getAggregation("_label").setText(oRessourceBundle.getText("productRatingLabelIndicator",[fValue, oEvent.getSource().getMaxValue()]));
                       this.getAggregation("_label").setDesign("Bold");
               },
 
               _onSubmit :function(oEvent){
                       var oResourceBundle =this.getModel("i18n").getResourceBundle();
 
                       this.getAggregation("_rating").setEnabled(false);
                       this.getAggregation("_label").setText(oResourceBundle.getText("productRatingLabelFinal"));
                       this.getAggregation("_button").setEnabled(false);
                       this.fireEvent("change",{
                               value:this.getValue()
                       });
               },
               renderer : function (oRM, oControl) {
                       oRM.write("<div");
                       oRM.writeControlData(oControl);
                       oRM.addClass("myAppDemoWTProductRating");
                       oRM.writeClasses();
                       oRM.write(">");
                       oRM.renderControl(oControl.getAggregation("_rating"));
                       oRM.renderControl(oControl.getAggregation("_label"));
                       oRM.renderControl(oControl.getAggregation("_button"));
                       oRM.write("</div>");
               }
        });
});

 现在，我们使用所需的自定义功能增强了新的自定义控件。在我们的例子中，我们希望创建交互式产品评级，因此我们定义了一个值，并使用三个内部控件，这些控件由我们的控件自动更新显示。评级指示器控件用于收集用户对产品的输入，标签显示进一步的信息，按钮将评级提交给应用程序存储。

因此，在元数据部分，我们定义了几个在实现中使用的属性:

▪Properties

       ▪Value

　　我们定义一个控件属性值，该属性值将保存用户在评级中选择的值。该属性的Getter和setter函数将自动创建，如果愿意，还可以将其绑定到XML视图中的数据模型字段。

▪Aggregations

　　正如第一段所述，我们需要三个内部控制来实现我们的评级功能。因此，我们通过将可见性属性设置为hidden来创建三个“隐藏聚合”。这种方式, 我们可以使用视图上设置的模型，也可以在内部控件中使用，SAPUI5将负责生命周期管理，并在不再需要控件时销毁它们。聚合也可以用于保存控件数组，但是我们只想在每个聚合中有一个控件，因此需要通过将属性multiple设置为false来调整基数。

　　_rating: A sap.m.RatingIndicator control for user input

　　_label: A sap.m.Label to display additional information

　　_button: A sap.m.Button to submit the rating

　　请注意：您可以为控件定义聚合和关联。区别在于父控件与相关控件之间的关系:

▪aggregation：

　　聚合是一种强关系，它还管理相关控件的生命周期，例如，当父控件被销毁时，相关控件也会被销毁。而且，控件只能分配给一个聚合，如果它被分配给第二个聚合，它将自动从前一个聚合中删除。

▪association：

　　关联是一种弱关系，它不管理生命周期，并且可以定义多次。为了明确区别，关联只存储ID，而聚合存储对控件的直接引用。在本例中，我们不指定关联，因为我们希望内部控制由父控件管理。

▪Events

       ▪Change

　　我们指定一个更改事件，当提交评级时控件将触发该更改事件。它包含当前值作为事件参数。应用程序可以注册到这个事件并处理类似于“常规”SAPUI5控件的结果，这些控件实际上构建得类似于自定义控件。

 

　　在由SAPUI5在实例化控件的新实例时自动调用的init函数中，我们设置了内部控件。我们通过调用继承自sap.ui.core.Control的框架方法setAggregation来实例化这三个控件并将它们存储在内部聚合中。我们传递上面指定的内部聚合的名称和新的控件实例。我们指定了一些控件属性，以使自定义控件看起来更好，并将liveChange事件注册到评级，并将press事件注册到按钮。标签和按钮的初始文本引用自我们的i18n模型。

　　现在让我们忽略其他内部帮助函数和事件处理程序，定义我们的渲染器。在SAPUI5呈现管理器和作为引用传递的控件实例的帮助下，我们现在可以呈现控件的HTML结构。我们将外部<div>标记的开头呈现为<div，并调用助手方法writeControlData来呈现div标记内控件的ID和其他基本属性。接下来，我们添加一个自定义CSS类，以便稍后在CSS文件中定义自定义控件的样式规则。在视图中添加的这个CSS类和其他类，然后通过调用renderer实例上的writeClasses来呈现。然后关闭周围的div标记，并通过将内部聚合的内容传递给render managers renderControl函数呈现三个内部控件。这将调用控件的呈现程序并将它们的HTML添加到页面中。最后，关闭周围的<div>标记。

　　setValue是一个覆盖的setter。SAPUI5将生成一个setter，在控制器中调用或在XML视图中定义时更新属性值，但我们还需要更新隐藏聚合中的内部评级控制，以正确反映状态。此外，我们还可以通过调用setProperty方法来更新以true作为第三个参数的控件属性，从而跳过在控件上更改属性时通常触发的SAPUI5的重新发布。

　　现在我们为内部评级控制定义事件处理程序。每次用户更改评级时都会调用它。可以从sap.m.RatingIndicator 的事件参数值读取评级控制的当前值。通过调用覆盖setter来更新控件状态的值，然后更新评级旁边的标签，向用户显示当前选择的值，并显示最大值。带有占位符值的字符串是从自动分配给控件的i18n模型读取的。

 

接下来，我们拥有提交评级的评级按钮的press处理程序。我们假设对产品进行评级是一次性操作，首先禁用评级和按钮，这样用户就不允许提交其他评级。我们还更新标签以显示“感谢您的评级!”消息，然后触发控件的更改事件，并将当前值作为参数传入，以便侦听此事件的应用程序可以对评级交互作出反应。

我们定义reset方法，以便能够将UI上控件的状态还原为其初始状态，以便用户可以再次提交评级。

 

webapp/view/Detail.view.xml

<mvc:View
        controllerName="sap.ui.demo.walkthrough.controller.Detail"
        xmlns="sap.m"
        xmlns:mvc="sap.ui.core.mvc"
        xmlns:wt="sap.ui.demo.walkthrough.control">
        <Page
               title="{i18n>detailPageTitle}"
               showNavButton="true"
               navButtonPress="onNavBack">
               <ObjectHeader
                       intro="{invoice>ShipperName}"
                       title="{invoice>ProductName}"/>
               <wt:ProductRatingid="rating"class="sapUiSmallMarginBeginEnd"change="onRatingChange"/>
        </Page>
</mvc:View>

在detail视图上定义了一个新的名称空间wt，以便我们可以在视图中轻松地引用自定义控件。然后，我们将ProductRating控件的一个实例添加到详细信息页面，并为更改事件注册一个事件处理程序。为了获得合适的布局，我们还添加了一个margin样式类。

webapp/controller/Detail.controller.js

sap.ui.define([
        "sap/ui/core/mvc/Controller",
        "sap/ui/core/routing/History",
        "sap/m/MessageToast"
], function (Controller, History,MessageToast) {
        use strict;
        return Controller.extend(sap.ui.demo.walkthrough.controller.Detail, {
               …
               _onObjectMatched: function (oEvent) {
                       this.byId("rating").reset();
                       this.getView().bindElement({
                               path: "/" + oEvent.getParameter("arguments").invoicePath,
                               model: "invoice"
                       });
               },
               onNavBack: function () {
                       …
               },
               onRatingChange :function(oEvent){
                       var fValue = oEvent.getParameter("value");
                       var oResourceBundle =this.getView().getModel("i18n").getResourceBundle();
                       MessageToast.show(oResourceBundle.getText("ratingConfirmation",[fValue]));
               }
        });
});

在onobjectmatchprivate方法中，我们调用reset方法，以便在显示不同项目的详细信息视图时提交另一个评级。在Detail控制器中，我们将依赖项加载到sap.m。MessageToast，因为我们将简单地显示一条消息，而不是将评级发送到后端，以保持示例的简单性。事件处理程序onRatingChange读取在提交评级时触发的自定义更改事件的值。然后，我们在MessageToast控件中显示带有值的确认消息。

 

webapp/css/style.css

.myAppDemoWTmyCustomButton.sapMBtn {
        margin-right: 0.125rem;
}
.myAppDemoWTmyCustomText {
        font-weight: bold;
}
/*  ProductRating */
.myAppDemoWTProductRating {
        padding:0.75rem;
}
.myAppDemoWTProductRating .sapMRI {
        vertical-align: initial;
}

我们也可以在渲染器中使用更多的HTML来实现这一点，但这是最简单的方法，它只应用于我们的自定义控件中。但是，请注意，自定义控件在您的应用程序中，可能需要在SAPUI5未来版本的内部控件更改时进行调整。要布局控件，我们向根类添加一些填充，以便在三个内部控件周围留出一些空间，并覆盖RatingIndicator控件的对齐，以便它与标签和按钮对齐在一行。

webapp/i18n/i18n.properties

…
# Detail Page
detailPageTitle=Walkthrough - Details
ratingConfirmation=You have rated this product with {0} stars
 
# Product Rating
productRatingLabelInitial=Please rate this product
productRatingLabelIndicator=Your rating: {0} out of {1}
productRatingLabelFinal=Thank you for your rating!
productRatingButton=Rate

Conventions资源包由我们在自定义控件中引用的确认消息和字符串扩展。我们现在可以用全新的控件在详细页面上对产品进行评级。

将自定义控件放到应用程序的控件文件夹中。

Parent topic: Walkthrough

Previous: Step 33: Routing Back and History

Next: Step 35: Responsiveness

Related Information

Developing Controls

Defining the Control Metadata

API Reference: sap.m.RatingIndicator

Samples: sap.m.RatingIndicator

API Reference: sap.m.Label

Samples: sap.m.Label

API Reference: sap.m.Button

Samples: sap.m.Button

API Reference: sap.ui.core.Control

API Reference: sap.ui.core.Element

API Reference: sap.ui.base.ManagedObject