Tutorial08 - Building UI Elements Into Wizards

Introduction

Build in new UI elements into Datameer X wizards to store, access, and use properties values. This can be accomplished using the Java method  populateDetailsWizardPage()

How to Build a UI Element

  1. Create an import/export job plug-in.
  2. Overwrite the code within populateDetailsWizardPage() (see example) below) in Datameer's SDK.

Example

package datameer.das.plugin.tutorial07;
import java.io.InputStream;
import java.util.List;
import org.apache.hadoop.conf.Configuration;
import org.apache.hadoop.mapred.InputSplit;
import datameer.com.google.common.collect.Lists;
import datameer.dap.sdk.common.Field;
import datameer.dap.sdk.common.GenericConfiguration;
import datameer.dap.sdk.common.RawRecord;
import datameer.dap.sdk.common.RawRecordCollector;
import datameer.dap.sdk.filestore.FileStore;
import datameer.dap.sdk.importjob.ParseConfiguration;
import datameer.dap.sdk.importjob.RecordParser;
import datameer.dap.sdk.importjob.RecordSchemaDetector;
import datameer.dap.sdk.importjob.TextBasedFileType;
import datameer.dap.sdk.property.FileUploadPropertyDefinition;
import datameer.dap.sdk.property.NumberValidator;
import datameer.dap.sdk.property.PropertyDefinition;
import datameer.dap.sdk.property.PropertyGroupDefinition;
import datameer.dap.sdk.property.PropertyType;
import datameer.dap.sdk.property.WizardPageDefinition;
import datameer.dap.sdk.property.handler.FileUploadHandler;
import datameer.dap.sdk.schema.ValueType;
import datameer.dap.sdk.widget.Option;
import datameer.dap.sdk.widget.OptionGroup;
public class ExamplePropertyFileType extends TextBasedFileType {
	public static boolean _showTextarea = true;
	@Override
	public String getId() {
		return ExamplePropertyFileType.class.getName();
	}
	@Override
	public String getName() {
		return "Example Property Types";
	}
	@Override
	public RecordSchemaDetector<String> createRecordSchemaDetector(
			datameer.dap.sdk.importjob.ImportFileType.FileTypeModel<String> model) {
		// useless example implementation
		return new RecordSchemaDetector<String>() {
			@Override
			public Field[] detectFields(InputSplit arg0, List<String> arg1) {
				return new Field[] { new Field("firstColumn", ValueType.STRING) };
			}
			@Override
			public boolean needsDataForSchemaDetection() {
				return false;
			}
		};
	}
	@Override
	public RecordParser<String> createRecordParser(Field[] fields, Configuration conf,
			datameer.dap.sdk.importjob.ImportFileType.FileTypeModel<String> model) {
		// useless example implementation
		return new RecordParser<String>() {
			@Override
			public void configureRecordCollector(RawRecordCollector arg0) {
			}
			@Override
			public void initSplit(InputSplit arg0) {
			}
			@Override
			public void parse(ParseConfiguration arg0, RawRecordCollector arg1, String arg2) throws Exception {
				arg1.collect(new RawRecord("B", 1));
			}
		};
	}
	@Override
	public boolean canAutoMergeNewFields() {
		return false;
	}
	@Override
	public void populateDetailsWizardPage(WizardPageDefinition page) {
		PropertyGroupDefinition groupBasic = page.addGroup("BASIC DATA");
		// add the property to a property group
		groupBasic.addPropertyDefinition(createInputTextField());
		groupBasic.addPropertyDefinition(createLongText());
		groupBasic.addPropertyDefinition(createCheckBoxNotPreChecked());
		groupBasic.addPropertyDefinition(createCheckBoxPreChecked());
		groupBasic.addPropertyDefinition(createRadioButton());
		groupBasic.addPropertyDefinition(createSelectionGroup());
		PropertyGroupDefinition dataGroup = page.addGroup("DATE");
		dataGroup.addPropertyDefinition(createDateInputField());
		PropertyGroupDefinition encodedData = page.addGroup("ENCODED DATA");
		encodedData.addPropertyDefinition(createTextEncoded());
		encodedData.addPropertyDefinition(createPasswordInputField());
		PropertyGroupDefinition descriptiveElements = page.addGroup("DESCRIPTIVE ELEMENTS");
		descriptiveElements.addPropertyDefinition(createInformation());
		PropertyGroupDefinition groupSpecial = page.addGroup("SPECIAL DATA");
		groupSpecial.addPropertyDefinition(createGroupSelection());
		PropertyDefinition propertyDefinition = new PropertyDefinition("SEPARATOR", "SEPARATOR",
				PropertyType.SEPARATOR);
		groupSpecial.addPropertyDefinition(propertyDefinition);
		propertyDefinition = new PropertyDefinition("HIDDEN_KEY", PropertyType.HIDDEN);
		groupSpecial.addPropertyDefinition(propertyDefinition);
		groupSpecial.addPropertyDefinition(createMultiValueGroupedSelection());
		groupSpecial.addPropertyDefinition(createMulitSelection());
		groupSpecial.addPropertyDefinition(createFileInputDuringWizard());
	}
	private PropertyDefinition createInputTextField() {
        PropertyDefinition textFieldElement = new PropertyDefinition("property.example.string", "PropertyType.STRING",
                PropertyType.STRING);
        // In the Datameer X UI this textfield will be required to be filled out
        // by the Datameer X User
        textFieldElement.setRequired(true);
        // the help text on the right side of the field
        textFieldElement.setHelpText("Helptext: Inputfield String, which allows only numbers greater than 0.");
        // Datameer X SDK is providing several Validators. All Validators
        // inheriting from the class PropertyDefinitionValueValidator.
        // The Validator will be applied on submit of the wizard-step by
        // clicking "Next"
        textFieldElement.addValidator(new NumberValidator(1));
        // Textfields can be also made read-only. The immutable value is then
        // set via the setDefaultValue method:
        // textFieldElement.setDefaultValue("read-only value");
        // textFieldElement.setReadOnly(true);
        return textFieldElement;
    }
	private PropertyDefinition createDateInputField() {
		PropertyDefinition dateElement = new PropertyDefinition("property.example.date", "PropertyType.DATE",
				PropertyType.DATE);
		dateElement.setHelpText("Helptext: Date");
		return dateElement;
	}
	private PropertyDefinition createLongText() {
		PropertyDefinition longtextElement = new PropertyDefinition("property.example.longtext",
				"PropertyType.LONG_TEXT", PropertyType.LONG_TEXT);
		longtextElement.setHelpText("Helptext: Long text");
		return longtextElement;
	}
	private PropertyDefinition createPasswordInputField() {
		PropertyDefinition passwordElement = new PropertyDefinition("property.example.password",
				"PropertyType.PASSWORD", PropertyType.PASSWORD);
		passwordElement.setHelpText("Helptext: Password");
		passwordElement.setRequired(true);
		return passwordElement;
	}
	private PropertyDefinition createCheckBoxNotPreChecked() {
		PropertyDefinition checkboxElement = new PropertyDefinition("property.example.checkbox.notselected",
				"PropertyType.BOOLEAN - not checked", PropertyType.BOOLEAN);
		checkboxElement.setHelpText("Helptext: checkbox is not selected");
		return checkboxElement;
	}
	private PropertyDefinition createCheckBoxPreChecked() {
		PropertyDefinition checkboxElement = new PropertyDefinition("property.example.checkbox.selected",
				"PropertyType.BOOLEAN - checked", PropertyType.BOOLEAN);
		// preselect the checkbox when the Datameer X user is entering the
		// wizard-step
		checkboxElement.setDefaultValue("true");
		checkboxElement.setHelpText("Helptext: checkbox is selected");
		return checkboxElement;
	}
	private PropertyDefinition createInformation() {
		PropertyDefinition informationElement = new PropertyDefinition("property.example.information",
				"PropertyType.INFORMATION", PropertyType.INFORMATION);
		// add the information to show in the UI when the Datameer X user is
		// entering the wizard-step
		informationElement.setDefaultValue("This is an information");
		informationElement
				.setHelpText("Helptext: This UI element is a read only element to provide the user informaiton.");
		return informationElement;
	}
	private PropertyDefinition createMulitSelection() {
		PropertyDefinition multiSelectionElement = new PropertyDefinition("property.example.multiselection",
				"PropertyType.MULTISELECTION", PropertyType.MULTISELECTION);
		multiSelectionElement.setHelpText("Helptext: selection of multiple values");
		multiSelectionElement.addOption(new Option("selection_1_value", "selection_1"));
		multiSelectionElement.addOption(new Option("selection_2_value", "selection_2"));
		return multiSelectionElement;
	}
	private PropertyDefinition createTextEncoded() {
		PropertyDefinition textEncodedElement = new PropertyDefinition("property.example.text-encoded",
				"PropertyType.TEXT_ENCODED", PropertyType.TEXT_ENCODED);
		textEncodedElement.setHelpText("Helptext: text encoded");
		return textEncodedElement;
	}
	private PropertyDefinition createRadioButton() {
		PropertyDefinition radioButtonElement = new PropertyDefinition("property.example.radiobutton",
				"PropertyType.RADIO", PropertyType.RADIO);
		radioButtonElement.setHelpText("Helptext: radio button");
		radioButtonElement.addOption(new Option("radio_1_value", "radio_1_label"));
		radioButtonElement.addOption(new Option("radio_2_value", "radio_2_label"));
		// preselect the second option
		radioButtonElement.setDefaultValue("radio_2_value");
		return radioButtonElement;
	}
	private PropertyDefinition createFileInputDuringWizard() {
		final PropertyDefinition fileUploadElement = new FileUploadPropertyDefinition("property.example.file.upload",
				"PropertyType.INPUT_FILE_UPLOAD", PropertyType.INPUT_FILE_UPLOAD, new FileUploadHandler() {
					@Override
					public String upload(GenericConfiguration conf, FileStore fileStore, InputStream inputStream,
							String propertyName, String originalFilename) throws Exception {
						fileStore.create("folder" + "/" + originalFilename, inputStream);
						return originalFilename;
					}
				});
		fileUploadElement.setHelpText("Helptext: some file");
		fileUploadElement.setRequired(true);
		return fileUploadElement;
	}
	private PropertyDefinition createMultiValueGroupedSelection() {
		PropertyDefinition mulitValueGroupedSelectionElement = new PropertyDefinition(
				"property.example.grouped.selection", "PropertyType.MULTI_VALUE_GROUPED_SELECTION",
				PropertyType.MULTI_VALUE_GROUPED_SELECTION);
		mulitValueGroupedSelectionElement.setHelpText("Helptext: grouped seleciton of multiple values");
		OptionGroup optGroup = new OptionGroup("mulitselect");
		List<Option> options = Lists.newArrayList(new Option("selection_1_value", "selection_1"),
				new Option("selection_2_value", "selection_2"));
		optGroup.setOptions(options);
		OptionGroup optGroup2 = new OptionGroup("mulitselect - 2");
		List<Option> options2 = Lists.newArrayList(new Option("selection_2_1_value", "selection_2_1"),
				new Option("selection_2_2_value", "selection_2_2"));
		optGroup2.setOptions(options2);
		List<OptionGroup> optionGroups = Lists.newArrayList(optGroup, optGroup2);
		mulitValueGroupedSelectionElement.setOptionGroups(optionGroups);
		return mulitValueGroupedSelectionElement;
	}
	private PropertyDefinition createGroupSelection() {
		PropertyDefinition groupedSelectionElement = new PropertyDefinition("property.example.selection",
				"PropertyType.GROUPED_SELECTION", PropertyType.GROUPED_SELECTION);
		OptionGroup optGroup = new OptionGroup("mulitselect");
		List<Option> options = Lists.newArrayList(new Option("selection_1_value", "selection_1_1"),
				new Option("selection_2_value", "selection_1_2"));
		optGroup.setOptions(options);
		OptionGroup optGroup2 = new OptionGroup("mulitselect  2");
		List<Option> options2 = Lists.newArrayList(new Option("selection_1_value", "selection_2_1"),
				new Option("selection_2_value", "selection_2_2"));
		optGroup2.setOptions(options2);
		List<OptionGroup> optionGroups = Lists.newArrayList(optGroup, optGroup2);
		groupedSelectionElement.setOptionGroups(optionGroups);
		groupedSelectionElement.setHelpText("Helptext: grouped selection");
		return groupedSelectionElement;
	}
	private PropertyDefinition createSelectionGroup() {
		PropertyDefinition selectionElement = new PropertyDefinition("property.example.selection",
				"PropertyType.SELECTION", PropertyType.SELECTION);
		selectionElement.setHelpText("Helptext: selection");
		selectionElement.setRequired(true);
		selectionElement.addOption(new Option("selection_1_value", "selection_1"));
		selectionElement.addOption(new Option("selection_2_value", "selection_2"));
		return selectionElement;
	}
}

After the plug-in has been installed, the UI in the import/export wizard displays your custom fields and text.