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

时间:2015-04-08 21:17:20

标签: java content-management-system magnolia

  1. 我无法在任何地方找到如何创建自定义字段的方法,以后我可以在开花模块对话框中使用。 Here描述了如何从Vaadin引擎制作自定义字段。我想知道如何在开花模块中做到这一点?

  2. 第二个问题是,是否可以更改对话框的样式?改变窗口大小?在字段等之间添加一些分隔符?当然使用一些java代码或模板。

1 个答案:

答案 0 :(得分: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的配置中

/模块/ UI的框架/域类型/的 yourField /

  • definitionClass:fields.definition.YourFieldDefinition
  • factoryClass:fields.factory.YourFieldFactory

现在您可以像这样使用它:

new YourFieldBuilder("name").label("label").setTextValue("foobar").defaultValue("");

关于你的第二个问题:

您可以使用自定义Vaadin主题将自己的样式添加到玉兰花。但是,您必须完全替换default-theme。这仅适用于您的自定义应用程序,并且对于整个玉兰花来说并非易事。您必须更改并覆盖admincentral-theme才能更改这些值。

手册位于: https://documentation.magnolia-cms.com/display/DOCS/App+theme