Tutorial08 - Building UI Elements Into Wizards
Introduction
Build in new UI elements into Datameer wizards to store, access, and use properties values. This can be accomplished using the Java method populateDetailsWizardPage()
How to Build a UI Element
- Create an import/export job plug-in.
- 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 UI this textfield will be required to be filled out // by the Datameer 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 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 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 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.