[英]Spec - how to change the color (or background color) of a presenter
I want to change the background color of a SpTextInputFieldPresenter
我想更改
SpTextInputFieldPresenter
的背景颜色
eg to provide a visual feedback of the input, I want to react to whenTextChangedDo:
and change the background color of the field to show if the input is correct or wrong.例如,为了提供输入的视觉反馈,我想对
whenTextChangedDo:
做出反应,并更改字段的背景颜色以显示输入是正确还是错误。 I know this is not the best for everybody, but I still want to try it.我知道这对每个人来说都不是最好的,但我仍然想尝试一下。
How can I do without hacking?没有黑客怎么办?
Spec previews the use of styles to change (up to a point) how a component looks. Spec 预览了使用 styles 来更改(在一定程度上)组件的外观。 Styles are added to an application (an instance of
SpApplication
or child of it) and can be used by any presenter that is part of the application. Styles 被添加到应用程序(
SpApplication
的一个实例或它的子级),并且可以由作为应用程序一部分的任何演示者使用。
Styles can be seen as CSS stylesheets, and in the case of Gtk they actually are CSS stylesheets, but in the case of Morphic backend they have a complete different implementation (you can see all properties you can define in the SpPropertyStyle
hierarchy. Styles can be seen as CSS stylesheets, and in the case of Gtk they actually are CSS stylesheets, but in the case of Morphic backend they have a complete different implementation (you can see all properties you can define in the
SpPropertyStyle
hierarchy.
The following code will show how to下面的代码将展示如何
app := SpApplication new.
"If using Morphic"
app addStyleSheetFromString: '.application [
.red [ Draw { #color: #red } ],
.green [ Draw { #color: #green } ]
]'.
"If using GTK (you need to choose one, both options are not possible at the same time)"
app useBackend: #Gtk.
app addCSSProviderFromString: '
.red { background-color: red }
.green { background-color: green }
'.
presenter := SpPresenter new.
presenter application: app.
presenter layout: (SpBoxLayout newTopToBottom
add: (textPresenter := presenter newTextInput) expand: false;
addLast: (SpBoxLayout newLeftToRight
add: (presenter newButton
label: 'Red';
action: [ textPresenter removeStyle: 'green'; addStyle: 'red' ];
yourself);
add: (presenter newButton
label: 'Green';
action: [ textPresenter removeStyle: 'red'; addStyle: 'green' ];
yourself);
yourself)
expand: false;
yourself).
presenter asWindow
title: 'Example applying styles';
open
This will produce (with the Gtk3 backend) this output:这将产生(使用 Gtk3 后端)这个 output:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.