Differences

This shows you the differences between two versions of the page.

Link to this comparison view

edit_person_s_details [2012/03/30 16:47]
srdjan.lukovic created 		edit_person_s_details [2012/07/09 10:48] (current)
srdjan.lukovic [GUI Code]
Line 1: Line 1:
-====== Edit Person's Details Sample ====== +====== Edit Object Details ====== 
-This sample presents simple form which shows details of certain person. Editing content of any field will be automatically (after focus lost) saved in database, no save button is needed.+ 
 +**Edit Object Details** is a [[SOLoist Sample Applications|SOLoist sample application]] that is a simple form for editing details (slots) of a selected object. It relies on the //Element Component// as shown in [[Element Component|Data Input, View, and Edit Controls]]. 
 + 
 +The object to edit is selected in a text box with suggestion at the top. This text box is an input element component. It provides the selected object on its output pin that is wired to the input pin of the other editor element components.
  
 ==== Live example ==== ==== Live example ====
Line 6: Line 9:
 [[http://soloistdemo.org/SampleApplications/editpersondetails.html]]\\ [[http://soloistdemo.org/SampleApplications/editpersondetails.html]]\\
 [[http://soloistdemo.org/SampleApplications/oql?q=SELECT+p%2C+p.name%2C+p.gender%2C+p.age%2C+p.dateOfBirth%2C+p.height%2C+p.isMarried%2C+p.photo%2C+p.rootFolder%0D%0AFROM+Person+p&f=html | OQL Query: Persons]] [[http://soloistdemo.org/SampleApplications/oql?q=SELECT+p%2C+p.name%2C+p.gender%2C+p.age%2C+p.dateOfBirth%2C+p.height%2C+p.isMarried%2C+p.photo%2C+p.rootFolder%0D%0AFROM+Person+p&f=html | OQL Query: Persons]]
 +|{{screen:editpersondetails.png?250}}|
  
 ===== UML Model ===== ===== UML Model =====
Line 11: Line 15:
  
 ===== Business Logic Code ===== ===== Business Logic Code =====
-<code java> +None.
-//CreatePerson.java +
-public void execute()  +
-    // -------------<SOL id="928f2fbc-e47e-4718-84e3-8ceff8e61bc0:___throw__" /> +
-    // -------------<LOS id="928f2fbc-e47e-4718-84e3-8ceff8e61bc0:___throw__" /> +
-    { +
-        // ---------<SOL id="928f2fbc-e47e-4718-84e3-8ceff8e61bc0:___body___" /> +
-        Text nameVal = name.val(); +
-        Integer ageVal = age.val(); +
-        Date dateOfBirthVal = dateOfBirth.val(); +
-        Gender genderVal = gender.val(); +
-        Real heightVal = height.val(); +
-        Boolean isMarriedVal = isMarried.val(); +
-         +
-        if (nameVal == null || nameVal.isEmpty()) +
-        { +
-        throw new CommandPreconditionsException("Please, type in the name for new person."); +
-        } +
-         +
-        Person p = new Person(); +
-        p.name.set(nameVal); +
-        p.age.set(ageVal); +
-        p.dateOfBirth.set(dateOfBirthVal); +
-        p.gender.set(genderVal); +
-        p.height.set(heightVal); +
-        p.isMarried.set(isMarriedVal); +
-        // ---------<LOS id="928f2fbc-e47e-4718-84e3-8ceff8e61bc0:___body___" /> +
-    } +
-</code>+
  
 ===== GUI Code ===== ===== GUI Code =====
Line 45: Line 21:
 package rs.sol.sampleapps; package rs.sol.sampleapps;
  
-import rs.sol.sampleapps.commands.CreatePerson; 
 import rs.sol.soloist.helpers.init.DefaultContextInit; import rs.sol.soloist.helpers.init.DefaultContextInit;
 import rs.sol.soloist.helpers.init.Initializer; import rs.sol.soloist.helpers.init.Initializer;
 import rs.sol.soloist.helpers.init.InitializerFailedException; import rs.sol.soloist.helpers.init.InitializerFailedException;
-import rs.sol.soloist.modelreader.Repository; 
-import rs.sol.soloist.server.builtindomains.builtindatatypes.Boolean; 
-import rs.sol.soloist.server.builtindomains.builtindatatypes.Date; 
-import rs.sol.soloist.server.builtindomains.builtindatatypes.Integer; 
-import rs.sol.soloist.server.builtindomains.builtindatatypes.Real; 
-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.GUILabelComponent; import rs.sol.soloist.server.guiconfiguration.components.GUILabelComponent;
 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.GUIEdit; 
-import rs.sol.soloist.server.guiconfiguration.elementcomponents.GUIInputKind;+import rs.sol.soloist.server.guiconfiguration.elementcomponents.GUIInput;
 import rs.sol.soloist.server.guiconfiguration.layout.TableLayoutData; import rs.sol.soloist.server.guiconfiguration.layout.TableLayoutData;
 +import rs.sol.soloist.server.guiconfiguration.nonvisualcompoments.GUIFindAllInstancesSAPComponent;
 import rs.sol.soloist.server.server.SoloistServiceServlet; import rs.sol.soloist.server.server.SoloistServiceServlet;
  
-public enum SubmitPerson implements Initializer{+public enum EditPersonDetails implements Initializer {
  
  INSTANCE;  INSTANCE;
- +
  @Override  @Override
- 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("EditPersonDetails"); 
  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, "Edit Person Details"); 
- 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, "Choose person:", row, 0); 
- GUIElementComponent nameInput = GUIElementComponent.createInput(table, "", Text.CLASSIFIER, row++, 1); // second parameter "" (name) + 
- // is not important unless you use this component in the search form as a parameter + GUIFindAllInstancesSAPComponent allPersons = GUIFindAllInstancesSAPComponent.create(root, Person.CLASSIFIER); 
- GUIInputKind.get(nameInput).initialValues.set(ElementDescriptor.create(Text.fromString("New Person"))); // initial value for the name field+ // This component fetches all persons; it is an invisible component but still, it has to have a parent 
 + GUIInput suggestBox = GUIInput.createSuggest(table, TableLayoutData.create(row++, 1)); 
 + GUIComponentBinding.create(allPersons.opValue(), suggestBox.ipCollection()); 
 + 
 + GUILabelComponent.create(table, "Name: ", row, 0); 
 + // Slot editor component: it submits the value into the database on focus lost or on enter pressed 
 + GUIEdit nameEditor = GUIEdit.createField(table, Person.PROPERTIES.name, TableLayoutData.create(row++, 1)); 
   
  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); + GUIEdit genderEditor = GUIEdit.createField(table, Person.PROPERTIES.gender, TableLayoutData.create(row++, 1)); 
- // for enumeration one must fetch its type using Repository class, which is 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); + GUIEdit ageEditor = GUIEdit.createField(table, Person.PROPERTIES.age, TableLayoutData.create(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); + GUIEdit dateOfBirthEditor = GUIEdit.createField(table, Person.PROPERTIES.dateOfBirth, TableLayoutData.create(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); + GUIEdit heightEditor = GUIEdit.createField(table, Person.PROPERTIES.height, TableLayoutData.create(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 + GUIEdit isMarriedEditor = GUIEdit.createField(table, Person.PROPERTIES.isMarried, TableLayoutData.create(row++, 1)); 
- // if you wish to allow marriage status to be undefined, meaning three value combo (empty, yes and no) instead of two value checkbox use this: + 
- // GUIElementComponent isMarriedInput2 = GUIElementComponent.createInput(table, "", Boolean.CLASSIFIER, row++, 1); + GUIComponentBinding.create(suggestBox.opValue(), nameEditor.ipElement()); 
-  + GUIComponentBinding.create(suggestBox.opValue(), genderEditor.ipElement()); 
- // take a look at the date picker in CSS   + GUIComponentBinding.create(suggestBox.opValue(), ageEditor.ipElement()); 
- // also, take a look at .gwt-TextBox-validation_failed and .dateBoxFormatError  + GUIComponentBinding.create(suggestBox.opValue(), dateOfBirthEditor.ipElement()); 
- // these define how these input widgets react when invalid values are typed in, + GUIComponentBinding.create(suggestBox.opValue(), heightEditor.ipElement()); 
- // for example, if value "Java" is typed in the ageInput which is built to accept Integers + GUIComponentBinding.create(suggestBox.opValue(), isMarriedEditor.ipElement());
-  +
- // now. let's create buttons +
- GUIPanelComponent hp = GUIPanelComponent.createHorizontal(topPanel); +
-  +
- GUIButtonComponent createButton = GUIButtonComponent.create(hp, "Create Person", new CreatePerson()); +
- createButton.confirmationRequired.set(Boolean.TRUE); +
- createButton.confirmationMessage.set(Text.fromString("Are you sure you want to create a person?")); +
-  +
- // let's now bind the button with input parameters' provider components +
- GUIComponentBinding.create(nameInput.value, createButton, CreatePerson.PROPERTIES.name); +
- GUIComponentBinding.create(ageInput.value, createButton, CreatePerson.PROPERTIES.age); +
- GUIComponentBinding.create(genderInput.value, createButton, CreatePerson.PROPERTIES.gender); +
- GUIComponentBinding.create(dateOfBirthInput.value, createButton, CreatePerson.PROPERTIES.dateOfBirth); +
- GUIComponentBinding.create(heightInput.value, createButton, CreatePerson.PROPERTIES.height); +
- GUIComponentBinding.create(isMarriedInput.value, createButton, CreatePerson.PROPERTIES.isMarried); +
-  +
- // let's reset input fields after command execution +
- GUIComponentBinding.create(createButton.commandExecuted, GUIInputKind.get(nameInput).reset); +
- GUIComponentBinding.create(createButton.commandExecuted, GUIInputKind.get(ageInput).reset); +
- GUIComponentBinding.create(createButton.commandExecuted, GUIInputKind.get(genderInput).reset); +
- GUIComponentBinding.create(createButton.commandExecuted, GUIInputKind.get(dateOfBirthInput).reset); +
- GUIComponentBinding.create(createButton.commandExecuted, GUIInputKind.get(heightInput).reset); +
- GUIComponentBinding.create(createButton.commandExecuted, GUIInputKind.get(isMarriedInput).reset); +
-  +
- // let's now create clear and reset form buttons +
- // note the difference between reset and clear, reset re-sets the initial values into the input fields, while clear actually makes them empty +
- GUIButtonComponent clearButton = GUIButtonComponent.create(hp, "Clear Form"); +
- GUIComponentBinding.create(clearButton.click, nameInput.clearValue); +
- GUIComponentBinding.create(clearButton.click, ageInput.clearValue); +
- GUIComponentBinding.create(clearButton.click, genderInput.clearValue); +
- GUIComponentBinding.create(clearButton.click, dateOfBirthInput.clearValue); +
- GUIComponentBinding.create(clearButton.click, heightInput.clearValue); +
- GUIComponentBinding.create(clearButton.click, isMarriedInput.clearValue); +
-  +
- GUIButtonComponent resetButton = GUIButtonComponent.create(hp, "Reset Form"); +
- GUIComponentBinding.create(resetButton.click, GUIInputKind.get(nameInput).reset); +
- GUIComponentBinding.create(resetButton.click, GUIInputKind.get(ageInput).reset); +
- GUIComponentBinding.create(resetButton.click, GUIInputKind.get(genderInput).reset); +
- GUIComponentBinding.create(resetButton.click, GUIInputKind.get(dateOfBirthInput).reset); +
- GUIComponentBinding.create(resetButton.click, GUIInputKind.get(heightInput).reset); +
- GUIComponentBinding.create(resetButton.click, GUIInputKind.get(isMarriedInput).reset);+
  }  }
 } }
 </code> </code>

Trace: • edit_person_s_details • gallery • person_tables • association_editor • submit_person • tabs_and_layouts • persons_and_bank_accounts • bank_advisers

Print/export