Differences
This shows you the differences between two versions of the page.
persons_and_bank_accounts [2012/04/09 17:25] dragan.milicev |
persons_and_bank_accounts [2012/07/09 10:49] (current) srdjan.lukovic [GUI Code] |
||
---|---|---|---|
Line 1: | Line 1: | ||
====== CRUD ====== | ====== CRUD ====== | ||
- | CRUD is a [[SOLoist Sample Applications|SOLoist sample application]], a simple demo of a classical [[wp>Create,_read,_update_and_delete | CRUD]] (Create, Read, Update, Delete) pattern for objects of a class. | + | **CRUD** is a [[SOLoist Sample Applications|SOLoist sample application]], a simple demo of a classical [[wp>Create,_read,_update_and_delete | CRUD]] (Create, Read, Update, Delete) pattern for objects of a class. |
- | The left-hand list box renders all objects of the class //Person//. When one is selected, its //Bank Accounts// are listed in the list box in the middle. When a Bank Account is selected, its slots are edited in the slot editors on the right. A new Bank Account can be created, or an existing one deleted with the generic commands (the buttons at the bottom). | + | The left-hand list box renders all objects of the class //Person//. When one is selected, its //Bank Accounts// are listed in the list box in the middle. When a Bank Account is selected, its slots can be edited in the slot editors on the right. A new Bank Account can be created, or an existing one can be deleted with the generic commands (the buttons at the bottom). |
+ | |||
+ | When a slot of a Bank Accoount is modified, as soon as its control loses its focus, the SOLoist notification mechanism updates all its manifestations on the page (try, for example, to change the number of an existing Bank Account and watch it in the list). | ||
==== Live example ==== | ==== Live example ==== | ||
Line 45: | Line 47: | ||
import rs.sol.soloist.helpers.init.InitializerFailedException; | import rs.sol.soloist.helpers.init.InitializerFailedException; | ||
import rs.sol.soloist.server.builtindomains.builtincommands.CmdDestroyObject; | import rs.sol.soloist.server.builtindomains.builtincommands.CmdDestroyObject; | ||
- | import rs.sol.soloist.server.builtindomains.builtindatatypes.Text; | ||
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 51: | Line 52: | ||
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.GUICollectionInput; | + | import rs.sol.soloist.server.guiconfiguration.elementcomponents.GUIEdit; |
- | import rs.sol.soloist.server.guiconfiguration.elementcomponents.GUIElementComponent; | + | import rs.sol.soloist.server.guiconfiguration.elementcomponents.GUIInput; |
- | import rs.sol.soloist.server.guiconfiguration.elementcomponents.GUIListWidget; | + | |
- | import rs.sol.soloist.server.guiconfiguration.elementcomponents.GUISlotEditorKind; | + | |
- | import rs.sol.soloist.server.guiconfiguration.elementcomponents.GUISlotValueInput; | + | |
- | import rs.sol.soloist.server.guiconfiguration.layout.CellLayoutData; | + | |
import rs.sol.soloist.server.guiconfiguration.layout.TableLayoutData; | import rs.sol.soloist.server.guiconfiguration.layout.TableLayoutData; | ||
import rs.sol.soloist.server.guiconfiguration.layout.VerticalAlignment; | import rs.sol.soloist.server.guiconfiguration.layout.VerticalAlignment; | ||
Line 74: | Line 71: | ||
public void init() throws InitializerFailedException | public void init() throws InitializerFailedException | ||
{ | { | ||
- | GUIApplicationComponent page = new GUIApplicationComponent(); | + | GUIApplicationComponent page = new GUIApplicationComponent(); // new web page |
- | page.name.set(Text.fromString("PersonsAndBankAccounts")); | + | page.setName("PersonsAndBankAccounts"); |
SoloistServiceServlet.registerApplication(page); | SoloistServiceServlet.registerApplication(page); | ||
GUIContext context = createContextAndStyles(); | GUIContext context = createContextAndStyles(); | ||
- | page.context.set(context); | + | page.setContext(context); |
GUIPanelComponent root = GUIPanelComponent.createFlow(page); | GUIPanelComponent root = GUIPanelComponent.createFlow(page); | ||
GUILabelComponent title = GUILabelComponent.create(root, "Persons and Bank Accounts"); | GUILabelComponent title = GUILabelComponent.create(root, "Persons and Bank Accounts"); | ||
- | 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); | ||
Line 97: | Line 94: | ||
// second row | // second row | ||
- | GUIFindAllInstancesSAPComponent allPersons = GUIFindAllInstancesSAPComponent.create(root, Person.FQ_TYPE_NAME); | + | // this component fetches all persons, it is invisible component but still, it has to have a parent |
- | GUIElementComponent personsList = GUIElementComponent.createInput(table, new GUIListWidget(), new GUICollectionInput(), 1, 0); // shows all persons | + | GUIFindAllInstancesSAPComponent allPersons = GUIFindAllInstancesSAPComponent.create(root, Person.CLASSIFIER); |
- | GUIComponentBinding.create(allPersons.value, GUICollectionInput.get(personsList).collection); | + | GUIInput personsList = GUIInput.createList(table); |
- | CellLayoutData.setSize(personsList, "250px", "300px"); | + | personsList.setLayoutData(TableLayoutData.create(1, 0)); // shows all persons |
- | personsList.styleName.set(Text.fromString("listWidget")); | + | GUIComponentBinding.create(allPersons.opValue(), personsList.ipCollection()); |
- | GUIElementComponent accountsList = GUIElementComponent.createInput(table, new GUIListWidget(), GUISlotValueInput.create(Person.PROPERTIES.accounts), 1, 1); // shows bank accounts for selected person | + | personsList.setSize("250px", "300px"); |
- | CellLayoutData.setSize(accountsList, "250px", "300px"); | + | personsList.setStyle("listWidget"); |
- | accountsList.styleName.set(Text.fromString("listWidget")); | + | |
+ | GUIInput accountsList = GUIInput.createList(table, Person.PROPERTIES.accounts); | ||
+ | accountsList.setLayoutData(TableLayoutData.create(1, 1)); | ||
+ | accountsList.setSize("250px", "300px"); | ||
+ | accountsList.setStyle("listWidget"); | ||
GUIPanelComponent accountDetailsTable = GUIPanelComponent.createTable(table); | GUIPanelComponent accountDetailsTable = GUIPanelComponent.createTable(table); | ||
- | TableLayoutData.setRowColumn(accountDetailsTable, 1, 2); // place the accountDetailsTable | + | accountDetailsTable.setRowColumn(1, 2); // place the accountDetailsTable |
- | TableLayoutData.setAlignment(accountDetailsTable, VerticalAlignment.TOP); | + | accountDetailsTable.setCellAlignment(null, VerticalAlignment.TOP); |
// third row | // third row | ||
- | GUIButtonComponent createAccountButton = GUIButtonComponent.create(table, "Create Account for Person", new CreateAccountForPerson(), 2, 0); | + | GUIButtonComponent createAccountButton = GUIButtonComponent.create(table, "Create Account for Person", new CreateAccountForPerson()); |
+ | createAccountButton.setLayoutData(TableLayoutData.create(2, 0)); | ||
CmdDestroyObject destroyCmd = new CmdDestroyObject(); | CmdDestroyObject destroyCmd = new CmdDestroyObject(); | ||
- | destroyCmd.type.set(Text.fromString(BankAccount.FQ_TYPE_NAME)); | + | destroyCmd.setType(BankAccount.CLASSIFIER); |
- | GUIButtonComponent destroyAccountButton = GUIButtonComponent.create(table, "Delete Account", destroyCmd, 2, 1); | + | GUIButtonComponent destroyAccountButton = GUIButtonComponent.create(table, "Delete Account", destroyCmd); |
+ | destroyAccountButton.setLayoutData(TableLayoutData.create(2, 1)); | ||
// let's fill in the accoutDetailsTable | // let's fill in the accoutDetailsTable | ||
Line 120: | Line 123: | ||
GUILabelComponent.create(accountDetailsTable, "Bank name:", 2, 0); | GUILabelComponent.create(accountDetailsTable, "Bank name:", 2, 0); | ||
- | GUIElementComponent numberEditor = GUIElementComponent.createSlotEditor(accountDetailsTable, BankAccount.PROPERTIES.number, 0, 1); | + | GUIEdit numberEditor = GUIEdit.createField(accountDetailsTable, BankAccount.PROPERTIES.number, 0, 1); |
- | GUIElementComponent amountEditor = GUIElementComponent.createSlotEditor(accountDetailsTable, BankAccount.PROPERTIES.amount, 1, 1); | + | GUIEdit amountEditor = GUIEdit.createField(accountDetailsTable, BankAccount.PROPERTIES.amount, 1, 1); |
- | GUIElementComponent bankNameEditor = GUIElementComponent.createSlotEditor(accountDetailsTable, BankAccount.PROPERTIES.bankName, 2, 1); | + | GUIEdit bankNameEditor = GUIEdit.createField(accountDetailsTable, BankAccount.PROPERTIES.bankName, 2, 1); |
// let's bind the components | // let's bind the components | ||
- | GUIComponentBinding.create(personsList.value, GUISlotValueInput.get(accountsList).element); // account list will be populated for the selected person in the persons list | + | // account list will be populated for the selected person in the persons list |
- | GUIComponentBinding.create(personsList.value, createAccountButton, CreateAccountForPerson.PROPERTIES.person); // this specifies that account will be created for selected person | + | GUIComponentBinding.create(personsList.opValue(), accountsList.ipSlotValueElement()); |
- | GUIComponentBinding.create(accountsList.value, destroyAccountButton, CmdDestroyObject.PROPERTIES.input); // this specifies that selected account will be destroyed | + | // this specifies that account will be created for selected person |
- | GUIComponentBinding.create(accountsList.value, GUISlotEditorKind.get(numberEditor).element); | + | GUIComponentBinding.create(personsList.opValue(), createAccountButton, CreateAccountForPerson.PROPERTIES.person); |
- | GUIComponentBinding.create(accountsList.value, GUISlotEditorKind.get(amountEditor).element); | + | // this specifies that selected account will be destroyed |
- | GUIComponentBinding.create(accountsList.value, GUISlotEditorKind.get(bankNameEditor).element); | + | GUIComponentBinding.create(accountsList.opValue(), destroyAccountButton, CmdDestroyObject.PROPERTIES.input); |
+ | GUIComponentBinding.create(accountsList.opValue(), numberEditor.ipElement()); | ||
+ | GUIComponentBinding.create(accountsList.opValue(), amountEditor.ipElement()); | ||
+ | GUIComponentBinding.create(accountsList.opValue(), bankNameEditor.ipElement()); | ||
} | } | ||
Line 136: | Line 142: | ||
{ | { | ||
GUIContext context = new GUIContext(); | GUIContext context = new GUIContext(); | ||
- | context.supercontext.set(DefaultContextInit.getRoot()); | + | DefaultContextInit.getRoot().addContext(context); |
GUIObjectSetting bankAccount = GUIObjectSetting.create(context, BankAccount.CLASSIFIER); | GUIObjectSetting bankAccount = GUIObjectSetting.create(context, BankAccount.CLASSIFIER); | ||
GUITextFeature.createName(bankAccount, BankAccount.PROPERTIES.number); | GUITextFeature.createName(bankAccount, BankAccount.PROPERTIES.number); | ||
- | GUITextFeature.createSeparator(bankAccount, "/", true); | + | GUITextFeature.createFixedSeparator(bankAccount, "/"); |
GUINumberTextFeature.createDescription(bankAccount, BankAccount.PROPERTIES.amount); | GUINumberTextFeature.createDescription(bankAccount, BankAccount.PROPERTIES.amount); | ||
GUIPictureFeature.createSmallIcon(bankAccount, "images/icons/bankaccount.png"); | GUIPictureFeature.createSmallIcon(bankAccount, "images/icons/bankaccount.png"); | ||
Line 146: | Line 152: | ||
GUIObjectSetting person = GUIObjectSetting.create(context, Person.CLASSIFIER); | GUIObjectSetting person = GUIObjectSetting.create(context, Person.CLASSIFIER); | ||
GUITextFeature.createName(person, Person.PROPERTIES.name); | GUITextFeature.createName(person, Person.PROPERTIES.name); | ||
- | GUITextFeature.createSeparator(person, "Age:", true); | + | GUITextFeature.createFixedSeparator(person, "Age:"); |
GUITextFeature.createDescription(person, Person.PROPERTIES.age); | GUITextFeature.createDescription(person, Person.PROPERTIES.age); | ||
GUIPictureFeature.createSmallIcon(person, "images/icons/person.png"); | GUIPictureFeature.createSmallIcon(person, "images/icons/person.png"); |