По первому вопросу:

Вы можете сделать это, расширив 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);
    }
}

После этого вам нужно добавить свое определение в конфигурацию вашего экземпляра магнолии в разделе

/ modules / ui-framework / fieldTypes / yourField /

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

Теперь вы можете использовать это так:

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

Относительно вашего второго вопроса:

Вы можете добавить свои собственные стили к магнолии, используя собственную тему Vaadin. Однако вы должны полностью заменить тему по умолчанию. Это предназначено только для ваших пользовательских приложений и нетривиально сделать это для всей магнолии. Вам нужно будет изменить и переопределить admincentral-theme, чтобы изменить эти значения.

Руководство находится здесь: https://documentation.magnolia-cms.com/display/DOCS/App+theme