使用 Blossom 在 Magnolia CMS 对话框中创建自定义字段

Posted 2023-02-16

【中文标题】使用 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