使用 Blossom 在 Magnolia CMS 对话框中创建自定义字段
Posted
技术标签:
【中文标题】使用 Blossom 在 Magnolia CMS 对话框中创建自定义字段【英文标题】:Create custom fields in the Magnolia CMS dialogs using Blossom 【发布时间】:2015-04-08 21:17:20 【问题描述】:我在任何地方都找不到如何创建以后可以在开花模块对话框中使用的自定义字段。 Here 描述了如何从 Vaadin 引擎制作自定义字段。我想知道如何在开花模块中做到这一点?
第二个问题是,可以改变对话框的样式吗?改变窗口大小?在字段之间添加一些分隔符等?当然使用一些 java 代码或模板。
【问题讨论】:
【参考方案1】:关于第一个问题:
您可以通过扩展 CustomField 来做到这一点...
您的结构可能如下所示:
- fields
|- builder
| |- YourFieldBuilder
|
|- definition
| |- YourFieldDefinition
|
|- factory
| |- YourFieldFactory
|
|- YourField
类看起来像:
YourField.java
package fields;
import com.vaadin.data.Property;
import com.vaadin.data.util.converter.Converter;
import com.vaadin.ui.Component;
import com.vaadin.ui.CustomField;
import com.vaadin.ui.TextField;
import fields.definition.YourFieldDefinition;
import info.magnolia.objectfactory.ComponentProvider;
public class YourField extends CustomField<String> // String is the type your component will work with
private final ComponentProvider componentProvider;
private SliderFieldDefinition definition;
private TextField textField = new TextField();
public YourField(YourFieldDefinition yourFieldDefinition, ComponentProvider componentProvider)
this.definition = yourFieldDefinition;
this.componentProvider = componentProvider;
setImmediate(true);
@Override
protected Component initContent()
if (textField.getValue() == null)
textField.setValue(definition.getTextValue());
textField.setWidth("100%");
return textField;
@Override
public Class<String> getType() // Again the type your component will work with
return String.class;
@Override
public String getValue() // Again the type your component will work with
return textField.getValue();
@Override
public void setValue(String newValue) throws ReadOnlyException, Converter.ConversionException // Again the type your component will work with
textField.setValue(newValue);
/**
* Set propertyDatasource.
* If the translator is not null, set it as datasource.
*/
@Override
@SuppressWarnings("rawtypes")
public void setPropertyDataSource(Property newDataSource)
textField.setPropertyDataSource(newDataSource);
super.setPropertyDataSource(newDataSource);
@Override
@SuppressWarnings("rawtypes")
public Property getPropertyDataSource()
return textField.getPropertyDataSource();
YourFieldDefinition.java
package fields.definition;
import info.magnolia.ui.form.field.definition.ConfiguredFieldDefinition;
public class YourFieldDefinition extends ConfiguredFieldDefinition
String text = "";
public String getTextValue()
return text;
public void setTextValue(String text)
this.text = text;
YourFieldFactory.java
package fields.factory;
import com.vaadin.data.Item;
import com.vaadin.ui.Field;
import fields.YourField;
import fields.definition.YourFieldDefinition;
import info.magnolia.objectfactory.ComponentProvider;
import info.magnolia.ui.api.app.AppController;
import info.magnolia.ui.api.context.UiContext;
import info.magnolia.ui.api.i18n.I18NAuthoringSupport;
import info.magnolia.ui.form.field.factory.AbstractFieldFactory;
import javax.inject.Inject;
public class YourFieldFactory extends AbstractFieldFactory<YourFieldDefinition, String> // String is the type your component will work with
private YourField yourField;
private final AppController appController;
private final UiContext uiContext;
private ComponentProvider componentProvider;
@Inject
public YourFieldFactory(YourFieldDefinition definition, Item relatedFieldItem, UiContext uiContext, I18NAuthoringSupport i18nAuthoringSupport, AppController appController, ComponentProvider componentProvider)
super(definition, relatedFieldItem, uiContext, i18nAuthoringSupport);
this.appController = appController;
this.uiContext = uiContext;
this.componentProvider = componentProvider;
@Override
public void setComponentProvider(ComponentProvider componentProvider)
super.setComponentProvider(componentProvider);
this.componentProvider = componentProvider;
@Override
protected Field<String> createFieldComponent() // Again: Your type
yourField = new YourField(definition, componentProvider);
return yourField;
YourFieldBuilder.java
package fields.builder;
import fields.definition.YourFieldDefinition;
import info.magnolia.ui.form.config.AbstractFieldBuilder;
import info.magnolia.ui.form.config.GenericValidatorBuilder;
import info.magnolia.ui.form.field.transformer.Transformer;
import info.magnolia.ui.form.validator.definition.ConfiguredFieldValidatorDefinition;
public class YourFieldBuilder extends AbstractFieldBuilder
private YourFieldDefinition definition = new YourFieldDefinition();
public YourFieldBuilder(String name)
definition().setName(name);
@Override
public YourFieldDefinition definition()
return definition;
public YourFieldBuilder setTextValue(String text)
definition().setTextValue(text);
return this;
// This part is from the LinkFieldBuilder-class
// Overrides for methods in parent class changing return type to allow method chaining
@Override
public YourFieldBuilder label(String label)
return (YourFieldBuilder) super.label(label);
@Override
public YourFieldBuilder i18nBasename(String i18nBasename)
return (YourFieldBuilder) super.i18nBasename(i18nBasename);
@Override
public YourFieldBuilder i18n(boolean i18n)
return (YourFieldBuilder) super.i18n(i18n);
@Override
public YourFieldBuilder i18n()
return (YourFieldBuilder) super.i18n();
@Override
public YourFieldBuilder description(String description)
return (YourFieldBuilder) super.description(description);
@Override
public YourFieldBuilder type(String type)
return (YourFieldBuilder) super.type(type);
@Override
public YourFieldBuilder required(boolean required)
return (YourFieldBuilder) super.required(required);
@Override
public YourFieldBuilder required()
return (YourFieldBuilder) super.required();
@Override
public YourFieldBuilder requiredErrorMessage(String requiredErrorMessage)
return (YourFieldBuilder) super.requiredErrorMessage(requiredErrorMessage);
@Override
public YourFieldBuilder readOnly(boolean readOnly)
return (YourFieldBuilder) super.readOnly(readOnly);
@Override
public YourFieldBuilder readOnly()
return (YourFieldBuilder) super.readOnly();
@Override
public YourFieldBuilder defaultValue(String defaultValue)
return (YourFieldBuilder) super.defaultValue(defaultValue);
@Override
public YourFieldBuilder styleName(String styleName)
return (YourFieldBuilder) super.styleName(styleName);
@Override
public YourFieldBuilder validator(ConfiguredFieldValidatorDefinition validatorDefinition)
return (YourFieldBuilder) super.validator(validatorDefinition);
@Override
public YourFieldBuilder validator(GenericValidatorBuilder validatorBuilder)
return (YourFieldBuilder) super.validator(validatorBuilder);
@Override
public YourFieldBuilder transformerClass(Class<? extends Transformer<?>> transformerClass)
return (YourFieldBuilder) super.transformerClass(transformerClass);
之后,您必须将定义添加到 magnolia-instance 的配置中
/modules/ui-framework/fieldTypes/yourField/
definitionClass:fields.definition.YourFieldDefinition factoryClass:fields.factory.YourFieldFactory现在你可以像这样使用它了:
new YourFieldBuilder("name").label("label").setTextValue("foobar").defaultValue("");
关于你的第二个问题:
您可以使用自定义 Vaadin 主题将自己的样式添加到 magnolia。但是,您必须完全替换默认主题。这仅适用于您的自定义应用程序,对整个 magnolia 而言并非易事。您必须更改和覆盖 admincentral-theme 才能更改这些值。
手册位于此处: https://documentation.magnolia-cms.com/display/DOCS/App+theme
【讨论】:
以上是关于使用 Blossom 在 Magnolia CMS 对话框中创建自定义字段的主要内容,如果未能解决你的问题,请参考以下文章
Magnolia CMS 中的 RichText 正在更改 HTML 文本
从另一个 Magnolia 模块访问 Spring 服务(不使用 Spring Blossom)
Magnolia Blossom : 两个页面共享同一个区域