Differences

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

Link to this comparison view

element_component [2012/03/30 15:38]
srdjan.lukovic created 		element_component [2012/07/09 10:46] (current)
srdjan.lukovic [GUI Code]
Line 1: Line 1:
-===== Element Component Sample ==== +====== Data Input, View, and Edit Controls ====== 
-Element Component is bread and butter of SOLoist GUI development. This sample presents almost every combination in which //GUIElementComponent// could be used. Particular element components could be classified along three dimensions, by its kind (whether they edit object space or provide input/view), how it is presented on UI (its widget type) and how it gets content which presents.+ 
 +**Data Input, View, and Edit Controls** is a [[SOLoist Sample Applications|SOLoist sample application]] that demonstrates various SOLoist controls for entering, viewing, and editing data from the object space. It is based on a universal //Element Component// that can be configured and combined in very different ways, as shown in this example. The so-called //Service Access Points// for fetching objects from the object space into the UI and providing them on output pins are also introduced here. 
 + 
 +This example demonstrates almost every combination in which a //GUIElementComponent// could be used. Its configuration is done along three dimensions: 
 +  - its kind:  
 +    - //input//: it is not bound to any backend object to edit, but it just captures the user's input or selection and provides it on its output pin 
 +    - //edit//: it is bound to a backend object whose slot it edits. 
 +  - its widget type: how it is presented in the UI, and 
 +  - the source for the contents: how it gets the content which it presents (for lists, trees, and grids): 
 +    - as a collection provided on its input pin 
 +    - as a value of a slot of the object provided on its input pin. 
 + 
 +In this example, all elements are divided into two tab groups, according to their kind (inputs and editors). Every tab within these tab groups represents a different widget (field, combo box, suggest box, list, tree, and grid/table). The panel under the corresponding tab contains element components that get the objects to be rendered from different sources (collection or slot value). 
 + 
 +All changes made in the edit controls will instantly be saved in the object space (database): an editor element component with a field widget commits the changes as soon as it looses its focus. The changes are instantly reflected in the UI. 
 + 
 +The appropriate OQL query can inspect the changes in the object space [[http://soloistdemo.org/SampleApplications/oql | SOLoist Explorer]]. 
  
 ==== Live example ==== ==== Live example ====
  
-[[http://soloistdemo.org/SampleApplications/decklayouts.html]]+[[http://soloistdemo.org/SampleApplications/elementcomponent.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]] 
 +|{{screen:elementcomponent.png?300}}|
  
 ===== UML Model ===== ===== UML Model =====
-None.+ 
 +{{elementcomponents.png}}
  
 ===== Business Logic Code ===== ===== Business Logic Code =====
Line 17: Line 36:
 package rs.sol.sampleapps; package rs.sol.sampleapps;
  
 +import rs.sol.sampleapps.commands.FetchPersonsOnly;
 +import rs.sol.sampleapps.listener.ObjectSpaceInit;
 +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.builtindatatypes.Text;
 +import rs.sol.soloist.server.builtindomains.common.ClassifierInstanceDescriptor;
 +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.GUICommandComponent;
-import rs.sol.soloist.server.guiconfiguration.components.GUIDeckComponent; +
-import rs.sol.soloist.server.guiconfiguration.components.GUIHTMLComponent; +
-import rs.sol.soloist.server.guiconfiguration.components.GUIImageComponent;+
 import rs.sol.soloist.server.guiconfiguration.components.GUILabelComponent; import rs.sol.soloist.server.guiconfiguration.components.GUILabelComponent;
-import rs.sol.soloist.server.guiconfiguration.components.GUILinkComponent; 
 import rs.sol.soloist.server.guiconfiguration.components.GUIPanelComponent; import rs.sol.soloist.server.guiconfiguration.components.GUIPanelComponent;
 +import rs.sol.soloist.server.guiconfiguration.components.GUITabComponent;
 +import rs.sol.soloist.server.guiconfiguration.components.PerformImmediately;
 import rs.sol.soloist.server.guiconfiguration.construction.GUIComponentBinding; import rs.sol.soloist.server.guiconfiguration.construction.GUIComponentBinding;
-import rs.sol.soloist.server.guiconfiguration.layout.DockLayoutData; +import rs.sol.soloist.server.guiconfiguration.elementcomponents.GUIEdit; 
-import rs.sol.soloist.server.guiconfiguration.layout.DockLayoutDirection; +import rs.sol.soloist.server.guiconfiguration.elementcomponents.GUIInput; 
-import rs.sol.soloist.server.guiconfiguration.layout.XYLayout; +import rs.sol.soloist.server.guiconfiguration.layout.TableLayoutData; 
-import rs.sol.soloist.server.guiconfiguration.layout.XYLayoutData;+import rs.sol.soloist.server.guiconfiguration.nonvisualcompoments.GUIComparationFilter; 
 +import rs.sol.soloist.server.guiconfiguration.nonvisualcompoments.GUIFindAllInstancesSAPComponent; 
 +import rs.sol.soloist.server.guiconfiguration.nonvisualcompoments.GUIFindSingleInstanceSAPComponent; 
 +import rs.sol.soloist.server.guiconfiguration.style.GUIContext; 
 +import rs.sol.soloist.server.guiconfiguration.style.GUINavigatorFeature; 
 +import rs.sol.soloist.server.guiconfiguration.style.GUIObjectSetting; 
 +import rs.sol.soloist.server.guiconfiguration.style.GUIPictureFeature; 
 +import rs.sol.soloist.server.guiconfiguration.style.GUITextFeature;
 import rs.sol.soloist.server.server.SoloistServiceServlet; import rs.sol.soloist.server.server.SoloistServiceServlet;
  
-public enum DeckLayoutStaticComponents implements Initializer {+public enum ElementComponent implements Initializer {
  
  INSTANCE;  INSTANCE;
  
  @Override  @Override
- public void init() throws InitializerFailedException { + public void init() throws InitializerFailedException 
- GUIApplicationComponent application = new GUIApplicationComponent(); + { 
- application.name.set(Text.fromString("DeckLayoutStaticComponents")); + GUIApplicationComponent page = new GUIApplicationComponent(); 
- SoloistServiceServlet.registerApplication(application); + page.setName("ElementComponent");  
- GUIPanelComponent root = GUIPanelComponent.createFlow(application);+ SoloistServiceServlet.registerApplication(page); 
 + page.setContext(createContextAndStyles()); 
 + 
 + GUIPanelComponent root = GUIPanelComponent.createFlow(page); 
 + 
 + GUILabelComponent title = GUILabelComponent.create(root, "Element Component"); 
 + title.setStyle("titleStyle"); 
 + 
 + GUIPanelComponent topPanel = GUIPanelComponent.createFlow(root); 
 + topPanel.setStyle("topPanel"); 
 + 
 + // Service Access Points 
 + GUIFindAllInstancesSAPComponent allPersons = GUIFindAllInstancesSAPComponent.create(root, Person.CLASSIFIER); 
 + GUIFindSingleInstanceSAPComponent findJohnDoe = GUIFindSingleInstanceSAPComponent.create(root,  
 + Person.FQ_TYPE_NAME,  
 + Person.FQPropertyNames.desc,  
 + (ClassifierInstanceDescriptor)ElementDescriptor.create(Text.fromString(ObjectSpaceInit.JOHN_DOE_IDENTIFIER))); 
 + GUIFindSingleInstanceSAPComponent findJohnDeoRootDepartment = GUIFindSingleInstanceSAPComponent.create(root,  
 + BankDepartment.FQ_TYPE_NAME,  
 + BankDepartment.FQPropertyNames.desc,  
 + (ClassifierInstanceDescriptor)ElementDescriptor.create(Text.fromString(ObjectSpaceInit.JOHN_DOE_ROOT_DEPARTMENT))); 
 + GUICommandComponent allPersonsNotAdvisers = GUICommandComponent.create(root, new FetchPersonsOnly(), PerformImmediately.NOTHING); 
 + GUIComponentBinding.create(page.opStart(), allPersonsNotAdvisers.ipClick()); 
 + GUIFindSingleInstanceSAPComponent findJanneRoe = GUIFindSingleInstanceSAPComponent.create(root,  
 + Person.FQ_TYPE_NAME,  
 + Person.FQPropertyNames.desc,  
 + (ClassifierInstanceDescriptor)ElementDescriptor.create(Text.fromString(ObjectSpaceInit.JANNE_ROE_IDENTIFIER)));
   
- GUILabelComponent title = GUILabelComponent.create(root, "Deck and Layouts"); + // Inputs 
- title.styleName.set(Text.fromString("titleStyle"));+ GUIPanelComponent inputs = GUIPanelComponent.createFlow(topPanel); 
 + inputs.setStyle("leftSide"); 
 + GUILabelComponent l1 = GUILabelComponent.create(inputs, "Input kind"); 
 + l1.setStyle("subtitle"); 
 + GUITabComponent tabInput = GUITabComponent.create(inputs, "Field", "Combo", "Suggest", "List", "Tree", "Table"); 
 + GUIPanelComponent inputFieldsTable = GUIPanelComponent.createTable(tabInput); 
 + GUIPanelComponent inputComboTable = GUIPanelComponent.createTable(tabInput); 
 + GUIPanelComponent inputSuggestTable = GUIPanelComponent.createTable(tabInput); 
 + GUIPanelComponent inputListsTable = GUIPanelComponent.createTable(tabInput); 
 + GUIPanelComponent inputTreesTable = GUIPanelComponent.createTable(tabInput); 
 + GUIPanelComponent inputTablesTable = GUIPanelComponent.createTable(tabInput); 
 + 
 + int i = 0; 
 + GUIComparationFilter gcf0 = GUIComparationFilter.create(root, Integer.valueOf(i++)); 
 + GUIComponentBinding.create(tabInput.opVisibleChild(), gcf0.ipInput()); 
 + GUIComponentBinding.create(gcf0.opYes(), allPersons.ipRefresh()); 
 + GUIComparationFilter gcf1 = GUIComparationFilter.create(root, Integer.valueOf(i++)); 
 + GUIComponentBinding.create(tabInput.opVisibleChild(), gcf1.ipInput()); 
 + GUIComponentBinding.create(gcf1.opYes(), allPersons.ipRefresh()); 
 + GUIComparationFilter gcf2 = GUIComparationFilter.create(root, Integer.valueOf(i++)); 
 + GUIComponentBinding.create(tabInput.opVisibleChild(), gcf2.ipInput()); 
 + GUIComponentBinding.create(gcf2.opYes(), allPersons.ipRefresh()); 
 + GUIComparationFilter gcf3 = GUIComparationFilter.create(root, Integer.valueOf(i++)); 
 + GUIComponentBinding.create(tabInput.opVisibleChild(), gcf3.ipInput()); 
 + GUIComponentBinding.create(gcf3.opYes(), allPersons.ipRefresh()); 
 + GUIComparationFilter gcf4 = GUIComparationFilter.create(root, Integer.valueOf(i++)); 
 + GUIComponentBinding.create(tabInput.opVisibleChild(), gcf4.ipInput()); 
 + GUIComponentBinding.create(gcf4.opYes(), allPersons.ipRefresh()); 
 + GUIComparationFilter gcf5 = GUIComparationFilter.create(root, Integer.valueOf(i++)); 
 + GUIComponentBinding.create(tabInput.opVisibleChild(), gcf5.ipInput()); 
 + GUIComponentBinding.create(gcf5.opYes(), allPersons.ipRefresh()); 
 + 
 + // Input fields 
 + int row = 0, col = 0; 
 + GUILabelComponent.create(inputFieldsTable, "Text: ", row, col); 
 + GUIInput.createField(inputFieldsTable, Text.CLASSIFIER, row++, col + 1); 
 + 
 + GUILabelComponent.create(inputFieldsTable, "Integer: ", row, col); 
 + GUIInput.createField(inputFieldsTable, Integer.CLASSIFIER, row++, col + 1); 
 + 
 + GUILabelComponent.create(inputFieldsTable, "Real: ", row, col); 
 + GUIInput.createField(inputFieldsTable, Real.CLASSIFIER, row++, col + 1); 
 + 
 + GUILabelComponent.create(inputFieldsTable, "Date: ", row, col); 
 + GUIInput.createField(inputFieldsTable, Date.CLASSIFIER, row++, col + 1); 
 + 
 + GUILabelComponent.create(inputFieldsTable, "Boolean: ", row, col); 
 + GUIInput checkBox = GUIInput.createField(inputFieldsTable, Boolean.CLASSIFIER, row++, col + 1); 
 + checkBox.setLowerBound(1); 
 + checkBox.addInitialValue(Boolean.FALSE); 
 + 
 + GUILabelComponent.create(inputFieldsTable, "Enum: ", row, col); 
 + GUIInput.createField(inputFieldsTable, Repository.getRepository().getEnumeration(Gender.FQ_TYPE_NAME), row++, col + 1); 
 + 
 + // Input combo 
 + row = 0; col = 0; 
 + GUILabelComponent.create(inputComboTable, "Collection source: ", row, col); 
 + GUIInput collectionInputCombo = GUIInput.createCombo(inputComboTable, TableLayoutData.create(row++, col + 1)); 
 + GUIComponentBinding.create(allPersons.opValue(), collectionInputCombo.ipCollection()); 
 + 
 + GUILabelComponent.create(inputComboTable, "Slot value source: ", row, col); 
 + GUIInput slotValueInputCombo = GUIInput.createCombo(inputComboTable, Person.PROPERTIES.accounts, TableLayoutData.create(row++, col + 1)); 
 + GUIComponentBinding.create(findJohnDoe.opValue(), slotValueInputCombo.ipSlotValueElement()); 
 + 
 + // Input suggest 
 + row = 0; col = 0; 
 + GUILabelComponent.create(inputSuggestTable, "Collection source: ", row, col); 
 + GUIInput collectionInputSuggest = GUIInput.createSuggest(inputSuggestTable, TableLayoutData.create(row++, col + 1)); 
 + GUIComponentBinding.create(allPersons.opValue(), collectionInputSuggest.ipCollection()); 
 + 
 + GUILabelComponent.create(inputSuggestTable, "Slot value source: ", row, col); 
 + GUIInput slotValueInputSuggest = GUIInput.createSuggest(inputSuggestTable, Person.PROPERTIES.accounts, TableLayoutData.create(row++, col + 1)); 
 + GUIComponentBinding.create(findJohnDoe.opValue(), slotValueInputSuggest.ipSlotValueElement()); 
 + 
 + // Input lists 
 + row = 0; col = 0; 
 + GUILabelComponent.create(inputListsTable, "Collection source: ", row, col); 
 + GUIInput collectionInputList = GUIInput.createList(inputListsTable); 
 + collectionInputList.setLayoutData(TableLayoutData.create(row++, col + 1)); 
 + GUIComponentBinding.create(allPersons.opValue(), collectionInputList.ipCollection()); 
 + collectionInputList.setSize("250px", "200px"); 
 + collectionInputList.setStyle("listWidget");
   
- GUIPanelComponent topPanel = GUIPanelComponent.createFlow(root); + GUILabelComponent.create(inputListsTable, "Slot value source: ", row, col); 
- topPanel.styleName.set(Text.fromString("topPanel"));+ GUIInput slotValueInputList = GUIInput.createList(inputListsTable, Person.PROPERTIES.accounts); 
 + slotValueInputList.setLayoutData(TableLayoutData.create(row++, col + 1)); 
 + GUIComponentBinding.create(findJohnDoe.opValue(), slotValueInputList.ipSlotValueElement()); 
 + slotValueInputList.setSize("250px", "200px"); 
 + slotValueInputList.setStyle("listWidget");
  
- GUIDeckComponent deck = GUIDeckComponent.create(topPanel); + // Input trees 
- deck.styleName.set(Text.fromString("deckH"));+ row = 0; col = 0; 
 + GUILabelComponent.create(inputTreesTable, "Collection source: ", row, col); 
 + GUIInput personsTree = GUIInput.createTree(inputTreesTable); 
 + personsTree.setLayoutData(TableLayoutData.create(row++, col + 1)); 
 + GUIComponentBinding.create(allPersons.opValue(), personsTree.ipCollection()); 
 + personsTree.setSize("250px", "200px"); 
 + personsTree.setStyle("treeWidget"); 
 +  
 + GUILabelComponent.create(inputTreesTable, "Slot value source: ", row, col); 
 + GUIInput slotValueInputTree = GUIInput.createTree(inputTreesTable, BankDepartment.PROPERTIES.subDepartments); 
 + slotValueInputTree.setLayoutData(TableLayoutData.create(row++, col + 1)); 
 + GUIComponentBinding.create(findJohnDeoRootDepartment.opValue(), slotValueInputTree.ipSlotValueElement()); 
 + slotValueInputTree.setSize("250px", "200px"); 
 + slotValueInputTree.setStyle("treeWidget"); 
 +  
 + // Input tables 
 + row = 0; col = 0; 
 + GUILabelComponent.create(inputTablesTable, "Collection source: ", row, col);
  
- GUIPanelComponent verticalPanel = GUIPanelComponent.createVertical(deck); + GUIEdit genderValue = GUIEdit.createField(null, Person.PROPERTIES.gender); 
- createStaticComponents(verticalPanel);+ genderValue.setReadOnly(true); 
 + genderValue.setDisplayAsLabel(true);
  
- GUIPanelComponent horizontalPanel = GUIPanelComponent.createHorizontal(deck); + GUIEdit dateOfBirthValue = GUIEdit.createField(null, Person.PROPERTIES.dateOfBirth); 
- createStaticComponents(horizontalPanel);+ dateOfBirthValue.setReadOnly(true); 
 + dateOfBirthValue.setDisplayAsLabel(true);
  
- GUIPanelComponent flowPanel = GUIPanelComponent.createFlow(deck); + GUIEdit isMarriedValue = GUIEdit.createField(null, Person.PROPERTIES.isMarried); 
- createStaticComponents(flowPanel);+ isMarriedValue.setReadOnly(true); 
 + isMarriedValue.setDisplayAsLabel(true); 
 +  
 + GUIInput collectionInputTable = GUIInput.createTable(inputTablesTable, "Person", "Gender", "Date of Birth", "Is Married"); 
 + collectionInputTable.setColumnComponents(genderValue, dateOfBirthValue, isMarriedValue); 
 + collectionInputTable.setMinRows(3); 
 + collectionInputTable.setLayoutData(TableLayoutData.create(row++, col + 1)); 
 + GUIComponentBinding.create(allPersons.opValue(), collectionInputTable.ipCollection()); 
 +  
 + GUILabelComponent.create(inputTablesTable, "Slot value source: ", row, col);
  
- GUIPanelComponent table = GUIPanelComponent.createTable(deck); + GUIEdit bankNameValue = GUIEdit.createField(null, BankAccount.PROPERTIES.bankName); 
- int row = 0, col = 0; + bankNameValue.setReadOnly(true); 
- GUILabelComponent.create(table, "GUILabelComponent", row, col++); + bankNameValue.setDisplayAsLabel(true); 
- GUILinkComponent.create(table, "GUILinkComponent", "http://www.soloist4uml.com", row++, col--); +  
- GUIImageComponent.create(table, "images/logo.png", row, col++); + GUIInput slotValueInputTable = GUIInput.createTable(inputTablesTable, Person.PROPERTIES.accounts, "Bank Account", "Bank Name"); 
- GUIHTMLComponent.create(table, "&lt;h1>;GUI<;i&gt;HTMLComponent&lt;/i>;<;/h1&gt;", row, col);+ slotValueInputTable.setColumnComponents(bankNameValue); 
 + slotValueInputTable.setMinRows(3); 
 + slotValueInputTable.setLayoutData(TableLayoutData.create(row++, col + 1)); 
 + GUIComponentBinding.create(findJohnDoe.opValue(), slotValueInputTable.ipSlotValueElement()); 
 + 
 + // Edits 
 + GUIPanelComponent edits = GUIPanelComponent.createFlow(topPanel); 
 + GUILabelComponent l2 = GUILabelComponent.create(edits, "Slot Editor Kind"); 
 + l2.setStyle("subtitle "); 
 + GUITabComponent tabEdit = GUITabComponent.create(edits, "Field", "Combo", "Suggest", "List", "Tree", "Table"); 
 + GUIPanelComponent editFieldsTable = GUIPanelComponent.createTable(tabEdit); 
 + GUIPanelComponent editComboTable = GUIPanelComponent.createTable(tabEdit); 
 + GUIPanelComponent editSuggestTable = GUIPanelComponent.createTable(tabEdit); 
 + GUIPanelComponent editListsTable = GUIPanelComponent.createTable(tabEdit); 
 + GUIPanelComponent editTreesTable = GUIPanelComponent.createTable(tabEdit); 
 + GUIPanelComponent editTablesTable = GUIPanelComponent.createTable(tabEdit); 
 + 
 + i = 0; 
 + GUIComparationFilter gcfe0 = GUIComparationFilter.create(root, Integer.valueOf(i++)); 
 + GUIComponentBinding.create(tabEdit.opVisibleChild(), gcfe0.ipInput()); 
 + GUIComponentBinding.create(gcfe0.opYes(), allPersons.ipRefresh()); 
 + GUIComparationFilter gcfe1 = GUIComparationFilter.create(root, Integer.valueOf(i++)); 
 + GUIComponentBinding.create(tabEdit.opVisibleChild(), gcfe1.ipInput()); 
 + GUIComponentBinding.create(gcfe1.opYes(), allPersons.ipRefresh()); 
 + GUIComparationFilter gcfe2 = GUIComparationFilter.create(root, Integer.valueOf(i++)); 
 + GUIComponentBinding.create(tabEdit.opVisibleChild(), gcfe2.ipInput()); 
 + GUIComponentBinding.create(gcfe2.opYes(), allPersons.ipRefresh()); 
 + GUIComparationFilter gcfe3 = GUIComparationFilter.create(root, Integer.valueOf(i++)); 
 + GUIComponentBinding.create(tabEdit.opVisibleChild(), gcfe3.ipInput()); 
 + GUIComponentBinding.create(gcfe3.opYes(), allPersons.ipRefresh()); 
 + GUIComparationFilter gcfe4 = GUIComparationFilter.create(root, Integer.valueOf(i++)); 
 + GUIComponentBinding.create(tabEdit.opVisibleChild(), gcfe4.ipInput()); 
 + GUIComponentBinding.create(gcfe4.opYes(), allPersons.ipRefresh()); 
 + GUIComparationFilter gcfe5 = GUIComparationFilter.create(root, Integer.valueOf(i++)); 
 + GUIComponentBinding.create(tabEdit.opVisibleChild(), gcfe5.ipInput()); 
 + GUIComponentBinding.create(gcfe5.opYes(), allPersons.ipRefresh()); 
 + 
 + // Edit fields 
 + row = 0; col = 0; 
 + GUILabelComponent.create(editFieldsTable, "Text: ", row, col); 
 + GUIEdit textEditor = GUIEdit.createField(editFieldsTable, Person.PROPERTIES.name, row++, col + 1); 
 + 
 + GUILabelComponent.create(editFieldsTable, "Integer: ", row, col); 
 + GUIEdit integerEditor = GUIEdit.createField(editFieldsTable, Person.PROPERTIES.age, row++, col + 1); 
 + 
 + GUILabelComponent.create(editFieldsTable, "Real: ", row, col); 
 + GUIEdit realEditor = GUIEdit.createField(editFieldsTable, Person.PROPERTIES.height, row++, col + 1); 
 + 
 + GUILabelComponent.create(editFieldsTable, "Date: ", row, col); 
 + GUIEdit dateEditor = GUIEdit.createField(editFieldsTable, Person.PROPERTIES.dateOfBirth, row++, col + 1); 
 + 
 + GUILabelComponent.create(editFieldsTable, "Boolean: &quot;, row, col); 
 + GUIEdit booleanEditor = GUIEdit.createField(editFieldsTable, Person.PROPERTIES.isMarried, row++, col + 1); 
 + 
 + GUILabelComponent.create(editFieldsTable, &quot;Enum: &quot;, row, col); 
 + GUIEdit enumEditor = GUIEdit.createField(editFieldsTable, Person.PROPERTIES.gender, row++, col + 1); 
 + 
 + GUILabelComponent.create(editFieldsTable, &quot;Picture: ", row, col); 
 + GUIPanelComponent photoUpload = GUIEdit.createFile(editFieldsTable, Person.PROPERTIES.photo, true, false); 
 + photoUpload.setRowColumn(row++, col + 1);
  
- GUIPanelComponent dock = GUIPanelComponent.createDock(deck); + GUILabelComponent.create(editFieldsTable, "Picture Value: ", row, col); 
- dock.styleName.set(Text.fromString("box")); + GUIPanelComponent photoValue = GUIEdit.createPicture(editFieldsTable, Person.PROPERTIES.photo, false); 
- GUILabelComponent.create(dock, "GUILabelComponent").layoutData.set(new DockLayoutData(DockLayoutDirection.NORTH, 5)); + photoValue.setRowColumn(row++, col + 1);
- GUILinkComponent.create(dock, "GUILinkComponent", "http://www.soloist4uml.com", "_blank").layoutData +
- .set(new DockLayoutData(DockLayoutDirection.EAST, 9)); +
- GUIImageComponent.create(dock, "images/logo.png").layoutData.set(new DockLayoutData(DockLayoutDirection.WEST, 12)); +
- GUIHTMLComponent.create(dock, "<h1>GUI<i>HTMLComponent</i></h1>").layoutData.set(new DockLayoutData(DockLayoutDirection.SOUTH, 5));+
  
- GUIPanelComponent xy = new GUIPanelComponent(); + GUIComponentBinding.create(findJohnDoe.opValue(), textEditor.ipElement()); 
- xy.styleName.set(Text.fromString("box")); + GUIComponentBinding.create(findJohnDoe.opValue(), integerEditor.ipElement()); 
- xy.parent.set(deck); + GUIComponentBinding.create(findJohnDoe.opValue(), realEditor.ipElement()); 
- xy.layout.set(new XYLayout()); + GUIComponentBinding.create(findJohnDoe.opValue(), dateEditor.ipElement()); 
- GUILabelComponent.create(xy, "GUILabelComponent").layoutData.set(new XYLayoutData(5, 10, 120, 30)); + GUIComponentBinding.create(findJohnDoe.opValue(), booleanEditor.ipElement()); 
- GUILinkComponent.create(xy, "GUILinkComponent", "http://www.soloist4uml.com", "_blank").layoutData.set(new XYLayoutData(155, 20, 120, 30)); + GUIComponentBinding.create(findJohnDoe.opValue(), enumEditor.ipElement()); 
- GUIImageComponent.create(xy, "images/logo.png").layoutData.set(new XYLayoutData(55, 110, 160, 80)); + GUIComponentBinding.create(findJohnDoe.opValue(), photoUpload.ipRelay1()); 
- GUIHTMLComponent.create(xy, "<h1>GUI<i>HTMLComponent</i></h1>").layoutData.set(new XYLayoutData(205, 50, 280, 40));+ GUIComponentBinding.create(findJohnDoe.opValue(), photoValue.ipRelay1());
  
- GUIButtonComponent verticalBtn = GUIButtonComponent.create(topPanel, "Vertical"); + // Edit lists 
- GUIButtonComponent horizontalBtn = GUIButtonComponent.create(topPanel, "Horizontal"); + row = 0; col = 0; 
- GUIButtonComponent flowBtn = GUIButtonComponent.create(topPanel, "Flow"); + GUILabelComponent.create(editListsTable, "Collection source: ", row, col); 
- GUIButtonComponent tableBtn = GUIButtonComponent.create(topPanel, "Table"); + GUIEdit collectionEditList = GUIEdit.createList(editListsTable, BankAdviser.PROPERTIES.myClients); 
- GUIButtonComponent dockBtn = GUIButtonComponent.create(topPanel, "Dock"); + collectionEditList.setLayoutData(TableLayoutData.create(row++, col + 1)); 
- GUIButtonComponent xyBtn = GUIButtonComponent.create(topPanel, "XY");+ GUIComponentBinding.create(allPersonsNotAdvisers, FetchPersonsOnly.PROPERTIES.fetchedPersons, collectionEditList.ipCollection()); 
 + GUIComponentBinding.create(findJohnDoe.opValue(), collectionEditList.ipElement()); 
 + collectionEditList.setSize("250px", "200px"); 
 + collectionEditList.setStyle("listEditor");
   
- // clicking on button will send signal to show input pin of corresponding panel which in turn will be shown in deck + GUILabelComponent.create(editListsTable, "Slot value source: ", row, col); 
- GUIComponentBinding.create(verticalBtn.click, verticalPanel.show); + GUIEdit slotValueEditList = GUIEdit.createList(editListsTable, Person.PROPERTIES.successfulAdvisers, Person.PROPERTIES.myBankAdvisers); 
- GUIComponentBinding.create(horizontalBtn.click, horizontalPanel.show); + slotValueEditList.setLayoutData(TableLayoutData.create(row++, col + 1)); 
- GUIComponentBinding.create(flowBtn.click, flowPanel.show); + GUIComponentBinding.create(findJanneRoe.opValue(), slotValueEditList.ipElement()); 
- GUIComponentBinding.create(tableBtn.click, table.show); + GUIComponentBinding.create(findJanneRoe.opValue(), slotValueEditList.ipSlotValueElement()); 
- GUIComponentBinding.create(dockBtn.click, dock.show); + slotValueEditList.setSize("250px", "200px"); 
- GUIComponentBinding.create(xyBtn.click, xy.show);+ slotValueEditList.setStyle("listEditor"); 
 +  
 + // Edit combos 
 + row = 0; col = 0; 
 + GUILabelComponent.create(editComboTable, "Collection source: ", row, col); 
 + GUIEdit collectionEditCombo = GUIEdit.createCombo(editComboTable, BankAdviser.PROPERTIES.myClients, TableLayoutData.create(row++, col + 1)); 
 + GUIComponentBinding.create(allPersonsNotAdvisers, FetchPersonsOnly.PROPERTIES.fetchedPersons, collectionEditCombo.ipCollection()); 
 + GUIComponentBinding.create(findJohnDoe.opValue(), collectionEditCombo.ipElement());
  
- GUIButtonComponent backBtn = GUIButtonComponent.create(topPanel, "<<"); + GUILabelComponent.create(editComboTable, "Slot value source: ", row, col); 
- GUIButtonComponent forwardBtn = GUIButtonComponent.create(topPanel, ">>"); + GUIEdit slotValueEditCombo = GUIEdit.createCombo(editComboTable, Person.PROPERTIES.successfulAdvisers, Person.PROPERTIES.myBankAdvisers, TableLayoutData.create(row++, col + 1)); 
- GUIComponentBinding.create(forwardBtn.click, deck.forward); + GUIComponentBinding.create(findJanneRoe.opValue(), slotValueEditCombo.ipElement()); 
- GUIComponentBinding.create(backBtn.click, deck.back); + GUIComponentBinding.create(findJanneRoe.opValue(), slotValueEditCombo.ipSlotValueElement());
- }+
  
- private void createStaticComponents(GUIPanelComponent parent) { + // Edit suggests 
- GUILabelComponent.create(parent, "GUILabelComponent"); + GUILabelComponent.create(editSuggestTable, "Collection source: ", row, col); 
- GUILinkComponent.create(parent, "GUILinkComponent", "http://www.soloist4uml.com", "_blank"); + GUIEdit collectionEditSuggest = GUIEdit.createSuggest(editSuggestTable, BankAdviser.PROPERTIES.myClients, TableLayoutData.create(row++, col + 1)); 
- GUIImageComponent.create(parent, "images/logo.png"); + GUIComponentBinding.create(allPersonsNotAdvisers, FetchPersonsOnly.PROPERTIES.fetchedPersons, collectionEditSuggest.ipCollection()); 
- GUIHTMLComponent.create(parent, "&lt;h1&gt;GUI&lt;i&gt;HTMLComponent&lt;/i&gt;&lt;/h1&gt;");+ GUIComponentBinding.create(findJohnDoe.opValue(), collectionEditSuggest.ipElement()); 
 + 
 + GUILabelComponent.create(editSuggestTable, "Slot value source: ", row, col); 
 + GUIEdit slotValueEditSuggest = GUIEdit.createSuggest(editSuggestTable, Person.PROPERTIES.successfulAdvisers, Person.PROPERTIES.myBankAdvisers, TableLayoutData.create(row++, col + 1)); 
 + GUIComponentBinding.create(findJanneRoe.opValue(), slotValueEditSuggest.ipElement()); 
 + GUIComponentBinding.create(findJanneRoe.opValue(), slotValueEditSuggest.ipSlotValueElement()); 
 + 
 + // Edit trees 
 + row = 0; col = 0; 
 + GUILabelComponent.create(editTreesTable, "Collection source: ", row, col); 
 + GUIEdit collectionEditTree = GUIEdit.createTree(editTreesTable, BankAdviser.PROPERTIES.myDepartment); 
 + collectionEditTree.setLayoutData(TableLayoutData.create(row++, col + 1)); 
 + GUIComponentBinding.create(findJohnDoe.opValue(), collectionEditTree.ipElement()); 
 + GUIComponentBinding.create(findJohnDeoRootDepartment.opValue(), collectionEditTree.ipCollection()); 
 + collectionEditTree.setSize("250px", "200px"); 
 + collectionEditTree.setStyle("treeEditor"); 
 +  
 + GUILabelComponent.create(editTreesTable, "Slot value source: ", row, col); 
 + GUIEdit slotValueEditTree = GUIEdit.createTree(editTreesTable, BankAdviser.PROPERTIES.myDepartment, BankDepartment.PROPERTIES.subDepartments); 
 + slotValueEditTree.setLayoutData(TableLayoutData.create(row++, col + 1)); 
 + GUIComponentBinding.create(findJohnDoe.opValue(), slotValueEditTree.ipElement()); 
 + GUIComponentBinding.create(findJohnDeoRootDepartment.opValue(), slotValueEditTree.ipSlotValueElement()); 
 + slotValueEditTree.setSize("250px", "200px"); 
 + slotValueEditTree.setStyle("treeEditor"); 
 +  
 + // Edit tables 
 + row = 0; col = 0; 
 + GUILabelComponent.create(editTablesTable, "Collection source: &quot;, row, col); 
 + GUIEdit genderEditor = GUIEdit.createField(null, Person.PROPERTIES.gender); 
 + GUIEdit dateOfBirthEditor = GUIEdit.createField(null, Person.PROPERTIES.dateOfBirth); 
 + GUIEdit isMarriedEditor = GUIEdit.createField(null, Person.PROPERTIES.isMarried); 
 + 
 + GUIInput collectionEditTable = GUIInput.createTable(editTablesTable, &quot;Person&quot;, &quot;Gender&quot;, &quot;Date of Birth&quot;, &quot;Is Married"); 
 + collectionEditTable.setColumnComponents(genderEditor, dateOfBirthEditor, isMarriedEditor); 
 + collectionEditTable.setMinRows(3); 
 + collectionEditTable.setLayoutData(TableLayoutData.create(row++, col + 1)); 
 + GUIComponentBinding.create(allPersons.opValue(), collectionEditTable.ipCollection()); 
 +  
 + GUILabelComponent.create(editTablesTable, "Slot value source: ", row, col); 
 + GUIEdit bankNameEditor = GUIEdit.createField(null, BankAccount.PROPERTIES.bankName); 
 +  
 + GUIInput slotValueEditTable = GUIInput.createTable(editTablesTable, Person.PROPERTIES.accounts, "Bank Account", "Bank Name"); 
 + slotValueEditTable.setColumnComponents(bankNameEditor); 
 + slotValueEditTable.setMinRows(3); 
 + slotValueEditTable.setLayoutData(TableLayoutData.create(row++, col + 1)); 
 + GUIComponentBinding.create(findJohnDoe.opValue(), slotValueEditTable.ipSlotValueElement());
  }  }
  
 + /**
 + * This piece of code describes how will objects of different classes be presented on GUI (icons, name, etc.)
 + */
 + private GUIContext createContextAndStyles() {
 + GUIContext context = new GUIContext();
 + DefaultContextInit.getRoot().addContext(context);
 +
 + GUIObjectSetting person = GUIObjectSetting.create(context, Person.CLASSIFIER);
 + GUITextFeature.createName(person, Person.PROPERTIES.name);
 + GUITextFeature.createFixedSeparator(person, ":");
 + GUITextFeature.createDescription(person, Person.PROPERTIES.age);
 + GUIPictureFeature.createSmallIcon(person, "images/icons/person.png");
 + GUINavigatorFeature.createSubnodes(person, Person.FQPropertyNames.accounts);
 +
 + GUIObjectSetting bankAccount = GUIObjectSetting.create(context, BankAccount.CLASSIFIER);
 + GUITextFeature.createName(bankAccount, BankAccount.PROPERTIES.number);
 + GUITextFeature.createFixedSeparator(bankAccount, "/");
 + GUITextFeature.createDescription(bankAccount, BankAccount.PROPERTIES.amount);
 + GUIPictureFeature.createSmallIcon(bankAccount, "images/icons/bankaccount.png");
 +
 + GUIObjectSetting department = GUIObjectSetting.create(context, BankDepartment.CLASSIFIER);
 + GUITextFeature.createName(department, BankDepartment.PROPERTIES.name);
 + GUIPictureFeature.createSmallIcon(department, "images/icons/bankdepartment.png");
 + GUINavigatorFeature.createSubnodes(department, BankDepartment.FQPropertyNames.subDepartments);
 +
 + return context;
 + }
 } }
 </code> </code>

Trace: • wizard • examples • element_component • deck_and_layouts • polymorphic • dynamic_panel

Print/export