Differences
This shows you the differences between two versions of the page.
submit_person [2012/04/09 16:43] dragan.milicev |
submit_person [2012/07/09 10:47] (current) srdjan.lukovic [GUI Code] |
||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== Create and Submit ====== | + | ====== Submit and Create ====== |
- | Create and Submit is a [[SOLoist Sample Applications|SOLoist sample application]] that demonstrates a simple, classical form for entering data and creating a new object (of class Person in this example) when the form is submitted. The new object is created upon the Submit command, with the attributes configured from the data entered in the form. Commands are also used here. | + | **Submit and Create** is a [[SOLoist Sample Applications|SOLoist sample application]] that demonstrates a simple, classical form for entering data and creating a new object (of class Person in this example) when the form is submitted. The new object is created upon the Submit command, with the attributes configured from the data entered in the form. Commands are also used here. |
==== Live example ==== | ==== Live example ==== | ||
Line 56: | Line 56: | ||
import rs.sol.soloist.server.builtindomains.builtindatatypes.Real; | import rs.sol.soloist.server.builtindomains.builtindatatypes.Real; | ||
import rs.sol.soloist.server.builtindomains.builtindatatypes.Text; | import rs.sol.soloist.server.builtindomains.builtindatatypes.Text; | ||
- | import rs.sol.soloist.server.builtindomains.common.ElementDescriptor; | ||
import rs.sol.soloist.server.guiconfiguration.components.GUIApplicationComponent; | import rs.sol.soloist.server.guiconfiguration.components.GUIApplicationComponent; | ||
import rs.sol.soloist.server.guiconfiguration.components.GUIButtonComponent; | import rs.sol.soloist.server.guiconfiguration.components.GUIButtonComponent; | ||
Line 62: | Line 61: | ||
import rs.sol.soloist.server.guiconfiguration.components.GUIPanelComponent; | import rs.sol.soloist.server.guiconfiguration.components.GUIPanelComponent; | ||
import rs.sol.soloist.server.guiconfiguration.construction.GUIComponentBinding; | import rs.sol.soloist.server.guiconfiguration.construction.GUIComponentBinding; | ||
- | import rs.sol.soloist.server.guiconfiguration.elementcomponents.GUIElementComponent; | + | import rs.sol.soloist.server.guiconfiguration.elementcomponents.GUIInput; |
- | import rs.sol.soloist.server.guiconfiguration.elementcomponents.GUIInputKind; | + | |
- | import rs.sol.soloist.server.guiconfiguration.layout.TableLayoutData; | + | |
import rs.sol.soloist.server.server.SoloistServiceServlet; | import rs.sol.soloist.server.server.SoloistServiceServlet; | ||
Line 74: | Line 71: | ||
public void init() throws InitializerFailedException { | public void init() throws InitializerFailedException { | ||
GUIApplicationComponent page = new GUIApplicationComponent(); | GUIApplicationComponent page = new GUIApplicationComponent(); | ||
- | page.name.set(Text.fromString("SubmitPerson")); | + | page.setName("SubmitPerson"); |
SoloistServiceServlet.registerApplication(page); | SoloistServiceServlet.registerApplication(page); | ||
- | page.context.set(DefaultContextInit.getRoot()); | + | page.setContext(DefaultContextInit.getRoot()); |
GUIPanelComponent root = GUIPanelComponent.createFlow(page); | GUIPanelComponent root = GUIPanelComponent.createFlow(page); | ||
GUILabelComponent title = GUILabelComponent.create(root, "Submit Person"); | GUILabelComponent title = GUILabelComponent.create(root, "Submit Person"); | ||
- | title.styleName.set(Text.fromString("titleStyle")); | + | title.setStyle("titleStyle"); |
GUIPanelComponent topPanel = GUIPanelComponent.createFlow(root); | GUIPanelComponent topPanel = GUIPanelComponent.createFlow(root); | ||
- | topPanel.styleName.set(Text.fromString("topPanel")); | + | topPanel.setStyle("topPanel"); |
GUIPanelComponent table = GUIPanelComponent.createTable(topPanel); | GUIPanelComponent table = GUIPanelComponent.createTable(topPanel); | ||
int row = 0; | int row = 0; | ||
- | GUILabelComponent.create(table, "Name: ", row, 0); // instead of "row, 0" at the end, you could use "new TableLayoutDate(row, 0)" | + | GUILabelComponent.create(table, "Name: ", row, 0); |
- | GUIElementComponent nameInput = GUIElementComponent.createInput(table, "", Text.CLASSIFIER, row++, 1); // second parameter "" (name) | + | GUIInput nameInput = GUIInput.createField(table, Text.CLASSIFIER, row++, 1); |
- | // this is not important unless you use this component in a search form as a parameter | + | nameInput.addInitialValue(Text.fromString("New Person")); |
- | GUIInputKind.get(nameInput).initialValues.set(ElementDescriptor.create(Text.fromString("New Person"))); // initial value for the name field | + | |
GUILabelComponent.create(table, "Gender: ", row, 0); | GUILabelComponent.create(table, "Gender: ", row, 0); | ||
- | GUIElementComponent genderInput = GUIElementComponent.createInput(table, "", Repository.getRepository().getEnumeration(Gender.FQ_TYPE_NAME), row++, 1); | + | GUIInput genderInput = GUIInput.createField(table, Repository.getRepository().getEnumeration(Gender.FQ_TYPE_NAME), row++, 1); |
- | // for an enumeration, one must fetch its type using Repository class, which is the UML model reflection povider | + | |
GUILabelComponent.create(table, "Age: ", row, 0); | GUILabelComponent.create(table, "Age: ", row, 0); | ||
- | GUIElementComponent ageInput = GUIElementComponent.createInput(table, "", Integer.CLASSIFIER, row++, 1); | + | GUIInput ageInput = GUIInput.createField(table, Integer.CLASSIFIER, row++, 1); |
GUILabelComponent.create(table, "Date of birth: ", row, 0); | GUILabelComponent.create(table, "Date of birth: ", row, 0); | ||
- | GUIElementComponent dateOfBirthInput = GUIElementComponent.createInput(table, "", Date.CLASSIFIER, row++, 1); | + | GUIInput dateOfBirthInput = GUIInput.createField(table, Date.CLASSIFIER, row++, 1); |
GUILabelComponent.create(table, "Height [m]: ", row, 0); | GUILabelComponent.create(table, "Height [m]: ", row, 0); | ||
- | GUIElementComponent heightInput = GUIElementComponent.createInput(table, "", Real.CLASSIFIER, row++, 1); | + | GUIInput heightInput = GUIInput.createField(table, Real.CLASSIFIER, row++, 1); |
GUILabelComponent.create(table, "Is married: ", row, 0); | GUILabelComponent.create(table, "Is married: ", row, 0); | ||
- | GUIElementComponent isMarriedInput = GUIElementComponent.createInputCheckbox(table, "", "", true, new TableLayoutData(row++, 1)); // true is initial value | + | GUIInput isMarriedInput = GUIInput.createField(table, Boolean.CLASSIFIER, row++, 1); // true is initial value |
+ | isMarriedInput.setLowerBound(1); | ||
+ | isMarriedInput.addInitialValue(Boolean.TRUE); | ||
// if you wish to allow marriage status to be undefined, i.e. a three-value combo (empty, yes, and no) instead of two value checkbox use this: | // if you wish to allow marriage status to be undefined, i.e. a three-value combo (empty, yes, and no) instead of two value checkbox use this: | ||
- | // GUIElementComponent isMarriedInput2 = GUIElementComponent.createInput(table, "", Boolean.CLASSIFIER, row++, 1); | + | // GUIElementComponent isMarriedInput2 =GUIInput.createField(table, Boolean.CLASSIFIER, row++, 1); |
- | + | ||
// Take a look at the date picker in CSS. | // Take a look at the date picker in CSS. | ||
// Also, take a look at .gwt-TextBox-validation_failed and .dateBoxFormatError. | // Also, take a look at .gwt-TextBox-validation_failed and .dateBoxFormatError. | ||
// These define how these input widgets react when invalid values are typed in, | // These define how these input widgets react when invalid values are typed in, | ||
// for example, if an invalid value "Java" is typed in the ageInput that accepts Integers. | // for example, if an invalid value "Java" is typed in the ageInput that accepts Integers. | ||
- | + | ||
// Now let's create the buttons | // Now let's create the buttons | ||
GUIPanelComponent hp = GUIPanelComponent.createHorizontal(topPanel); | GUIPanelComponent hp = GUIPanelComponent.createHorizontal(topPanel); | ||
GUIButtonComponent createButton = GUIButtonComponent.create(hp, "Create Person", new CreatePerson()); | GUIButtonComponent createButton = GUIButtonComponent.create(hp, "Create Person", new CreatePerson()); | ||
- | createButton.confirmationRequired.set(Boolean.TRUE); | + | createButton.setConfirmationRequired(true); |
- | createButton.confirmationMessage.set(Text.fromString("Are you sure you want to create a person?")); | + | createButton.setConfirmationMessage("Are you sure you want to create a person?"); |
// Let's now bind the button with input parameters' provider components | // Let's now bind the button with input parameters' provider components | ||
- | GUIComponentBinding.create(nameInput.value, createButton, CreatePerson.PROPERTIES.name); | + | GUIComponentBinding.create(nameInput.opValue(), createButton, CreatePerson.PROPERTIES.name); |
- | GUIComponentBinding.create(ageInput.value, createButton, CreatePerson.PROPERTIES.age); | + | GUIComponentBinding.create(ageInput.opValue(), createButton, CreatePerson.PROPERTIES.age); |
- | GUIComponentBinding.create(genderInput.value, createButton, CreatePerson.PROPERTIES.gender); | + | GUIComponentBinding.create(genderInput.opValue(), createButton, CreatePerson.PROPERTIES.gender); |
- | GUIComponentBinding.create(dateOfBirthInput.value, createButton, CreatePerson.PROPERTIES.dateOfBirth); | + | GUIComponentBinding.create(dateOfBirthInput.opValue(), createButton, CreatePerson.PROPERTIES.dateOfBirth); |
- | GUIComponentBinding.create(heightInput.value, createButton, CreatePerson.PROPERTIES.height); | + | GUIComponentBinding.create(heightInput.opValue(), createButton, CreatePerson.PROPERTIES.height); |
- | GUIComponentBinding.create(isMarriedInput.value, createButton, CreatePerson.PROPERTIES.isMarried); | + | GUIComponentBinding.create(isMarriedInput.opValue(), createButton, CreatePerson.PROPERTIES.isMarried); |
// Let's reset input fields after command execution | // Let's reset input fields after command execution | ||
- | GUIComponentBinding.create(createButton.commandExecuted, GUIInputKind.get(nameInput).reset); | + | GUIComponentBinding.create(createButton.opCommandExecuted(), nameInput.ipReset()); |
- | GUIComponentBinding.create(createButton.commandExecuted, GUIInputKind.get(ageInput).reset); | + | GUIComponentBinding.create(createButton.opCommandExecuted(), ageInput.ipReset()); |
- | GUIComponentBinding.create(createButton.commandExecuted, GUIInputKind.get(genderInput).reset); | + | GUIComponentBinding.create(createButton.opCommandExecuted(), genderInput.ipReset()); |
- | GUIComponentBinding.create(createButton.commandExecuted, GUIInputKind.get(dateOfBirthInput).reset); | + | GUIComponentBinding.create(createButton.opCommandExecuted(), dateOfBirthInput.ipReset()); |
- | GUIComponentBinding.create(createButton.commandExecuted, GUIInputKind.get(heightInput).reset); | + | GUIComponentBinding.create(createButton.opCommandExecuted(), heightInput.ipReset()); |
- | GUIComponentBinding.create(createButton.commandExecuted, GUIInputKind.get(isMarriedInput).reset); | + | GUIComponentBinding.create(createButton.opCommandExecuted(), isMarriedInput.ipReset()); |
// Let's now create clear and reset form buttons | // Let's now create clear and reset form buttons | ||
// Note the difference between reset and clear: reset re-sets the initial values in the input fields, while clear actually makes them empty | // Note the difference between reset and clear: reset re-sets the initial values in the input fields, while clear actually makes them empty | ||
GUIButtonComponent clearButton = GUIButtonComponent.create(hp, "Clear Form"); | GUIButtonComponent clearButton = GUIButtonComponent.create(hp, "Clear Form"); | ||
- | GUIComponentBinding.create(clearButton.click, nameInput.clearValue); | + | GUIComponentBinding.create(clearButton.opClick(), nameInput.ipClearValue()); |
- | GUIComponentBinding.create(clearButton.click, ageInput.clearValue); | + | GUIComponentBinding.create(clearButton.opClick(), ageInput.ipClearValue()); |
- | GUIComponentBinding.create(clearButton.click, genderInput.clearValue); | + | GUIComponentBinding.create(clearButton.opClick(), genderInput.ipClearValue()); |
- | GUIComponentBinding.create(clearButton.click, dateOfBirthInput.clearValue); | + | GUIComponentBinding.create(clearButton.opClick(), dateOfBirthInput.ipClearValue()); |
- | GUIComponentBinding.create(clearButton.click, heightInput.clearValue); | + | GUIComponentBinding.create(clearButton.opClick(), heightInput.ipClearValue()); |
- | GUIComponentBinding.create(clearButton.click, isMarriedInput.clearValue); | + | GUIComponentBinding.create(clearButton.opClick(), isMarriedInput.ipClearValue()); |
GUIButtonComponent resetButton = GUIButtonComponent.create(hp, "Reset Form"); | GUIButtonComponent resetButton = GUIButtonComponent.create(hp, "Reset Form"); | ||
- | GUIComponentBinding.create(resetButton.click, GUIInputKind.get(nameInput).reset); | + | GUIComponentBinding.create(resetButton.opClick(), nameInput.ipReset()); |
- | GUIComponentBinding.create(resetButton.click, GUIInputKind.get(ageInput).reset); | + | GUIComponentBinding.create(resetButton.opClick(), ageInput.ipReset()); |
- | GUIComponentBinding.create(resetButton.click, GUIInputKind.get(genderInput).reset); | + | GUIComponentBinding.create(resetButton.opClick(), genderInput.ipReset()); |
- | GUIComponentBinding.create(resetButton.click, GUIInputKind.get(dateOfBirthInput).reset); | + | GUIComponentBinding.create(resetButton.opClick(), dateOfBirthInput.ipReset()); |
- | GUIComponentBinding.create(resetButton.click, GUIInputKind.get(heightInput).reset); | + | GUIComponentBinding.create(resetButton.opClick(), heightInput.ipReset()); |
- | GUIComponentBinding.create(resetButton.click, GUIInputKind.get(isMarriedInput).reset); | + | GUIComponentBinding.create(resetButton.opClick(), isMarriedInput.ipReset()); |
} | } | ||
} | } | ||
</code> | </code> |