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

Question

我在任何地方都找不到如何创建我以后可以在 blossom 模块对话框中使用的自定义字段。 Here 描述了如何从 Vaadin 引擎创建自定义字段。我想知道如何在 blossom 模块中做到这一点？
第二个问题，对话框的样式可以改吗？更改 window 尺寸？在字段等之间添加一些分隔符？当然使用一些 java 代码或模板。

Answer 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 实例配置中

/modules/ui-framework/fieldTypes/你的领域/

定义类：fields.definition.YourFieldDefinition
工厂类：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 对话框中创建自定义字段

Create custom fields in the Magnolia CMS dialogs using Blossom

java

content-management-system

magnolia

关于第一个问题：

关于你的第二个问题：