How to change the background color of button in Footer area - 242

![clipboard1](https://user-images.githubusercontent.com/5669954/32686559-ad310ecc-c6e1-11e7-9191-3ff000189164.png) Opportunity的s3在init的时候有加载custom css的文件 ```javascript jQuery.sap.includeStyleSheet(jQuery.sap.getModulePath("cus.crm.opportunity.css.Opportunity", ".css"), "sap-ui-theme-sap.crm"); ``` 我往这个css文件里面加一个自定义的css class ```css .myAwesomeBtnBackgroundColor { background-color: red; } ``` 之后就找出Target button然后将这个custom css class加载上去… ```javascript var oFooter = this.getView().getController().getPage().getFooter(), oFollowBtn = oFooter.getContentRight()[1]; oFollowBtn.addStyleClass("myAwesomeBtnBackgroundColor"); ``` 我们遇到的问题是改button text的颜色,比如把你们例子中的“follow me”字体改成蓝色。 你们email中的核心思想是找到button然后通过addStyleClass() 来修改button的css 如果我的理解没有错误的话,我已经尝试过了,但是其实修改button的css style并不能改变button text的style。 我有一个button,id是”interactionButton”它的text是“0 Requests”,我要根据不同的情况还改变 button text的颜色。 ![clipboard2](https://user-images.githubusercontent.com/5669954/32686560-ad6613ec-c6e1-11e7-9a29-c191e138a5d7.png) 看我截图黄色highlight部分,目前我们发现只有改” interactionButton-inner”或者“interactionButton-content”的css style才能改text 的颜色,改动button “interactionButton”是不work的 ![clipboard3](https://user-images.githubusercontent.com/5669954/32686561-ad9e5900-c6e1-11e7-83a8-218e48545251.png) 曾经尝试在controller.js 的onAfterRendering方法里面通过拿到this.getView().byId(“interactionButton-inner”)或者this.getView().byId(“interactionButton-content”)来change style, 但其实在onAfterRendering方法里面,interactionButton-inner和interactionButton-content 都还没有被render,所以尝试失败 ![clipboard4](https://user-images.githubusercontent.com/5669954/32686562-add38a76-c6e1-11e7-948a-2b7bd5597d8a.png) 目前我们一个非常ugly的solution如下,直接修改div。。我觉得这样不是个good solution。。。。 ![clipboard5](https://user-images.githubusercontent.com/5669954/32686563-ae0bad66-c6e1-11e7-8863-fee6eac51504.png) ![clipboard6](https://user-images.githubusercontent.com/5669954/32686564-ae41130c-c6e1-11e7-9b14-b2591fcd073b.png) # solution 首先看为什么byId, 传button id进去能够访问到button: ![clipboard7](https://user-images.githubusercontent.com/5669954/32686565-ae7a02fc-c6e1-11e7-8767-9b4929204392.png) ![clipboard8](https://user-images.githubusercontent.com/5669954/32686566-aeaf94ee-c6e1-11e7-82da-9ef90fd5d5f5.png) ![clipboard9](https://user-images.githubusercontent.com/5669954/32686567-aee5ab10-c6e1-11e7-9233-a888953de45c.png) 因此这里有两个维度的东西: 1. Ui5 control object – 通过上图line 307行生成。每个control object在core的this.mElements里拥有一行对应的entry。使用byId时,传入的id必须是ui5 control object的id,不能是native html tag的id。 2. Native html tag. 在AfterRendering之前,button对应的inner div tag在此处被render。其id的naming convention就是line 99行, button本身的id + “-inner”. 但是这个native html tag并不会注册到core的this.mElements去,因此byId() query不出来。 ![clipboard10](https://user-images.githubusercontent.com/5669954/32686568-af1a7ba6-c6e1-11e7-848c-831ff35a0f47.png) 所以再回到你的需求,button的inner div这个实现对于我们application developer是透明的。如果我们要修改text color, 只能通过button 提供的API。 但是API 文档上button只有setText的功能,那我们先看看setText 是怎么被框架实现的? 通过读代码发现和你的实现一致。 ![clipboard11](https://user-images.githubusercontent.com/5669954/32686557-acc4a8f4-c6e1-11e7-925c-d4ce12e2e7ed.png) 因此我们可以得出一个generic的结论: 1. 如果需求希望修改button的属性是UI5 layer的,换句话说属性能在这个button.js里找到,则直接用button reference的API修改 ![clipboard12](https://user-images.githubusercontent.com/5669954/32686558-acfae13a-c6e1-11e7-896b-264c0f7927b8.png) 2. 否则,是native layer的属性,只用通过操作dom 解决。

猜你喜欢

转载自blog.csdn.net/i042416/article/details/92808135
今日推荐